@patternfly/react-core 6.0.0-alpha.55 → 6.0.0-alpha.56

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.54","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.55","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.54","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.55","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.54","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.55","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.55",
+  "version": "6.0.0-alpha.56",
   "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",
@@ -74,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "9500bdfebf53ce5f486c92eaa0b1a371dccf4d76"
+  "gitHead": "cd60d82eeb90a83acd096f6105405f41484534f0"
 }

package/src/components/Button/examples/ButtonInlineSpanLink.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, KeyTypes } from '@patternfly/react-core';
 
 const handleKeydown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
   const { key } = event;
-  const isEnterKey: boolean = key === 'Enter';
-  const isEnterOrSpaceKey: boolean = isEnterKey || key === 'Space';
+  const isEnterKey: boolean = key === KeyTypes.Enter;
+  const isEnterOrSpaceKey: boolean = isEnterKey || key === KeyTypes.Space;
 
   if (isEnterOrSpaceKey) {
     event.preventDefault();

package/src/components/Form/FormGroupLabelHelp.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, ButtonProps } from '../Button';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import { KeyTypes } from '../../helpers/constants';
 
 /** A help button to be passed to the FormGroup's labelHelp property. This should be wrapped or linked
  * to our Popover component.
@@ -10,15 +11,48 @@ export interface FormGroupLabelHelpProps extends ButtonProps {
   'aria-label': string;
   /** Additional classes added to the help button. */
   className?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLSpanElement>;
 }
 
-export const FormGroupLabelHelp: React.FunctionComponent<FormGroupLabelHelpProps> = ({
+const FormGroupLabelHelpBase: React.FunctionComponent<FormGroupLabelHelpProps> = ({
   'aria-label': ariaLabel,
   className,
+  innerRef,
   ...props
-}) => (
-  <Button aria-label={ariaLabel} className={className} variant="plain" hasNoPadding {...props}>
-    <QuestionCircleIcon />
-  </Button>
-);
+}) => {
+  const ref = React.useRef<HTMLSpanElement>(null);
+  const buttonRef = innerRef || ref;
+
+  const isMutableRef = (ref: React.Ref<HTMLSpanElement>): ref is React.MutableRefObject<HTMLSpanElement> =>
+    typeof ref === 'object' && ref !== null && 'current' in ref && ref.current !== undefined;
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+    if ([KeyTypes.Space, KeyTypes.Enter].includes(event.key) && isMutableRef(buttonRef) && buttonRef.current) {
+      event.preventDefault();
+      buttonRef.current.click();
+    }
+  };
+
+  return (
+    <Button
+      component="span"
+      isInline
+      ref={buttonRef}
+      onKeyDown={handleKeyDown}
+      aria-label={ariaLabel}
+      className={className}
+      variant="plain"
+      hasNoPadding
+      {...props}
+    >
+      <QuestionCircleIcon />
+    </Button>
+  );
+};
+
+export const FormGroupLabelHelp = React.forwardRef((props: FormGroupLabelHelpProps, ref: React.Ref<any>) => (
+  <FormGroupLabelHelpBase innerRef={ref} {...props} />
+));
+
 FormGroupLabelHelp.displayName = 'FormGroupLabelHelp';

package/src/components/Form/examples/FormBasic.tsx

@@ -18,6 +18,7 @@ export const FormBasic: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
   const [email, setEmail] = React.useState('');
   const [phone, setPhone] = React.useState('');
