@patternfly/react-core 6.0.0-alpha.9 → 6.0.0-alpha.91

package/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelectorToggle.test.tsx.snap

@@ -1,161 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ContextSelectorToggle Renders ContextSelectorToggle 1`] = `
-<DocumentFragment>
-  <button
-    aria-expanded="false"
-    class="pf-v5-c-context-selector__toggle"
-    id="toggle-id"
-    type="button"
-  >
-    <span
-      class="pf-v5-c-context-selector__toggle-text"
-    />
-    <span
-      class="pf-v5-c-context-selector__toggle-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        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>
-  </button>
-</DocumentFragment>
-`;
-
-exports[`ContextSelectorToggle Verify ESC press 1`] = `
-<DocumentFragment>
-  <button
-    aria-expanded="true"
-    class="pf-v5-c-context-selector__toggle"
-    id="toggle-id"
-    type="button"
-  >
-    <span
-      class="pf-v5-c-context-selector__toggle-text"
-    />
-    <span
-      class="pf-v5-c-context-selector__toggle-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        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>
-  </button>
-</DocumentFragment>
-`;
-
-exports[`ContextSelectorToggle Verify ESC press with not isOpen 1`] = `
-<DocumentFragment>
-  <button
-    aria-expanded="false"
-    class="pf-v5-c-context-selector__toggle"
-    id="toggle-id"
-    type="button"
-  >
-    <span
-      class="pf-v5-c-context-selector__toggle-text"
-    />
-    <span
-      class="pf-v5-c-context-selector__toggle-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        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>
-  </button>
-</DocumentFragment>
-`;
-
-exports[`ContextSelectorToggle Verify keydown enter  1`] = `
-<DocumentFragment>
-  <button
-    aria-expanded="false"
-    class="pf-v5-c-context-selector__toggle"
-    id="toggle-id"
-    type="button"
-  >
-    <span
-      class="pf-v5-c-context-selector__toggle-text"
-    />
-    <span
-      class="pf-v5-c-context-selector__toggle-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        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>
-  </button>
-</DocumentFragment>
-`;
-
-exports[`ContextSelectorToggle Verify keydown tab  1`] = `
-<DocumentFragment>
-  <button
-    aria-expanded="true"
-    class="pf-v5-c-context-selector__toggle"
-    id="toggle-id"
-    type="button"
-  >
-    <span
-      class="pf-v5-c-context-selector__toggle-text"
-    />
-    <span
-      class="pf-v5-c-context-selector__toggle-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        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>
-  </button>
-</DocumentFragment>
-`;

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

@@ -1,6 +0,0 @@
-import * as React from 'react';
-
-export const ContextSelectorContext = React.createContext({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onSelect: (event: any, value: React.ReactNode): any => undefined
-});

package/src/deprecated/components/ContextSelector/examples/ContextSelector.md

@@ -1,25 +0,0 @@
----
-id: Context selector
-section: components
-subsection: menus
-propComponents: ['ContextSelector', 'ContextSelectorItem', 'ContextSelectorFooter']
-deprecated: true
-ouia: true
----
-
-## Examples
-
-### Basic
-
-```ts file="./ContextSelectorBasic.tsx"
-```
-
-### Plain with text
-
-```ts file="./ContextSelectorPlainText.tsx"
-```
-
-### With footer
-
-```ts file="./ContextSelectorWithFooter.tsx"
-```

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

@@ -1,85 +0,0 @@
-import React from 'react';
-import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core/deprecated';
-
-export const ContextSelectorBasic: React.FunctionComponent = () => {
-  const items = [
-    {
-      text: 'Link',
-      href: '#'
-    },
-    'Action',
-    {
-      text: 'Disabled link',
-      href: '#',
-      isDisabled: true
-    },
-    {
-      text: 'Disabled action',
-      isDisabled: true
-    },
-    'My project',
-    'OpenShift cluster',
-    'Production Ansible',
-    'AWS',
-    'Azure',
-    'My project 2',
-    'OpenShift cluster ',
-    'Production Ansible 2 ',
-    'AWS 2',
-    'Azure 2'
-  ];
-
-  const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text;
-  const [isOpen, setOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState(firstItemText);
-  const [searchValue, setSearchValue] = React.useState('');
-  const [filteredItems, setFilteredItems] = React.useState(items);
-
-  const onToggle = (event: any, isOpen: boolean) => {
-    setOpen(isOpen);
-  };
-
-  const onSelect = (event: any, value: React.ReactNode) => {
-    setSelected(value as string);
-    setOpen(!isOpen);
-  };
-
-  const onSearchInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setSearchValue(value);
-  };
-
-  const onSearchButtonClick = () => {
-    const filtered =
-      searchValue === ''
-        ? items
-        : items.filter((item) => {
-            const str = typeof item === 'string' ? item : item.text;
-            return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
-          });
-
-    setFilteredItems(filtered || []);
-  };
-  return (
-    <ContextSelector
-      toggleText={selected}
-      onSearchInputChange={onSearchInputChange}
-      isOpen={isOpen}
-      searchInputValue={searchValue}
-      onToggle={onToggle}
-      onSelect={onSelect}
-      onSearchButtonClick={onSearchButtonClick}
-      screenReaderLabel="Selected Project:"
-      ouiaId="BasicContextSelector"
-    >
-      {filteredItems.map((item, index) => {
-        const [text = null, href = undefined, isDisabled] =
-          typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled];
-        return (
-          <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
-            {text}
-          </ContextSelectorItem>
-        );
-      })}
-    </ContextSelector>
-  );
-};

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

@@ -1,85 +0,0 @@
-import React from 'react';
-import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core/deprecated';
-
-const items = [
-  {
-    text: 'Link',
-    href: '#'
-  },
-  'Action',
-  {
-    text: 'Disabled link',
-    href: '#',
-    isDisabled: true
-  },
-  {
-    text: 'Disabled action',
-    isDisabled: true
-  },
-  'My Project',
-  'OpenShift Cluster',
-  'Production Ansible',
-  'AWS',
-  'Azure',
-  'My Project 2',
-  'OpenShift Cluster ',
-  'Production Ansible 2 ',
-  'AWS 2',
-  'Azure 2'
-];
-
-export const ContextSelectorPlainText: React.FunctionComponent = () => {
-  const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text;
-  const [isOpen, setOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState(firstItemText);
-  const [searchValue, setSearchValue] = React.useState('');
-  const [filteredItems, setFilteredItems] = React.useState(items);
-  const onToggle = (event: any, isOpen: boolean) => {
-    setOpen(isOpen);
-  };
-
-  const onSelect = (event: any, value: React.ReactNode) => {
-    setSelected(value as string);
-    setOpen(!isOpen);
-  };
-
-  const onSearchInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setSearchValue(value);
-  };
-
-  const onSearchButtonClick = () => {
-    const filtered =
-      searchValue === ''
-        ? items
-        : items.filter((item) => {
-            const str = typeof item === 'string' ? item : item.text;
-            return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
-          });
-
-    setFilteredItems(filtered || []);
-  };
-  return (
-    <ContextSelector
-      toggleText={selected}
-      onSearchInputChange={onSearchInputChange}
-      isOpen={isOpen}
-      searchInputValue={searchValue}
-      onToggle={onToggle}
-      onSelect={onSelect}
-      onSearchButtonClick={onSearchButtonClick}
-      screenReaderLabel="Selected Project:"
-      isPlain
-      isText
-    >
-      {filteredItems.map((item, index) => {
-        const [text, href = undefined, isDisabled = false] =
-          typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled];
-        return (
-          <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
-            {text}
-          </ContextSelectorItem>
-        );
-      })}
-    </ContextSelector>
-  );
-};

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

@@ -1,92 +0,0 @@
-import React from 'react';
-import { Button } from '@patternfly/react-core';
-import { ContextSelector, ContextSelectorItem, ContextSelectorFooter } from '@patternfly/react-core/deprecated';
-
-export const ContextSelectorWithFooter: React.FunctionComponent = () => {
-  const items = [
-    {
-      text: 'Link',
-      href: '#'
-    },
-    'Action',
-    {
-      text: 'Disabled link',
-      href: '#',
-      isDisabled: true
-    },
-    {
-      text: 'Disabled action',
-      isDisabled: true
-    },
-    'My project',
-    'OpenShift cluster',
-    'Production Ansible',
-    'AWS',
-    'Azure',
-    'My project 2',
-    'OpenShift cluster ',
-    'Production Ansible 2 ',
-    'AWS 2',
-    'Azure 2'
-  ];
-  const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text;
-  const [isOpen, setOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState(firstItemText);
-  const [searchValue, setSearchValue] = React.useState('');
-  const [filteredItems, setFilteredItems] = React.useState(items);
-
-  const onToggle = (event: any, isOpen: boolean) => {
-    setOpen(isOpen);
-  };
-
-  const onSelect = (event: any, value: React.ReactNode) => {
-    setSelected(value as string);
-    setOpen(!isOpen);
-  };
-
-  const onSearchInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setSearchValue(value);
-  };
-
-  const onSearchButtonClick = () => {
-    const filtered =
-      searchValue === ''
-        ? items
-        : items.filter((item) => {
-            const str = typeof item === 'string' ? item : item.text;
-            return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
-          });
-
-    setFilteredItems(filtered || []);
-  };
-
-  return (
-    <ContextSelector
-      toggleText={selected}
-      onSearchInputChange={onSearchInputChange}
-      isOpen={isOpen}
-      searchInputValue={searchValue}
-      onToggle={onToggle}
-      onSelect={onSelect}
-      onSearchButtonClick={onSearchButtonClick}
-      screenReaderLabel="Selected Project:"
-      footer={
-        <ContextSelectorFooter>
-          <Button variant="link" isInline>
-            Footer action
-          </Button>
-        </ContextSelectorFooter>
-      }
-    >
-      {filteredItems.map((item, index) => {
-        const [text = null, href = undefined, isDisabled] =
-          typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled];
-        return (
-          <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
-            {text}
-          </ContextSelectorItem>
-        );
-      })}
-    </ContextSelector>
-  );
-};

package/src/deprecated/components/ContextSelector/index.ts

@@ -1,3 +0,0 @@
-export * from './ContextSelector';
-export * from './ContextSelectorItem';
-export * from './ContextSelectorFooter';

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

@@ -1,83 +0,0 @@
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
-import { DropdownToggleProps } from './DropdownToggle';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-import { Toggle } from './Toggle';
-import { Badge, BadgeProps } from '../../../components/Badge';
-
-export interface BadgeToggleProps extends DropdownToggleProps {
-  /** HTML ID of dropdown toggle */
-  id?: string;
-  /** Anything which can be rendered as dropdown toggle */
-  children?: React.ReactNode;
-  /** Badge specific properties */
-  badgeProps?: BadgeProps;
-  /** Classess applied to root element of dropdown toggle */
-  className?: string;
-  /** Flag to indicate if menu is opened */
-  isOpen?: boolean;
-  /** Label Toggle button */
-  'aria-label'?: string;
-  /** Callback called when toggle is clicked */
-  onToggle?: (
-    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
-    isOpen: boolean
-  ) => 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;
-  /** Type to put on the button */
-  type?: 'button' | 'submit' | 'reset';
-  /** Allows selecting toggle to select parent */
-  bubbleEvent?: boolean;
-}
-
-export const BadgeToggle: React.FunctionComponent<BadgeToggleProps> = ({
-  id = '',
-  children = null,
-  badgeProps = { isRead: true },
-  className = '',
-  isOpen = false,
-  'aria-label': ariaLabel = 'Actions',
-  parentRef = null,
-  getMenuRef = null,
-  isActive = false,
-  isPlain = null,
-  isDisabled = false,
-  bubbleEvent = false,
-  onToggle = () => undefined as void,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
-  ...props
-}: BadgeToggleProps) => (
-  <Toggle
-    id={id}
-    className={className}
-    isOpen={isOpen}
-    aria-label={ariaLabel}
-    parentRef={parentRef}
-    getMenuRef={getMenuRef}
-    isActive={isActive}
-    isPlain={isPlain || true}
-    isDisabled={isDisabled}
-    onToggle={onToggle}
-    bubbleEvent={bubbleEvent}
-    {...props}
-  >
-    <Badge {...badgeProps}>
-      {children}
-      <span className={css(styles.dropdownToggleIcon)}>
-        <CaretDownIcon />
-      </span>
-    </Badge>
-  </Toggle>
-);
-BadgeToggle.displayName = 'BadgeToggle';

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

@@ -1,115 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
-import { DropdownPosition, DropdownDirection, DropdownContext } from './dropdownConstants';
-import { DropdownWithContext } from './DropdownWithContext';
-import { OUIAProps, useOUIAId } from '../../../helpers';
-
-export interface DropdownProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
-  /** Anything which can be rendered in a dropdown */
-  children?: React.ReactNode;
-  /** Classes applied to root element of dropdown */
-  className?: string;
-  /** Array of DropdownItem nodes that will be rendered in the dropdown Menu list */
-  dropdownItems?: any[];
-  /** Flag to indicate if menu is opened */
-  isOpen?: boolean;
-  /** Display the toggle with no border or background */
-  isPlain?: boolean;
-  /** Display the toggle in text only mode */
-  isText?: boolean;
-  /** Flag indicating that the dropdown should expand to full height */
-  isFullHeight?: boolean;
-  /** Indicates where menu will be aligned horizontally */
-  position?: DropdownPosition | 'right' | 'left';
-  /** Indicates how the menu will align at screen size breakpoints. Default alignment is set via the position property. */
-  alignments?: {
-    sm?: 'right' | 'left';
-    md?: 'right' | 'left';
-    lg?: 'right' | 'left';
-    xl?: 'right' | 'left';
-    '2xl'?: 'right' | 'left';
-  };
-  /** Display menu above or below dropdown toggle */
-  direction?: DropdownDirection | 'up' | 'down';
-  /** Minimum width of the dropdown menu. If set to "trigger", the minimum width will be set to the toggle width. */
-  minWidth?: string | 'trigger';
-  /** 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 to indicate if dropdown has groups */
-  isGrouped?: boolean;
-  /** Toggle for the dropdown, examples: <DropdownToggle> or <DropdownToggleCheckbox> */
-  toggle: React.ReactElement<any>;
-  /** Function callback called when user selects item */
-  onSelect?: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
-  /** Flag to indicate if the first dropdown item should gain initial focus, set false when adding
-   * a specific auto-focus item (like a current selection) otherwise leave as true
-   */
-  autoFocus?: boolean;
-  /** Props for extreme customization of dropdown */
-  contextProps?: typeof DropdownContext;
-  /** Flag for indicating that the dropdown menu should automatically flip vertically when
-   * it reaches the boundary. This prop can only be used when the dropdown component is not
-   * appended inline, e.g. `menuAppendTo="parent"`
-   */
-  isFlipEnabled?: boolean;
-  /** z-index of the dropdown 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;
-}
-
-export const Dropdown: React.FunctionComponent<DropdownProps> = ({
-  onSelect,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
-  ouiaId,
-  ouiaSafe,
-  alignments,
-  contextProps,
-  minWidth,
-  menuAppendTo = 'inline',
-  isFlipEnabled = true,
-  zIndex = 9999,
-  ...props
-}: DropdownProps) => (
-  <DropdownContext.Provider
-    value={{
-      onSelect: (event) => onSelect && onSelect(event),
-      toggleTextClass: styles.dropdownToggleText,
-      toggleIconClass: styles.dropdownToggleImage,
-      toggleIndicatorClass: styles.dropdownToggleIcon,
-      menuClass: styles.dropdownMenu,
-      itemClass: styles.dropdownMenuItem,
-      toggleClass: styles.dropdownToggle,
-      baseClass: styles.dropdown,
-      baseComponent: 'div',
-      sectionClass: styles.dropdownGroup,
-      sectionTitleClass: styles.dropdownGroupTitle,
-      sectionComponent: 'section',
-      disabledClass: styles.modifiers.disabled,
-      plainTextClass: styles.modifiers.text,
-      ouiaId: useOUIAId(Dropdown.displayName, ouiaId),
-      ouiaSafe,
-      ouiaComponentType: Dropdown.displayName,
-      alignments,
-      ...contextProps
-    }}
-  >
-    <DropdownWithContext
-      menuAppendTo={menuAppendTo}
-      isFlipEnabled={isFlipEnabled}
-      zIndex={zIndex}
-      minWidth={minWidth}
-      {...props}
-    />
-  </DropdownContext.Provider>
-);
-Dropdown.displayName = 'Dropdown';

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

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import { DropdownContext } from './dropdownConstants';
-
-export interface DropdownGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
-  /** Checkboxes within group */
-  children?: React.ReactNode;
-  /** Additional classes added to the DropdownGroup control */
-  className?: string;
-  /** Group label */
-  label?: React.ReactNode;
-}
-
-export const DropdownGroup: React.FunctionComponent<DropdownGroupProps> = ({
-  children = null,
-  className = '',
-  label = '',
-  ...props
-}: DropdownGroupProps) => (
-  <DropdownContext.Consumer>
-    {({ sectionClass, sectionTitleClass, sectionComponent }) => {
-      const SectionComponent = sectionComponent as any;
-      return (
-        <SectionComponent className={css(sectionClass, className)} {...props}>
-          {label && (
-            <h1 className={css(sectionTitleClass)} aria-hidden>
-              {label}
-            </h1>
-          )}
-          <ul role="none">{children}</ul>
-        </SectionComponent>
-      );
-    }}
-  </DropdownContext.Consumer>
-);
-DropdownGroup.displayName = 'DropdownGroup';