@patternfly/react-core 4.268.2 → 5.0.0-alpha.2

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
 import { css } from '@patternfly/react-styles';
-import { DropdownItem, DropdownDirection, DropdownWithContext, DropdownContext } from '../Dropdown';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import { OptionsToggle } from './OptionsToggle';
-import { ToggleTemplateProps, ToggleTemplate } from './ToggleTemplate';
+import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
+import { MenuToggle } from '../MenuToggle';
+import { Popper } from '../../helpers/Popper/Popper';
+import { PaginationToggleTemplateProps, ToggleTemplate } from './ToggleTemplate';
 import { PerPageOptions, OnPerPageSelect } from './Pagination';
+import { fillTemplate } from '../../helpers';
 
 export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivElement> {
   /** Custom class name added to the pagination options menu. */
@@ -27,7 +27,7 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   /** The type or title of the items being paginated. */
   itemsTitle?: string;
   /** Accessible label for the options toggle. */
-  optionsToggle?: string;
+  optionsToggleAriaLabel?: string;
   /** The total number of items being paginated. */
   itemCount?: number;
   /** The first index of the items being paginated. */
@@ -37,7 +37,7 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   /** Flag to indicate whether to show last full page of results when user selects perPage
    * value that is greater than remaining rows.
    */
-  defaultToFullPage?: boolean;
+  isLastFullPageShown?: boolean;
   /** The number of items to be displayed per page. */
   perPage?: number;
   /** The number of the last page. */
@@ -45,68 +45,56 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
    * itemCount, and/or itemsTitle props.
    */
-  toggleTemplate: ((props: ToggleTemplateProps) => React.ReactElement) | string;
+  toggleTemplate: ((props: PaginationToggleTemplateProps) => React.ReactElement) | string;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of". */
   ofWord?: string;
-  /** Component to be used for wrapping the toggle contents. Use 'button' when you want
-   * all of the toggle text to be clickable.
-   */
-  perPageComponent?: 'div' | 'button';
-}
-
-interface PaginationOptionsMenuState {
-  isOpen: boolean;
 }
 