+  const labelHelpRef = React.useRef(null);
 
   const handleNameChange = (_event, name: string) => {
     setName(name);
@@ -37,6 +38,7 @@ export const FormBasic: React.FunctionComponent = () => {
         label="Full name"
         labelHelp={
           <Popover
+            triggerRef={labelHelpRef}
             headerContent={
               <div>
                 The{' '}
@@ -63,7 +65,7 @@ export const FormBasic: React.FunctionComponent = () => {
               </div>
             }
           >
-            <FormGroupLabelHelp aria-label="More info for name field" />
+            <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for name field" />
           </Popover>
         }
         isRequired

package/src/components/Form/examples/FormGroupLabelInfo.tsx

@@ -12,6 +12,7 @@ import {
 
 export const FormGroupLabelInfo: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
+  const labelHelpRef = React.useRef(null);
 
   const handleNameChange = (_event, name: string) => {
     setName(name);
@@ -24,6 +25,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
         labelInfo="Additional label info"
         labelHelp={
           <Popover
+            triggerRef={labelHelpRef}
             headerContent={
               <div>
                 The{' '}
@@ -50,7 +52,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
               </div>
             }
           >
-            <FormGroupLabelHelp aria-label="More info for name field" />
+            <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for name field" />
           </Popover>
         }
         isRequired

package/src/components/Form/examples/FormLimitWidth.tsx

@@ -18,6 +18,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
   const [email, setEmail] = React.useState('');
   const [phone, setPhone] = React.useState('');
+  const labelHelpRef = React.useRef(null);
 
   const handleNameChange = (_event, name: string) => {
     setName(name);
@@ -37,6 +38,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
         label="Full name"
         labelHelp={
           <Popover
+            triggerRef={labelHelpRef}
             headerContent={
               <div>
                 The{' '}
@@ -63,7 +65,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
               </div>
             }
           >
-            <FormGroupLabelHelp aria-label="More info for name field" />
+            <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for name field" />
           </Popover>
         }
         isRequired

package/src/components/Modal/examples/ModalWithForm.tsx

@@ -15,6 +15,9 @@ export const ModalWithForm: React.FunctionComponent = () => {
   const [nameValue, setNameValue] = React.useState('');
   const [emailValue, setEmailValue] = React.useState('');
   const [addressValue, setAddressValue] = React.useState('');
+  const nameLabelHelpRef = React.useRef(null);
+  const emailLabelHelpRef = React.useRef(null);
+  const addressLabelHelpRef = React.useRef(null);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setModalOpen(!isModalOpen);
@@ -56,6 +59,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
             label="Name"
             labelHelp={
               <Popover
+                triggerRef={nameLabelHelpRef}
                 headerContent={
                   <div>
                     The
@@ -82,7 +86,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   </div>
                 }
               >
-                <FormGroupLabelHelp aria-label="More info for name field" />
+                <FormGroupLabelHelp ref={nameLabelHelpRef} aria-label="More info for name field" />
               </Popover>
             }
             isRequired
@@ -101,6 +105,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
             label="E-mail"
             labelHelp={
               <Popover
+                triggerRef={emailLabelHelpRef}
                 headerContent={
                   <div>
                     The
@@ -123,7 +128,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   </div>
                 }
               >
-                <FormGroupLabelHelp aria-label="More info for e-mail field" />
+                <FormGroupLabelHelp ref={emailLabelHelpRef} aria-label="More info for e-mail field" />
               </Popover>
             }
             isRequired
@@ -142,6 +147,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
             label="Address"
             labelHelp={
               <Popover
+                triggerRef={addressLabelHelpRef}
                 headerContent={
                   <div>
                     The
@@ -163,7 +169,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   </div>
                 }
               >
-                <FormGroupLabelHelp aria-label="More info for address field" />
+                <FormGroupLabelHelp ref={addressLabelHelpRef} aria-label="More info for address field" />
               </Popover>
             }
             isRequired

package/src/demos/SearchInput/SearchInput.md

@@ -128,9 +128,9 @@ SearchAutocomplete = () => {
         event.preventDefault(); // by default, the up and down arrow keys scroll the window
         // the tab, enter, and space keys will close the menu, and the tab key will move browser
         // focus forward one element (by default)
-      } else if (event.key === 'Tab' || event.key === 'Enter' || event.key === 'Space') {
+      } else if (event.key === 'Tab' || event.key === 'Enter' || event.key === ' ') {
         setIsAutocompleteOpen(false);
-        if (event.key === 'Enter' || event.key === 'Space') {
+        if (event.key === 'Enter' || event.key === ' ') {
           event.preventDefault();
         }
       }

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

@@ -89,9 +89,15 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     }
   };
 
+  const labelHelpRef = React.useRef(null);
+
   const iconPopover = (
-    <Popover headerContent={<div>Password Requirements</div>} bodyContent={<div>Password rules</div>}>
-      <FormGroupLabelHelp aria-label="More info for name field" />
+    <Popover
+      triggerRef={labelHelpRef}
+      headerContent={<div>Password Requirements</div>}
+      bodyContent={<div>Password rules</div>}
+    >
+      <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for name field" />
     </Popover>
   );
 

package/src/next/components/Modal/examples/ModalWithForm.tsx

@@ -7,6 +7,9 @@ export const ModalWithForm: React.FunctionComponent = () => {
   const [nameValue, setNameValue] = React.useState('');
   const [emailValue, setEmailValue] = React.useState('');
   const [addressValue, setAddressValue] = React.useState('');
+  const nameLabelHelpRef = React.useRef(null);
+  const emailLabelHelpRef = React.useRef(null);
+  const addressLabelHelpRef = React.useRef(null);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setModalOpen(!isModalOpen);
@@ -47,6 +50,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
               label="Name"
               labelHelp={
                 <Popover
+                  triggerRef={nameLabelHelpRef}
                   headerContent={
                     <div>
                       The
@@ -73,7 +77,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                     </div>
                   }
                 >
-                  <FormGroupLabelHelp aria-label="More info for name field" />
+                  <FormGroupLabelHelp ref={nameLabelHelpRef} aria-label="More info for name field" />
                 </Popover>
               }
               isRequired
@@ -92,6 +96,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
               label="E-mail"
               labelHelp={
                 <Popover
+                  triggerRef={emailLabelHelpRef}
                   headerContent={
                     <div>
                       The
@@ -114,7 +119,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                     </div>
                   }
                 >
-                  <FormGroupLabelHelp aria-label="More info for e-mail field" />
+                  <FormGroupLabelHelp ref={emailLabelHelpRef} aria-label="More info for e-mail field" />
                 </Popover>
               }
               isRequired
@@ -133,6 +138,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
               label="Address"
               labelHelp={
                 <Popover
+                  triggerRef={addressLabelHelpRef}
                   headerContent={
                     <div>
                       The
@@ -154,7 +160,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                     </div>
                   }
                 >
-                  <FormGroupLabelHelp aria-label="More info for address field" />
+                  <FormGroupLabelHelp ref={addressLabelHelpRef} aria-label="More info for address field" />
                 </Popover>
               }
               isRequired