@patternfly/react-core 4.214.3 → 4.215.0

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem,
+  DropdownSeparator
+} from '@patternfly/react-core';
+
+export const DropdownSplitButtonIndeterminate: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isChecked, setIsChecked] = React.useState(null);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-split-button-indeterminate');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const onChange = (isChecked: boolean) => {
+    setIsChecked(isChecked);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle
+          splitButtonItems={[
+            <DropdownToggleCheckbox
+              id="split-button-indeterminate-checkbox"
+              key="split-checkbox"
+              aria-label="Select all"
+              onChange={checked => onChange(checked)}
+              isChecked={isChecked}
+            />
+          ]}
+          onToggle={onToggle}
+          id="toggle-split-button-indeterminate"
+        />
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem,
+  DropdownSeparator
+} from '@patternfly/react-core';
+
+export const DropdownSplitButtonText: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-split-button-text');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle
+          splitButtonItems={[
+            <DropdownToggleCheckbox id="split-button-text-checkbox" key="split-checkbox" aria-label="Select all">
+              10 selected
+            </DropdownToggleCheckbox>
+          ]}
+          onToggle={onToggle}
+          id="toggle-split-button-text"
+        />
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

package/src/components/Menu/MenuItem.tsx

@@ -8,10 +8,12 @@ import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import { Checkbox } from '../Checkbox';
 import { MenuContext, MenuItemContext } from './MenuContext';
 import { MenuItemAction } from './MenuItemAction';
 import { canUseDOM } from '../../helpers/util';
 import { useIsomorphicLayoutEffect } from '../../helpers/useIsomorphicLayout';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick'> {
   /** Content rendered inside the menu list item. */
@@ -22,6 +24,8 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   itemId?: any;
   /** Target navigation link */
   to?: string;
+  /** @beta Flag indicating the item has a checkbox */
+  hasCheck?: boolean;
   /** Flag indicating whether the item is active */
   isActive?: boolean;
   /** Flag indicating if the item is favorited */
@@ -71,6 +75,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   className,
   itemId = null,
   to,
+  hasCheck = false,
   isActive = null,
   isFavorited = null,
   isLoadButton = false,
@@ -105,7 +110,10 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     setFlyoutRef,
     disableHover
   } = React.useContext(MenuContext);
-  const Component = (to ? 'a' : component) as any;
+  let Component = (to ? 'a' : component) as any;
+  if (hasCheck && !to) {
+    Component = 'label' as any;
+  }
   const [flyoutTarget, setFlyoutTarget] = React.useState(null);
   const flyoutContext = React.useContext(FlyoutContext);
   const [flyoutXDirection, setFlyoutXDirection] = React.useState(flyoutContext.direction);
@@ -287,52 +295,70 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       onMouseOver={onMouseOver}
       {...(flyoutMenu && { onKeyDown: handleFlyout })}
       ref={ref}
-      role="none"
+      role={!hasCheck ? 'none' : 'menuitem'}
       {...props}
     >
