@patternfly/react-core 4.243.1 → 4.244.0

package/src/demos/Masthead.md

@@ -3,202 +3,18 @@ id: Masthead
 section: components
 ---
 
-import imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-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/Avatar/examples/avatarImg.svg';
 
 ## Demos
 
-### Basic
+### Masthead with utilities and user dropdown menu
 
-```ts
-import React from 'react';
-import {
-  Masthead,
-  MastheadToggle,
-  MastheadMain,
-  MastheadBrand,
-  MastheadContent,
-  Button,
-  Toolbar,
-  ToolbarContent,
-  ToolbarGroup,
-  ToolbarItem,
-  ContextSelector,
-  ContextSelectorItem,
-  Dropdown,
-  DropdownSeparator,
-  DropdownToggle,
-  KebabToggle,
-  DropdownItem,
-  Brand
-} from '@patternfly/react-core';
-import imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+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.
 
-class BasicMasthead extends React.Component {
-  items = [
-    'My Project',
-    'OpenShift Cluster',
-    'Production Ansible',
-    'AWS',
-    'Azure',
-    'My Project 2',
-    'OpenShift Cluster',
-    'Production Ansible 2',
-    'AWS 2',
-    'Azure 2'
-  ];
-
-  state = {
-    isOpen: false,
-    isDropdownOpen: false,
-    isKebabOpen: false,
-    selected: this.items[0],
-    searchValue: '',
-    filteredItems: this.items
-  };
-
-  onToggle = (event: any, isOpen: boolean) => {
-    this.setState({
-      isOpen
-    });
-  };
-
-  onDropdownToggle = (isDropdownOpen: boolean) => {
-    this.setState({
-      isDropdownOpen
-    });
-  };
-
-  onKebabToggle = (isKebabOpen: boolean) => {
-    this.setState({
-      isKebabOpen
-    });
-  };
-
-  onSelect = (event: any, value: string) => {
-    this.setState({
-      selected: value,
-      isOpen: !this.state.isOpen
-    });
-  };
-
-  onDropdownSelect = () => {
-    this.setState({
-      isDropdownOpen: !this.state.isDropdownOpen
-    });
-  };
-
-  onKebabSelect = () => {
-    this.setState({
-      isKebabOpen: !this.state.isKebabOpen
-    });
-  };
-
-  onSearchInputChange = (value: string) => {
-    this.setState({ searchValue: value });
-  };
-
-  onSearchButtonClick = () => {
-    const filtered =
-      this.state.searchValue === ''
-        ? this.items
-        : this.items.filter(str => str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1);
-
-    this.setState({ filteredItems: filtered || [] });
-  };
-
-  render() {
-    const { isOpen, isDropdownOpen, isKebabOpen, selected, searchValue, filteredItems } = this.state;
-
-    const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled href="www.google.com">
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem
-        key="disabled action"
-        isAriaDisabled
-        component="button"
-        tooltip="Tooltip for disabled item"
-        tooltipProps={{ position: 'top' }}
-      >
-        Disabled Action
-      </DropdownItem>,
-      <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
-        Separated Action
-      </DropdownItem>
-    ];
-
-    return (
-      <Masthead id="basic-demo">
-        <MastheadToggle>
-          <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-            <BarsIcon />
-          </Button>
-        </MastheadToggle>
-        <MastheadMain>
-          <MastheadBrand>
-            <Brand src={imgBrand} alt="Patternfly logo" />
-          </MastheadBrand>
-        </MastheadMain>
-        <MastheadContent>
-          <Toolbar id="toolbar" isFullHeight isStatic>
-            <ToolbarContent>
-              <ToolbarItem>
-                <ContextSelector
-                  toggleText={selected}
-                  onSearchInputChange={this.onSearchInputChange}
-                  isOpen={isOpen}
-                  searchInputValue={searchValue}
-                  onToggle={this.onToggle}
-                  onSelect={this.onSelect}
-                  onSearchButtonClick={this.onSearchButtonClick}
-                  screenReaderLabel="Selected Project:"
-                  isFullHeight
-                >
-                  {filteredItems.map((item, index) => (
-                    <ContextSelectorItem key={index}>{item}</ContextSelectorItem>
-                  ))}
-                </ContextSelector>
-              </ToolbarItem>
-              <ToolbarGroup alignment={{ default: 'alignRight' }}>
-                <ToolbarItem visibility={{ default: 'hidden', lg: 'visible' }}>
-                  <Dropdown
-                    onSelect={this.onDropdownSelect}
-                    toggle={
-                      <DropdownToggle id="toggle-id" onToggle={this.onDropdownToggle} toggleIndicator={CaretDownIcon}>
-                        Dropdown
-                      </DropdownToggle>
-                    }
-                    isOpen={isDropdownOpen}
-                    dropdownItems={dropdownItems}
-                    isFullHeight
-                  />
-                </ToolbarItem>
-                <ToolbarItem>
-                  <Dropdown
-                    onSelect={this.onKebabSelect}
-                    position="right"
-                    toggle={<KebabToggle onToggle={this.onKebabToggle} id="toggle-id-kebab" />}
-                    isOpen={isKebabOpen}
-                    isPlain
-                    dropdownItems={dropdownItems}
-                  />
-                </ToolbarItem>
-              </ToolbarGroup>
-            </ToolbarContent>
-          </Toolbar>
-        </MastheadContent>
-      </Masthead>
-    );
-  }
-}
+```ts file='./examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx' isFullscreen
 ```

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -246,6 +246,7 @@ class BasicNotificationDrawer extends React.Component {
                   variant={this.getNumberUnread() === 0 ? 'read' : 'unread'}
                   onClick={this.onCloseNotificationDrawer}
                   aria-label="Notifications"
+                  isExpanded={isDrawerExpanded}
                 >
                   <BellIcon />
                 </NotificationBadge>
@@ -812,6 +813,7 @@ class GroupedNotificationDrawer extends React.Component {
                   variant={this.getNumberUnread() === 0 ? 'read' : 'unread'}
                   onClick={this.onCloseNotificationDrawer}
                   aria-label="Notifications"
+                  isExpanded={isDrawerExpanded}
                 >
                   <BellIcon />
                 </NotificationBadge>

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

@@ -0,0 +1,305 @@
+import React from 'react';
+import {
+  ApplicationLauncher,
+  ApplicationLauncherItem,
+  Avatar,
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownToggle,
+  Gallery,
+  GalleryItem,
+  KebabToggle,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  MastheadToggle,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionVariants,
+  PageSidebar,
+  PageToggleButton,
+  SkipToContent,
+  Text,
+  TextContent,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-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/Avatar/examples/avatarImg.svg';
+
+interface NavOnSelectProps {
+  groupId: number | string;
+  itemId: number | string;
+  to: string;
+  event: React.FormEvent<HTMLInputElement>;
+}
+
+export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent = () => {
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+  const [isAppLauncherOpen, setIsAppLauncherOpen] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState(1);
+
+  const onNavSelect = (selectedItem: NavOnSelectProps) => {
+    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
+  };
+
+  const onDropdownToggle = (isOpen: boolean) => {
+    setIsDropdownOpen(isOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onKebabDropdownToggle = (isOpen: boolean) => {
+    setIsKebabDropdownOpen(isOpen);
+  };
+
+  const onKebabDropdownSelect = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+  };
+
+  const onFullKebabDropdownToggle = (isOpen: boolean) => {
+    setIsFullKebabDropdownOpen(isOpen);
+  };
+
+  const onFullKebabDropdownSelect = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+  };
+
+  const onAppLauncherToggle = (isOpen: boolean) => {
+    setIsAppLauncherOpen(isOpen);
+  };
+
+  const onAppLauncherSelect = () => {
+    setIsAppLauncherOpen(!isAppLauncherOpen);
+  };
+
+  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 fullKebabDropdownItems = [
+    <DropdownGroup key="group 2">
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user" component="button">
+        User management
+      </DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </DropdownGroup>,
+    <Divider key="divider" />,
+    <DropdownItem key="settings">
+      <CogIcon /> Settings
+    </DropdownItem>,
+    <DropdownItem key="help">
+      <HelpIcon /> Help
+    </DropdownItem>
+  ];
+
+  const userDropdownItems = [
+    <DropdownGroup key="group 2">
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user" component="button">
+        User management
+      </DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </DropdownGroup>
+  ];
+
+  const appLauncherItems = [
+    <ApplicationLauncherItem key="application_1a" href="#">
+      Application 1 (anchor link)
+    </ApplicationLauncherItem>,
+    <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
+      Application 2 (button with onClick)
+    </ApplicationLauncherItem>
+  ];
+
+  const headerToolbar = (
+    <Toolbar id="toolbar" isFullHeight isStatic>
+      <ToolbarContent>
+        <ToolbarGroup
+          variant="icon-button-group"
+          alignment={{ 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 visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>
+              <ApplicationLauncher
+                onSelect={onAppLauncherSelect}
+                onToggle={onAppLauncherToggle}
+                isOpen={isAppLauncherOpen}
+                items={appLauncherItems}
+              />
+            </ToolbarItem>
+            <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
+              isPlain
+              position="right"
+              onSelect={onKebabDropdownSelect}
+              toggle={<KebabToggle onToggle={onKebabDropdownToggle} />}
+              isOpen={isKebabDropdownOpen}
+              dropdownItems={kebabDropdownItems}
+            />
+          </ToolbarItem>
+          <ToolbarItem visibility={{ md: 'hidden' }}>
+            <Dropdown
+              isPlain
+              position="right"
+              onSelect={onFullKebabDropdownSelect}
+              toggle={<KebabToggle onToggle={onFullKebabDropdownToggle} />}
+              isOpen={isFullKebabDropdownOpen}
+              dropdownItems={fullKebabDropdownItems}
+            />
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+          <Dropdown
+            isFullHeight
+            onSelect={onDropdownSelect}
+            isOpen={isDropdownOpen}
+            toggle={
+              <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={onDropdownToggle}>
+                Ned Username
+              </DropdownToggle>
+            }
+            dropdownItems={userDropdownItems}
+          />
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label="Global navigation">
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand>
+          <Brand
+            widths={{ default: '180px', md: '180px', '2xl': '220px' }}
+            src="/assets/images/logo__pf--reverse--base.png"
+            alt="Fallback patternFly default logo"
+          >
+            <source media="(min-width: 768px)" srcSet="/assets/images/logo__pf--reverse-on-md.svg" />
+            <source srcSet="/assets/images/logo__pf--reverse--base.svg" />
+          </Brand>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const pageNav = (
+    <Nav onSelect={onNavSelect} aria-label="Nav">
+      <NavList>
+        <NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
+          System panel
+        </NavItem>
+        <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
+          Policy
+        </NavItem>
+        <NavItem itemId={2} isActive={activeItem === 2} to="#auth">
+          Authentication
+        </NavItem>
+        <NavItem itemId={3} isActive={activeItem === 3} to="#network">
+          Network services
+        </NavItem>
+        <NavItem itemId={4} isActive={activeItem === 4} to="#server">
+          Server
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+
+  const sidebar = <PageSidebar nav={pageNav} />;
+
+  const mainContainerId = 'main-content-page-layout-tertiary-nav';
+
+  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+
+  return (
+    <Page
+      header={masthead}
+      sidebar={sidebar}
+      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.apply(0, Array(10)).map((x, i) => (
+            <GalleryItem key={i}>
+              <Card>
+                <CardBody>This is a card</CardBody>
+              </Card>
+            </GalleryItem>
+          ))}
+        </Gallery>
+      </PageSection>
+    </Page>
+  );
+};

package/src/helpers/Popper/Popper.tsx

@@ -190,14 +190,14 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       }
     }
   }, [isVisible, popperRef]);
-  const addEventListener = (listener: any, element: Document | HTMLElement, event: string) => {
+  const addEventListener = (listener: any, element: Document | HTMLElement, event: string, capture = false) => {
     if (listener && element) {
-      element.addEventListener(event, listener);
+      element.addEventListener(event, listener, { capture });
     }
   };
-  const removeEventListener = (listener: any, element: Document | HTMLElement, event: string) => {
+  const removeEventListener = (listener: any, element: Document | HTMLElement, event: string, capture = false) => {
     if (listener && element) {
-      element.removeEventListener(event, listener);
+      element.removeEventListener(event, listener, { capture });
     }
   };
 
@@ -211,8 +211,8 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     addEventListener(onPopperClick, popperElement, 'click');
     addEventListener(onPopperMouseEnter, popperElement, 'mouseenter');
     addEventListener(onPopperMouseLeave, popperElement, 'mouseleave');
-    onDocumentClick && addEventListener(onDocumentClickCallback, document, 'click');
-    addEventListener(onDocumentKeyDown, document, 'keydown');
+    onDocumentClick && addEventListener(onDocumentClickCallback, document, 'click', true);
+    addEventListener(onDocumentKeyDown, document, 'keydown', true);
 
     // Trigger a Popper update when content changes.
     const observer = new MutationObserver(() => {
@@ -230,8 +230,8 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       removeEventListener(onPopperClick, popperElement, 'click');
       removeEventListener(onPopperMouseEnter, popperElement, 'mouseenter');
       removeEventListener(onPopperMouseLeave, popperElement, 'mouseleave');
-      onDocumentClick && removeEventListener(onDocumentClickCallback, document, 'click');
-      removeEventListener(onDocumentKeyDown, document, 'keydown');
+      onDocumentClick && removeEventListener(onDocumentClickCallback, document, 'click', true);
+      removeEventListener(onDocumentKeyDown, document, 'keydown', true);
       observer.disconnect();
     };
   }, [