@patternfly/react-core 4.211.0 → 4.211.3

package/src/components/Tooltip/examples/Tooltip.md

@@ -12,6 +12,7 @@ import './TooltipExamples.css';
 ## Examples
 
 ### Basic
+
 ```js
 import React from 'react';
 import { Tooltip } from '@patternfly/react-core';
@@ -22,12 +23,15 @@ import { Tooltip } from '@patternfly/react-core';
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
     }
   >
-    <span tabIndex="0" style={{ border: '1px dashed' }}>I have a tooltip!</span>
+    <span tabIndex="0" style={{ border: '1px dashed' }}>
+      I have a tooltip!
+    </span>
   </Tooltip>
-</div>
+</div>;
 ```
 
 ### Tooltip react ref
+
 ```js
 import React from 'react';
 import { Tooltip } from '@patternfly/react-core';
@@ -36,35 +40,49 @@ TooltipReactRef = () => {
   const tooltipRef = React.useRef();
   return (
     <div style={{ margin: '100px' }}>
-      <button ref={tooltipRef}>Tooltip attached via react ref</button>
+      <button aria-describedby="tooltip-ref1" ref={tooltipRef}>
+        Tooltip attached via react ref
+      </button>
       <Tooltip
+        id="tooltip-ref1"
         content={
-          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+          </div>
         }
         reference={tooltipRef}
       />
     </div>
   );
-}
+};
 ```
 
 ### Tooltip selector ref
+
 ```js
 import React from 'react';
 import { Tooltip } from '@patternfly/react-core';
 
 <div style={{ margin: '100px' }}>
-  <button id="tooltip-selector">Tooltip attached via selector ref</button>
+  <button aria-describedby="tooltip-ref2" id="tooltip-selector">
+    Tooltip attached via selector ref
+  </button>
   <Tooltip
+    id="tooltip-ref2"
     content={
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
     }
     reference={() => document.getElementById('tooltip-selector')}
   />
-</div>
+</div>;
 ```
 
-### On icon
+### On icon with dynamic content
+
+When the tooltip is used as a wrapper and its content will dynamically update, the `aria` prop should have a value of "none" passed in. This prevents assistive technologies from announcing the tooltip contents more than once. Additionally, the `aria-live` prop should have a value of "polite" passed in, in order for assistive technologies to announce when the tooltip contents gets updated.
+
+When using a React or selector ref with a tooltip that has dynamic content, the `aria` and `aria-live` props do not need to be manually passed in.
+
 ```js
 import React from 'react';
 import { Tooltip, Button } from '@patternfly/react-core';
@@ -77,8 +95,13 @@ IconExample = () => {
   const [content, setContent] = React.useState(copyText);
   return (
     <div style={{ margin: '100px' }}>
-      <Tooltip content={showSuccessContent ? doneCopyText : copyText}>
-        <Button variant="plain" aria-label="Icon with tooltip attached" id="tt-ref" onClick={() => setShowSuccessContent(!showSuccessContent)}>
+      <Tooltip aria="none" aria-live="polite" content={showSuccessContent ? doneCopyText : copyText}>
+        <Button
+          aria-label="Clipboard"
+          variant="plain"
+          id="tt-ref"
+          onClick={() => setShowSuccessContent(!showSuccessContent)}
+        >
           <CopyIcon />
         </Button>
       </Tooltip>
@@ -88,6 +111,7 @@ IconExample = () => {
 ```
 
 ### Options