-      <Component
-        tabIndex={-1}
-        className={css(styles.menuItem, getIsSelected() && styles.modifiers.selected, className)}
-        aria-current={getAriaCurrent()}
-        disabled={isDisabled}
-        role="menuitem"
-        ref={innerRef}
-        onClick={(event: any) => {
-          onItemSelect(event, onSelect);
-          _drill && _drill();
-        }}
-        {...additionalProps}
-      >
-        <span className={css(styles.menuItemMain)}>
-          {direction === 'up' && (
-            <span className={css(styles.menuItemToggleIcon)}>
-              <AngleLeftIcon aria-hidden />
-            </span>
-          )}
-          {icon && <span className={css(styles.menuItemIcon)}>{icon}</span>}
-          <span className={css(styles.menuItemText)}>{children}</span>
-          {isExternalLink && (
-            <span className={css(styles.menuItemExternalIcon)}>
-              <ExternalLinkAltIcon aria-hidden />
-            </span>
-          )}
-          {(flyoutMenu || direction === 'down') && (
-            <span className={css(styles.menuItemToggleIcon)}>
-              <AngleRightIcon aria-hidden />
-            </span>
-          )}
-          {getIsSelected() && (
-            <span className={css(styles.menuItemSelectIcon)}>
-              <CheckIcon aria-hidden />
+      <GenerateId>
+        {randomId => (
+          <Component
+            tabIndex={-1}
+            className={css(styles.menuItem, getIsSelected() && !hasCheck && styles.modifiers.selected, className)}
+            aria-current={getAriaCurrent()}
+            {...(!hasCheck && { disabled: isDisabled })}
+            {...(!hasCheck && { role: 'menuitem' })}
+            ref={innerRef}
+            {...(!hasCheck && {
+              onClick: (event: any) => {
+                onItemSelect(event, onSelect);
+                _drill && _drill();
+              }
+            })}
+            {...(hasCheck && { htmlFor: randomId })}
+            {...additionalProps}
+          >
+            <span className={css(styles.menuItemMain)}>
+              {direction === 'up' && (
+                <span className={css(styles.menuItemToggleIcon)}>
+                  <AngleLeftIcon aria-hidden />
+                </span>
+              )}
+              {icon && <span className={css(styles.menuItemIcon)}>{icon}</span>}
+              {hasCheck && (
+                <span className={css('pf-c-menu__item-check')}>
+                  <Checkbox
+                    id={randomId}
+                    component="span"
+                    isChecked={isSelected || false}
+                    onChange={event => onItemSelect(event, onSelect)}
+                    isDisabled={isDisabled}
+                  />
+                </span>
+              )}
+              <span className={css(styles.menuItemText)}>{children}</span>
+              {isExternalLink && (
+                <span className={css(styles.menuItemExternalIcon)}>
+                  <ExternalLinkAltIcon aria-hidden />
+                </span>
+              )}
+              {(flyoutMenu || direction === 'down') && (
+                <span className={css(styles.menuItemToggleIcon)}>
+                  <AngleRightIcon aria-hidden />
+                </span>
+              )}
+              {getIsSelected() && (
+                <span className={css(styles.menuItemSelectIcon)}>
+                  <CheckIcon aria-hidden />
+                </span>
+              )}
             </span>
-          )}
-        </span>
-        {description && direction !== 'up' && (
-          <span className={css(styles.menuItemDescription)}>
-            <span>{description}</span>
-          </span>
+            {description && direction !== 'up' && (
+              <span className={css(styles.menuItemDescription)}>
+                <span>{description}</span>
+              </span>
+            )}
+          </Component>
         )}
-      </Component>
+      </GenerateId>
       {flyoutVisible && (
         <MenuContext.Provider value={{ disableHover }}>
           <FlyoutContext.Provider value={{ direction: flyoutXDirection }}>{flyoutMenu}</FlyoutContext.Provider>

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

@@ -2,8 +2,12 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 
 import { Menu } from '../Menu';
+import { MenuItem } from '../MenuItem';
+import { MenuList } from '../MenuList';
+import { MenuContent } from '../MenuContent';
 
 describe('Menu', () => {
   test('should render Menu successfully', () => {
@@ -47,4 +51,23 @@ describe('Menu', () => {
       expect(screen.getByText('content')).toHaveClass('pf-m-nav');
     });
   });
+
+  describe('with hasCheck', () => {
+    test('should render Menu with checkbox items', () => {
+      const { asFragment } = render(
+        <Menu>
+          <MenuContent>
+            <MenuList>
+              <MenuItem hasCheck itemId={0}>
+                Checkbox 1
+              </MenuItem>
+            </MenuList>
+          </MenuContent>
+        </Menu>
+      );
+      const checkbox1 = screen.getAllByRole('checkbox')[0];
+      expect(checkbox1).not.toBeChecked();
+      expect(screen.getByText("Checkbox 1")).toBeInTheDocument();
+    });
+  });
 });

package/src/components/Menu/examples/Menu.md

@@ -128,6 +128,11 @@ class MenuIconsList extends React.Component {
 }
 ```
 
+### With checkbox
+
+```ts file="./MenuWithCheckbox.tsx" isBeta
+```
+
 ### Filtering with text input
 
 ```js

package/src/components/Menu/examples/MenuWithCheckbox.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
+
+export const MenuCheckboxList: React.FunctionComponent = () => {
+  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
+
+  /* eslint no-unused-vars: ["error", {"args": "after-used"}] */
+  const onSelect = (event: React.MouseEvent<Element, MouseEvent>, itemId: number | string) => {
+    const item = itemId as number;
+    if (selectedItems.includes(item)) {
+      setSelectedItems(selectedItems.filter(id => id !== item));
+    } else {
+      setSelectedItems([...selectedItems, item]);
+    }
+  };
+
+  return (
+    <Menu onSelect={onSelect} selected={selectedItems}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem hasCheck itemId={0} isSelected={selectedItems.includes(0)}>
+            Checkbox 1
+          </MenuItem>
+          <MenuItem hasCheck itemId={1} isSelected={selectedItems.includes(1)}>
+            Checkbox 2
+          </MenuItem>
+          <MenuItem hasCheck itemId={2} isDisabled>
+            Checkbox 3
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Slider/Slider.tsx

@@ -61,6 +61,10 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   leftActions?: React.ReactNode;
   /** Actions placed to the right of the slider */
   rightActions?: React.ReactNode;
+  /** One or more id's to use for the slider thumb description */
+  'aria-describedby'?: string;
+  /** One or more id's to use for the slider thumb label */
+  'aria-labelledby'?: string;
 }
 
 const getPercentage = (current: number, max: number) => (100 * current) / max;
@@ -86,6 +90,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   max = 100,
   showTicks = false,
   showBoundaries = true,
+  'aria-describedby': ariaDescribedby,
+  'aria-labelledby': ariaLabelledby,
   ...props
 }: SliderProps) => {
   const sliderRailRef = React.useRef<HTMLDivElement>();
@@ -362,6 +368,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       aria-valuetext={findAriaTextValue()}
       aria-label={thumbAriaLabel}
       aria-disabled={isDisabled}
+      aria-describedby={ariaDescribedby}
+      aria-labelledby={ariaLabelledby}
       onMouseDown={!isDisabled ? handleMouseDown : null}
       onTouchStart={!isDisabled ? handleTouchStart : null}
       onKeyDown={!isDisabled ? handleThumbKeys : null}

package/src/components/Slider/_tests_/Slider.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Slider } from '../Slider';
 import { Button } from '../../Button';
 
@@ -79,3 +79,29 @@ describe('slider', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 });
+
+test('renders slider with aria-labelledby', () => {
+  render(
+    <>
+      <p id="test">label text</p>
+      <Slider value={50} aria-labelledby="test" />
+    </>
+  );
+
+  const slider = screen.getByRole('slider', { name: 'label text' });
+
+  expect(slider).toBeVisible();
+});
+
+test('renders slider with aria-describedby', () => {
+  render(
+    <>
+      <p id="test">descriptive text about the slider</p>
+      <Slider value={50} aria-describedby="test" />
+    </>
+  );
+
+  const slider = screen.getByRole('slider', { description: 'descriptive text about the slider' });
+
+  expect(slider).toBeVisible();
+});

package/src/components/TextArea/TextArea.tsx

@@ -125,7 +125,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
   }
 }
 
