@patternfly/react-core 6.1.0-prerelease.8 → 6.1.0

package/src/demos/examples/Nav/NavGrouped.tsx

@@ -67,7 +67,21 @@ export const NavGrouped: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-group-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <>

package/src/demos/examples/Nav/NavHorizontal.tsx

@@ -204,7 +204,21 @@ export const NavHorizontal: React.FunctionComponent = () => {
   );
 
   const pageId = 'main-content-page-layout-horizontal-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <React.Fragment>

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx

@@ -258,7 +258,21 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
   );
 
   const pageId = 'main-content-page-layout-horizontal-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <React.Fragment>

package/src/demos/examples/Nav/NavManual.tsx

@@ -234,7 +234,21 @@ export const NavManual: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-manual-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <React.Fragment>

package/src/demos/examples/Nav/NavWithSubnav.tsx

@@ -69,7 +69,21 @@ export const NavWithSubnav: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-default-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   const SubNav = (
     <Nav onSelect={onSubNavSelect} aria-label="Subnav" variant="horizontal-subnav">

package/src/demos/examples/Page/PageContextSelector.tsx

@@ -284,7 +284,20 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -251,7 +251,20 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -251,7 +251,20 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -243,7 +243,20 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Wizard/InPageWithDrawer.tsx

@@ -104,7 +104,21 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
   );
 
   const pageId = 'main-content-page-layout-default-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   const PageBreadcrumb = (
     <Breadcrumb>

package/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

@@ -105,7 +105,20 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
 
   const pageId = 'main-content-page-layout-default-nav';
 
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   const PageBreadcrumb = (
     <Breadcrumb>

package/src/helpers/KeyboardHandler.tsx

@@ -176,6 +176,33 @@ export const setTabIndex = (options: HTMLElement[]) => {
   }
 };
 
+/**
+ * This function is used in Dropdown, Select and MenuContainer as a default toggle keydown behavior. When the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key.
+ *
+ * @param event Event triggered by the keyboard
+ * @param menuRef Menu reference
+ */
+export const onToggleArrowKeydownDefault = (event: KeyboardEvent, menuRef: React.RefObject<HTMLDivElement>) => {
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+    return;
+  }
+
+  event.preventDefault();
+
+  const listItems = Array.from(menuRef.current?.querySelectorAll('li'));
+  const focusableElements = listItems
+    .map((li) => li.querySelector('button:not(:disabled),input:not(:disabled),a:not([aria-disabled="true"])'))
+    .filter((el) => el !== null);
+
+  let focusableElement: Element;
+  if (event.key === 'ArrowDown') {
+    focusableElement = focusableElements[0];
+  } else {
+    focusableElement = focusableElements[focusableElements.length - 1];
+  }
+  focusableElement && (focusableElement as HTMLElement).focus();
+};
+
 class KeyboardHandler extends React.Component<KeyboardHandlerProps> {
   static displayName = 'KeyboardHandler';
   static defaultProps: KeyboardHandlerProps = {

package/src/demos/examples/DashboardWrapper.js

@@ -1,126 +0,0 @@
-import React from 'react';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  Content,
-  Nav,
-  NavItem,
-  NavList,
-  Page,
-  PageSection,
-  PageSidebar,
-  PageSidebarBody,
-  SkipToContent
-} from '@patternfly/react-core';
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
-
-export const DashboardBreadcrumb = (
-  <Breadcrumb>
-    <BreadcrumbItem>Section home</BreadcrumbItem>
-    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-    <BreadcrumbItem to="#" isActive>
-      Section landing
-    </BreadcrumbItem>
-  </Breadcrumb>
-);
-
-export const PageTemplateTitle = (
-  <PageSection>
-    <Content>
-      <h1>Main title</h1>
-      <p>This is a full page demo.</p>
-    </Content>
-  </PageSection>
-);
-
-export default class DashboardWrapper extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: 1
-    };
-
-    this.onNavSelect = (_event, result) => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-  }
-
-  render() {
-    const { activeItem } = this.state;
-    const {
-      children,
-      mainContainerId,
-      breadcrumb,
-      masthead,
-      sidebar,
-      sidebarNavOpen,
-      onPageResize = () => {},
-      hasNoBreadcrumb,
-      notificationDrawer,
-      isNotificationDrawerExpanded,
-      hasPageTemplateTitle,
-      ...pageProps
-    } = this.props;
-
-    let renderedBreadcrumb;
-    if (!hasNoBreadcrumb) {
-      renderedBreadcrumb = breadcrumb !== undefined ? breadcrumb : DashboardBreadcrumb;
-    }
-
-    const PageNav = (
-      <Nav onSelect={this.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 isSidebarOpen={sidebarNavOpen || false}>
-        <PageSidebarBody>{PageNav}</PageSidebarBody>
-      </PageSidebar>
-    );
-    const PageSkipToContent = (
-      <SkipToContent href={`#${mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}`}>
-        Skip to content
-      </SkipToContent>
-    );
-
-    return (
-      <Page
-        masthead={masthead !== undefined ? masthead : <DashboardHeader />}
-        sidebar={sidebar !== undefined ? sidebar : _sidebar}
-        isManagedSidebar
-        skipToContent={PageSkipToContent}
-        breadcrumb={renderedBreadcrumb}
-        mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
-        notificationDrawer={notificationDrawer}
-        isNotificationDrawerExpanded={isNotificationDrawerExpanded}
-        {...(typeof onPageResize === 'function' && {
-          onPageResize: (event, resizeObject) => onPageResize(event, resizeObject)
-        })}
-        {...pageProps}
-      >
-        {hasPageTemplateTitle && PageTemplateTitle}
-        {children}
-      </Page>
-    );
-  }
-}