@wix/patterns 1.255.0 → 1.256.0

package/src/components/VirtualGridRepeater/VirtualGridRepeaterBase.tsx

@@ -0,0 +1,125 @@
+import React, { ComponentType, useEffect, useMemo, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  GridChildComponentProps,
+  ReactElementType,
+  VariableSizeGrid,
+} from 'react-window';
+import { useScrollableContentContext } from '../../providers';
+import {
+  ReactWindowGridRef,
+  VirtualGridRepeaterState,
+} from './VirtualGridRepeaterState';
+import { RenderItem } from './RenderItem';
+import { VirtualGridRepeaterContextProvider } from './VirtualGridRepeaterContext';
+import { GridState } from './GridState';
+
+export interface VirtualGridRepeaterBaseProps {
+  gridState: GridState;
+  renderItem: RenderItem;
+  children: ComponentType<GridChildComponentProps<undefined>>;
+  innerElementType?: ReactElementType;
+  outerElementType?: ReactElementType;
+}
+
+function _VirtualGridRepeaterBase(props: VirtualGridRepeaterBaseProps) {
+  const {
+    gridState,
+    renderItem,
+    innerElementType,
+    outerElementType,
+    children,
+  } = props;
+
+  const { scrollableContentRef } = useScrollableContentContext();
+
+  const [state] = useState(() => new VirtualGridRepeaterState({ gridState }));
+
+  const {
+    calcGridProps,
+    rowCount,
+    height,
+    width,
+    itemKeyRecycler: itemKey,
+  } = state;
+
+  const [onFullRenderEnd] = useState(() =>
+    state.gridState.toolbar.fedopsReporter.onFullRenderStart?.(),
+  );
+
+  useEffect(() => {
+    if (height && width) {
+      onFullRenderEnd?.();
+    }
+  }, [height && width]);
+
+  const {
+    columnCount,
+    columnWidthIncludingGap,
+    rowHeightIncludingGap,
+    overscanCount,
+    estimatedRowHeight,
+  } = calcGridProps;
+
+  useEffect(() => {
+    const container = scrollableContentRef?.current;
+
+    return state.init({
+      container,
+    });
+  }, []);
+
+  const style = useMemo(
+    () =>
+      ({
+        overflow: 'visible',
+        height: '100%',
+      } as const),
+    [],
+  );
+
+  const context = useMemo(
+    () => ({ state, renderItem, itemKey }),
+    [renderItem, itemKey],
+  );
+
+  useEffect(() => {
+    state.gridRef?.resetAfterIndices({
+      columnIndex: 0,
+      rowIndex: 0,
+      shouldForceUpdate: true,
+    });
+  }, [height, width, calcGridProps]);
+
+  return (
+    <VirtualGridRepeaterContextProvider value={context}>
+      <VariableSizeGrid
+        ref={(el) => {
+          state.gridRef = el as ReactWindowGridRef;
+          state.gridState.gridRef = el as ReactWindowGridRef;
+        }}
+        height={height}
+        width={width}
+        columnCount={columnCount}
+        outerElementType={outerElementType}
+        innerElementType={innerElementType}
+        columnWidth={() => columnWidthIncludingGap(0)}
+        rowHeight={(index: number) =>
+          rowHeightIncludingGap({
+            index,
+            key: itemKey({ rowIndex: index, columnIndex: 0 }),
+          }) ?? estimatedRowHeight
+        }
+        estimatedRowHeight={estimatedRowHeight}
+        rowCount={height && width ? rowCount : 0}
+        overscanRowCount={overscanCount}
+        itemKey={itemKey}
+        style={style}
+      >
+        {children}
+      </VariableSizeGrid>
+    </VirtualGridRepeaterContextProvider>
+  );
+}
+
+export const VirtualGridRepeaterBase = observer(_VirtualGridRepeaterBase);

package/src/components/VirtualGridRepeater/VirtualGridRepeaterContext.ts

@@ -0,0 +1,15 @@
+import { createContext } from '../../createContext';
+import { VirtualGridRepeaterState } from './VirtualGridRepeaterState';
+import { RenderItem } from './RenderItem';
+
+const { Provider, useContext } = createContext<{
+  state: VirtualGridRepeaterState;
+  renderItem: RenderItem;
+  itemKey: (params: {
+    columnIndex: number;
+    rowIndex: number;
+  }) => string | number;
+}>('VirtualGridRepeaterContext');
+
+export const VirtualGridRepeaterContextProvider = Provider;
+export const useVirtualGridRepeaterContext = useContext;