+
 ```js
 import React from 'react';
 import { Button, Tooltip, Checkbox, Select, SelectOption, TextInput } from '@patternfly/react-core';
@@ -105,26 +129,26 @@ OptionsTooltip = () => {
   const [exitDelayInput, setExitDelayInput] = React.useState(0);
   const [animationDuration, setAnimationDuration] = React.useState(300);
   const tipBoxRef = React.useRef(null);
-  
+
   const scrollToRef = ref => {
     if (ref && ref.current) {
       ref.current.scrollTop = 400;
       ref.current.scrollLeft = 300;
     }
-  }
-  
+  };
+
   React.useEffect(() => {
     scrollToRef(tipBoxRef);
   }, []);
-  
+
   return (
     <>
       <div>
-        <div style={{ border: '1px solid'}}>
+        <div style={{ border: '1px solid' }}>
           <Checkbox
             label="trigger: mouseenter"
             isChecked={trigger.includes('mouseenter')}
-            onChange={(checked) => {
+            onChange={checked => {
               let updatedTrigger;
               checked && (updatedTrigger = trigger.concat('mouseenter'));
               !checked && (updatedTrigger = trigger.filter(t => t !== 'mouseenter'));
@@ -137,7 +161,7 @@ OptionsTooltip = () => {
           <Checkbox
             label="trigger: focus"
             isChecked={trigger.includes('focus')}
-            onChange={(checked) => {
+            onChange={checked => {
               let updatedTrigger;
               checked && (updatedTrigger = trigger.concat('focus'));
               !checked && (updatedTrigger = trigger.filter(t => t !== 'focus'));
@@ -150,7 +174,7 @@ OptionsTooltip = () => {
           <Checkbox
             label="trigger: click"
             isChecked={trigger.includes('click')}
-            onChange={(checked) => {
+            onChange={checked => {
               let updatedTrigger;
               checked && (updatedTrigger = trigger.concat('click'));
               !checked && (updatedTrigger = trigger.filter(t => t !== 'click'));
@@ -163,36 +187,36 @@ OptionsTooltip = () => {
           <Checkbox
             label="trigger: manual"
             isChecked={trigger.includes('manual')}
-            onChange={(checked) => {
+            onChange={checked => {
               let updatedTrigger;
               checked && (updatedTrigger = trigger.concat('manual'));
               !checked && (updatedTrigger = trigger.filter(t => t !== 'manual'));
               setIsVisible(false);
               setTrigger(updatedTrigger);
             }}
-            aria-label="trigger: manual"   
-            id="trigger_manual"         
+            aria-label="trigger: manual"
+            id="trigger_manual"
           />
         </div>
-        <div style={{ border: '1px solid'}}>
+        <div style={{ border: '1px solid' }}>
           <Checkbox
             label="content left-aligned"
             isChecked={contentLeftAligned}
-            onChange={(checked) => setContentLeftAligned(checked)}
+            onChange={checked => setContentLeftAligned(checked)}
             aria-label="content left-aligned"
-            id="content_left_aligned"          
+            id="content_left_aligned"
           />
         </div>
-        <div style={{ border: '1px solid'}}>
+        <div style={{ border: '1px solid' }}>
           <Checkbox
             label="enableFlip"
             isChecked={enableFlip}
-            onChange={(checked) => setEnableFlip(checked)}
-            aria-label="enableFlip"    
-            id="enable_flip"    
+            onChange={checked => setEnableFlip(checked)}
+            aria-label="enableFlip"
+            id="enable_flip"
           />
         </div>
-        <div style={{ border: '1px solid'}}>
+        <div style={{ border: '1px solid' }}>
           position (will flip if enableFlip is true). The 'auto' position requires enableFlip to be set to true.
           <Select
             onToggle={() => setPositionSelectOpen(!positionSelectOpen)}
@@ -219,22 +243,41 @@ OptionsTooltip = () => {
             <SelectOption value="right-end" />
           </Select>
         </div>
-        <div style={{ border: '1px solid'}}>
+        <div style={{ border: '1px solid' }}>
           <Checkbox
             label="isVisible (also set trigger to only manual to programmatically control it)"
             isChecked={isVisible}
-            onChange={(checked) => setIsVisible(checked)}
-            aria-label="isVisible" 
-            id="is_visible"       
+            onChange={checked => setIsVisible(checked)}
+            aria-label="isVisible"
+            id="is_visible"
           />
         </div>
-        <div style={{ border: '1px solid'}}>
-          Entry delay (ms) <TextInput value={entryDelayInput} type="number" onChange={val => setEntryDelayInput(val)} aria-label="entry delay" />
-          Exit delay (ms) <TextInput value={exitDelayInput} type="number" onChange={val => setExitDelayInput(val)} aria-label="exit delay" />
-          Animation duration (ms) <TextInput value={animationDuration} type="number" onChange={val => setAnimationDuration(val)} aria-label="animation duration" />
+        <div style={{ border: '1px solid' }}>
+          Entry delay (ms){' '}
+          <TextInput
+            value={entryDelayInput}
+            type="number"
+            onChange={val => setEntryDelayInput(val)}
+            aria-label="entry delay"
+          />
+          Exit delay (ms) <TextInput
+            value={exitDelayInput}
+            type="number"
+            onChange={val => setExitDelayInput(val)}
+            aria-label="exit delay"
+          />
+          Animation duration (ms){' '}
+          <TextInput
+            value={animationDuration}
+            type="number"
+            onChange={val => setAnimationDuration(val)}
+            aria-label="animation duration"
+          />
         </div>
-        <div style={{ border: '1px solid'}}>
-          flip behavior examples (enableFlip has to be true). "flip" will try to flip the tooltip to the opposite of the starting position. The second option ensures that there are 3 escape positions for every possible starting position (default). This setting is ignored if position prop is set to 'auto'.
+        <div style={{ border: '1px solid' }}>
+          flip behavior examples (enableFlip has to be true). "flip" will try to flip the tooltip to the opposite of the
+          starting position. The second option ensures that there are 3 escape positions for every possible starting
+          position (default). This setting is ignored if position prop is set to 'auto'.
           <Select
             onToggle={() => setFlipSelectOpen(!flipSelectOpen)}
             onSelect={(event, selection) => {
@@ -254,7 +297,9 @@ OptionsTooltip = () => {
       <div id="tooltip-boundary" className="tooltip-box" ref={tipBoxRef}>
         <Tooltip
           content={
-            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
+            <div>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+            </div>
           }
           trigger={trigger.join(' ')}
           enableFlip={enableFlip}
@@ -272,5 +317,5 @@ OptionsTooltip = () => {
       </div>
     </>
   );
-}
+};
 ```

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -47,6 +47,8 @@ Composable menus currently require consumer keyboard handling and use of our und
 
 ### Composable tree view menu
 
