[Snyk] Upgrade react-virtualized-auto-sizer from 1.0.6 to 1.0.20 (#6798)

Co-authored-by: snyk-bot <snyk-bot@snyk.io> Co-authored-by: Cee Chen <constance.chen@elastic.co>
elastic · Aug 11, 2023 · fe6d803 · fe6d803
1 parent 7c9cf14
commit fe6d803
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -68,7 +68,6 @@
     "@types/lodash": "^4.14.194",
     "@types/numeral": "^0.0.28",
     "@types/react-input-autosize": "^2.2.1",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/refractor": "^3.0.0",
     "@types/resize-observer-browser": "^0.1.5",
@@ -85,7 +84,7 @@
     "react-input-autosize": "^3.0.0",
     "react-is": "^17.0.2",
     "react-remove-scroll-bar": "^2.3.4",
-    "react-virtualized-auto-sizer": "^1.0.6",
+    "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "refractor": "^3.5.0",
     "rehype-raw": "^5.0.0",

diff --git a/src-docs/src/views/auto_sizer/auto_sizer.tsx b/src-docs/src/views/auto_sizer/auto_sizer.tsx
@@ -3,6 +3,7 @@ import { css } from '@emotion/react';
 
 import {
   EuiAutoSizer,
+  EuiAutoSize,
   EuiCode,
   EuiPanel,
   logicalSizeCSS,
@@ -23,7 +24,7 @@ export default () => {
   return (
     <div css={containerStyles}>
       <EuiAutoSizer>
-        {({ height, width }) => (
+        {({ height, width }: EuiAutoSize) => (
           <EuiPanel css={[panelStyles, { height, width }]}>
             <EuiCode>
               height: {height}, width: {width}

diff --git a/src/components/auto_sizer/auto_sizer.tsx b/src/components/auto_sizer/auto_sizer.tsx
@@ -6,8 +6,18 @@
  * Side Public License, v 1.
  */
 
-import AutoSizer, { AutoSizerProps } from 'react-virtualized-auto-sizer';
+import type { ComponentProps } from 'react';
+import type {
+  Size,
+  HorizontalSize,
+  VerticalSize,
+} from 'react-virtualized-auto-sizer';
 
-export interface EuiAutoSizerProps extends AutoSizerProps {}
+export type EuiAutoSizerProps = ComponentProps<typeof AutoSizer>;
+export type EuiAutoSize = Size;
+export type EuiAutoSizeHorizontal = HorizontalSize;
+export type EuiAutoSizeVertical = VerticalSize;
+
+import AutoSizer from 'react-virtualized-auto-sizer';
 
 export class EuiAutoSizer extends AutoSizer {}
diff --git a/src/components/auto_sizer/index.ts b/src/components/auto_sizer/index.ts
@@ -6,5 +6,4 @@
  * Side Public License, v 1.
  */
 
-export type { EuiAutoSizerProps } from './auto_sizer';
-export { EuiAutoSizer } from './auto_sizer';
+export * from './auto_sizer';
diff --git a/src/components/code/code_block_virtualized.tsx b/src/components/code/code_block_virtualized.tsx
@@ -10,7 +10,11 @@ import React, { HTMLAttributes, forwardRef, useMemo } from 'react';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
 import { RefractorNode } from 'refractor';
 import { logicalStyles } from '../../global_styling';
-import { EuiAutoSizer } from '../auto_sizer';
+import {
+  EuiAutoSizer,
+  EuiAutoSize,
+  EuiAutoSizeHorizontal,
+} from '../auto_sizer';
 import { nodeToHtml } from './utils';
 
 export const EuiCodeBlockVirtualized = ({
@@ -47,22 +51,34 @@ export const EuiCodeBlockVirtualized = ({
     [codeProps]
   );
 
-  return (
-    <EuiAutoSizer disableHeight={typeof overflowHeight === 'number'}>
-      {({ height, width }) => (
+  const virtualizationProps = {
+    itemData: data,
+    itemSize: rowHeight,
+    itemCount: data.length,
+    outerElementType: VirtualizedOuterElement,
+    innerElementType: VirtualizedInnerElement,
+  };
+
+  return typeof overflowHeight === 'number' ? (
+    <EuiAutoSizer disableHeight={true}>
+      {({ width }: EuiAutoSizeHorizontal) => (
         <FixedSizeList
-          height={height ?? overflowHeight}
+          height={overflowHeight}
           width={width}
-          itemData={data}
-          itemSize={rowHeight}
-          itemCount={data.length}
-          outerElementType={VirtualizedOuterElement}
-          innerElementType={VirtualizedInnerElement}
+          {...virtualizationProps}
         >
           {ListRow}
         </FixedSizeList>
       )}
     </EuiAutoSizer>
+  ) : (
+    <EuiAutoSizer>
+      {({ height, width }: EuiAutoSize) => (
+        <FixedSizeList height={height} width={width} {...virtualizationProps}>
+          {ListRow}
+        </FixedSizeList>
+      )}
+    </EuiAutoSizer>
   );
 };
 

diff --git a/src/components/selectable/selectable_list/selectable_list.tsx b/src/components/selectable/selectable_list/selectable_list.tsx
@@ -21,7 +21,11 @@ import {
   areEqual,
 } from 'react-window';
 import { CommonProps, ExclusiveUnion } from '../../common';
-import { EuiAutoSizer } from '../../auto_sizer';
+import {
+  EuiAutoSizer,
+  EuiAutoSize,
+  EuiAutoSizeHorizontal,
+} from '../../auto_sizer';
 import { EuiHighlight } from '../../highlight';
 import { EuiSelectableOption } from '../selectable_option';
 import { EuiSelectableOnChangeEvent } from '../selectable';
@@ -329,6 +333,67 @@ export class EuiSelectableList<T> extends Component<EuiSelectableListProps<T>> {
     );
   }, areEqual);
 
+  renderVirtualizedList = (
+    heightIsFull: boolean,
+    optionArray: EuiSelectableOption[]
+  ) => {
+    if (!this.props.isVirtualized) return null;
+
+    const { windowProps, height: forcedHeight, rowHeight } = this.props;
+
+    const virtualizationProps = {
+      className: 'euiSelectableList__list',
+      ref: this.setListRef,
+      outerRef: this.removeScrollableTabStop,
+      innerRef: this.setListBoxRef,
+      innerElementType: 'ul',
+      itemCount: optionArray.length,
+      itemData: optionArray,
+      itemSize: rowHeight,
+      'data-skip-axe': 'scrollable-region-focusable',
+      ...windowProps,
+    };
+
+    // Calculated height is only used if height is not full
+    let calculatedHeight = !heightIsFull ? forcedHeight || 0 : 0;
+
+    // If calculatedHeight is still falsy, then calculate it
+    if (!heightIsFull && !calculatedHeight) {
+      const maxVisibleOptions = 7;
+      const numVisibleOptions = optionArray.length;
+      const numVisibleMoreThanMax = optionArray.length > maxVisibleOptions;
+
+      if (numVisibleMoreThanMax) {
+        // Show only half of the last one to indicate there's more to scroll to
+        calculatedHeight = (maxVisibleOptions - 0.5) * rowHeight;
+      } else {
+        calculatedHeight = numVisibleOptions * rowHeight;
+      }
+    }
+
+    return heightIsFull ? (
+      <EuiAutoSizer>
+        {({ width, height }: EuiAutoSize) => (
+          <FixedSizeList width={width} height={height} {...virtualizationProps}>
+            {this.ListRow}
+          </FixedSizeList>
+        )}
+      </EuiAutoSizer>
+    ) : (
+      <EuiAutoSizer disableHeight={true}>
+        {({ width }: EuiAutoSizeHorizontal) => (
+          <FixedSizeList
+            width={width}
+            height={calculatedHeight}
+            {...virtualizationProps}
+          >
+            {this.ListRow}
+          </FixedSizeList>
+        )}
+      </EuiAutoSizer>
+    );
+  };
+
   render() {
     const {
       className,
@@ -361,30 +426,10 @@ export class EuiSelectableList<T> extends Component<EuiSelectableListProps<T>> {
     } = this.props;
 
     const optionArray = visibleOptions || options;
-
     this.calculateAriaSetAttrs(optionArray);
 
     const heightIsFull = forcedHeight === 'full';
 
-    let calculatedHeight = (heightIsFull ? false : forcedHeight) as
-      | false
-      | number
-      | undefined;
-
-    // If calculatedHeight is still undefined, then calculate it
-    if (calculatedHeight === undefined) {
-      const maxVisibleOptions = 7;
-      const numVisibleOptions = optionArray.length;
-      const numVisibleMoreThanMax = optionArray.length > maxVisibleOptions;
-
-      if (numVisibleMoreThanMax) {
-        // Show only half of the last one to indicate there's more to scroll to
-        calculatedHeight = (maxVisibleOptions - 0.5) * rowHeight!;
-      } else {
-        calculatedHeight = numVisibleOptions * rowHeight!;
-      }
-    }
-
     const classes = classNames(
       'euiSelectableList',
       {
@@ -397,26 +442,7 @@ export class EuiSelectableList<T> extends Component<EuiSelectableListProps<T>> {
     return (
       <div className={classes} {...rest}>
         {isVirtualized ? (
-          <EuiAutoSizer disableHeight={!heightIsFull}>
-            {({ width, height }) => (
-              <FixedSizeList
-                ref={this.setListRef}
-                outerRef={this.removeScrollableTabStop}
-                className="euiSelectableList__list"
-                data-skip-axe="scrollable-region-focusable"
-                width={width}
-                height={calculatedHeight || height}
-                itemCount={optionArray.length}
-                itemData={optionArray}
-                itemSize={rowHeight!}
-                innerElementType="ul"
-                innerRef={this.setListBoxRef}
-                {...windowProps}
-              >
-                {this.ListRow}
-              </FixedSizeList>
-            )}
-          </EuiAutoSizer>
+          this.renderVirtualizedList(heightIsFull, optionArray)
         ) : (
           <div
             className="euiSelectableList__list"

diff --git a/upcoming_changelogs/6798.md b/upcoming_changelogs/6798.md
@@ -0,0 +1,2 @@
+- Updated the underlying library powering `EuiAutoSizer`. This primarily affects typing around the `disableHeight` and `disableWidth` props
+- Added new `EuiAutoSize`, `EuiAutoSizeHorizontal`, and `EuiAutoSizeVertical` types to support `EuiAutoSizer`'s now-stricter typing
diff --git a/yarn.lock b/yarn.lock
@@ -4917,13 +4917,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-virtualized-auto-sizer@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
-  integrity sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-window@^1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
@@ -18016,10 +18009,10 @@ react-view@^2.3.2:
     prism-react-renderer "^1.2.0"
     react-simple-code-editor "^0.11.0"
 
-react-virtualized-auto-sizer@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
-  integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==
+react-virtualized-auto-sizer@^1.0.20:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.20.tgz#d9a907253a7c221c52fa57dc775a6ef40c182645"
+  integrity sha512-OdIyHwj4S4wyhbKHOKM1wLSj/UDXm839Z3Cvfg2a9j+He6yDa6i5p0qQvEiCnyQlGO/HyfSnigQwuxvYalaAXA==
 
 react-window@^1.8.9:
   version "1.8.9"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		- Updated the underlying library powering `EuiAutoSizer`. This primarily affects typing around the `disableHeight` and `disableWidth` props
		- Added new `EuiAutoSize`, `EuiAutoSizeHorizontal`, and `EuiAutoSizeVertical` types to support `EuiAutoSizer`'s now-stricter typing