@patternfly/react-core 4.219.1 → 4.220.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.219.1",
+  "version": "4.220.1",
   "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",
@@ -34,10 +34,10 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.70.1",
-    "@patternfly/react-styles": "^4.69.1",
-    "@patternfly/react-tokens": "^4.71.1",
-    "focus-trap": "6.2.2",
+    "@patternfly/react-icons": "^4.71.1",
+    "@patternfly/react-styles": "^4.70.1",
+    "@patternfly/react-tokens": "^4.72.1",
+    "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "7a00f2e2733a593e840464c786f7096e004d02f1"
+  "gitHead": "5e656c560b00e485a3a5a8d6e97c5677624a13ed"
 }

package/src/components/AboutModal/AboutModalContainer.tsx

@@ -63,7 +63,7 @@ export const AboutModalContainer: React.FunctionComponent<AboutModalContainerPro
     <Backdrop>
       <FocusTrap
         active={!disableFocusTrap}
-        focusTrapOptions={{ clickOutsideDeactivates: true }}
+        focusTrapOptions={{ clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } }}
         className={css(styles.bullseye)}
       >
         <AboutModalBox

package/src/components/ContextSelector/ContextSelector.tsx

@@ -143,7 +143,10 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
         {...(isFlipEnabled && { style: { position: 'revert' } })}
       >
         {isOpen && (
-          <FocusTrap active={!disableFocusTrap} focusTrapOptions={{ clickOutsideDeactivates: true }}>
+          <FocusTrap
+            active={!disableFocusTrap}
+            focusTrapOptions={{ clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } }}
+          >
             <div className={css(styles.contextSelectorMenuSearch)}>
               <InputGroup>
                 <TextInput

package/src/components/Modal/ModalContent.tsx

@@ -185,7 +185,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     <Backdrop>
       <FocusTrap
         active={!disableFocusTrap}
-        focusTrapOptions={{ clickOutsideDeactivates: true }}
+        focusTrapOptions={{ clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } }}
         className={css(bullsEyeStyles.bullseye)}
       >
         {modalBox}

package/src/components/Popover/Popover.tsx

@@ -387,6 +387,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
       focusTrapOptions={{
         returnFocusOnDeactivate: true,
         clickOutsideDeactivates: true,
+        tabbableOptions: { displayCheck: 'none' },
         fallbackFocus: () => {
           // If the popover's trigger is focused but scrolled out of view,
           // FocusTrap will throw an error when the Enter button is used on the trigger.

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

@@ -10,6 +10,7 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
   const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
   const toggleRef = React.useRef<HTMLButtonElement>();
   const menuRef = React.useRef<HTMLDivElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (isOpen && menuRef.current.contains(event.target as Node)) {
@@ -118,5 +119,15 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+  return (
+    <div ref={containerRef}>
+      <Popper
+        trigger={toggle}
+        popper={menu}
+        isVisible={isOpen}
+        appendTo={containerRef.current}
+        popperMatchesTriggerWidth={false}
+      />
+    </div>
+  );
 };

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

@@ -62,6 +62,7 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
   const menuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
   const menuFooterBtnRef = React.useRef<HTMLButtonElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
@@ -198,5 +199,15 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
       </MenuFooter>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+  return (
+    <div ref={containerRef}>
+      <Popper
+        trigger={toggle}
+        popper={menu}
+        appendTo={containerRef.current}
+        isVisible={isOpen}
+        popperMatchesTriggerWidth={false}
+      />
+    </div>
+  );
 };

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

@@ -3,9 +3,10 @@ import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patt
 
 export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<number>(0);
   const toggleRef = React.useRef<HTMLButtonElement>();
   const menuRef = React.useRef<HTMLDivElement>();
-  const [selected, setSelected] = React.useState<number>(0);
+  const containerRef = React.useRef<HTMLDivElement>();
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
@@ -109,5 +110,15 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+  return (
+    <div ref={containerRef}>
+      <Popper
+        trigger={toggle}
+        popper={menu}
+        appendTo={containerRef.current}
+        isVisible={isOpen}
+        popperMatchesTriggerWidth={false}
+      />
+    </div>
+  );
 };

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

@@ -26,6 +26,7 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
   const [menuHeights, setMenuHeights] = React.useState<MenuHeightsType>({});
   const toggleRef = React.useRef<HTMLButtonElement>();
   const menuRef = React.useRef<HTMLDivElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (isOpen && menuRef.current.contains(event.target as Node)) {
@@ -242,5 +243,15 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+  return (
+    <div ref={containerRef}>
+      <Popper
+        trigger={toggle}
+        popper={menu}
+        appendTo={containerRef.current}
+        isVisible={isOpen}
+        popperMatchesTriggerWidth={false}
+      />
+    </div>
+  );
 };

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

@@ -23,6 +23,7 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
   const [toggleSelected, setToggleSelected] = React.useState<string>('basic');
   const menuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
 
   const handleToggleSwitch = (selected: boolean, e: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
     setToggleSelected(e.currentTarget.id);
@@ -224,12 +225,15 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
         />
       </ToggleGroup>
       <br />
-      <Popper
-        trigger={buildToggle()}
-        popper={menu}
-        isVisible={isOpen}
-        popperMatchesTriggerWidth={['image', 'checkbox'].includes(toggleSelected)}
-      />
+      <div ref={containerRef}>
+        <Popper
+          trigger={buildToggle()}
+          popper={menu}
+          appendTo={containerRef.current}
+          isVisible={isOpen}
+          popperMatchesTriggerWidth={['image', 'checkbox'].includes(toggleSelected)}
+        />
+      </div>
     </React.Fragment>
   );
 };

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