package/src/components/VirtualGridRepeater/VirtualGridRepeaterState.ts

@@ -0,0 +1,164 @@
+import { action, computed, makeObservable } from 'mobx';
+import { GridState } from './GridState';
+import { VariableSizeGrid } from 'react-window';
+import { CSSProperties } from 'react';
+
+export interface ReactWindowGridRef extends VariableSizeGrid {
+  readonly state: {
+    readonly scrollTop: number;
+  };
+  _getVerticalRangeToRender(): number[];
+  _getHorizontalRangeToRender(): number[];
+  _getItemStyle(rowIndex: number, columnIndex: number): CSSProperties;
+  _getItemStyleCache(...args: any[]): unknown;
+}
+
+export interface VirtualGridRepeaterStateParams {
+  gridState: GridState;
+}
+
+export class VirtualGridRepeaterState {
+  readonly gridState;
+
+  gridRef?: ReactWindowGridRef | null;
+
+  scrollHeight?: number | string | null;
+
+  innerElement?: HTMLElement | null = null;
+
+  constructor(params: VirtualGridRepeaterStateParams) {
+    this.gridState = params.gridState;
+
+    makeObservable(this, {
+      calcGridProps: computed,
+      rowCount: computed,
+      height: computed,
+      width: computed,
+      itemKeyRecycler: computed,
+    });
+  }
+
+  get height() {
+    return this.gridState.toolbar.itemsContentHeight;
+  }
+
+  get width() {
+    return this.gridState.itemsContentWidth;
+  }
+
+  get calcGridProps() {
+    return this.gridState.calcGridProps;
+  }
+
+  get rowCount() {
+    const {
+      gridState: { itemsToRenderCount },
+      calcGridProps: { columnCount },
+    } = this;
+
+    return Math.ceil(itemsToRenderCount / columnCount);
+  }
+
+  _itemKeyRecycler = (index: number) => {
+    const {
+      gridState: { itemKeyRecyclerOverride },
+    } = this;
+
+    const forceKey = itemKeyRecyclerOverride?.(index);
+
+    if (forceKey != null) {
+      return forceKey;
+    }
+
+    // https://github.com/wix-private/cairo/pull/1142
+    // const [verticalStartIndex, verticalEndIndex] = this.gridRef?._getVerticalRangeToRender() ?? [];
+    // const verticalCount = verticalEndIndex - verticalStartIndex + 1;
+    // return index % (verticalCount * columnCount);
+
+    return index;
+  };
+
+  get itemKeyRecycler() {
+    const {
+      gridState: { itemKeyRecyclerOverride },
+      calcGridProps: { columnCount },
+    } = this;
+
+    void itemKeyRecyclerOverride;
+
+    return ({
+      rowIndex,
+      columnIndex,
+    }: {
+      columnIndex: number;
+      rowIndex: number;
+    }) => {
+      const index = rowIndex * columnCount + columnIndex;
+      return this._itemKeyRecycler(index);
+    };
+  }
+
+  init({ container: scrollableContainer }: { container?: HTMLElement | null }) {
+    let animationFrameId: number;
+    if (!scrollableContainer) {
+      return;
+    }
+
+    const onScroll = (ev: Event) => {
+      if (process.env.NODE_ENV === 'test') {
+        if (this.gridRef == null) {
+          return;
+        }
+
+        const { _testScroll } = (ev ?? {}) as { _testScroll?: 'top' | 'up' };
+
+        let scrollTopValue =
+          this.gridRef.state.scrollTop +
+          this.gridState.toolbar.itemsContentHeight;
+
+        if (_testScroll === 'top') {
+          scrollTopValue = 0;
+        }
+
+        if (_testScroll === 'up') {
+          scrollTopValue = -this.gridState.toolbar.itemsContentHeight;
+        }
+
+        this.gridRef.scrollTo({
+          scrollTop: scrollTopValue,
+        });
+
+        return;
+      }
+
+      animationFrameId = window.requestAnimationFrame(
+        action(() => {
+          if (this.gridRef == null || this.innerElement == null) {
+            return;
+          }
+
+          const { innerElement, gridState } = this;
+          const { top: innerElementTop } = innerElement.getBoundingClientRect();
+          const { containerTop } = gridState.toolbar;
+
+          if (containerTop == null) {
+            return;
+          }
+
+          const offsetTop = innerElementTop - containerTop;
+
+          this.gridRef.scrollTo({
+            scrollTop: Math.max(-offsetTop, 0),
+          });
+        }),
+      );
+    };
+
+    scrollableContainer.addEventListener('scroll', onScroll);
+
+    return () => {
+      scrollableContainer.removeEventListener('scroll', onScroll);
+      window.cancelAnimationFrame(animationFrameId);
+    };
+  }
+}

