@patternfly/react-core 5.4.0-prerelease.3 → 5.4.0-prerelease.30

package/src/components/Wizard/examples/WizardFocusOnNextBack.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core';
+
+export const WizardFocusOnNextBack: React.FunctionComponent = () => (
+  <Wizard shouldFocusContent title="Wizard that focuses content on next or back click">
+    <WizardStep name="Step 1" id="wizard-focus-first-step">
+      Step 1 content
+    </WizardStep>
+    <WizardStep name="Step 2" id="wizard-focus-second-step">
+      Step 2 content
+    </WizardStep>
+    <WizardStep name="Review" id="wizard-focus-review-step" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

package/src/components/Wizard/examples/WizardWithCustomFooter.tsx

@@ -40,12 +40,12 @@ const CustomStepTwoFooter = () => {
 
   return (
     <WizardFooterWrapper>
-      <Button variant="primary" onClick={onNext} isLoading={isLoading} isDisabled={isLoading}>
-        Async Next
-      </Button>
       <Button variant="secondary" onClick={goToPrevStep} isDisabled={isLoading}>
         Back
       </Button>
+      <Button variant="primary" onClick={onNext} isLoading={isLoading} isDisabled={isLoading}>
+        Async Next
+      </Button>
       <Button variant="link" onClick={close} isDisabled={isLoading}>
         Cancel
       </Button>

package/src/demos/DescriptionList/DescriptionList.md

@@ -0,0 +1,14 @@
+---
+id: Description list
+section: components
+---
+
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+## Demos
+
+### Basic
+
+```js file='./examples/DescriptionListBasic.tsx' isFullscreen
+```

package/src/demos/DescriptionList/examples/DescriptionListBasic.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  PageSection,
+  PageSectionVariants,
+  Card,
+  CardBody,
+  CardHeader,
+  TextContent,
+  Text,
+  Title,
+  Divider,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+export const DescriptionListBasic: React.FunctionComponent = () => (
+  <DashboardWrapper>
+    <PageSection variant={PageSectionVariants.light}>
+      <TextContent>
+        <Title headingLevel="h1">Projects</Title>
+        <Text component="p">This is a full page demo</Text>
+      </TextContent>
+    </PageSection>
+    <PageSection>
+      <Card>
+        <CardHeader>
+          <Title headingLevel="h2" size="lg">
+            Details
+          </Title>
+        </CardHeader>
+        <Divider />
+        <CardBody>
+          <DescriptionList isAutoFit>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Name</DescriptionListTerm>
+              <DescriptionListDescription>mary-test</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Status</DescriptionListTerm>
+              <DescriptionListDescription>
+                <Flex>
+                  <FlexItem spacer={{ lg: 'spacerSm' }}>
+                    <CheckCircleIcon color="green" />
+                  </FlexItem>
+                  <FlexItem>Active</FlexItem>
+                </Flex>
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Default pull secret</DescriptionListTerm>
+              <DescriptionListDescription>Not configured</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Tolerations</DescriptionListTerm>
+              <DescriptionListDescription>6 Tolerations</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Network Policies</DescriptionListTerm>
+              <DescriptionListDescription>
+                <a href="#">Network Policies</a>
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Display name</DescriptionListTerm>
+              <DescriptionListDescription>mary</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Requester</DescriptionListTerm>
+              <DescriptionListDescription>kube:admin</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Created at:</DescriptionListTerm>
+              <DescriptionListDescription>3 minutes ago</DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        </CardBody>
+      </Card>
+    </PageSection>
+  </DashboardWrapper>
+);

package/src/demos/Masthead.md

@@ -3,24 +3,24 @@ id: Masthead
 section: components
 ---
 
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfIcon from './assets/pf-logo-small.svg';
 import pfLogo from './assets/pf-logo.svg';
-import { Link } from '@reach/router';
 
 ## Demos
 
-### Masthead with utilities and user dropdown menu
+### Utilities and user dropdown menu
 
 Many mastheads contain utilities which collapse into a dropdown at smaller viewport widths. These utilities could include a notification badge to open and close a notification drawer, a link to app or user settings, a help icon which could launch quick starts or link to other resources, and many other utilities. In this demo, the notification badge does not collapse down into the mobile menu so that it is always visible even at narrower viewport widths.
 
 ```ts file='./examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx' isFullscreen
 
 ```
+### Horizontal nav
+```ts file='./examples/Masthead/MastheadWithHorizontalNav.tsx' isFullscreen
+
+```

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -0,0 +1,322 @@
+import React from 'react';
+import {
+  Avatar,
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  Gallery,
+  GalleryItem,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  MenuToggle,
+  MenuToggleElement,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionVariants,
+  SkipToContent,
+  Text,
+  TextContent,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+
+interface NavOnSelectProps {
+  groupId: number | string;
+  itemId: number | string;
+  to: string;
+}
+
+export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
+    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
+  };
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onKebabDropdownToggle = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+  };
+
+  const onKebabDropdownSelect = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+  };
+
+  const onFullKebabDropdownToggle = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+  };
+
+  const onFullKebabDropdownSelect = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+  };
+
+  const handleMenuKeys = (event: KeyboardEvent) => {
+    if (!isOpen) {
+      return;
+    }
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
+      if (event.key === 'Escape') {
+        setIsOpen(!isOpen);
+        toggleRef.current?.focus();
+      }
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen, menuRef]);
+
+  const dashboardBreadcrumb = (
+    <Breadcrumb>
+      <BreadcrumbItem>Section home</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#" isActive>
+        Section landing
+      </BreadcrumbItem>
+    </Breadcrumb>
+  );
+
+  const kebabDropdownItems = (
+    <>
+      <DropdownItem key="settings">
+        <CogIcon /> Settings
+      </DropdownItem>
+      <DropdownItem key="help">
+        <HelpIcon /> Help
+      </DropdownItem>
+    </>
+  );
+  const userDropdownItems = [
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
+  ];
+
+  const PageHorizontalNav = () => (
+    <ToolbarItem isOverflowContainer>
+      <Nav
+        id="page-layout-horizontal-nav-horizontal-nav"
+        onSelect={onNavSelect}
+        aria-label="Global"
+        variant="horizontal"
+      >
+        <NavList>
+          <NavItem itemId={0} isActive={activeItem === 0} to="#horizontal-1">
+            Horizontal nav item 1
+          </NavItem>
+          <NavItem itemId={1} isActive={activeItem === 1} to="#horizontal-2">
+            Horizontal nav item 2
+          </NavItem>
+          <NavItem itemId={2} isActive={activeItem === 2} to="#horizontal-3">
+            Horizontal nav item 3
+          </NavItem>
+          <NavItem itemId={3} isActive={activeItem === 3} to="#horizontal-4">
+            Horizontal nav item 4
+          </NavItem>
+          <NavItem itemId={4} isActive={activeItem === 4} to="#horizontal-5">
+            Horizontal nav item 5
+          </NavItem>
+          <NavItem itemId={5} isActive={activeItem === 4} to="#horizontal-6">
+            Horizontal nav item 6
+          </NavItem>
+          <NavItem itemId={6} isActive={activeItem === 4} to="#horizontal-7">
+            Horizontal nav item 7
+          </NavItem>
+        </NavList>
+      </Nav>
+    </ToolbarItem>
+  );
+
+  const headerToolbar = (
+    <Toolbar id="toolbar" isFullHeight>
+      <ToolbarContent>
+        <PageHorizontalNav />
+        <ToolbarGroup
+          variant="icon-button-group"
+          align={{ default: 'alignRight' }}
+          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+        >
+          <ToolbarItem>
+            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+          </ToolbarItem>
+          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+            <ToolbarItem>
+              <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+            <Dropdown
+              isOpen={isKebabDropdownOpen}
+              onSelect={onKebabDropdownSelect}
+              onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onKebabDropdownToggle}
+                  isExpanded={isKebabDropdownOpen}
+                  variant="plain"
+                  aria-label="Settings and help"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>{kebabDropdownItems}</DropdownList>
+            </Dropdown>
+          </ToolbarItem>
+          <ToolbarItem visibility={{ md: 'hidden' }}>
+            <Dropdown
+              isOpen={isFullKebabDropdownOpen}
+              onSelect={onFullKebabDropdownSelect}
+              onOpenChange={(isOpen: boolean) => setIsFullKebabDropdownOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onFullKebabDropdownToggle}
+                  isExpanded={isFullKebabDropdownOpen}
+                  variant="plain"
+                  aria-label="Toolbar menu"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+            >
+              <DropdownGroup key="group 2" aria-label="User actions">
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </DropdownGroup>
+              <Divider />
+              <DropdownList>{kebabDropdownItems}</DropdownList>
+            </Dropdown>
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+          <Dropdown
+            isOpen={isDropdownOpen}
+            onSelect={onDropdownSelect}
+            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+            popperProps={{ position: 'right' }}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onDropdownToggle}
+                isFullHeight
+                isExpanded={isDropdownOpen}
+                icon={<Avatar src={imgAvatar} alt="" />}
+              >
+                Ned Username
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>{userDropdownItems}</DropdownList>
+          </Dropdown>
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadBrand>
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const mainContainerId = 'main-content-page-layout-tertiary-nav';
+
+  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+
+  return (
+    <Page
+      header={masthead}
+      isManagedSidebar
+      skipToContent={pageSkipToContent}
+      breadcrumb={dashboardBreadcrumb}
+      mainContainerId={mainContainerId}
+      isTertiaryNavWidthLimited
+      isBreadcrumbWidthLimited
+      isTertiaryNavGrouped
+      isBreadcrumbGrouped
+      additionalGroupedContent={
+        <PageSection variant={PageSectionVariants.light}>
+          <TextContent>
+            <Text component="h1">Main title</Text>
+            <Text component="p">This is a full page demo.</Text>
+          </TextContent>
+        </PageSection>
+      }
+    >
+      <PageSection>
+        <Gallery hasGutter>
+          {Array.from({ length: 10 }).map((_value, index) => (
+            <GalleryItem key={index}>
+              <Card>
+                <CardBody>This is a card</CardBody>
+              </Card>
+            </GalleryItem>
+          ))}
+        </Gallery>
+      </PageSection>
+    </Page>
+  );
+};

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx

