@patternfly/react-core 5.0.0-alpha.14 → 5.0.0-alpha.16

package/src/components/AboutModal/__tests__/AboutModal.test.tsx

@@ -30,14 +30,6 @@ describe('AboutModal', () => {
     expect(screen.queryByRole('dialog')).toBeNull();
   });
 
-  test('Each modal is given new aria-describedby and aria-labelledby', () => {
-    const first = new AboutModal(props);
-    const second = new AboutModal(props);
-
-    expect(first.ariaLabelledBy).not.toBe(second.ariaLabelledBy);
-    expect(first.ariaDescribedBy).not.toBe(second.ariaDescribedBy);
-  });
-
   test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => {
     const noImgAltrops = {
       onClose: jest.fn(),
@@ -53,4 +45,18 @@ describe('AboutModal', () => {
     render(<AboutModal {...noImgAltrops}>Test About Modal</AboutModal>);
     expect(myMock).toHaveBeenCalled();
   });
+
+  test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => {
+    const noProductNameProps = {
+      onClose: jest.fn(),
+      children: 'modal content',
+      trademark: 'Trademark and copyright information here'
+
+    } as any;
+    const myMock = jest.fn() as any;
+    global.console = { error: myMock } as any;
+
+    render(<AboutModal {...noProductNameProps}>Test About Modal</AboutModal>);
+    expect(myMock).toHaveBeenCalled();
+  });
 });

package/src/components/AboutModal/__tests__/AboutModalBox.test.tsx