package/src/components/VirtualGridRepeater/VirtualGridStateContext.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+import { GridState } from './GridState';
+import { assertContextValue } from '../../createContext';
+
+export const VirtualVirtualGridStateContext = createContext<GridState | null>(
+  null,
+);
+
+export const VirtualGridStateProvider = VirtualVirtualGridStateContext.Provider;
+export const VirtualGridStateConsumer = VirtualVirtualGridStateContext.Consumer;
+
+export const useVirtualGridStateContext = () => {
+  const value = useContext(VirtualVirtualGridStateContext);
+  assertContextValue('VirtualGridStateProvider', value);
+  return value;
+};

package/src/components/VirtualGridRepeater/VirtualInternalMemoItem.tsx

@@ -0,0 +1,66 @@
+import { CSSProperties, memo, useEffect, useState } from 'react';
+import { RenderItem } from './RenderItem';
+import { VirtualGridRepeaterState } from './VirtualGridRepeaterState';
+import { TimeoutProps } from 'react-transition-group/Transition';
+import { runInAction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+
+export type VirtualInternalMemoItemProps = {
+  index: number;
+  rowIndex: number;
+  columnIndex: number;
+  renderItem: RenderItem;
+  state: VirtualGridRepeaterState;
+  itemKey: (params: {
+    columnIndex: number;
+    rowIndex: number;
+  }) => string | number;
+  style?: CSSProperties;
+} & Partial<TimeoutProps<undefined>>;
+
+const _VirtualInternalMemoItem = ({
+  index,
+  rowIndex,
+  columnIndex,
+  renderItem,
+  itemKey,
+  state,
+  style,
+  ...timeoutProps
+}: VirtualInternalMemoItemProps) => {
+  const [ready, setReady] = useState(() =>
+    runInAction(() => !state.gridState.toolbar.isScrolling),
+  );
+
+  useEffect(() => {
+    if (!ready) {
+      // An optimization for rendering the item lazily when scrolling fast (this is experimental and might be changed)
+      const id = window.requestAnimationFrame(() => {
+        setReady(true);
+      });
+
+      return () => {
+        window.cancelAnimationFrame(id);
+      };
+    }
+
+    return undefined;
+  }, [ready]);
+
+  return renderItem(index, {
+    timeoutProps,
+    style,
+    itemKey: state._itemKeyRecycler,
+    index2d: { rowIndex, columnIndex },
+  });
+};
+
+export const VirtualInternalMemoItem = memo(
+  observer(_VirtualInternalMemoItem),
+  (a, b) =>
+    a.index === b.index &&
+    a.in === b.in &&
+    a.renderItem === b.renderItem &&
+    a.itemKey === b.itemKey &&
+    a.style === b.style,
+);

package/src/components/VirtualGridRepeater/VirtualItem.tsx

@@ -0,0 +1,6 @@
+import { GridChildComponentProps } from 'react-window';
+import { TimeoutProps } from 'react-transition-group/Transition';
+
+export interface VirtualItemProps
+  extends GridChildComponentProps<undefined>,
+    Partial<TimeoutProps<undefined>> {}

package/src/components/VirtualGridRepeater/VirtualTableRepeater.tsx

@@ -0,0 +1,62 @@
+import React, {
+  createContext,
+  forwardRef,
+  ReactElement,
+  ReactNode,
+  useCallback,
+} from 'react';
+import { VirtualGridRepeaterBase } from './VirtualGridRepeaterBase';
+import { VirtualTableRow } from './VirtualTableRow';
+import { TableForceRenderIndexes } from './TableForceRenderIndexes';
+import { useVirtualGridStateContext } from './VirtualGridStateContext';
+import { VirtualTableRowMutated } from './VirtualTableRowMutated';
+import { RenderItem } from './RenderItem';
+
+const OuterElementPropsContext = createContext({});
+
+export interface VirtualTableRepeaterProps {
+  children: ReactElement[];
+}
+
+export function VirtualTableRepeater({ children }: VirtualTableRepeaterProps) {
+  const gridState = useVirtualGridStateContext();
+
+  const renderItem = useCallback<RenderItem>(
+    (index, { style, itemKey, index2d } = {}) => {
+      return (
+        <VirtualTableRowMutated
+          index={index}
+          style={style}
+          itemKey={itemKey}
+          rowIndex={index2d?.rowIndex}
+        >
+          {children}
+        </VirtualTableRowMutated>
+      );
+    },
+    [children],
+  );
+
+  return (
+    <VirtualGridRepeaterBase
+      innerElementType={TableForceRenderIndexes}
+      outerElementType={OuterElement}
+      gridState={gridState}
+      renderItem={renderItem}
+    >
+      {VirtualTableRow}
+    </VirtualGridRepeaterBase>
+  );
+}
+
+// wrap with forwardRef to avoid warning in console about ref being passed to a function component without `forwardRef`.
+// react-window passes the ref - https://github.com/bvaughn/react-window/blob/6ff5694ac810617515acf74401ba68fe2951133b/src/createGridComponent.js#L464
+export const OuterElement = forwardRef(
+  ({ children, ...rest }: { children?: ReactNode }, _ref) => {
+    return (
+      <OuterElementPropsContext.Provider value={rest}>
+        {children}
+      </OuterElementPropsContext.Provider>
+    );
+  },
+);

package/src/components/VirtualGridRepeater/VirtualTableRow.tsx

@@ -0,0 +1,35 @@
+import React, { memo } from 'react';
+import { useVirtualGridRepeaterContext } from './VirtualGridRepeaterContext';
+import { VirtualItemProps } from './VirtualItem';
+import { VirtualInternalMemoItem } from './VirtualInternalMemoItem';
+import { areEqual } from 'react-window';
+
+function _VirtualTableRow(props: VirtualItemProps) {
+  const {
+    columnIndex,
+    rowIndex,
+    style: { width, ...style },
+  } = props;
+
+  const { state, renderItem, itemKey } = useVirtualGridRepeaterContext();
+
+  const {
+    calcGridProps: { columnCount },
+  } = state;
+
+  const index = rowIndex * columnCount + columnIndex;
+
+  return (
+    <VirtualInternalMemoItem
+      index={index}
+      rowIndex={rowIndex}
+      columnIndex={columnIndex}
+      renderItem={renderItem}
+      itemKey={itemKey}
+      state={state}
+      style={style}
+    />
+  );
+}
+
+export const VirtualTableRow = memo(_VirtualTableRow, areEqual);

package/src/components/VirtualGridRepeater/VirtualTableRowMutated.tsx

@@ -0,0 +1,75 @@
+import {
+  cloneElement,
+  CSSProperties,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useVirtualGridStateContext } from './VirtualGridStateContext';
+import { VirtualTableRowMutatedState } from './VirtualTableRowMutatedState';
+
+export function VirtualTableRowMutated(props: {
+  index: number;
+  style?: CSSProperties;
+  itemKey?: (index: number) => number | string;
+  rowIndex?: number;
+  children: ReactElement[];
+}) {
+  const { children, index, style, itemKey, rowIndex } = props;
+
+  const gridState = useVirtualGridStateContext();
+
+  const element = children[index];
+
+  const rowRef = useRef<HTMLTableRowElement>();
+
+  const [state] = useState(
+    () =>
+      new VirtualTableRowMutatedState({
+        rowRef,
+        state: gridState,
+        itemKey,
+        index,
+        rowIndex,
+      }),
+  );
+
+  useEffect(() => {
+    state.index = index;
+  }, [index]);
+
+  useEffect(() => {
+    state.rowIndex = rowIndex;
+  }, [rowIndex]);
+
+  useEffect(() => {
+    state.itemKey = itemKey;
+  }, [itemKey]);
+
+  useEffect(() => {
+    state._measureRowContentsHeight();
+  }, [rowRef, rowIndex]);
+
+  useEffect(() => state.init(), []);
+
+  const ref = useCallback((el: HTMLTableRowElement | undefined) => {
+    rowRef.current = el;
+  }, []);
+
+  if (element == null) {
+    return null;
+  }
+
+  return cloneElement(element, {
+    style: { ...(element.props.style ?? {}), ...style },
+    rowProps: {
+      ...(element.props.rowProps ?? {}),
+      'data-key':
+        process.env.NODE_ENV === 'development' ? itemKey?.(index) : undefined,
+      'data-index': `index-${index}`,
+      ref,
+    },
+  });
+}

package/src/components/VirtualGridRepeater/VirtualTableRowMutatedState.ts

@@ -0,0 +1,120 @@
+import { addMutationObserver, addResizeObserver } from '@wix/bex-core';
+import { GridState } from './GridState';
+import { EventEmitter } from 'events';
+import { TypedEmitter } from '@wix/bex-core/events';
+
+export interface VirtualTableRowMutatedStateProps {
+  readonly state: GridState;
+  readonly rowRef: {
+    current: HTMLTableRowElement | null | undefined;
+  };
+  readonly itemKey?: (index: number) => number | string;
+  readonly index: number;
+  readonly rowIndex?: number;
+}
+
+export class VirtualTableRowMutatedState {
+  readonly state;
+  rowRef;
+  itemKey;
+  index;
+  rowIndex;
+
+  readonly events = new EventEmitter() as TypedEmitter<{
+    disposeResizeObservers: (() => void) | undefined;
+  }>;
+
+  constructor(params: VirtualTableRowMutatedStateProps) {
+    this.state = params.state;
+    this.rowRef = params.rowRef;
+    this.itemKey = params.itemKey;
+    this.index = params.index;
+    this.rowIndex = params.rowIndex;
+  }
+
+  _measureRowContentsHeight() {
+    const { state, rowRef, itemKey, index } = this;
+    const rowElement = rowRef.current;
+
+    if (
+      rowElement == null ||
+      state.calcGridProps.rowHeight != null ||
+      itemKey == null ||
+      state.setVariableRowHeight == null
+    ) {
+      return;
+    }
+
+    rowElement.style.height = 'auto';
+
+    state.setVariableRowHeight({
+      key: itemKey(index),
+      size: rowElement.offsetHeight,
+    });
+
+    const totalHeight = state.calcGridProps.rowHeightIncludingGap({
+      index,
+      key: itemKey(index),
+    });
+
+    rowElement.style.height = `${totalHeight}px`;
+  }
+
+  setChildrenResizeObservers() {
+    const { rowRef, state } = this;
+    const {
+      container: { lodash },
+    } = state;
+
+    const rowElement = rowRef.current;
+
+    if (!rowElement) {
+      return;
+    }
+
+    const disposers = Array.from(rowElement.childNodes)
+      .filter((td): td is HTMLElement => td instanceof HTMLElement)
+      .map((td) => {
+        return addResizeObserver(
+          td,
+          lodash.throttle(() => this._measureRowContentsHeight(), 100),
+        );
+      });
+
+    return () => {
+      disposers.forEach((disposer) => disposer?.());
+    };
+  }
+
+  _disposeResizeObservers() {
+    const { events } = this;
+    const disposers = events.listeners('disposeResizeObservers');
+    events.removeAllListeners('disposeResizeObservers');
+    disposers.forEach((disposer) => disposer?.());
+  }
+
+  init() {
+    const { rowRef, events } = this;
+    const rowElement = rowRef.current;
+
+    if (!rowElement) {
+      return;
+    }
+
+    const resetChildrenResizeObservers = () => {
+      this._disposeResizeObservers();
+      events.on('disposeResizeObservers', this.setChildrenResizeObservers());
+    };
+
+    resetChildrenResizeObservers();
+
+    const disposers = [
+      addMutationObserver(rowElement, resetChildrenResizeObservers),
+    ];
+
+    return () => {
+      this._disposeResizeObservers();
+      disposers.forEach((disposer) => disposer?.());
+    };
+  }
+}

package/src/components/VisuallyHidden.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+// Hide element visually but keep it readable by screen readers
+export const visuallyHidden: React.CSSProperties = {
+  position: 'fixed',
+  width: 1,
+  height: 1,
+  margin: -1,
+  border: 0,
+  padding: 0,
+  overflow: 'hidden',
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(100%)',
+  whiteSpace: 'nowrap',
+};