@@ -1,14 +1,5 @@
 import React from 'react';
-import {
-  Form,
-  FormGroup,
-  FormHelperText,
-  HelperText,
-  Popover,
-  HelperTextItem,
-  TextInput
-} from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -89,20 +80,6 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     }
   };
 
-  const iconPopover = (
-    <Popover headerContent={<div>Password Requirements</div>} bodyContent={<div>Password rules</div>}>
-      <button
-        type="button"
-        aria-label="More info for name field"
-        onClick={(e) => e.preventDefault()}
-        aria-describedby="password-field"
-        className="pf-v5-c-form__group-label-help"
-      >
-        <HelpIcon />
-      </button>
-    </Popover>
-  );
-
   const passStrLabel = (
     <HelperText>
       <HelperTextItem variant={passStrength.variant} icon={passStrength.icon}>
@@ -115,7 +92,6 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     <Form>
       <FormGroup
         label="Password"
-        labelIcon={iconPopover}
         isRequired
         fieldId="password-field"
         {...(ruleLength === 'success' &&

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncher.md

@@ -12,6 +12,7 @@ import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/depr
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import { Link } from '@reach/router';
 import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
+import c_app_launcher__menu_item_Color from '@patternfly/react-tokens/dist/esm/c_app_launcher__menu_item_Color';
 
 Note: Application launcher is built on dropdown, for extended API go to [dropdown](/components/menus/dropdown) documentation.
 To add a tooltip, use the `tooltip` prop and optionally add more tooltip props by using `tooltipProps`. For more tooltip information go to [tooltip](/components/tooltip).

package/src/deprecated/components/Dropdown/DropdownMenu.tsx

@@ -67,7 +67,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps> {
       );
       const focusTarget = focusTargetCollection && focusTargetCollection[0];
       if (focusTarget && focusTarget.focus) {
-        setTimeout(() => focusTarget.focus());
+        setTimeout(() => focusTarget.focus(), 5);
       }
     }
   }
@@ -79,7 +79,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps> {
   static validToggleClasses = [styles.dropdownToggle, styles.dropdownToggleButton] as string[];
   static focusFirstRef = (refCollection: HTMLElement[]) => {
     if (refCollection && refCollection[0] && refCollection[0].focus) {
-      setTimeout(() => refCollection[0].focus());
+      setTimeout(() => refCollection[0].focus(), 5);
     }
   };
 

package/src/deprecated/components/Dropdown/InternalDropdownItem.tsx

@@ -93,7 +93,7 @@ class InternalDropdownItem extends React.Component<InternalDropdownItemProps> {
       isDisabled,
       role === 'separator'
     );
-    autoFocus && setTimeout(() => customRef.focus());
+    autoFocus && setTimeout(() => customRef.focus(), 5);
   }
 
   componentDidUpdate() {

package/src/deprecated/components/OptionsMenu/OptionsMenuItemGroup.tsx

@@ -11,7 +11,7 @@ export interface OptionsMenuItemGroupProps extends React.HTMLProps<HTMLElement>
   /** Provides an accessible name for the options menu items group */
   'aria-label'?: string;
   /** Optional title for the options menu items group */
-  groupTitle?: string | React.ReactNode;
+  groupTitle?: React.ReactNode;
   /** Flag indicating this options menu items group will be followed by a horizontal separator */
   hasSeparator?: boolean;
 }

package/src/deprecated/components/Select/Select.tsx

@@ -86,7 +86,7 @@ export interface SelectProps
   /** Text displayed in typeahead select to prompt the user to create an item */
   createText?: string;
   /** Title text of Select */
-  placeholderText?: string | React.ReactNode;
+  placeholderText?: React.ReactNode;
   /** Text to display in typeahead select when no results are found */
   noResultsFoundText?: string;
   /** Array of selected items for multi select variants. */

package/src/helpers/Popper/Popper.tsx

@@ -221,6 +221,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   const [popperContent, setPopperContent] = React.useState(null);
   const [ready, setReady] = React.useState(false);
   const [opacity, setOpacity] = React.useState(0);
+  const [display, setDisplay] = React.useState('none');
   const [internalIsVisible, setInternalIsVisible] = React.useState(isVisible);
   const transitionTimerRef = React.useRef(null);
   const showTimerRef = React.useRef(null);
@@ -469,11 +470,18 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     prevExitDelayRef.current = exitDelay;
   }, [exitDelay]);
 
