@patternfly/react-core 5.0.0-alpha.107 → 5.0.0-alpha.109

package/src/components/Card/examples/{CardSelectableA11yHighlight.tsx → CardDeprecatedSelectableA11yHighlight.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 
-export const CardSelectableA11yHighlight: React.FunctionComponent = () => {
+export const CardLegacySelectableA11yHighlight: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('');
 
   const onKeyDown = (event: React.KeyboardEvent) => {

package/src/components/Card/examples/CardSelectable.tsx

@@ -1,129 +1,74 @@
 import React from 'react';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  Dropdown,
-  DropdownList,
-  DropdownItem,
-  MenuToggle,
-  MenuToggleElement,
-  Divider
-} from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 
-export const CardSelectable: React.FunctionComponent = () => {
-  const [selected, setSelected] = React.useState<string>('');
-  const [isKebabOpen, setIsKebabOpen] = React.useState<boolean>(false);
+export const SelectableCard: React.FunctionComponent = () => {
+  const [isChecked1, setIsChecked1] = React.useState(false);
+  const [isChecked2, setIsChecked2] = React.useState(false);
+  const [isChecked3, setIsChecked3] = React.useState(false);
 
-  const onKeyDown = (event: React.KeyboardEvent) => {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-    if ([' ', 'Enter'].includes(event.key)) {
-      event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-      setSelected(newSelected);
-    }
-  };
+  const id1 = 'selectable-card-input-1';
+  const id2 = 'selectable-card-input-2';
+  const id3 = 'selectable-card-input-3';
 
-  const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-    setSelected(newSelected);
-  };
+  const onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    const name = event.currentTarget.name;
 
-  const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? '' : labelledById;
-    setSelected(newSelected);
-  };
-
-  const onToggle = (event: React.MouseEvent | undefined) => {
-    event?.stopPropagation();
-    setIsKebabOpen(!isKebabOpen);
-  };
-
-  const onSelect = (event: React.MouseEvent | undefined) => {
-    event?.stopPropagation();
-    setIsKebabOpen(false);
+    switch (name) {
+      case id1:
+        setIsChecked1(checked);
+        break;
+      case id2:
+        setIsChecked2(checked);
+        break;
+      case id3:
+        setIsChecked3(checked);
+        break;
+    }
   };
 
-  const dropdownItems = (
-    <>
-      <DropdownItem key="action">Action</DropdownItem>
-      {/* Prevent default onClick functionality for example purposes */}
-      <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
-        Link
-      </DropdownItem>
-      <DropdownItem key="disabled action" isDisabled>
-        Disabled Action
-      </DropdownItem>
-      <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
-        Disabled Link
-      </DropdownItem>
-      <Divider component="li" key="separator" />
-      <DropdownItem key="separated action">Separated Action</DropdownItem>
-      <DropdownItem key="separated link" to="#" onClick={(event: any) => event.preventDefault()}>
-        Separated Link
-      </DropdownItem>
-    </>
-  );
-
-  const headerActions = (
-    <>
-      <Dropdown
-        onSelect={onSelect}
-        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-          <MenuToggle
-            ref={toggleRef}
-            isExpanded={isKebabOpen}
-            onClick={onToggle}
-            variant="plain"
-            aria-label="Card selectable example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
-        )}
-        isOpen={isKebabOpen}
-        onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)}
-      >
-        <DropdownList>{dropdownItems}</DropdownList>
-      </Dropdown>
-    </>
-  );
-
   return (
     <React.Fragment>
-      <Card
-        id="selectable-first-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        hasSelectableInput
-        onSelectableInputChange={onChange}
-        isSelectableRaised
-        isSelected={selected === 'selectable-first-card'}
-      >
-        <CardHeader actions={{ actions: headerActions }} />
-        <CardTitle>First card</CardTitle>
-        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
+      <Card id="selectable-card-example-1" isSelectable>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'selectable-card-example-1',
+            name: id1,
+            isChecked: isChecked1,
+            onChange
+          }}
+        >
+          <CardTitle>First card</CardTitle>
+        </CardHeader>
+        <CardBody>This card is selectable.</CardBody>
       </Card>
