@patternfly/react-core 6.0.0-alpha.56 → 6.0.0-alpha.58

package/src/deprecated/components/Dropdown/Toggle.tsx

@@ -1,183 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
-import { DropdownContext } from './dropdownConstants';
-import { css } from '@patternfly/react-styles';
-import { KeyTypes } from '../../../helpers/constants';
-import { PickOptional } from '../../../helpers/typeUtils';
-
-export interface ToggleProps {
-  /** HTML ID of dropdown toggle */
-  id: string;
-  /** Type to put on the button */
-  type?: 'button' | 'submit' | 'reset';
-  /** Anything which can be rendered as dropdown toggle */
-  children?: React.ReactNode;
-  /** Classes applied to root element of dropdown toggle */
-  className?: string;
-  /** Flag to indicate if menu is opened */
-  isOpen?: boolean;
-  /** Callback called when toggle is clicked */
-  onToggle?: (
-    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
-    isOpen: boolean
-  ) => void;
-  /** Callback called when the Enter key is pressed */
-  onEnter?: () => void;
-  /** Element which wraps toggle */
-  parentRef?: any;
-  /** The menu element */
-  getMenuRef?: () => HTMLElement;
-  /** Forces active state */
-  isActive?: boolean;
-  /** Disables the dropdown toggle */
-  isDisabled?: boolean;
-  /** Display the toggle with no border or background */
-  isPlain?: boolean;
-  /** Display the toggle in text only mode */
-  isText?: boolean;
-  /** Style the toggle as a child of a split button */
-  isSplitButton?: boolean;
-  /** Alternate styles for the dropdown toggle button */
-  toggleVariant?: 'primary' | 'secondary' | 'default';
-  /** Flag for aria popup */
-  'aria-haspopup'?: boolean | 'listbox' | 'menu' | 'dialog' | 'grid' | 'tree';
-  /** Allows selecting toggle to select parent */
-  bubbleEvent?: boolean;
-}
-
-const buttonVariantStyles = {
-  default: '',
-  primary: styles.modifiers.primary,
-  secondary: styles.modifiers.secondary
-};
-
-class Toggle extends React.Component<ToggleProps> {
-  static displayName = 'Toggle';
-  private buttonRef = React.createRef<HTMLButtonElement>();
-
-  static defaultProps: PickOptional<ToggleProps> = {
-    className: '',
-    isOpen: false,
-    isActive: false,
-    isDisabled: false,
-    isPlain: false,
-    isText: false,
-    isSplitButton: false,
-    onToggle: () => {},
-    onEnter: () => {},
-    bubbleEvent: false
-  };
-
-  componentDidMount = () => {
-    document.addEventListener('click', this.onDocClick);
-    document.addEventListener('touchstart', this.onDocClick);
-    document.addEventListener('keydown', this.onEscPress);
-  };
-
-  componentWillUnmount = () => {
-    document.removeEventListener('click', this.onDocClick);
-    document.removeEventListener('touchstart', this.onDocClick);
-    document.removeEventListener('keydown', this.onEscPress);
-  };
-
-  onDocClick = (event: MouseEvent | TouchEvent) => {
-    const { isOpen, parentRef, onToggle, getMenuRef } = this.props;
-    const menuRef = getMenuRef && getMenuRef();
-    const clickedOnToggle = parentRef && parentRef.current && parentRef.current.contains(event.target as Node);
-    const clickedWithinMenu = menuRef && menuRef.contains && menuRef.contains(event.target as Node);
-    if (isOpen && !(clickedOnToggle || clickedWithinMenu)) {
-      onToggle?.(event, false);
-    }
-  };
-
-  onEscPress = (event: KeyboardEvent) => {
-    const { parentRef, getMenuRef } = this.props;
-    const menuRef = getMenuRef && getMenuRef();
-    const escFromToggle = parentRef && parentRef.current && parentRef.current.contains(event.target as Node);
-    const escFromWithinMenu = menuRef && menuRef.contains && menuRef.contains(event.target as Node);
-    if (
-      this.props.isOpen &&
-      (event.key === KeyTypes.Escape || event.key === 'Tab') &&
-      (escFromToggle || escFromWithinMenu)
-    ) {
-      this.props.onToggle?.(event, false);
-      this.buttonRef.current?.focus();
-    }
-  };
-
-  onKeyDown = (event: React.KeyboardEvent<any>) => {
-    if (event.key === 'Tab' && !this.props.isOpen) {
-      return;
-    }
-    if ((event.key === 'Tab' || event.key === 'Enter' || event.key === ' ') && this.props.isOpen) {
-      if (!this.props.bubbleEvent) {
-        event.stopPropagation();
-      }
-      event.preventDefault();
-
-      this.props.onToggle?.(event, !this.props.isOpen);
-    } else if ((event.key === 'Enter' || event.key === ' ') && !this.props.isOpen) {
-      if (!this.props.bubbleEvent) {
-        event.stopPropagation();
-      }
-      event.preventDefault();
-
-      this.props.onToggle?.(event, !this.props.isOpen);
-      this.props.onEnter?.();
-    }
-  };
-
-  render() {
-    const {
-      className,
-      children,
-      isOpen,
-      isDisabled,
-      isPlain,
-      isText,
-      isSplitButton,
-      toggleVariant,
-      onToggle,
-      'aria-haspopup': ariaHasPopup,
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      isActive,
-      bubbleEvent,
-      onEnter,
-      parentRef,
-      getMenuRef,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      id,
-      type,
-      ...props
-    } = this.props;
-    return (
-      <DropdownContext.Consumer>
-        {({ toggleClass }) => (
-          <button
-            {...props}
-            id={id}
-            ref={this.buttonRef}
-            className={css(
-              isSplitButton ? styles.dropdownToggleButton : toggleClass || styles.dropdownToggle,
-              isActive && styles.modifiers.active,
-              isPlain && styles.modifiers.plain,
-              isText && styles.modifiers.text,
-              toggleVariant && buttonVariantStyles[toggleVariant],
-              className
-            )}
-            type={type || 'button'}
-            onClick={(event) => onToggle?.(event, !isOpen)}
-            aria-expanded={isOpen}
-            aria-haspopup={ariaHasPopup}
-            onKeyDown={(event) => this.onKeyDown(event)}
-            disabled={isDisabled}
-          >
-            {children}
-          </button>
-        )}
-      </DropdownContext.Consumer>
-    );
-  }
-}
-
-export { Toggle };

