@patternfly/react-core 6.0.0-alpha.94 → 6.0.0-alpha.96

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.93","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.95","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.93","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.95","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.93","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.95","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.94",
+  "version": "6.0.0-alpha.96",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -47,9 +47,9 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.34",
-    "@patternfly/react-styles": "^6.0.0-alpha.33",
-    "@patternfly/react-tokens": "^6.0.0-alpha.33",
+    "@patternfly/react-icons": "^6.0.0-alpha.35",
+    "@patternfly/react-styles": "^6.0.0-alpha.34",
+    "@patternfly/react-tokens": "^6.0.0-alpha.34",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "30e3c0351127628ce69c479a7f3157277fb9e7d1"
+  "gitHead": "19631bb68902f7cd7b0c3c20d08088b94eab321d"
 }

package/scripts/copyStyles.js

@@ -1,8 +1,6 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const { copySync, readFileSync, writeFileSync } = require('fs-extra');
 const { resolve, dirname, join } = require('path');
 const { parse: parseCSS, stringify: stringifyCSS } = require('css');
-/* eslint-enable @typescript-eslint/no-var-requires */
 
 const stylesDir = resolve(__dirname, '../dist/styles');
 const pfDir = dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
@@ -32,10 +30,10 @@ for (const [targetCss, baseCss] of Object.entries(baseCssFiles)) {
   const ast = parseCSS(css);
 
   // Core provides font awesome fonts and utlities. React does not use these
-  ast.stylesheet.rules = ast.stylesheet.rules.filter(rule => {
+  ast.stylesheet.rules = ast.stylesheet.rules.filter((rule) => {
     switch (rule.type) {
       case 'rule':
-        return !rule.selectors.some(sel => unusedSelectorRegEx.test(sel));
+        return !rule.selectors.some((sel) => unusedSelectorRegEx.test(sel));
       case 'keyframes':
         return !unusedKeyFramesRegEx.test(rule.name);
       case 'charset':
@@ -43,7 +41,7 @@ for (const [targetCss, baseCss] of Object.entries(baseCssFiles)) {
         return false;
       case 'font-face':
         // eslint-disable-next-line no-case-declarations
-        const fontFamilyDecl = rule.declarations.find(decl => decl.property === 'font-family');
+        const fontFamilyDecl = rule.declarations.find((decl) => decl.property === 'font-family');
         return !unusedFontFamilyRegEx.test(fontFamilyDecl.value);
       default:
         return true;

package/src/components/BackToTop/__tests__/BackToTop.test.tsx

@@ -115,7 +115,7 @@ test('Clicking backToTop scrolls back to top of the element passed via scrollabl
   const user = userEvent.setup();
   const wrapper = document.getElementById('backToTopWrapper');
   fireEvent.scroll(wrapper as HTMLElement, { target: { scrollY: 401 } });
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   wrapper!.scrollTo = jest.fn();
   await user.click(screen.getByRole(`button`).parentElement as Element);
 

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -145,7 +145,6 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
     }
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   expandContent = (_event: React.MouseEvent<Element, MouseEvent>) => {
     this.setState((prevState) => ({
       expanded: !prevState.expanded

package/src/components/DataList/DataListAction.tsx

@@ -35,7 +35,7 @@ export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
   id,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  /* eslint-disable @typescript-eslint/no-unused-vars */
+
   isPlainButtonAction,
   ...props
 }: DataListActionProps) => (

package/src/components/Drawer/DrawerActions.tsx

@@ -10,7 +10,6 @@ export interface DrawerActionsProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const DrawerActions: React.FunctionComponent<DrawerActionsProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
   ...props

package/src/components/Drawer/DrawerCloseButton.tsx

@@ -14,7 +14,6 @@ export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement>
 }
 
 export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   onClose = () => undefined as any,
   'aria-label': ariaLabel = 'Close drawer panel',

package/src/components/Drawer/DrawerContentBody.tsx

@@ -12,7 +12,6 @@ export interface DrawerContentBodyProps extends React.HTMLProps<HTMLDivElement>
 }
 
 export const DrawerContentBody: React.FunctionComponent<DrawerContentBodyProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
   hasPadding = false,

package/src/components/Drawer/DrawerHead.tsx

@@ -10,7 +10,6 @@ export interface DrawerHeadProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const DrawerHead: React.FunctionComponent<DrawerHeadProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
   ...props

package/src/components/Drawer/DrawerMain.tsx

@@ -10,7 +10,6 @@ export interface DrawerMainProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const DrawerMain: React.FunctionComponent<DrawerMainProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
   ...props

package/src/components/Drawer/DrawerPanelBody.tsx

@@ -12,7 +12,6 @@ export interface DrawerPanelBodyProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const DrawerPanelBody: React.FunctionComponent<DrawerPanelBodyProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
   hasNoPadding = false,

package/src/components/Drawer/DrawerSection.tsx

@@ -13,7 +13,6 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
   colorVariant = DrawerColorVariant.default,

package/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx

@@ -3,27 +3,17 @@
  */
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { UserIcon } from '@patternfly/react-icons';
+import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
 import { EmptyStateIcon } from '../../EmptyStateIcon';
 // any missing imports can usually be resolved by adding them here
 import { Spinner } from '../../../Spinner/Spinner';
 
 it('EmptyStateIcon should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(
-    <EmptyStateIcon
-      className={"''"}
-      icon={UserIcon}
-    />
-  );
+  const { asFragment } = render(<EmptyStateIcon className={"''"} icon={UserIcon} />);
   expect(asFragment()).toMatchSnapshot();
 });
 
 it('EmptyStateIcon should match snapshot for variant container', () => {
-  const { asFragment } = render(
-    <EmptyStateIcon
-      className={"''"}
-      icon={Spinner}
-    />
-  );
+  const { asFragment } = render(<EmptyStateIcon className={"''"} icon={Spinner} />);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Label/LabelGroup.tsx

@@ -86,7 +86,7 @@ class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState> {
     numLabels: 3,
     isClosable: false,
     isCompact: false,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     onClick: (_e: React.MouseEvent) => undefined as any,
     closeBtnAriaLabel: 'Close label group',
     tooltipPosition: 'top',

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -62,7 +62,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   const updateCurrentFiles = (files: File[]) => {
     if (fileUploadShouldFail) {
       const corruptedFiles = files.map((file) => ({ ...file, lastModified: 'foo' as unknown as number }));
-      // eslint-disable-next-line
+
       setCurrentFiles((prevFiles) => [...prevFiles, ...(corruptedFiles as any)]);
     } else {
       setCurrentFiles((prevFiles) => [...prevFiles, ...files]);

package/src/components/Nav/__tests__/Generated/NavList.test.tsx

@@ -23,7 +23,12 @@ describe('NavList', () => {
           setFlyoutRef: jest.fn()
         }}
       >
-        <NavList children={<>ReactNode</>} className="" backScrollAriaLabel="Scroll left" forwardScrollAriaLabel="Scroll right" />
+        <NavList
+          children={<>ReactNode</>}
+          className=""
+          backScrollAriaLabel="Scroll left"
+          forwardScrollAriaLabel="Scroll right"
+        />
       </NavContext.Provider>
     );
     expect(asFragment()).toMatchSnapshot();

package/src/components/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx

@@ -6,9 +6,7 @@ import { OverflowMenuDropdownItem } from '../../OverflowMenuDropdownItem';
 
 describe('OverflowMenuDropdownItem', () => {
   it('should match snapshot', () => {
-    const { asFragment } = render(
-        <OverflowMenuDropdownItem itemId="id" children={'any'} isShared={false} />
-    );
+    const { asFragment } = render(<OverflowMenuDropdownItem itemId="id" children={'any'} isShared={false} />);
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Page/PageToggleButton.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import * as React from 'react';
 import { Button, ButtonProps, ButtonVariant } from '../../components/Button';
 import { PageContextConsumer, PageContextProps } from './PageContext';

package/src/components/Pagination/__tests__/Generated/PaginationOptionsMenu.test.tsx

@@ -29,8 +29,8 @@ it('PaginationOptionsMenu should match snapshot (auto-generated)', () => {
         <React.Fragment>
           <b>
             {firstIndex} - {lastIndex}
-          </b>Custom toggle template
-          of<b>{itemCount}</b> {itemsTitle}
+          </b>
+          Custom toggle template of<b>{itemCount}</b> {itemsTitle}
         </React.Fragment>
       )}
       onPerPageSelect={() => null as any}

package/src/components/Popover/Popover.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import * as React from 'react';
 import { KeyTypes } from '../../helpers/constants';
 import styles from '@patternfly/react-styles/css/components/Popover/popover';

package/src/components/Spinner/Spinner.tsx

@@ -28,7 +28,6 @@ export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
 }
 
 export const Spinner: React.FunctionComponent<SpinnerProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   size = 'xl',
   'aria-valuetext': ariaValueText = 'Loading...',

package/src/components/Tabs/TabAction.tsx

@@ -26,7 +26,7 @@ const TabActionBase: React.FunctionComponent<TabActionProps> = ({
   isDisabled,
   'aria-label': ariaLabel = 'Tab action',
   innerRef,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   ouiaId,
   ouiaSafe,
   ...props

package/src/components/Tabs/Tabs.tsx

@@ -189,7 +189,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     unmountOnExit: false,
     ouiaSafe: true,
     variant: 'default',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     onToggle: (_event: React.MouseEvent, _isExpanded: boolean): void => undefined
   };
 

package/src/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
 import { css } from '@patternfly/react-styles';

package/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx

@@ -203,7 +203,6 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
   }
 
   return (
-    // eslint-disable-next-line no-console
     <Dropdown
       isOpen={isOpen}
       onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/demos/CustomMenus/examples/FavoritesDemo.tsx

@@ -92,7 +92,6 @@ export const FavoritesDemo: React.FunctionComponent = () => {
   };
 
   return (
-    // eslint-disable-next-line no-console
     <Dropdown
       isOpen={isOpen}
       onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -531,7 +531,6 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     </MenuToggle>
   );
   const attributeMenu = (
-    // eslint-disable-next-line no-console
     <Menu
       ref={attributeMenuRef}
       onSelect={(_ev, itemId) => {

package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx

@@ -1,15 +1,5 @@
 import React from 'react';
-import {
-  BackToTop,
-  Card,
-  CardBody,
-  Content,
-  Gallery,
-  GalleryItem,
-  PageSection,
-  Page,
-  Switch
-} from '@patternfly/react-core';
+import { BackToTop, Card, CardBody, Content, Gallery, GalleryItem, PageSection, Switch } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const Name = () => {
@@ -21,44 +11,41 @@ export const Name = () => {
 
   return (
     <DashboardWrapper breadcrumb={null}>
-      <Page>
-        <PageSection>
-          <Content>
-            <h1>Main title</h1>
-            <p>
-              Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
-              of it’s relative line height of 1.5.
-            </p>
-            <Switch label="Always show BackToTopButton" onChange={handleChange} isChecked={isAlwaysVisible} />
-          </Content>
-        </PageSection>
-        <PageSection
-          hasOverflowScroll
-          name="scrolling-section"
-          tabIndex={0}
-          aria-label="Scrollable container of demonstration cards with a back to top element"
-        >
-          <Gallery hasGutter>
-            {Array.from({ length: 60 }).map((_value, index) => (
-              <GalleryItem key={index}>
-                <Card key={index}>
-                  <CardBody>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum et urna eget semper. Sed
-                    tincidunt purus diam, id sollicitudin est pellentesque eget. Ut eget massa dignissim dolor pretium
-                    finibus at sit amet purus. Duis vulputate odio ac tristique convallis. Praesent porttitor
-                    condimentum varius. Duis pharetra in ligula nec ornare. Vivamus tincidunt nulla a semper semper.
-                    Duis tincidunt gravida elit non vehicula. Nunc eu sem venenatis, lobortis lorem sed, consectetur
-                    erat. Nulla accumsan, justo ac fringilla imperdiet, risus magna mollis libero, sit amet malesuada
-                    quam enim vel odio. Nullam vitae feugiat sem. Suspendisse potenti. Mauris dolor enim, pretium a
-                    pulvinar ut, commodo at risus.
-                  </CardBody>
-                </Card>
-              </GalleryItem>
-            ))}
-          </Gallery>
-        </PageSection>
-        <BackToTop scrollableSelector='[name="scrolling-section"]' isAlwaysVisible={isAlwaysVisible} />
-      </Page>
+      <PageSection>
+        <Content>
+          <h1>Main title</h1>
+          <p>
+            Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
+            of it’s relative line height of 1.5.
+          </p>
+          <Switch label="Always show BackToTopButton" onChange={handleChange} isChecked={isAlwaysVisible} />
+        </Content>
+      </PageSection>
+      <PageSection
+        hasOverflowScroll
+        tabIndex={0}
+        aria-label="Scrollable container of demonstration cards with a back to top element"
+      >
+        <Gallery hasGutter>
+          {Array.from({ length: 60 }).map((_value, index) => (
+            <GalleryItem key={index}>
+              <Card key={index}>
+                <CardBody>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum et urna eget semper. Sed
+                  tincidunt purus diam, id sollicitudin est pellentesque eget. Ut eget massa dignissim dolor pretium
+                  finibus at sit amet purus. Duis vulputate odio ac tristique convallis. Praesent porttitor condimentum
+                  varius. Duis pharetra in ligula nec ornare. Vivamus tincidunt nulla a semper semper. Duis tincidunt
+                  gravida elit non vehicula. Nunc eu sem venenatis, lobortis lorem sed, consectetur erat. Nulla
+                  accumsan, justo ac fringilla imperdiet, risus magna mollis libero, sit amet malesuada quam enim vel
+                  odio. Nullam vitae feugiat sem. Suspendisse potenti. Mauris dolor enim, pretium a pulvinar ut, commodo
+                  at risus.
+                </CardBody>
+              </Card>
+            </GalleryItem>
+          ))}
+        </Gallery>
+      </PageSection>
+      <BackToTop scrollableSelector=".pf-v6-c-page__main-container" isAlwaysVisible={isAlwaysVisible} />
     </DashboardWrapper>
   );
 };

package/src/deprecated/components/Chip/Chip.tsx

@@ -54,7 +54,7 @@ class Chip extends React.Component<ChipProps> {
     isOverflowChip: false,
     isReadOnly: false,
     tooltipPosition: 'top' as 'auto' | 'top' | 'bottom' | 'left' | 'right',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     onClick: (_e: React.MouseEvent) => undefined as any,
     textMaxWidth: '16ch'
   };

package/src/deprecated/components/DragDrop/Draggable.tsx

@@ -118,7 +118,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
       index
     };
     const dest =
-      hoveringDroppableId !== null && hoveringIndex !== null
+      hoveringDroppableId !== null
         ? {
             droppableId: hoveringDroppableId,
             index: hoveringIndex

package/src/deprecated/components/DragDrop/examples/DragDropMultipleLists.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Split, SplitItem } from '@patternfly/react-core';
+import { Flex } from '@patternfly/react-core';
 import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
 
 interface ItemType {
@@ -86,19 +86,19 @@ export const DragDropMultipleLists: React.FunctionComponent = () => {
 
   return (
     <DragDrop onDrop={onDrop}>
-      <Split hasGutter>
+      <Flex alignItems={{ default: 'alignItemsStretch' }} flexWrap={{ default: 'nowrap' }}>
         {Object.entries(items).map(([key, subitems]) => (
-          <SplitItem key={key} style={{ flex: 1 }}>
-            <Droppable zone="multizone" droppableId={key}>
+          <Flex key={key} fullWidth={{ default: 'fullWidth' }} alignItems={{ default: 'alignItemsStretch' }}>
+            <Droppable zone="multizone" droppableId={key} style={{ flexGrow: 1 }}>
               {(subitems as ItemType[]).map(({ id, content }) => (
                 <Draggable key={id} style={{ padding: '8px' }}>
                   {content}
                 </Draggable>
               ))}
             </Droppable>
-          </SplitItem>
+          </Flex>
         ))}
-      </Split>
+      </Flex>
     </DragDrop>
   );
 };

package/src/deprecated/components/DualListSelector/DualListSelector.tsx

@@ -500,11 +500,10 @@ class DualListSelector extends React.Component<DualListSelectorProps, DualListSe
     e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
     index: number,
     isChosen: boolean,
-    /* eslint-disable @typescript-eslint/no-unused-vars */
+
     id?: string,
     itemData?: any,
     parentData?: any
-    /* eslint-enable @typescript-eslint/no-unused-vars */
   ) => {
     this.setState((prevState) => {
       const originalArray = isChosen ? prevState.chosenOptionsSelected : prevState.availableOptionsSelected;

package/src/deprecated/components/Wizard/__tests__/Wizard.test.tsx

@@ -30,7 +30,6 @@ describe('Wizard', () => {
       { name: 'D', id: 'step-D', component: <p>Step 5</p> }
     ];
     const onBack: WizardStepFunctionType = (step) => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const name = { step };
     };
 
@@ -63,7 +62,6 @@ describe('Wizard', () => {
       { name: 'D', component: <p>Step 5</p> }
     ];
     const onBack: WizardStepFunctionType = (step) => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const name = { step };
     };
 

package/src/helpers/__tests__/util.test.ts

@@ -89,7 +89,6 @@ test('sideElementIsOutOfView Returns NONE when in view', () => {
 });
 
 test('fillTemplate interpolates strings correctly', () => {
-  // eslint-disable-next-line no-template-curly-in-string
   const templateString = 'My name is ${firstName} ${lastName}';
   const expected = 'My name is Jon Dough';
   const templatVars = {

package/src/helpers/resizeObserver.tsx

@@ -1,4 +1,4 @@
-import { canUseDOM } from './util';
+import { canUseDOM, debounce } from './util';
 
 /**
  * This function creates a ResizeObserver used to handle resize events for the given containerRef. If ResizeObserver
@@ -83,7 +83,7 @@ export const getResizeObserver = (
         if (useRequestAnimationFrame) {
           window.requestAnimationFrame(() => {
             if (Array.isArray(entries) && entries.length > 0) {
-              handleResize();
+              debounce(handleResize, 100);
             }
           });
           // Avoid wrapping function in requestAnimationFrame if the function is debounced