+  React.useEffect(() => {
+    if (display !== 'none') {
+      forceUpdate && forceUpdate();
+    }
+  }, [display]);
+
   const show = () => {
     onShow();
     clearTimeouts([transitionTimerRef, hideTimerRef]);
     showTimerRef.current = setTimeout(() => {
       setInternalIsVisible(true);
+      setDisplay('');
       setOpacity(1);
       onShown();
     }, entryDelay);
@@ -488,6 +496,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
         setInternalIsVisible(false);
         onHidden();
       }, animationDuration);
+      setDisplay('none');
     }, exitDelay);
   };
 
@@ -516,6 +525,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       ...popperStyles.popper,
       zIndex,
       opacity,
+      display,
       transition: getOpacityTransition(animationDuration)
     },
     ...attributes.popper

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

package/src/next/components/Modal/ModalBoxTitle.tsx

@@ -57,7 +57,12 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
     <h1
       id={id}
       ref={h1}
-      className={css(modalStyles.modalBoxTitle, titleIconVariant && modalStyles.modifiers.icon, className)}
+      className={css(
+        modalStyles.modalBoxTitle,
+        titleIconVariant && modalStyles.modifiers.icon,
+        isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant],
+        className
+      )}
       {...props}
     >
       {titleIconVariant && (

package/src/next/components/Modal/ModalHeader.tsx

@@ -54,8 +54,6 @@ export const ModalHeader: React.FunctionComponent<ModalHeaderProps> = ({
     </>
   );
 
-  // TODO: apply variant modifier for icon styling.  Core fix needed first.  similar to this:
-  // className={css(className, isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant])}
   return (
     <header className={css(styles.modalBoxHeader, help && styles.modifiers.help, className)} {...props}>
       {help && (