package/src/deprecated/components/Dropdown/__tests__/Dropdown.test.tsx

@@ -1,278 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { Dropdown } from '../Dropdown';
-import { DropdownPosition, DropdownDirection } from '../dropdownConstants';
-import { InternalDropdownItem } from '../InternalDropdownItem';
-import { DropdownSeparator } from '../DropdownSeparator';
-import { DropdownToggle } from '../DropdownToggle';
-import { KebabToggle } from '../KebabToggle';
-
-const dropdownItems = [
-  <InternalDropdownItem key="link">Link</InternalDropdownItem>,
-  <InternalDropdownItem key="action" component="button">
-    Action
-  </InternalDropdownItem>,
-  <InternalDropdownItem key="disabled link" isDisabled>
-    Disabled Link
-  </InternalDropdownItem>,
-  <InternalDropdownItem key="disabled action" isDisabled component="button">
-    Disabled Action
-  </InternalDropdownItem>,
-  <DropdownSeparator key="separator" />,
-  <InternalDropdownItem key="separated link">Separated Link</InternalDropdownItem>,
-  <InternalDropdownItem key="separated action" component="button">
-    Separated Action
-  </InternalDropdownItem>
-];
-
-describe('Dropdown', () => {
-  test('regular', () => {
-    const { asFragment } = render(
-      <Dropdown dropdownItems={dropdownItems} toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>} />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('right aligned', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        position={DropdownPosition.right}
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('alignment breakpoints', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        alignments={{
-          sm: 'left',
-          md: 'right',
-          lg: 'left',
-          xl: 'right',
-          '2xl': 'left'
-        }}
-        aria-label="Dropdown button"
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-        isOpen
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('dropup', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        direction={DropdownDirection.up}
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('dropup + right aligned', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        direction={DropdownDirection.up}
-        position={DropdownPosition.right}
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('expanded', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        isOpen
-        aria-label="Dropdown button"
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('primary', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        toggle={
-          <DropdownToggle id="Dropdown Toggle" toggleVariant="primary">
-            Dropdown
-          </DropdownToggle>
-        }
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('basic', () => {
-    const { asFragment } = render(
-      <Dropdown isOpen toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}>
-        <div>BASIC</div>
-      </Dropdown>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Renders in strict mode', () => {
-    const consoleError = jest.spyOn(console, 'error');
-    const { asFragment } = render(
-      <React.StrictMode>
-        <Dropdown
-          isOpen
-          dropdownItems={dropdownItems}
-          toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-        />
-      </React.StrictMode>
-    );
-    expect(consoleError).not.toHaveBeenCalled();
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('KebabToggle', () => {
-  test('regular', () => {
-    const { asFragment } = render(
-      <Dropdown
-        aria-label="Dropdown button"
-        dropdownItems={dropdownItems}
-        toggle={<KebabToggle id="Dropdown Toggle" />}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('right aligned', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        position={DropdownPosition.right}
-        toggle={<KebabToggle id="Dropdown Toggle" />}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('dropup', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        direction={DropdownDirection.up}
-        toggle={<KebabToggle id="Dropdown Toggle" />}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('dropup + right aligned', () => {
-    const { asFragment } = render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        direction={DropdownDirection.up}
-        position={DropdownPosition.right}
-        toggle={<KebabToggle id="Dropdown Toggle" />}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('expanded', () => {
-    const { asFragment } = render(
-      <Dropdown
-        aria-label="Dropdown button"
-        dropdownItems={dropdownItems}
-        isOpen
-        toggle={<KebabToggle id="Dropdown Toggle" />}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('plain', () => {
-    const { asFragment } = render(
-      <Dropdown dropdownItems={dropdownItems} isPlain toggle={<KebabToggle id="Dropdown Toggle" />} />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('basic', () => {
-    const { asFragment } = render(
-      <Dropdown isOpen toggle={<KebabToggle id="Dropdown Toggle" />}>
-        <div>BASIC</div>
-      </Dropdown>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('API', () => {
-  test('click on item', async () => {
-    const mockToggle = jest.fn();
-    const mockSelect = jest.fn();
-    const user = userEvent.setup();
-
-    render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        onSelect={mockSelect}
-        isOpen
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      />
-    );
-
-    await user.click(screen.getByText('Link')); // "Link" is the text of the first item
-    expect(mockToggle.mock.calls).toHaveLength(0);
-    expect(mockSelect.mock.calls).toHaveLength(1);
-  });
-
-  test('dropdownItems and children console error ', () => {
-    const myMock = jest.fn();
-    global.console = { error: myMock } as any;
-    render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        isOpen
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      >
-        <div>Children items</div>
-      </Dropdown>
-    );
-    expect(myMock).toHaveBeenCalledWith(
-      'Children and dropdownItems props have been provided. Only the dropdownItems prop items will be rendered'
-    );
-  });
-
-  test('dropdownItems only, no console error ', () => {
-    const myMock = jest.fn();
-    global.console = { error: myMock } as any;
-    render(
-      <Dropdown
-        dropdownItems={dropdownItems}
-        isOpen
-        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-      />
-    );
-    expect(myMock).not.toHaveBeenCalled();
-  });
-
-  test('children only, no console ', () => {
-    const myMock = jest.fn();
-    global.console = { error: myMock } as any;
-    render(
-      <Dropdown isOpen toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}>
-        <div>Children items</div>
-      </Dropdown>
-    );
-    expect(myMock).not.toHaveBeenCalled();
-  });
-});

package/src/deprecated/components/Dropdown/__tests__/DropdownGroup.test.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { DropdownGroup } from '../DropdownGroup';
-
-describe('dropdown groups', () => {
-  test('basic render', () => {
-    const { asFragment } = render(<DropdownGroup label="Group 1">Something</DropdownGroup>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/src/deprecated/components/Dropdown/__tests__/DropdownToggle.test.tsx

@@ -1,223 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { DropdownToggle } from '../DropdownToggle';
-import { DropdownContext } from '../dropdownConstants';
-
-describe('DropdownToggle', () => {
-  describe('API', () => {
-    test('click on closed', async () => {
-      const mockToggle = jest.fn();
-      const user = userEvent.setup();
-
-      render(
-        <DropdownToggle onToggle={mockToggle} parentRef={document.createElement('div')}>
-          Dropdown
-        </DropdownToggle>
-      );
-
-      await user.click(screen.getByRole('button'));
-      expect(mockToggle.mock.calls[0][1]).toBe(true);
-    });
-
-    test('click on opened', async () => {
-      const mockToggle = jest.fn();
-      const user = userEvent.setup();
-
-      render(
-        <DropdownToggle id="Dropdown Toggle" onToggle={mockToggle} isOpen parentRef={document.createElement('div')}>
-          Dropdown
-        </DropdownToggle>
-      );
-
-      await user.click(screen.getByRole('button'));
-      expect(mockToggle.mock.calls[0][1]).toBe(false);
-    });
-
-    test('on click outside has been removed', () => {
-      let mousedown: EventListenerOrEventListenerObject = () => {};
-      document.addEventListener = jest.fn((event, cb) => {
-        mousedown = cb;
-      });
-      document.removeEventListener = jest.fn((event, cb) => {
-        if (mousedown === cb) {
-          mousedown = () => {};
-        }
-      });
-      const mockToggle = jest.fn();
-      const { unmount } = render(
-        <DropdownToggle id="Dropdown Toggle" onToggle={mockToggle} isOpen parentRef={document.createElement('div')}>
-          Dropdown
-        </DropdownToggle>
-      );
-      unmount();
-      mousedown({ target: document } as any);
-      expect(mockToggle.mock.calls).toHaveLength(0);
-      expect(document.removeEventListener).toHaveBeenCalledWith('click', expect.any(Function));
-    });
-
-    test('on touch outside has been removed', () => {
-      let touchstart: EventListenerOrEventListenerObject = () => {};
-      document.addEventListener = jest.fn((event, cb) => {
-        touchstart = cb;
-      });
-      document.removeEventListener = jest.fn((event, cb) => {
-        if (touchstart === cb) {
-          touchstart = () => {};
-        }
-      });
-      const mockToggle = jest.fn();
-      const { unmount } = render(
-        <DropdownToggle id="Dropdown Toggle" onToggle={mockToggle} isOpen parentRef={document.createElement('div')}>
-          Dropdown
-        </DropdownToggle>
-      );
-      unmount();
-      touchstart({ target: document } as any);
-      expect(mockToggle.mock.calls).toHaveLength(0);
-      expect(document.removeEventListener).toHaveBeenCalledWith('touchstart', expect.any(Function));
-    });
-  });
-
-  describe('state', () => {
-    test('hover', () => {
-      const { asFragment } = render(
-        <DropdownToggle id="Dropdown Toggle" parentRef={document.createElement('div')}>
-          Dropdown
-        </DropdownToggle>
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    test('active', () => {
-      const { asFragment } = render(
-        <DropdownToggle id="Dropdown Toggle" isActive parentRef={document.createElement('div')}>
-          Dropdown
-        </DropdownToggle>
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    test('focus', () => {
-      const { asFragment } = render(
-        <DropdownToggle id="Dropdown Toggle" parentRef={document.createElement('div')}>
-          Dropdown
-        </DropdownToggle>
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    test('button variant - primary', () => {
-      const { asFragment } = render(
-        <DropdownToggle id="Dropdown Toggle" toggleVariant="primary" parentRef={document.createElement('div')}>
-          Dropdown
-        </DropdownToggle>
-      );
-
-      const button = screen.getByRole('button');
-
-      expect(button).toHaveClass('pf-m-primary');
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    test('button variant - secondary', () => {
-      const { asFragment } = render(
-        <DropdownToggle id="Dropdown Toggle" toggleVariant="secondary" parentRef={document.createElement('div')}>
-          Dropdown
-        </DropdownToggle>
-      );
-
-      const button = screen.getByRole('button');
-
-      expect(button).toHaveClass('pf-m-secondary');
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    test('button variant - plain with text', () => {
-      const { asFragment } = render(
-        <DropdownToggle id="Dropdown Toggle" isText isPlain parentRef={document.createElement('div')}>
-          Dropdown
-        </DropdownToggle>
-      );
-
-      const button = screen.getByRole('button');
-
-      expect(button).toHaveClass('pf-m-text');
-      expect(button).toHaveClass('pf-m-plain');
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    test('action split button - renders primary variant', () => {
-      const { asFragment } = render(
-        <DropdownToggle
-          id="Dropdown Toggle"
-          toggleVariant="primary"
-          splitButtonItems={[<div key="1">test</div>]}
-          splitButtonVariant="action"
-          parentRef={document.createElement('div')}
-        >
-          Dropdown
-        </DropdownToggle>
-      );
-
-      const dropdownToggle = screen.getByRole('button').parentElement;
-
-      expect(dropdownToggle).toHaveClass('pf-m-primary');
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    test('split button - does not render primary variant', () => {
-      const { asFragment } = render(
-        <DropdownToggle
-          id="Dropdown Toggle"
-          toggleVariant="primary"
-          splitButtonItems={[<div key="0">test</div>]}
-          parentRef={document.createElement('div')}
-        >
-          Dropdown
-        </DropdownToggle>
-      );
-
-      const dropdownToggle = screen.getByRole('button').parentElement;
-
-      expect(dropdownToggle).not.toHaveClass('pf-m-primary');
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    test('action split button - renders secondary variant', () => {
-      render(
-        <DropdownToggle
-          id="Dropdown Toggle"
-          toggleVariant="secondary"
-          splitButtonItems={[<div key="1">test</div>]}
-          splitButtonVariant="action"
-          parentRef={document.createElement('div')}
-        >
-          Dropdown
-        </DropdownToggle>
-      );
-
-      const dropdownToggle = screen.getByRole('button').parentElement;
-
-      expect(dropdownToggle).toHaveClass('pf-m-secondary');
-    });
-
-    test('class changes', () => {
-      const { asFragment } = render(
-        <DropdownContext.Provider
-          value={{
-            toggleTextClass: 'some-test-class',
-            toggleIndicatorClass: 'another-test-class'
-          }}
-        >
-          <DropdownToggle id="Dropdown Toggle" parentRef={document.createElement('div')}>
-            Dropdown
-          </DropdownToggle>
-        </DropdownContext.Provider>
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-  });
-});