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

package/src/deprecated/components/ContextSelector/ContextSelector.tsx

@@ -1,231 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
-import { css } from '@patternfly/react-styles';
-import { ContextSelectorToggle } from './ContextSelectorToggle';
-import { ContextSelectorMenuList } from './ContextSelectorMenuList';
-import { ContextSelectorContext } from './contextSelectorConstants';
-import { FocusTrap, getUniqueId } from '../../../helpers';
-import { Popper } from '../../../helpers/Popper/Popper';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../../helpers';
-import { SearchInput } from '../../../components/SearchInput';
-
-export interface ContextSelectorProps extends OUIAProps {
-  /** content rendered inside the Context Selector */
-  children?: React.ReactNode;
-  /** Classes applied to root element of Context Selector */
-  className?: string;
-  /** Flag to indicate if Context Selector is opened */
-  isOpen?: boolean;
-  /** Function callback called when user clicks toggle button */
-  onToggle?: (event: any, value: boolean) => void;
-  /** Function callback called when user selects item */
-  onSelect?: (event: any, value: React.ReactNode) => void;
-  /** The container to append the menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
-  /** Flag indicating that the context selector should expand to full height */
-  isFullHeight?: boolean;
-  /** Labels the Context Selector for Screen Readers */
-  screenReaderLabel?: 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 */
-  searchInputValue?: string;
-  /** Function callback called when user changes the Search Input */
-  onSearchInputChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
-  /** Search Input placeholder */
-  searchInputPlaceholder?: string;
-  /** Function callback for when Search Button is clicked */
-  onSearchButtonClick?: (event?: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** Footer of the context selector */
-  footer?: React.ReactNode;
-  /** Flag to indicate the toggle has no border or background */
-  isPlain?: boolean;
-  /** Flag to indicate if toggle is textual toggle */
-  isText?: boolean;
-  /** Flag to disable focus trap */
-  disableFocusTrap?: boolean;
-  /** Flag for indicating that the context selector menu should automatically flip vertically when
-   * it reaches the boundary. This prop can only be used when the context selector component is not
-   * appended inline, e.g. `menuAppendTo="parent"`
-   */
-  isFlipEnabled?: boolean;
-  /** Id of the context selector */
-  id?: string;
-  /** z-index of the context selector when menuAppendTo is not inline. */
-  zIndex?: number;
-  /** Value to overwrite the randomly generated data-ouia-component-id.*/
-  ouiaId?: number | string;
-  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
-  ouiaSafe?: boolean;
-  /** Adds an accessible label to the context selector menu. */
-  menuAriaLabel?: string;
-}
-
-class ContextSelector extends React.Component<ContextSelectorProps, { ouiaStateId: string }> {
-  static displayName = 'ContextSelector';
-  static defaultProps: ContextSelectorProps = {
-    children: null as React.ReactNode,
-    className: '',
-    isOpen: false,
-    onToggle: () => undefined as any,
-    onSelect: () => undefined as any,
-    screenReaderLabel: '',
-    toggleText: '',
-    searchButtonAriaLabel: 'Search menu items',
-    searchInputValue: '',
-    onSearchInputChange: () => undefined as any,
-    searchInputPlaceholder: 'Search',
-    onSearchButtonClick: () => undefined as any,
-    menuAppendTo: 'inline',
-    ouiaSafe: true,
-    disableFocusTrap: false,
-    footer: null as React.ReactNode,
-    isPlain: false,
-    isText: false,
-    isFlipEnabled: true,
-    zIndex: 9999
-  };
-  constructor(props: ContextSelectorProps) {
-    super(props);
-    this.state = {
-      ouiaStateId: getDefaultOUIAId(ContextSelector.displayName)
-    };
-  }
-
-  parentRef: React.RefObject<HTMLDivElement> = React.createRef();
-  popperRef: React.RefObject<HTMLDivElement> = React.createRef();
-
-  render() {
-    const {
-      children,
-      className,
-      isOpen,
-      isFullHeight,
-      onToggle,
-      onSelect,
-      screenReaderLabel,
-      toggleText,
-      searchButtonAriaLabel,
-      searchInputValue,
-      onSearchInputChange,
-      searchInputPlaceholder,
-      onSearchButtonClick,
-      menuAppendTo,
-      ouiaId,
-      ouiaSafe,
-      isPlain,
-      isText,
-      footer,
-      disableFocusTrap,
-      isFlipEnabled,
-      id,
-      zIndex,
-      menuAriaLabel,
-      ...props
-    } = this.props;
-
-    const uniqueId = id || getUniqueId();
-    const toggleId = `pf-v6-context-selector-toggle-id-${uniqueId}`;
-    const screenReaderLabelId = `pf-v6-context-selector-label-id-${uniqueId}`;
-    const isStatic = isFlipEnabled && menuAppendTo !== 'inline';
-
-    const menuContainer = (
-      <div className={css(styles.contextSelectorMenu, isStatic && styles.modifiers.static)} id={uniqueId}>
-        {isOpen && (
-          <FocusTrap
-            active={!disableFocusTrap}
-            focusTrapOptions={{ clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } }}
-          >
-            <div className={css(styles.contextSelectorMenuSearch)}>
-              <SearchInput
-                submitSearchButtonLabel={searchButtonAriaLabel}
-                placeholder={searchInputPlaceholder}
-                onChange={onSearchInputChange}
-                onSearch={(event: React.SyntheticEvent<HTMLButtonElement, Event>, _value: any, _: any) => {
-                  onSearchButtonClick(event);
-                }}
-                value={searchInputValue}
-              />
-            </div>
-            <ContextSelectorContext.Provider value={{ onSelect }}>
-              <ContextSelectorMenuList isOpen={isOpen} aria-label={menuAriaLabel}>
-                {children}
-              </ContextSelectorMenuList>
-            </ContextSelectorContext.Provider>
-            {footer}
-          </FocusTrap>
-        )}
-      </div>
-    );
-    const popperContainer = (
-      <div
-        className={css(styles.contextSelector, isOpen && styles.modifiers.expanded, className)}
-        ref={this.popperRef}
-        {...props}
-      >
-        {isOpen && menuContainer}
-      </div>
-    );
-    const mainContainer = (
-      <div
-        className={css(
-          styles.contextSelector,
-          isOpen && styles.modifiers.expanded,
-          isFullHeight && styles.modifiers.fullHeight,
-          className
-        )}
-        ref={this.parentRef}
-        {...getOUIAProps(ContextSelector.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-        {...props}
-      >
-        {screenReaderLabel && (
-          <span id={screenReaderLabelId} hidden>
-            {screenReaderLabel}
-          </span>
-        )}
-        <ContextSelectorToggle
-          onToggle={onToggle}
-          isOpen={isOpen}
-          toggleText={toggleText}
-          id={toggleId}
-          parentRef={menuAppendTo === 'inline' ? this.parentRef : this.popperRef}
-          aria-labelledby={`${screenReaderLabelId} ${toggleId}`}
-          isPlain={isPlain}
-          isText={isText}
-        />
-        {isOpen && menuAppendTo === 'inline' && menuContainer}
-      </div>
-    );
-    const getParentElement = () => {
-      if (this.parentRef && this.parentRef.current) {
-        return this.parentRef.current.parentElement;
-      }
-      return null;
-    };
-    return menuAppendTo === 'inline' ? (
-      mainContainer
-    ) : (
-      <Popper
-        trigger={mainContainer}
-        triggerRef={this.parentRef}
-        popper={popperContainer}
-        popperRef={this.popperRef}
-        appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
-        isVisible={isOpen}
-        zIndex={zIndex}
-      />
-    );
-  }
-}
-
-export { ContextSelector };

package/src/deprecated/components/ContextSelector/ContextSelectorFooter.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
-
-export interface ContextSelectorFooterProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the ContextSelectorFooter */
-  children?: React.ReactNode;
-  /** Additional classes added to the ContextSelectorFooter */
-  className?: string;
-}
-
-export const ContextSelectorFooter: React.FunctionComponent<ContextSelectorFooterProps> = ({
-  children = null,
-  className = '',
-  ...props
-}: ContextSelectorFooterProps) => (
-  <div {...props} className={css(styles.contextSelectorMenuFooter, className)}>
-    {children}
-  </div>
-);
-ContextSelectorFooter.displayName = 'ContextSelectorFooter';

package/src/deprecated/components/ContextSelector/ContextSelectorItem.tsx

@@ -1,78 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
-import { css } from '@patternfly/react-styles';
-import { ContextSelectorContext } from './contextSelectorConstants';
-
-export interface ContextSelectorItemProps {
-  /** Anything which can be rendered as Context Selector item */
-  children?: React.ReactNode;
-  /** Classes applied to root element of the Context Selector item */
-  className?: string;
-  /** Render Context  Selector item as disabled */
-  isDisabled?: boolean;
-  /** Callback for click event */
-  onClick?: (event: React.MouseEvent) => void;
-  /** @hide internal index of the item */
-  index?: number;
-  /** Internal callback for ref tracking */
-  sendRef?: (index: number, current: any) => void;
-  /** Link href, indicates item should render as anchor tag */
-  href?: string;
-}
-
-class ContextSelectorItem extends React.Component<ContextSelectorItemProps> {
-  static displayName = 'ContextSelectorItem';
-  static defaultProps: ContextSelectorItemProps = {
-    children: null as React.ReactNode,
-    className: '',
-    isDisabled: false,
-    onClick: (): any => undefined,
-    index: undefined as number,
-    sendRef: () => {},
-    href: null as string
-  };
-
-  ref: React.RefObject<HTMLButtonElement & HTMLAnchorElement> = React.createRef();
-
-  componentDidMount() {
-    /* eslint-disable-next-line */
-    this.props.sendRef(this.props.index, this.ref.current);
-  }
-
-  render() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { className, children, onClick, isDisabled, index, sendRef, href, ...props } = this.props;
-    const Component = href ? 'a' : 'button';
-    const isDisabledLink = href && isDisabled;
-    return (
-      <ContextSelectorContext.Consumer>
-        {({ onSelect }) => (
-          <li role="none">
-            <Component
-              className={css(
-                styles.contextSelectorMenuListItem,
-                isDisabledLink && styles.modifiers.disabled,
-                className
-              )}
-              ref={this.ref}
-              onClick={(event) => {
-                if (!isDisabled) {
-                  onClick(event);
-                  onSelect(event, children);
-                }
-              }}
-              disabled={isDisabled && !href}
-              href={href}
-              {...(isDisabledLink && { 'aria-disabled': true, tabIndex: -1 })}
-              {...props}
-            >
-              {children}
-            </Component>
-          </li>
-        )}
-      </ContextSelectorContext.Consumer>
-    );
-  }
-}
-
-export { ContextSelectorItem };

