@patternfly/react-core 6.0.0-alpha.57 → 6.0.0-alpha.59

package/src/deprecated/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap

@@ -1,178 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InternalDropdownItem dropdown items a 1`] = `
-<DocumentFragment>
-  <li
-    role="none"
-  >
-    <a
-      class=""
-      role="none"
-    >
-      Something
-    </a>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`InternalDropdownItem dropdown items aria-disabled a 1`] = `
-<DocumentFragment>
-  <li
-    role="none"
-  >
-    <a
-      aria-disabled="true"
-      class="pf-m-aria-disabled"
-      role="none"
-    >
-      Something
-    </a>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`InternalDropdownItem dropdown items aria-disabled button 1`] = `
-<DocumentFragment>
-  <li
-    role="none"
-  >
-    <button
-      aria-disabled="true"
-      class="pf-m-aria-disabled"
-      role="none"
-      type="button"
-    >
-      Something
-    </button>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`InternalDropdownItem dropdown items button 1`] = `
-<DocumentFragment>
-  <li
-    role="none"
-  >
-    <button
-      class=""
-      role="none"
-      type="button"
-    >
-      Something
-    </button>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`InternalDropdownItem dropdown items description a 1`] = `
-<DocumentFragment>
-  <li
-    role="none"
-  >
-    <a
-      class="pf-m-description"
-      role="none"
-    >
-      <div
-        class="pf-v6-c-dropdown__menu-item-main"
-      >
-        Something
-      </div>
-      <div
-        class="pf-v6-c-dropdown__menu-item-description"
-      >
-        Something's link description
-      </div>
-    </a>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`InternalDropdownItem dropdown items description button 1`] = `
-<DocumentFragment>
-  <li
-    role="none"
-  >
-    <button
-      class="pf-m-description"
-      role="none"
-      type="button"
-    >
-      <div
-        class="pf-v6-c-dropdown__menu-item-main"
-      >
-        Something
-      </div>
-      <div
-        class="pf-v6-c-dropdown__menu-item-description"
-      >
-        Something's button description
-      </div>
-    </button>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`InternalDropdownItem dropdown items disabled a 1`] = `
-<DocumentFragment>
-  <li
-    role="none"
-  >
-    <a
-      aria-disabled="true"
-      class=""
-      role="none"
-    >
-      Something
-    </a>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`InternalDropdownItem dropdown items disabled button 1`] = `
-<DocumentFragment>
-  <li
-    role="none"
-  >
-    <button
-      aria-disabled="true"
-      class=""
-      role="none"
-      type="button"
-    >
-      Something
-    </button>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`InternalDropdownItem dropdown items hover a 1`] = `
-<DocumentFragment>
-  <li
-    role="none"
-  >
-    <a
-      class=""
-      role="none"
-    >
-      Something
-    </a>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`InternalDropdownItem dropdown items hover button 1`] = `
-<DocumentFragment>
-  <li
-    role="none"
-  >
-    <button
-      class=""
-      role="none"
-      type="button"
-    >
-      Something
-    </button>
-  </li>
-</DocumentFragment>
-`;

package/src/deprecated/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap

@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Dropdown toggle 1`] = `
-<DocumentFragment>
-  <button
-    aria-expanded="false"
-    class="pf-v6-c-dropdown__toggle"
-    data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-    data-ouia-component-type="PF6/DropdownToggle"
-    data-ouia-safe="true"
-    id="Dropdown Toggle"
-    type="button"
-  >
-    <span
-      class=""
-    >
-      Dropdown
-    </span>
-    <span
-      class=""
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v6-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[`Kebab toggle 1`] = `
-<DocumentFragment>
-  <button
-    aria-expanded="false"
-    aria-label="Actions"
-    class="pf-v6-c-dropdown__toggle"
-    id="Dropdown Toggle"
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      class="pf-v6-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 192 512"
-      width="1em"
-    >
-      <path
-        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-      />
-    </svg>
-  </button>
-</DocumentFragment>
-`;

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

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { OUIAProps } from '../../../helpers';
-
-export enum DropdownPosition {
-  right = 'right',
-  left = 'left'
-}
-
-export enum DropdownDirection {
-  up = 'up',
-  down = 'down'
-}
-
-export const DropdownContext = React.createContext<
-  {
-    onSelect?: (event?: any) => void;
-    id?: string;
-    toggleIndicatorClass?: string;
-    toggleIconClass?: string;
-    toggleTextClass?: string;
-    menuClass?: string;
-    itemClass?: string;
-    toggleClass?: string;
-    baseClass?: string;
-    baseComponent?: string;
-    sectionClass?: string;
-    sectionTitleClass?: string;
-    sectionComponent?: string;
-    disabledClass?: string;
-    plainTextClass?: string;
-    menuComponent?: string;
-    ouiaComponentType?: string;
-    alignments?: {
-      sm?: 'right' | 'left';
-      md?: 'right' | 'left';
-      lg?: 'right' | 'left';
-      xl?: 'right' | 'left';
-      '2xl'?: 'right' | 'left';
-    };
-  } & OUIAProps
->({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onSelect: (event?: any) => undefined as any,
-  id: '',
-  toggleIndicatorClass: '',
-  toggleIconClass: '',
-  toggleTextClass: '',
-  menuClass: '',
-  itemClass: '',
-  toggleClass: '',
-  baseClass: '',
-  baseComponent: 'div',
-  sectionClass: '',
-  sectionTitleClass: '',
-  sectionComponent: 'section',
-  disabledClass: '',
-  plainTextClass: '',
-  menuComponent: 'ul'
-});
-
-export const DropdownArrowContext = React.createContext({
-  keyHandler: null,
-  sendRef: null
-});

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