-export const TextArea = React.forwardRef((props: TextAreaProps, ref: React.Ref<HTMLInputElement>) => (
+export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => (
   <TextAreaBase {...props} innerRef={ref as React.MutableRefObject<any>} />
 ));
 TextArea.displayName = 'TextArea';

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -40,6 +40,11 @@ Composable menus currently require consumer keyboard handling and use of our und
 ```ts file="./examples/ComposableSimpleSelect.tsx"
 ```
 
+### Composable simple checkbox select
+
+```ts isBeta file="./examples/ComposableSimpleCheckboxSelect.tsx"
+```
+
 ### Composable drilldown menu
 
 ```ts isBeta file="./examples/ComposableDrilldownMenu.tsx"

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper, Badge } from '@patternfly/react-core';
+
+export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
+  const toggleRef = React.useRef<HTMLButtonElement>();
+  const menuRef = React.useRef<HTMLDivElement>();
+
+  const handleMenuKeys = React.useCallback(
+    event => {
+      if (menuRef.current) {
+        if (isOpen && menuRef.current.contains(event.target as Node)) {
+          if (event.key === 'Escape' || event.key === 'Tab') {
+            setIsOpen(!isOpen);
+            toggleRef.current.focus();
+          }
+        }
+      }
+    },
+    [isOpen]
+  );
+
+  const handleClickOutside = React.useCallback(
+    event => {
+      if (isOpen && !menuRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    },
+    [isOpen]
+  );
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [handleClickOutside, handleMenuKeys]);
+
+  const onToggleClick = (ev: React.MouseEvent) => {
+    ev.stopPropagation(); // Stop handleClickOutside from handling
+    setTimeout(() => {
+      if (menuRef.current) {
+        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }
+    }, 0);
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: number | string) => {
+    const item = itemId as number;
+    if (selectedItems.includes(item)) {
+      setSelectedItems(selectedItems.filter(id => id !== item));
+    } else {
+      setSelectedItems([...selectedItems, item]);
+    }
+  };
+
+  const toggle = (
+    <MenuToggle
+      ref={toggleRef}
+      {...(selectedItems.length > 0 && { badge: <Badge isRead>{selectedItems.length}</Badge> })}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '220px'
+        } as React.CSSProperties
+      }
+    >
+      Filter by status
+    </MenuToggle>
+  );
+  const menu = (
+    <Menu ref={menuRef} id="select-menu" onSelect={onSelect} selected={selectedItems}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem hasCheck itemId={0} isSelected={selectedItems.includes(0)}>
+            Debug
+          </MenuItem>
+          <MenuItem hasCheck itemId={1} isSelected={selectedItems.includes(1)}>
+            Info
+          </MenuItem>
+          <MenuItem hasCheck itemId={2} isSelected={selectedItems.includes(2)}>
+            Warn
+          </MenuItem>
+          <MenuItem hasCheck isDisabled itemId={4} isSelected={selectedItems.includes(4)}>
+            Error
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
+};