diff --git a/apps/docs/package.json b/apps/docs/package.json index 78e030da..62226341 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -13,12 +13,14 @@ "@dnd-kit/dom": "*", "@dnd-kit/react": "*", "@dnd-kit/state-management": "*", + "@tanstack/react-virtual": "^3.0.0-beta.54", "prismjs": "^1.29.0", "clipboard": "^2.0.11", "react": "^18.2.0", "react-dom": "^18.2.0", "use-pan-and-zoom": "^0.6.5", - "@tanstack/react-virtual": "^3.0.0-beta.54" + "react-tiny-virtual-list": "^2.2.0", + "react-window": "1.8.9" }, "devDependencies": { "@dnd-kit/abstract": "*", diff --git a/apps/docs/stories/react/Sortable/MultipleContainers/docs/MultipleLists.mdx b/apps/docs/stories/react/Sortable/MultipleContainers/docs/MultipleLists.mdx deleted file mode 100644 index c1d83b8c..00000000 --- a/apps/docs/stories/react/Sortable/MultipleContainers/docs/MultipleLists.mdx +++ /dev/null @@ -1,21 +0,0 @@ -import {Code, Preview} from '../../../../components'; - -import {MultipleLists} from '../MultipleLists.tsx'; - -# Multiple lists - -Reorder sortable elements across multiple lists. - - -
- -
- diff --git a/apps/docs/stories/react/Sortable/MultipleContainers/MultipleLists.stories.tsx b/apps/docs/stories/react/Sortable/MultipleLists/MultipleLists.stories.tsx similarity index 100% rename from apps/docs/stories/react/Sortable/MultipleContainers/MultipleLists.stories.tsx rename to apps/docs/stories/react/Sortable/MultipleLists/MultipleLists.stories.tsx diff --git a/apps/docs/stories/react/Sortable/MultipleContainers/MultipleLists.tsx b/apps/docs/stories/react/Sortable/MultipleLists/MultipleLists.tsx similarity index 99% rename from apps/docs/stories/react/Sortable/MultipleContainers/MultipleLists.tsx rename to apps/docs/stories/react/Sortable/MultipleLists/MultipleLists.tsx index b2e8af7b..296d1097 100644 --- a/apps/docs/stories/react/Sortable/MultipleContainers/MultipleLists.tsx +++ b/apps/docs/stories/react/Sortable/MultipleLists/MultipleLists.tsx @@ -166,7 +166,7 @@ function SortableItem({ style={style} transitionId={`sortable-${column}-${id}`} > - {id} {index} + {id} ); } diff --git a/apps/docs/stories/react/Sortable/MultipleLists/docs/MultipleLists.mdx b/apps/docs/stories/react/Sortable/MultipleLists/docs/MultipleLists.mdx new file mode 100644 index 00000000..6bc67e78 --- /dev/null +++ b/apps/docs/stories/react/Sortable/MultipleLists/docs/MultipleLists.mdx @@ -0,0 +1,42 @@ +import {Code, Preview} from '../../../../components'; + +import {MultipleLists} from '../MultipleLists.tsx'; +import {Example} from './examples/QuickStart'; +import ExampleSource from './examples/QuickStart?raw'; +import ColumnSource from './examples/Column?raw'; +import ItemSource from './examples/Item?raw'; + +# Multiple lists + +Reorder sortable elements across multiple lists. + + +
+ +
+ + +## Installation + +Before getting started, make sure to install the `@dnd-kit/react` package: + +```bash +npm install @dnd-kit/react +``` + +## Getting started + + + + diff --git a/apps/docs/stories/react/Sortable/MultipleLists/docs/examples/Column.jsx b/apps/docs/stories/react/Sortable/MultipleLists/docs/examples/Column.jsx new file mode 100644 index 00000000..728123ff --- /dev/null +++ b/apps/docs/stories/react/Sortable/MultipleLists/docs/examples/Column.jsx @@ -0,0 +1,28 @@ +import React from 'react'; +import {useDroppable} from '@dnd-kit/react'; +import {CollisionPriority} from '@dnd-kit/abstract'; + +const styles = { + display: 'flex', + flexDirection: 'column', + gap: 10, + padding: 20, + minWidth: 200, + backgroundColor: 'rgba(0,0,0,0.1)', + borderRadius: 10, +}; + +export function Column({children, id}) { + const {ref} = useDroppable({ + id, + type: 'column', + accept: ['item'], + collisionPriority: CollisionPriority.Low, + }); + + return ( +
+ {children} +
+ ); +} diff --git a/apps/docs/stories/react/Sortable/MultipleLists/docs/examples/Item.jsx b/apps/docs/stories/react/Sortable/MultipleLists/docs/examples/Item.jsx new file mode 100644 index 00000000..865d6e45 --- /dev/null +++ b/apps/docs/stories/react/Sortable/MultipleLists/docs/examples/Item.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import {useSortable} from '@dnd-kit/react/sortable'; + +export function Item({id, index}) { + const {ref} = useSortable({id, index, type: 'item', accept: ['item']}); + + return ( + + ); +} diff --git a/apps/docs/stories/react/Sortable/MultipleLists/docs/examples/QuickStart.jsx b/apps/docs/stories/react/Sortable/MultipleLists/docs/examples/QuickStart.jsx new file mode 100644 index 00000000..9b310e7f --- /dev/null +++ b/apps/docs/stories/react/Sortable/MultipleLists/docs/examples/QuickStart.jsx @@ -0,0 +1,38 @@ +import React, {useState} from 'react'; +import {DragDropProvider} from '@dnd-kit/react'; +import {move} from '@dnd-kit/state-management'; + +import {Column} from './Column'; +import {Item} from './Item'; + +const styles = {display: 'inline-flex', flexDirection: 'row', gap: 20}; + +export function Example({style = styles}) { + const [items, setItems] = useState({ + A: ['A0', 'A1', 'A2'], + B: ['B0', 'B1'], + C: [], + }); + + return ( + { + const {source, target} = event.operation; + + if (source && target) { + setItems((items) => move(items, source, target)); + } + }} + > +
+ {Object.entries(items).map(([column, items]) => ( + + {items.map((id, index) => ( + + ))} + + ))} +
+ + ); +} diff --git a/apps/docs/stories/react/Sortable/Virtualized/ReactTinyVirtualListExample.tsx b/apps/docs/stories/react/Sortable/Virtualized/ReactTinyVirtualListExample.tsx new file mode 100644 index 00000000..c0e7fe14 --- /dev/null +++ b/apps/docs/stories/react/Sortable/Virtualized/ReactTinyVirtualListExample.tsx @@ -0,0 +1,83 @@ +import React, {useRef, useState} from 'react'; +import type {UniqueIdentifier} from '@dnd-kit/abstract'; +import {DragDropProvider} from '@dnd-kit/react'; +import {useSortable} from '@dnd-kit/react/sortable'; +import {defaultPreset} from '@dnd-kit/dom'; +import {Debug} from '@dnd-kit/dom/plugins/debug'; +import {move} from '@dnd-kit/state-management'; +import VirtualList from 'react-tiny-virtual-list'; + +import {Item, Handle} from '../../components'; +import {createRange, cloneDeep} from '../../../utilities'; + +interface Props { + debug?: boolean; +} + +export function ReactTinyVirtualListExample({debug}: Props) { + const [items, setItems] = useState(createRange(1000)); + const snapshot = useRef(cloneDeep(items)); + + return ( + { + snapshot.current = cloneDeep(items); + }} + onDragOver={(event) => { + const {source, target} = event.operation; + + if (!source || !target) { + return; + } + + setItems((items) => move(items, source, target)); + }} + onDragEnd={(event) => { + if (event.canceled) { + setItems(snapshot.current); + } + }} + > + { + const id = items[index]; + + return ; + }} + /> + + ); +} + +interface SortableProps { + id: UniqueIdentifier; + index: number; + style: React.CSSProperties; +} + +function Sortable({id, index, style}: SortableProps) { + const {isDragSource, ref, handleRef} = useSortable({ + id, + index, + }); + + return ( +
+ } + data-index={index} + shadow={isDragSource} + > + {id} + +
+ ); +} diff --git a/apps/docs/stories/react/Sortable/Virtualized/ReactVirtualExample.tsx b/apps/docs/stories/react/Sortable/Virtualized/ReactVirtualExample.tsx index 783d798c..5c932319 100644 --- a/apps/docs/stories/react/Sortable/Virtualized/ReactVirtualExample.tsx +++ b/apps/docs/stories/react/Sortable/Virtualized/ReactVirtualExample.tsx @@ -24,7 +24,7 @@ export function ReactVirtualExample({debug}: Props) { const virtualizer = useWindowVirtualizer({ count: items.length, - estimateSize: () => 62, + estimateSize: () => 72, scrollMargin: parentOffsetRef.current, getItemKey: (index) => items[index], }); diff --git a/apps/docs/stories/react/Sortable/Virtualized/ReactWindowExample.tsx b/apps/docs/stories/react/Sortable/Virtualized/ReactWindowExample.tsx new file mode 100644 index 00000000..d8396f55 --- /dev/null +++ b/apps/docs/stories/react/Sortable/Virtualized/ReactWindowExample.tsx @@ -0,0 +1,101 @@ +import React, {useRef, useEffect, useState} from 'react'; +import type {UniqueIdentifier} from '@dnd-kit/abstract'; +import {DragDropProvider} from '@dnd-kit/react'; +import {useSortable} from '@dnd-kit/react/sortable'; +import {defaultPreset} from '@dnd-kit/dom'; +import {Debug} from '@dnd-kit/dom/plugins/debug'; +import {move} from '@dnd-kit/state-management'; +import {FixedSizeList as List} from 'react-window'; + +import {Item, Handle} from '../../components'; +import {createRange, cloneDeep} from '../../../utilities'; + +interface Props { + debug?: boolean; +} + +export function ReactWindowExample({debug}: Props) { + const [items, setItems] = useState(createRange(1000)); + const snapshot = useRef(cloneDeep(items)); + + return ( + { + snapshot.current = cloneDeep(items); + }} + onDragOver={(event) => { + const {source, target} = event.operation; + + if (!source || !target) { + return; + } + + setItems((items) => move(items, source, target)); + }} + onDragEnd={(event) => { + if (event.canceled) { + setItems(snapshot.current); + } + }} + > + items[index]} + style={{margin: '0 auto'}} + > + {Row} + + + ); +} + +function Row({ + data, + index, + style, +}: { + data: UniqueIdentifier[]; + index: number; + style: React.CSSProperties; +}) { + return ; +} + +interface SortableProps { + id: UniqueIdentifier; + index: number; + style: React.CSSProperties; +} + +function Sortable({id, index, style}: SortableProps) { + const {isDragSource, ref, handleRef} = useSortable({ + id, + index, + }); + + useEffect(() => { + return () => { + console.log('unmount', id); + }; + }, [id]); + + return ( +
+ } + data-index={index} + shadow={isDragSource} + > + {id} + +
+ ); +} diff --git a/apps/docs/stories/react/Sortable/Virtualized/Virtualized.stories.tsx b/apps/docs/stories/react/Sortable/Virtualized/Virtualized.stories.tsx index bd5b84e8..a9df9454 100644 --- a/apps/docs/stories/react/Sortable/Virtualized/Virtualized.stories.tsx +++ b/apps/docs/stories/react/Sortable/Virtualized/Virtualized.stories.tsx @@ -1,18 +1,27 @@ import type {Meta, StoryObj} from '@storybook/react'; +import {ReactWindowExample} from './ReactWindowExample'; import {ReactVirtualExample} from './ReactVirtualExample'; +import {ReactTinyVirtualListExample} from './ReactTinyVirtualListExample'; const meta: Meta = { title: 'React/Sortable/Virtualized', - component: ReactVirtualExample, }; export default meta; type Story = StoryObj; +export const ReactWindow: Story = { + name: 'react-window', + render: ReactWindowExample, +}; + +export const ReactTinyVirtualList: Story = { + name: 'react-tiny-virtual-list', + render: ReactTinyVirtualListExample, +}; + export const ReactVirtual: Story = { name: 'react-virtual', - args: { - debug: false, - }, + render: ReactVirtualExample, }; diff --git a/packages/dom/src/core/entities/droppable/droppable.ts b/packages/dom/src/core/entities/droppable/droppable.ts index 6a99ab61..47a92432 100644 --- a/packages/dom/src/core/entities/droppable/droppable.ts +++ b/packages/dom/src/core/entities/droppable/droppable.ts @@ -34,11 +34,10 @@ export class Droppable extends AbstractDroppable { const {destroy} = this; - this.refreshShape = this.refreshShape.bind(this); - this.internal = { element: signal(element), }; + this.refreshShape = this.refreshShape.bind(this); /* * If a droppable target mounts during a drag operation, assume it is visible @@ -144,7 +143,7 @@ export class Droppable extends AbstractDroppable { } public get element() { - return this.placeholder ?? this.internal.element.value; + return this.placeholder ?? this.internal?.element.value; } public refreshShape(ignoreTransform?: boolean): Shape | undefined { diff --git a/packages/dom/src/core/plugins/feedback/Feedback.css b/packages/dom/src/core/plugins/feedback/Feedback.css index acab3f87..d3141204 100644 --- a/packages/dom/src/core/plugins/feedback/Feedback.css +++ b/packages/dom/src/core/plugins/feedback/Feedback.css @@ -17,6 +17,12 @@ translate: var(--dnd-kit-feedback-translate) !important; } +[data-dnd-kit-feedback][popover] { + background: var(--dnd-kit-feedback-background, inherit) !important; + border: var(--dnd-kit-feedback-border, inherit) !important; + overflow: visible; +} + [data-dnd-kit-feedback]::backdrop { display: none } diff --git a/packages/dom/src/core/plugins/feedback/Feedback.ts b/packages/dom/src/core/plugins/feedback/Feedback.ts index 66102b17..4acabbd9 100644 --- a/packages/dom/src/core/plugins/feedback/Feedback.ts +++ b/packages/dom/src/core/plugins/feedback/Feedback.ts @@ -6,6 +6,7 @@ import { DOMRectangle, getWindow, isKeyboardEvent, + showPopover, supportsPopover, supportsStyle, Styles, @@ -30,6 +31,7 @@ export class Feedback extends Plugin { let initialCoordinates: Coordinates | undefined; let currentTransform: Transform | undefined; let transformOrigin: Coordinates | undefined; + let moved = false; const styleInjectionCleanup = effect(() => { if (!style && manager.dragOperation.status.initialized) { @@ -49,6 +51,7 @@ export class Feedback extends Plugin { initialCoordinates = undefined; currentTransform = undefined; transformOrigin = undefined; + moved = false; return; } @@ -61,7 +64,7 @@ export class Feedback extends Plugin { const shape = new DOMRectangle(element, true); const {width, height, top, left} = shape; const styles = new Styles(element); - const {padding, margin, transition} = + const {border, background, padding, margin, transition} = getWindow(element).getComputedStyle(element); const droppable = manager.registry.droppables.get(source.id); const clone = feedback === 'clone'; @@ -94,7 +97,6 @@ export class Feedback extends Plugin { left: left + delta.x, }; - element.parentElement?.insertBefore(placeholder, element); element.setAttribute(ATTRIBUTE, ''); styles.set( { @@ -102,18 +104,27 @@ export class Feedback extends Plugin { height: height, top: projected.top, left: projected.left, - padding: padding, - margin: margin, + padding, + margin, + border, + background, + translate: currentTransform + ? `${currentTransform.x}px ${currentTransform.y}px 0` + : '', }, CSS_PREFIX ); + element.parentElement?.insertBefore( + placeholder, + element.nextElementSibling + ); if (supportsPopover(element)) { element.setAttribute('popover', ''); - element.showPopover(); + showPopover(element); } - const actual = new DOMRectangle(element); + const actual = new DOMRectangle(element, true); const offset = { top: projected.top - actual.top, left: projected.left - actual.left, @@ -212,15 +223,13 @@ export class Feedback extends Plugin { for (const entry of entries) { if (Array.from(entry.addedNodes).includes(element)) { /* Update the position of the placeholder when the source element is moved */ - entry.target.insertBefore(placeholder, element); - - if (supportsPopover(element)) { - /* - * Any update in DOM order that affects the source element hide the popover - * so we need to force the source element to be promoted to the top layer again - */ - element.showPopover(); - } + entry.target.insertBefore(placeholder, element.nextElementSibling); + + /* + * Any update in DOM order that affects the source element hide the popover + * so we need to force the source element to be promoted to the top layer again + */ + showPopover(element); } } }); @@ -232,8 +241,6 @@ export class Feedback extends Plugin { }); } - let moved = false; - const cleanupEffect = effect(function updateTransform() { const {transform, status} = dragOperation; const {x, y} = transform; @@ -309,10 +316,8 @@ export class Feedback extends Plugin { } manager.renderer.rendering.then(() => { - if (supportsPopover(element)) { - /* Force the source element to be promoted to the top layer before animating it */ - element.showPopover(); - } + /* Force the source element to be promoted to the top layer before animating it */ + showPopover(element); const shape = new DOMRectangle(placeholder, true); const currentShape = new DOMRectangle(element, true).translate( diff --git a/packages/dom/src/core/plugins/feedback/Overlay.css b/packages/dom/src/core/plugins/feedback/Overlay.css index 7a286fb8..859fa3af 100644 --- a/packages/dom/src/core/plugins/feedback/Overlay.css +++ b/packages/dom/src/core/plugins/feedback/Overlay.css @@ -1,5 +1,4 @@ [data-dnd-kit-overlay] { - all: initial; position: fixed; pointer-events: none; touch-action: none; @@ -10,7 +9,8 @@ [data-dnd-kit-overlay] > * { width: 100%; height: 100%; - margin: 0; + inset: 0 !important; + margin: 0 !important; } dialog[data-dnd-kit-overlay]::backdrop { diff --git a/packages/dom/src/sortable/sortable.ts b/packages/dom/src/sortable/sortable.ts index 922ab577..611b3937 100644 --- a/packages/dom/src/sortable/sortable.ts +++ b/packages/dom/src/sortable/sortable.ts @@ -140,6 +140,7 @@ export class Sortable { const {idle} = manager.dragOperation.status; if (!shape || !transition || (idle && !transition.idle)) { + console.log('animate'); return; } @@ -164,6 +165,8 @@ export class Sortable { }; if (delta.x || delta.y) { + console.log('animate'); + animateTransform({ element, keyframes: { diff --git a/packages/dom/src/utilities/element/createPlaceholder.ts b/packages/dom/src/utilities/element/createPlaceholder.ts index 7264d407..19dc6ec4 100644 --- a/packages/dom/src/utilities/element/createPlaceholder.ts +++ b/packages/dom/src/utilities/element/createPlaceholder.ts @@ -4,11 +4,11 @@ import {supportsStyle} from '../type-guards/supportsStyle.js'; export function createPlaceholder(element: Element, clone = false): Element { const placeholder = cloneElement(element); - // if (supportsStyle(placeholder)) { - // if (!clone) { - // placeholder.style.setProperty('opacity', '0'); - // } - // } + if (supportsStyle(placeholder)) { + if (!clone) { + placeholder.style.setProperty('opacity', '0'); + } + } placeholder.setAttribute('tab-index', '-1'); placeholder.setAttribute('aria-hidden', 'true'); diff --git a/packages/dom/src/utilities/index.ts b/packages/dom/src/utilities/index.ts index 28c80263..ce458a3f 100644 --- a/packages/dom/src/utilities/index.ts +++ b/packages/dom/src/utilities/index.ts @@ -9,6 +9,8 @@ export {cloneElement, createPlaceholder} from './element/index.js'; export {Listeners} from './event-listeners/index.js'; +export {showPopover, supportsPopover} from './popover/index.js'; + export { canScroll, detectScrollIntent, @@ -27,7 +29,6 @@ export {Styles} from './styles/index.js'; export { supportsViewTransition, - supportsPopover, supportsStyle, isKeyboardEvent, } from './type-guards/index.js'; diff --git a/packages/dom/src/utilities/popover/index.ts b/packages/dom/src/utilities/popover/index.ts new file mode 100644 index 00000000..8464f221 --- /dev/null +++ b/packages/dom/src/utilities/popover/index.ts @@ -0,0 +1,2 @@ +export {showPopover} from './showPopover.js'; +export {supportsPopover} from './supportsPopover.js'; diff --git a/packages/dom/src/utilities/popover/showPopover.ts b/packages/dom/src/utilities/popover/showPopover.ts new file mode 100644 index 00000000..7dbf96c3 --- /dev/null +++ b/packages/dom/src/utilities/popover/showPopover.ts @@ -0,0 +1,7 @@ +import {supportsPopover} from './supportsPopover.js'; + +export function showPopover(element: Element) { + if (supportsPopover(element) && element.isConnected) { + element.showPopover(); + } +} diff --git a/packages/dom/src/utilities/type-guards/supportsPopover.ts b/packages/dom/src/utilities/popover/supportsPopover.ts similarity index 100% rename from packages/dom/src/utilities/type-guards/supportsPopover.ts rename to packages/dom/src/utilities/popover/supportsPopover.ts diff --git a/packages/dom/src/utilities/type-guards/index.ts b/packages/dom/src/utilities/type-guards/index.ts index 211d9e2b..04738d77 100644 --- a/packages/dom/src/utilities/type-guards/index.ts +++ b/packages/dom/src/utilities/type-guards/index.ts @@ -5,5 +5,4 @@ export {isNode} from './isNode.js'; export {isSVGElement} from './isSVGElement.js'; export {isWindow} from './isWindow.js'; export {supportsViewTransition} from './supportsViewTransition.js'; -export {supportsPopover} from './supportsPopover.js'; export {supportsStyle} from './supportsStyle.js'; diff --git a/yarn.lock b/yarn.lock index ff13036c..6732237b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1042,6 +1042,13 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" +"@babel/runtime@^7.0.0": + version "7.22.11" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4" + integrity sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/runtime@^7.10.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.9", "@babel/runtime@^7.5.5": version "7.18.9" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz" @@ -3050,14 +3057,14 @@ "@tanstack/react-virtual@^3.0.0-beta.54": version "3.0.0-beta.54" - resolved "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.54.tgz" + resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.54.tgz#755979455adf13f2584937204a3f38703e446037" integrity sha512-D1mDMf4UPbrtHRZZriCly5bXTBMhylslm4dhcHqTtDJ6brQcgGmk8YD9JdWBGWfGSWPKoh2x1H3e7eh+hgPXtQ== dependencies: "@tanstack/virtual-core" "3.0.0-beta.54" "@tanstack/virtual-core@3.0.0-beta.54": version "3.0.0-beta.54" - resolved "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.54.tgz" + resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.54.tgz#12259d007911ad9fce1388385c54a9141f4ecdc4" integrity sha512-jtkwqdP2rY2iCCDVAFuaNBH3fiEi29aTn2RhtIoky8DTTiCdc48plpHHreLwmv1PICJ4AJUUESaq3xa8fZH8+g== "@types/babel__core@^7.0.0": @@ -6747,6 +6754,11 @@ media-typer@0.3.0: resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz" integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ== +"memoize-one@>=3.1.1 <6": + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + memoizerific@^1.11.3: version "1.11.3" resolved "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz" @@ -7522,7 +7534,7 @@ prompts@^2.4.0: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@^15.5.7, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -7750,6 +7762,21 @@ react-style-singleton@^2.2.1: invariant "^2.2.4" tslib "^2.0.0" +react-tiny-virtual-list@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/react-tiny-virtual-list/-/react-tiny-virtual-list-2.2.0.tgz#eafb6fcf764e4ed41150ff9752cdaad8b35edf4a" + integrity sha512-MDiy2xyqfvkWrRiQNdHFdm36lfxmcLLKuYnUqcf9xIubML85cmYCgzBJrDsLNZ3uJQ5LEHH9BnxGKKSm8+C0Bw== + dependencies: + prop-types "^15.5.7" + +react-window@1.8.9: + version "1.8.9" + resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.9.tgz#24bc346be73d0468cdf91998aac94e32bc7fa6a8" + integrity sha512-+Eqx/fj1Aa5WnhRfj9dJg4VYATGwIUP2ItwItiJ6zboKWA6EX3lYDAXfGF2hyNqplEprhbtjbipiADEcwQ823Q== + dependencies: + "@babel/runtime" "^7.0.0" + memoize-one ">=3.1.1 <6" + react@^18.1.0, react@^18.2.0: version "18.2.0" resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz" @@ -7866,6 +7893,11 @@ regenerator-runtime@^0.13.4: resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz" integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA== +regenerator-runtime@^0.14.0: + version "0.14.0" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45" + integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA== + regenerator-transform@^0.15.2: version "0.15.2" resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz"