@patternfly/react-core 4.229.0 → 4.231.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.229.0",
+  "version": "4.231.0",
   "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,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.80.0",
-    "@patternfly/react-styles": "^4.79.0",
-    "@patternfly/react-tokens": "^4.81.0",
+    "@patternfly/react-icons": "^4.82.0",
+    "@patternfly/react-styles": "^4.81.0",
+    "@patternfly/react-tokens": "^4.83.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.206.1",
+    "@patternfly/patternfly": "4.206.2",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "6f68aa3d05370ed0e088e00b2a780f2babe64dd6"
+  "gitHead": "6e1df86d6c02166eb1b8ea4a5afeb252da326d22"
 }

package/src/components/ContextSelector/ContextSelector.tsx

@@ -37,8 +37,10 @@ export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuApp
   isFullHeight?: boolean;
   /** Labels the Context Selector for Screen Readers */
   screenReaderLabel?: string;
-  /** Text that appears in the Context Selector Toggle */
-  toggleText?: string;
+  /** Component or string that will be used in the context selector.
+   * This prop is placed in a button, and cannot contain any interactive elements
+   */
+  toggleText?: React.ReactNode;
   /** Aria-label for the Context Selector Search Button */
   searchButtonAriaLabel?: string;
   /** Value in the Search field */

package/src/components/ContextSelector/ContextSelectorToggle.tsx

@@ -10,8 +10,10 @@ export interface ContextSelectorToggleProps {
   id: string;
   /** Classes applied to root element of toggle */
   className?: string;
-  /** Text that appears in the Context Selector Toggle */
-  toggleText?: string;
+  /** Component or string that will be used in the context selector.
+   * This prop is placed in a button, and cannot contain any interactive elements
+   */
+  toggleText?: React.ReactNode;
   /** Flag to indicate if menu is opened */
   isOpen?: boolean;
   /** Callback called when toggle is clicked */

package/src/components/MenuToggle/MenuToggle.tsx

@@ -6,6 +6,13 @@ import { BadgeProps } from '../Badge';
 
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
+export interface SplitButtonOptions {
+  /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
+  items: React.ReactNode[];
+  /** Variant of split button toggle */
+  variant?: 'action' | 'checkbox';
+}
+
 export interface MenuToggleProps
   extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<MenuToggleElement>, MenuToggleElement>, 'ref'> {
   /** Content rendered inside the toggle */
@@ -20,6 +27,8 @@ export interface MenuToggleProps
   isFullHeight?: boolean;
   /** Flag indicating the toggle takes up the full width of its parent */
   isFullWidth?: boolean;
+  /** Object used to configure a split button menu toggle */
+  splitButtonOptions?: SplitButtonOptions;
   /** Variant styles of the menu toggle */
   variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
   /** Optional icon rendered inside the toggle, before the children content */
@@ -37,8 +46,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
     isExpanded: false,
     isDisabled: false,
     isFullWidth: false,
-    isFullHeight: false,
-    variant: 'default'
+    isFullHeight: false
   };
 
   render() {
@@ -51,6 +59,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
       isDisabled,
       isFullHeight,
       isFullWidth,
+      splitButtonOptions,
       variant,
       innerRef,
       onClick,
@@ -71,7 +80,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
     const content = (
       <>
         {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
-        {isTypeahead ? children : <span className="pf-c-menu-toggle__text">{children}</span>}
+        {isTypeahead ? children : <span className={css(styles.menuToggleText)}>{children}</span>}
         {badge && <span className={css(styles.menuToggleCount)}>{badge}</span>}
         {isTypeahead ? (
           <button
@@ -89,44 +98,61 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
       </>
     );
 
+    const commonStyles = css(
+      styles.menuToggle,
+      isExpanded && styles.modifiers.expanded,
+      variant === 'primary' && styles.modifiers.primary,
+      variant === 'secondary' && styles.modifiers.secondary,
+      (isPlain || isPlainText) && styles.modifiers.plain,
+      isPlainText && styles.modifiers.text,
+      isFullHeight && styles.modifiers.fullHeight,
+      isFullWidth && styles.modifiers.fullWidth,
+      isDisabled && styles.modifiers.disabled,
+      className
+    );
+
     const componentProps = {
-      className: css(
-        styles.menuToggle,
-        isExpanded && styles.modifiers.expanded,
-        variant === 'primary' && styles.modifiers.primary,
-        (isPlain || isPlainText) && styles.modifiers.plain,
-        isPlainText && styles.modifiers.text,
-        isFullHeight && styles.modifiers.fullHeight,
-        isTypeahead && styles.modifiers.typeahead,
-        isFullWidth && styles.modifiers.fullWidth,
-        className
-      ),
       children: isPlain ? children : content,
       ...(isDisabled && { disabled: true }),
       ...otherProps
     };
 
     if (isTypeahead) {
-      return <div ref={innerRef as React.Ref<HTMLDivElement>} {...componentProps} />;
+      return <div ref={innerRef as React.Ref<HTMLDivElement>} className={css(commonStyles)} {...componentProps} />;
+    }
+
+    if (splitButtonOptions) {
+      return (
+        <div
+          className={css(
+            commonStyles,
+            styles.modifiers.splitButton,
+            splitButtonOptions?.variant === 'action' && styles.modifiers.action
+          )}
+        >
+          {splitButtonOptions?.items}
+          <button
+            className={css(styles.menuToggleButton)}
+            type="button"
+            aria-expanded={isExpanded}
+            aria-label={ariaLabel}
+            disabled={isDisabled}
+            {...otherProps}
+          >
+            {toggleControls}
+          </button>
+        </div>
+      );
     }
 
     return (
       <button
-        className={css(
-          styles.menuToggle,
-          isExpanded && styles.modifiers.expanded,
-          variant === 'primary' && styles.modifiers.primary,
-          variant === 'secondary' && styles.modifiers.secondary,
-          (isPlain || isPlainText) && styles.modifiers.plain,
-          isPlainText && styles.modifiers.text,
-          isFullHeight && styles.modifiers.fullHeight,
-          isFullWidth && styles.modifiers.fullWidth,
-          className
-        )}
-        ref={innerRef as React.Ref<HTMLButtonElement>}
+        className={css(commonStyles)}
         type="button"
         aria-label={ariaLabel}
         aria-expanded={isExpanded}
+        ref={innerRef as React.Ref<HTMLButtonElement>}
+        disabled={isDisabled}
         onClick={onClick}
         {...componentProps}
       />

package/src/components/MenuToggle/MenuToggleAction.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
+import { css } from '@patternfly/react-styles';
+
+export interface MenuToggleActionProps {
+  /** Additional classes added to the MenuToggleAction */
+  className?: string;
+  /** Flag to show if the action button is disabled */
+  isDisabled?: boolean;
+  /** A callback for when the action button is clicked */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Element to be rendered inside the <button> */
+  children?: React.ReactNode;
+  /** Id of the action button */
+  id?: string;
+}
+
+export class MenuToggleAction extends React.Component<MenuToggleActionProps> {
+  static displayName = 'MenuToggleAction';
+  static defaultProps: MenuToggleActionProps = {
+    className: '',
+    isDisabled: false,
+    onClick: () => {}
+  };
+
+  render() {
+    const { id, className, onClick, isDisabled, children, ...props } = this.props;
+
+    return (
+      <button
+        id={id}
+        className={css(styles.menuToggleButton, className)}
+        onClick={onClick}
+        type="button"
+        disabled={isDisabled}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+}

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Check/check';
+import { css } from '@patternfly/react-styles';
+import { PickOptional } from '../../helpers/typeUtils';
+import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+
+export interface MenuToggleCheckboxProps
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>,
+    OUIAProps {
+  /** Additional classes added to the MenuToggleCheckbox */
+  className?: string;
+  /** Flag to show if the checkbox selection is valid or invalid */
+  isValid?: boolean;
+  /** Flag to show if the checkbox is disabled */
+  isDisabled?: boolean;
+  /** Flag to show if the checkbox is checked when it is controlled by React state.
+   * To make the checkbox uncontrolled instead use the defaultChecked prop, but do not use both.
+   */
+  isChecked?: boolean | null;
+  /** Flag to set the default checked value of the checkbox when it is uncontrolled by React state.
+   * To make the checkbox controlled instead use the isChecked prop, but do not use both.
+   */
+  defaultChecked?: boolean | null;
+  /** A callback for when the checkbox selection changes */
+  onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
+  /** Element to be rendered inside the <span> */
+  children?: React.ReactNode;
+  /** Id of the checkbox */
+  id: string;
+}
+
+export class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouiaStateId: string }> {
+  static displayName = 'MenuToggleCheckbox';
+  static defaultProps: PickOptional<MenuToggleCheckboxProps> = {
+    isValid: true,
+    isDisabled: false,
+    onChange: () => undefined as any
+  };
+
+  constructor(props: MenuToggleCheckboxProps) {
+    super(props);
+    this.state = {
+      ouiaStateId: getDefaultOUIAId(MenuToggleCheckbox.displayName)
+    };
+  }
+
+  handleChange = (event: React.FormEvent<HTMLInputElement>) => {
+    this.props.onChange((event.target as HTMLInputElement).checked, event);
+  };
+
+  calculateChecked = () => {
+    const { isChecked, defaultChecked } = this.props;
+    if (isChecked === null) {
+      // return false here and the indeterminate state will be set to true through the ref
+      return false;
+    } else if (isChecked !== undefined) {
+      return isChecked;
+    }
+    return defaultChecked;
+  };
+
+  render() {
+    const {
+      className,
+      isValid,
+      isDisabled,
+      isChecked,
+      children,
+      ouiaId,
+      ouiaSafe,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      onChange,
+      defaultChecked,
+      id,
+      ...props
+    } = this.props;
+    const text = children && (
+      <span className={css(styles.checkLabel, className)} aria-hidden="true" id={id}>
+        {children}
+      </span>
+    );
+    return (
+      <label className={css(styles.check, !children && styles.modifiers.standalone, className)} htmlFor={id}>
+        <input
+          className={css(styles.checkInput)}
+          {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
+          name={id}
+          type="checkbox"
+          ref={elem => elem && (elem.indeterminate = isChecked === null)}
+          aria-invalid={!isValid}
+          disabled={isDisabled}
+          {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
+          {...getOUIAProps(
+            MenuToggleCheckbox.displayName,
+            ouiaId !== undefined ? ouiaId : this.state.ouiaStateId,
+            ouiaSafe
+          )}
+          {...props}
+        />
+        {text}
+      </label>
+    );
+  }
+}

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

@@ -178,7 +178,7 @@ exports[`menu toggle shows isDisabled 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-c-menu-toggle"
+    class="pf-c-menu-toggle pf-m-disabled"
     disabled=""
     type="button"
   >

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -2,7 +2,7 @@
 id: Menu toggle
 section: components
 cssPrefix: pf-c-menu-toggle
-propComponents: ['MenuToggle']
+propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
 beta: true
 ---
 
@@ -137,6 +137,40 @@ import { MenuToggle } from '@patternfly/react-core';
 </React.Fragment>
 ```
 
+### Split button (checkbox)
+    
+```ts file='MenuToggleSplitButtonCheckbox.tsx'
+```
+
+### Split button (checkbox with toggle text)
+    
+```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
+```
+
+### Split button (checkbox, primary)
+    
+```ts file='MenuToggleSplitButtonCheckboxPrimary.tsx'
+```
+
+### Split button (checkbox, secondary)
+    
+```ts file='MenuToggleSplitButtonCheckboxSecondary.tsx'
+```
+
+### Split button (action)
+    
+```ts file='MenuToggleSplitButtonAction.tsx'
+```
+
+### Split button (action, primary)
+    
+```ts file='MenuToggleSplitButtonActionPrimary.tsx'
+```
+
+### Split button (action, secondary)
+    
+```ts file='MenuToggleSplitButtonActionSecondary.tsx'
+```
 
 ### With icon/image and text
 
@@ -191,5 +225,4 @@ const fullWidth: React.FunctionComponent = () => {
     </MenuToggle>
   );
 }
-    
 ```

package/src/components/MenuToggle/examples/MenuToggleSplitButtonAction.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { MenuToggleAction, MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle
+      isDisabled
+      splitButtonOptions={{
+        variant: 'action',
+        items: [
+          <MenuToggleAction
+            id="split-button-action-disabled-example-with-toggle-button"
+            key="split-action-disabled"
+            aria-label="Action"
+            isDisabled
+          >
+            Action
+          </MenuToggleAction>
+        ]
+      }}
+      aria-label="Menu toggle with action split button"
+    />{' '}
+    <MenuToggle
+      splitButtonOptions={{
+        variant: 'action',
+        items: [
+          <MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
+            Action
+          </MenuToggleAction>
+        ]
+      }}
+      aria-label="Menu toggle with action split button"
+    />{' '}
+    <MenuToggle
+      isExpanded
+      splitButtonOptions={{
+        variant: 'action',
+        items: [
+          <MenuToggleAction
+            id="split-button-action-expanded-example-with-toggle-button"
+            key="split-action-expanded"
+            aria-label="Action"
+          >
+            Action
+          </MenuToggleAction>
+        ]
+      }}
+      aria-label="Menu toggle with action split button"
+    />
+  </React.Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleSplitButtonActionPrimary.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { MenuToggleAction, MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSplitButtonActionPrimary: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle
+      isDisabled
+      variant="primary"
+      splitButtonOptions={{
+        variant: 'action',
+        items: [
+          <MenuToggleAction
+            id="split-button-action-primary-disabled-example-with-toggle-button"
+            key="split-action-primary-disabled"
+            aria-label="Action"
+            isDisabled
+          >
+            Action
+          </MenuToggleAction>
+        ]
+      }}
+      aria-label="Menu toggle with action split button"
+    />{' '}
+    <MenuToggle
+      variant="primary"
+      splitButtonOptions={{
+        variant: 'action',
+        items: [
+          <MenuToggleAction
+            id="split-button-action-primary-example-with-toggle-button"
+            key="split-action-primary"
+            aria-label="Action"
+          >
+            Action
+          </MenuToggleAction>
+        ]
+      }}
+      aria-label="Menu toggle with action split button"
+    />{' '}
+    <MenuToggle
+      isExpanded
+      variant="primary"
+      splitButtonOptions={{
+        variant: 'action',
+        items: [
+          <MenuToggleAction
+            id="split-button-action-primary-expanded-example-with-toggle-button"
+            key="split-action-primary-expanded"
+            aria-label="Action"
+          >
+            Action
+          </MenuToggleAction>
+        ]
+      }}
+      aria-label="Menu toggle with action split button"
+    />
+  </React.Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleSplitButtonActionSecondary.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { MenuToggleAction, MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSplitButtonActionSecondary: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle
+      isDisabled
+      variant="secondary"
+      splitButtonOptions={{
+        variant: 'action',
+        items: [
+          <MenuToggleAction
+            id="split-button-action-secondary-disabled-example-with-toggle-button"
+            key="split-action-secondary-disabled"
+            aria-label="Action"
+            isDisabled
+          >
+            Action
+          </MenuToggleAction>
+        ]
+      }}
+      aria-label="Menu toggle with action split button"
+    />{' '}
+    <MenuToggle
+      variant="secondary"
+      splitButtonOptions={{
+        variant: 'action',
+        items: [
+          <MenuToggleAction
+            id="split-button-action-secondary-example-with-toggle-button"
+            key="split-action-secondary"
+            aria-label="Action"
+          >
+            Action
+          </MenuToggleAction>
+        ]
+      }}
+      aria-label="Menu toggle with action split button"
+    />{' '}
+    <MenuToggle
+      isExpanded
+      variant="secondary"
+      splitButtonOptions={{
+        variant: 'action',
+        items: [
+          <MenuToggleAction
+            id="split-button-action-secondary-expanded-example-with-toggle-button"
+            key="split-action-secondary-expanded"
+            aria-label="Action"
+          >
+            Action
+          </MenuToggleAction>
+        ]
+      }}
+      aria-label="Menu toggle with action split button"
+    />
+  </React.Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckbox.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSplitButtonCheckbox: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle
+      isDisabled
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-disabled-example"
+            key="split-checkbox-disabled"
+            aria-label="Select all"
+            isDisabled
+          />
+        ]
+      }}
+      aria-label="Menu toggle with checkbox split button"
+    />{' '}
+    <MenuToggle
+      splitButtonOptions={{
+        items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
+      }}
+      aria-label="Menu toggle with checkbox split button"
+    />{' '}
+    <MenuToggle
+      isExpanded
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-expanded-example"
+            key="split-checkbox-expanded"
+            aria-label="Select all"
+          />
+        ]
+      }}
+      aria-label="Menu toggle with checkbox split button"
+    />
+  </React.Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxPrimary.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSplitButtonCheckboxPrimary: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle
+      isDisabled
+      variant="primary"
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-primary-disabled-example"
+            key="split-checkbox-primary-disabled"
+            aria-label="Select all"
+            isDisabled
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Primary menu toggle with checkbox split button"
+    />{' '}
+    <MenuToggle
+      variant="primary"
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-primary-example"
+            key="split-checkbox-primary"
+            aria-label="Select all"
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Primary menu toggle with checkbox split button"
+    />{' '}
+    <MenuToggle
+      isExpanded
+      variant="primary"
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-primary-expanded-example"
+            key="split-checkbox-expanded"
+            aria-label="Select all"
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Primary menu toggle with checkbox split button"
+    />
+  </React.Fragment>
+);