+When rendering a menu-like element that does not contain MenuItem components, [Panel](/components/panel) allows more flexible control and customization.
+
 ```ts file="./examples/ComposableTreeViewMenu.tsx"
 ```
 

package/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import {
   MenuToggle,
-  Menu,
-  MenuContent,
-  MenuGroup,
-  MenuList,
+  Panel,
+  PanelMain,
+  PanelMainBody,
+  Title,
   Popper,
   TreeView,
   TreeViewDataItem
@@ -14,6 +14,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
   const toggleRef = React.useRef<HTMLButtonElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
   const menuRef = React.useRef<HTMLDivElement>();
 
   const statusOptions: TreeViewDataItem[] = [
@@ -85,7 +86,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
       customBadgeContent: 0
     }
   ];
-  // Helper functions
+  // Helper functions for tree
   const isChecked = (dataItem: TreeViewDataItem) => checkedItems.some(item => item.id === dataItem.id);
   const areAllDescendantsChecked = (dataItem: TreeViewDataItem) =>
     dataItem.children ? dataItem.children.every(child => areAllDescendantsChecked(child)) : isChecked(dataItem);
@@ -163,18 +164,32 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
     );
   };
 
+  // Controls keys that should open/close the menu
   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' || event.key === 'Tab') {
+      // The escape key when pressed while inside the menu should close the menu and refocus the toggle
+      if (event.key === 'Escape') {
         setIsOpen(!isOpen);
         toggleRef.current.focus();
       }
+
+      // The tab key when pressed while inside the menu and on the contained last tree view should close the menu and refocus the toggle
+      // Shift tab should keep the default behavior to return to a previous tree view
+      if (event.key === 'Tab' && !event.shiftKey) {
+        const treeList = menuRef.current.querySelectorAll('.pf-c-tree-view');
+        if (treeList[treeList.length - 1].contains(event.target as Node)) {
+          event.preventDefault();
+          setIsOpen(!isOpen);
+          toggleRef.current.focus();
+        }
+      }
     }
   };
 
