From 462a69043c6ef7b863caf95ef40b8ceb855db73a Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 9 Oct 2025 18:47:55 +0530 Subject: [PATCH 01/16] [docs] Update react-window package --- docs/package.json | 3 +-- pnpm-lock.yaml | 25 +++++++++++++------------ 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/package.json b/docs/package.json index 01c0def1eb805b..7b95a2922e8ed8 100644 --- a/docs/package.json +++ b/docs/package.json @@ -97,7 +97,7 @@ "react-swipeable-views": "^0.14.1", "react-transition-group": "^4.4.5", "react-virtuoso": "^4.14.1", - "react-window": "^1.8.11", + "react-window": "^2.0.0", "rimraf": "^6.0.1", "styled-components": "^6.1.19", "stylis": "4.2.0", @@ -126,7 +126,6 @@ "@types/react-dom": "^19.1.9", "@types/react-swipeable-views": "^0.13.6", "@types/react-transition-group": "^4.4.12", - "@types/react-window": "^1.8.8", "@types/stylis": "^4.2.7", "chai": "^6.0.1", "cross-fetch": "^4.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f54eff581aa77d..dd4b14b17abe19 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -716,8 +716,8 @@ importers: specifier: ^4.14.1 version: 4.14.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1) react-window: - specifier: ^1.8.11 - version: 1.8.11(react-dom@19.1.1(react@19.1.1))(react@19.1.1) + specifier: ^2.0.0 + version: 2.2.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1) rimraf: specifier: ^6.0.1 version: 6.0.1 @@ -797,9 +797,6 @@ importers: '@types/react-transition-group': specifier: ^4.4.12 version: 4.4.12(@types/react@19.1.13) - '@types/react-window': - specifier: ^1.8.8 - version: 1.8.8 '@types/stylis': specifier: ^4.2.7 version: 4.2.7 @@ -5505,9 +5502,6 @@ packages: peerDependencies: '@types/react': '*' - '@types/react-window@1.8.8': - resolution: {integrity: sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==} - '@types/react@19.1.13': resolution: {integrity: sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==} @@ -11225,6 +11219,12 @@ packages: react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-window@2.2.0: + resolution: {integrity: sha512-Y2L7yonHq6K1pQA2P98wT5QdIsEcjBTB7T8o6Mub12hH9eYppXoYu6vgClmcjlh3zfNcW2UrXiJJJqDxUY7GVw==} + peerDependencies: + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + react@19.1.1: resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==} engines: {node: '>=0.10.0'} @@ -17541,10 +17541,6 @@ snapshots: dependencies: '@types/react': 19.1.13 - '@types/react-window@1.8.8': - dependencies: - '@types/react': 19.1.13 - '@types/react@19.1.13': dependencies: csstype: 3.1.3 @@ -24336,6 +24332,11 @@ snapshots: react: 19.1.1 react-dom: 19.1.1(react@19.1.1) + react-window@2.2.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1): + dependencies: + react: 19.1.1 + react-dom: 19.1.1(react@19.1.1) + react@19.1.1: {} read-cache@1.0.0: From 557b03f85938bdb66ad9846eee7d1b02ee1e85a8 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 9 Oct 2025 18:59:00 +0530 Subject: [PATCH 02/16] fix code --- .../joy/components/autocomplete/Virtualize.js | 63 +++---- .../components/autocomplete/Virtualize.tsx | 69 ++++---- .../components/autocomplete/Virtualize.js | 139 ++++++++++----- .../components/autocomplete/Virtualize.tsx | 160 +++++++++++------- .../components/lists/VirtualizedList.js | 20 ++- .../components/lists/VirtualizedList.tsx | 22 +-- .../lists/VirtualizedList.tsx.preview | 18 +- 7 files changed, 286 insertions(+), 205 deletions(-) diff --git a/docs/data/joy/components/autocomplete/Virtualize.js b/docs/data/joy/components/autocomplete/Virtualize.js index 68044789df887b..d7f3890a9f9081 100644 --- a/docs/data/joy/components/autocomplete/Virtualize.js +++ b/docs/data/joy/components/autocomplete/Virtualize.js @@ -1,13 +1,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { FixedSizeList } from 'react-window'; +import { List } from 'react-window'; import { Popper } from '@mui/base/Popper'; import Autocomplete from '@mui/joy/Autocomplete'; -import AutocompleteListbox from '@mui/joy/AutocompleteListbox'; import AutocompleteOption from '@mui/joy/AutocompleteOption'; import FormControl from '@mui/joy/FormControl'; import FormLabel from '@mui/joy/FormLabel'; import ListSubheader from '@mui/joy/ListSubheader'; +import AutocompleteListbox from '@mui/joy/AutocompleteListbox'; const LISTBOX_PADDING = 6; // px @@ -34,29 +34,7 @@ function renderRow(props) { ); } -const OuterElementContext = React.createContext({}); - -const OuterElementType = React.forwardRef((props, ref) => { - const outerProps = React.useContext(OuterElementContext); - return ( - - ); -}); - // Adapter for react-window - const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) { const { children, anchorEl, open, modifiers, ...other } = props; const itemData = []; @@ -73,20 +51,31 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) return ( - - + - {renderRow} - - + tagName="ul" + /> + ); }); diff --git a/docs/data/joy/components/autocomplete/Virtualize.tsx b/docs/data/joy/components/autocomplete/Virtualize.tsx index 96737ce4ed76cd..e08413f74c1794 100644 --- a/docs/data/joy/components/autocomplete/Virtualize.tsx +++ b/docs/data/joy/components/autocomplete/Virtualize.tsx @@ -1,16 +1,18 @@ import * as React from 'react'; -import { FixedSizeList, ListChildComponentProps } from 'react-window'; +import { List, RowComponentProps } from 'react-window'; import { Popper } from '@mui/base/Popper'; import Autocomplete from '@mui/joy/Autocomplete'; -import AutocompleteListbox from '@mui/joy/AutocompleteListbox'; import AutocompleteOption from '@mui/joy/AutocompleteOption'; import FormControl from '@mui/joy/FormControl'; import FormLabel from '@mui/joy/FormLabel'; import ListSubheader from '@mui/joy/ListSubheader'; +import AutocompleteListbox, { + AutocompleteListboxProps, +} from '@mui/joy/AutocompleteListbox'; const LISTBOX_PADDING = 6; // px -function renderRow(props: ListChildComponentProps) { +function renderRow(props: RowComponentProps & { data: any }) { const { data, index, style } = props; const dataSet = data[index]; const inlineStyle = { @@ -33,27 +35,6 @@ function renderRow(props: ListChildComponentProps) { ); } -const OuterElementContext = React.createContext({}); - -const OuterElementType = React.forwardRef((props, ref) => { - const outerProps = React.useContext(OuterElementContext); - return ( - - ); -}); - // Adapter for react-window const ListboxComponent = React.forwardRef< HTMLDivElement, @@ -61,7 +42,8 @@ const ListboxComponent = React.forwardRef< anchorEl: any; open: boolean; modifiers: any[]; - } & React.HTMLAttributes + } & React.HTMLAttributes & + AutocompleteListboxProps >(function ListboxComponent(props, ref) { const { children, anchorEl, open, modifiers, ...other } = props; const itemData: Array = []; @@ -79,20 +61,31 @@ const ListboxComponent = React.forwardRef< return ( - - + - {renderRow} - - + tagName="ul" + /> + ); }); diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js index ca70916330891d..b970059cc25984 100644 --- a/docs/data/material/components/autocomplete/Virtualize.js +++ b/docs/data/material/components/autocomplete/Virtualize.js @@ -6,20 +6,19 @@ import useMediaQuery from '@mui/material/useMediaQuery'; import ListSubheader from '@mui/material/ListSubheader'; import Popper from '@mui/material/Popper'; import { useTheme, styled } from '@mui/material/styles'; -import { VariableSizeList } from 'react-window'; +import { List, useListRef } from 'react-window'; import Typography from '@mui/material/Typography'; const LISTBOX_PADDING = 8; // px -function renderRow(props) { - const { data, index, style } = props; - const dataSet = data[index]; +function RowComponent({ index, itemData, style }) { + const dataSet = itemData[index]; const inlineStyle = { ...style, - top: style.top + LISTBOX_PADDING, + top: (style.top ?? 0) + LISTBOX_PADDING, }; - if (dataSet.hasOwnProperty('group')) { + if ('group' in dataSet) { return ( {dataSet.group} @@ -36,32 +35,51 @@ function renderRow(props) { ); } -const OuterElementContext = React.createContext({}); - -const OuterElementType = React.forwardRef((props, ref) => { - const outerProps = React.useContext(OuterElementContext); - return
; -}); - -function useResetCache(data) { - const ref = React.useRef(null); - React.useEffect(() => { - if (ref.current != null) { - ref.current.resetAfterIndex(0, true); - } - }, [data]); - return ref; -} +// Adapter for react-window v2 + +RowComponent.propTypes = { + index: PropTypes.number.isRequired, + itemData: PropTypes.arrayOf( + PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.element, PropTypes.number, PropTypes.string]) + .isRequired, + ), + PropTypes.shape({ + children: PropTypes.node, + group: PropTypes.string.isRequired, + key: PropTypes.number.isRequired, + }), + ]).isRequired, + ).isRequired, + style: PropTypes.object.isRequired, +}; -// Adapter for react-window const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) { - const { children, ...other } = props; + const { children, internalListRef, onItemsBuilt, ...other } = props; const itemData = []; + const optionIndexMap = React.useMemo(() => new Map(), []); + children.forEach((item) => { itemData.push(item); - itemData.push(...(item.children || [])); + if ('children' in item && Array.isArray(item.children)) { + itemData.push(...item.children); + } }); + // Map option values to their indices in the flattened array + itemData.forEach((item, index) => { + if (Array.isArray(item) && item[1]) { + optionIndexMap.set(item[1], index); + } + }); + + React.useEffect(() => { + if (onItemsBuilt) { + onItemsBuilt(optionIndexMap); + } + }, [onItemsBuilt, optionIndexMap]); + const theme = useTheme(); const smUp = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true, @@ -73,42 +91,52 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) if (child.hasOwnProperty('group')) { return 48; } - return itemSize; }; const getHeight = () => { - if (itemCount > 8) { - return 8 * itemSize; + if (itemCount > 6) { + return 6 * itemSize; } return itemData.map(getChildSize).reduce((a, b) => a + b, 0); }; - const gridRef = useResetCache(itemCount); + // Separate className for List, other props for wrapper div (ARIA, handlers) + const { className, style, ...otherProps } = other; return ( -
- - getChildSize(itemData[index])} - overscanCount={5} - itemCount={itemCount} - > - {renderRow} - - +
+ getChildSize(itemData[index])} + rowComponent={RowComponent} + rowProps={{ itemData }} + style={{ + height: getHeight() + 2 * LISTBOX_PADDING, + width: '100%', + margin: 0, + padding: 0, + }} + overscanCount={5} + tagName="ul" + />
); }); ListboxComponent.propTypes = { children: PropTypes.node, + className: PropTypes.string, + internalListRef: PropTypes.any, + onItemsBuilt: PropTypes.func, + style: PropTypes.object, }; function random(length) { @@ -138,6 +166,24 @@ const OPTIONS = Array.from(new Array(10000)) .sort((a, b) => a.toUpperCase().localeCompare(b.toUpperCase())); export default function Virtualize() { + // Use react-window v2's useListRef hook for imperative API access + const internalListRef = useListRef(null); + const optionIndexMapRef = React.useRef(new Map()); + + const handleItemsBuilt = React.useCallback((optionIndexMap) => { + optionIndexMapRef.current = optionIndexMap; + }, []); + + // Handle keyboard navigation by scrolling to highlighted option + const handleHighlightChange = (event, option) => { + if (option && internalListRef.current) { + const index = optionIndexMapRef.current.get(option); + if (index !== undefined) { + internalListRef.current.scrollToRow({ index, align: 'auto' }); + } + } + }; + return ( } renderOption={(props, option, state) => [props, option, state.index]} renderGroup={(params) => params} + onHighlightChange={handleHighlightChange} slots={{ popper: StyledPopper, }} slotProps={{ listbox: { component: ListboxComponent, + internalListRef, + onItemsBuilt: handleItemsBuilt, }, }} /> diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/Virtualize.tsx index e2d8923bc3d116..2187fecec0de20 100644 --- a/docs/data/material/components/autocomplete/Virtualize.tsx +++ b/docs/data/material/components/autocomplete/Virtualize.tsx @@ -5,20 +5,34 @@ import useMediaQuery from '@mui/material/useMediaQuery'; import ListSubheader from '@mui/material/ListSubheader'; import Popper from '@mui/material/Popper'; import { useTheme, styled } from '@mui/material/styles'; -import { VariableSizeList, ListChildComponentProps } from 'react-window'; +import { List, RowComponentProps, useListRef } from 'react-window'; import Typography from '@mui/material/Typography'; const LISTBOX_PADDING = 8; // px -function renderRow(props: ListChildComponentProps) { - const { data, index, style } = props; - const dataSet = data[index]; +type ItemData = Array< + | { + key: number; + group: string; + children: React.ReactNode; + } + | [React.ReactElement, string, number] +>; + +function RowComponent({ + index, + itemData, + style, +}: RowComponentProps & { + itemData: ItemData; +}) { + const dataSet = itemData[index]; const inlineStyle = { ...style, - top: (style.top as number) + LISTBOX_PADDING, + top: ((style.top as number) ?? 0) + LISTBOX_PADDING, }; - if (dataSet.hasOwnProperty('group')) { + if ('group' in dataSet) { return ( {dataSet.group} @@ -35,40 +49,37 @@ function renderRow(props: ListChildComponentProps) { ); } -const OuterElementContext = React.createContext({}); +// Adapter for react-window v2 +const ListboxComponent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & { + internalListRef?: any; + onItemsBuilt?: (optionIndexMap: Map) => void; + } +>(function ListboxComponent(props, ref) { + const { children, internalListRef, onItemsBuilt, ...other } = props; + const itemData: ItemData = []; + const optionIndexMap = React.useMemo(() => new Map(), []); + + (children as ItemData).forEach((item) => { + itemData.push(item); + if ('children' in item && Array.isArray(item.children)) { + itemData.push(...item.children); + } + }); -const OuterElementType = React.forwardRef((props, ref) => { - const outerProps = React.useContext(OuterElementContext); - return
; -}); + // Map option values to their indices in the flattened array + itemData.forEach((item, index) => { + if (Array.isArray(item) && item[1]) { + optionIndexMap.set(item[1], index); + } + }); -function useResetCache(data: any) { - const ref = React.useRef(null); React.useEffect(() => { - if (ref.current != null) { - ref.current.resetAfterIndex(0, true); + if (onItemsBuilt) { + onItemsBuilt(optionIndexMap); } - }, [data]); - return ref; -} - -// Adapter for react-window -const ListboxComponent = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(function ListboxComponent(props, ref) { - const { children, ...other } = props; - const itemData: React.ReactElement[] = []; - (children as React.ReactElement[]).forEach( - ( - item: React.ReactElement & { - children?: React.ReactElement[]; - }, - ) => { - itemData.push(item); - itemData.push(...(item.children || [])); - }, - ); + }, [onItemsBuilt, optionIndexMap]); const theme = useTheme(); const smUp = useMediaQuery(theme.breakpoints.up('sm'), { @@ -77,40 +88,46 @@ const ListboxComponent = React.forwardRef< const itemCount = itemData.length; const itemSize = smUp ? 36 : 48; - const getChildSize = (child: React.ReactElement) => { + const getChildSize = (child: ItemData[number]) => { if (child.hasOwnProperty('group')) { return 48; } - return itemSize; }; const getHeight = () => { - if (itemCount > 8) { - return 8 * itemSize; + if (itemCount > 6) { + return 6 * itemSize; } return itemData.map(getChildSize).reduce((a, b) => a + b, 0); }; - const gridRef = useResetCache(itemCount); + // Separate className for List, other props for wrapper div (ARIA, handlers) + const { className, style, ...otherProps } = other; return ( -
- - getChildSize(itemData[index])} - overscanCount={5} - itemCount={itemCount} - > - {renderRow} - - +
+ getChildSize(itemData[index])} + rowComponent={RowComponent} + rowProps={{ itemData }} + style={{ + height: getHeight() + 2 * LISTBOX_PADDING, + width: '100%', + margin: 0, + padding: 0, + }} + overscanCount={5} + tagName="ul" + />
); }); @@ -142,6 +159,30 @@ const OPTIONS = Array.from(new Array(10000)) .sort((a: string, b: string) => a.toUpperCase().localeCompare(b.toUpperCase())); export default function Virtualize() { + // Use react-window v2's useListRef hook for imperative API access + const internalListRef = useListRef(null); + const optionIndexMapRef = React.useRef>(new Map()); + + const handleItemsBuilt = React.useCallback( + (optionIndexMap: Map) => { + optionIndexMapRef.current = optionIndexMap; + }, + [], + ); + + // Handle keyboard navigation by scrolling to highlighted option + const handleHighlightChange = ( + event: React.SyntheticEvent, + option: string | null, + ) => { + if (option && internalListRef.current) { + const index = optionIndexMapRef.current.get(option); + if (index !== undefined) { + internalListRef.current.scrollToRow({ index, align: 'auto' }); + } + } + }; + return ( params as any} + onHighlightChange={handleHighlightChange} slots={{ popper: StyledPopper, }} slotProps={{ listbox: { component: ListboxComponent, - }, + internalListRef, + onItemsBuilt: handleItemsBuilt, + } as any, }} /> ); diff --git a/docs/data/material/components/lists/VirtualizedList.js b/docs/data/material/components/lists/VirtualizedList.js index 7b74d1155f12d3..0bbb29d669eed0 100644 --- a/docs/data/material/components/lists/VirtualizedList.js +++ b/docs/data/material/components/lists/VirtualizedList.js @@ -3,7 +3,7 @@ import Box from '@mui/material/Box'; import ListItem from '@mui/material/ListItem'; import ListItemButton from '@mui/material/ListItemButton'; import ListItemText from '@mui/material/ListItemText'; -import { FixedSizeList } from 'react-window'; +import { List } from 'react-window'; function renderRow(props) { const { index, style } = props; @@ -22,15 +22,17 @@ export default function VirtualizedList() { - - {renderRow} - + rowComponent={renderRow} + /> ); } diff --git a/docs/data/material/components/lists/VirtualizedList.tsx b/docs/data/material/components/lists/VirtualizedList.tsx index 899b0821ad0a3f..c410f1fdedaa55 100644 --- a/docs/data/material/components/lists/VirtualizedList.tsx +++ b/docs/data/material/components/lists/VirtualizedList.tsx @@ -3,9 +3,9 @@ import Box from '@mui/material/Box'; import ListItem from '@mui/material/ListItem'; import ListItemButton from '@mui/material/ListItemButton'; import ListItemText from '@mui/material/ListItemText'; -import { FixedSizeList, ListChildComponentProps } from 'react-window'; +import { List, RowComponentProps } from 'react-window'; -function renderRow(props: ListChildComponentProps) { +function renderRow(props: RowComponentProps) { const { index, style } = props; return ( @@ -22,15 +22,17 @@ export default function VirtualizedList() { - - {renderRow} - + rowComponent={renderRow} + /> ); } diff --git a/docs/data/material/components/lists/VirtualizedList.tsx.preview b/docs/data/material/components/lists/VirtualizedList.tsx.preview index d631cc086c4ba0..7d402f1f2a92c0 100644 --- a/docs/data/material/components/lists/VirtualizedList.tsx.preview +++ b/docs/data/material/components/lists/VirtualizedList.tsx.preview @@ -1,9 +1,11 @@ - - {renderRow} - \ No newline at end of file + rowComponent={renderRow} +/> \ No newline at end of file From 0d0c1f02bb0f241903c66139ae570351f1c38f8e Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 13 Oct 2025 19:56:05 +0530 Subject: [PATCH 03/16] fix-pnpm-loc --- pnpm-lock.yaml | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1a9e44d90d435f..81af99845d9bc3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -719,8 +719,8 @@ importers: specifier: ^4.14.1 version: 4.14.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0) react-window: - specifier: ^1.8.11 - version: 1.8.11(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + specifier: ^2.0.0 + version: 2.2.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0) rimraf: specifier: ^6.0.1 version: 6.0.1 @@ -800,9 +800,6 @@ importers: '@types/react-transition-group': specifier: ^4.4.12 version: 4.4.12(@types/react@19.2.2) - '@types/react-window': - specifier: ^1.8.8 - version: 1.8.8 '@types/stylis': specifier: ^4.2.7 version: 4.2.7 @@ -5509,9 +5506,6 @@ packages: peerDependencies: '@types/react': '*' - '@types/react-window@1.8.8': - resolution: {integrity: sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==} - '@types/react@19.2.2': resolution: {integrity: sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==} @@ -11229,6 +11223,12 @@ packages: react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-window@2.2.1: + resolution: {integrity: sha512-jrUMKDLW1B4yX4OU0QjdytGgWIg6wqWfiTe86lUhFsCUltkNNB/zYxFU0DTKAzBOMRbkpLVWS1IkLvQeO4L7nw==} + peerDependencies: + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + react@19.2.0: resolution: {integrity: sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==} engines: {node: '>=0.10.0'} @@ -17548,10 +17548,6 @@ snapshots: dependencies: '@types/react': 19.2.2 - '@types/react-window@1.8.8': - dependencies: - '@types/react': 19.2.2 - '@types/react@19.2.2': dependencies: csstype: 3.1.3 @@ -24341,6 +24337,11 @@ snapshots: react: 19.2.0 react-dom: 19.2.0(react@19.2.0) + react-window@2.2.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0): + dependencies: + react: 19.2.0 + react-dom: 19.2.0(react@19.2.0) + react@19.2.0: {} read-cache@1.0.0: From a94694c279fd2388570feea9c5bb13fa465eecc3 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 13 Oct 2025 20:14:22 +0530 Subject: [PATCH 04/16] remove margin,padding --- docs/data/material/components/autocomplete/Virtualize.js | 2 -- docs/data/material/components/autocomplete/Virtualize.tsx | 2 -- 2 files changed, 4 deletions(-) diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js index b970059cc25984..30165f002a0c32 100644 --- a/docs/data/material/components/autocomplete/Virtualize.js +++ b/docs/data/material/components/autocomplete/Virtualize.js @@ -121,8 +121,6 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) style={{ height: getHeight() + 2 * LISTBOX_PADDING, width: '100%', - margin: 0, - padding: 0, }} overscanCount={5} tagName="ul" diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/Virtualize.tsx index 2187fecec0de20..8ce38a4420458f 100644 --- a/docs/data/material/components/autocomplete/Virtualize.tsx +++ b/docs/data/material/components/autocomplete/Virtualize.tsx @@ -122,8 +122,6 @@ const ListboxComponent = React.forwardRef< style={{ height: getHeight() + 2 * LISTBOX_PADDING, width: '100%', - margin: 0, - padding: 0, }} overscanCount={5} tagName="ul" From 082464d836473b0b4748dc7988841524d9ae0ac6 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Tue, 14 Oct 2025 19:34:36 +0530 Subject: [PATCH 05/16] pnpm dedupe --- pnpm-lock.yaml | 98 +++++++++++++++++++++++++------------------------- 1 file changed, 49 insertions(+), 49 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 81af99845d9bc3..6416e5249092bc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -309,7 +309,7 @@ importers: version: link:../../packages/mui-utils/build next: specifier: latest - version: 15.5.4(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + version: 15.5.5(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) react: specifier: ^19.2.0 version: 19.2.0 @@ -319,7 +319,7 @@ importers: devDependencies: '@pigment-css/nextjs-plugin': specifier: 0.0.30 - version: 0.0.30(@types/react@19.2.2)(next@15.5.4(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)(typescript@5.9.3)(webpack-sources@3.3.3) + version: 0.0.30(@types/react@19.2.2)(next@15.5.5(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)(typescript@5.9.3)(webpack-sources@3.3.3) '@types/node': specifier: ^20.19.19 version: 20.19.19 @@ -364,7 +364,7 @@ importers: version: link:../../packages/mui-utils/build next: specifier: latest - version: 15.5.4(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + version: 15.5.5(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) react: specifier: ^19.2.0 version: 19.2.0 @@ -374,7 +374,7 @@ importers: devDependencies: '@pigment-css/nextjs-plugin': specifier: 0.0.30 - version: 0.0.30(@types/react@19.2.2)(next@15.5.4(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)(typescript@5.9.3)(webpack-sources@3.3.3) + version: 0.0.30(@types/react@19.2.2)(next@15.5.5(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)(typescript@5.9.3)(webpack-sources@3.3.3) '@types/node': specifier: ^20.19.19 version: 20.19.19 @@ -660,7 +660,7 @@ importers: version: 5.3.6(@mui/material@packages+mui-material+build)(@types/react@19.2.2)(react@19.2.0) next: specifier: ^15.5.4 - version: 15.5.4(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + version: 15.5.5(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) notistack: specifier: 3.0.2 version: 3.0.2(csstype@3.1.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) @@ -1229,7 +1229,7 @@ importers: version: 19.2.2 next: specifier: ^15.5.4 - version: 15.5.4(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + version: 15.5.5(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) react: specifier: ^19.2.0 version: 19.2.0 @@ -1398,7 +1398,7 @@ importers: version: 3.3.3 next: specifier: ^15.5.4 - version: 15.5.4(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + version: 15.5.5(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) react: specifier: ^19.2.0 version: 19.2.0 @@ -1593,7 +1593,7 @@ importers: version: 19.2.2 next: specifier: ^15.5.4 - version: 15.5.4(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + version: 15.5.5(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) react: specifier: ^19.2.0 version: 19.2.0 @@ -4345,56 +4345,56 @@ packages: engines: {node: '>=18.14.0'} hasBin: true - '@next/env@15.5.4': - resolution: {integrity: sha512-27SQhYp5QryzIT5uO8hq99C69eLQ7qkzkDPsk3N+GuS2XgOgoYEeOav7Pf8Tn4drECOVDsDg8oj+/DVy8qQL2A==} + '@next/env@15.5.5': + resolution: {integrity: sha512-2Zhvss36s/yL+YSxD5ZL5dz5pI6ki1OLxYlh6O77VJ68sBnlUrl5YqhBgCy7FkdMsp9RBeGFwpuDCdpJOqdKeQ==} '@next/eslint-plugin-next@15.5.4': resolution: {integrity: sha512-SR1vhXNNg16T4zffhJ4TS7Xn7eq4NfKfcOsRwea7RIAHrjRpI9ALYbamqIJqkAhowLlERffiwk0FMvTLNdnVtw==} - '@next/swc-darwin-arm64@15.5.4': - resolution: {integrity: sha512-nopqz+Ov6uvorej8ndRX6HlxCYWCO3AHLfKK2TYvxoSB2scETOcfm/HSS3piPqc3A+MUgyHoqE6je4wnkjfrOA==} + '@next/swc-darwin-arm64@15.5.5': + resolution: {integrity: sha512-lYExGHuFIHeOxf40mRLWoA84iY2sLELB23BV5FIDHhdJkN1LpRTPc1MDOawgTo5ifbM5dvAwnGuHyNm60G1+jw==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] - '@next/swc-darwin-x64@15.5.4': - resolution: {integrity: sha512-QOTCFq8b09ghfjRJKfb68kU9k2K+2wsC4A67psOiMn849K9ZXgCSRQr0oVHfmKnoqCbEmQWG1f2h1T2vtJJ9mA==} + '@next/swc-darwin-x64@15.5.5': + resolution: {integrity: sha512-cacs/WQqa96IhqUm+7CY+z/0j9sW6X80KE07v3IAJuv+z0UNvJtKSlT/T1w1SpaQRa9l0wCYYZlRZUhUOvEVmg==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] - '@next/swc-linux-arm64-gnu@15.5.4': - resolution: {integrity: sha512-eRD5zkts6jS3VfE/J0Kt1VxdFqTnMc3QgO5lFE5GKN3KDI/uUpSyK3CjQHmfEkYR4wCOl0R0XrsjpxfWEA++XA==} + '@next/swc-linux-arm64-gnu@15.5.5': + resolution: {integrity: sha512-tLd90SvkRFik6LSfuYjcJEmwqcNEnVYVOyKTacSazya/SLlSwy/VYKsDE4GIzOBd+h3gW+FXqShc2XBavccHCg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-musl@15.5.4': - resolution: {integrity: sha512-TOK7iTxmXFc45UrtKqWdZ1shfxuL4tnVAOuuJK4S88rX3oyVV4ZkLjtMT85wQkfBrOOvU55aLty+MV8xmcJR8A==} + '@next/swc-linux-arm64-musl@15.5.5': + resolution: {integrity: sha512-ekV76G2R/l3nkvylkfy9jBSYHeB4QcJ7LdDseT6INnn1p51bmDS1eGoSoq+RxfQ7B1wt+Qa0pIl5aqcx0GLpbw==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - '@next/swc-linux-x64-gnu@15.5.4': - resolution: {integrity: sha512-7HKolaj+481FSW/5lL0BcTkA4Ueam9SPYWyN/ib/WGAFZf0DGAN8frNpNZYFHtM4ZstrHZS3LY3vrwlIQfsiMA==} + '@next/swc-linux-x64-gnu@15.5.5': + resolution: {integrity: sha512-tI+sBu+3FmWtqlqD4xKJcj3KJtqbniLombKTE7/UWyyoHmOyAo3aZ7QcEHIOgInXOG1nt0rwh0KGmNbvSB0Djg==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - '@next/swc-linux-x64-musl@15.5.4': - resolution: {integrity: sha512-nlQQ6nfgN0nCO/KuyEUwwOdwQIGjOs4WNMjEUtpIQJPR2NUfmGpW2wkJln1d4nJ7oUzd1g4GivH5GoEPBgfsdw==} + '@next/swc-linux-x64-musl@15.5.5': + resolution: {integrity: sha512-kDRh+epN/ulroNJLr+toDjN+/JClY5L+OAWjOrrKCI0qcKvTw9GBx7CU/rdA2bgi4WpZN3l0rf/3+b8rduEwrQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - '@next/swc-win32-arm64-msvc@15.5.4': - resolution: {integrity: sha512-PcR2bN7FlM32XM6eumklmyWLLbu2vs+D7nJX8OAIoWy69Kef8mfiN4e8TUv2KohprwifdpFKPzIP1njuCjD0YA==} + '@next/swc-win32-arm64-msvc@15.5.5': + resolution: {integrity: sha512-GDgdNPFFqiKjTrmfw01sMMRWhVN5wOCmFzPloxa7ksDfX6TZt62tAK986f0ZYqWpvDFqeBCLAzmgTURvtQBdgw==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] - '@next/swc-win32-x64-msvc@15.5.4': - resolution: {integrity: sha512-1ur2tSHZj8Px/KMAthmuI9FMp/YFusMMGoRNJaRZMOlSkgvLjzosSdQI0cJAKogdHl3qXUQKL9MGaYvKwA7DXg==} + '@next/swc-win32-x64-msvc@15.5.5': + resolution: {integrity: sha512-5kE3oRJxc7M8RmcTANP8RGoJkaYlwIiDD92gSwCjJY0+j8w8Sl1lvxgQ3bxfHY2KkHFai9tpy/Qx1saWV8eaJQ==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -10128,8 +10128,8 @@ packages: neo-async@2.6.2: resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==} - next@15.5.4: - resolution: {integrity: sha512-xH4Yjhb82sFYQfY3vbkJfgSDgXvBB6a8xPs9i35k6oZJRoQRihZH+4s9Yo2qsWpzBmZ3lPXaJ2KPXLfkvW4LnA==} + next@15.5.5: + resolution: {integrity: sha512-OQVdBPtpBfq7HxFN0kOVb7rXXOSIkt5lTzDJDGRBcOyVvNRIWFauMqi1gIHd1pszq1542vMOGY0HP4CaiALfkA==} engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0} hasBin: true peerDependencies: @@ -16186,34 +16186,34 @@ snapshots: - rollup - supports-color - '@next/env@15.5.4': {} + '@next/env@15.5.5': {} '@next/eslint-plugin-next@15.5.4': dependencies: fast-glob: 3.3.1 - '@next/swc-darwin-arm64@15.5.4': + '@next/swc-darwin-arm64@15.5.5': optional: true - '@next/swc-darwin-x64@15.5.4': + '@next/swc-darwin-x64@15.5.5': optional: true - '@next/swc-linux-arm64-gnu@15.5.4': + '@next/swc-linux-arm64-gnu@15.5.5': optional: true - '@next/swc-linux-arm64-musl@15.5.4': + '@next/swc-linux-arm64-musl@15.5.5': optional: true - '@next/swc-linux-x64-gnu@15.5.4': + '@next/swc-linux-x64-gnu@15.5.5': optional: true - '@next/swc-linux-x64-musl@15.5.4': + '@next/swc-linux-x64-musl@15.5.5': optional: true - '@next/swc-win32-arm64-msvc@15.5.4': + '@next/swc-win32-arm64-msvc@15.5.5': optional: true - '@next/swc-win32-x64-msvc@15.5.4': + '@next/swc-win32-x64-msvc@15.5.5': optional: true '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3': @@ -16557,10 +16557,10 @@ snapshots: '@opentelemetry/api@1.8.0': optional: true - '@pigment-css/nextjs-plugin@0.0.30(@types/react@19.2.2)(next@15.5.4(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)(typescript@5.9.3)(webpack-sources@3.3.3)': + '@pigment-css/nextjs-plugin@0.0.30(@types/react@19.2.2)(next@15.5.5(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)(typescript@5.9.3)(webpack-sources@3.3.3)': dependencies: '@pigment-css/unplugin': 0.0.30(@types/react@19.2.2)(react@19.2.0)(typescript@5.9.3)(webpack-sources@3.3.3) - next: 15.5.4(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + next: 15.5.5(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) transitivePeerDependencies: - '@types/react' - react @@ -23091,9 +23091,9 @@ snapshots: neo-async@2.6.2: {} - next@15.5.4(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0): + next@15.5.5(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0): dependencies: - '@next/env': 15.5.4 + '@next/env': 15.5.5 '@swc/helpers': 0.5.15 caniuse-lite: 1.0.30001727 postcss: 8.4.31 @@ -23101,14 +23101,14 @@ snapshots: react-dom: 19.2.0(react@19.2.0) styled-jsx: 5.1.6(@babel/core@7.28.4)(babel-plugin-macros@3.1.0)(react@19.2.0) optionalDependencies: - '@next/swc-darwin-arm64': 15.5.4 - '@next/swc-darwin-x64': 15.5.4 - '@next/swc-linux-arm64-gnu': 15.5.4 - '@next/swc-linux-arm64-musl': 15.5.4 - '@next/swc-linux-x64-gnu': 15.5.4 - '@next/swc-linux-x64-musl': 15.5.4 - '@next/swc-win32-arm64-msvc': 15.5.4 - '@next/swc-win32-x64-msvc': 15.5.4 + '@next/swc-darwin-arm64': 15.5.5 + '@next/swc-darwin-x64': 15.5.5 + '@next/swc-linux-arm64-gnu': 15.5.5 + '@next/swc-linux-arm64-musl': 15.5.5 + '@next/swc-linux-x64-gnu': 15.5.5 + '@next/swc-linux-x64-musl': 15.5.5 + '@next/swc-win32-arm64-msvc': 15.5.5 + '@next/swc-win32-x64-msvc': 15.5.5 '@opentelemetry/api': 1.8.0 '@playwright/test': 1.56.0 sharp: 0.34.3 From 478696e9230d2a123dc39c56909289bf2a50e57b Mon Sep 17 00:00:00 2001 From: sai6855 Date: Wed, 15 Oct 2025 11:52:10 +0530 Subject: [PATCH 06/16] zeeshan review --- .../components/autocomplete/Virtualize.js | 24 +++++++++++-------- .../components/autocomplete/Virtualize.tsx | 23 +++++++++--------- 2 files changed, 26 insertions(+), 21 deletions(-) diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js index 30165f002a0c32..9312d9d6161aa2 100644 --- a/docs/data/material/components/autocomplete/Virtualize.js +++ b/docs/data/material/components/autocomplete/Virtualize.js @@ -15,7 +15,7 @@ function RowComponent({ index, itemData, style }) { const dataSet = itemData[index]; const inlineStyle = { ...style, - top: (style.top ?? 0) + LISTBOX_PADDING, + top: style.top + LISTBOX_PADDING, }; if ('group' in dataSet) { @@ -95,8 +95,8 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) }; const getHeight = () => { - if (itemCount > 6) { - return 6 * itemSize; + if (itemCount > 8) { + return 8 * itemSize; } return itemData.map(getChildSize).reduce((a, b) => a + b, 0); }; @@ -105,11 +105,7 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) const { className, style, ...otherProps } = other; return ( -
+
& { - internalListRef?: any; - onItemsBuilt?: (optionIndexMap: Map) => void; + internalListRef?: React.Ref; + onItemsBuilt: (optionIndexMap: Map) => void; } >(function ListboxComponent(props, ref) { const { children, internalListRef, onItemsBuilt, ...other } = props; @@ -96,8 +101,8 @@ const ListboxComponent = React.forwardRef< }; const getHeight = () => { - if (itemCount > 6) { - return 6 * itemSize; + if (itemCount > 8) { + return 8 * itemSize; } return itemData.map(getChildSize).reduce((a, b) => a + b, 0); }; @@ -106,11 +111,7 @@ const ListboxComponent = React.forwardRef< const { className, style, ...otherProps } = other; return ( -
+
Date: Thu, 23 Oct 2025 11:51:37 +0530 Subject: [PATCH 07/16] update-version --- docs/package.json | 2 +- pnpm-lock.yaml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/package.json b/docs/package.json index 0be3153059cf63..6d81f82e985484 100644 --- a/docs/package.json +++ b/docs/package.json @@ -97,7 +97,7 @@ "react-swipeable-views": "^0.14.1", "react-transition-group": "^4.4.5", "react-virtuoso": "^4.14.1", - "react-window": "^2.0.0", + "react-window": "^2.2.1", "rimraf": "^6.0.1", "styled-components": "^6.1.19", "stylis": "4.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6c91d17c18331a..47e70b1b1d7460 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -719,7 +719,7 @@ importers: specifier: ^4.14.1 version: 4.14.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0) react-window: - specifier: ^2.0.0 + specifier: ^2.2.1 version: 2.2.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0) rimraf: specifier: ^6.0.1 From 89b87471909ba5ec345d2927db5113b3f06b14e6 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 23 Oct 2025 11:52:41 +0530 Subject: [PATCH 08/16] fix --- docs/data/material/components/autocomplete/Virtualize.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/Virtualize.tsx index a63ec329ca6e03..7ebde637e14d6e 100644 --- a/docs/data/material/components/autocomplete/Virtualize.tsx +++ b/docs/data/material/components/autocomplete/Virtualize.tsx @@ -58,7 +58,7 @@ function RowComponent({ const ListboxComponent = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { - internalListRef?: React.Ref; + internalListRef: React.Ref; onItemsBuilt: (optionIndexMap: Map) => void; } >(function ListboxComponent(props, ref) { From 767f49ca23c1c9b0f222c516a501f52c652cb55b Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 24 Oct 2025 12:28:42 +0530 Subject: [PATCH 09/16] fix NaN error --- docs/data/material/components/autocomplete/Virtualize.js | 3 ++- docs/data/material/components/autocomplete/Virtualize.tsx | 2 +- docs/next-env.d.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js index 9312d9d6161aa2..2faee5102c0828 100644 --- a/docs/data/material/components/autocomplete/Virtualize.js +++ b/docs/data/material/components/autocomplete/Virtualize.js @@ -13,9 +13,10 @@ const LISTBOX_PADDING = 8; // px function RowComponent({ index, itemData, style }) { const dataSet = itemData[index]; + const inlineStyle = { ...style, - top: style.top + LISTBOX_PADDING, + top: (style.top ?? 0) + LISTBOX_PADDING, }; if ('group' in dataSet) { diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/Virtualize.tsx index 7ebde637e14d6e..50418c99264b61 100644 --- a/docs/data/material/components/autocomplete/Virtualize.tsx +++ b/docs/data/material/components/autocomplete/Virtualize.tsx @@ -34,7 +34,7 @@ function RowComponent({ const dataSet = itemData[index]; const inlineStyle = { ...style, - top: (style.top as number) + LISTBOX_PADDING, + top: ((style.top as number) ?? 0) + LISTBOX_PADDING, }; if ('group' in dataSet) { diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts index 254b73c165d902..c8a9ef9acc46b1 100644 --- a/docs/next-env.d.ts +++ b/docs/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -/// +/// // NOTE: This file should not be edited // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. From c524561f02a6d2d2a4258c29f32c286831bbc384 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 24 Oct 2025 12:29:30 +0530 Subject: [PATCH 10/16] fix --- docs/data/material/components/autocomplete/Virtualize.js | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js index 2faee5102c0828..b431dc73e84860 100644 --- a/docs/data/material/components/autocomplete/Virtualize.js +++ b/docs/data/material/components/autocomplete/Virtualize.js @@ -13,7 +13,6 @@ const LISTBOX_PADDING = 8; // px function RowComponent({ index, itemData, style }) { const dataSet = itemData[index]; - const inlineStyle = { ...style, top: (style.top ?? 0) + LISTBOX_PADDING, From b052040e39d61b1a95ad533cbe35761ffb1ce80a Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Fri, 24 Oct 2025 12:30:05 +0530 Subject: [PATCH 11/16] Update next-env.d.ts --- docs/next-env.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts index c8a9ef9acc46b1..254b73c165d902 100644 --- a/docs/next-env.d.ts +++ b/docs/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -/// +/// // NOTE: This file should not be edited // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. From 5b9b40ab42215737047b158da4835dcdb6f304d7 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 26 Oct 2025 22:12:20 +0530 Subject: [PATCH 12/16] fix joy --- .../joy/components/autocomplete/Virtualize.js | 74 +++++++++++++++++-- .../components/autocomplete/Virtualize.tsx | 69 ++++++++++++++--- .../autocomplete/Virtualize.tsx.preview | 16 ---- 3 files changed, 128 insertions(+), 31 deletions(-) delete mode 100644 docs/data/joy/components/autocomplete/Virtualize.tsx.preview diff --git a/docs/data/joy/components/autocomplete/Virtualize.js b/docs/data/joy/components/autocomplete/Virtualize.js index d7f3890a9f9081..18b5bc09fa152b 100644 --- a/docs/data/joy/components/autocomplete/Virtualize.js +++ b/docs/data/joy/components/autocomplete/Virtualize.js @@ -16,7 +16,7 @@ function renderRow(props) { const dataSet = data[index]; const inlineStyle = { ...style, - top: style.top + LISTBOX_PADDING, + top: (style.top ?? 0) + LISTBOX_PADDING, }; if (dataSet.hasOwnProperty('group')) { @@ -36,13 +36,24 @@ function renderRow(props) { // Adapter for react-window const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) { - const { children, anchorEl, open, modifiers, ...other } = props; + const { children, anchorEl, open, modifiers, internalListRef, ...other } = props; const itemData = []; + const optionIndexMap = new Map(); - children[0].forEach((item) => { - if (item) { - itemData.push(item); - itemData.push(...(item.children || [])); + if (children && Array.isArray(children) && children[0]) { + children[0].forEach((item) => { + if (item) { + itemData.push(item); + itemData.push(...(item.children || [])); + } + }); + } + + // Build the index map after flattening + itemData.forEach((item, index) => { + if (Array.isArray(item) && item[1]) { + // Option item: [props, optionValue] + optionIndexMap.set(item[1], index); } }); @@ -64,6 +75,12 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) }} > { + // Store both the API and the map in the ref + if (internalListRef) { + internalListRef.current = { api, optionIndexMap }; + } + }} rowCount={itemCount} rowHeight={itemSize} rowComponent={renderRow} @@ -83,6 +100,28 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) ListboxComponent.propTypes = { anchorEl: PropTypes.any.isRequired, children: PropTypes.node, + internalListRef: PropTypes.shape({ + current: PropTypes.shape({ + api: PropTypes.shape({ + element: PropTypes.object, + scrollToRow: PropTypes.func.isRequired, + }), + optionIndexMap: PropTypes.shape({ + '__@iterator@76': PropTypes.func.isRequired, + '__@toStringTag@1117': PropTypes.string.isRequired, + clear: PropTypes.func.isRequired, + delete: PropTypes.func.isRequired, + entries: PropTypes.func.isRequired, + forEach: PropTypes.func.isRequired, + get: PropTypes.func.isRequired, + has: PropTypes.func.isRequired, + keys: PropTypes.func.isRequired, + set: PropTypes.func.isRequired, + size: PropTypes.number.isRequired, + values: PropTypes.func.isRequired, + }).isRequired, + }).isRequired, + }).isRequired, modifiers: PropTypes.array.isRequired, open: PropTypes.bool.isRequired, }; @@ -104,6 +143,23 @@ const OPTIONS = Array.from(new Array(10000)) .sort((a, b) => a.toUpperCase().localeCompare(b.toUpperCase())); export default function Virtualize() { + // Ref to store both the List API and the option index map + const internalListRef = React.useRef({ + api: null, + optionIndexMap: new Map(), + }); + + // Handle keyboard navigation by scrolling to highlighted option + const handleHighlightChange = (event, option) => { + if (option && internalListRef.current) { + const { api, optionIndexMap } = internalListRef.current; + const index = optionIndexMap.get(option); + if (index !== undefined && api) { + api.scrollToRow({ index, align: 'auto' }); + } + } + }; + return ( 10,000 options @@ -114,11 +170,17 @@ export default function Virtualize() { slots={{ listbox: ListboxComponent, }} + slotProps={{ + listbox: { + internalListRef, + }, + }} options={OPTIONS} groupBy={(option) => option[0].toUpperCase()} renderOption={(props, option) => [props, option]} // TODO: Post React 18 update - validate this conversion, look like a hidden bug renderGroup={(params) => params} + onHighlightChange={handleHighlightChange} /> ); diff --git a/docs/data/joy/components/autocomplete/Virtualize.tsx b/docs/data/joy/components/autocomplete/Virtualize.tsx index e08413f74c1794..5b935ce6120ca5 100644 --- a/docs/data/joy/components/autocomplete/Virtualize.tsx +++ b/docs/data/joy/components/autocomplete/Virtualize.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { List, RowComponentProps } from 'react-window'; +import { List, RowComponentProps, ListImperativeAPI } from 'react-window'; import { Popper } from '@mui/base/Popper'; import Autocomplete from '@mui/joy/Autocomplete'; import AutocompleteOption from '@mui/joy/AutocompleteOption'; @@ -17,7 +17,7 @@ function renderRow(props: RowComponentProps & { data: any }) { const dataSet = data[index]; const inlineStyle = { ...style, - top: (style.top as number) + LISTBOX_PADDING, + top: ((style.top as number) ?? 0) + LISTBOX_PADDING, }; if (dataSet.hasOwnProperty('group')) { @@ -42,17 +42,33 @@ const ListboxComponent = React.forwardRef< anchorEl: any; open: boolean; modifiers: any[]; + internalListRef: React.MutableRefObject<{ + api: ListImperativeAPI | null; + optionIndexMap: Map; + }>; } & React.HTMLAttributes & AutocompleteListboxProps >(function ListboxComponent(props, ref) { - const { children, anchorEl, open, modifiers, ...other } = props; + const { children, anchorEl, open, modifiers, internalListRef, ...other } = props; const itemData: Array = []; - ( - children as [Array<{ children: Array> | undefined }>] - )[0].forEach((item) => { - if (item) { - itemData.push(item); - itemData.push(...(item.children || [])); + const optionIndexMap = new Map(); + + if (children && Array.isArray(children) && children[0]) { + ( + children as [Array<{ children: Array> | undefined }>] + )[0].forEach((item) => { + if (item) { + itemData.push(item); + itemData.push(...(item.children || [])); + } + }); + } + + // Build the index map after flattening + itemData.forEach((item, index) => { + if (Array.isArray(item) && item[1]) { + // Option item: [props, optionValue] + optionIndexMap.set(item[1], index); } }); @@ -74,6 +90,12 @@ const ListboxComponent = React.forwardRef< }} > { + // Store both the API and the map in the ref + if (internalListRef) { + internalListRef.current = { api, optionIndexMap }; + } + }} rowCount={itemCount} rowHeight={itemSize} rowComponent={renderRow} @@ -107,6 +129,29 @@ const OPTIONS = Array.from(new Array(10000)) .sort((a, b) => a.toUpperCase().localeCompare(b.toUpperCase())); export default function Virtualize() { + // Ref to store both the List API and the option index map + const internalListRef = React.useRef<{ + api: ListImperativeAPI | null; + optionIndexMap: Map; + }>({ + api: null, + optionIndexMap: new Map(), + }); + + // Handle keyboard navigation by scrolling to highlighted option + const handleHighlightChange = ( + event: React.SyntheticEvent, + option: string | null, + ) => { + if (option && internalListRef.current) { + const { api, optionIndexMap } = internalListRef.current; + const index = optionIndexMap.get(option); + if (index !== undefined && api) { + api.scrollToRow({ index, align: 'auto' }); + } + } + }; + return ( 10,000 options @@ -117,11 +162,17 @@ export default function Virtualize() { slots={{ listbox: ListboxComponent, }} + slotProps={{ + listbox: { + internalListRef, + } as any, + }} options={OPTIONS} groupBy={(option) => option[0].toUpperCase()} renderOption={(props, option) => [props, option] as React.ReactNode} // TODO: Post React 18 update - validate this conversion, look like a hidden bug renderGroup={(params) => params as unknown as React.ReactNode} + onHighlightChange={handleHighlightChange} /> ); diff --git a/docs/data/joy/components/autocomplete/Virtualize.tsx.preview b/docs/data/joy/components/autocomplete/Virtualize.tsx.preview deleted file mode 100644 index a4beb5945dc715..00000000000000 --- a/docs/data/joy/components/autocomplete/Virtualize.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - 10,000 options - option[0].toUpperCase()} - renderOption={(props, option) => [props, option] as React.ReactNode} - // TODO: Post React 18 update - validate this conversion, look like a hidden bug - renderGroup={(params) => params as unknown as React.ReactNode} - /> - \ No newline at end of file From a32bf95edbf426e7b4072b0c70b22ac4304e494b Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 27 Oct 2025 11:59:29 +0530 Subject: [PATCH 13/16] fix --- docs/data/joy/components/autocomplete/Virtualize.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/joy/components/autocomplete/Virtualize.js b/docs/data/joy/components/autocomplete/Virtualize.js index 18b5bc09fa152b..5594fa8e8b5c84 100644 --- a/docs/data/joy/components/autocomplete/Virtualize.js +++ b/docs/data/joy/components/autocomplete/Virtualize.js @@ -100,7 +100,7 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) ListboxComponent.propTypes = { anchorEl: PropTypes.any.isRequired, children: PropTypes.node, - internalListRef: PropTypes.shape({ + internalListRef: /* @typescript-to-proptypes-ignore */ PropTypes.shape({ current: PropTypes.shape({ api: PropTypes.shape({ element: PropTypes.object, From 0c3860916bd1761d05eb207928d81cbe0ef8cc33 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 27 Oct 2025 12:01:12 +0530 Subject: [PATCH 14/16] fix --- docs/data/joy/components/autocomplete/Virtualize.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/joy/components/autocomplete/Virtualize.js b/docs/data/joy/components/autocomplete/Virtualize.js index 5594fa8e8b5c84..767f5691deec73 100644 --- a/docs/data/joy/components/autocomplete/Virtualize.js +++ b/docs/data/joy/components/autocomplete/Virtualize.js @@ -100,13 +100,13 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) ListboxComponent.propTypes = { anchorEl: PropTypes.any.isRequired, children: PropTypes.node, - internalListRef: /* @typescript-to-proptypes-ignore */ PropTypes.shape({ + internalListRef: PropTypes.shape({ current: PropTypes.shape({ api: PropTypes.shape({ element: PropTypes.object, scrollToRow: PropTypes.func.isRequired, }), - optionIndexMap: PropTypes.shape({ + optionIndexMap: PropTypes /* @typescript-to-proptypes-ignore */.shape({ '__@iterator@76': PropTypes.func.isRequired, '__@toStringTag@1117': PropTypes.string.isRequired, clear: PropTypes.func.isRequired, From f7d5a25c2de588bbb00b633b4e1a4e53eb6f456d Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 27 Oct 2025 12:22:42 +0530 Subject: [PATCH 15/16] fix --- docs/data/joy/components/autocomplete/Virtualize.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/joy/components/autocomplete/Virtualize.js b/docs/data/joy/components/autocomplete/Virtualize.js index 767f5691deec73..39899339059e01 100644 --- a/docs/data/joy/components/autocomplete/Virtualize.js +++ b/docs/data/joy/components/autocomplete/Virtualize.js @@ -100,13 +100,13 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) ListboxComponent.propTypes = { anchorEl: PropTypes.any.isRequired, children: PropTypes.node, - internalListRef: PropTypes.shape({ + internalListRef: PropTypes /* @typescript-to-proptypes-ignore */.shape({ current: PropTypes.shape({ api: PropTypes.shape({ element: PropTypes.object, scrollToRow: PropTypes.func.isRequired, }), - optionIndexMap: PropTypes /* @typescript-to-proptypes-ignore */.shape({ + optionIndexMap: PropTypes.shape({ '__@iterator@76': PropTypes.func.isRequired, '__@toStringTag@1117': PropTypes.string.isRequired, clear: PropTypes.func.isRequired, From 85eb361a00f68263ea5f010a23b6510ebe1b3505 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 27 Oct 2025 12:34:24 +0530 Subject: [PATCH 16/16] fix --- .../joy/components/autocomplete/Virtualize.js | 25 +++++-------------- .../components/autocomplete/Virtualize.tsx | 12 ++++----- 2 files changed, 12 insertions(+), 25 deletions(-) diff --git a/docs/data/joy/components/autocomplete/Virtualize.js b/docs/data/joy/components/autocomplete/Virtualize.js index 39899339059e01..2b95bf0a5bd7cc 100644 --- a/docs/data/joy/components/autocomplete/Virtualize.js +++ b/docs/data/joy/components/autocomplete/Virtualize.js @@ -38,7 +38,7 @@ function renderRow(props) { const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) { const { children, anchorEl, open, modifiers, internalListRef, ...other } = props; const itemData = []; - const optionIndexMap = new Map(); + const optionIndexMap = {}; if (children && Array.isArray(children) && children[0]) { children[0].forEach((item) => { @@ -53,7 +53,7 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) itemData.forEach((item, index) => { if (Array.isArray(item) && item[1]) { // Option item: [props, optionValue] - optionIndexMap.set(item[1], index); + optionIndexMap[item[1]] = index; } }); @@ -100,26 +100,13 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) ListboxComponent.propTypes = { anchorEl: PropTypes.any.isRequired, children: PropTypes.node, - internalListRef: PropTypes /* @typescript-to-proptypes-ignore */.shape({ + internalListRef: PropTypes.shape({ current: PropTypes.shape({ api: PropTypes.shape({ element: PropTypes.object, scrollToRow: PropTypes.func.isRequired, }), - optionIndexMap: PropTypes.shape({ - '__@iterator@76': PropTypes.func.isRequired, - '__@toStringTag@1117': PropTypes.string.isRequired, - clear: PropTypes.func.isRequired, - delete: PropTypes.func.isRequired, - entries: PropTypes.func.isRequired, - forEach: PropTypes.func.isRequired, - get: PropTypes.func.isRequired, - has: PropTypes.func.isRequired, - keys: PropTypes.func.isRequired, - set: PropTypes.func.isRequired, - size: PropTypes.number.isRequired, - values: PropTypes.func.isRequired, - }).isRequired, + optionIndexMap: PropTypes.object.isRequired, }).isRequired, }).isRequired, modifiers: PropTypes.array.isRequired, @@ -146,14 +133,14 @@ export default function Virtualize() { // Ref to store both the List API and the option index map const internalListRef = React.useRef({ api: null, - optionIndexMap: new Map(), + optionIndexMap: {}, }); // Handle keyboard navigation by scrolling to highlighted option const handleHighlightChange = (event, option) => { if (option && internalListRef.current) { const { api, optionIndexMap } = internalListRef.current; - const index = optionIndexMap.get(option); + const index = optionIndexMap[option]; if (index !== undefined && api) { api.scrollToRow({ index, align: 'auto' }); } diff --git a/docs/data/joy/components/autocomplete/Virtualize.tsx b/docs/data/joy/components/autocomplete/Virtualize.tsx index 5b935ce6120ca5..af6d56b4c140eb 100644 --- a/docs/data/joy/components/autocomplete/Virtualize.tsx +++ b/docs/data/joy/components/autocomplete/Virtualize.tsx @@ -44,14 +44,14 @@ const ListboxComponent = React.forwardRef< modifiers: any[]; internalListRef: React.MutableRefObject<{ api: ListImperativeAPI | null; - optionIndexMap: Map; + optionIndexMap: Record; }>; } & React.HTMLAttributes & AutocompleteListboxProps >(function ListboxComponent(props, ref) { const { children, anchorEl, open, modifiers, internalListRef, ...other } = props; const itemData: Array = []; - const optionIndexMap = new Map(); + const optionIndexMap: Record = {}; if (children && Array.isArray(children) && children[0]) { ( @@ -68,7 +68,7 @@ const ListboxComponent = React.forwardRef< itemData.forEach((item, index) => { if (Array.isArray(item) && item[1]) { // Option item: [props, optionValue] - optionIndexMap.set(item[1], index); + optionIndexMap[item[1]] = index; } }); @@ -132,10 +132,10 @@ export default function Virtualize() { // Ref to store both the List API and the option index map const internalListRef = React.useRef<{ api: ListImperativeAPI | null; - optionIndexMap: Map; + optionIndexMap: Record; }>({ api: null, - optionIndexMap: new Map(), + optionIndexMap: {}, }); // Handle keyboard navigation by scrolling to highlighted option @@ -145,7 +145,7 @@ export default function Virtualize() { ) => { if (option && internalListRef.current) { const { api, optionIndexMap } = internalListRef.current; - const index = optionIndexMap.get(option); + const index = optionIndexMap[option]; if (index !== undefined && api) { api.scrollToRow({ index, align: 'auto' }); }