@@ -1,213 +0,0 @@
----
-id: Dropdown
-section: components
-subsection: menus
-cssPrefix: pf-v5-c-dropdown
-propComponents:
-  [
-    'Dropdown',
-    'DropdownGroup',
-    'DropdownItem',
-    'DropdownToggle',
-    'DropdownToggleCheckbox',
-    'DropdownToggleAction',
-    DropdownSeparator
-  ]
-ouia: true
-deprecated: true
----
-
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
-import { Link } from '@reach/router';
-import avatarImg from '../../../../components/assets/avatarImg.svg';
-
-## Examples
-
-### Basic dropdowns
-
-Basic dropdowns present users with a menu of items upon clicking a dropdown toggle. The `isOpen` property is used to determine whether the menu is opened or not.
-
-All of the items in a dropdown list are created as `<DropdownItem>` components. The following example shows a few different states of dropdown items. As shown in this example, dropdown items may:
-
-- Use the `tooltip` property to enable tooltip support.
-- Use the `isDisabled` property to disable an item.
-- Use the `isAriaDisabled` property to style an item as disabled, while still allowing the item to receive keyboard focus and display a tooltip.
-
-This example also uses a `<DropdownSeparator>`, which adds a horizontal line that splits the menu into 2 sections.
-
-```ts file='./DropdownBasic.tsx'
-
-```
-
-### Autofocus on dropdown expansion
-
-A `<DropdownItem>` may use the `autoFocus` property so that it automatically receives focus when the menu is expanded. `autoFocus` cannot be applied to disabled dropdown items.
-
-```ts file="./DropdownInitialSelection.tsx"
-
-```
-
-### With groups of items
-
-Use the `<DropdownGroup>` component to group sets of related dropdown items together. Use the `isGrouped` property on the `Dropdown` component to indicate that a dropdown contains grouped items.
-
-```ts file="./DropdownGroups.tsx"
-
-```
-
-### With item descriptions
-
-A `<DropdownItem>` may use the `description` property to provide users with more context. This description will appear in the menu below the dropdown item it corresponds to.
-
-```ts file="./DropdownDescriptions.tsx"
-
-```
-
-### With custom content
-
-You may replace standard dropdown items with custom content. If so, you must style the menu contents and manage focus within your custom implementation.
-
-```ts file="./DropdownBasicPanel.tsx"
-
-```
-
-### With router link items
-
-`<DropdownItem>` may use the `component` property to include router links.
-
-```ts file="./DropdownRouterLink.tsx"
-
-```
-
-### Toggle styling
-
-You can adjust the styling of a `<DropdownToggle>` using the `toggleVariant` property. `toggleVariant` may be set to 'primary', 'secondary', or 'default'.
-
-```ts file="./DropdownPrimaryToggle.tsx"
-
-```
-
-### Plain text toggle
-
-A toggle may be styled as plain text using the `isText` and `isPlain`properties. The following example applies these properties to a `<Dropdown>` component.
-
-```ts file="./DropdownPlainTextToggle.tsx"
-
-```
-
-### Disabled toggles
-
-A `<DropdownToggle>` may use the `isDisabled` property to disable the expansion of the dropdown menu.
-
-```ts file="./DropdownDisabled.tsx"
-
-```
-
-### Icon toggle
-
-`<DropdownToggle>` may use a recognizable icon instead of a text label if text would take up too much room. Set the `toggleIndicator` property to `{null}` to remove the default dropdown toggle caret.
-
-```ts file="./DropdownIconOnly.tsx"
-
-```
-
-### Kebab toggle
-
-Use `<KebabToggle>` to replace the default text label and caret with a kebab icon. A kebab toggle can be used to indicate that a dropdown connects to a menu.
-
-```ts file="./DropdownKebab.tsx"
-
-```
-
-### Toggle with image
-
-The `icon` property can be used to display an image in the `DropdownToggle` and can be used alongside a text label.
-
-```ts file="./DropdownImageAndText.tsx"
-
-```
-
-### Toggle with badge
-
-You may use a `<BadgeToggle>` to display the number of dropdown menu items.
-
-```ts file="./DropdownBadge.tsx"
-
-```
-
-### Split button (checkbox)
-
-To combine an action button or other control with a dropdown menu, use a split button. A `<DropdownToggle>` can be rendered as a split button by using the `splitButtonItems` property. Elements to be displayed before the toggle button must be included in `splitButtonItems`.
-
-The following example shows a split button with a `<DropdownToggleCheckbox>`, which is primarily used for bulk select operations on large data sets.
-
-```ts file="./DropdownSplitButton.tsx"
-
-```
-
-### Split button (checkbox with toggle text)
-
-Text labels may optionally be used alongside actions within split buttons.
-
-```ts file="./DropdownSplitButtonText.tsx"
-
-```
-
-### Split button (progress checkbox)
-
-The `isInProgress` property can be used to indicate a progress state by rendering a spinner in place of a checkbox.
-
-```ts file="./DropdownSplitButtonProgressCheckbox.tsx"
-
-```
-
-### Split button toggle variants
-
-Use the `toggleVariant` and `splitButtonVariant` properties to adjust the styling of split button toggles.
-
-The following example uses `toggleVariant="primary"` to apply primary visual styling and `splitButtonVariant="action"` to include an action.
-
-```ts file="./DropdownSplitButtonActionPrimary.tsx"
-
-```
-
-### Dropdown alignment
-
-The alignment of a dropdown menu may be changed to better fit the size of a user's browser window. A `<Dropdown>` may use the `alignments` property to indicate how the menu will align at different screen sizes.
-
-```ts file="./DropdownAlignmentOnBreakpoints.tsx"
-
-```
-
-### Right-positioned menu
-
-The following example demonstrates a `<Dropdown>` with a `position` equal to 'right'. By default, a dropdown menu is left-positioned, but a right-positioned menu may work better depending on where your dropdown is placed on a page.
-
-```ts file="./DropdownPositionRight.tsx"
-
-```
-
-### Upwards directional menu
-
-The following example demonstrates a `<Dropdown>` with a `direction` equal to 'up'. This will alter the default menu behavior so that the dropdown menu is displayed above the dropdown toggle.
-
-```ts file="./DropdownDirectionUp.tsx"
-
-```
-
-### Using document parent element
-
-Avoid passing in `document.body` to a `<Dropdown>` `menuAppendTo` property. Doing so can cause accessibility issues, such as being unable to navigate `<Dropdown>` options using keyboards or screen readers.
-
-Instead, append to ‘parent’ to avoid sacrificing accessibility.
-
-The following example demonstrates both methods of appending. After making a selection, both dropdowns retain focus on their respective `<Dropdown>`, but the options for the `document.body` variant cannot be navigated via Voice Over.
-
-```ts file="./DropdownAppendBodyVsParent.tsx"
-
-```

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

