Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@react-aria/virtualizer
Advanced tools
@react-aria/virtualizer - npm Package Compare versions
Comparing version 3.0.0-nightly-641446f65-240905 to 3.0.0-nightly-65e3a52a3-241120
@@ -43,6 +43,3 @@ var $efdd61e59e023a1d$exports = require("./utils.main.js"); | ||
| ref: ref | ||
| }, /*#__PURE__*/ (0, ($parcel$interopDefault($kvIfm$react))).createElement("div", { | ||
| role: "presentation", | ||
| ...contentProps | ||
| }, props.children)); | ||
| }, /*#__PURE__*/ (0, ($parcel$interopDefault($kvIfm$react))).createElement("div", contentProps, props.children)); | ||
| } | ||
@@ -86,3 +83,3 @@ const $00ca8c0b29e3e07c$export$5665e3d6be6adea = /*#__PURE__*/ (0, ($parcel$interopDefault($kvIfm$react))).forwardRef($00ca8c0b29e3e07c$var$ScrollView); | ||
| state.scrollEndTime = now + 300; | ||
| clearTimeout(state.scrollTimeout); | ||
| if (state.scrollTimeout != null) clearTimeout(state.scrollTimeout); | ||
| state.scrollTimeout = setTimeout(()=>{ | ||
@@ -108,6 +105,5 @@ state.isScrolling = false; | ||
| (0, $kvIfm$reactariautils.useEvent)(ref, 'scroll', onScroll); | ||
| // eslint-disable-next-line arrow-body-style | ||
| (0, $kvIfm$react.useEffect)(()=>{ | ||
| return ()=>{ | ||
| clearTimeout(state.scrollTimeout); | ||
| if (state.scrollTimeout != null) clearTimeout(state.scrollTimeout); | ||
| if (state.isScrolling) window.dispatchEvent(new Event('tk.connect-observer')); | ||
@@ -117,5 +113,9 @@ }; | ||
| }, []); | ||
| let isUpdatingSize = (0, $kvIfm$react.useRef)(false); | ||
| let updateSize = (0, $kvIfm$reactariautils.useEffectEvent)((flush)=>{ | ||
| let dom = ref.current; | ||
| if (!dom) return; | ||
| if (!dom || isUpdatingSize.current) return; | ||
| // Prevent reentrancy when resize observer fires, triggers re-layout that results in | ||
| // content size update, causing below layout effect to fire. This avoids infinite loops. | ||
| isUpdatingSize.current = true; | ||
| let isTestEnv = false; | ||
@@ -147,26 +147,20 @@ let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth'); | ||
| } | ||
| isUpdatingSize.current = false; | ||
| }); | ||
| let didUpdateSize = (0, $kvIfm$react.useRef)(false); | ||
| // Update visible rect when the content size changes, in case scrollbars need to appear or disappear. | ||
| let lastContentSize = (0, $kvIfm$react.useRef)(null); | ||
| (0, $kvIfm$reactariautils.useLayoutEffect)(()=>{ | ||
| // React doesn't allow flushSync inside effects, so queue a microtask. | ||
| // We also need to wait until all refs are set (e.g. when passing a ref down from a parent). | ||
| queueMicrotask(()=>{ | ||
| if (!didUpdateSize.current) { | ||
| didUpdateSize.current = true; | ||
| updateSize((0, $kvIfm$reactdom.flushSync)); | ||
| } | ||
| }); | ||
| }, [ | ||
| updateSize | ||
| ]); | ||
| (0, $kvIfm$react.useEffect)(()=>{ | ||
| if (!didUpdateSize.current) { | ||
| // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act). | ||
| // Update the size here so that you don't need to mock timers in tests. | ||
| didUpdateSize.current = true; | ||
| updateSize((fn)=>fn()); | ||
| if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) { | ||
| // React doesn't allow flushSync inside effects, so queue a microtask. | ||
| // We also need to wait until all refs are set (e.g. when passing a ref down from a parent). | ||
| // If we are in an `act` environment, update immediately without a microtask so you don't need | ||
| // to mock timers in tests. In this case, the update is synchronous already. | ||
| // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global. | ||
| // https://github.com/reactwg/react-18/discussions/102 | ||
| // @ts-ignore | ||
| if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') updateSize((fn)=>fn()); | ||
| else queueMicrotask(()=>updateSize((0, $kvIfm$reactdom.flushSync))); | ||
| } | ||
| }, [ | ||
| updateSize | ||
| ]); | ||
| lastContentSize.current = contentSize; | ||
| }); | ||
| let onResize = (0, $kvIfm$react.useCallback)(()=>{ | ||
@@ -173,0 +167,0 @@ updateSize((0, $kvIfm$reactdom.flushSync)); |
@@ -32,6 +32,3 @@ import {getScrollLeft as $ce415dc67314b753$export$1389d168952b34b5} from "./utils.module.js"; | ||
| ref: ref | ||
| }, /*#__PURE__*/ (0, $f9kpT$react).createElement("div", { | ||
| role: "presentation", | ||
| ...contentProps | ||
| }, props.children)); | ||
| }, /*#__PURE__*/ (0, $f9kpT$react).createElement("div", contentProps, props.children)); | ||
| } | ||
@@ -75,3 +72,3 @@ const $44a6ee657928b002$export$5665e3d6be6adea = /*#__PURE__*/ (0, $f9kpT$react).forwardRef($44a6ee657928b002$var$ScrollView); | ||
| state.scrollEndTime = now + 300; | ||
| clearTimeout(state.scrollTimeout); | ||
| if (state.scrollTimeout != null) clearTimeout(state.scrollTimeout); | ||
| state.scrollTimeout = setTimeout(()=>{ | ||
@@ -97,6 +94,5 @@ state.isScrolling = false; | ||
| (0, $f9kpT$useEvent)(ref, 'scroll', onScroll); | ||
| // eslint-disable-next-line arrow-body-style | ||
| (0, $f9kpT$useEffect)(()=>{ | ||
| return ()=>{ | ||
| clearTimeout(state.scrollTimeout); | ||
| if (state.scrollTimeout != null) clearTimeout(state.scrollTimeout); | ||
| if (state.isScrolling) window.dispatchEvent(new Event('tk.connect-observer')); | ||
@@ -106,5 +102,9 @@ }; | ||
| }, []); | ||
| let isUpdatingSize = (0, $f9kpT$useRef)(false); | ||
| let updateSize = (0, $f9kpT$useEffectEvent)((flush)=>{ | ||
| let dom = ref.current; | ||
| if (!dom) return; | ||
| if (!dom || isUpdatingSize.current) return; | ||
| // Prevent reentrancy when resize observer fires, triggers re-layout that results in | ||
| // content size update, causing below layout effect to fire. This avoids infinite loops. | ||
| isUpdatingSize.current = true; | ||
| let isTestEnv = false; | ||
@@ -136,26 +136,20 @@ let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth'); | ||
| } | ||
| isUpdatingSize.current = false; | ||
| }); | ||
| let didUpdateSize = (0, $f9kpT$useRef)(false); | ||
| // Update visible rect when the content size changes, in case scrollbars need to appear or disappear. | ||
| let lastContentSize = (0, $f9kpT$useRef)(null); | ||
| (0, $f9kpT$useLayoutEffect)(()=>{ | ||
| // React doesn't allow flushSync inside effects, so queue a microtask. | ||
| // We also need to wait until all refs are set (e.g. when passing a ref down from a parent). | ||
| queueMicrotask(()=>{ | ||
| if (!didUpdateSize.current) { | ||
| didUpdateSize.current = true; | ||
| updateSize((0, $f9kpT$flushSync)); | ||
| } | ||
| }); | ||
| }, [ | ||
| updateSize | ||
| ]); | ||
| (0, $f9kpT$useEffect)(()=>{ | ||
| if (!didUpdateSize.current) { | ||
| // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act). | ||
| // Update the size here so that you don't need to mock timers in tests. | ||
| didUpdateSize.current = true; | ||
| updateSize((fn)=>fn()); | ||
| if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) { | ||
| // React doesn't allow flushSync inside effects, so queue a microtask. | ||
| // We also need to wait until all refs are set (e.g. when passing a ref down from a parent). | ||
| // If we are in an `act` environment, update immediately without a microtask so you don't need | ||
| // to mock timers in tests. In this case, the update is synchronous already. | ||
| // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global. | ||
| // https://github.com/reactwg/react-18/discussions/102 | ||
| // @ts-ignore | ||
| if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') updateSize((fn)=>fn()); | ||
| else queueMicrotask(()=>updateSize((0, $f9kpT$flushSync))); | ||
| } | ||
| }, [ | ||
| updateSize | ||
| ]); | ||
| lastContentSize.current = contentSize; | ||
| }); | ||
| let onResize = (0, $f9kpT$useCallback)(()=>{ | ||
@@ -162,0 +156,0 @@ updateSize((0, $f9kpT$flushSync)); |
@@ -12,3 +12,3 @@ import { Direction, Key, RefObject, Collection } from "@react-types/shared"; | ||
| export interface VirtualizerItemOptions { | ||
| layoutInfo: LayoutInfo; | ||
| layoutInfo: LayoutInfo | null; | ||
| virtualizer: IVirtualizer; | ||
@@ -29,3 +29,3 @@ ref: RefObject<HTMLElement | null>; | ||
| } | ||
| export const ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<HTMLDivElement>>; | ||
| export const ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<HTMLDivElement | null>>; | ||
| export function useScrollView(props: ScrollViewProps, ref: _RefObject1<HTMLElement | null>): { | ||
@@ -142,170 +142,170 @@ scrollViewProps: { | ||
| } | undefined; | ||
| onCopy?: React.ClipboardEventHandler<HTMLElement>; | ||
| onCopyCapture?: React.ClipboardEventHandler<HTMLElement>; | ||
| onCut?: React.ClipboardEventHandler<HTMLElement>; | ||
| onCutCapture?: React.ClipboardEventHandler<HTMLElement>; | ||
| onPaste?: React.ClipboardEventHandler<HTMLElement>; | ||
| onPasteCapture?: React.ClipboardEventHandler<HTMLElement>; | ||
| onCompositionEnd?: React.CompositionEventHandler<HTMLElement>; | ||
| onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement>; | ||
| onCompositionStart?: React.CompositionEventHandler<HTMLElement>; | ||
| onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement>; | ||
| onCompositionUpdate?: React.CompositionEventHandler<HTMLElement>; | ||
| onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement>; | ||
| onFocus?: React.FocusEventHandler<HTMLElement>; | ||
| onFocusCapture?: React.FocusEventHandler<HTMLElement>; | ||
| onBlur?: React.FocusEventHandler<HTMLElement>; | ||
| onBlurCapture?: React.FocusEventHandler<HTMLElement>; | ||
| onChange?: React.FormEventHandler<HTMLElement>; | ||
| onChangeCapture?: React.FormEventHandler<HTMLElement>; | ||
| onBeforeInput?: React.FormEventHandler<HTMLElement>; | ||
| onBeforeInputCapture?: React.FormEventHandler<HTMLElement>; | ||
| onInput?: React.FormEventHandler<HTMLElement>; | ||
| onInputCapture?: React.FormEventHandler<HTMLElement>; | ||
| onReset?: React.FormEventHandler<HTMLElement>; | ||
| onResetCapture?: React.FormEventHandler<HTMLElement>; | ||
| onSubmit?: React.FormEventHandler<HTMLElement>; | ||
| onSubmitCapture?: React.FormEventHandler<HTMLElement>; | ||
| onInvalid?: React.FormEventHandler<HTMLElement>; | ||
| onInvalidCapture?: React.FormEventHandler<HTMLElement>; | ||
| onLoad?: React.ReactEventHandler<HTMLElement>; | ||
| onLoadCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onError?: React.ReactEventHandler<HTMLElement>; | ||
| onErrorCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onKeyDown?: React.KeyboardEventHandler<HTMLElement>; | ||
| onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement>; | ||
| onKeyPress?: React.KeyboardEventHandler<HTMLElement>; | ||
| onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement>; | ||
| onKeyUp?: React.KeyboardEventHandler<HTMLElement>; | ||
| onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement>; | ||
| onAbort?: React.ReactEventHandler<HTMLElement>; | ||
| onAbortCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onCanPlay?: React.ReactEventHandler<HTMLElement>; | ||
| onCanPlayCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onCanPlayThrough?: React.ReactEventHandler<HTMLElement>; | ||
| onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onDurationChange?: React.ReactEventHandler<HTMLElement>; | ||
| onDurationChangeCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onEmptied?: React.ReactEventHandler<HTMLElement>; | ||
| onEmptiedCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onEncrypted?: React.ReactEventHandler<HTMLElement>; | ||
| onEncryptedCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onEnded?: React.ReactEventHandler<HTMLElement>; | ||
| onEndedCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onLoadedData?: React.ReactEventHandler<HTMLElement>; | ||
| onLoadedDataCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onLoadedMetadata?: React.ReactEventHandler<HTMLElement>; | ||
| onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onLoadStart?: React.ReactEventHandler<HTMLElement>; | ||
| onLoadStartCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onPause?: React.ReactEventHandler<HTMLElement>; | ||
| onPauseCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onPlay?: React.ReactEventHandler<HTMLElement>; | ||
| onPlayCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onPlaying?: React.ReactEventHandler<HTMLElement>; | ||
| onPlayingCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onProgress?: React.ReactEventHandler<HTMLElement>; | ||
| onProgressCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onRateChange?: React.ReactEventHandler<HTMLElement>; | ||
| onRateChangeCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onResize?: React.ReactEventHandler<HTMLElement>; | ||
| onResizeCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onSeeked?: React.ReactEventHandler<HTMLElement>; | ||
| onSeekedCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onSeeking?: React.ReactEventHandler<HTMLElement>; | ||
| onSeekingCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onStalled?: React.ReactEventHandler<HTMLElement>; | ||
| onStalledCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onSuspend?: React.ReactEventHandler<HTMLElement>; | ||
| onSuspendCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onTimeUpdate?: React.ReactEventHandler<HTMLElement>; | ||
| onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onVolumeChange?: React.ReactEventHandler<HTMLElement>; | ||
| onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onWaiting?: React.ReactEventHandler<HTMLElement>; | ||
| onWaitingCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onAuxClick?: React.MouseEventHandler<HTMLElement>; | ||
| onAuxClickCapture?: React.MouseEventHandler<HTMLElement>; | ||
| onClick?: React.MouseEventHandler<HTMLElement>; | ||
| onClickCapture?: React.MouseEventHandler<HTMLElement>; | ||
| onContextMenu?: React.MouseEventHandler<HTMLElement>; | ||
| onContextMenuCapture?: React.MouseEventHandler<HTMLElement>; | ||
| onDoubleClick?: React.MouseEventHandler<HTMLElement>; | ||
| onDoubleClickCapture?: React.MouseEventHandler<HTMLElement>; | ||
| onDrag?: React.DragEventHandler<HTMLElement>; | ||
| onDragCapture?: React.DragEventHandler<HTMLElement>; | ||
| onDragEnd?: React.DragEventHandler<HTMLElement>; | ||
| onDragEndCapture?: React.DragEventHandler<HTMLElement>; | ||
| onDragEnter?: React.DragEventHandler<HTMLElement>; | ||
| onDragEnterCapture?: React.DragEventHandler<HTMLElement>; | ||
| onDragExit?: React.DragEventHandler<HTMLElement>; | ||
| onDragExitCapture?: React.DragEventHandler<HTMLElement>; | ||
| onDragLeave?: React.DragEventHandler<HTMLElement>; | ||
| onDragLeaveCapture?: React.DragEventHandler<HTMLElement>; | ||
| onDragOver?: React.DragEventHandler<HTMLElement>; | ||
| onDragOverCapture?: React.DragEventHandler<HTMLElement>; | ||
| onDragStart?: React.DragEventHandler<HTMLElement>; | ||
| onDragStartCapture?: React.DragEventHandler<HTMLElement>; | ||
| onDrop?: React.DragEventHandler<HTMLElement>; | ||
| onDropCapture?: React.DragEventHandler<HTMLElement>; | ||
| onMouseDown?: React.MouseEventHandler<HTMLElement>; | ||
| onMouseDownCapture?: React.MouseEventHandler<HTMLElement>; | ||
| onMouseEnter?: React.MouseEventHandler<HTMLElement>; | ||
| onMouseLeave?: React.MouseEventHandler<HTMLElement>; | ||
| onMouseMove?: React.MouseEventHandler<HTMLElement>; | ||
| onMouseMoveCapture?: React.MouseEventHandler<HTMLElement>; | ||
| onMouseOut?: React.MouseEventHandler<HTMLElement>; | ||
| onMouseOutCapture?: React.MouseEventHandler<HTMLElement>; | ||
| onMouseOver?: React.MouseEventHandler<HTMLElement>; | ||
| onMouseOverCapture?: React.MouseEventHandler<HTMLElement>; | ||
| onMouseUp?: React.MouseEventHandler<HTMLElement>; | ||
| onMouseUpCapture?: React.MouseEventHandler<HTMLElement>; | ||
| onSelect?: React.ReactEventHandler<HTMLElement>; | ||
| onSelectCapture?: React.ReactEventHandler<HTMLElement>; | ||
| onTouchCancel?: React.TouchEventHandler<HTMLElement>; | ||
| onTouchCancelCapture?: React.TouchEventHandler<HTMLElement>; | ||
| onTouchEnd?: React.TouchEventHandler<HTMLElement>; | ||
| onTouchEndCapture?: React.TouchEventHandler<HTMLElement>; | ||
| onTouchMove?: React.TouchEventHandler<HTMLElement>; | ||
| onTouchMoveCapture?: React.TouchEventHandler<HTMLElement>; | ||
| onTouchStart?: React.TouchEventHandler<HTMLElement>; | ||
| onTouchStartCapture?: React.TouchEventHandler<HTMLElement>; | ||
| onPointerDown?: React.PointerEventHandler<HTMLElement>; | ||
| onPointerDownCapture?: React.PointerEventHandler<HTMLElement>; | ||
| onPointerMove?: React.PointerEventHandler<HTMLElement>; | ||
| onPointerMoveCapture?: React.PointerEventHandler<HTMLElement>; | ||
| onPointerUp?: React.PointerEventHandler<HTMLElement>; | ||
| onPointerUpCapture?: React.PointerEventHandler<HTMLElement>; | ||
| onPointerCancel?: React.PointerEventHandler<HTMLElement>; | ||
| onPointerCancelCapture?: React.PointerEventHandler<HTMLElement>; | ||
| onPointerEnter?: React.PointerEventHandler<HTMLElement>; | ||
| onPointerLeave?: React.PointerEventHandler<HTMLElement>; | ||
| onPointerOver?: React.PointerEventHandler<HTMLElement>; | ||
| onPointerOverCapture?: React.PointerEventHandler<HTMLElement>; | ||
| onPointerOut?: React.PointerEventHandler<HTMLElement>; | ||
| onPointerOutCapture?: React.PointerEventHandler<HTMLElement>; | ||
| onGotPointerCapture?: React.PointerEventHandler<HTMLElement>; | ||
| onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>; | ||
| onLostPointerCapture?: React.PointerEventHandler<HTMLElement>; | ||
| onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>; | ||
| onScroll?: React.UIEventHandler<HTMLElement>; | ||
| onScrollCapture?: React.UIEventHandler<HTMLElement>; | ||
| onWheel?: React.WheelEventHandler<HTMLElement>; | ||
| onWheelCapture?: React.WheelEventHandler<HTMLElement>; | ||
| onAnimationStart?: React.AnimationEventHandler<HTMLElement>; | ||
| onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement>; | ||
| onAnimationEnd?: React.AnimationEventHandler<HTMLElement>; | ||
| onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement>; | ||
| onAnimationIteration?: React.AnimationEventHandler<HTMLElement>; | ||
| onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement>; | ||
| onToggle?: React.ToggleEventHandler<HTMLElement>; | ||
| onBeforeToggle?: React.ToggleEventHandler<HTMLElement>; | ||
| onTransitionCancel?: React.TransitionEventHandler<HTMLElement>; | ||
| onTransitionCancelCapture?: React.TransitionEventHandler<HTMLElement>; | ||
| onTransitionEnd?: React.TransitionEventHandler<HTMLElement>; | ||
| onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement>; | ||
| onTransitionRun?: React.TransitionEventHandler<HTMLElement>; | ||
| onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement>; | ||
| onTransitionStart?: React.TransitionEventHandler<HTMLElement>; | ||
| onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement>; | ||
| onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined; | ||
| onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined; | ||
| onCut?: React.ClipboardEventHandler<HTMLElement> | undefined; | ||
| onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined; | ||
| onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined; | ||
| onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined; | ||
| onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined; | ||
| onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined; | ||
| onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined; | ||
| onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined; | ||
| onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined; | ||
| onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined; | ||
| onFocus?: React.FocusEventHandler<HTMLElement> | undefined; | ||
| onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined; | ||
| onBlur?: React.FocusEventHandler<HTMLElement> | undefined; | ||
| onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined; | ||
| onChange?: React.FormEventHandler<HTMLElement> | undefined; | ||
| onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined; | ||
| onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined; | ||
| onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined; | ||
| onInput?: React.FormEventHandler<HTMLElement> | undefined; | ||
| onInputCapture?: React.FormEventHandler<HTMLElement> | undefined; | ||
| onReset?: React.FormEventHandler<HTMLElement> | undefined; | ||
| onResetCapture?: React.FormEventHandler<HTMLElement> | undefined; | ||
| onSubmit?: React.FormEventHandler<HTMLElement> | undefined; | ||
| onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined; | ||
| onInvalid?: React.FormEventHandler<HTMLElement> | undefined; | ||
| onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined; | ||
| onLoad?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onError?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined; | ||
| onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined; | ||
| onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined; | ||
| onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined; | ||
| onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined; | ||
| onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined; | ||
| onAbort?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onEmptied?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onEnded?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onPause?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onPlay?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onPlaying?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onProgress?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onRateChange?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onResize?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onResizeCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onSeeked?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onSeeking?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onStalled?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onSuspend?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onWaiting?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onClick?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onDrag?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDragCapture?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDragEnd?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDragEnter?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDragExit?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDragLeave?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDragOver?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDragStart?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDrop?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onDropCapture?: React.DragEventHandler<HTMLElement> | undefined; | ||
| onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined; | ||
| onSelect?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined; | ||
| onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined; | ||
| onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined; | ||
| onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined; | ||
| onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined; | ||
| onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined; | ||
| onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined; | ||
| onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined; | ||
| onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined; | ||
| onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined; | ||
| onScroll?: React.UIEventHandler<HTMLElement> | undefined; | ||
| onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined; | ||
| onWheel?: React.WheelEventHandler<HTMLElement> | undefined; | ||
| onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined; | ||
| onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined; | ||
| onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined; | ||
| onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined; | ||
| onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined; | ||
| onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined; | ||
| onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined; | ||
| onToggle?: React.ToggleEventHandler<HTMLElement> | undefined; | ||
| onBeforeToggle?: React.ToggleEventHandler<HTMLElement> | undefined; | ||
| onTransitionCancel?: React.TransitionEventHandler<HTMLElement> | undefined; | ||
| onTransitionCancelCapture?: React.TransitionEventHandler<HTMLElement> | undefined; | ||
| onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined; | ||
| onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined; | ||
| onTransitionRun?: React.TransitionEventHandler<HTMLElement> | undefined; | ||
| onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement> | undefined; | ||
| onTransitionStart?: React.TransitionEventHandler<HTMLElement> | undefined; | ||
| onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement> | undefined; | ||
| }; | ||
@@ -318,3 +318,5 @@ contentProps: { | ||
| interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> { | ||
| layoutInfo: LayoutInfo; | ||
| parent?: LayoutInfo | null; | ||
| style?: CSSProperties; | ||
| className?: string; | ||
@@ -325,3 +327,3 @@ children: ReactNode; | ||
| export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent?: LayoutInfo | null): CSSProperties; | ||
| type RenderWrapper<T extends object, V> = (parent: ReusableView<T, V> | null, reusableView: ReusableView<T, V>, children: ReusableView<T, V>[], renderChildren: (views: ReusableView<T, V>[]) => ReactElement[]) => ReactElement; | ||
| type RenderWrapper<T extends object, V> = (parent: ReusableView<T, V> | null, reusableView: ReusableView<T, V>, children: ReusableView<T, V>[], renderChildren: (views: ReusableView<T, V>[]) => ReactElement[]) => ReactElement | null; | ||
| interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<HTMLElement>, 'children'> { | ||
@@ -328,0 +330,0 @@ children: (type: string, content: T) => V; |
@@ -26,10 +26,11 @@ var $64doO$reactstatelyvirtualizer = require("@react-stately/virtualizer"); | ||
| let { layoutInfo: layoutInfo, virtualizer: virtualizer, ref: ref } = options; | ||
| let key = layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.key; | ||
| let updateSize = (0, $64doO$react.useCallback)(()=>{ | ||
| if (layoutInfo) { | ||
| if (key != null && ref.current) { | ||
| let size = $7d70e069fceb2deb$var$getSize(ref.current); | ||
| virtualizer.updateItemSize(layoutInfo.key, size); | ||
| virtualizer.updateItemSize(key, size); | ||
| } | ||
| }, [ | ||
| virtualizer, | ||
| layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.key, | ||
| key, | ||
| ref | ||
@@ -36,0 +37,0 @@ ]); |
@@ -20,10 +20,11 @@ import {Size as $uBoVA$Size} from "@react-stately/virtualizer"; | ||
| let { layoutInfo: layoutInfo, virtualizer: virtualizer, ref: ref } = options; | ||
| let key = layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.key; | ||
| let updateSize = (0, $uBoVA$useCallback)(()=>{ | ||
| if (layoutInfo) { | ||
| if (key != null && ref.current) { | ||
| let size = $47736c1e63ba1c6d$var$getSize(ref.current); | ||
| virtualizer.updateItemSize(layoutInfo.key, size); | ||
| virtualizer.updateItemSize(key, size); | ||
| } | ||
| }, [ | ||
| virtualizer, | ||
| layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.key, | ||
| key, | ||
| ref | ||
@@ -30,0 +31,0 @@ ]); |
@@ -32,8 +32,5 @@ var $00ca8c0b29e3e07c$exports = require("./ScrollView.main.js"); | ||
| function $e1fb6f3669e1c329$var$Virtualizer(props, ref) { | ||
| let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, scrollDirection: scrollDirection, isLoading: // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| isLoading, onLoadMore: // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| onLoadMore, persistedKeys: persistedKeys, layoutOptions: layoutOptions, ...otherProps } = props; | ||
| let fallbackRef = (0, $knrtk$react.useRef)(undefined); | ||
| ref = ref || fallbackRef; | ||
| function $e1fb6f3669e1c329$var$Virtualizer(props, forwardedRef) { | ||
| let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, scrollDirection: scrollDirection, isLoading: isLoading, onLoadMore: onLoadMore, persistedKeys: persistedKeys, layoutOptions: layoutOptions, ...otherProps } = props; | ||
| let ref = (0, $knrtk$reactariautils.useObjectRef)(forwardedRef); | ||
| let state = (0, $knrtk$reactstatelyvirtualizer.useVirtualizerState)({ | ||
@@ -44,4 +41,6 @@ layout: layout, | ||
| onVisibleRectChange (rect) { | ||
| ref.current.scrollLeft = rect.x; | ||
| ref.current.scrollTop = rect.y; | ||
| if (ref.current) { | ||
| ref.current.scrollLeft = rect.x; | ||
| ref.current.scrollTop = rect.y; | ||
| } | ||
| }, | ||
@@ -48,0 +47,0 @@ persistedKeys: persistedKeys, |
| import {ScrollView as $44a6ee657928b002$export$5665e3d6be6adea} from "./ScrollView.module.js"; | ||
| import {VirtualizerItem as $ccf8a0a04e4175ae$export$6796df8ba7398521} from "./VirtualizerItem.module.js"; | ||
| import {useVirtualizerState as $9WwqA$useVirtualizerState} from "@react-stately/virtualizer"; | ||
| import {useLoadMore as $9WwqA$useLoadMore, mergeProps as $9WwqA$mergeProps} from "@react-aria/utils"; | ||
| import $9WwqA$react, {useRef as $9WwqA$useRef, useCallback as $9WwqA$useCallback} from "react"; | ||
| import {useObjectRef as $9WwqA$useObjectRef, useLoadMore as $9WwqA$useLoadMore, mergeProps as $9WwqA$mergeProps} from "@react-aria/utils"; | ||
| import $9WwqA$react, {useCallback as $9WwqA$useCallback} from "react"; | ||
@@ -22,8 +22,5 @@ /* | ||
| function $6d0a5c394373ae64$var$Virtualizer(props, ref) { | ||
| let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, scrollDirection: scrollDirection, isLoading: // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| isLoading, onLoadMore: // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| onLoadMore, persistedKeys: persistedKeys, layoutOptions: layoutOptions, ...otherProps } = props; | ||
| let fallbackRef = (0, $9WwqA$useRef)(undefined); | ||
| ref = ref || fallbackRef; | ||
| function $6d0a5c394373ae64$var$Virtualizer(props, forwardedRef) { | ||
| let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, scrollDirection: scrollDirection, isLoading: isLoading, onLoadMore: onLoadMore, persistedKeys: persistedKeys, layoutOptions: layoutOptions, ...otherProps } = props; | ||
| let ref = (0, $9WwqA$useObjectRef)(forwardedRef); | ||
| let state = (0, $9WwqA$useVirtualizerState)({ | ||
@@ -34,4 +31,6 @@ layout: layout, | ||
| onVisibleRectChange (rect) { | ||
| ref.current.scrollLeft = rect.x; | ||
| ref.current.scrollTop = rect.y; | ||
| if (ref.current) { | ||
| ref.current.scrollLeft = rect.x; | ||
| ref.current.scrollTop = rect.y; | ||
| } | ||
| }, | ||
@@ -38,0 +37,0 @@ persistedKeys: persistedKeys, |
@@ -30,5 +30,5 @@ var $7d70e069fceb2deb$exports = require("./useVirtualizerItem.main.js"); | ||
| function $d6a26279cc31826b$export$6796df8ba7398521(props) { | ||
| let { className: className, layoutInfo: layoutInfo, virtualizer: virtualizer, parent: parent, children: children } = props; | ||
| let { style: style, className: className, layoutInfo: layoutInfo, virtualizer: virtualizer, parent: parent, children: children } = props; | ||
| let { direction: direction } = (0, $eXWCF$reactariai18n.useLocale)(); | ||
| let ref = (0, $eXWCF$react.useRef)(undefined); | ||
| let ref = (0, $eXWCF$react.useRef)(null); | ||
| (0, $7d70e069fceb2deb$exports.useVirtualizerItem)({ | ||
@@ -43,3 +43,6 @@ layoutInfo: layoutInfo, | ||
| className: className, | ||
| style: $d6a26279cc31826b$export$1481e64fbe01b8b3(layoutInfo, direction, parent) | ||
| style: { | ||
| ...$d6a26279cc31826b$export$1481e64fbe01b8b3(layoutInfo, direction, parent), | ||
| ...style | ||
| } | ||
| }, children); | ||
@@ -59,4 +62,8 @@ } | ||
| let rectStyles = { | ||
| top: layoutInfo.rect.y - (parent ? parent.rect.y : 0), | ||
| [xProperty]: layoutInfo.rect.x - (parent ? parent.rect.x : 0), | ||
| // TODO: For layoutInfos that are sticky that have parents with overflow visible, their "top" will be relative to the to the nearest scrolling container | ||
| // which WON'T be the parent since the parent has overflow visible. This means we shouldn't offset the height by the parent's position | ||
| // Not 100% about this change here since it is quite ambigious what the scrolling container maybe and how its top is positioned with respect to the | ||
| // calculated layoutInfo.y here | ||
| top: layoutInfo.rect.y - (parent && !(parent.allowOverflow && layoutInfo.isSticky) ? parent.rect.y : 0), | ||
| [xProperty]: layoutInfo.rect.x - (parent && !(parent.allowOverflow && layoutInfo.isSticky) ? parent.rect.x : 0), | ||
| width: layoutInfo.rect.width, | ||
@@ -69,2 +76,3 @@ height: layoutInfo.rect.height | ||
| }); | ||
| var _layoutInfo_transform; | ||
| let style = { | ||
@@ -77,3 +85,3 @@ position: layoutInfo.isSticky ? 'sticky' : 'absolute', | ||
| zIndex: layoutInfo.zIndex, | ||
| transform: layoutInfo.transform, | ||
| transform: (_layoutInfo_transform = layoutInfo.transform) !== null && _layoutInfo_transform !== void 0 ? _layoutInfo_transform : undefined, | ||
| contain: 'size layout style', | ||
@@ -80,0 +88,0 @@ ...rectStyles |
@@ -19,5 +19,5 @@ import {useVirtualizerItem as $47736c1e63ba1c6d$export$1da781778207e0a2} from "./useVirtualizerItem.module.js"; | ||
| function $ccf8a0a04e4175ae$export$6796df8ba7398521(props) { | ||
| let { className: className, layoutInfo: layoutInfo, virtualizer: virtualizer, parent: parent, children: children } = props; | ||
| let { style: style, className: className, layoutInfo: layoutInfo, virtualizer: virtualizer, parent: parent, children: children } = props; | ||
| let { direction: direction } = (0, $ivH3G$useLocale)(); | ||
| let ref = (0, $ivH3G$useRef)(undefined); | ||
| let ref = (0, $ivH3G$useRef)(null); | ||
| (0, $47736c1e63ba1c6d$export$1da781778207e0a2)({ | ||
@@ -32,3 +32,6 @@ layoutInfo: layoutInfo, | ||
| className: className, | ||
| style: $ccf8a0a04e4175ae$export$1481e64fbe01b8b3(layoutInfo, direction, parent) | ||
| style: { | ||
| ...$ccf8a0a04e4175ae$export$1481e64fbe01b8b3(layoutInfo, direction, parent), | ||
| ...style | ||
| } | ||
| }, children); | ||
@@ -48,4 +51,8 @@ } | ||
| let rectStyles = { | ||
| top: layoutInfo.rect.y - (parent ? parent.rect.y : 0), | ||
| [xProperty]: layoutInfo.rect.x - (parent ? parent.rect.x : 0), | ||
| // TODO: For layoutInfos that are sticky that have parents with overflow visible, their "top" will be relative to the to the nearest scrolling container | ||
| // which WON'T be the parent since the parent has overflow visible. This means we shouldn't offset the height by the parent's position | ||
| // Not 100% about this change here since it is quite ambigious what the scrolling container maybe and how its top is positioned with respect to the | ||
| // calculated layoutInfo.y here | ||
| top: layoutInfo.rect.y - (parent && !(parent.allowOverflow && layoutInfo.isSticky) ? parent.rect.y : 0), | ||
| [xProperty]: layoutInfo.rect.x - (parent && !(parent.allowOverflow && layoutInfo.isSticky) ? parent.rect.x : 0), | ||
| width: layoutInfo.rect.width, | ||
@@ -58,2 +65,3 @@ height: layoutInfo.rect.height | ||
| }); | ||
| var _layoutInfo_transform; | ||
| let style = { | ||
@@ -66,3 +74,3 @@ position: layoutInfo.isSticky ? 'sticky' : 'absolute', | ||
| zIndex: layoutInfo.zIndex, | ||
| transform: layoutInfo.transform, | ||
| transform: (_layoutInfo_transform = layoutInfo.transform) !== null && _layoutInfo_transform !== void 0 ? _layoutInfo_transform : undefined, | ||
| contain: 'size layout style', | ||
@@ -69,0 +77,0 @@ ...rectStyles |
| { | ||
| "name": "@react-aria/virtualizer", | ||
| "version": "3.0.0-nightly-641446f65-240905", | ||
| "version": "3.0.0-nightly-65e3a52a3-241120", | ||
| "description": "Spectrum UI components in React", | ||
@@ -25,12 +25,12 @@ "license": "Apache-2.0", | ||
| "dependencies": { | ||
| "@react-aria/i18n": "^3.0.0-nightly-641446f65-240905", | ||
| "@react-aria/interactions": "^3.0.0-nightly-641446f65-240905", | ||
| "@react-aria/utils": "^3.0.0-nightly-641446f65-240905", | ||
| "@react-stately/virtualizer": "^3.0.0-nightly-641446f65-240905", | ||
| "@react-types/shared": "^3.0.0-nightly-641446f65-240905", | ||
| "@react-aria/i18n": "^3.0.0-nightly-65e3a52a3-241120", | ||
| "@react-aria/interactions": "^3.0.0-nightly-65e3a52a3-241120", | ||
| "@react-aria/utils": "^3.0.0-nightly-65e3a52a3-241120", | ||
| "@react-stately/virtualizer": "^3.0.0-nightly-65e3a52a3-241120", | ||
| "@react-types/shared": "^3.0.0-nightly-65e3a52a3-241120", | ||
| "@swc/helpers": "^0.5.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", | ||
| "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" | ||
| "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", | ||
| "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" | ||
| }, | ||
@@ -40,3 +40,3 @@ "publishConfig": { | ||
| }, | ||
| "stableVersion": "4.0.2" | ||
| "stableVersion": "4.0.4" | ||
| } |
@@ -23,3 +23,3 @@ /* | ||
| export interface VirtualizerItemOptions { | ||
| layoutInfo: LayoutInfo, | ||
| layoutInfo: LayoutInfo | null, | ||
| virtualizer: IVirtualizer, | ||
@@ -31,9 +31,10 @@ ref: RefObject<HTMLElement | null> | ||
| let {layoutInfo, virtualizer, ref} = options; | ||
| let key = layoutInfo?.key; | ||
| let updateSize = useCallback(() => { | ||
| if (layoutInfo) { | ||
| if (key != null && ref.current) { | ||
| let size = getSize(ref.current); | ||
| virtualizer.updateItemSize(layoutInfo.key, size); | ||
| virtualizer.updateItemSize(key, size); | ||
| } | ||
| }, [virtualizer, layoutInfo?.key, ref]); | ||
| }, [virtualizer, key, ref]); | ||
@@ -40,0 +41,0 @@ useLayoutEffect(() => { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.27%
195012
- Lines of code
- increased by0.94%
2352