@@ -4,7 +4,7 @@ import { AboutModalBox } from '../AboutModalBox';
 
 test('AboutModalBox Test', () => {
   const { asFragment } = render(
-    <AboutModalBox aria-labelledby="id" aria-describedby="id2">
+    <AboutModalBox aria-labelledby="id">
       This is a AboutModalBox
     </AboutModalBox>
   );

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBox.test.tsx.snap

@@ -3,11 +3,8 @@
 exports[`AboutModalBox Test 1`] = `
 <DocumentFragment>
   <div
-    aria-describedby="id2"
     aria-labelledby="id"
-    aria-modal="true"
     class="pf-c-about-modal-box"
-    role="dialog"
   >
     This is a AboutModalBox
   </div>

package/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx

@@ -20,7 +20,7 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
-        noAboutModalBoxContentContainer={true}
+        hasNoContentContainer={true}
         productName="Product Name"
       >
         <TextContent id="test1" className="pf-u-py-xl">

package/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx

@@ -22,6 +22,7 @@ export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
         backgroundImageSrc={bgImg}
+        aria-label="Background image about modal"
       >
         <TextContent>
           <TextList component="dl">

package/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx

@@ -20,6 +20,7 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
+        aria-label="No product name about modal"
       >
         <TextContent>
           <TextList component="dl">

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -58,29 +58,35 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
   variant = 'control',
   onTooltipHidden = () => {},
   ...props
-}: ClipboardCopyButtonProps) => (
-  <Tooltip
-    trigger="mouseenter focus click"
-    exitDelay={exitDelay}
-    entryDelay={entryDelay}
-    maxWidth={maxWidth}
-    position={position}
-    aria-live="polite"
-    aria="none"
-    content={<div>{children}</div>}
-    onTooltipHidden={onTooltipHidden}
-  >
-    <Button
-      type="button"
-      variant={variant}
-      onClick={onClick}
-      aria-label={ariaLabel}
-      id={id}
-      aria-labelledby={`${id} ${textId}`}
-      {...props}
+}: ClipboardCopyButtonProps) => {
+  const triggerRef = React.createRef<HTMLButtonElement>();
+
+  return (
+    <Tooltip
+      trigger="mouseenter focus click"
+      triggerRef={triggerRef}
+      exitDelay={exitDelay}
+      entryDelay={entryDelay}
+      maxWidth={maxWidth}
+      position={position}
+      aria-live="polite"
+      aria="none"
+      content={<div>{children}</div>}
+      onTooltipHidden={onTooltipHidden}
     >
-      <CopyIcon />
-    </Button>
-  </Tooltip>
-);
+      <Button
+        type="button"
+        variant={variant}
+        onClick={onClick}
+        aria-label={ariaLabel}
+        id={id}
+        aria-labelledby={`${id} ${textId}`}
+        {...props}
+        ref={triggerRef}
+      >
+        <CopyIcon />
+      </Button>
+    </Tooltip>
+  );
+};
 ClipboardCopyButton.displayName = 'ClipboardCopyButton';

package/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -21,35 +21,31 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
         type="text"
         value="[object Object]"
       />
-      <div
-        style="display: contents;"
+      <button
+        aria-disabled="false"
+        aria-label="'Copy to clipboard'"
+        aria-labelledby="copy-button-0 text-input-0"
+        class="pf-c-button pf-m-control"
+        data-ouia-component-id="OUIA-Generated-Button-control-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        id="copy-button-0"
+        type="button"
       >
-        <button
-          aria-disabled="false"
-          aria-label="'Copy to clipboard'"
-          aria-labelledby="copy-button-0 text-input-0"
-          class="pf-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-1"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          id="copy-button-0"
-          type="button"
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 448 512"
+          width="1em"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-            />
-          </svg>
-        </button>
-      </div>
+          <path
+            d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+          />
+        </svg>
+      </button>
     </div>
   </div>
 </DocumentFragment>

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -2,34 +2,30 @@
 
 exports[`copy button render 1`] = `
 <DocumentFragment>
-  <div
-    style="display: contents;"
+  <button
+    aria-disabled="false"
+    aria-label="click this button to copy text"
+    aria-labelledby="my-id my-text-id"
+    class="pf-c-button pf-m-control fancy-copy-button"
+    data-ouia-component-id="OUIA-Generated-Button-control-1"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
+    id="my-id"
+    type="button"
   >
-    <button
-      aria-disabled="false"
-      aria-label="click this button to copy text"
-      aria-labelledby="my-id my-text-id"
-      class="pf-c-button pf-m-control fancy-copy-button"
-      data-ouia-component-id="OUIA-Generated-Button-control-1"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe="true"
-      id="my-id"
-      type="button"
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      style="vertical-align: -0.125em;"
+      viewBox="0 0 448 512"
+      width="1em"
     >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 448 512"
-        width="1em"
-      >
-        <path
-          d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-        />
-      </svg>
-    </button>
-  </div>
+      <path
+        d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+      />
+    </svg>
+  </button>
 </DocumentFragment>
 `;

package/src/components/ContextSelector/ContextSelector.tsx

@@ -213,7 +213,9 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     ) : (
       <Popper
         trigger={mainContainer}
+        triggerRef={this.parentRef}
         popper={popperContainer}
+        popperRef={this.popperRef}
         appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
         isVisible={isOpen}
         zIndex={zIndex}

package/src/components/DataList/DataList.tsx

@@ -22,7 +22,7 @@ export enum DataListWrapModifier {
 
 export interface SelectableRowObject {
   /** Callback that executes when the screen reader accessible element receives a change event */
-  onChange: (id: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
 }
 
 export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, 'ref'> {
@@ -33,7 +33,7 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
   /** Adds accessible text to the DataList list */
   'aria-label': string;
   /** Optional callback to make DataList selectable, fired when DataListItem selected */
-  onSelectDataListItem?: (id: string) => void;
+  onSelectDataListItem?: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;
   /** Id of DataList item currently selected */
   selectedDataListItemId?: string;
   /** Flag indicating if DataList should have compact styling */
@@ -49,7 +49,7 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
 interface DataListContextProps {
   isSelectable: boolean;
   selectedDataListItemId: string;
-  updateSelectedDataListItem: (id: string) => void;
+  updateSelectedDataListItem: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;
   selectableRow?: SelectableRowObject;
 }
 
@@ -73,7 +73,7 @@ export class DataList extends React.Component<DataListProps> {
     super(props);
   }
 
-  getIndex = (id: string) => Array.from(this.ref.current.children).findIndex(item => item.id === id);
+  getIndex = (id: string) => Array.from(this.ref.current.children).findIndex((item) => item.id === id);
 
   render() {
     const {
@@ -89,8 +89,8 @@ export class DataList extends React.Component<DataListProps> {
     } = this.props;
     const isSelectable = onSelectDataListItem !== undefined;
 
-    const updateSelectedDataListItem = (id: string) => {
-      onSelectDataListItem(id);
+    const updateSelectedDataListItem = (event: React.MouseEvent | React.KeyboardEvent, id: string) => {
+      onSelectDataListItem(event, id);
     };
 
     return (

package/src/components/DataList/DataListItem.tsx

@@ -60,12 +60,13 @@ export class DataListItem extends React.Component<DataListItemProps> {
                 target = target.parentNode;
               }
             }
-            updateSelectedDataListItem(id);
+            updateSelectedDataListItem(event, id);
           };
 
           const onKeyDown = (event: React.KeyboardEvent) => {
-            if (event.key === KeyTypes.Enter) {
-              updateSelectedDataListItem(id);
+            if ([KeyTypes.Enter, KeyTypes.Space].includes(event.key)) {
+              event.preventDefault();
+              updateSelectedDataListItem(event, id);
             }
           };
 
@@ -95,14 +96,14 @@ export class DataListItem extends React.Component<DataListItemProps> {
                   className="pf-screen-reader"
                   type="radio"
                   checked={isSelected}
-                  onChange={event => selectableRow.onChange(id, event)}
+                  onChange={(event) => selectableRow.onChange(event, id)}
                   tabIndex={-1}
                   {...selectableInputAriaProps}
                 />
               )}
               {React.Children.map(
                 children,
-                child =>
+                (child) =>
                   React.isValidElement(child) &&
                   React.cloneElement(child as React.ReactElement<any>, {
                     rowid: ariaLabelledBy

package/src/components/DataList/examples/DataListSelectableRows.tsx

@@ -33,11 +33,11 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
     setIsOpen2(!isOpen2);
   };
 
-  const onSelectDataListItem = id => {
+  const onSelectDataListItem = (_event: React.MouseEvent | React.KeyboardEvent, id: string) => {
     setSelectedDataListItemId(id);
   };
 
-  const handleInputChange = (id: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, id: string) => {
     setSelectedDataListItemId(id);
   };
 

package/src/components/DatePicker/DatePicker.tsx

@@ -120,6 +120,7 @@ const DatePickerBase = (
   const style = { '--pf-c-date-picker__input--c-form-control--width-chars': widthChars, ...styleProps };
   const buttonRef = React.useRef<HTMLButtonElement>();
   const datePickerWrapperRef = React.useRef<HTMLDivElement>();
+  const triggerRef = React.useRef<HTMLDivElement>();
 
   React.useEffect(() => {
     setValue(valueProp);
@@ -135,7 +136,7 @@ const DatePickerBase = (
   }, [value]);
 
   const setError = (date: Date) => {
-    setErrorText(validators.map(validator => validator(date)).join('\n') || '');
+    setErrorText(validators.map((validator) => validator(date)).join('\n') || '');
   };
 
   const onTextInput = (value: string, event: React.FormEvent<HTMLInputElement>) => {
@@ -189,7 +190,7 @@ const DatePickerBase = (
       setCalendarOpen: (isOpen: boolean) => setPopoverOpen(isOpen),
       toggleCalendar: (setOpen?: boolean, eventKey?: string) => {
         if (eventKey === KeyTypes.Escape && popoverOpen && !selectOpen) {
-          setPopoverOpen(prev => (setOpen !== undefined ? setOpen : !prev));
+          setPopoverOpen((prev) => (setOpen !== undefined ? setOpen : !prev));
         }
       },
       isCalendarOpen: popoverOpen
@@ -207,8 +208,8 @@ const DatePickerBase = (
             onChange={onDateClick}
             locale={locale}
             // Use truthy values of strings
-            validators={validators.map(validator => (date: Date) => !validator(date))}
-            onSelectToggle={open => setSelectOpen(open)}
+            validators={validators.map((validator) => (date: Date) => !validator(date))}
+            onSelectToggle={(open) => setSelectOpen(open)}
             monthFormat={monthFormat}
             weekdayFormat={weekdayFormat}
             longWeekdayFormat={longWeekdayFormat}
@@ -241,9 +242,10 @@ const DatePickerBase = (
         hasNoPadding
         hasAutoWidth
         appendTo={appendTo}
+        triggerRef={triggerRef}
         {...popoverProps}
       >
-        <div className={styles.datePickerInput}>
+        <div className={styles.datePickerInput} ref={triggerRef}>
           <InputGroup>
             <TextInput
               isDisabled={isDisabled}