@react-aria/virtualizer 4.1.12 → 4.2.0

package/src/VirtualizerItem.tsx

@@ -1,93 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {Direction} from '@react-types/shared';
-import {LayoutInfo} from '@react-stately/virtualizer';
-import React, {CSSProperties, JSX, ReactNode, useRef} from 'react';
-import {useLocale} from '@react-aria/i18n';
-import {useVirtualizerItem, VirtualizerItemOptions} from './useVirtualizerItem';
-
-interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
-  layoutInfo: LayoutInfo,
-  parent?: LayoutInfo | null,
-  style?: CSSProperties,
-  className?: string,
-  children: ReactNode
-}
-
-export function VirtualizerItem(props: VirtualizerItemProps): JSX.Element {
-  let {style, className, layoutInfo, virtualizer, parent, children} = props;
-  let {direction} = useLocale();
-  let ref = useRef<HTMLDivElement | null>(null);
-  useVirtualizerItem({
-    layoutInfo,
-    virtualizer,
-    ref
-  });
-
-  return (
-    <div role="presentation" ref={ref} className={className} style={{...layoutInfoToStyle(layoutInfo, direction, parent), ...style}}>
-      {children}
-    </div>
-  );
-}
-
-let cache = new WeakMap();
-export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent?: LayoutInfo | null): CSSProperties {
-  let xProperty = dir === 'rtl' ? 'right' : 'left';
-  let cached = cache.get(layoutInfo);
-  if (cached && cached[xProperty] != null) {
-    if (!parent) {
-      return cached;
-    }
-
-    // Invalidate if the parent position changed.
-    let top = layoutInfo.rect.y - parent.rect.y;
-    let x = layoutInfo.rect.x - parent.rect.x;
-    if (cached.top === top && cached[xProperty] === x) {
-      return cached;
-    }
-  }
-
-  let rectStyles: Record<string, number | undefined> = {
-    // 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,
-    height: layoutInfo.rect.height
-  };
-
-  // Get rid of any non finite values since they aren't valid css values
-  Object.entries(rectStyles).forEach(([key, value]) => {
-    if (!Number.isFinite(value)) {
-      rectStyles[key] = undefined;
-    }
-  });
-
-  let style: CSSProperties = {
-    position: layoutInfo.isSticky ? 'sticky' : 'absolute',
-    // Sticky elements are positioned in normal document flow. Display inline-block so that they don't push other sticky columns onto the following rows.
-    display: layoutInfo.isSticky ? 'inline-block' : undefined,
-    overflow: layoutInfo.allowOverflow ? 'visible' : 'hidden',
-    opacity: layoutInfo.opacity,
-    zIndex: layoutInfo.zIndex,
-    transform: layoutInfo.transform ?? undefined,
-    contain: 'size layout style',
-    ...rectStyles
-  };
-
-  cache.set(layoutInfo, style);
-  return style;
-}

package/src/useVirtualizerItem.ts

@@ -1,55 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {Key, RefObject} from '@react-types/shared';
-import {LayoutInfo, Size} from '@react-stately/virtualizer';
-import {useCallback} from 'react';
-import {useLayoutEffect} from '@react-aria/utils';
-
-interface IVirtualizer {
-  updateItemSize(key: Key, size: Size): void
-}
-
-export interface VirtualizerItemOptions {
-  layoutInfo: LayoutInfo | null,
-  virtualizer: IVirtualizer,
-  ref: RefObject<HTMLElement | null>
-}
-
-export function useVirtualizerItem(options: VirtualizerItemOptions): {updateSize: () => void} {
-  let {layoutInfo, virtualizer, ref} = options;
-  let key = layoutInfo?.key;
-
-  let updateSize = useCallback(() => {
-    if (key != null && ref.current) {
-      let size = getSize(ref.current);
-      virtualizer.updateItemSize(key, size);
-    }
-  }, [virtualizer, key, ref]);
-
-  useLayoutEffect(() => {
-    if (layoutInfo?.estimatedSize) {
-      updateSize();
-    }
-  });
-
-  return {updateSize};
-}
-
-function getSize(node: HTMLElement): Size {
-  // Reset height before measuring so we get the intrinsic size
-  let height = node.style.height;
-  node.style.height = '';
-  let size = new Size(node.scrollWidth, node.scrollHeight);
-  node.style.height = height;
-  return size;
-}

package/src/utils.ts

@@ -1,107 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {Direction} from '@react-types/shared';
-
-export type RTLOffsetType =
-  | 'negative'
-  | 'positive-descending'
-  | 'positive-ascending';
-
-let cachedRTLResult: RTLOffsetType | null = null;
-
-
-// Original licensing for the following methods can be found in the
-// NOTICE file in the root directory of this source tree.
-// See https://github.com/bvaughn/react-window/blob/master/src/createGridComponent.js
-
-// According to the spec, scrollLeft should be negative for RTL aligned elements.
-// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
-// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
-// The safest way to check this is to intentionally set a negative offset,
-// and then verify that the subsequent "scroll" event matches the negative offset.
-// If it does not match, then we can assume a non-standard RTL scroll implementation.
-export function getRTLOffsetType(recalculate: boolean = false): RTLOffsetType {
-  if (cachedRTLResult === null || recalculate) {
-    const outerDiv = document.createElement('div');
-    const outerStyle = outerDiv.style;
-    outerStyle.width = '50px';
-    outerStyle.height = '50px';
-    outerStyle.overflow = 'scroll';
-    outerStyle.direction = 'rtl';
-
-    const innerDiv = document.createElement('div');
-    const innerStyle = innerDiv.style;
-    innerStyle.width = '100px';
-    innerStyle.height = '100px';
-
-    outerDiv.appendChild(innerDiv);
-
-    document.body.appendChild(outerDiv);
-
-    if (outerDiv.scrollLeft > 0) {
-      cachedRTLResult = 'positive-descending';
-    } else {
-      outerDiv.scrollLeft = 1;
-      if (outerDiv.scrollLeft === 0) {
-        cachedRTLResult = 'negative';
-      } else {
-        cachedRTLResult = 'positive-ascending';
-      }
-    }
-
-    document.body.removeChild(outerDiv);
-
-    return cachedRTLResult;
-  }
-
-  return cachedRTLResult;
-}
-
-export function getScrollLeft(node: Element, direction: Direction): number {
-  let {scrollLeft} = node;
-
-  // scrollLeft in rtl locales differs across browsers, so normalize.
-  // See comment by getRTLOffsetType below for details.
-  if (direction === 'rtl') {
-    let {scrollWidth, clientWidth} = node;
-    switch (getRTLOffsetType()) {
-      case 'negative':
-        scrollLeft = -scrollLeft;
-        break;
-      case 'positive-descending':
-        scrollLeft = scrollWidth - clientWidth - scrollLeft;
-        break;
-    }
-  }
-
-  return scrollLeft;
-}
-
-export function setScrollLeft(node: Element, direction: Direction, scrollLeft: number): void {
-  if (direction === 'rtl') {
-    switch (getRTLOffsetType()) {
-      case 'negative':
-        scrollLeft = -scrollLeft;
-        break;
-      case 'positive-ascending':
-        break;
-      default: {
-        const {clientWidth, scrollWidth} = node;
-        scrollLeft = scrollWidth - clientWidth - scrollLeft;
-        break;
-      }
-    }
-  }
-
-  node.scrollLeft = scrollLeft;
-}