package/src/deprecated/components/ContextSelector/ContextSelectorMenuList.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
-import { css } from '@patternfly/react-styles';
-
-export interface ContextSelectorMenuListProps {
-  /** Content rendered inside the context selector menu */
-  children?: React.ReactNode;
-  /** Classess applied to root element of context selector menu */
-  className?: string;
-  /** Flag to indicate if context selector menu is opened */
-  isOpen?: boolean;
-  /** Adds an accessible label to the context selector menu. */
-  'aria-label'?: string;
-}
-
-class ContextSelectorMenuList extends React.Component<ContextSelectorMenuListProps> {
-  static displayName = 'ContextSelectorMenuList';
-  static defaultProps: ContextSelectorMenuListProps = {
-    children: null as React.ReactNode,
-    className: '',
-    isOpen: true
-  };
-
-  refsCollection = [] as any;
-
-  sendRef = (index: number, ref: any) => {
-    this.refsCollection[index] = ref;
-  };
-
-  extendChildren() {
-    return React.Children.map(this.props.children, (child, index) =>
-      React.cloneElement(child as React.ReactElement<any>, {
-        sendRef: this.sendRef,
-        index,
-        role: 'menuitem'
-      })
-    );
-  }
-
-  render = () => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { className, isOpen, children, ...props } = this.props;
-    return (
-      <ul className={css(styles.contextSelectorMenuList, className)} hidden={!isOpen} role="menu" {...props}>
-        {this.extendChildren()}
-      </ul>
-    );
-  };
-}
-
-export { ContextSelectorMenuList };

