From c66b1a16baa2e842429b0a7e2b7e8ad33c74d6fd Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Fri, 10 Nov 2023 11:48:23 -0500 Subject: [PATCH 1/4] upgrade selectable demo --- .../content/examples/Selectable.tsx | 227 +++++++----------- .../content/examples/VirtualizedTable.md | 1 + .../extensions/virtual-scroll-table/react.js | 20 +- .../virtual-scroll-window-scroller/react.js | 4 +- 4 files changed, 108 insertions(+), 144 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/Selectable.tsx b/packages/module/patternfly-docs/content/examples/Selectable.tsx index 3110aac..09ee509 100644 --- a/packages/module/patternfly-docs/content/examples/Selectable.tsx +++ b/packages/module/patternfly-docs/content/examples/Selectable.tsx @@ -1,153 +1,108 @@ import React from 'react'; -import { debounce } from '@patternfly/react-core'; -import { headerCol, TableGridBreakpoint } from '@patternfly/react-table'; -import { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated'; + import { CellMeasurerCache, CellMeasurer } from 'react-virtualized'; import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension'; +import { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table'; -export class SelectableExample extends React.Component { - constructor(props) { - super(props); - const rows = []; - for (let i = 0; i < 100; i++) { - rows.push({ - selected: false, - id: `selectable-row-${i}`, - cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`] - }); - } +export const SelectableTableVirtualized: React.FunctionComponent = () => { + const rows = []; - this.selectableVirtualBody = null; + for (let i = 0; i < 100; i++) { + rows.push([`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]); + } - this.state = { - columns: [ - // headerCol transform adds checkbox column with pf-m-2-sm, pf-m-1-md+ column space - { - title: 'Repositories', - cellTransforms: [headerCol()], - props: { className: 'pf-m-5-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' } - }, - { - title: 'Pull requests', - props: { className: 'pf-m-5-col-on-sm pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl' } - }, - { - title: 'Workspaces', - props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' } - }, - { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } } - ], - rows - }; + const selectableRepos = rows; - this.onSelect = this.onSelect.bind(this); - this._handleResize = debounce(this._handleResize.bind(this), 100); - } + const [selectedRepoNames, setSelectedRepoNames] = React.useState([]); - componentDidMount() { - // re-render after resize - window.addEventListener('resize', this._handleResize); - } + const setRepoSelected = (repo: string, isSelecting = true) => + setSelectedRepoNames((prevSelected) => { + const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo); + return isSelecting ? [...otherSelectedRepoNames, repo] : otherSelectedRepoNames; + }); - componentWillUnmount() { - window.removeEventListener('resize', this._handleResize); - } + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit']; - _handleResize() { - this.forceUpdate(); - } + const selectAllRepos = (isSelecting = true) => setSelectedRepoNames(isSelecting ? rows.map((item) => item[0]) : []); - onSelect(event, isSelected, virtualRowIndex, rowData) { - let rows; - if (virtualRowIndex === -1) { - rows = this.state.rows.map((oneRow) => { - oneRow.selected = isSelected; - return oneRow; - }); - } else { - rows = [...this.state.rows]; - const rowIndex = rows.findIndex((r) => r.id === rowData.id); - rows[rowIndex] = { ...rows[rowIndex], selected: isSelected }; - } - this.setState({ - rows - }); - this.selectableVirtualBody.forceUpdateVirtualGrid(); - } + const areAllReposSelected = selectedRepoNames.length === selectableRepos.length; + const isRepoSelected = (repo: string) => selectedRepoNames.includes(repo); - render() { - const { columns, rows } = this.state; + const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState(null); - const measurementCache = new CellMeasurerCache({ - fixedWidth: true, - minHeight: 44, - keyMapper: (rowIndex) => rowIndex - }); + const onSelectRepo = (repo: string, rowIndex: number, isSelecting: boolean) => { + if (recentSelectedRowIndex !== null) { + const numberSelected = rowIndex - recentSelectedRowIndex; + const intermediateIndexes = + numberSelected > 0 + ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex) + : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex); + intermediateIndexes.forEach(() => setRepoSelected(repo, isSelecting)); + } else { + setRepoSelected(repo, isSelecting); + } + setRecentSelectedRowIndex(rowIndex); + }; - const rowRenderer = ({ index, _isScrolling, key, style, parent }) => { - const { rows, columns } = this.state; + const measurementCache = new CellMeasurerCache({ + fixedWidth: true, + minHeight: 44, + keyMapper: (rowIndex) => rowIndex + }); - return ( - - - - { - this.onSelect(e, e.target.checked, 0, { id: rows[index].id }); - }} - /> - - - {rows[index].cells[0]} - - - {rows[index].cells[1]} - - - {rows[index].cells[2]} - - - {rows[index].cells[3]} - - - - ); - }; + const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => ( + + + onSelectRepo(rows[rowIndex][0], rowIndex, isSelecting), + isSelected: isRepoSelected(rows[rowIndex][0]) + }} + /> + {columns.map((col, index) => ( + {rows[rowIndex][index]} + ))} + + + ); - return ( -
- - - - - {({ width }) => ( - (this.selectableVirtualBody = ref)} - className="pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller" - deferredMeasurementCache={measurementCache} - rowHeight={measurementCache.rowHeight} - height={400} - overscanRowCount={2} - columnCount={1} - rows={rows} - rowCount={rows.length} - rowRenderer={rowRenderer} - width={width} - role="grid" + return ( +
+ + + + + + ))} + + +
Selectable Virtualized Table
selectAllRepos(isSelecting), + isSelected: areAllReposSelected + }} /> - )} - - - ); - } -} + {columns.map((col, index) => ( + {col}
+ + {({ width }) => ( + + )} + +
+ ); +}; diff --git a/packages/module/patternfly-docs/content/examples/VirtualizedTable.md b/packages/module/patternfly-docs/content/examples/VirtualizedTable.md index ff6f736..9f40ff3 100644 --- a/packages/module/patternfly-docs/content/examples/VirtualizedTable.md +++ b/packages/module/patternfly-docs/content/examples/VirtualizedTable.md @@ -13,6 +13,7 @@ import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import { CellMeasurerCache, CellMeasurer} from 'react-virtualized'; import { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension'; import { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated'; +import { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table'; import { Dropdown as DropdownDeprecated, DropdownItem as DropdownItemDeprecated, diff --git a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js index 3b6a220..2213295 100644 --- a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js +++ b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js @@ -5,6 +5,7 @@ import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import { CellMeasurerCache, CellMeasurer} from 'react-virtualized'; import { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension'; import { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated'; +import { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table'; import { Dropdown as DropdownDeprecated, DropdownItem as DropdownItemDeprecated, @@ -191,6 +192,13 @@ pageData.liveContext = { WindowScroller, TableDeprecated, TableHeaderDeprecated, + Table, + Thead, + Tr, + Th, + Td, + Caption, + TableGridBreakpoint, DropdownDeprecated, DropdownItemDeprecated, DropdownPositionDeprecated, @@ -204,27 +212,27 @@ pageData.relativeImports = { }; pageData.examples = { 'Basic': props => - rowIndex\n });\n\n const rowRenderer = ({ index, isScrolling, key, style, parent }) => {\n const { rows, columns } = this.state;\n\n return (\n \n \n \n {rows[index].cells[0]}\n \n \n {rows[index].cells[1]}\n \n \n {rows[index].cells[2]}\n \n \n {rows[index].cells[3]}\n \n \n {rows[index].cells[4]}\n \n \n \n );\n };\n\n return (\n
\n \n \n \n \n {({ width }) => (\n \n )}\n \n
\n );\n }\n}\n","title":"Basic","lang":"js"}}> + rowIndex\n });\n\n const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {\n const { rows, columns } = this.state;\n\n return (\n \n \n \n {rows[index].cells[0]}\n \n \n {rows[index].cells[1]}\n \n \n {rows[index].cells[2]}\n \n \n {rows[index].cells[3]}\n \n \n {rows[index].cells[4]}\n \n \n \n );\n };\n\n return (\n
\n \n \n \n \n {({ width }) => (\n \n )}\n \n
\n );\n }\n}\n","title":"Basic","lang":"js"}}> , 'Using composable table components': props => - {\n const rows = [];\n for (let i = 0; i < 100; i++) {\n rows.push([`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]);\n }\n const [selected, setSelected] = React.useState(rows.map((row) => false));\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n\n const onSelect = (event, isSelected, rowId) => {\n setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel)));\n };\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, isScrolling, key, style, parent }) => (\n \n \n \n {columns.map((col, index) => (\n {rows[rowIndex][index]}\n ))}\n \n \n );\n\n return (\n
\n \n \n \n \n \n ))}\n \n \n
Virtualized table with composable table components
\n {columns.map((col, index) => (\n {col}
\n \n {({ width }) => (\n \n )}\n \n
\n );\n};\n","title":"Using composable table components","lang":"js"}}> + {\n const rows = [];\n for (let i = 0; i < 100; i++) {\n rows.push([`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]);\n }\n const [selected, setSelected] = React.useState(rows.map((_row) => false));\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n\n const onSelect = (event, isSelected, rowId) => {\n setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel)));\n };\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => (\n \n \n \n {columns.map((col, index) => (\n {rows[rowIndex][index]}\n ))}\n \n \n );\n\n return (\n
\n \n \n \n \n \n ))}\n \n \n
Virtualized table with composable table components
\n {columns.map((col, index) => (\n {col}
\n \n {({ width }) => (\n \n )}\n \n
\n );\n};\n","title":"Using composable table components","lang":"js"}}> , 'Sortable': props => - \n a.cells[index] < b.cells[index] ? -1 : a.cells[index] > b.cells[index] ? 1 : 0\n );\n this.setState({\n sortBy: {\n index,\n direction\n },\n rows: direction === SortByDirection.asc ? sortedRows : sortedRows.reverse()\n });\n\n this.sortableVirtualBody.forceUpdateVirtualGrid();\n }\n\n render() {\n const { sortBy, columns, rows } = this.state;\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index, isScrolling, key, style, parent }) => {\n const { rows, columns } = this.state;\n\n return (\n \n \n \n {rows[index].cells[0]}\n \n \n {rows[index].cells[1]}\n \n \n {rows[index].cells[2]}\n \n \n {rows[index].cells[3]}\n \n \n {rows[index].cells[4]}\n \n \n \n );\n };\n\n return (\n
\n \n \n \n \n {({ width }) => (\n (this.sortableVirtualBody = ref)}\n className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n deferredMeasurementCache={measurementCache}\n rowHeight={measurementCache.rowHeight}\n height={400}\n overscanRowCount={2}\n columnCount={1}\n rows={rows}\n rowCount={rows.length}\n rowRenderer={rowRenderer}\n width={width}\n role=\"grid\"\n />\n )}\n \n
\n );\n }\n}\n","title":"Sortable","lang":"js"}}> + \n // eslint-disable-next-line no-nested-ternary\n a.cells[index] < b.cells[index] ? -1 : a.cells[index] > b.cells[index] ? 1 : 0\n );\n this.setState({\n sortBy: {\n index,\n direction\n },\n rows: direction === SortByDirection.asc ? sortedRows : sortedRows.reverse()\n });\n\n this.sortableVirtualBody.forceUpdateVirtualGrid();\n }\n\n render() {\n const { sortBy, columns, rows } = this.state;\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {\n const { rows, columns } = this.state;\n\n return (\n \n \n \n {rows[index].cells[0]}\n \n \n {rows[index].cells[1]}\n \n \n {rows[index].cells[2]}\n \n \n {rows[index].cells[3]}\n \n \n {rows[index].cells[4]}\n \n \n \n );\n };\n\n return (\n
\n \n \n \n \n {({ width }) => (\n (this.sortableVirtualBody = ref)}\n className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n deferredMeasurementCache={measurementCache}\n rowHeight={measurementCache.rowHeight}\n height={400}\n overscanRowCount={2}\n columnCount={1}\n rows={rows}\n rowCount={rows.length}\n rowRenderer={rowRenderer}\n width={width}\n role=\"grid\"\n />\n )}\n \n
\n );\n }\n}\n","title":"Sortable","lang":"js"}}> , 'Selectable': props => - {\n oneRow.selected = isSelected;\n return oneRow;\n });\n } else {\n rows = [...this.state.rows];\n const rowIndex = rows.findIndex((r) => r.id === rowData.id);\n rows[rowIndex] = { ...rows[rowIndex], selected: isSelected };\n }\n this.setState({\n rows\n });\n this.selectableVirtualBody.forceUpdateVirtualGrid();\n }\n\n render() {\n const { columns, rows } = this.state;\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index, isScrolling, key, style, parent }) => {\n const { rows, columns } = this.state;\n\n return (\n \n \n \n {\n this.onSelect(e, e.target.checked, 0, { id: rows[index].id });\n }}\n />\n \n \n {rows[index].cells[0]}\n \n \n {rows[index].cells[1]}\n \n \n {rows[index].cells[2]}\n \n \n {rows[index].cells[3]}\n \n \n \n );\n };\n\n return (\n
\n \n \n \n \n {({ width }) => (\n (this.selectableVirtualBody = ref)}\n className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n deferredMeasurementCache={measurementCache}\n rowHeight={measurementCache.rowHeight}\n height={400}\n overscanRowCount={2}\n columnCount={1}\n rows={rows}\n rowCount={rows.length}\n rowRenderer={rowRenderer}\n width={width}\n role=\"grid\"\n />\n )}\n \n
\n );\n }\n}\n","title":"Selectable","lang":"js"}}> + {\n const rows = [];\n\n for (let i = 0; i < 100; i++) {\n rows.push([`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]);\n }\n\n const selectableRepos = rows;\n\n const [selectedRepoNames, setSelectedRepoNames] = React.useState([]);\n\n const setRepoSelected = (repo: string, isSelecting = true) =>\n setSelectedRepoNames((prevSelected) => {\n const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo);\n return isSelecting ? [...otherSelectedRepoNames, repo] : otherSelectedRepoNames;\n });\n\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n\n const selectAllRepos = (isSelecting = true) => setSelectedRepoNames(isSelecting ? rows.map((item) => item[0]) : []);\n\n const areAllReposSelected = selectedRepoNames.length === selectableRepos.length;\n const isRepoSelected = (repo: string) => selectedRepoNames.includes(repo);\n\n const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState(null);\n\n const onSelectRepo = (repo: string, rowIndex: number, isSelecting: boolean) => {\n if (recentSelectedRowIndex !== null) {\n const numberSelected = rowIndex - recentSelectedRowIndex;\n const intermediateIndexes =\n numberSelected > 0\n ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)\n : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);\n intermediateIndexes.forEach(() => setRepoSelected(repo, isSelecting));\n } else {\n setRepoSelected(repo, isSelecting);\n }\n setRecentSelectedRowIndex(rowIndex);\n };\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => (\n \n \n onSelectRepo(rows[rowIndex][0], rowIndex, isSelecting),\n isSelected: isRepoSelected(rows[rowIndex][0])\n }}\n />\n {columns.map((col, index) => (\n {rows[rowIndex][index]}\n ))}\n \n \n );\n\n return (\n
\n \n \n \n \n selectAllRepos(isSelecting),\n isSelected: areAllReposSelected\n }}\n />\n {columns.map((col, index) => (\n \n ))}\n \n \n
Selectable Virtualized Table
{col}
\n \n {({ width }) => (\n \n )}\n \n
\n );\n};\n","title":"Selectable","lang":"js"}}> , 'Actions': props => - console.log('clicked on Some action, on row: ', rowId)\n },\n {\n title:
Another action
,\n onClick: (event, rowId, rowData, extra) => console.log('clicked on Another action, on row: ', rowId)\n },\n {\n isSeparator: true\n },\n {\n title: 'Third action',\n onClick: (event, rowId, rowData, extra) => console.log('clicked on Third action, on row: ', rowId)\n }\n ]\n };\n\n this._handleResize = debounce(this._handleResize.bind(this), 100);\n }\n\n componentDidMount() {\n // re-render after resize\n window.addEventListener('resize', this._handleResize);\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this._handleResize);\n }\n\n _handleResize() {\n this.forceUpdate();\n }\n\n render() {\n const { columns, rows } = this.state;\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index, isScrolling, key, style, parent }) => {\n const { rows, columns, actions } = this.state;\n\n return (\n \n \n \n {rows[index].cells[0]}\n \n \n {rows[index].cells[1]}\n \n \n {rows[index].cells[2]}\n \n \n {rows[index].cells[3]}\n \n \n {rows[index].cells[4]}\n \n \n \n \n \n \n );\n };\n\n return (\n
\n \n \n \n \n {({ width }) => (\n (this.actionsVirtualBody = ref)}\n className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n deferredMeasurementCache={measurementCache}\n rowHeight={measurementCache.rowHeight}\n height={400}\n overscanRowCount={2}\n columnCount={1}\n rows={rows}\n rowCount={rows.length}\n rowRenderer={rowRenderer}\n width={width}\n role=\"grid\"\n />\n )}\n \n
\n );\n }\n}\n","title":"Actions","lang":"js"}}> + console.log('clicked on Some action, on row: ', rowId)\n },\n {\n title:
Another action
,\n onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Another action, on row: ', rowId)\n },\n {\n isSeparator: true\n },\n {\n title: 'Third action',\n onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Third action, on row: ', rowId)\n }\n ]\n };\n\n this._handleResize = debounce(this._handleResize.bind(this), 100);\n }\n\n componentDidMount() {\n // re-render after resize\n window.addEventListener('resize', this._handleResize);\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this._handleResize);\n }\n\n _handleResize() {\n this.forceUpdate();\n }\n\n render() {\n const { columns, rows } = this.state;\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {\n const { rows, columns, actions } = this.state;\n\n return (\n \n \n \n {rows[index].cells[0]}\n \n \n {rows[index].cells[1]}\n \n \n {rows[index].cells[2]}\n \n \n {rows[index].cells[3]}\n \n \n {rows[index].cells[4]}\n \n \n \n \n \n \n );\n };\n\n return (\n
\n \n \n \n \n {({ width }) => (\n (this.actionsVirtualBody = ref)}\n className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n deferredMeasurementCache={measurementCache}\n rowHeight={measurementCache.rowHeight}\n height={400}\n overscanRowCount={2}\n columnCount={1}\n rows={rows}\n rowCount={rows.length}\n rowRenderer={rowRenderer}\n width={width}\n role=\"grid\"\n />\n )}\n \n
\n );\n }\n}\n","title":"Actions","lang":"js"}}> , 'Filterable with WindowScroller': props => - console.log('clicked on Some action, on row: ', rowId)\n },\n {\n title:
Another action
,\n onClick: (event, rowId, rowData, extra) => console.log('clicked on Another action, on row: ', rowId)\n },\n {\n isSeparator: true\n },\n {\n title: 'Third action',\n onClick: (event, rowId, rowData, extra) => console.log('clicked on Third action, on row: ', rowId)\n }\n ]\n };\n\n this._handleResize = debounce(this._handleResize.bind(this), 100);\n\n this.onDelete = (type = '', id = '') => {\n if (type) {\n this.setState((prevState) => {\n prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter((s) => s !== id);\n return {\n filters: prevState.filters\n };\n });\n } else {\n this.setState({\n filters: {\n location: [],\n name: [],\n status: []\n },\n inputValue: ''\n });\n }\n };\n\n this.onCategoryToggle = (_event, isOpen) => {\n this.setState({\n isCategoryDropdownOpen: isOpen\n });\n };\n\n this.onCategorySelect = (event) => {\n this.setState({\n currentCategory: event.target.innerText,\n isCategoryDropdownOpen: !this.state.isCategoryDropdownOpen\n });\n };\n\n this.onFilterToggle = (_event, isOpen) => {\n this.setState({\n isFilterDropdownOpen: isOpen\n });\n };\n\n this.onFilterSelect = (event) => {\n this.setState({\n isFilterDropdownOpen: !this.state.isFilterDropdownOpen\n });\n };\n\n this.onInputChange = (_event, newValue) => {\n // this.setState({ inputValue: newValue });\n if (newValue === '') {\n this.onDelete();\n this.setState({\n inputValue: newValue\n });\n } else {\n this.setState((prevState) => {\n return {\n filters: {\n ...prevState.filters,\n ['name']: [newValue]\n },\n inputValue: newValue\n };\n });\n }\n };\n\n this.onRowSelect = (event, isSelected, rowId) => {\n let rows;\n if (rowId === -1) {\n rows = this.state.rows.map((oneRow) => {\n oneRow.selected = isSelected;\n return oneRow;\n });\n } else {\n rows = [...this.state.rows];\n rows[rowId].selected = isSelected;\n }\n this.setState({\n rows\n });\n };\n\n this.onStatusSelect = (event, selection) => {\n const checked = event.target.checked;\n this.setState((prevState) => {\n const prevSelections = prevState.filters['status'];\n return {\n filters: {\n ...prevState.filters,\n status: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection)\n }\n };\n });\n };\n\n this.onNameInput = (event) => {\n if (event.key && event.key !== 'Enter') {\n return;\n }\n\n const { inputValue } = this.state;\n this.setState((prevState) => {\n const prevFilters = prevState.filters['name'];\n return {\n filters: {\n ...prevState.filters,\n ['name']: prevFilters.includes(inputValue) ? prevFilters : [...prevFilters, inputValue]\n },\n inputValue: ''\n };\n });\n };\n\n this.onLocationSelect = (event, selection) => {\n this.setState((prevState) => {\n return {\n filters: {\n ...prevState.filters,\n ['location']: [selection]\n }\n };\n });\n this.onFilterSelect();\n };\n\n this._handleResize = debounce(this._handleResize.bind(this), 100);\n this._bindBodyRef = this._bindBodyRef.bind(this);\n }\n\n componentDidMount() {\n // re-render after resize\n window.addEventListener('resize', this._handleResize);\n\n setTimeout(() => {\n const scollableElement = document.getElementById('content-scrollable-1');\n this.setState({ scollableElement });\n });\n\n // re-render after resize\n window.addEventListener('resize', this._handleResize);\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this._handleResize);\n }\n\n _handleResize() {\n this._cellMeasurementCache.clearAll();\n this._bodyRef.recomputeVirtualGridSize();\n }\n\n _bindBodyRef(ref) {\n this._bodyRef = ref;\n }\n\n buildCategoryDropdown() {\n const { isCategoryDropdownOpen, currentCategory } = this.state;\n\n return (\n \n \n {currentCategory}\n \n }\n isOpen={isCategoryDropdownOpen}\n dropdownItems={[\n Location,\n Name,\n Status\n ]}\n style={{ width: '100%' }}\n >\n \n );\n }\n\n buildFilterDropdown() {\n const { currentCategory, isFilterDropdownOpen, inputValue, filters } = this.state;\n\n const locationMenuItems = [\n ,\n ,\n ,\n ,\n \n ];\n\n const statusMenuItems = [\n ,\n ,\n ,\n ,\n \n ];\n\n return (\n \n \n \n {locationMenuItems}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {statusMenuItems}\n \n \n \n );\n }\n\n renderToolbar() {\n const { filters } = this.state;\n return (\n \n \n } breakpoint=\"xl\">\n \n {this.buildCategoryDropdown()}\n {this.buildFilterDropdown()}\n \n \n \n \n );\n }\n\n render() {\n const { loading, rows, columns, actions, filters, scollableElement } = this.state;\n\n const filteredRows =\n filters.name.length > 0 || filters.location.length > 0 || filters.status.length > 0\n ? rows.filter((row) => {\n return (\n (filters.name.length === 0 ||\n filters.name.some((name) => row.cells[0].toLowerCase().includes(name.toLowerCase()))) &&\n (filters.location.length === 0 || filters.location.includes(row.cells[4])) &&\n (filters.status.length === 0 || filters.status.includes(row.cells[3]))\n );\n })\n : rows;\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index, isScrolling, key, style, parent }) => {\n const { columns, actions } = this.state;\n\n return (\n \n \n {filteredRows[index].cells[0]}\n {filteredRows[index].cells[1]}\n {filteredRows[index].cells[2]}\n {filteredRows[index].cells[3]}\n {filteredRows[index].cells[4]}\n \n \n \n \n \n );\n };\n\n return (\n \n {this.renderToolbar()}\n\n \n
\n {!loading && filteredRows.length > 0 && (\n
\n \n \n \n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
\n (this.actionsVirtualBody = ref)}\n autoHeight\n className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n deferredMeasurementCache={measurementCache}\n rowHeight={measurementCache.rowHeight}\n height={height || 0}\n overscanRowCount={10}\n columnCount={6}\n rows={filteredRows}\n rowCount={filteredRows.length}\n rowRenderer={rowRenderer}\n scrollTop={scrollTop}\n width={width}\n role=\"grid\"\n />\n
\n )}\n \n )}\n \n
\n )}\n
\n
\n \n );\n }\n}\n","title":"Filterable with WindowScroller","lang":"js"}}> + console.log('clicked on Some action, on row: ', rowId)\n },\n {\n title:
Another action
,\n onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Another action, on row: ', rowId)\n },\n {\n isSeparator: true\n },\n {\n title: 'Third action',\n onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Third action, on row: ', rowId)\n }\n ]\n };\n\n this._handleResize = debounce(this._handleResize.bind(this), 100);\n\n this.onDelete = (type = '', id = '') => {\n if (type) {\n this.setState((prevState) => {\n prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter((s) => s !== id);\n return {\n filters: prevState.filters\n };\n });\n } else {\n this.setState({\n filters: {\n location: [],\n name: [],\n status: []\n },\n inputValue: ''\n });\n }\n };\n\n this.onCategoryToggle = (_event, isOpen) => {\n this.setState({\n isCategoryDropdownOpen: isOpen\n });\n };\n\n this.onCategorySelect = (event) => {\n this.setState({\n currentCategory: event.target.innerText,\n isCategoryDropdownOpen: !this.state.isCategoryDropdownOpen\n });\n };\n\n this.onFilterToggle = (_event, isOpen) => {\n this.setState({\n isFilterDropdownOpen: isOpen\n });\n };\n\n this.onFilterSelect = (_event) => {\n this.setState({\n isFilterDropdownOpen: !this.state.isFilterDropdownOpen\n });\n };\n\n this.onInputChange = (_event, newValue) => {\n // this.setState({ inputValue: newValue });\n if (newValue === '') {\n this.onDelete();\n this.setState({\n inputValue: newValue\n });\n } else {\n this.setState((prevState) => ({\n filters: {\n ...prevState.filters,\n ['name']: [newValue]\n },\n inputValue: newValue\n }));\n }\n };\n\n this.onRowSelect = (event, isSelected, rowId) => {\n let rows;\n if (rowId === -1) {\n rows = this.state.rows.map((oneRow) => {\n oneRow.selected = isSelected;\n return oneRow;\n });\n } else {\n rows = [...this.state.rows];\n rows[rowId].selected = isSelected;\n }\n this.setState({\n rows\n });\n };\n\n this.onStatusSelect = (event, selection) => {\n const checked = event.target.checked;\n this.setState((prevState) => {\n const prevSelections = prevState.filters.status;\n return {\n filters: {\n ...prevState.filters,\n status: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection)\n }\n };\n });\n };\n\n this.onNameInput = (event) => {\n if (event.key && event.key !== 'Enter') {\n return;\n }\n\n const { inputValue } = this.state;\n this.setState((prevState) => {\n const prevFilters = prevState.filters.name;\n return {\n filters: {\n ...prevState.filters,\n ['name']: prevFilters.includes(inputValue) ? prevFilters : [...prevFilters, inputValue]\n },\n inputValue: ''\n };\n });\n };\n\n this.onLocationSelect = (event, selection) => {\n this.setState((prevState) => ({\n filters: {\n ...prevState.filters,\n ['location']: [selection]\n }\n }));\n this.onFilterSelect();\n };\n\n this._handleResize = debounce(this._handleResize.bind(this), 100);\n this._bindBodyRef = this._bindBodyRef.bind(this);\n }\n\n componentDidMount() {\n // re-render after resize\n window.addEventListener('resize', this._handleResize);\n\n setTimeout(() => {\n const scollableElement = document.getElementById('content-scrollable-1');\n this.setState({ scollableElement });\n });\n\n // re-render after resize\n window.addEventListener('resize', this._handleResize);\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this._handleResize);\n }\n\n _handleResize() {\n this._cellMeasurementCache.clearAll();\n this._bodyRef.recomputeVirtualGridSize();\n }\n\n _bindBodyRef(ref) {\n this._bodyRef = ref;\n }\n\n buildCategoryDropdown() {\n const { isCategoryDropdownOpen, currentCategory } = this.state;\n\n return (\n \n \n {currentCategory}\n \n }\n isOpen={isCategoryDropdownOpen}\n dropdownItems={[\n Location,\n Name,\n Status\n ]}\n style={{ width: '100%' }}\n >\n \n );\n }\n\n buildFilterDropdown() {\n const { currentCategory, isFilterDropdownOpen, inputValue, filters } = this.state;\n\n const locationMenuItems = [\n ,\n ,\n ,\n ,\n \n ];\n\n const statusMenuItems = [\n ,\n ,\n ,\n ,\n \n ];\n\n return (\n \n \n \n {locationMenuItems}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {statusMenuItems}\n \n \n \n );\n }\n\n renderToolbar() {\n return (\n \n \n } breakpoint=\"xl\">\n \n {this.buildCategoryDropdown()}\n {this.buildFilterDropdown()}\n \n \n \n \n );\n }\n\n render() {\n const { loading, rows, columns, actions, filters, scollableElement } = this.state;\n\n const filteredRows =\n filters.name.length > 0 || filters.location.length > 0 || filters.status.length > 0\n ? rows.filter((row) => (\n (filters.name.length === 0 ||\n filters.name.some((name) => row.cells[0].toLowerCase().includes(name.toLowerCase()))) &&\n (filters.location.length === 0 || filters.location.includes(row.cells[4])) &&\n (filters.status.length === 0 || filters.status.includes(row.cells[3]))\n ))\n : rows;\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {\n const { actions } = this.state;\n\n return (\n \n \n {filteredRows[index].cells[0]}\n {filteredRows[index].cells[1]}\n {filteredRows[index].cells[2]}\n {filteredRows[index].cells[3]}\n {filteredRows[index].cells[4]}\n \n \n \n \n \n );\n };\n\n return (\n \n {this.renderToolbar()}\n\n \n
\n {!loading && filteredRows.length > 0 && (\n
\n \n \n \n \n {({ height, _isScrolling, registerChild, _onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
\n (this.actionsVirtualBody = ref)}\n autoHeight\n className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n deferredMeasurementCache={measurementCache}\n rowHeight={measurementCache.rowHeight}\n height={height || 0}\n overscanRowCount={10}\n columnCount={6}\n rows={filteredRows}\n rowCount={filteredRows.length}\n rowRenderer={rowRenderer}\n scrollTop={scrollTop}\n width={width}\n role=\"grid\"\n />\n
\n )}\n \n )}\n \n
\n )}\n
\n \n \n );\n }\n}\n","title":"Filterable with WindowScroller","lang":"js"}}> }; diff --git a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js index 8b338e7..24607e3 100644 --- a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js +++ b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js @@ -181,11 +181,11 @@ pageData.relativeImports = { }; pageData.examples = { 'Window scroller': props => - rowIndex\n });\n }\n\n this.state = {\n scrollToIndex: -1, // can be used to programmatically set current index\n scrollableElement: null,\n columns: [\n {\n title: 'Repositories',\n props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n },\n {\n title: 'Branches',\n props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n },\n {\n title: 'Pull requests',\n props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }\n },\n {\n title: 'Workspaces',\n props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }\n },\n { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }\n ],\n rows\n };\n\n this._handleResize = debounce(this._handleResize.bind(this), 100);\n this._bindBodyRef = this._bindBodyRef.bind(this);\n }\n\n componentDidMount() {\n // re-render after resize\n window.addEventListener('resize', this._handleResize);\n\n this.setState({ scrollableElement: document.getElementById('content-scrollable-1') });\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this._handleResize);\n }\n\n _handleResize() {\n this._cellMeasurementCache.clearAll();\n this._bodyRef.recomputeVirtualGridSize();\n }\n\n _bindBodyRef(ref) {\n this._bodyRef = ref;\n }\n\n render() {\n const { scrollToIndex, columns, rows, scrollableElement } = this.state;\n\n const rowRenderer = ({ index, isScrolling, key, style, parent }) => {\n const { rows, columns } = this.state;\n const text = rows[index].cells[0];\n\n return (\n \n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n \n );\n };\n\n return (\n \n
\n \n \n \n {scrollableElement && (\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
\n \n
\n )}\n \n )}\n \n )}\n
\n \n );\n }\n}\n","title":"Window scroller","lang":"js"}}> + rowIndex\n });\n }\n\n this.state = {\n scrollToIndex: -1, // can be used to programmatically set current index\n scrollableElement: null,\n columns: [\n {\n title: 'Repositories',\n props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n },\n {\n title: 'Branches',\n props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n },\n {\n title: 'Pull requests',\n props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }\n },\n {\n title: 'Workspaces',\n props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }\n },\n { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }\n ],\n rows\n };\n\n this._handleResize = debounce(this._handleResize.bind(this), 100);\n this._bindBodyRef = this._bindBodyRef.bind(this);\n }\n\n componentDidMount() {\n // re-render after resize\n window.addEventListener('resize', this._handleResize);\n\n this.setState({ scrollableElement: document.getElementById('content-scrollable-1') });\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this._handleResize);\n }\n\n _handleResize() {\n this._cellMeasurementCache.clearAll();\n this._bodyRef.recomputeVirtualGridSize();\n }\n\n _bindBodyRef(ref) {\n this._bodyRef = ref;\n }\n\n render() {\n const { scrollToIndex, columns, rows, scrollableElement } = this.state;\n\n const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {\n const { rows, columns } = this.state;\n const text = rows[index].cells[0];\n\n return (\n \n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n \n );\n };\n\n return (\n \n
\n \n \n \n {scrollableElement && (\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
\n \n
\n )}\n \n )}\n \n )}\n
\n \n );\n }\n}\n","title":"Window scroller","lang":"js"}}> , 'Using composable table components': props => - {\n const [scrollableElement, setScrollableElement] = React.useState();\n React.useEffect(() => {\n const scrollableElement = document.getElementById('content-scrollable-2');\n setScrollableElement(scrollableElement);\n });\n const rows = [];\n for (let i = 0; i < 100000; i++) {\n const cells = [];\n const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n for (let j = 0; j < 5; j++) {\n const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n cells.push(cellValue);\n }\n rows.push(cells);\n }\n const [selected, setSelected] = React.useState(rows.map((row) => false));\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n const scrollToIndex = -1; // can be used to programmatically set current index\n\n const onSelect = (event, isSelected, rowId) => {\n setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel)));\n };\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, isScrolling, key, style, parent }) => {\n const text = rows[rowIndex][0];\n\n return (\n \n \n \n {columns.map((col, index) => (\n {text}\n ))}\n \n \n );\n };\n\n const scrollableContainerStyle = {\n height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n overflowX: 'auto',\n overflowY: 'scroll',\n scrollBehavior: 'smooth',\n WebkitOverflowScrolling: 'touch',\n position: 'relative'\n };\n\n return (\n \n \n \n \n \n \n ))}\n \n \n
Virtualized table with composable table components
\n {columns.map((col, index) => (\n {col}
\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
\n \n
\n )}\n \n )}\n \n \n );\n};\n","title":"Using composable table components","lang":"js"}}> + {\n const [scrollableElement, setScrollableElement] = React.useState();\n React.useEffect(() => {\n const scrollableElement = document.getElementById('content-scrollable-2');\n setScrollableElement(scrollableElement);\n });\n const rows = [];\n for (let i = 0; i < 100000; i++) {\n const cells = [];\n const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n for (let j = 0; j < 5; j++) {\n const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n cells.push(cellValue);\n }\n rows.push(cells);\n }\n const [selected, setSelected] = React.useState(rows.map((_row) => false));\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n const scrollToIndex = -1; // can be used to programmatically set current index\n\n const onSelect = (event, isSelected, rowId) => {\n setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel)));\n };\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => {\n const text = rows[rowIndex][0];\n\n return (\n \n \n \n {columns.map((col, index) => (\n {text}\n ))}\n \n \n );\n };\n\n const scrollableContainerStyle = {\n height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n overflowX: 'auto',\n overflowY: 'scroll',\n scrollBehavior: 'smooth',\n WebkitOverflowScrolling: 'touch',\n position: 'relative'\n };\n\n return (\n \n \n \n \n \n \n ))}\n \n \n
Virtualized table with composable table components
\n {columns.map((col, index) => (\n {col}
\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
\n \n
\n )}\n \n )}\n \n \n );\n};\n","title":"Using composable table components","lang":"js"}}> }; From a56ecb7f96ba666dc3d4aa2c7de3f96c49be625d Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Mon, 4 Dec 2023 16:53:42 -0500 Subject: [PATCH 2/4] chore(docs): fix missing type in Selectable example --- .../module/patternfly-docs/content/examples/Selectable.tsx | 5 ++++- .../generated/extensions/virtual-scroll-table/react.js | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/Selectable.tsx b/packages/module/patternfly-docs/content/examples/Selectable.tsx index 09ee509..6fec6a0 100644 --- a/packages/module/patternfly-docs/content/examples/Selectable.tsx +++ b/packages/module/patternfly-docs/content/examples/Selectable.tsx @@ -5,7 +5,10 @@ import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-exten import { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table'; export const SelectableTableVirtualized: React.FunctionComponent = () => { - const rows = []; + // this StringArray type is just needed because something in our documentation framework crashes when it encounters + // a string[][] type + type StringArray = string[]; + const rows: StringArray[] = []; for (let i = 0; i < 100; i++) { rows.push([`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]); diff --git a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js index c2e3411..cb899b2 100644 --- a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js +++ b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js @@ -224,7 +224,7 @@ pageData.examples = { , 'Selectable': props => - {\n oneRow.selected = isSelected;\n return oneRow;\n });\n } else {\n rows = [...this.state.rows];\n const rowIndex = rows.findIndex((r) => r.id === rowData.id);\n rows[rowIndex] = { ...rows[rowIndex], selected: isSelected };\n }\n this.setState({\n rows\n });\n this.selectableVirtualBody.forceUpdateVirtualGrid();\n }\n\n render() {\n const { columns, rows } = this.state;\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {\n const { rows, columns } = this.state;\n\n return (\n \n \n \n {\n this.onSelect(e, e.target.checked, 0, { id: rows[index].id });\n }}\n />\n \n \n {rows[index].cells[0]}\n \n \n {rows[index].cells[1]}\n \n \n {rows[index].cells[2]}\n \n \n {rows[index].cells[3]}\n \n \n \n );\n };\n\n return (\n
\n \n \n \n \n {({ width }) => (\n (this.selectableVirtualBody = ref)}\n className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n deferredMeasurementCache={measurementCache}\n rowHeight={measurementCache.rowHeight}\n height={400}\n overscanRowCount={2}\n columnCount={1}\n rows={rows}\n rowCount={rows.length}\n rowRenderer={rowRenderer}\n width={width}\n role=\"grid\"\n />\n )}\n \n
\n );\n }\n}\n","title":"Selectable","lang":"js"}}> + {\n // this StringArray type is just needed because something in our documentation framework crashes when it encounters\n // a string[][] type\n type StringArray = string[];\n const rows: StringArray[] = [];\n\n for (let i = 0; i < 100; i++) {\n rows.push([`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]);\n }\n\n const selectableRepos = rows;\n\n const [selectedRepoNames, setSelectedRepoNames] = React.useState([]);\n\n const setRepoSelected = (repo: string, isSelecting = true) =>\n setSelectedRepoNames((prevSelected) => {\n const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo);\n return isSelecting ? [...otherSelectedRepoNames, repo] : otherSelectedRepoNames;\n });\n\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n\n const selectAllRepos = (isSelecting = true) => setSelectedRepoNames(isSelecting ? rows.map((item) => item[0]) : []);\n\n const areAllReposSelected = selectedRepoNames.length === selectableRepos.length;\n const isRepoSelected = (repo: string) => selectedRepoNames.includes(repo);\n\n const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState(null);\n\n const onSelectRepo = (repo: string, rowIndex: number, isSelecting: boolean) => {\n if (recentSelectedRowIndex !== null) {\n const numberSelected = rowIndex - recentSelectedRowIndex;\n const intermediateIndexes =\n numberSelected > 0\n ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)\n : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);\n intermediateIndexes.forEach(() => setRepoSelected(repo, isSelecting));\n } else {\n setRepoSelected(repo, isSelecting);\n }\n setRecentSelectedRowIndex(rowIndex);\n };\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => (\n \n \n onSelectRepo(rows[rowIndex][0], rowIndex, isSelecting),\n isSelected: isRepoSelected(rows[rowIndex][0])\n }}\n />\n {columns.map((col, index) => (\n {rows[rowIndex][index]}\n ))}\n \n \n );\n\n return (\n
\n \n \n \n \n selectAllRepos(isSelecting),\n isSelected: areAllReposSelected\n }}\n />\n {columns.map((col, index) => (\n \n ))}\n \n \n
Selectable Virtualized Table
{col}
\n \n {({ width }) => (\n \n )}\n \n
\n );\n};\n","title":"Selectable","lang":"js"}}> , 'Actions': props => From d4ead0f9b91a01e2a8ac0750358393132025a6d0 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 5 Dec 2023 16:34:08 -0500 Subject: [PATCH 3/4] chore(tests): fix tests --- jest.config.js | 3 +- package.json | 1 + .../Virtualized/VirtualizedTable.test.tsx | 2 +- .../components/Virtualized/testDataSets.tsx | 221 ++++++++++++++++++ yarn.lock | 125 +++++----- 5 files changed, 290 insertions(+), 62 deletions(-) create mode 100644 packages/module/src/components/Virtualized/testDataSets.tsx diff --git a/jest.config.js b/jest.config.js index cd73600..56fc911 100644 --- a/jest.config.js +++ b/jest.config.js @@ -8,7 +8,8 @@ module.exports = { ], roots: ['/packages'], transform: { - '^.+\\.[jt]sx?$': 'babel-jest' + '^.+\\.[jt]sx?$': 'babel-jest', + '^.+\\.svg$': 'jest-transform-stub' }, transformIgnorePatterns: ['node_modules/(?!@patternfly)'], moduleNameMapper: { diff --git a/package.json b/package.json index a37eb58..07abfe7 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "@typescript-eslint/parser": "^5.59.7", "prettier": "2.8.8", "jest": "^29.5.0", + "jest-transform-stub": "2.0.0", "babel-jest": "^29.5.0", "@babel/core": "^7.21.8", "@babel/preset-env": "^7.21.5", diff --git a/packages/module/src/components/Virtualized/VirtualizedTable.test.tsx b/packages/module/src/components/Virtualized/VirtualizedTable.test.tsx index 0710b32..d0ec4c4 100644 --- a/packages/module/src/components/Virtualized/VirtualizedTable.test.tsx +++ b/packages/module/src/components/Virtualized/VirtualizedTable.test.tsx @@ -8,7 +8,7 @@ import { TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated'; import { VirtualTableBody } from './index'; -import { rows, columns, actions } from '@patternfly/react-table/src/test-helpers/data-sets'; +import { rows, columns, actions } from './testDataSets'; import { CellMeasurerCache } from 'react-virtualized'; const measurementCache = new CellMeasurerCache({ diff --git a/packages/module/src/components/Virtualized/testDataSets.tsx b/packages/module/src/components/Virtualized/testDataSets.tsx new file mode 100644 index 0000000..a6334ad --- /dev/null +++ b/packages/module/src/components/Virtualized/testDataSets.tsx @@ -0,0 +1,221 @@ +/* eslint-disable no-console */ + +// This file is test data pulled from the @patternfly/react-table package + +import * as React from 'react'; +import { IRow, ICell, IActions, EditableTextCell } from '@patternfly/react-table'; + +export const columns: (ICell | string)[] = [ + { title: 'Header cell' }, + 'Branches', + { title: 'Pull requests' }, + 'Workspaces', + { + title: 'Last Commit' + } +]; + +export const rows: IRow[] = [ + { + cells: ['one', 'two', 'three', 'four', 'five'] + }, + { + cells: ['one', 'two', 'three', 'four', 'five'] + }, + { + cells: ['one', 'two', 'three', 'four', 'five'] + }, + { + cells: ['one', 'two', 'three', 'four', 'five'] + }, + { + cells: ['one', 'two', 'three', 'four', 'five'] + }, + { + cells: ['one', 'two', 'three', 'four', 'five'] + }, + { + cells: ['one', 'two', 'three', 'four', 'five'] + }, + { + cells: ['one', 'two', 'three', 'four', 'five'] + }, + { + cells: ['one', 'two', 'three', 'four', 'five'] + } +]; + +export const editableColumns: (ICell | string)[] = [ + 'Text input col 1', + 'Disabled text input col 2', + 'Text input col 3', + 'Text input col 4' +]; + +export const editableRows: IRow[] = [ + { + isEditable: true, + cells: [ + { + title: (value: string, rowIndex: number, cellIndex: number, props: any) => ( + {}} + inputAriaLabel="Row 1 cell 1 content" + /> + ), + props: { + value: 'Row 1 cell 1 content', + name: 'uniqueIdRow1Cell1' + } + }, + { + title: (value: string, rowIndex: number, cellIndex: number, props: any) => ( + {}} + inputAriaLabel="Row 1 cell 2 content" + /> + ), + props: { + value: 'Row 1 cell 2, disabled content', + name: 'uniqueIdRow1Cell2' + } + }, + { + title: (value: string, rowIndex: number, cellIndex: number, props: any) => ( + {}} + inputAriaLabel="Row 1 cell 3 content" + /> + ), + props: { + value: 'Row 1 cell 3 content', + name: 'uniqueIdRow1Cell3' + } + }, + { + title: (value: string, rowIndex: number, cellIndex: number, props: any) => ( + {}} + inputAriaLabel="Row 1 cell 4 content" + /> + ), + props: { + value: 'Row 1 cell 4 content', + name: 'uniqueIdRow1Cell4' + } + } + ] + }, + { + isEditable: false, + cells: [ + { + title: (value: string, rowIndex: number, cellIndex: number, props: any) => ( + {}} + inputAriaLabel="Row 1 cell 1 content" + /> + ), + props: { + value: 'Row 2 cell 1 content', + name: 'uniqueIdRow2Cell1' + } + }, + { + title: (value: string, rowIndex: number, cellIndex: number, props: any) => ( + {}} + inputAriaLabel="Row 2 cell 2 content" + /> + ), + props: { + value: 'Row 2 cell 2, disabled content', + name: 'uniqueIdRow2Cell2' + } + }, + { + title: (value: string, rowIndex: number, cellIndex: number, props: any) => ( + {}} + inputAriaLabel="Row 2 cell 3 content" + /> + ), + props: { + value: 'Row 2 cell 3 content', + name: 'uniqueIdRow2Cell3' + } + }, + { + title: (value: string, rowIndex: number, cellIndex: number, props: any) => ( + {}} + inputAriaLabel="Row 2 cell 4 content" + /> + ), + props: { + value: 'Row 2 cell 4 content', + name: 'uniqueIdRow2Cell4' + } + } + ] + } +]; + +export const actions: IActions = [ + { + title: 'Some action', + onClick: (event: React.MouseEvent, rowId: number) => + // tslint:disable-next-line:no-console + console.log('clicked on Some action, on row: ', rowId) + }, + { + title:
Another action
, + onClick: (event: React.MouseEvent, rowId: number) => + // tslint:disable-next-line:no-console + console.log('clicked on Another action, on row: ', rowId) + }, + { + isSeparator: true, + onClick: null + }, + { + title: 'Third action', + onClick: (event: React.MouseEvent, rowId: number) => + // tslint:disable-next-line:no-console + console.log('clicked on Third action, on row: ', rowId) + } +]; diff --git a/yarn.lock b/yarn.lock index 44e93fe..3d3f429 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2070,10 +2070,10 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" -"@patternfly/ast-helpers@^0.4.57": - version "0.4.79" - resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-0.4.79.tgz#7d738323681d5a1138d973b1daf534f1a05080b2" - integrity sha512-Nn2Uut7Z1nQwDr5LAf1bns6yCFQFQWwXE2I1Ucvbk6s2Gl2X/85VGvww8FVO+YiW/plLZMLBFRPJMP4fs2N8Cg== +"@patternfly/ast-helpers@^1.3.9": + version "1.3.9" + resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.3.9.tgz#b0598627448cb3059cdab8bb2c4f011f19aac8de" + integrity sha512-D5mPJjTXH4tH2pqM8AcqAUkGZGEXe7RapzLRXR2B6GvJu/luyZSTAoZu5d53d885Pnj1WpyxjcXjWnV222c0TQ== dependencies: acorn "^8.4.1" acorn-class-fields "^1.0.0" @@ -2081,10 +2081,10 @@ acorn-static-class-features "^1.0.0" astring "^1.7.5" -"@patternfly/documentation-framework@^5.0.15": - version "5.0.15" - resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-5.0.15.tgz#56e6608de10a95a92787686e5db1eb3ff7c09b89" - integrity sha512-3r9fqPeAKY8GeJM6m7VPyPsiggxhyDbbWTo2/4T4NoNisVPpFXi0AzUaTpvJU2KcBx5pSot1mb84V3f8DHzWXg== +"@patternfly/documentation-framework@^5.2.22": + version "5.3.9" + resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-5.3.9.tgz#87a9f132682af328d9c23e20a66a0aa957d5c9cb" + integrity sha512-gfmy/0V0EC+FECPld125JcIX5tMt2p27lr+y/UXLGpcljpi04DFpNHfKUY67E0CaJA/9WqjDv08rqum7sweWcg== dependencies: "@babel/core" "7.18.2" "@babel/plugin-proposal-class-properties" "7.17.12" @@ -2094,7 +2094,7 @@ "@babel/plugin-transform-react-jsx" "7.17.12" "@babel/preset-env" "7.18.2" "@mdx-js/util" "1.6.16" - "@patternfly/ast-helpers" "^0.4.57" + "@patternfly/ast-helpers" "^1.3.9" "@reach/router" "npm:@gatsbyjs/reach-router@1.3.9" autoprefixer "9.8.6" babel-loader "9.1.2" @@ -2170,60 +2170,60 @@ puppeteer-cluster "^0.23.0" xmldoc "^1.1.2" -"@patternfly/patternfly@^5.0.0": - version "5.0.2" - resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.0.2.tgz#f5daf2c98ccb85e6466d42fd61d39ba3c10ed532" - integrity sha512-PB8+MLdYVgF1hIOxGmnVsZG+YHUX3RePe5W1oMS4gS00EmSgw1cobr1Qbpy/BqqS8/R9DRN4hZ2FKDT0d5tkFQ== +"@patternfly/patternfly@^6.0.0-alpha.9": + version "6.0.0-alpha.28" + resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.28.tgz#5c3d0b0b1c712d8f2b9bcc05d3b6545f8f46a9ce" + integrity sha512-10vNDFHjtSRIfTbAnZqed2jbhXA6K4o9ijT8lGrxiSTq4qxRHNcTnNoV9oX328wvvdao052xv6HDYwvgwlvBiA== -"@patternfly/react-code-editor@^5.0.0": - version "5.0.0" - resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-5.0.0.tgz#2ba9d49a84023907b94fcbec13ec62b2d463d33e" - integrity sha512-Ya1nuw2Zcor/MET+s0+VuYq2VsRb+VzKpZQ8Y1MbrXJdlWV6QS5Wf1M7jDl9lYkiJaS3pjG7eXNeVX2YJ+mQiw== +"@patternfly/react-code-editor@^6.0.0-alpha.1": + version "6.0.0-alpha.3" + resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-6.0.0-alpha.3.tgz#1f2bf8030362842afe17dc733c07786bc464bf7a" + integrity sha512-aKHBA7r/9BNV69AyE8IFbQ9P+Xh3v7dEixfzY9oyJEyDEpTXfsdC6ow/lQN/zCVIieorvs7WPFPO/hHuGEUeng== dependencies: - "@patternfly/react-core" "^5.0.0" - "@patternfly/react-icons" "^5.0.0" - "@patternfly/react-styles" "^5.0.0" + "@patternfly/react-core" "^6.0.0-alpha.3" + "@patternfly/react-icons" "^6.0.0-alpha.3" + "@patternfly/react-styles" "^6.0.0-alpha.3" react-dropzone "14.2.3" tslib "^2.5.0" -"@patternfly/react-core@^5.0.0": - version "5.0.0" - resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-5.0.0.tgz#96c9e2315047eec94d28f5621c02fa147182dd6f" - integrity sha512-kewRVFhLw0Dvt8250pqrO47sVRx8E93sMGZbHQomJnZdachYeQ9STnQTP2gvOBq/GPnMei0LZLv0T99g8mPE4w== +"@patternfly/react-core@^6.0.0-alpha.1", "@patternfly/react-core@^6.0.0-alpha.3": + version "6.0.0-alpha.3" + resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.0.0-alpha.3.tgz#5531f6c0010923a3e41ad3db0432e74d21f40cca" + integrity sha512-j5ujDYuoAyWB7RQJbosA2fAg+0H9bViDRgt4opN1/XHGBuZ5VP9Ty5PiPt3FO83ysSfa7pstpAhUtRZ0Tkfihw== dependencies: - "@patternfly/react-icons" "^5.0.0" - "@patternfly/react-styles" "^5.0.0" - "@patternfly/react-tokens" "^5.0.0" - focus-trap "7.4.3" + "@patternfly/react-icons" "^6.0.0-alpha.3" + "@patternfly/react-styles" "^6.0.0-alpha.3" + "@patternfly/react-tokens" "^6.0.0-alpha.3" + focus-trap "7.5.2" react-dropzone "^14.2.3" tslib "^2.5.0" -"@patternfly/react-icons@^5.0.0": - version "5.0.0" - resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-5.0.0.tgz#bb56ead97425f1b3ab886ee291ba6b6af4088e9d" - integrity sha512-GG5Y/UYl0h346MyDU9U650Csaq4Mxk8S6U8XC7ERk/xIrRr2RF67O2uY7zKBDMTNLYdBvPzgc2s3OMV1+d2/mg== - -"@patternfly/react-styles@^5.0.0": - version "5.0.0" - resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-5.0.0.tgz#63705ad498ff271fd056e92bd07b2c720ef3491a" - integrity sha512-xbSCgjx+fPrXbIzUznwTFWtJEbzVS0Wn4zrejdKJYQTY+4YcuPlFkeq2tl3syzwGsaYMpHiFwQiTaKyTvlwtuw== - -"@patternfly/react-table@^5.0.0": - version "5.0.0" - resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-5.0.0.tgz#2808f22d01818c31e6ddc69cc3a07c9381dc6d84" - integrity sha512-Q3MBo9+ZmBvLJzVHxmV9f/4qQAz5Si743zVLHRwjh+tjbn/DrcbxJdT8Uxa3NGKkpvszzgi/LPeXipJOHOELug== - dependencies: - "@patternfly/react-core" "^5.0.0" - "@patternfly/react-icons" "^5.0.0" - "@patternfly/react-styles" "^5.0.0" - "@patternfly/react-tokens" "^5.0.0" +"@patternfly/react-icons@^6.0.0-alpha.1", "@patternfly/react-icons@^6.0.0-alpha.3": + version "6.0.0-alpha.3" + resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.0.0-alpha.3.tgz#de89a32f1c17e8bb7c6af5a50e99a250702d0cda" + integrity sha512-iBsQ6y2aUKwT3BXYYDNnTdCcN7u8Ip6w+nV/+Q9CeCKm1eir4fOaCLKPijTUqOoe832oBKq3lmEAFSmAUhQYDw== + +"@patternfly/react-styles@^6.0.0-alpha.1", "@patternfly/react-styles@^6.0.0-alpha.3": + version "6.0.0-alpha.3" + resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.0.0-alpha.3.tgz#d8b3637a93f554d4cdcd8aee029ac7658928be0d" + integrity sha512-evZssf7C6csk27af31PwsCjy889DxN/htQVxuBsFrpqGdWX9Jn/iiHiMiH0JMpiwXXwvgtU0AB2pU/RYHewL0A== + +"@patternfly/react-table@^6.0.0-alpha.1": + version "6.0.0-alpha.3" + resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-6.0.0-alpha.3.tgz#28b2e1de935bb6496604799012c1109ce9077ca2" + integrity sha512-h3UPWMCcBHjDYhr/w6/t8QKMLF4Cv/Eb8t4hJY6bK/0iLWFeWXKZeZdYbJrRSeQaYZMEzU5b0saVJImY3+ijbw== + dependencies: + "@patternfly/react-core" "^6.0.0-alpha.3" + "@patternfly/react-icons" "^6.0.0-alpha.3" + "@patternfly/react-styles" "^6.0.0-alpha.3" + "@patternfly/react-tokens" "^6.0.0-alpha.3" lodash "^4.17.19" tslib "^2.5.0" -"@patternfly/react-tokens@^5.0.0": - version "5.0.0" - resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-5.0.0.tgz#8e2698d32d5353359e713312687a6b08ead0080b" - integrity sha512-to2CXIZ6WTuzBcjLZ+nXi5LhnYkSIDu3RBMRZwrplmECOoUWv87CC+2T0EVxtASRtpQfikjD2PDKMsif5i0BxQ== +"@patternfly/react-tokens@^6.0.0-alpha.3": + version "6.0.0-alpha.3" + resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.3.tgz#a3923e343fe6dc85c476e771c04af0f7370830c4" + integrity sha512-F5DdUK137M9yt/a7MkMaL6ZNgh/1Gn1RlMl7EcGNVmHAzURDn7V0RHIOcNy5w+5Pc+Lu+p6Y7qJ8AUiM4TyVug== "@pkgjs/parseargs@^0.11.0": version "0.11.0" @@ -5744,12 +5744,12 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" -focus-trap@7.4.3: - version "7.4.3" - resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.4.3.tgz#a3dae73d44df359eb92bbf37b18e173e813b16c5" - integrity sha512-BgSSbK4GPnS2VbtZ50VtOv1Sti6DIkj3+LkVjiWMNjLeAp1SH1UlLx3ULu/DCu4vq5R4/uvTm+zrvsMsuYmGLg== +focus-trap@7.5.2: + version "7.5.2" + resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.5.2.tgz#e5ee678d10a18651f2591ffb66c949fb098d57cf" + integrity sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw== dependencies: - tabbable "^6.1.2" + tabbable "^6.2.0" follow-redirects@1.5.10: version "1.5.10" @@ -7466,6 +7466,11 @@ jest-snapshot@^29.5.0: pretty-format "^29.5.0" semver "^7.3.5" +jest-transform-stub@2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz#19018b0851f7568972147a5d60074b55f0225a7d" + integrity sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg== + jest-util@^29.2.1: version "29.2.1" resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.2.1.tgz#f26872ba0dc8cbefaba32c34f98935f6cf5fc747" @@ -10621,10 +10626,10 @@ symbol-tree@^3.2.4: resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== -tabbable@^6.1.2: - version "6.1.2" - resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.2.tgz#b0d3ca81d582d48a80f71b267d1434b1469a3703" - integrity sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ== +tabbable@^6.2.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97" + integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew== tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0: version "2.2.1" From 281ba386834f8a8a01a8ddd680c6fd6f0f8e0218 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 5 Dec 2023 16:47:06 -0500 Subject: [PATCH 4/4] chore(deps): resolve merge conflict --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 3d3f429..81f0069 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7466,7 +7466,7 @@ jest-snapshot@^29.5.0: pretty-format "^29.5.0" semver "^7.3.5" -jest-transform-stub@2.0.0: +jest-transform-stub@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz#19018b0851f7568972147a5d60074b55f0225a7d" integrity sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==