@@ -33,6 +33,7 @@ export const ComposableFlyout: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const menuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
@@ -99,5 +100,15 @@ export const ComposableFlyout: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+  return (
+    <div ref={containerRef}>
+      <Popper
+        trigger={toggle}
+        popper={menu}
+        appendTo={containerRef.current}
+        isVisible={isOpen}
+        popperMatchesTriggerWidth={false}
+      />
+    </div>
+  );
 };

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

@@ -6,6 +6,7 @@ export const ComposableOptionsMenuVariants: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('');
   const menuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (isOpen && menuRef.current.contains(event.target as Node)) {
@@ -90,5 +91,9 @@ export const ComposableOptionsMenuVariants: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
+  return (
+    <div ref={containerRef}>
+      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current} isVisible={isOpen} />
+    </div>
+  );
 };

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

@@ -5,6 +5,7 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleRef = React.useRef<HTMLButtonElement>();
   const menuRef = React.useRef<HTMLDivElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
@@ -66,5 +67,9 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
+  return (
+    <div ref={containerRef}>
+      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current} isVisible={isOpen} />
+    </div>
+  );
 };

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

@@ -7,6 +7,7 @@ export const ComposableSimpleSelect: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('Select a value');
   const toggleRef = React.useRef<HTMLButtonElement>();
   const menuRef = React.useRef<HTMLDivElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (isOpen && menuRef.current.contains(event.target as Node)) {
@@ -70,5 +71,9 @@ export const ComposableSimpleSelect: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
+  return (
+    <div ref={containerRef}>
+      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current} isVisible={isOpen} />
+    </div>
+  );
 };

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

@@ -217,11 +217,9 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
   };
 
   const toggle = (
-    <div ref={containerRef}>
-      <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-        {isOpen ? 'Expanded' : 'Collapsed'}
-      </MenuToggle>
-    </div>
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+      {isOpen ? 'Expanded' : 'Collapsed'}
+    </MenuToggle>
   );
   const statusMapped = statusOptions.map(mapTree);
   const roleMapped = roleOptions.map(mapTree);