-      <br />
-      <Card
-        id="selectable-second-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        hasSelectableInput
-        onSelectableInputChange={onChange}
-        isSelectableRaised
-        isSelected={selected === 'selectable-second-card'}
-      >
-        <CardTitle>Second card</CardTitle>
-        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
+      <Card id="selectable-card-example-2" isSelectable>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'selectable-card-example-2',
+            name: id2,
+            isChecked: isChecked2,
+            onChange
+          }}
+        >
+          <CardTitle>Second card</CardTitle>
+        </CardHeader>
+        <CardBody>This card is selectable.</CardBody>
       </Card>
-      <br />
-      <Card id="selectable-third-card" isSelectableRaised isDisabledRaised hasSelectableInput>
-        <CardTitle>Third card</CardTitle>
-        <CardBody>This is a raised but disabled card.</CardBody>
+      <Card id="selectable-card-example-3" isSelectable isDisabled>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'selectable-card-example-3',
+            name: id3,
+            isChecked: isChecked3,
+            onChange
+          }}
+        >
+          <CardTitle>Third card</CardTitle>
+        </CardHeader>
+        <CardBody>This card is selectable but disabled.</CardBody>
       </Card>
     </React.Fragment>
   );

package/src/components/Card/examples/CardSingleSelectable.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
+
+export const SingleSelectableCard: React.FunctionComponent = () => {
+  const id1 = 'single-selectable-card-input-1';
+  const id2 = 'single-selectable-card-input-2';
+  const id3 = 'single-selectable-card-input-3';
+
+  return (
+    <React.Fragment>
+      <Card id="single-selectable-card-example-1" isSelectable>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'single-selectable-card-example-1',
+            name: 'single-selectable-card-example',
+            variant: 'single'
+          }}
+        >
+          <CardTitle>First card</CardTitle>
+        </CardHeader>
+        <CardBody>This card is single selectable.</CardBody>
+      </Card>
+      <Card id="single-selectable-card-example-2" isSelectable>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'single-selectable-card-example-2',
+            name: 'single-selectable-card-example',
+            variant: 'single'
+          }}
+        >
+          <CardTitle>Second card</CardTitle>
+        </CardHeader>
+        <CardBody>This card is single selectable.</CardBody>
+      </Card>
+      <Card id="single-selectable-card-example-3" isSelectable isDisabled>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'single-selectable-card-example-3',
+            name: 'single-selectable-card-example',
+            variant: 'single'
+          }}
+        >
+          <CardTitle>Third card</CardTitle>
+        </CardHeader>
+        <CardBody>This card is single selectable but disabled.</CardBody>
+      </Card>
+    </React.Fragment>
+  );
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -10,6 +10,8 @@ export interface CheckboxProps
     OUIAProps {
   /** Additional classes added to the checkbox. */
   className?: string;
+  /** Additional classed added to the radio input */
+  inputClassName?: string;
   /** Flag to show if the checkbox selection is valid or invalid. */
   isValid?: boolean;
   /** Flag to show if the checkbox is disabled. */
@@ -74,6 +76,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
     const {
       'aria-label': ariaLabel,
       className,
+      inputClassName,
       onChange,
       isValid,
       isDisabled,
@@ -109,14 +112,14 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       <Component className={css(styles.check, !label && styles.modifiers.standalone, className)}>
         <input
           {...props}
-          className={css(styles.checkInput)}
+          className={css(styles.checkInput, inputClassName)}
           type="checkbox"
           onChange={this.handleChange}
           aria-invalid={!isValid}
           aria-label={ariaLabel}
           disabled={isDisabled}
           required={isRequired}
-          ref={elem => elem && (elem.indeterminate = isChecked === null)}
+          ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
           {...checkedProps}
           {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
         />

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -131,7 +131,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   expandContent = (_event: React.MouseEvent<Element, MouseEvent>) => {
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       expanded: !prevState.expanded
     }));
   };