@@ -1,64 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
-
-export const DropdownAlignmentOnBreakpoints: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
-  };
-
-  const onFocus = () => {
-    const element = document.getElementById('toggle-breakpoints');
-    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}
-      alignments={{
-        sm: 'left',
-        md: 'right',
-        lg: 'left',
-        xl: 'right',
-        '2xl': 'left'
-      }}
-      toggle={
-        <DropdownToggle id="toggle-breakpoints" onToggle={onToggle}>
-          Dropdown
-        </DropdownToggle>
-      }
-      isOpen={isOpen}
-      dropdownItems={dropdownItems}
-    />
-  );
-};

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

@@ -1,84 +0,0 @@
-import React from 'react';
-import { Flex } from '@patternfly/react-core';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
-
-export const DropdownAppendBodyVsParent: React.FunctionComponent = () => {
-  const [isBodyOpen, setIsBodyOpen] = React.useState(false);
-  const [isParentOpen, setIsParentOpen] = React.useState(false);
-
-  const onBodyToggle = (_event: any, isBodyOpen: boolean) => {
-    setIsBodyOpen(isBodyOpen);
-  };
-  const onParentToggle = (_event: any, isParentOpen: boolean) => {
-    setIsParentOpen(isParentOpen);
-  };
-
-  const onBodyFocus = () => {
-    const element = document.getElementById('toggle-append-body');
-    element?.focus();
-  };
-  const onParentFocus = () => {
-    const element = document.getElementById('toggle-append-parent');
-    element?.focus();
-  };
-
-  const onBodySelect = () => {
-    setIsBodyOpen(false);
-    onBodyFocus();
-  };
-  const onParentSelect = () => {
-    setIsParentOpen(false);
-    onParentFocus();
-  };
-
-  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 (
-    <Flex>
-      <Dropdown
-        onSelect={onBodySelect}
-        toggle={
-          <DropdownToggle id="toggle-append-body" onToggle={onBodyToggle}>
-            Dropdown appended to body
-          </DropdownToggle>
-        }
-        isOpen={isBodyOpen}
-        dropdownItems={dropdownItems}
-        menuAppendTo={() => document.body}
-      />
-      <Dropdown
-        onSelect={onParentSelect}
-        toggle={
-          <DropdownToggle id="toggle-append-parent" onToggle={onParentToggle}>
-            Dropdown appended to parent
-          </DropdownToggle>
-        }
-        isOpen={isParentOpen}
-        dropdownItems={dropdownItems}
-        menuAppendTo="parent"
-      />
-    </Flex>
-  );
-};