@@ -263,12 +261,14 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
     </Panel>
   );
   return (
-    <Popper
-      trigger={toggle}
-      popper={menu}
-      isVisible={isOpen}
-      appendTo={containerRef.current}
-      popperMatchesTriggerWidth={false}
-    />
+    <div ref={containerRef}>
+      <Popper
+        trigger={toggle}
+        popper={menu}
+        isVisible={isOpen}
+        appendTo={containerRef.current}
+        popperMatchesTriggerWidth={false}
+      />
+    </div>
   );
 };

package/src/demos/SearchInput/SearchInput.md

@@ -196,8 +196,6 @@ import React from 'react';
 import { 
   ActionGroup,
   Button, 
-  Card, 
-  CardBody,  
   DatePicker,
   Form, 
   FormGroup,
@@ -209,6 +207,9 @@ import {
   MenuItem,
   MenuList,
   MenuToggle,
+  Panel,
+  PanelMain,
+  PanelMainBody,
   Popper, 
   SearchInput, 
   TextInput,
@@ -425,48 +426,50 @@ AdvancedComposableSearchInput = () => {
   
   const advancedForm = (
     <div ref={advancedSearchPaneRef} role="dialog" aria-label="Advanced search form">
-      <Card>
-        <CardBody>
-          <Form>
-            <FormGroup label='Has the words' fieldId='has-words' key='has-words'>
-              <TextInput
-                type='text'
-                id='has-words'
-                value={hasWords}
-                onChange={value => {
-                  setHasWords(value);
-                  setValue(value);
-                }}
-                ref={firstAttrRef}
-              />
-            </FormGroup>
-            <Grid hasGutter md={6}>
-              <GridItem>
-                <FormGroup label='Date within' fieldId='date-within' key='date-within'>
-                  <Popper trigger={dateWithinToggle} popper={dateWithinOptions} isVisible={isDateWithinOpen} />
-                </FormGroup>
-              </GridItem>
-              <GridItem>
-                <FormGroup label='Of date' fieldId='date' key='date'>
-                  <DatePicker 
-                    id="datePicker" 
-                    style={{width: "100%"}} 
-                    value={date} 
-                    onChange={setDate} 
-                    appendTo={() => document.querySelector("#datePicker")}
-                  />
-                </FormGroup>
-              </GridItem>
-            </Grid>
-            <ActionGroup>
-              <Button variant="primary" type="submit" onClick={(e) => onSubmit(null, e)}>Submit</Button>
-              {!!onClear && (
-                <Button variant="link" type="reset" onClick={onClear}>Reset</Button>
-              )}
-            </ActionGroup>
-          </Form>
-        </CardBody>
-      </Card>
+      <Panel variant='raised'>
+        <PanelMain>
+          <PanelMainBody>
+            <Form>
+              <FormGroup label='Has the words' fieldId='has-words' key='has-words'>
+                <TextInput
+                  type='text'
+                  id='has-words'
+                  value={hasWords}
+                  onChange={value => {
+                    setHasWords(value);
+                    setValue(value);
+                  }}
+                  ref={firstAttrRef}
+                />
+              </FormGroup>
+              <Grid hasGutter md={6}>
+                <GridItem>
+                  <FormGroup label='Date within' fieldId='date-within' key='date-within'>
+                    <Popper trigger={dateWithinToggle} popper={dateWithinOptions} isVisible={isDateWithinOpen} />
+                  </FormGroup>
+                </GridItem>
+                <GridItem>
+                  <FormGroup label='Of date' fieldId='date' key='date'>
+                    <DatePicker 
+                      id="datePicker" 
+                      style={{width: "100%"}} 
+                      value={date} 
+                      onChange={setDate} 
+                      appendTo={() => document.querySelector("#datePicker")}
+                    />
+                  </FormGroup>
+                </GridItem>
+              </Grid>
+              <ActionGroup>
+                <Button variant="primary" type="submit" onClick={(e) => onSubmit(null, e)}>Submit</Button>
+                {!!onClear && (
+                  <Button variant="link" type="reset" onClick={onClear}>Reset</Button>
+                )}
+              </ActionGroup>
+            </Form>
+          </PanelMainBody>
+        </PanelMain>
+      </Panel>
     </div>
   );