+  // Controls that a click outside the menu while the menu is open should close the menu
   const handleClickOutside = (event: MouseEvent) => {
     if (isOpen && !menuRef.current.contains(event.target as Node)) {
       setIsOpen(false);
@@ -194,7 +209,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
     ev.stopPropagation(); // Stop handleClickOutside from handling
     setTimeout(() => {
       if (menuRef.current) {
-        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
+        const firstElement = menuRef.current.querySelector('li button:not(:disabled)');
         firstElement && (firstElement as HTMLElement).focus();
       }
     }, 0);
@@ -202,39 +217,58 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
   };
 
   const toggle = (
-    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-      {isOpen ? 'Expanded' : 'Collapsed'}
-    </MenuToggle>
+    <div ref={containerRef}>
+      <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+        {isOpen ? 'Expanded' : 'Collapsed'}
+      </MenuToggle>
+    </div>
   );
   const statusMapped = statusOptions.map(mapTree);
   const roleMapped = roleOptions.map(mapTree);
   const menu = (
-    <Menu
+    <Panel
       ref={menuRef}
-      // eslint-disable-next-line no-console
-      onSelect={(_ev, itemId) => console.log('selected', itemId)}
-      style={
-        {
-          '--pf-c-menu--Width': '300px'
-        } as React.CSSProperties
-      }
+      variant="raised"
+      style={{
+        width: '300px'
+      }}
     >
-      <MenuContent>
-        <MenuList>
-          <MenuGroup label="Status">
+      <PanelMain>
+        <section>
+          <PanelMainBody style={{ paddingBottom: 0 }}>
+            <Title headingLevel="h1" size={'md'}>
+              Status
+            </Title>
+          </PanelMainBody>
+          <PanelMainBody style={{ padding: 0 }}>
             <TreeView
               data={statusMapped}
               hasBadges
               hasChecks
               onCheck={(event, item) => onCheck(event, item, 'status')}
             />
-          </MenuGroup>
-          <MenuGroup label="Role">
+          </PanelMainBody>
+        </section>
+        <section>
+          <PanelMainBody style={{ paddingBottom: 0, paddingTop: 0 }}>
+            <Title headingLevel="h1" size={'md'}>
+              Roles
+            </Title>
+          </PanelMainBody>
+          <PanelMainBody style={{ padding: 0 }}>
             <TreeView data={roleMapped} hasBadges hasChecks onCheck={(event, item) => onCheck(event, item, 'role')} />
-          </MenuGroup>
-        </MenuList>
-      </MenuContent>
-    </Menu>
+          </PanelMainBody>
+        </section>
+      </PanelMain>
+    </Panel>
+  );
+  return (
+    <Popper
+      trigger={toggle}
+      popper={menu}
+      isVisible={isOpen}
+      appendTo={containerRef.current}
+      popperMatchesTriggerWidth={false}
+    />
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

package/src/helpers/KeyboardHandler.tsx

@@ -18,6 +18,8 @@ export interface KeyboardHandlerProps {
   validSiblingTags?: string[];
   /** Flag indicating that the tabIndex of the currently focused element and next focused element should be updated, in the case of using a roving tabIndex */
   updateTabIndex?: boolean;
+  /** Flag indicating that next focusable element of a horizontal movement will be this element's sibling */
+  onlyTraverseSiblings?: boolean;
   /** Flag indicating that the included vertical arrow key handling should be ignored */
   noVerticalArrowHandling?: boolean;
   /** Flag indicating that the included horizontal arrow key handling should be ignored */
@@ -176,6 +178,7 @@ export class KeyboardHandler extends React.Component<KeyboardHandlerProps> {
     isActiveElement: (navigableElement: Element) => document.activeElement === navigableElement,
     getFocusableElement: (navigableElement: Element) => navigableElement,
     validSiblingTags: ['BUTTON', 'A'],
+    onlyTraverseSiblings: true,
     updateTabIndex: true,
     noHorizontalArrowHandling: false,
     noVerticalArrowHandling: false,
@@ -212,7 +215,8 @@ export class KeyboardHandler extends React.Component<KeyboardHandlerProps> {
       updateTabIndex,
       validSiblingTags,
       additionalKeyHandler,
-      createNavigableElements
+      createNavigableElements,
+      onlyTraverseSiblings
     } = this.props;
 
     // Pass the event off to be handled by any custom handler
@@ -256,7 +260,8 @@ export class KeyboardHandler extends React.Component<KeyboardHandlerProps> {
       validSiblingTags,
       noVerticalArrowHandling,
       noHorizontalArrowHandling,
-      updateTabIndex
+      updateTabIndex,
+      onlyTraverseSiblings
     );
   };