-export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenuProps, PaginationOptionsMenuState> {
-  static displayName = 'PaginationOptionsMenu';
-  private parentRef = React.createRef<HTMLDivElement>();
-  static defaultProps: PaginationOptionsMenuProps = {
-    className: '',
-    widgetId: '',
-    isDisabled: false,
-    dropDirection: DropdownDirection.down,
-    perPageOptions: [] as PerPageOptions[],
-    itemsPerPageTitle: 'Items per page',
-    perPageSuffix: 'per page',
-    optionsToggle: '',
-    ofWord: 'of',
-    perPage: 0,
-    firstIndex: 0,
-    lastIndex: 0,
-    defaultToFullPage: false,
-    itemsTitle: 'items',
-    toggleTemplate: ToggleTemplate,
-    onPerPageSelect: () => null as any,
-    perPageComponent: 'div'
-  };
-
-  constructor(props: PaginationOptionsMenuProps) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-  }
+export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMenuProps> = ({
+  className,
+  widgetId,
+  page: pageProp,
+  itemCount,
+  isDisabled = false,
+  dropDirection = 'down',
+  perPageOptions = [] as PerPageOptions[],
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  itemsPerPageTitle = 'Items per page',
+  perPageSuffix = 'per page',
+  optionsToggleAriaLabel,
+  ofWord = 'of',
+  perPage = 0,
+  firstIndex = 0,
+  lastIndex = 0,
+  isLastFullPageShown = false,
+  itemsTitle = 'items',
+  toggleTemplate,
+  onPerPageSelect = () => null as any
+}: PaginationOptionsMenuProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
-  onToggle = (isOpen: boolean) => {
-    this.setState({ isOpen });
+  const onToggle = () => {
+    setIsOpen(prevState => !prevState);
   };
 
-  onSelect = () => {
-    this.setState((prevState: PaginationOptionsMenuState) => ({ isOpen: !prevState.isOpen }));
+  const onSelect = () => {
+    setIsOpen(prevState => !prevState);
+    toggleRef.current?.focus();
   };
 
-  handleNewPerPage = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number) => {
-    const { page, onPerPageSelect, itemCount, defaultToFullPage } = this.props;
-    let newPage = page;
+  const handleNewPerPage = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number) => {
+    let newPage = pageProp;
 
     while (Math.ceil(itemCount / newPerPage) < newPage) {
       newPage--;
     }
 
-    if (defaultToFullPage) {
+    if (isLastFullPageShown) {
       if (itemCount / newPerPage !== newPage) {
         while (newPage > 1 && itemCount - newPerPage * newPage < 0) {
           newPage--;
@@ -118,90 +106,108 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
     return onPerPageSelect(_evt, newPerPage, newPage, startIdx, endIdx);
   };
 
-  renderItems = () => {
-    const { perPageOptions, perPage, perPageSuffix } = this.props;
+  React.useEffect(() => {
+    const handleMenuKeys = (event: KeyboardEvent) => {
+      // Close the menu on tab or escape
+      if (
+        (isOpen && menuRef.current?.contains(event.target as Node)) ||
+        toggleRef.current?.contains(event.target as Node)
+      ) {
+        if (event.key === 'Escape' || event.key === 'Tab') {
+          setIsOpen(false);
+          toggleRef.current?.focus();
+        }
+      }
+    };
 
-    return perPageOptions.map(({ value, title }) => (
-      <DropdownItem
+    const handleClick = (event: MouseEvent) => {
+      // If the event is on the toggle and was fired via keyboard 'click', focus the first
+      // non-disabled menu item
+      // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+      if (event.detail === 0 && isOpen && toggleRef.current?.contains(event.target as Node)) {
+        setTimeout(() => {
+          const firstElement = menuRef?.current?.querySelector('li button:not(:disabled)');
+          firstElement && (firstElement as HTMLElement).focus();
+        }, 0);
+      }
+
+      // If the event is not on the toggle, close the menu
+      if (
+        isOpen &&
+        !toggleRef?.current?.contains(event.target as Node) &&
+        !menuRef.current?.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClick);
+
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClick);
+    };
+  }, [isOpen, menuRef]);
+
+  const renderItems = () =>
+    perPageOptions.map(({ value, title }) => (
+      <MenuItem
         key={value}
-        component="button"
         data-action={`per-page-${value}`}
-        className={css(perPage === value && 'pf-m-selected')}
-        onClick={event => this.handleNewPerPage(event, value)}
+        isSelected={perPage === value}
+        onClick={event => handleNewPerPage(event, value)}
       >
         {title}
         {` ${perPageSuffix}`}
-        {perPage === value && (
-          <div className={css(styles.optionsMenuMenuItemIcon)}>
-            <CheckIcon />
-          </div>
-        )}
-      </DropdownItem>
+      </MenuItem>
     ));
-  };
 
-  render() {
-    const {
-      widgetId,
-      isDisabled,
-      itemsPerPageTitle,
-      dropDirection,
-      optionsToggle,
-      perPageOptions,
-      toggleTemplate,
-      firstIndex,
-      lastIndex,
-      itemCount,
-      itemsTitle,
-      ofWord,
-      perPageComponent
-    } = this.props;
-    const { isOpen } = this.state;
-
-    return (
-      <DropdownContext.Provider
-        value={{
-          ...(widgetId && { id: widgetId }),
-          onSelect: this.onSelect,
-          toggleIndicatorClass:
-            perPageComponent === 'div' ? styles.optionsMenuToggleButtonIcon : styles.optionsMenuToggleIcon,
-          toggleTextClass: styles.optionsMenuToggleText,
-          menuClass: styles.optionsMenuMenu,
-          itemClass: styles.optionsMenuMenuItem,
-          toggleClass: ' ',
-          baseClass: styles.optionsMenu,
-          disabledClass: styles.modifiers.disabled,
-          menuComponent: 'ul',
-          baseComponent: 'div',
-          ouiaComponentType: PaginationOptionsMenu.displayName
-        }}
-      >
-        <DropdownWithContext
-          direction={dropDirection}
-          isOpen={isOpen}
-          toggle={
-            <OptionsToggle
-              optionsToggle={optionsToggle}
-              itemsPerPageTitle={itemsPerPageTitle}
-              showToggle={perPageOptions && perPageOptions.length > 0}
-              onToggle={this.onToggle}
-              isOpen={isOpen}
-              widgetId={widgetId}
-              firstIndex={firstIndex}
-              lastIndex={lastIndex}
-              itemCount={itemCount}
-              itemsTitle={itemsTitle}
-              ofWord={ofWord}
-              toggleTemplate={toggleTemplate}
-              parentRef={this.parentRef.current}
-              isDisabled={isDisabled}
-              perPageComponent={perPageComponent}
-            />
-          }
-          dropdownItems={this.renderItems()}
-          isPlain
+  const toggle = (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggle}
+      {...(optionsToggleAriaLabel && { 'aria-label': optionsToggleAriaLabel })}
+      isDisabled={isDisabled || (itemCount && itemCount <= 0)}
+      isExpanded={isOpen}
+      {...(widgetId && { id: `${widgetId}-toggle` })}
+      variant="plainText"
+      aria-haspopup="listbox"
+    >
+      {typeof toggleTemplate === 'string' ? (
+        fillTemplate(toggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })
+      ) : (
+        <ToggleTemplate
+          firstIndex={firstIndex}
+          lastIndex={lastIndex}
+          ofWord={ofWord}
+          itemCount={itemCount}
+          itemsTitle={itemsTitle}
         />
-      </DropdownContext.Provider>
-    );
-  }
-}
+      )}
+    </MenuToggle>
+  );
+
+  const menu = (
+    <Menu className={css(className)} onSelect={onSelect} ref={menuRef}>
+      <MenuContent>
+        <MenuList>{renderItems()}</MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <div ref={containerRef}>
+      <Popper
+        trigger={toggle}
+        popper={menu}
+        isVisible={isOpen}
+        direction={dropDirection}
+        appendTo={containerRef.current || undefined}
+        popperMatchesTriggerWidth={false}
+      />
+    </div>
+  );
+};
+
+PaginationOptionsMenu.displayName = 'PaginationOptionsMenu';

package/src/components/Pagination/ToggleTemplate.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
  * should be passed into the pagination component's toggleTemplate property.
  */
 
-export interface ToggleTemplateProps {
+export interface PaginationToggleTemplateProps {
   /** The first index of the items being paginated */
   firstIndex?: number;
   /** The last index of the items being paginated */
@@ -17,13 +17,13 @@ export interface ToggleTemplateProps {
   ofWord?: React.ReactNode;
 }
 
-export const ToggleTemplate: React.FunctionComponent<ToggleTemplateProps> = ({
+export const ToggleTemplate: React.FunctionComponent<PaginationToggleTemplateProps> = ({
   firstIndex = 0,
   lastIndex = 0,
   itemCount = 0,
   itemsTitle = 'items',
   ofWord = 'of'
-}: ToggleTemplateProps) => (
+}: PaginationToggleTemplateProps) => (
   <React.Fragment>
     <b>
       {firstIndex} - {lastIndex}

package/src/components/Pagination/__tests__/Generated/PaginationOptionsMenu.test.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 import { PaginationOptionsMenu } from '../../PaginationOptionsMenu';
 // any missing imports can usually be resolved by adding them here
-import { ToggleTemplateProps } from '../..';
+import { PaginationToggleTemplateProps } from '../..';
 
 it('PaginationOptionsMenu should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
@@ -19,14 +19,13 @@ it('PaginationOptionsMenu should match snapshot (auto-generated)', () => {
       page={42}
       perPageSuffix={"'per page'"}
       itemsTitle={"'items'"}
-      optionsToggle={"'Select'"}
       itemCount={0}
       firstIndex={0}
       lastIndex={0}
-      defaultToFullPage={false}
+      isLastFullPageShown={false}
       perPage={0}
       lastPage={42}
-      toggleTemplate={({ firstIndex, lastIndex, itemCount, itemsTitle }: ToggleTemplateProps) => (
+      toggleTemplate={({ firstIndex, lastIndex, itemCount, itemsTitle }: PaginationToggleTemplateProps) => (
         <React.Fragment>
           <b>
             {firstIndex} - {lastIndex}

package/src/components/Pagination/__tests__/Generated/__snapshots__/Navigation.test.tsx.snap

@@ -3,15 +3,21 @@
 exports[`Navigation should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="'Pagination'"
+    aria-label="Pagination"
     class="pf-c-pagination__nav ''"
+    currpage="'Current page'"
+    paginationtitle="'Pagination'"
+    tofirstpage="'Go to first page'"
+    tolastpage="'Go to last page'"
+    tonextpage="'Go to next page'"
+    topreviouspage="'Go to previous page'"
   >
     <div
       class="pf-c-pagination__nav-control pf-m-first"
     >
       <button
         aria-disabled="false"
-        aria-label="'Go to first page'"
+        aria-label="Go to first page"
         class="pf-c-button pf-m-plain"
         data-action="first"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -39,7 +45,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
     >
       <button
         aria-disabled="false"
-        aria-label="'Go to previous page'"
+        aria-label="Go to previous page"
         class="pf-c-button pf-m-plain"
         data-action="previous"
         data-ouia-component-id="OUIA-Generated-Button-plain-2"
@@ -66,7 +72,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
       class="pf-c-pagination__nav-page-select"
     >
       <input
-        aria-label="'Current page'"
+        aria-label="Current page"
         class="pf-c-form-control"
         max="0"
         min="0"
@@ -79,7 +85,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
     >
       <button
         aria-disabled="false"
-        aria-label="'Go to next page'"
+        aria-label="Go to next page"
         class="pf-c-button pf-m-plain"
         data-action="next"
         data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -107,7 +113,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
     >
       <button
         aria-disabled="false"
-        aria-label="'Go to last page'"
+        aria-label="Go to last page"
         class="pf-c-button pf-m-plain"
         data-action="last"
         data-ouia-component-id="OUIA-Generated-Button-plain-4"

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap

@@ -2,14 +2,52 @@
 
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <div
-    class="pf-c-options-menu pf-m-top"
-    data-ouia-component-type="PF4/PaginationOptionsMenu"
-    data-ouia-safe="true"
-  >
+  <div>
     <div
-      class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
-    />
+      style="display: contents;"
+    >
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="pf-c-menu-toggle pf-m-plain pf-m-text"
+        id="''-toggle"
+        type="button"
+      >
+        <span
+          class="pf-c-menu-toggle__text"
+        >
+          <b>
+            0 - 0
+          </b>
+           of 
+          <b>
+            0
+          </b>
+           'items'
+        </span>
+        <span
+          class="pf-c-menu-toggle__controls"
+        >
+          <span
+            class="pf-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 320 512"
+              width="1em"
+            >
+              <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>
+        </span>
+      </button>
+    </div>
   </div>
 </DocumentFragment>
 `;

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

@@ -108,15 +108,17 @@ describe('Pagination', () => {
       expect(screen.getAllByText('I am a string')[0]).toBeInTheDocument();
     });
 
-    test('should render correctly button variant', () => {
-      const { asFragment } = render(<Pagination perPageComponent="button" itemCount={20} />);
-      expect(asFragment()).toMatchSnapshot();
+    test('should not update generated options menu id on rerenders', () => {
+      const { rerender } = render(<Pagination titles={{ optionsToggleAriaLabel: 'test label' }} itemCount={20} />);
+      const id = screen.getByLabelText('test label').getAttribute('id');
+      rerender(<Pagination titles={{ optionsToggleAriaLabel: 'test label' }} itemCount={20} />);
+      expect(screen.getByLabelText('test label')).toHaveAttribute('id', id);
     });
 
     test('should not update generated options menu id on rerenders', () => {
-      const { rerender } = render(<Pagination titles={{optionsToggle: "test label"}} perPageComponent="button" itemCount={20}/>);
+      const { rerender } = render(<Pagination titles={{optionsToggleAriaLabel: "test label"}} itemCount={20}/>);
       const id = screen.getByLabelText("test label").getAttribute("id");
-      rerender(<Pagination titles={{optionsToggle: "test label"}}  perPageComponent="button" itemCount={20} />);
+      rerender(<Pagination titles={{optionsToggleAriaLabel: "test label"}} itemCount={20} />);
       expect(screen.getByLabelText("test label")).toHaveAttribute("id", id);
     });
 
@@ -168,7 +170,7 @@ describe('Pagination', () => {
 
       test('should call input', async () => {
         const user = userEvent.setup();
-        
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
@@ -180,7 +182,7 @@ describe('Pagination', () => {
 
       test('should call input wrong value', async () => {
         const user = userEvent.setup();
-        
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
@@ -313,9 +315,9 @@ describe('Pagination', () => {
       test('should call', async () => {
         const user = userEvent.setup();
 
-        render(<Pagination onPerPageSelect={onPerPage} itemCount={40} />);
+        render(<Pagination page={1} onPerPageSelect={onPerPage} itemCount={40} />);
 
-        await user.click(screen.getByRole('button', { name: 'Items per page' }));
+        await user.click(screen.getByRole('button', { name: '1 - 10 of 40' }));
         await user.click(screen.getByText('20 per page'));
 
         expect(onPerPage).toHaveBeenCalled();
@@ -324,9 +326,9 @@ describe('Pagination', () => {
       test('should NOT call', async () => {
         const user = userEvent.setup();
 
-        render(<Pagination itemCount={40} />);
+        render(<Pagination page={1} itemCount={40} />);
 
-        await user.click(screen.getByRole('button', { name: 'Items per page' }));
+        await user.click(screen.getByRole('button', { name: '1 - 10 of 40' }));
         await user.click(screen.getByText('20 per page'));
 
         expect(onPerPage).not.toHaveBeenCalled();