@@ -183,7 +183,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       >
         {variant === 'inline-compact' && (
           <GenerateId prefix="">
-            {id => (
+            {(id) => (
               <React.Fragment>
                 {!isCode && (
                   <span className={css(styles.clipboardCopyText)} id={`${textIdPrefix}${id}`}>
@@ -223,7 +223,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
         )}
         {variant !== 'inline-compact' && (
           <GenerateId prefix="">
-            {id => (
+            {(id) => (
               <React.Fragment>
                 <div className={css(styles.clipboardCopyGroup)}>
                   {variant === 'expansion' && (
@@ -237,7 +237,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
                     />
                   )}
                   <TextInput
-                    isReadOnly={isReadOnly || this.state.expanded}
+                    readOnlyVariant={isReadOnly || this.state.expanded ? 'default' : undefined}
                     onChange={this.updateText}
                     value={this.state.text as string | number}
                     id={`text-input-${id}`}

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

@@ -10,17 +10,20 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
     <div
       class="pf-v5-c-clipboard-copy__group"
     >
-      <input
-        aria-invalid="false"
-        aria-label="'Copyable input'"
+      <div
         class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        id="text-input-0"
-        type="text"
-        value="[object Object]"
-      />
+      >
+        <input
+          aria-invalid="false"
+          aria-label="'Copyable input'"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          id="text-input-0"
+          type="text"
+          value="[object Object]"
+        />
+      </div>
       <button
         aria-disabled="false"
         aria-label="'Copy to clipboard'"

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -15,17 +15,20 @@ exports[`With popover opened 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <input
-            aria-invalid="false"
-            aria-label="Date picker"
+          <div
             class="pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            placeholder="YYYY-MM-DD"
-            type="text"
-            value=""
-          />
+          >
+            <input
+              aria-invalid="false"
+              aria-label="Date picker"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              placeholder="YYYY-MM-DD"
+              type="text"
+              value=""
+            />
+          </div>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -114,39 +117,37 @@ exports[`With popover opened 1`] = `
                     >
                       Month
                     </span>
-                    <div>
-                      <button
-                        aria-expanded="false"
-                        class="pf-v5-c-menu-toggle"
-                        style="width: 140px;"
-                        type="button"
+                    <button
+                      aria-expanded="false"
+                      class="pf-v5-c-menu-toggle"
+                      style="width: 140px;"
+                      type="button"
+                    >
+                      <span
+                        class="pf-v5-c-menu-toggle__text"
+                      >
+                        December
+                      </span>
+                      <span
+                        class="pf-v5-c-menu-toggle__controls"
                       >
                         <span
-                          class="pf-v5-c-menu-toggle__text"
-                        >
-                          December
-                        </span>
-                        <span
-                          class="pf-v5-c-menu-toggle__controls"
+                          class="pf-v5-c-menu-toggle__toggle-icon"
                         >
-                          <span
-                            class="pf-v5-c-menu-toggle__toggle-icon"
+                          <svg
+                            aria-hidden="true"
+                            class="pf-v5-svg"
+                            fill="currentColor"
+                            role="img"
+                            viewBox="0 0 320 512"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="pf-v5-svg"
-                              fill="currentColor"
-                              role="img"
-                              viewBox="0 0 320 512"
-                            >
-                              <path
-                                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                              />
-                            </svg>
-                          </span>
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                            />
+                          </svg>
                         </span>
-                      </button>
-                    </div>
+                      </span>
+                    </button>
                   </div>
                 </div>
                 <div
@@ -155,16 +156,19 @@ exports[`With popover opened 1`] = `
                   <div
                     class="pf-v5-c-calendar-month__header-year"
                   >
-                    <input
-                      aria-invalid="false"
-                      aria-label="Select year"
+                    <div
                       class="pf-v5-c-form-control"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-                      data-ouia-component-type="PF4/TextInput"
-                      data-ouia-safe="true"
-                      type="number"
-                      value="1969"
-                    />
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="Select year"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+                        data-ouia-component-type="PF4/TextInput"
+                        data-ouia-safe="true"
+                        type="number"
+                        value="1969"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
@@ -774,18 +778,21 @@ exports[`disabled date picker 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <input
-            aria-invalid="false"
-            aria-label="disabled date picker"
-            class="pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            disabled=""
-            placeholder="YYYY-MM-DD"
-            type="text"
-            value="2020-11-20"
-          />
+          <div
+            class="pf-v5-c-form-control pf-m-disabled"
+          >
+            <input
+              aria-invalid="false"
+              aria-label="disabled date picker"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              disabled=""
+              placeholder="YYYY-MM-DD"
+              type="text"
+              value="2020-11-20"
+            />
+          </div>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -813,4 +820,4 @@ exports[`disabled date picker 1`] = `
     </div>
   </div>
 </DocumentFragment>
-`;
+`;

package/src/components/Dropdown/Dropdown.tsx

@@ -19,6 +19,13 @@ export interface DropdownPopperProps {
   enableFlip?: boolean;
 }
 
+export interface DropdownToggleProps {
+  /**  Dropdown toggle node. */
+  toggleNode: React.ReactNode;
+  /** Reference to the toggle. */
+  toggleRef?: React.RefObject<HTMLButtonElement>;
+}
+
 /**
  * See the Menu documentation for additional props that may be passed.
  */
@@ -27,16 +34,14 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown. */
   className?: string;
-  /** Renderer for a custom dropdown toggle. Forwards a ref to the toggle. */
-  toggle: (toggleRef: React.RefObject<any>) => React.ReactNode;
+  /** Dropdown toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property. */
+  toggle: DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode);
   /** Flag to indicate if menu is opened.*/
   isOpen?: boolean;
+  /** Flag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus. */
+  shouldFocusToggleOnSelect?: boolean;
   /** Function callback called when user selects item. */
-  onSelect?: (
-    event?: React.MouseEvent<Element, MouseEvent>,
-    itemId?: string | number,
-    toggleRef?: React.RefObject<any>
-  ) => void;
+  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => void;
   /** Callback to allow the dropdown component to change the open state of the menu.
    * Triggered by clicking outside of the menu, or by pressing either tab or escape. */
   onOpenChange?: (isOpen: boolean) => void;
@@ -62,6 +67,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   onSelect,
   isOpen,
   toggle,
+  shouldFocusToggleOnSelect = false,
   onOpenChange,
   isPlain,
   isScrollable,
@@ -73,10 +79,15 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
+  const localToggleRef = React.useRef<HTMLButtonElement>();
   const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
 
   const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  const toggleRef =
+    typeof toggle === 'function' || (typeof toggle !== 'function' && !toggle.toggleRef)
+      ? localToggleRef
+      : (toggle?.toggleRef as React.RefObject<HTMLButtonElement>);
+
   React.useEffect(() => {
     const handleMenuKeys = (event: KeyboardEvent) => {
       // Close the menu on tab or escape if onOpenChange is provided
@@ -119,13 +130,16 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       window.removeEventListener('keydown', handleMenuKeys);
       window.removeEventListener('click', handleClick);
     };
-  }, [isOpen, menuRef, onOpenChange]);
+  }, [isOpen, menuRef, toggleRef, onOpenChange]);
 
   const menu = (
     <Menu
       className={css(className)}
       ref={menuRef}
-      onSelect={(event, itemId) => onSelect && onSelect(event, itemId, toggleRef)}
+      onSelect={(event, itemId) => {
+        onSelect && onSelect(event, itemId);
+        shouldFocusToggleOnSelect && toggleRef.current.focus();
+      }}
       isPlain={isPlain}
       isScrollable={isScrollable}
       {...props}
@@ -136,7 +150,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   );
   return (
     <Popper
-      trigger={toggle(toggleRef)}
+      trigger={typeof toggle === 'function' ? toggle(toggleRef) : toggle.toggleNode}
       triggerRef={toggleRef}
       popper={menu}
       popperRef={menuRef}

package/src/components/Dropdown/examples/Dropdown.md

@@ -3,7 +3,16 @@ id: Dropdown
 section: components
 subsection: menus
 cssPrefix: pf-c-menu
-propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle', 'DropdownPopperProps']
+propComponents:
+  [
+    'Dropdown',
+    'DropdownGroup',
+    'DropdownItem',
+    'DropdownList',
+    'MenuToggle',
+    'DropdownToggleProps',
+    'DropdownPopperProps'
+  ]
 ---
 
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

package/src/components/Dropdown/examples/DropdownBasic.tsx

@@ -8,15 +8,10 @@ export const DropdownBasic: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    itemId: string | number | undefined,
-    toggleRef: React.RefObject<any>
-  ) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
-    toggleRef?.current.focus();
   };
 
   return (
@@ -30,6 +25,7 @@ export const DropdownBasic: React.FunctionComponent = () => {
         </MenuToggle>
       )}
       ouiaId="BasicDropdown"
+      shouldFocusToggleOnSelect
     >
       <DropdownList>
         <DropdownItem itemId={0} key="action">