package/src/deprecated/components/ContextSelector/ContextSelectorToggle.tsx

@@ -1,132 +0,0 @@
-import * as React from 'react';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
-import { css } from '@patternfly/react-styles';
-import { KeyTypes } from '../../../helpers/constants';
-import { PickOptional } from '../../../helpers/typeUtils';
-
-export interface ContextSelectorToggleProps {
-  /** HTML ID of toggle */
-  id: string;
-  /** Classes applied to root element of toggle */
-  className?: 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 */
-  onToggle?: (event: any, value: boolean) => void;
-  /** Callback for toggle open on keyboard entry */
-  onEnter?: () => void;
-  /** Element which wraps toggle */
-  parentRef?: any;
-  /** Forces active state */
-  isActive?: boolean;
-  /** Flag to indicate the toggle has no border or background */
-  isPlain?: boolean;
-  /** Flag to indicate if toggle is textual toggle */
-  isText?: boolean;
-}
-
-class ContextSelectorToggle extends React.Component<ContextSelectorToggleProps> {
-  static displayName = 'ContextSelectorToggle';
-  static defaultProps: PickOptional<ContextSelectorToggleProps> = {
-    className: '',
-    toggleText: '',
-    isOpen: false,
-    onEnter: () => undefined as any,
-    parentRef: null as any,
-    isActive: false,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onToggle: (event: any, value: boolean) => undefined as any
-  };
-
-  toggle: React.RefObject<HTMLButtonElement> = React.createRef();
-
-  componentDidMount = () => {
-    document.addEventListener('mousedown', this.onDocClick);
-    document.addEventListener('touchstart', this.onDocClick);
-    document.addEventListener('keydown', this.onEscPress);
-  };
-
-  componentWillUnmount = () => {
-    document.removeEventListener('mousedown', this.onDocClick);
-    document.removeEventListener('touchstart', this.onDocClick);
-    document.removeEventListener('keydown', this.onEscPress);
-  };
-
-  onDocClick = (event: any) => {
-    const { isOpen, parentRef, onToggle } = this.props;
-    if (isOpen && parentRef?.current && !parentRef.current.contains(event.target)) {
-      onToggle(null, false);
-      this.toggle.current.focus();
-    }
-  };
-
-  onEscPress = (event: any) => {
-    const { isOpen, onToggle } = this.props;
-    if (isOpen && event.key === KeyTypes.Escape) {
-      onToggle(null, false);
-      this.toggle.current.focus();
-    }
-  };
-
-  onKeyDown = (event: any) => {
-    const { isOpen, onToggle, onEnter } = this.props;
-    if ((event.key === KeyTypes.Tab && !isOpen) || event.key !== KeyTypes.Enter) {
-      return;
-    }
-    event.preventDefault();
-    if ((event.key === KeyTypes.Tab || event.key === KeyTypes.Enter || event.key !== KeyTypes.Space) && isOpen) {
-      onToggle(null, !isOpen);
-    } else if ((event.key === KeyTypes.Enter || event.key === ' ') && !isOpen) {
-      onToggle(null, !isOpen);
-      onEnter();
-    }
-  };
-
-  render() {
-    const {
-      className,
-      toggleText,
-      isOpen,
-      onToggle,
-      id,
-      isPlain,
-      isText,
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      isActive,
-      onEnter,
-      parentRef,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      ...props
-    } = this.props;
-    return (
-      <button
-        {...props}
-        id={id}
-        ref={this.toggle}
-        className={css(
-          styles.contextSelectorToggle,
-          isActive && styles.modifiers.active,
-          isPlain && styles.modifiers.plain,
-          isText && styles.modifiers.text,
-          className
-        )}
-        type="button"
-        onClick={(event) => onToggle(event, !isOpen)}
-        aria-expanded={isOpen}
-        onKeyDown={this.onKeyDown}
-      >
-        <span className={css(styles.contextSelectorToggleText)}>{toggleText}</span>
-        <span className={css(styles.contextSelectorToggleIcon)}>
-          <CaretDownIcon aria-hidden />
-        </span>
-      </button>
-    );
-  }
-}
-
-export { ContextSelectorToggle };

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

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { ContextSelector } from '../ContextSelector';
-import { ContextSelectorItem } from '../ContextSelectorItem';
-
-const items = [
-  <ContextSelectorItem key="0">My Project</ContextSelectorItem>,
-  <ContextSelectorItem key="1">OpenShift Cluster</ContextSelectorItem>,
-  <ContextSelectorItem key="2">Production Ansible</ContextSelectorItem>,
-  <ContextSelectorItem key="3">AWS</ContextSelectorItem>,
-  <ContextSelectorItem key="4">Azure</ContextSelectorItem>
-];
-
-describe('ContextSelector', () => {
-  test('Renders ContextSelector', () => {
-    const { asFragment } = render(<ContextSelector id="render">{items}</ContextSelector>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Renders ContextSelector open', () => {
-    const { asFragment } = render(
-      <ContextSelector isOpen id="render-open">
-        {items}
-      </ContextSelector>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Renders in strict mode', () => {
-    const consoleError = jest.spyOn(console, 'error');
-    const { asFragment } = render(
-      <React.StrictMode>
-        <ContextSelector isOpen id="render">
-          {items}
-        </ContextSelector>
-      </React.StrictMode>
-    );
-    expect(consoleError).not.toHaveBeenCalled();
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Verify onToggle is called ', async () => {
-    const mockfn = jest.fn();
-    const user = userEvent.setup();
-
-    render(<ContextSelector onToggle={mockfn}>{items}</ContextSelector>);
-
-    await user.click(screen.getByRole('button'));
-    expect(mockfn.mock.calls).toHaveLength(1);
-  });
-});

package/src/deprecated/components/ContextSelector/__tests__/ContextSelectorFooter.test.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ContextSelectorFooter } from '../ContextSelectorFooter';
-
-test('Renders ContextSelectorFooter', () => {
-  const { asFragment } = render(<ContextSelectorFooter>testing text</ContextSelectorFooter>);
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/deprecated/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { ContextSelectorItem } from '../ContextSelectorItem';
-
-test('Renders ContextSelectorItem', () => {
-  const { asFragment } = render(
-    <ContextSelectorItem sendRef={jest.fn()} index={0}>
-      My Project
-    </ContextSelectorItem>
-  );
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('Renders ContextSelectorItem disabled and hovered', () => {
-  const { asFragment } = render(
-    <ContextSelectorItem isDisabled sendRef={jest.fn()} index={0}>
-      My Project
-    </ContextSelectorItem>
-  );
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('Verify onClick is called ', async () => {
-  const mockfn = jest.fn();
-  const user = userEvent.setup();
-
-  render(
-    <ContextSelectorItem onClick={mockfn} sendRef={jest.fn()} index={0}>
-      My Project
-    </ContextSelectorItem>
-  );
-  await user.click(screen.getByRole('button'));
-
-  expect(mockfn.mock.calls).toHaveLength(1);
-});

package/src/deprecated/components/ContextSelector/__tests__/ContextSelectorMenuList.test.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ContextSelectorItem } from '../ContextSelectorItem';
-import { ContextSelectorMenuList } from '../ContextSelectorMenuList';
-
-const items = [
-  <ContextSelectorItem key="0">My Project</ContextSelectorItem>,
-  <ContextSelectorItem key="1">OpenShift Cluster</ContextSelectorItem>,
-  <ContextSelectorItem key="2">Production Ansible</ContextSelectorItem>,
-  <ContextSelectorItem key="3">AWS</ContextSelectorItem>,
-  <ContextSelectorItem key="4">Azure</ContextSelectorItem>
-];
-
-test('Renders ContextSelectorMenuList open', () => {
-  const { asFragment } = render(<ContextSelectorMenuList isOpen={false}>{items}</ContextSelectorMenuList>);
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('Renders ContextSelectorMenuList closed', () => {
-  const { asFragment } = render(<ContextSelectorMenuList isOpen={false}>{items}</ContextSelectorMenuList>);
-  expect(asFragment()).toMatchSnapshot();
-});