diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx index 7537cba2499..a67ec598808 100644 --- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx +++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; import { Page } from '../Page'; -import { PageHeader } from '../../../deprecated/components/PageHeader'; import { PageSidebar } from '../PageSidebar'; import { PageSidebarBody } from '../PageSidebarBody'; import { PageSection } from '../PageSection'; @@ -13,6 +12,7 @@ import { SkipToContent } from '../../SkipToContent'; import { PageBreadcrumb } from '../PageBreadcrumb'; import { PageNavigation } from '../PageNavigation'; import { PageGroup } from '../PageGroup'; +import { Masthead } from '../../Masthead'; const props = { 'aria-label': 'Page layout', @@ -22,7 +22,7 @@ const props = { describe('Page', () => { test('Check page vertical layout example against snapshot', () => { - const Header = undefined} />; + const Header = ; const Sidebar = ( Navigation @@ -39,7 +39,7 @@ describe('Page', () => { }); test('Check dark page against snapshot', () => { - const Header = undefined} />; + const Header = ; const Sidebar = ( Navigation @@ -56,7 +56,7 @@ describe('Page', () => { }); test('Check page horizontal layout example against snapshot', () => { - const Header = ; + const Header = ; const Sidebar = ; const { asFragment } = render( @@ -69,7 +69,7 @@ describe('Page', () => { }); test('Check page to verify breadcrumb is created', () => { - const Header = ; + const Header = ; const Sidebar = ; const PageBreadcrumb = () => ( @@ -93,7 +93,7 @@ describe('Page', () => { }); test('Verify sticky top breadcrumb on all height breakpoints', () => { - const Header = ; + const Header = ; const Sidebar = ; const PageBreadcrumb = () => ( @@ -123,7 +123,7 @@ describe('Page', () => { }); test('Verify sticky bottom breadcrumb on all height breakpoints', () => { - const Header = ; + const Header = ; const Sidebar = ; const PageBreadcrumb = () => ( @@ -155,7 +155,7 @@ describe('Page', () => { }); test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => { - const Header = ; + const Header = ; const Sidebar = ; const { asFragment } = render( @@ -179,7 +179,7 @@ describe('Page', () => { }); test('Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => { - const Header = ; + const Header = ; const Sidebar = ; const { asFragment } = render( @@ -203,7 +203,7 @@ describe('Page', () => { }); test('Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => { - const Header = ; + const Header = ; const Sidebar = ; const { asFragment } = render( @@ -229,7 +229,7 @@ describe('Page', () => { }); test('Check page to verify nav is created - PageNavigation syntax', () => { - const Header = ; + const Header = ; const Sidebar = ; const { asFragment } = render( @@ -256,7 +256,7 @@ describe('Page', () => { }); test('Check page to verify grouped nav and breadcrumb - new components syntax', () => { - const Header = ; + const Header = ; const Sidebar = ; const { asFragment } = render( @@ -295,7 +295,7 @@ describe('Page', () => { }); test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => { - const Header = ; + const Header = ; const Sidebar = ; const crumb = ( @@ -349,7 +349,7 @@ describe('Page', () => { }); test('Check page to verify skip to content points to main content region', () => { - const Header = ; + const Header = ; const Sidebar = ; const PageBreadcrumb = ( diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap index cf6f2257d84..f9c377ced9a 100644 --- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap +++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap @@ -8,19 +8,8 @@ exports[`Page Check dark page against snapshot 1`] = ` id="PageId" >
-
- - Logo - -
- PageHeaderTools | Avatar -
+ class="pf-v6-c-masthead pf-m-display-inline-on-md" + />
-
- - Logo - -
-
- Navigation -
- PageHeaderTools | Avatar -
+ class="pf-v6-c-masthead pf-m-display-inline-on-md" + />
-
- - Logo - -
-
- Navigation -
- PageHeaderTools | Avatar -
+ class="pf-v6-c-masthead pf-m-display-inline-on-md" + />
-
- - Logo - -
-
- Navigation -
- PageHeaderTools | Avatar -
+ class="pf-v6-c-masthead pf-m-display-inline-on-md" + />
-
- - Logo - -
-
- Navigation -
- PageHeaderTools | Avatar -
+ class="pf-v6-c-masthead pf-m-display-inline-on-md" + />
-
- - Logo - -
-
- Navigation -
- PageHeaderTools | Avatar -
+ class="pf-v6-c-masthead pf-m-display-inline-on-md" + />
-
- - Logo - -
-
- Navigation -
- PageHeaderTools | Avatar -
+ class="pf-v6-c-masthead pf-m-display-inline-on-md" + />
-
- - Logo - -
-
- Navigation -
- PageHeaderTools | Avatar -
+ class="pf-v6-c-masthead pf-m-display-inline-on-md" + />
-
- - Logo - -
- PageHeaderTools | Avatar -
+ class="pf-v6-c-masthead pf-m-display-inline-on-md" + />
-
- - Logo - -
-
- Navigation -
- PageHeaderTools | Avatar -
+ class="pf-v6-c-masthead pf-m-display-inline-on-md" + />
-
- - Logo - -
-
- Navigation -
- PageHeaderTools | Avatar -
+ class="pf-v6-c-masthead pf-m-display-inline-on-md" + />
-
- - Logo - -
-
- Navigation -
- PageHeaderTools | Avatar -
+ class="pf-v6-c-masthead pf-m-display-inline-on-md" + />
-
- - Logo - -
-
- Navigation -
- PageHeaderTools | Avatar -
+ class="pf-v6-c-masthead pf-m-display-inline-on-md" + />
{ - /** Additional element css classes */ - className?: string; - /** Display menu above or below dropdown toggle */ - direction?: DropdownDirection | 'up' | 'down'; - /** Array of application launcher items */ - items?: React.ReactNode[]; - /** Render Application launcher toggle as disabled icon */ - isDisabled?: boolean; - /** open bool */ - isOpen?: boolean; - /** Indicates where menu will be alligned horizontally */ - position?: DropdownPosition | 'right' | 'left'; - /** Function callback called when user selects item */ - onSelect?: (event: any) => void; - /** Callback called when application launcher toggle is clicked */ - onToggle?: ( - event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent | React.MouseEvent, - isOpen: boolean - ) => void; - /** Adds accessible text to the button. Required for plain buttons */ - 'aria-label'?: string; - /** Flag to indicate if application launcher has groups */ - isGrouped?: boolean; - /** Toggle Icon, optional to override the icon used for the toggle */ - toggleIcon?: React.ReactNode; - /** 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'; - /** ID list of favorited ApplicationLauncherItems */ - favorites?: string[]; - /** Enables favorites. Callback called when an ApplicationLauncherItem's favorite button is clicked */ - onFavorite?: (event: React.MouseEvent, itemId: string, isFavorite: boolean) => void; - /** Enables search. Callback called when text input is entered into search box */ - onSearch?: (event: React.FormEvent, textInput: string) => void; - /** Placeholder text for search input */ - searchPlaceholderText?: string; - /** Text for search input when no results are found */ - searchNoResultsText?: string; - /** Additional properties for search input */ - searchProps?: any; - /** Label for the favorites group */ - favoritesLabel?: string; - /** ID of toggle */ - toggleId?: string; - /** z-index of the application launcher when menuAppendTo is not inline. */ - zIndex?: number; -} - -class ApplicationLauncher extends React.Component { - static displayName = 'ApplicationLauncher'; - static defaultProps: ApplicationLauncherProps = { - className: '', - isDisabled: false, - direction: DropdownDirection.down, - favorites: [] as string[], - items: [] as React.ReactNode[], - isOpen: false, - position: DropdownPosition.left, - /* eslint-disable @typescript-eslint/no-unused-vars */ - onSelect: (_event: any): any => undefined, - onToggle: (_event: any, _value: boolean): any => undefined, - /* eslint-enable @typescript-eslint/no-unused-vars */ - 'aria-label': 'Application launcher', - isGrouped: false, - toggleIcon: , - searchPlaceholderText: 'Filter by name...', - searchNoResultsText: 'No results found', - favoritesLabel: 'Favorites', - menuAppendTo: 'inline' - }; - - createSearchBox = () => { - const { onSearch, searchPlaceholderText, searchProps } = this.props; - - return ( -
- } - > -
- ); - }; - - render() { - const { - 'aria-label': ariaLabel, - isOpen, - onToggle, - toggleIcon, - toggleId, - onSelect, - isDisabled, - className, - isGrouped, - favorites, - onFavorite, - onSearch, - items, - /* eslint-disable @typescript-eslint/no-unused-vars */ - searchPlaceholderText, - searchProps, - ref, - /* eslint-enable @typescript-eslint/no-unused-vars */ - favoritesLabel, - searchNoResultsText, - menuAppendTo, - zIndex = 9999, - ...props - } = this.props; - let renderableItems: React.ReactNode[] = []; - - if (onFavorite) { - let favoritesGroup: React.ReactNode[] = []; - let renderableFavorites: React.ReactNode[] = []; - if (favorites.length > 0) { - renderableFavorites = createRenderableFavorites(items, isGrouped, favorites, true); - favoritesGroup = [ - - {renderableFavorites} - - - ]; - } - if (renderableFavorites.length > 0) { - renderableItems = favoritesGroup.concat(extendItemsWithFavorite(items, isGrouped, favorites)); - } else { - renderableItems = extendItemsWithFavorite(items, isGrouped, favorites); - } - } else { - renderableItems = items; - } - - if (items.length === 0) { - renderableItems = [ - - {searchNoResultsText} - - ]; - } - if (onSearch) { - renderableItems = [this.createSearchBox(), ...renderableItems]; - } - - return ( - - - - {toggleIcon} - - } - isGrouped={isGrouped} - /> - - - ); - } -} - -export { ApplicationLauncher }; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherContent.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherContent.tsx deleted file mode 100644 index 35263662b7d..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherContent.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; -import { css } from '@patternfly/react-styles'; -import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher'; -import { ApplicationLauncherIcon } from './ApplicationLauncherIcon'; -import { ApplicationLauncherText } from './ApplicationLauncherText'; -import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; -import { ApplicationLauncherItemContext } from './ApplicationLauncherItemContext'; - -export interface ApplicationLauncherContentProps { - /** Main content to be rendered */ - children: React.ReactNode; -} - -export const ApplicationLauncherContent: React.FunctionComponent = ({ - children -}: ApplicationLauncherContentProps) => ( - - {({ isExternal, icon }) => ( - <> - {icon && {icon}} - {icon ? {children} : children} - {isExternal && ( - <> - - - - (opens new window) - - )} - - )} - -); -ApplicationLauncherContent.displayName = 'ApplicationLauncherContent'; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherContext.ts b/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherContext.ts deleted file mode 100644 index 020decd8d68..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherContext.ts +++ /dev/null @@ -1,6 +0,0 @@ -import * as React from 'react'; - -export const ApplicationLauncherContext = React.createContext({ - // eslint-disable-next-line @typescript-eslint/no-unused-vars - onFavorite: (event: React.MouseEvent, itemId: string, isFavorite: boolean) => {} -}); diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherGroup.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherGroup.tsx deleted file mode 100644 index 7be51bf49d4..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherGroup.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { DropdownGroup, DropdownGroupProps } from '../Dropdown'; - -export const ApplicationLauncherGroup: React.FunctionComponent = ({ - children, - ...props -}: DropdownGroupProps) => {children}; -ApplicationLauncherGroup.displayName = 'ApplicationLauncherGroup'; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherIcon.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherIcon.tsx deleted file mode 100644 index 32dccfab789..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherIcon.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; -import { css } from '@patternfly/react-styles'; -import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher'; - -export interface ApplicationLauncherIconProps extends React.HTMLProps { - /** content rendered inside the icon container */ - children: React.ReactNode; - /** Additional classes added to the icon container */ - className?: string; -} - -export const ApplicationLauncherIcon: React.FunctionComponent = ({ - // eslint-disable-next-line @typescript-eslint/no-unused-vars - className = '', - children, - ...props -}: ApplicationLauncherIconProps) => ( - - {children} - -); -ApplicationLauncherIcon.displayName = 'ApplicationLauncherIcon'; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherItem.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherItem.tsx deleted file mode 100644 index 259fd9dfcd7..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherItem.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import * as React from 'react'; -import { css } from '@patternfly/react-styles'; -import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher'; -import { DropdownItem, DropdownItemProps } from '../Dropdown'; -import { ApplicationLauncherContent } from './ApplicationLauncherContent'; -import { ApplicationLauncherContext } from './ApplicationLauncherContext'; -import { ApplicationLauncherItemContext } from './ApplicationLauncherItemContext'; -import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon'; -import { getUniqueId } from '../../../helpers/util'; - -export interface ApplicationLauncherItemProps { - /** Icon rendered before the text */ - icon?: React.ReactNode; - /** If clicking on the item should open the page in a separate window */ - isExternal?: boolean; - /** Tooltip to display when hovered over the item */ - tooltip?: React.ReactNode; - /** Additional tooltip props forwarded to the Tooltip component */ - tooltipProps?: any; - /** A ReactElement to render, or a string to use as the component tag. - * Example: component={Alert} - * Example: component="button" - */ - component?: React.ReactNode; - /** Flag indicating if the item is favorited */ - isFavorite?: boolean; - /** Aria label text for favoritable button when favorited */ - ariaIsFavoriteLabel?: string; - /** Aria label text for favoritable button when not favorited */ - ariaIsNotFavoriteLabel?: string; - /** ID of the item. Required for tracking favorites. */ - id?: string; - /** Custom item rendering that receives the ApplicationLauncherContext */ - customChild?: React.ReactNode; - /** Flag indicating if hitting enter triggers an arrow down key press. Automatically passed to favorites list items. */ - enterTriggersArrowDown?: boolean; -} - -export const ApplicationLauncherItem: React.FunctionComponent = ({ - className = '', - id, - children, - icon = null, - isExternal = false, - href, - tooltip = null, - tooltipProps = null, - component = 'a', - isFavorite = null, - ariaIsFavoriteLabel = 'starred', - ariaIsNotFavoriteLabel = 'not starred', - customChild, - enterTriggersArrowDown = false, - ...props -}: ApplicationLauncherItemProps & DropdownItemProps) => ( - - - {({ onFavorite }) => ( - { - onFavorite(event, (id || getUniqueId('app-launcher-option')).replace('favorite-', ''), isFavorite); - }} - > - - - ) - })} - {...props} - > - {children && {children}} - - )} - - -); -ApplicationLauncherItem.displayName = 'ApplicationLauncherItem'; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherItemContext.ts b/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherItemContext.ts deleted file mode 100644 index 668125bc63f..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherItemContext.ts +++ /dev/null @@ -1,3 +0,0 @@ -import * as React from 'react'; - -export const ApplicationLauncherItemContext = React.createContext({ isExternal: false, icon: null }); diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx deleted file mode 100644 index 59ca4ac3aba..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import { DropdownSeparator, SeparatorProps } from '../Dropdown/DropdownSeparator'; - -export const ApplicationLauncherSeparator: React.FunctionComponent = ({ - // eslint-disable-next-line @typescript-eslint/no-unused-vars - children, - ...props -}: SeparatorProps) => ; -ApplicationLauncherSeparator.displayName = 'ApplicationLauncherSeparator'; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherText.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherText.tsx deleted file mode 100644 index d4e31244029..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherText.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; -import { css } from '@patternfly/react-styles'; -import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher'; - -export interface ApplicationLauncherTextProps extends React.HTMLProps { - /** content rendered inside the text container */ - children: React.ReactNode; - /** Additional classes added to the text container */ - className?: string; -} - -export const ApplicationLauncherText: React.FunctionComponent = ({ - className = '', - children, - ...props -}: ApplicationLauncherTextProps) => ( - - {children} - -); -ApplicationLauncherText.displayName = 'ApplicationLauncherText'; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx deleted file mode 100644 index 91af3313128..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/ApplicationLauncher.test.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; -import { ApplicationLauncher } from '../ApplicationLauncher'; -import { ApplicationLauncherItem } from '../ApplicationLauncherItem'; -import { DropdownPosition, DropdownDirection } from '../../Dropdown/dropdownConstants'; -import { ApplicationLauncherSeparator } from '../ApplicationLauncherSeparator'; - -const dropdownItems = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - -]; - -describe('ApplicationLauncher', () => { - test('regular', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); - - test('right aligned', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); - - test('dropup', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); - - test('dropup + right aligned', () => { - const { asFragment } = render( - - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('expanded', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); - - test('custom icon', () => { - const { asFragment } = render( - } /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('Renders in strict mode', () => { - const consoleError = jest.spyOn(console, 'error'); - const { asFragment } = render( - - {' '} - - ); - expect(consoleError).not.toHaveBeenCalled(); - expect(asFragment()).toMatchSnapshot(); - }); -}); diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherContent.test.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherContent.test.tsx deleted file mode 100644 index 4d76648527c..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherContent.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { ApplicationLauncherContent } from '../../ApplicationLauncherContent'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('ApplicationLauncherContent should match snapshot (auto-generated)', () => { - const { asFragment } = render(ReactNode
} />); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherGroup.test.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherGroup.test.tsx deleted file mode 100644 index d84f9c59175..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherGroup.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { ApplicationLauncherGroup } from '../../ApplicationLauncherGroup'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('ApplicationLauncherGroup should match snapshot (auto-generated)', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherIcon.test.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherIcon.test.tsx deleted file mode 100644 index 3a4b6a72b8f..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherIcon.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { ApplicationLauncherIcon } from '../../ApplicationLauncherIcon'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('ApplicationLauncherIcon should match snapshot (auto-generated)', () => { - const { asFragment } = render(ReactNode
} className={"''"} />); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx deleted file mode 100644 index fbba4de4795..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; - -import { ApplicationLauncherSeparator } from '../../ApplicationLauncherSeparator'; -import { DropdownArrowContext } from '../../../Dropdown/dropdownConstants'; - -describe('ApplicationLauncherSeparator', () => { - it('should match snapshot', () => { - const { asFragment } = render( - - - - ); - expect(asFragment()).toMatchSnapshot(); - }); -}); diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherText.test.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherText.test.tsx deleted file mode 100644 index 4208c3b4e63..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherText.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { ApplicationLauncherText } from '../../ApplicationLauncherText'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('ApplicationLauncherText should match snapshot (auto-generated)', () => { - const { asFragment } = render(ReactNode
} className={"''"} />); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherContent.test.tsx.snap b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherContent.test.tsx.snap deleted file mode 100644 index eaaeceb4bb3..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherContent.test.tsx.snap +++ /dev/null @@ -1,9 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ApplicationLauncherContent should match snapshot (auto-generated) 1`] = ` - -
- ReactNode -
- -`; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherGroup.test.tsx.snap b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherGroup.test.tsx.snap deleted file mode 100644 index cac805c9416..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherGroup.test.tsx.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ApplicationLauncherGroup should match snapshot (auto-generated) 1`] = ` - -
-
    -
- -`; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherIcon.test.tsx.snap b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherIcon.test.tsx.snap deleted file mode 100644 index c6c86a48ac4..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherIcon.test.tsx.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ApplicationLauncherIcon should match snapshot (auto-generated) 1`] = ` - - -
- ReactNode -
- - -`; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap deleted file mode 100644 index 32287b85d7e..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap +++ /dev/null @@ -1,14 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ApplicationLauncherSeparator should match snapshot 1`] = ` - -
  • -
    • -     -`; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherText.test.tsx.snap b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherText.test.tsx.snap deleted file mode 100644 index 562b520d741..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherText.test.tsx.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ApplicationLauncherText should match snapshot (auto-generated) 1`] = ` - - -
    - ReactNode -
    -     -     -`; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap deleted file mode 100644 index 56e757ab6fe..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap +++ /dev/null @@ -1,597 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ApplicationLauncher Renders in strict mode 1`] = ` - - - - -`; - -exports[`ApplicationLauncher custom icon 1`] = ` - - - -`; - -exports[`ApplicationLauncher dropup + right aligned 1`] = ` - - - -`; - -exports[`ApplicationLauncher dropup 1`] = ` - - - -`; - -exports[`ApplicationLauncher expanded 1`] = ` - - - -`; - -exports[`ApplicationLauncher regular 1`] = ` - - - -`; - -exports[`ApplicationLauncher right aligned 1`] = ` - - - -`; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncher.md b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncher.md deleted file mode 100644 index 18eb8e53247..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncher.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: Application launcher -section: components -subsection: menus -cssPrefix: pf-v5-c-app-launcher -propComponents: ['ApplicationLauncher', 'ApplicationLauncherItem', 'ApplicationLauncherContent'] -ouia: true -deprecated: true ---- - -import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/deprecated'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; -import { Link } from '@reach/router'; -import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg'; - -Note: Application launcher is built on dropdown, for extended API go to [dropdown](/components/menus/dropdown) documentation. -To add a tooltip, use the `tooltip` prop and optionally add more tooltip props by using `tooltipProps`. For more tooltip information go to [tooltip](/components/tooltip). - -## Examples - -### Basic - -```ts file="./ApplicationLauncherBasic.tsx" - -``` - -### Router link - -```ts file="./ApplicationLauncherRouterLink.tsx" - -``` - -### Disabled - -```ts file="./ApplicationLauncherDisabled.tsx" - -``` - -### Aligned right - -```ts file="./ApplicationLauncherAlignRight.tsx" - -``` - -### Aligned top - -```ts file="./ApplicationLauncherAlignTop.tsx" - -``` - -### With tooltip - -```ts file="./ApplicationLauncherTooltip.tsx" - -``` - -### With sections and icons - -```ts file="./ApplicationLauncherSectionsAndIcons.tsx" - -``` - -### With favorites and search - -```ts file="./ApplicationLauncherFavoritesAndSearch.tsx" - -``` - -### With custom icon - -```ts file="./ApplicationLauncherCustomIcon.tsx" - -``` - -### Basic with menu appended to document body - -```ts file="./ApplicationLauncherDocumentBody.tsx" - -``` diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx deleted file mode 100644 index 19cd220ffc4..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { DropdownPosition } from '@patternfly/react-core/deprecated'; -import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core/deprecated'; - -const appLauncherItems: React.ReactElement[] = [ - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - -]; - -export const ApplicationLauncherAlignRight: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen); - const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen); - - return ( - - ); -}; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx deleted file mode 100644 index 51c712d42d0..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem, DropdownDirection } from '@patternfly/react-core/deprecated'; - -const appLauncherItems: React.ReactElement[] = [ - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - -]; - -export const ApplicationLauncherAlignTop: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen); - const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen); - - return ( - - ); -}; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx deleted file mode 100644 index 3835d1f6542..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core/deprecated'; - -const appLauncherItems: React.ReactElement[] = [ - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - -]; - -export const ApplicationLauncherBasic: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen); - const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen); - - return ; -}; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx deleted file mode 100644 index ca329622b01..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core/deprecated'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; - -const appLauncherItems: React.ReactElement[] = [ - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - -]; - -export const ApplicationLauncherCustomIcon: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen); - const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen); - - return ( - } - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherDisabled.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherDisabled.tsx deleted file mode 100644 index 71fb9855a7d..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherDisabled.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core/deprecated'; - -const appLauncherItems: React.ReactElement[] = [ - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - -]; - -export const ApplicationLauncherDisabled: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen); - const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen); - - return ( - - ); -}; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherDocumentBody.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherDocumentBody.tsx deleted file mode 100644 index f852d64d58b..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherDocumentBody.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core/deprecated'; - -const appLauncherItems: React.ReactElement[] = [ - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - -]; - -export const ApplicationLauncherDocumentBody: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen); - const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen); - - return ( - document.body} - onSelect={onSelect} - onToggle={onToggle} - isOpen={isOpen} - items={appLauncherItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx deleted file mode 100644 index f562bb9f73a..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import React from 'react'; -import { - ApplicationLauncher, - ApplicationLauncherItem, - ApplicationLauncherGroup, - ApplicationLauncherSeparator -} from '@patternfly/react-core/deprecated'; -import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg'; - -const icon: JSX.Element = ; - -const appLauncherItems: React.ReactElement[] = [ - - - Item without group title - - - , - - - Group 2 button - - - Group 2 anchor link - - - , - - - Group 3 button - - - Group 3 anchor link - - -]; - -export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [favorites, setFavorites] = React.useState([]); - const [filteredItems, setFilteredItems] = React.useState(null); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - setFilteredItems(null); - }; - - const onFavorite = (_event: React.MouseEvent, itemId: string, isFavorite: boolean) => { - let updatedFavorites: string[] = [...favorites, itemId]; - - if (isFavorite) { - updatedFavorites = favorites.filter((id) => id !== itemId); - } - - setFavorites(updatedFavorites); - }; - - const onSearch = (_event: React.FormEvent, textInput: string) => { - if (textInput === '') { - setFilteredItems(null); - } else { - const filteredGroups = appLauncherItems - .map((group: React.ReactElement) => { - const filteredGroup = React.cloneElement(group, { - children: group.props.children.filter((item: React.ReactElement) => { - if (item.type === ApplicationLauncherSeparator) { - return item; - } - - return item.props.children.toLowerCase().includes(textInput.toLowerCase()); - }) - }); - - if ( - filteredGroup.props.children.length > 0 && - filteredGroup.props.children[0].type !== ApplicationLauncherSeparator - ) { - return filteredGroup; - } - }) - .filter((newGroup) => newGroup); - - if (filteredGroups.length > 0) { - let lastGroup = filteredGroups.pop(); - - lastGroup = React.cloneElement(lastGroup, { - children: lastGroup.props.children.filter((item) => item.type !== ApplicationLauncherSeparator) - }); - - filteredGroups.push(lastGroup); - } - - setFilteredItems(filteredGroups); - } - }; - - return ( - - ); -}; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx deleted file mode 100644 index b59544ef086..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import { Link } from '@reach/router'; -import { - ApplicationLauncher, - ApplicationLauncherItem, - ApplicationLauncherContent -} from '@patternfly/react-core/deprecated'; -import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg'; -/* eslint-disable camelcase */ -import c_app_launcher__menu_item_Color from '@patternfly/react-tokens/dist/esm/c_app_launcher__menu_item_Color'; - -const icon: JSX.Element = ; - -const linkStyle: React.CSSProperties = { - color: c_app_launcher__menu_item_Color.var, - textDecoration: 'none' -}; - -const appLauncherItems: React.ReactElement[] = [ - - @reach/router Link - - } - />, - - @reach/router Link with icon - - } - />, - - Application 1 (anchor link) - , - alert('Clicked item 2')}> - Application 2 (button with onClick) - , - - Unavailable application - -]; - -export const ApplicationLauncherRouterLink: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen); - const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen); - - return ; -}; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx deleted file mode 100644 index 661ca98bcde..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { - ApplicationLauncher, - ApplicationLauncherItem, - ApplicationLauncherGroup, - ApplicationLauncherSeparator -} from '@patternfly/react-core/deprecated'; -import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg'; - -const icon = ; - -const appLauncherItems: React.ReactElement[] = [ - - - Item without group title - - - , - - - Group 2 button - - - Group 2 anchor link - - - , - - - Group 3 button - - - Group 3 anchor link - - -]; - -export const ApplicationLauncherSectionsAndIcons: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen); - const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen); - - return ( - - ); -}; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx deleted file mode 100644 index 8c05f7a1d84..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core/deprecated'; - -const appLauncherItems: React.ReactElement[] = [ - Launch Application 1
    }> - Application 1 (anchor link) - , - Launch Application 2
    } - tooltipProps={{ position: 'right' }} - onClick={() => alert('Clicked item 2')} - > - Application 2 (onClick) - , - Launch Application 3
    } - tooltipProps={{ position: 'bottom' }} - onClick={() => alert('Clicked item 3')} - > - Application 3 (onClick) - -]; - -export const ApplicationLauncherTooltip: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen); - const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen); - - return ; -}; diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/index.ts b/packages/react-core/src/deprecated/components/ApplicationLauncher/index.ts deleted file mode 100644 index 9fa98e29991..00000000000 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export * from './ApplicationLauncher'; -export * from './ApplicationLauncherContext'; -export * from './ApplicationLauncherItem'; -export * from './ApplicationLauncherItemContext'; -export * from './ApplicationLauncherContent'; -export * from './ApplicationLauncherIcon'; -export * from './ApplicationLauncherText'; -export * from './ApplicationLauncherGroup'; -export * from './ApplicationLauncherSeparator'; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/ContextSelector.tsx b/packages/react-core/src/deprecated/components/ContextSelector/ContextSelector.tsx deleted file mode 100644 index fd788b7f09f..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/ContextSelector.tsx +++ /dev/null @@ -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, value: string) => void; - /** Search Input placeholder */ - searchInputPlaceholder?: string; - /** Function callback for when Search Button is clicked */ - onSearchButtonClick?: (event?: React.SyntheticEvent) => 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 { - 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 = React.createRef(); - popperRef: React.RefObject = 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 = ( -
    - {isOpen && ( - -
    - , _value: any, _: any) => { - onSearchButtonClick(event); - }} - value={searchInputValue} - /> -
    - - - {children} - - - {footer} -     - )} -
    - ); - const popperContainer = ( -
    - {isOpen && menuContainer} -
    - ); - const mainContainer = ( -
    - {screenReaderLabel && ( - - )} - - {isOpen && menuAppendTo === 'inline' && menuContainer} -
    - ); - const getParentElement = () => { - if (this.parentRef && this.parentRef.current) { - return this.parentRef.current.parentElement; - } - return null; - }; - return menuAppendTo === 'inline' ? ( - mainContainer - ) : ( - - ); - } -} - -export { ContextSelector }; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/ContextSelectorFooter.tsx b/packages/react-core/src/deprecated/components/ContextSelector/ContextSelectorFooter.tsx deleted file mode 100644 index d4cfc0dbe6c..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/ContextSelectorFooter.tsx +++ /dev/null @@ -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 { - /** Content rendered inside the ContextSelectorFooter */ - children?: React.ReactNode; - /** Additional classes added to the ContextSelectorFooter */ - className?: string; -} - -export const ContextSelectorFooter: React.FunctionComponent = ({ - children = null, - className = '', - ...props -}: ContextSelectorFooterProps) => ( -
    - {children} -
    -); -ContextSelectorFooter.displayName = 'ContextSelectorFooter'; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/ContextSelectorItem.tsx b/packages/react-core/src/deprecated/components/ContextSelector/ContextSelectorItem.tsx deleted file mode 100644 index 477e79fda7e..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/ContextSelectorItem.tsx +++ /dev/null @@ -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 { - 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 = 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 ( - - {({ onSelect }) => ( -
  • - { - if (!isDisabled) { - onClick(event); - onSelect(event, children); - } - }} - disabled={isDisabled && !href} - href={href} - {...(isDisabledLink && { 'aria-disabled': true, tabIndex: -1 })} - {...props} - > - {children} - -
    • - )} -     - ); - } -} - -export { ContextSelectorItem }; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/ContextSelectorMenuList.tsx b/packages/react-core/src/deprecated/components/ContextSelector/ContextSelectorMenuList.tsx deleted file mode 100644 index 796dd79c08f..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/ContextSelectorMenuList.tsx +++ /dev/null @@ -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 { - 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, { - sendRef: this.sendRef, - index, - role: 'menuitem' - }) - ); - } - - render = () => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { className, isOpen, children, ...props } = this.props; - return ( - - ); - }; -} - -export { ContextSelectorMenuList }; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/ContextSelectorToggle.tsx b/packages/react-core/src/deprecated/components/ContextSelector/ContextSelectorToggle.tsx deleted file mode 100644 index 99b02656440..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/ContextSelectorToggle.tsx +++ /dev/null @@ -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 { - static displayName = 'ContextSelectorToggle'; - static defaultProps: PickOptional = { - 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 = 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 ( - - ); - } -} - -export { ContextSelectorToggle }; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelector.test.tsx b/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelector.test.tsx deleted file mode 100644 index d0fcc7fc758..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelector.test.tsx +++ /dev/null @@ -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 = [ - My Project, - OpenShift Cluster, - Production Ansible, - AWS, - Azure -]; - -describe('ContextSelector', () => { - test('Renders ContextSelector', () => { - const { asFragment } = render({items}); - expect(asFragment()).toMatchSnapshot(); - }); - - test('Renders ContextSelector open', () => { - const { asFragment } = render( - - {items} - - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('Renders in strict mode', () => { - const consoleError = jest.spyOn(console, 'error'); - const { asFragment } = render( - - - {items} - - - ); - expect(consoleError).not.toHaveBeenCalled(); - expect(asFragment()).toMatchSnapshot(); - }); - - test('Verify onToggle is called ', async () => { - const mockfn = jest.fn(); - const user = userEvent.setup(); - - render({items}); - - await user.click(screen.getByRole('button')); - expect(mockfn.mock.calls).toHaveLength(1); - }); -}); diff --git a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelectorFooter.test.tsx b/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelectorFooter.test.tsx deleted file mode 100644 index efd5c22bbc0..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelectorFooter.test.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { ContextSelectorFooter } from '../ContextSelectorFooter'; - -test('Renders ContextSelectorFooter', () => { - const { asFragment } = render(testing text); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx b/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx deleted file mode 100644 index ef8dfc648d1..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelectorItem.test.tsx +++ /dev/null @@ -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( - - My Project - - ); - expect(asFragment()).toMatchSnapshot(); -}); - -test('Renders ContextSelectorItem disabled and hovered', () => { - const { asFragment } = render( - - My Project - - ); - expect(asFragment()).toMatchSnapshot(); -}); - -test('Verify onClick is called ', async () => { - const mockfn = jest.fn(); - const user = userEvent.setup(); - - render( - - My Project - - ); - await user.click(screen.getByRole('button')); - - expect(mockfn.mock.calls).toHaveLength(1); -}); diff --git a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelectorMenuList.test.tsx b/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelectorMenuList.test.tsx deleted file mode 100644 index 5cc0a35d95b..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelectorMenuList.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { ContextSelectorItem } from '../ContextSelectorItem'; -import { ContextSelectorMenuList } from '../ContextSelectorMenuList'; - -const items = [ - My Project, - OpenShift Cluster, - Production Ansible, - AWS, - Azure -]; - -test('Renders ContextSelectorMenuList open', () => { - const { asFragment } = render({items}); - expect(asFragment()).toMatchSnapshot(); -}); - -test('Renders ContextSelectorMenuList closed', () => { - const { asFragment } = render({items}); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx b/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx deleted file mode 100644 index 6b54fa96311..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; - -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; - -import { ContextSelectorToggle } from '../ContextSelectorToggle'; -import { KeyTypes } from '../../../../helpers'; - -describe('ContextSelectorToggle', () => { - test('Renders ContextSelectorToggle', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); - - test('Verify onToggle is called ', async () => { - const mockfnOnToggle = jest.fn(); - const user = userEvent.setup(); - - render(); - - await user.click(screen.getByRole('button')); - expect(mockfnOnToggle).toHaveBeenCalledTimes(1); - }); - - test('Verify ESC press', async () => { - const user = userEvent.setup(); - - const { asFragment } = render(); - - await user.type(screen.getByRole('button'), `{${KeyTypes.Escape}}`); - expect(asFragment()).toMatchSnapshot(); - }); - - test('Verify ESC press with not isOpen', async () => { - const user = userEvent.setup(); - - const { asFragment } = render(); - - await user.type(screen.getByRole('button'), `{${KeyTypes.Escape}}`); - expect(asFragment()).toMatchSnapshot(); - }); - - test('Verify keydown tab ', async () => { - const user = userEvent.setup(); - - const { asFragment } = render(); - - await user.type(screen.getByRole('button'), `{${KeyTypes.Tab}}`); - expect(asFragment()).toMatchSnapshot(); - }); - - test('Verify keydown enter ', async () => { - const user = userEvent.setup(); - - const { asFragment } = render(); - - await user.type(screen.getByRole('button'), `{${KeyTypes.Enter}}`); - expect(asFragment()).toMatchSnapshot(); - }); -}); diff --git a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap b/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap deleted file mode 100644 index 5733fa3337c..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap +++ /dev/null @@ -1,411 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ContextSelector Renders ContextSelector 1`] = ` - -
    - -
    -     -`; - -exports[`ContextSelector Renders ContextSelector open 1`] = ` - -
    - -
    -
    -
    -
    -
    -
    -
    - - - - - - -
    -
    -
    -
    - -
    -
    -
    - -
    -
    -
    -     -`; - -exports[`ContextSelector Renders in strict mode 1`] = ` - -
    - -
    -
    -
    -
    -
    -
    -
    - - - - - - -
    -
    -
    -
    - -
    -
    -
    - -
    -
    -
    -     -`; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelectorFooter.test.tsx.snap b/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelectorFooter.test.tsx.snap deleted file mode 100644 index 4a54e4e915c..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelectorFooter.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Renders ContextSelectorFooter 1`] = ` - -
    - testing text -
    -     -`; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelectorItem.test.tsx.snap b/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelectorItem.test.tsx.snap deleted file mode 100644 index c1fa29fb4d6..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelectorItem.test.tsx.snap +++ /dev/null @@ -1,30 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Renders ContextSelectorItem 1`] = ` - -
  • - -
    • -     -`; - -exports[`Renders ContextSelectorItem disabled and hovered 1`] = ` - -
  • - -
    • -     -`; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelectorMenuList.test.tsx.snap b/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelectorMenuList.test.tsx.snap deleted file mode 100644 index 2c888e9ca6d..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelectorMenuList.test.tsx.snap +++ /dev/null @@ -1,123 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Renders ContextSelectorMenuList closed 1`] = ` - - - -`; - -exports[`Renders ContextSelectorMenuList open 1`] = ` - - - -`; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelectorToggle.test.tsx.snap b/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelectorToggle.test.tsx.snap deleted file mode 100644 index 17024566838..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelectorToggle.test.tsx.snap +++ /dev/null @@ -1,161 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ContextSelectorToggle Renders ContextSelectorToggle 1`] = ` - - - -`; - -exports[`ContextSelectorToggle Verify ESC press 1`] = ` - - - -`; - -exports[`ContextSelectorToggle Verify ESC press with not isOpen 1`] = ` - - - -`; - -exports[`ContextSelectorToggle Verify keydown enter 1`] = ` - - - -`; - -exports[`ContextSelectorToggle Verify keydown tab 1`] = ` - - - -`; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/contextSelectorConstants.tsx b/packages/react-core/src/deprecated/components/ContextSelector/contextSelectorConstants.tsx deleted file mode 100644 index 05f119ff594..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/contextSelectorConstants.tsx +++ /dev/null @@ -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 -}); diff --git a/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelector.md b/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelector.md deleted file mode 100644 index 5b28938d709..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelector.md +++ /dev/null @@ -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" -``` diff --git a/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorBasic.tsx b/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorBasic.tsx deleted file mode 100644 index 9e2b2059790..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorBasic.tsx +++ /dev/null @@ -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, 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 ( - - {filteredItems.map((item, index) => { - const [text = null, href = undefined, isDisabled] = - typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled]; - return ( - - {text} - - ); - })} - - ); -}; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorPlainText.tsx b/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorPlainText.tsx deleted file mode 100644 index 2b75448c603..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorPlainText.tsx +++ /dev/null @@ -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, 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 ( - - {filteredItems.map((item, index) => { - const [text, href = undefined, isDisabled = false] = - typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled]; - return ( - - {text} - - ); - })} - - ); -}; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorWithFooter.tsx b/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorWithFooter.tsx deleted file mode 100644 index 5b0bfd329bb..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/examples/ContextSelectorWithFooter.tsx +++ /dev/null @@ -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, 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 ( - - - - } - > - {filteredItems.map((item, index) => { - const [text = null, href = undefined, isDisabled] = - typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled]; - return ( - - {text} - - ); - })} - - ); -}; diff --git a/packages/react-core/src/deprecated/components/ContextSelector/index.ts b/packages/react-core/src/deprecated/components/ContextSelector/index.ts deleted file mode 100644 index 587ff1c1eb8..00000000000 --- a/packages/react-core/src/deprecated/components/ContextSelector/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './ContextSelector'; -export * from './ContextSelectorItem'; -export * from './ContextSelectorFooter'; diff --git a/packages/react-core/src/deprecated/components/Dropdown/BadgeToggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/BadgeToggle.tsx deleted file mode 100644 index 6d81a3c16aa..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/BadgeToggle.tsx +++ /dev/null @@ -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 | React.MouseEvent, - 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 = ({ - 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) => ( - - - {children} - - - - - -); -BadgeToggle.displayName = 'BadgeToggle'; diff --git a/packages/react-core/src/deprecated/components/Dropdown/Dropdown.tsx b/packages/react-core/src/deprecated/components/Dropdown/Dropdown.tsx deleted file mode 100644 index fb4c8f4c45a..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/Dropdown.tsx +++ /dev/null @@ -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, 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: or */ - toggle: React.ReactElement; - /** Function callback called when user selects item */ - onSelect?: (event?: React.SyntheticEvent) => 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 = ({ - 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) => ( - 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 - }} - > - - -); -Dropdown.displayName = 'Dropdown'; diff --git a/packages/react-core/src/deprecated/components/Dropdown/DropdownGroup.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownGroup.tsx deleted file mode 100644 index f6ca197a297..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/DropdownGroup.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; -import { css } from '@patternfly/react-styles'; -import { DropdownContext } from './dropdownConstants'; - -export interface DropdownGroupProps extends Omit, '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 = ({ - children = null, - className = '', - label = '', - ...props -}: DropdownGroupProps) => ( - - {({ sectionClass, sectionTitleClass, sectionComponent }) => { - const SectionComponent = sectionComponent as any; - return ( - - {label && ( -

    - {label} -

    - )} -
      {children}
    -     - ); - }} -     -); -DropdownGroup.displayName = 'DropdownGroup'; diff --git a/packages/react-core/src/deprecated/components/Dropdown/DropdownItem.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownItem.tsx deleted file mode 100644 index 27919fc2663..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/DropdownItem.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from 'react'; -import { InternalDropdownItemProps, InternalDropdownItem } from './InternalDropdownItem'; -import { DropdownArrowContext } from './dropdownConstants'; -import { useOUIAProps, OUIAProps } from '../../../helpers'; - -export interface DropdownItemProps extends Omit, OUIAProps { - /** Anything which can be rendered as dropdown item */ - children?: React.ReactNode; - /** Classes applied to root element of dropdown item */ - className?: string; - /** Class to be applied to list item */ - listItemClassName?: string; - /** - * A ReactElement to render, or a string to use as the component tag. - * Example: component={Alert} - * Example: component="button" - * If React.isValidElement(component) the className prop will be injected unless styleChildren="false" - */ - component?: React.ReactNode; - /** ID for the component element */ - componentID?: string; - /** Whether to set className on component when React.isValidElement(component) */ - styleChildren?: boolean; - /** Render dropdown item as disabled option */ - isDisabled?: boolean; - /** Render dropdown item as aria-disabled option */ - isAriaDisabled?: boolean; - /** Render dropdown item as non-interactive item */ - isPlainText?: boolean; - /** Default hyperlink location */ - href?: string; - /** Tooltip to display when hovered over the item */ - tooltip?: React.ReactNode; - /** Additional tooltip props forwarded to the Tooltip component */ - tooltipProps?: any; - /** Additional node to include alongside item within the
  • */ - additionalChild?: React.ReactNode; - /** Custom item rendering that receives the DropdownContext */ - customChild?: React.ReactNode; - /** tabIndex to use, null to unset it */ - tabIndex?: number | null; - /** An image to display within the DropdownItem, appearing before any component children */ - icon?: React.ReactNode; - /** Initial focus on the item when the menu is opened (Note: Only applicable to one of the items) */ - autoFocus?: boolean; - /** A short description of the dropdown item, displayed under the dropdown item content */ - description?: React.ReactNode; - /** 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 DropdownItem: React.FunctionComponent = ({ - children, - className, - component = 'a', - isDisabled = false, - isAriaDisabled = false, - isPlainText = false, - href, - tooltip, - tooltipProps = {}, - listItemClassName, - onClick, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - ref, // Types of Ref are different for React.FunctionComponent vs React.Component - additionalChild, - customChild, - tabIndex = -1, - icon = null, - autoFocus, - description = null, - styleChildren, - ouiaId, - ouiaSafe, - ...props -}: DropdownItemProps) => { - const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe); - return ( - - {(context) => ( - - {children} - - )} - - ); -}; - -DropdownItem.displayName = 'DropdownItem'; diff --git a/packages/react-core/src/deprecated/components/Dropdown/DropdownMenu.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownMenu.tsx deleted file mode 100644 index 8991e7d34da..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/DropdownMenu.tsx +++ /dev/null @@ -1,254 +0,0 @@ -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown'; -import { css } from '@patternfly/react-styles'; -import { keyHandler, formatBreakpointMods } from '../../../helpers/util'; -import { DropdownPosition, DropdownArrowContext, DropdownContext } from './dropdownConstants'; - -export interface DropdownMenuProps { - /** Anything which can be rendered as dropdown items */ - children?: React.ReactNode; - /** Classess applied to root element of dropdown menu */ - className?: string; - /** Flag to indicate if menu is opened */ - isOpen?: boolean; - /** 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; - /** Indicates which component will be used as dropdown menu */ - component?: React.ReactNode; - /** Indicates where menu will be alligned horizontally */ - position?: DropdownPosition | 'right' | 'left'; - /** Indicates how the menu will align at screen size breakpoints */ - alignments?: { - sm?: 'right' | 'left'; - md?: 'right' | 'left'; - lg?: 'right' | 'left'; - xl?: 'right' | 'left'; - '2xl'?: 'right' | 'left'; - }; - /** Flag to indicate if menu is grouped */ - isGrouped?: boolean; - // Function to call on component mount - setMenuComponentRef?: any; -} - -export interface DropdownMenuItem extends React.HTMLAttributes { - isDisabled: boolean; - disabled: boolean; - isHovered: boolean; - ref: HTMLElement; -} - -class DropdownMenu extends React.Component { - static displayName = 'DropdownMenu'; - context!: React.ContextType; - refsCollection = [] as HTMLElement[][]; - - static defaultProps: DropdownMenuProps = { - className: '', - isOpen: true, - autoFocus: true, - position: DropdownPosition.left, - component: 'ul', - isGrouped: false, - setMenuComponentRef: null - }; - - componentDidMount() { - document.addEventListener('keydown', this.onKeyDown); - const { autoFocus } = this.props; - - if (autoFocus) { - // Focus first non-disabled element - const focusTargetCollection = this.refsCollection.find( - (ref) => ref && ref[0] && !ref[0].hasAttribute('disabled') - ); - const focusTarget = focusTargetCollection && focusTargetCollection[0]; - if (focusTarget && focusTarget.focus) { - setTimeout(() => focusTarget.focus()); - } - } - } - - componentWillUnmount = () => { - document.removeEventListener('keydown', this.onKeyDown); - }; - - static validToggleClasses = [styles.dropdownToggle, styles.dropdownToggleButton] as string[]; - static focusFirstRef = (refCollection: HTMLElement[]) => { - if (refCollection && refCollection[0] && refCollection[0].focus) { - setTimeout(() => refCollection[0].focus()); - } - }; - - onKeyDown = (event: any) => { - if ( - !this.props.isOpen || - !Array.from(document.activeElement.classList).find((className) => - DropdownMenu.validToggleClasses.concat(this.context.toggleClass).includes(className) - ) - ) { - return; - } - const refs = this.refsCollection; - if (event.key === 'ArrowDown') { - const firstFocusTargetCollection = refs.find((ref) => ref && ref[0] && !ref[0].hasAttribute('disabled')); - DropdownMenu.focusFirstRef(firstFocusTargetCollection); - event.stopPropagation(); - } else if (event.key === 'ArrowUp') { - const collectionLength = refs.length; - const lastFocusTargetCollection = refs.slice(collectionLength - 1, collectionLength); - const lastFocusTarget = lastFocusTargetCollection && lastFocusTargetCollection[0]; - DropdownMenu.focusFirstRef(lastFocusTarget); - event.stopPropagation(); - } - }; - - shouldComponentUpdate() { - // reset refsCollection before updating to account for child removal between mounts - this.refsCollection = [] as HTMLElement[][]; - return true; - } - - childKeyHandler = (index: number, innerIndex: number, position: string, custom = false) => { - keyHandler( - index, - innerIndex, - position, - this.refsCollection, - this.props.isGrouped ? this.refsCollection : React.Children.toArray(this.props.children), - custom - ); - }; - - sendRef = (index: number, nodes: any[], isDisabled: boolean, isSeparator: boolean) => { - this.refsCollection[index] = []; - nodes.map((node, innerIndex) => { - if (!node) { - this.refsCollection[index][innerIndex] = null; - } else if (!node.getAttribute) { - // eslint-disable-next-line react/no-find-dom-node - this.refsCollection[index][innerIndex] = ReactDOM.findDOMNode(node) as HTMLElement; - } else if (isSeparator) { - this.refsCollection[index][innerIndex] = null; - } else { - this.refsCollection[index][innerIndex] = node; - } - }); - }; - - extendChildren() { - const { children, isGrouped } = this.props; - if (isGrouped) { - let index = 0; - return React.Children.map(children, (groupedChildren) => { - const group = groupedChildren as React.ReactElement; - const props: { children?: React.ReactNode } = {}; - if (group.props && group.props.children) { - if (Array.isArray(group.props.children)) { - props.children = React.Children.map(group.props.children, (option) => - React.cloneElement(option as React.ReactElement, { - index: index++ - }) - ); - } else { - props.children = React.cloneElement(group.props.children as React.ReactElement, { - index: index++ - }); - } - } - return React.cloneElement(group, props); - }); - } - return React.Children.map(children, (child, index) => - React.cloneElement(child as React.ReactElement, { - index - }) - ); - } - - render() { - const { className, isOpen, position, children, component, isGrouped, setMenuComponentRef, alignments, ...props } = - this.props; - return ( - - {component === 'div' ? ( - - {({ onSelect, menuClass }) => ( - - )} - - ) : ( - (isGrouped && ( - - {({ menuClass, menuComponent }) => { - const MenuComponent = (menuComponent || 'div') as any; - return ( - - ); - }} - - )) || ( - - {({ menuClass, menuComponent }) => { - const MenuComponent = (menuComponent || component) as any; - return ( - - ); - }} - - ) - )} - - ); - } -} - -DropdownMenu.contextType = DropdownContext; - -export { DropdownMenu }; diff --git a/packages/react-core/src/deprecated/components/Dropdown/DropdownSeparator.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownSeparator.tsx deleted file mode 100644 index ae6320e4723..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/DropdownSeparator.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import { DropdownArrowContext } from './dropdownConstants'; -import { InternalDropdownItem } from './InternalDropdownItem'; -import { Divider, DividerVariant } from '../../../components/Divider'; -import { useOUIAProps, OUIAProps } from '../../../helpers'; - -export interface SeparatorProps extends React.HTMLProps, OUIAProps { - /** Classes applied to root element of dropdown item */ - className?: string; - /** Click event to pass to InternalDropdownItem */ - onClick?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => void; - /** 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 DropdownSeparator: React.FunctionComponent = ({ - className = '', - // eslint-disable-next-line @typescript-eslint/no-unused-vars - ref, // Types of Ref are different for React.FunctionComponent vs React.Component - ouiaId, - ouiaSafe, - ...props -}: SeparatorProps) => { - const ouiaProps = useOUIAProps(DropdownSeparator.displayName, ouiaId, ouiaSafe); - return ( - - {(context) => ( - } - className={className} - role="separator" - {...ouiaProps} - /> - )} - - ); -}; -DropdownSeparator.displayName = 'DropdownSeparator'; diff --git a/packages/react-core/src/deprecated/components/Dropdown/DropdownToggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownToggle.tsx deleted file mode 100644 index aab7067f67e..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/DropdownToggle.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import * as React from 'react'; -import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; -import { Toggle } from './Toggle'; -import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown'; -import { DropdownContext } from './dropdownConstants'; -import { css } from '@patternfly/react-styles'; -import { useOUIAProps, OUIAProps } from '../../../helpers'; - -export interface DropdownToggleProps extends React.HTMLProps, OUIAProps { - /** HTML ID of dropdown toggle */ - id?: string; - /** Anything which can be rendered as dropdown toggle button */ - children?: React.ReactNode; - /** Classes applied to root element of dropdown toggle button */ - className?: string; - /** Flag to indicate if menu is opened */ - isOpen?: boolean; - /** Callback called when toggle is clicked */ - onToggle?: ( - event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent | React.MouseEvent, - isOpen: boolean - ) => void; - /** Element which wraps toggle */ - parentRef?: HTMLElement; - /** The menu element */ - getMenuRef?: () => HTMLElement; - /** Forces active state */ - isActive?: boolean; - /** Display the toggle with no border or background */ - isPlain?: boolean; - /** Display the toggle in text only mode */ - isText?: boolean; - /** Whether or not the
    has a disabled state */ - isDisabled?: boolean; - /** Alternate styles for the dropdown toggle button */ - toggleVariant?: 'primary' | 'secondary' | 'default'; - /** An image to display within the dropdown toggle, appearing before any component children */ - icon?: React.ReactNode; - /** The icon to display for the toggle, appearing after any component children. Defaults to CaretDownIcon. Set to null to not show an icon. */ - toggleIndicator?: React.ElementType | null; - /** Elements to display before the toggle button. When included, renders the toggle as a split button. */ - splitButtonItems?: React.ReactNode[]; - /** Variant of split button toggle */ - splitButtonVariant?: 'action' | 'checkbox'; - /** Accessible label for the dropdown toggle button */ - 'aria-label'?: string; - /** Accessibility property to indicate correct has popup */ - 'aria-haspopup'?: boolean | 'listbox' | 'menu' | 'dialog' | 'grid' | 'tree'; - /** Type to put on the button */ - type?: 'button' | 'submit' | 'reset'; - /** Callback called when the Enter key is pressed */ - onEnter?: (event?: React.MouseEvent) => void; - /** 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 DropdownToggle: React.FunctionComponent = ({ - id = '', - children = null, - className = '', - isOpen = false, - parentRef = null, - getMenuRef = null, - isDisabled = false, - isPlain = false, - isText = false, - toggleVariant = 'default', - // eslint-disable-next-line @typescript-eslint/no-unused-vars - isActive = false, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - onToggle = (_evt: any, _isOpen: boolean) => undefined as any, - icon = null, - toggleIndicator: ToggleIndicator = CaretDownIcon, - splitButtonItems, - splitButtonVariant = 'checkbox', - 'aria-haspopup': ariaHasPopup, - ouiaId, - ouiaSafe, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - ref, // Types of Ref are different for React.FunctionComponent vs React.Component - ...props -}: DropdownToggleProps) => { - const ouiaProps = useOUIAProps(DropdownToggle.displayName, ouiaId, ouiaSafe); - const toggle = ( - - {({ toggleTextClass, toggleIndicatorClass, toggleIconClass }) => ( - - {icon && {icon}} - {children && {children}} - {ToggleIndicator && ( - - - - )} - - )} - - ); - - if (splitButtonItems) { - return ( -
    - {splitButtonItems} - {toggle} -
    - ); - } - - return toggle; -}; -DropdownToggle.displayName = 'DropdownToggle'; diff --git a/packages/react-core/src/deprecated/components/Dropdown/DropdownToggleAction.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownToggleAction.tsx deleted file mode 100644 index b170835c950..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/DropdownToggleAction.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown'; -import { css } from '@patternfly/react-styles'; - -export interface DropdownToggleActionProps { - /** Additional classes added to the DropdownToggleAction */ - className?: string; - /** Flag to show if the action button is disabled */ - isDisabled?: boolean; - /** A callback for when the action button is clicked */ - onClick?: (event: React.MouseEvent) => void; - /** Element to be rendered inside the - ); - } -} - -export { DropdownToggleAction }; diff --git a/packages/react-core/src/deprecated/components/Dropdown/DropdownToggleCheckbox.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownToggleCheckbox.tsx deleted file mode 100644 index 9b81ffdf635..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/DropdownToggleCheckbox.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import * as React from 'react'; -import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown'; -import { css } from '@patternfly/react-styles'; -import { PickOptional } from '../../../helpers/typeUtils'; -import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../../helpers'; -import { Spinner } from '../../../components/Spinner'; - -export interface DropdownToggleCheckboxProps - extends Omit, 'type' | 'onChange' | 'disabled' | 'checked'>, - OUIAProps { - /** Additional classes added to the DropdownToggleCheckbox */ - className?: string; - /** Flag to show if the checkbox selection is valid or invalid */ - isValid?: boolean; - /** Flag to show if the checkbox is disabled */ - isDisabled?: boolean; - /** Flag to show if the checkbox is checked */ - isChecked?: boolean | null; - /** Flag to show if the checkbox is in progress */ - isInProgress?: boolean | null; - /** Alternate Flag to show if the checkbox is checked */ - checked?: boolean | null; - /** A callback for when the checkbox selection changes */ - onChange?: (event: React.FormEvent, checked: boolean) => void; - /** Element to be rendered inside the */ - children?: React.ReactNode; - /** Id of the checkbox */ - id: string; - /** Aria-label of the checkbox */ - 'aria-label': string; - /** Text describing current loading status or progress */ - defaultProgressAriaValueText?: string; - /** Aria-label for the default progress icon to describe what is loading */ - defaultProgressAriaLabel?: string; - /** 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; -} - -class DropdownToggleCheckbox extends React.Component { - static displayName = 'DropdownToggleCheckbox'; - static defaultProps: PickOptional = { - className: '', - isValid: true, - isDisabled: false, - onChange: () => undefined as any - }; - - constructor(props: DropdownToggleCheckboxProps) { - super(props); - this.state = { - ouiaStateId: getDefaultOUIAId(DropdownToggleCheckbox.displayName) - }; - } - - handleChange = (event: React.FormEvent) => { - this.props.onChange?.(event, (event.target as HTMLInputElement).checked); - }; - - calculateChecked = () => { - const { isChecked, checked } = this.props; - if (isChecked === null) { - // return false here and the indeterminate state will be set to true through the ref - return false; - } else if (isChecked !== undefined) { - return isChecked; - } - return checked; - }; - - render() { - const { - className, - isValid, - isDisabled, - isChecked, - isInProgress = false, - defaultProgressAriaLabel, - defaultProgressAriaValueText = 'Loading...', - children, - ouiaId, - ouiaSafe, - /* eslint-disable @typescript-eslint/no-unused-vars */ - onChange, - checked, - /* eslint-enable @typescript-eslint/no-unused-vars */ - ...props - } = this.props; - - const spinner = ( - - ); - - const text = children && ( - - ); - return ( - - ); - } -} -export { DropdownToggleCheckbox }; diff --git a/packages/react-core/src/deprecated/components/Dropdown/DropdownWithContext.tsx b/packages/react-core/src/deprecated/components/Dropdown/DropdownWithContext.tsx deleted file mode 100644 index 8aef8493b79..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/DropdownWithContext.tsx +++ /dev/null @@ -1,193 +0,0 @@ -import * as React from 'react'; -import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown'; -import { css } from '@patternfly/react-styles'; -import { DropdownMenu } from './DropdownMenu'; -import { DropdownProps } from './Dropdown'; -import { DropdownContext, DropdownDirection, DropdownPosition } from './dropdownConstants'; -import { getOUIAProps, OUIAProps } from '../../../helpers'; -import { PickOptional } from '../../../helpers/typeUtils'; -import { Popper } from '../../../helpers/Popper/Popper'; - -class DropdownWithContext extends React.Component { - static displayName = 'DropdownWithContext'; - - openedOnEnter = false; - baseComponentRef = React.createRef(); - menuComponentRef = React.createRef(); - - // seed for the aria-labelledby ID - static currentId = 0; - - static defaultProps: PickOptional = { - className: '', - dropdownItems: [] as any[], - isOpen: false, - isPlain: false, - isText: false, - isGrouped: false, - position: DropdownPosition.left, - direction: DropdownDirection.down, - onSelect: (): void => undefined, - autoFocus: true, - menuAppendTo: 'inline', - isFlipEnabled: true - }; - - constructor(props: DropdownProps & OUIAProps) { - super(props); - if (props.dropdownItems && props.dropdownItems.length > 0 && props.children) { - // eslint-disable-next-line no-console - console.error( - 'Children and dropdownItems props have been provided. Only the dropdownItems prop items will be rendered' - ); - } - } - - onEnter = () => { - this.openedOnEnter = true; - }; - - componentDidUpdate() { - if (!this.props.isOpen) { - this.openedOnEnter = false; - } - } - - setMenuComponentRef = (element: any) => { - this.menuComponentRef = element; - }; - - getMenuComponentRef = () => this.menuComponentRef; - - render() { - const { - children, - className, - direction, - dropdownItems, - isOpen, - isPlain, - isText, - isGrouped, - isFullHeight, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - onSelect, - position, - toggle, - autoFocus, - minWidth, - menuAppendTo, - isFlipEnabled, - zIndex, - ...props - } = this.props; - const id = toggle.props.id || `pf-dropdown-toggle-id-${DropdownWithContext.currentId++}`; - let component: string; - let renderedContent: React.ReactNode[]; - let ariaHasPopup = false; - if (dropdownItems && dropdownItems.length > 0) { - component = 'ul'; - renderedContent = dropdownItems; - ariaHasPopup = true; - } else { - component = 'div'; - renderedContent = React.Children.toArray(children); - } - - const popperRef = React.createRef(); - const openedOnEnter = this.openedOnEnter; - const isStatic = isFlipEnabled && menuAppendTo !== 'inline'; - return ( - - {({ baseClass, baseComponent, id: contextId, ouiaId, ouiaComponentType, ouiaSafe, alignments }) => { - const BaseComponent = baseComponent as any; - const menuContainer = ( - - {renderedContent} - - ); - const popperContainer = ( -
    - {isOpen && menuContainer} -
    - ); - const mainContainer = ( - - {React.Children.map(toggle, (oneToggle) => - React.cloneElement(oneToggle, { - parentRef: this.baseComponentRef, - getMenuRef: this.getMenuComponentRef, - isOpen, - id, - isPlain, - isText, - 'aria-haspopup': ariaHasPopup, - onEnter: () => { - this.onEnter(); - oneToggle.props.onEnter && oneToggle.props.onEnter(); - } - }) - )} - {menuAppendTo === 'inline' && isOpen && menuContainer} - - ); - const getParentElement = () => { - if (this.baseComponentRef && this.baseComponentRef.current) { - return this.baseComponentRef.current.parentElement; - } - return null; - }; - return menuAppendTo === 'inline' ? ( - mainContainer - ) : ( - - ); - }} -     - ); - } -} - -export { DropdownWithContext }; diff --git a/packages/react-core/src/deprecated/components/Dropdown/InternalDropdownItem.tsx b/packages/react-core/src/deprecated/components/Dropdown/InternalDropdownItem.tsx deleted file mode 100644 index 1ea59584a0b..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/InternalDropdownItem.tsx +++ /dev/null @@ -1,292 +0,0 @@ -import * as React from 'react'; -import { css } from '@patternfly/react-styles'; -import { DropdownContext } from './dropdownConstants'; -import { KEYHANDLER_DIRECTION } from '../../../helpers/constants'; -import { preventedEvents } from '../../../helpers/util'; -import { Tooltip } from '../../../components/Tooltip'; -import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown'; - -export interface InternalDropdownItemProps extends React.HTMLProps { - /** Anything which can be rendered as dropdown item */ - children?: React.ReactNode; - /** Whether to set className on component when React.isValidElement(component) */ - styleChildren?: boolean; - /** Classes applied to root element of dropdown item */ - className?: string; - /** Class applied to list element */ - listItemClassName?: string; - /** Indicates which component will be used as dropdown item. Will have className injected if React.isValidElement(component) */ - component?: React.ReactNode; - /** Role for the item */ - role?: string; - /** Render dropdown item as disabled option */ - isDisabled?: boolean; - /** Render dropdown item as aria disabled option */ - isAriaDisabled?: boolean; - /** Render dropdown item as a non-interactive item */ - isPlainText?: boolean; - /** Default hyperlink location */ - href?: string; - /** Tooltip to display when hovered over the item */ - tooltip?: React.ReactNode; - /** Additional tooltip props forwarded to the Tooltip component */ - tooltipProps?: any; - index?: number; - context?: { - keyHandler?: (index: number, innerIndex: number, direction: string) => void; - sendRef?: (index: number, ref: any, isDisabled: boolean, isSeparator: boolean) => void; - }; - /** Callback for click event */ - onClick?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => void; - /** ID for the list element */ - id?: string; - /** ID for the component element */ - componentID?: string; - /** Additional content to include alongside item within the
  • */ - additionalChild?: React.ReactNode; - /** Custom item rendering that receives the DropdownContext */ - customChild?: React.ReactNode; - /** Flag indicating if hitting enter on an item also triggers an arrow down key press */ - enterTriggersArrowDown?: boolean; - /** An image to display within the InternalDropdownItem, appearing before any component children */ - icon?: React.ReactNode; - /** Initial focus on the item when the menu is opened (Note: Only applicable to one of the items) */ - autoFocus?: boolean; - /** A short description of the dropdown item, displayed under the dropdown item content */ - description?: React.ReactNode; - /** Events to prevent when the item is disabled */ - inoperableEvents?: string[]; -} - -class InternalDropdownItem extends React.Component { - static displayName = 'InternalDropdownItem'; - ref = React.createRef(); - additionalRef = React.createRef(); - - static defaultProps: InternalDropdownItemProps = { - className: '', - component: 'a', - role: 'none', - isDisabled: false, - isPlainText: false, - tooltipProps: {}, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - onClick: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => undefined as any, - index: -1, - context: { - keyHandler: () => {}, - sendRef: () => {} - }, - enterTriggersArrowDown: false, - icon: null, - styleChildren: true, - description: null, - inoperableEvents: ['onClick', 'onKeyPress'] - }; - - componentDidMount() { - const { context, index, isDisabled, role, customChild, autoFocus } = this.props; - const customRef = customChild ? this.getInnerNode(this.ref.current) : this.ref.current; - context?.sendRef?.( - index, - [customRef, customChild ? customRef : this.additionalRef.current], - isDisabled, - role === 'separator' - ); - autoFocus && setTimeout(() => customRef.focus()); - } - - componentDidUpdate() { - const { context, index, isDisabled, role, customChild } = this.props; - const customRef = customChild ? this.getInnerNode(this.ref.current) : this.ref.current; - context?.sendRef?.( - index, - [customRef, customChild ? customRef : this.additionalRef.current], - isDisabled, - role === 'separator' - ); - } - - getInnerNode = (node: any) => (node && node.childNodes && node.childNodes.length ? node.childNodes[0] : node); - - onKeyDown = (event: any) => { - // Detected key press on this item, notify the menu parent so that the appropriate item can be focused - const innerIndex = event.target === this.ref.current ? 0 : 1; - if (!this.props.customChild) { - event.preventDefault(); - } - if (event.key === 'ArrowUp') { - this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.UP); - event.stopPropagation(); - } else if (event.key === 'ArrowDown') { - this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.DOWN); - event.stopPropagation(); - } else if (event.key === 'ArrowRight') { - this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.RIGHT); - event.stopPropagation(); - } else if (event.key === 'ArrowLeft') { - this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.LEFT); - event.stopPropagation(); - } else if (event.key === 'Enter' || event.key === ' ') { - event.target.click(); - this.props.enterTriggersArrowDown && - this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.DOWN); - } - }; - - extendAdditionalChildRef() { - const { additionalChild } = this.props; - - return React.cloneElement(additionalChild as React.ReactElement, { - ref: this.additionalRef - }); - } - - componentRef = (element: HTMLLIElement) => { - (this.ref as React.MutableRefObject).current = element; - const { component } = this.props; - const ref = (component as any).ref; - if (ref) { - if (typeof ref === 'function') { - ref(element); - } else { - (ref as React.MutableRefObject).current = element; - } - } - }; - - render() { - /* eslint-disable @typescript-eslint/no-unused-vars */ - const { - className, - children, - context, - onClick, - component, - role, - isDisabled, - isAriaDisabled, - isPlainText, - index, - href, - tooltip, - tooltipProps, - id, - componentID, - listItemClassName, - additionalChild, - customChild, - enterTriggersArrowDown, - icon, - autoFocus, - styleChildren, - description, - inoperableEvents, - ...additionalProps - } = this.props; - /* eslint-enable @typescript-eslint/no-unused-vars */ - let classes = css(icon && styles.modifiers.icon, isAriaDisabled && styles.modifiers.ariaDisabled, className); - - if (component === 'a') { - additionalProps['aria-disabled'] = isDisabled || isAriaDisabled; - } else if (component === 'button') { - additionalProps['aria-disabled'] = isDisabled || isAriaDisabled; - additionalProps.type = additionalProps.type || 'button'; - } - const renderWithTooltip = (childNode: React.ReactNode) => - tooltip ? ( - - {childNode} - - ) : ( - childNode - ); - - const renderClonedComponent = (element: React.ReactElement) => - React.cloneElement(element, { - ...(styleChildren && { - className: css(element.props.className, classes) - }), - ...(this.props.role !== 'separator' && { role, ref: this.componentRef }) - }); - - const renderDefaultComponent = (tag: string) => { - const Component = tag as any; - - const componentContent = description ? ( - <> -
    - {icon && {icon}} - {children} -
    -
    {description}
    - - ) : ( - <> - {icon && {icon}} - {children} - - ); - - return ( - - {componentContent} - - ); - }; - - return ( - - {({ onSelect, itemClass, disabledClass, plainTextClass }) => { - if (this.props.role !== 'separator') { - classes = css( - classes, - isDisabled && disabledClass, - isPlainText && plainTextClass, - itemClass, - description && styles.modifiers.description - ); - } - if (customChild) { - return React.cloneElement(customChild as React.ReactElement, { - ref: this.ref, - onKeyDown: this.onKeyDown - }); - } - - return ( -
  • { - if (!isDisabled && !isAriaDisabled) { - onClick?.(event); - onSelect?.(event); - } - }} - id={id} - > - {renderWithTooltip( - React.isValidElement(component) - ? renderClonedComponent(component) - : renderDefaultComponent(component as string) - )} - {additionalChild && this.extendAdditionalChildRef()} -
    • - ); - }} - - ); - } -} - -export { InternalDropdownItem }; diff --git a/packages/react-core/src/deprecated/components/Dropdown/KebabToggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/KebabToggle.tsx deleted file mode 100644 index 00e4bbe99ef..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/KebabToggle.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import * as React from 'react'; -import { DropdownToggleProps } from './DropdownToggle'; -import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import { Toggle } from './Toggle'; - -export interface KebabToggleProps extends DropdownToggleProps { - /** HTML ID of dropdown toggle */ - id?: string; - /** Anything which can be rendered as dropdown toggle */ - children?: React.ReactNode; - /** 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 | React.MouseEvent, - 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 KebabToggle: React.FunctionComponent = ({ - id = '', - // eslint-disable-next-line @typescript-eslint/no-unused-vars - children = null, - className = '', - isOpen = false, - 'aria-label': ariaLabel = 'Actions', - parentRef = null, - getMenuRef = null, - isActive = false, - isPlain = false, - 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 -}: KebabToggleProps) => ( - - - -); -KebabToggle.displayName = 'KebabToggle'; diff --git a/packages/react-core/src/deprecated/components/Dropdown/Toggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/Toggle.tsx deleted file mode 100644 index 9c4bf3e56ec..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/Toggle.tsx +++ /dev/null @@ -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 | React.MouseEvent, - 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 { - static displayName = 'Toggle'; - private buttonRef = React.createRef(); - - static defaultProps: PickOptional = { - 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) => { - 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 ( - - {({ toggleClass }) => ( - - )} - - ); - } -} - -export { Toggle }; diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Dropdown.test.tsx deleted file mode 100644 index 77e6fd7abc0..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Dropdown.test.tsx +++ /dev/null @@ -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 = [ - Link, - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - -]; - -describe('Dropdown', () => { - test('regular', () => { - const { asFragment } = render( - Dropdown    } /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('right aligned', () => { - const { asFragment } = render( - Dropdown} - /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('alignment breakpoints', () => { - const { asFragment } = render( - Dropdown} - isOpen - /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('dropup', () => { - const { asFragment } = render( - Dropdown} - /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('dropup + right aligned', () => { - const { asFragment } = render( - Dropdown} - /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('expanded', () => { - const { asFragment } = render( - Dropdown} - /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('primary', () => { - const { asFragment } = render( - - Dropdown - - } - /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('basic', () => { - const { asFragment } = render( - Dropdown}> -
    BASIC
    -     - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('Renders in strict mode', () => { - const consoleError = jest.spyOn(console, 'error'); - const { asFragment } = render( - - Dropdown} - /> - - ); - expect(consoleError).not.toHaveBeenCalled(); - expect(asFragment()).toMatchSnapshot(); - }); -}); - -describe('KebabToggle', () => { - test('regular', () => { - const { asFragment } = render( - } - /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('right aligned', () => { - const { asFragment } = render( - } - /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('dropup', () => { - const { asFragment } = render( - } - /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('dropup + right aligned', () => { - const { asFragment } = render( - } - /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('expanded', () => { - const { asFragment } = render( - } - /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('plain', () => { - const { asFragment } = render( - } /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('basic', () => { - const { asFragment } = render( - }> -
    BASIC
    -     - ); - expect(asFragment()).toMatchSnapshot(); - }); -}); - -describe('API', () => { - test('click on item', async () => { - const mockToggle = jest.fn(); - const mockSelect = jest.fn(); - const user = userEvent.setup(); - - render( - Dropdown} - /> - ); - - 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} - > -
    Children items
    -     - ); - 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} - /> - ); - expect(myMock).not.toHaveBeenCalled(); - }); - - test('children only, no console ', () => { - const myMock = jest.fn(); - global.console = { error: myMock } as any; - render( - Dropdown}> -
    Children items
    -     - ); - expect(myMock).not.toHaveBeenCalled(); - }); -}); diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownGroup.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownGroup.test.tsx deleted file mode 100644 index 6fe525cbd09..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownGroup.test.tsx +++ /dev/null @@ -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(Something); - expect(asFragment()).toMatchSnapshot(); - }); -}); diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggle.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggle.test.tsx deleted file mode 100644 index 6585ef86318..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggle.test.tsx +++ /dev/null @@ -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( - - Dropdown - - ); - - 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( - - Dropdown - - ); - - 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( - - Dropdown - - ); - 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( - - Dropdown - - ); - 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( - - Dropdown - - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('active', () => { - const { asFragment } = render( - - Dropdown - - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('focus', () => { - const { asFragment } = render( - - Dropdown - - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('button variant - primary', () => { - const { asFragment } = render( - - Dropdown - - ); - - const button = screen.getByRole('button'); - - expect(button).toHaveClass('pf-m-primary'); - expect(asFragment()).toMatchSnapshot(); - }); - - test('button variant - secondary', () => { - const { asFragment } = render( - - Dropdown - - ); - - const button = screen.getByRole('button'); - - expect(button).toHaveClass('pf-m-secondary'); - expect(asFragment()).toMatchSnapshot(); - }); - - test('button variant - plain with text', () => { - const { asFragment } = render( - - Dropdown - - ); - - 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( - test
    ]} - splitButtonVariant="action" - parentRef={document.createElement('div')} - > - Dropdown - - ); - - 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( - test
    ]} - parentRef={document.createElement('div')} - > - Dropdown - - ); - - const dropdownToggle = screen.getByRole('button').parentElement; - - expect(dropdownToggle).not.toHaveClass('pf-m-primary'); - expect(asFragment()).toMatchSnapshot(); - }); - - test('action split button - renders secondary variant', () => { - render( - test
    ]} - splitButtonVariant="action" - parentRef={document.createElement('div')} - > - Dropdown - - ); - - const dropdownToggle = screen.getByRole('button').parentElement; - - expect(dropdownToggle).toHaveClass('pf-m-secondary'); - }); - - test('class changes', () => { - const { asFragment } = render( - - - Dropdown - - - ); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggleAction.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggleAction.test.tsx deleted file mode 100644 index 6c7afdcfda0..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggleAction.test.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; - -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; - -import { DropdownToggleAction } from '../DropdownToggleAction'; - -test('renders with text', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); -}); - -test('isDisabled', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); -}); - -test('passing class', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); -}); - -test('checkbox passes value and event to onClick handler', async () => { - const onClickMock = jest.fn(); - const user = userEvent.setup(); - - render(); - - await user.click(screen.getByRole('button')); - expect(onClickMock).toHaveBeenCalled(); -}); diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx deleted file mode 100644 index 720c60c5ea1..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; - -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; - -import { DropdownToggleCheckbox } from '../DropdownToggleCheckbox'; - -const props = { - onChange: jest.fn(), - isChecked: false -}; - -describe('DropdownToggleCheckbox', () => { - test('controlled', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); - - test('uncontrolled', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); - - test('with text', () => { - const { asFragment } = render( - - Some text - - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('isDisabled', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); - - test('3rd state', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); - - test('passing class', () => { - const { asFragment } = render( - - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('passing HTML attribute', () => { - const { asFragment } = render( - - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('checkbox passes value and event to onChange handler', async () => { - const user = userEvent.setup(); - - render(); - - await user.click(screen.getByRole('checkbox')); - expect(props.onChange).toHaveBeenCalledWith(expect.any(Object), true); - }); -}); diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownItem.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownItem.test.tsx deleted file mode 100644 index 4f6c22ca5bd..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownItem.test.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; - -import { render } from '@testing-library/react'; - -import { DropdownItem } from '../../DropdownItem'; -import { DropdownArrowContext } from '../../dropdownConstants'; - -describe('DropdownItem', () => { - it('should match snapshot', () => { - const { asFragment } = render( - - ReactNode} - className={"''"} - listItemClassName={'string'} - component={'a'} - isDisabled={false} - isPlainText={false} - isHovered={false} - href={'string'} - tooltip={null} - tooltipProps={undefined} - additionalChild={
    ReactNode
    } - customChild={
    ReactNode
    } - icon={null} - /> -     - ); - expect(asFragment()).toMatchSnapshot(); - }); -}); diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownMenu.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownMenu.test.tsx deleted file mode 100644 index 44fb2932b23..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownMenu.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { DropdownMenu } from '../../DropdownMenu'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('DropdownMenu should match snapshot (auto-generated)', () => { - const { asFragment } = render( - ReactNode
    } - className={"''"} - isOpen={true} - autoFocus={true} - component={'ul'} - position={'right'} - isGrouped={false} - /> - ); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownSeparator.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownSeparator.test.tsx deleted file mode 100644 index ee2f870b73a..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/DropdownSeparator.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { render } from '@testing-library/react'; - -import { DropdownSeparator } from '../../DropdownSeparator'; -import { DropdownArrowContext } from '../../dropdownConstants'; - -describe('DropdownSeparator', () => { - it('should match snapshot', () => { - const { asFragment } = render( - - console.log('clicked')} /> - - ); - expect(asFragment()).toMatchSnapshot(); - }); -}); diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/KebabToggle.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/KebabToggle.test.tsx deleted file mode 100644 index 02b626d7727..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/KebabToggle.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { KebabToggle } from '../../KebabToggle'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('KebabToggle should match snapshot (auto-generated)', () => { - const { asFragment } = render( - ReactNode} - className={"''"} - isOpen={false} - aria-label={"'Actions'"} - onToggle={() => undefined as void} - parentRef={null} - isActive={false} - isDisabled={false} - isPlain={false} - type={'button'} - bubbleEvent={false} - /> - ); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownItem.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownItem.test.tsx.snap deleted file mode 100644 index 0a802973edb..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownItem.test.tsx.snap +++ /dev/null @@ -1,9 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DropdownItem should match snapshot 1`] = ` - -
    - ReactNode -
    -     -`; diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownMenu.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownMenu.test.tsx.snap deleted file mode 100644 index 64c2a44110d..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownMenu.test.tsx.snap +++ /dev/null @@ -1,16 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DropdownMenu should match snapshot (auto-generated) 1`] = ` - - - -`; diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap deleted file mode 100644 index 2f90068522a..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap +++ /dev/null @@ -1,14 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DropdownSeparator should match snapshot 1`] = ` - -
  • -
    • -     -`; diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap deleted file mode 100644 index 87624ae8351..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Generated/__snapshots__/KebabToggle.test.tsx.snap +++ /dev/null @@ -1,27 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`KebabToggle should match snapshot (auto-generated) 1`] = ` - - - -`; diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/InternalDropdownItem.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/InternalDropdownItem.test.tsx deleted file mode 100644 index 4d515f53155..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/InternalDropdownItem.test.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { InternalDropdownItem } from '../InternalDropdownItem'; - -describe('InternalDropdownItem', () => { - describe('dropdown items', () => { - test('a', () => { - const { asFragment } = render(Something); - expect(asFragment()).toMatchSnapshot(); - }); - - test('button', () => { - const { asFragment } = render(Something); - expect(asFragment()).toMatchSnapshot(); - }); - - describe('hover', () => { - test('a', () => { - const { asFragment } = render(Something); - expect(asFragment()).toMatchSnapshot(); - }); - - test('button', () => { - const { asFragment } = render( - - Something - - ); - expect(asFragment()).toMatchSnapshot(); - }); - }); - - describe('disabled', () => { - test('a', () => { - const { asFragment } = render(Something); - expect(asFragment()).toMatchSnapshot(); - }); - - test('button', () => { - const { asFragment } = render( - - Something - - ); - expect(asFragment()).toMatchSnapshot(); - }); - }); - - describe('aria-disabled', () => { - test('a', () => { - const { asFragment } = render(Something); - expect(asFragment()).toMatchSnapshot(); - }); - - test('button', () => { - const { asFragment } = render( - - Something - - ); - expect(asFragment()).toMatchSnapshot(); - }); - }); - - describe('description', () => { - test('a', () => { - const { asFragment } = render( - Something - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('button', () => { - const { asFragment } = render( - - Something - - ); - expect(asFragment()).toMatchSnapshot(); - }); - }); - }); -}); diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Toggle.test.tsx b/packages/react-core/src/deprecated/components/Dropdown/__tests__/Toggle.test.tsx deleted file mode 100644 index 7147c341976..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/Toggle.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { DropdownToggle } from '../DropdownToggle'; -import { KebabToggle } from '../KebabToggle'; - -test('Dropdown toggle', () => { - const { asFragment } = render(Dropdown); - expect(asFragment()).toMatchSnapshot(); -}); -test('Kebab toggle', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap deleted file mode 100644 index 92bf41ddcbe..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap +++ /dev/null @@ -1,978 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Dropdown Renders in strict mode 1`] = ` - -
    - - -
    -     -`; - -exports[`Dropdown alignment breakpoints 1`] = ` - -
    - - -
    -     -`; - -exports[`Dropdown basic 1`] = ` - -
    - -
    -
    - BASIC -
    -
    -
    -     -`; - -exports[`Dropdown dropup + right aligned 1`] = ` - -
    - -
    -     -`; - -exports[`Dropdown dropup 1`] = ` - -
    - -
    -     -`; - -exports[`Dropdown expanded 1`] = ` - -
    - - -
    -     -`; - -exports[`Dropdown primary 1`] = ` - -
    - -
    -     -`; - -exports[`Dropdown regular 1`] = ` - -
    - -
    -     -`; - -exports[`Dropdown right aligned 1`] = ` - -
    - -
    -     -`; - -exports[`KebabToggle basic 1`] = ` - -
    - -
    -
    - BASIC -
    -
    -
    -     -`; - -exports[`KebabToggle dropup + right aligned 1`] = ` - -
    - -
    -     -`; - -exports[`KebabToggle dropup 1`] = ` - -
    - -
    -     -`; - -exports[`KebabToggle expanded 1`] = ` - -
    - - -
    -     -`; - -exports[`KebabToggle plain 1`] = ` - -
    - -
    -     -`; - -exports[`KebabToggle regular 1`] = ` - -
    - -
    -     -`; - -exports[`KebabToggle right aligned 1`] = ` - -
    - -
    -     -`; diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap deleted file mode 100644 index f165c5963bc..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap +++ /dev/null @@ -1,21 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`dropdown groups basic render 1`] = ` - -
    -

    - Group 1 -

    -
      - Something -
    -
    -     -`; diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap deleted file mode 100644 index dd614f94d6b..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap +++ /dev/null @@ -1,350 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DropdownToggle state action split button - renders primary variant 1`] = ` - -
    -
    - test -
    - -
    -     -`; - -exports[`DropdownToggle state active 1`] = ` - - - -`; - -exports[`DropdownToggle state button variant - plain with text 1`] = ` - - - -`; - -exports[`DropdownToggle state button variant - primary 1`] = ` - - - -`; - -exports[`DropdownToggle state button variant - secondary 1`] = ` - - - -`; - -exports[`DropdownToggle state class changes 1`] = ` - - - -`; - -exports[`DropdownToggle state focus 1`] = ` - - - -`; - -exports[`DropdownToggle state hover 1`] = ` - - - -`; - -exports[`DropdownToggle state split button - does not render primary variant 1`] = ` - -
    -
    - test -
    - -
    -     -`; diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap deleted file mode 100644 index 3bdf08cded4..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap +++ /dev/null @@ -1,33 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`isDisabled 1`] = ` - - - - -`; - -exports[`InternalDropdownItem dropdown items button 1`] = ` - -
  • - -
    • -     -`; - -exports[`InternalDropdownItem dropdown items description a 1`] = ` - -
  • - -
    - Something -
    -
    - Something's link description -
    -     -
    • -     -`; - -exports[`InternalDropdownItem dropdown items description button 1`] = ` - -
  • - -
    • -     -`; - -exports[`InternalDropdownItem dropdown items disabled a 1`] = ` - -
  • - - Something - -
    • -     -`; - -exports[`InternalDropdownItem dropdown items disabled button 1`] = ` - -
  • - -
    • -     -`; - -exports[`InternalDropdownItem dropdown items hover a 1`] = ` - -
  • - - Something - -
    • -     -`; - -exports[`InternalDropdownItem dropdown items hover button 1`] = ` - -
  • - -
    • -     -`; diff --git a/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap b/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap deleted file mode 100644 index e44b8c8f04c..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap +++ /dev/null @@ -1,64 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Dropdown toggle 1`] = ` - - - -`; - -exports[`Kebab toggle 1`] = ` - - - -`; diff --git a/packages/react-core/src/deprecated/components/Dropdown/dropdownConstants.tsx b/packages/react-core/src/deprecated/components/Dropdown/dropdownConstants.tsx deleted file mode 100644 index 465101677ff..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/dropdownConstants.tsx +++ /dev/null @@ -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 -}); diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/deprecated/components/Dropdown/examples/Dropdown.md deleted file mode 100644 index d14dc1b98c5..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/Dropdown.md +++ /dev/null @@ -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 `` 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 ``, which adds a horizontal line that splits the menu into 2 sections. - -```ts file='./DropdownBasic.tsx' - -``` - -### Autofocus on dropdown expansion - -A `` 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 `` 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 `` 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 - -`` may use the `component` property to include router links. - -```ts file="./DropdownRouterLink.tsx" - -``` - -### Toggle styling - -You can adjust the styling of a `` 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 `` component. - -```ts file="./DropdownPlainTextToggle.tsx" - -``` - -### Disabled toggles - -A `` may use the `isDisabled` property to disable the expansion of the dropdown menu. - -```ts file="./DropdownDisabled.tsx" - -``` - -### Icon toggle - -`` 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 `` 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 `` 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 `` 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 ``, 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 `` 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 `` 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 `` 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 `` `menuAppendTo` property. Doing so can cause accessibility issues, such as being unable to navigate `` 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 ``, but the options for the `document.body` variant cannot be navigated via Voice Over. - -```ts file="./DropdownAppendBodyVsParent.tsx" - -``` diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx deleted file mode 100644 index ab7f3942220..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx +++ /dev/null @@ -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 = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx deleted file mode 100644 index 52bd44dc291..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx +++ /dev/null @@ -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 = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - - Dropdown appended to body - - } - isOpen={isBodyOpen} - dropdownItems={dropdownItems} - menuAppendTo={() => document.body} - /> - - Dropdown appended to parent - - } - isOpen={isParentOpen} - dropdownItems={dropdownItems} - menuAppendTo="parent" - /> - - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBadge.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBadge.tsx deleted file mode 100644 index 29e5a47b6d6..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBadge.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownItem, BadgeToggle } from '@patternfly/react-core/deprecated'; -import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; - -export const DropdownBadge: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-badge'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - }> - Edit - , - }> - Deployment - , - }> - Applications - - ]; - - return ( - - {dropdownItems.length} - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBasic.tsx deleted file mode 100644 index 0629cc0c7e0..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBasic.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated'; - -export const DropdownBasic: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-basic'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - - Link - , - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBasicPanel.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBasicPanel.tsx deleted file mode 100644 index 4c1eea1dec1..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownBasicPanel.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle } from '@patternfly/react-core/deprecated'; - -export const DropdownBasicPanel: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-panel'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - return ( - - Expanded dropdown - - } - isOpen={isOpen} - > - [Panel contents here] - - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDescriptions.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDescriptions.tsx deleted file mode 100644 index 32619222822..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDescriptions.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core/deprecated'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; -import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; - -export const DropdownDescriptions: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-descriptions'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - }> - Link - , - } - description="This is a very long description that describes the menu item" - > - Action - , - - Disabled link - , - - Disabled action - - ]; - - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDirectionUp.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDirectionUp.tsx deleted file mode 100644 index 1d3fe0051fd..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDirectionUp.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import { - Dropdown, - DropdownToggle, - DropdownItem, - DropdownSeparator, - DropdownDirection -} from '@patternfly/react-core/deprecated'; - -export const DropdownDirectionUp: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-direction-up'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDisabled.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDisabled.tsx deleted file mode 100644 index ed1e7050ba9..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownDisabled.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated'; - -export const DropdownDisabled: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-disabled'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownGroups.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownGroups.tsx deleted file mode 100644 index 3470739e1fe..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownGroups.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownGroup, DropdownItem } from '@patternfly/react-core/deprecated'; - -export const DropdownGroups: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-groups'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - - Link - - Action - - , - - Group 2 link - - Group 2 action - - , - - Group 3 link - - Group 3 action - - - ]; - - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - isGrouped - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownIconOnly.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownIconOnly.tsx deleted file mode 100644 index 7a0ccdeda5a..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownIconOnly.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated'; -import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; - -export const DropdownIconOnly: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-icon-only'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - - - } - isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownImageAndText.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownImageAndText.tsx deleted file mode 100644 index 587fae5105b..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownImageAndText.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import { Avatar } from '@patternfly/react-core'; -import { - Dropdown, - DropdownGroup, - DropdownToggle, - DropdownItem, - DropdownSeparator -} from '@patternfly/react-core/deprecated'; -import avatarImg from '../../../../components/assets/avatarImg.svg'; - -export const DropdownImageAndText: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-image-and-text'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - - - Text - - - More text - - , - , - - My profile - - User management - - Logout - - ]; - - return ( - } - > - Ned Username - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownInitialSelection.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownInitialSelection.tsx deleted file mode 100644 index 9033d69e54b..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownInitialSelection.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated'; - -export const DropdownInitialSelection: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-initial-selection'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownKebab.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownKebab.tsx deleted file mode 100644 index ad079ccaa3a..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownKebab.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownItem, DropdownSeparator, KebabToggle } from '@patternfly/react-core/deprecated'; - -export const DropdownKebab: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-kebab'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - } - isOpen={isOpen} - isPlain - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPlainTextToggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPlainTextToggle.tsx deleted file mode 100644 index 021326c75bc..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPlainTextToggle.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated'; - -export const DropdownPlainTextToggle: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-plain-text'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPositionRight.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPositionRight.tsx deleted file mode 100644 index 68dec5254ec..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPositionRight.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import { - Dropdown, - DropdownToggle, - DropdownItem, - DropdownSeparator, - DropdownPosition -} from '@patternfly/react-core/deprecated'; - -export const DropdownPositionRight: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-position-right'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPrimaryToggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPrimaryToggle.tsx deleted file mode 100644 index 8d227c611db..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownPrimaryToggle.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated'; - -export const DropdownPrimaryToggle: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-primary'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownRouterLink.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownRouterLink.tsx deleted file mode 100644 index e6c817954ba..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownRouterLink.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core/deprecated'; -import { Link } from '@reach/router'; - -export const DropdownRouterLink: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-router-link'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [@reach/router Link} />]; - - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSecondaryToggle.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSecondaryToggle.tsx deleted file mode 100644 index 5ffb4d0b7a6..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSecondaryToggle.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated'; - -export const DropdownPrimaryToggle: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-secondary'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - Dropdown - - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButton.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButton.tsx deleted file mode 100644 index 9949061f2e9..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButton.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; -import { - Dropdown, - DropdownToggle, - DropdownToggleCheckbox, - DropdownItem, - DropdownSeparator -} from '@patternfly/react-core/deprecated'; - -export const DropdownSplitButton: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-split-button'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - ]} - onToggle={onToggle} - id="toggle-split-button" - /> - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonAction.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonAction.tsx deleted file mode 100644 index c598f25e3e0..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonAction.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core/deprecated'; -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'; - -export const DropdownSplitButtonAction: React.FunctionComponent = () => { - const [isActionOpen, setIsActionOpen] = React.useState(false); - const [isCogOpen, setIsCogOpen] = React.useState(false); - - const onActionToggle = (_event: any, isActionOpen: boolean) => { - setIsActionOpen(isActionOpen); - }; - const onCogToggle = (_event: any, isCogOpen: boolean) => { - setIsCogOpen(isCogOpen); - }; - - const onActionClick = () => { - window.alert('You selected an action button!'); - }; - const onCogClick = () => { - window.alert('You selected the Cog!'); - }; - - const onActionFocus = () => { - const element = document.getElementById('toggle-split-button-action'); - element?.focus(); - }; - const onCogFocus = () => { - const element = document.getElementById('toggle-split-button-cog'); - element?.focus(); - }; - - const onActionSelect = () => { - setIsActionOpen(false); - onActionFocus(); - }; - const onCogSelect = () => { - setIsCogOpen(false); - onCogFocus(); - }; - - const dropdownItems = [ - - Action - , - - Disabled action - , - - Other action - - ]; - - const dropdownIconItems = [ - } onClick={onActionClick}> - Action - , - } isDisabled onClick={onActionClick}> - Disabled action - , - } onClick={onActionClick}> - Other action - - ]; - - return ( - - - Action - - ]} - splitButtonVariant="action" - onToggle={onActionToggle} - /> - } - isOpen={isActionOpen} - dropdownItems={dropdownItems} - />{' '} - - - - ]} - splitButtonVariant="action" - onToggle={onCogToggle} - /> - } - isOpen={isCogOpen} - dropdownItems={dropdownIconItems} - /> - - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx deleted file mode 100644 index 5e8bf6925f9..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core/deprecated'; -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'; - -export const DropdownSplitButtonActionPrimary: React.FunctionComponent = () => { - const [isActionOpen, setIsActionOpen] = React.useState(false); - const [isCogOpen, setIsCogOpen] = React.useState(false); - - const onActionToggle = (_event: any, isActionOpen: boolean) => { - setIsActionOpen(isActionOpen); - }; - const onCogToggle = (_event: any, isCogOpen: boolean) => { - setIsCogOpen(isCogOpen); - }; - - const onActionClick = () => { - window.alert('You selected an action button!'); - }; - const onCogClick = () => { - window.alert('You selected the Cog!'); - }; - - const onActionFocus = () => { - const element = document.getElementById('toggle-split-button-action-primary'); - element?.focus(); - }; - const onCogFocus = () => { - const element = document.getElementById('toggle-split-button-cog-primary'); - element?.focus(); - }; - - const onActionSelect = () => { - setIsActionOpen(false); - onActionFocus(); - }; - const onCogSelect = () => { - setIsCogOpen(false); - onCogFocus(); - }; - - const dropdownItems = [ - - Action - , - - Disabled action - , - - Other action - - ]; - - const dropdownIconItems = [ - } onClick={onActionClick}> - Action - , - } isDisabled onClick={onActionClick}> - Disabled action - , - } onClick={onActionClick}> - Other action - - ]; - - return ( - - - Action - - ]} - toggleVariant="primary" - splitButtonVariant="action" - onToggle={onActionToggle} - /> - } - isOpen={isActionOpen} - dropdownItems={dropdownItems} - />{' '} - - - - ]} - toggleVariant="primary" - splitButtonVariant="action" - onToggle={onCogToggle} - /> - } - isOpen={isCogOpen} - dropdownItems={dropdownIconItems} - /> - - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx deleted file mode 100644 index 6a8a5a00c09..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import React from 'react'; -import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core/deprecated'; -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'; - -export const DropdownSplitButtonActionSecondary: React.FunctionComponent = () => { - const [isActionOpen, setIsActionOpen] = React.useState(false); - const [isCogOpen, setIsCogOpen] = React.useState(false); - - const onActionToggle = (_event: any, isActionOpen: boolean) => { - setIsActionOpen(isActionOpen); - }; - const onCogToggle = (_event: any, isCogOpen: boolean) => { - setIsCogOpen(isCogOpen); - }; - - const onActionClick = () => { - window.alert('You selected an action button!'); - }; - const onCogClick = () => { - window.alert('You selected the Cog!'); - }; - - const onActionFocus = () => { - const element = document.getElementById('toggle-split-button-action-secondary'); - element?.focus(); - }; - const onCogFocus = () => { - const element = document.getElementById('toggle-split-button-cog-secondary'); - element?.focus(); - }; - - const onActionSelect = () => { - setIsActionOpen(false); - onActionFocus(); - }; - const onCogSelect = () => { - setIsCogOpen(false); - onCogFocus(); - }; - - const dropdownItems = [ - - Action - , - - Disabled action - , - - Other action - - ]; - - const dropdownIconItems = [ - } onClick={onActionClick}> - Action - , - } isDisabled onClick={onActionClick}> - Disabled action - , - } onClick={onActionClick}> - Other action - - ]; - - return ( - - - Action - - ]} - toggleVariant="secondary" - splitButtonVariant="action" - onToggle={onActionToggle} - /> - } - isOpen={isActionOpen} - dropdownItems={dropdownItems} - />{' '} - - - - ]} - toggleVariant="secondary" - splitButtonVariant="action" - onToggle={onCogToggle} - /> - } - isOpen={isCogOpen} - dropdownItems={dropdownIconItems} - /> - - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx deleted file mode 100644 index 4ee70da91ea..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; -import { - Dropdown, - DropdownToggle, - DropdownToggleCheckbox, - DropdownItem, - DropdownSeparator -} from '@patternfly/react-core/deprecated'; - -export const DropdownSplitButtonDisabled: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-split-button'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - ]} - onToggle={onToggle} - isDisabled - id="toggle-split-button-disabled" - /> - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx deleted file mode 100644 index 7597a0bc8a3..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import React from 'react'; -import { - Dropdown, - DropdownToggle, - DropdownToggleCheckbox, - DropdownItem, - DropdownSeparator -} from '@patternfly/react-core/deprecated'; - -export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () => { - const [isOpen1, setIsOpen1] = React.useState(false); - const [isOpen2, setIsOpen2] = React.useState(false); - - const [isChecked1, setIsChecked1] = React.useState(false); - const [isChecked2, setIsChecked2] = React.useState(false); - - const [isTimedOut1, setIsTimedOut1] = React.useState(true); - const [isTimedOut2, setIsTimedOut2] = React.useState(true); - - const onToggle1 = (_event: any, isOpen: boolean) => { - setIsOpen1(isOpen); - }; - - const onToggle2 = (_event: any, isOpen: boolean) => { - setIsOpen2(isOpen); - }; - - const showProgressIcon1 = () => { - setIsTimedOut1(false); - setTimeout(() => setIsTimedOut1(true), 3000); - }; - - const showProgressIcon2 = () => { - setIsTimedOut2(false); - setTimeout(() => setIsTimedOut2(true), 3000); - }; - - const onFocus1 = () => { - const element = document.getElementById('toggle-split-button-progress'); - element?.focus(); - }; - - const onFocus2 = () => { - const element = document.getElementById('toggle-split-button-progress-text'); - element?.focus(); - }; - - const onChange1 = (checked: boolean) => { - setIsChecked1(checked); - showProgressIcon1(); - }; - - const onChange2 = (checked: boolean) => { - setIsChecked2(checked); - showProgressIcon2(); - }; - - const onSelect1 = () => { - setIsOpen1(false); - onFocus1(); - }; - - const onSelect2 = () => { - setIsOpen2(false); - onFocus2(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - <> - onChange1(checked)} - isChecked={isChecked1} - isInProgress={!isTimedOut1} - id="split-button-progress-toggle-checkbox" - key="split-progress-checkbox" - aria-label="Select all" - /> - ]} - onToggle={onToggle1} - id="toggle-split-button-progress" - /> - } - isOpen={isOpen1} - dropdownItems={dropdownItems} - />{' '} - onChange2(checked)} - isChecked={isChecked2} - isInProgress={!isTimedOut2} - id="split-button-progress-text-checkbox" - key="split-progress-checkbox" - aria-label="Select all" - > - 10 selected - - ]} - onToggle={onToggle2} - id="toggle-split-button-progress-text" - /> - } - isOpen={isOpen2} - dropdownItems={dropdownItems} - /> - - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonText.tsx b/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonText.tsx deleted file mode 100644 index e1755a6cb4b..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/examples/DropdownSplitButtonText.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import { - Dropdown, - DropdownToggle, - DropdownToggleCheckbox, - DropdownItem, - DropdownSeparator -} from '@patternfly/react-core/deprecated'; - -export const DropdownSplitButtonText: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - - const onToggle = (_event: any, isOpen: boolean) => { - setIsOpen(isOpen); - }; - - const onFocus = () => { - const element = document.getElementById('toggle-split-button-text'); - element?.focus(); - }; - - const onSelect = () => { - setIsOpen(false); - onFocus(); - }; - - const dropdownItems = [ - Link, - - Action - , - - Disabled link - , - - Disabled action - , - , - Separated link, - - Separated action - - ]; - - return ( - - 10 selected - - ]} - onToggle={onToggle} - id="toggle-split-button-text" - /> - } - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - ); -}; diff --git a/packages/react-core/src/deprecated/components/Dropdown/index.ts b/packages/react-core/src/deprecated/components/Dropdown/index.ts deleted file mode 100644 index b7ec6230d01..00000000000 --- a/packages/react-core/src/deprecated/components/Dropdown/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -export * from './Dropdown'; -export * from './DropdownMenu'; -export * from './DropdownWithContext'; -export * from './dropdownConstants'; -export * from './DropdownGroup'; -export * from './DropdownItem'; -export * from './DropdownSeparator'; -export * from './BadgeToggle'; -export * from './KebabToggle'; -export * from './DropdownToggle'; -export * from './DropdownToggleCheckbox'; -export * from './DropdownToggleAction'; diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenu.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenu.tsx deleted file mode 100644 index d3b7e8d921f..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenu.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import * as React from 'react'; -import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu'; -import { DropdownContext } from '../Dropdown'; -import { DropdownWithContext } from '../Dropdown/DropdownWithContext'; -import { OUIAProps, useOUIAId } from '../../../helpers'; - -export enum OptionsMenuPosition { - right = 'right', - left = 'left' -} - -export enum OptionsMenuDirection { - up = 'up', - down = 'down' -} - -export interface OptionsMenuProps extends React.HTMLProps, OUIAProps { - /** Classes applied to root element of the options menu */ - className?: string; - /** Id of the root element of the options menu */ - id: string; - /** Array of OptionsMenuItem and/or OptionMenuGroup nodes that will be rendered in the options menu list */ - menuItems: React.ReactNode[]; - /** Either an OptionsMenuToggle or an OptionsMenuToggleWithText to use to toggle the options menu */ - toggle: React.ReactElement; - /** Flag to indicate the toggle has no border or background */ - isPlain?: boolean; - /** Flag to indicate if menu is open */ - isOpen?: boolean; - /** Flag to indicate if toggle is textual toggle */ - isText?: boolean; - /** Flag to indicate if menu is groupped */ - isGrouped?: boolean; - /** Indicates where menu will be aligned horizontally */ - position?: 'right' | 'left'; - /** Menu will open up or open down from the options menu toggle */ - direction?: 'up' | 'down'; - /** 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'; - /** z-index of the options menu 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 OptionsMenu: React.FunctionComponent = ({ - className = '', - menuItems, - toggle, - isText = false, - isGrouped = false, - id, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - ref, - menuAppendTo = 'inline', - ouiaId, - ouiaSafe = true, - zIndex = 9999, - ...props -}: OptionsMenuProps) => ( - undefined, - toggleIndicatorClass: styles.optionsMenuToggleIcon, - toggleTextClass: styles.optionsMenuToggleText, - menuClass: styles.optionsMenuMenu, - itemClass: styles.optionsMenuMenuItem, - toggleClass: isText ? styles.optionsMenuToggleButton : styles.optionsMenuToggle, - baseClass: styles.optionsMenu, - disabledClass: styles.modifiers.disabled, - menuComponent: isGrouped ? 'div' : 'ul', - baseComponent: 'div', - ouiaId: useOUIAId(OptionsMenu.displayName, ouiaId), - ouiaSafe, - ouiaComponentType: OptionsMenu.displayName - }} - > - - -); -OptionsMenu.displayName = 'OptionsMenu'; diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItem.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItem.tsx deleted file mode 100644 index a9b99d985a4..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItem.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import * as React from 'react'; -import { css } from '@patternfly/react-styles'; -import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu'; -import { DropdownItem } from '../Dropdown'; -import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon'; - -export interface OptionsMenuItemProps - extends Omit, 'onSelect' | 'onClick' | 'onKeyDown' | 'type'> { - /** Anything which can be rendered as an options menu item */ - children?: React.ReactNode; - /** Classes applied to root element of an options menu item */ - className?: string; - /** Render options menu item as selected */ - isSelected?: boolean; - /** Render options menu item as disabled option */ - isDisabled?: boolean; - /** Callback for when this options menu item is selected */ - onSelect?: (event?: React.MouseEvent | React.KeyboardEvent) => void; - /** Unique id of this options menu item */ - id?: string; -} - -export const OptionsMenuItem: React.FunctionComponent = ({ - children = null as React.ReactNode, - isSelected = false, - onSelect = () => null as any, - id = '', - isDisabled, - ...props -}: OptionsMenuItemProps) => ( - onSelect(event)} - {...(isDisabled && { 'aria-disabled': true })} - {...props} - > - {children} - {isSelected && ( - - - - )} - -); -OptionsMenuItem.displayName = 'OptionsMenuItem'; diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItemGroup.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItemGroup.tsx deleted file mode 100644 index df72c833894..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItemGroup.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu'; -import { css } from '@patternfly/react-styles'; -import { Divider } from '../../../components/Divider'; - -export interface OptionsMenuItemGroupProps extends React.HTMLProps { - /** Content to be rendered in the options menu items component */ - children?: React.ReactNode; - /** Classes applied to root element of the options menu items group */ - className?: string; - /** Provides an accessible name for the options menu items group */ - 'aria-label'?: string; - /** Optional title for the options menu items group */ - groupTitle?: string | React.ReactNode; - /** Flag indicating this options menu items group will be followed by a horizontal separator */ - hasSeparator?: boolean; -} - -export const OptionsMenuItemGroup: React.FunctionComponent = ({ - className = '', - 'aria-label': ariaLabel = '', - groupTitle = '', - children = null, - hasSeparator = false, - ...props -}: OptionsMenuItemGroupProps) => ( -
    - {groupTitle &&

    {groupTitle}

    } -
      - {children} - {hasSeparator && } -
    -
    -); -OptionsMenuItemGroup.displayName = 'OptionsMenuItemGroup'; diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuSeparator.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuSeparator.tsx deleted file mode 100644 index 2d4ddc99064..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuSeparator.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { Divider, DividerProps } from '../../../components/Divider'; - -export const OptionsMenuSeparator: React.FunctionComponent = ({ - component = 'li', - ...props -}: DividerProps) => ; -OptionsMenuSeparator.displayName = 'OptionsMenuSeparator'; diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggle.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggle.tsx deleted file mode 100644 index 9465c0da3da..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggle.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import * as React from 'react'; -import { DropdownToggle, DropdownContext } from '../Dropdown'; - -export interface OptionsMenuToggleProps extends React.HTMLProps { - /** Id of the parent options menu component */ - parentId?: string; - /** Callback for when this options menu is toggled */ - onToggle?: ( - event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent | React.MouseEvent, - isOpen: boolean - ) => void; - /** Flag to indicate if menu is open */ - isOpen?: boolean; - /** Flag to indicate if the button is plain */ - isPlain?: boolean; - isSplitButton?: boolean; - /** Forces display of the active state of the options menu */ - isActive?: boolean; - /** Disables the options menu toggle */ - isDisabled?: boolean; - /** hide the toggle caret */ - hideCaret?: boolean; - /** Provides an accessible name for the button when an icon is used instead of text */ - 'aria-label'?: string; - /** @hide Internal function to implement enter click */ - onEnter?: (event: React.MouseEvent) => void; - /** @hide Internal parent reference */ - parentRef?: HTMLElement; - /** Content to be rendered in the options menu toggle button */ - toggleTemplate?: React.ReactNode; -} - -export const OptionsMenuToggle: React.FunctionComponent = ({ - isPlain = false, - isDisabled = false, - isOpen = false, - parentId = '', - toggleTemplate = , - hideCaret = false, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - isActive = false, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - isSplitButton = false, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - type, - 'aria-label': ariaLabel = 'Options menu', - ...props -}: OptionsMenuToggleProps) => ( - - {({ id: contextId }) => ( - - )} - -); -OptionsMenuToggle.displayName = 'OptionsMenuToggle'; diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggleWithText.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggleWithText.tsx deleted file mode 100644 index cd5727f58d3..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuToggleWithText.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import * as React from 'react'; -import { css } from '@patternfly/react-styles'; -import { KeyTypes } from '../../../helpers/constants'; -import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu'; -import { DropdownContext } from '../Dropdown'; - -export interface OptionsMenuToggleWithTextProps extends React.HTMLProps { - /** Id of the parent options menu component */ - parentId?: string; - /** Content to be rendered inside the options menu toggle as text or another non-interactive element */ - toggleText: React.ReactNode; - /** classes to be added to the options menu toggle text */ - toggleTextClassName?: string; - /** Content to be rendered inside the options menu toggle button */ - toggleButtonContents?: React.ReactNode; - /** Classes to be added to the options menu toggle button */ - toggleButtonContentsClassName?: string; - /** Callback for when this options menu is toggled */ - onToggle?: ( - event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent | React.MouseEvent, - isOpen: boolean - ) => void; - /** Inner function to indicate open on Enter */ - onEnter?: (event: React.MouseEvent | React.KeyboardEvent) => void; - /** Flag to indicate if menu is open */ - isOpen?: boolean; - /** Flag to indicate if the button is plain */ - isPlain?: boolean; - /** Forces display of the active state of the options menu button */ - isActive?: boolean; - /** Disables the options menu toggle */ - isDisabled?: boolean; - /** @hide Internal parent reference */ - parentRef?: React.RefObject; - /** Indicates that the element has a popup context menu or sub-level menu */ - 'aria-haspopup'?: boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'; - /** Provides an accessible name for the button when an icon is used instead of text */ - 'aria-label'?: string; - /** @hide Display the toggle in text only mode. */ - isText?: boolean; - /** @hide The menu element */ - getMenuRef?: () => HTMLElement; -} - -export const OptionsMenuToggleWithText: React.FunctionComponent = ({ - parentId = '', - toggleText, - toggleTextClassName = '', - toggleButtonContents, - toggleButtonContentsClassName = '', - onToggle = () => null as any, - isOpen = false, - isPlain = false, - /* eslint-disable @typescript-eslint/no-unused-vars */ - isText = true, - isDisabled = false, - /* eslint-disable @typescript-eslint/no-unused-vars */ - isActive = false, - 'aria-haspopup': ariaHasPopup, - parentRef, - /* eslint-disable @typescript-eslint/no-unused-vars */ - getMenuRef, - onEnter, - /* eslint-enable @typescript-eslint/no-unused-vars */ - 'aria-label': ariaLabel = 'Options menu', - ...props -}: OptionsMenuToggleWithTextProps) => { - const buttonRef = React.useRef(); - - React.useEffect(() => { - document.addEventListener('mousedown', onDocClick); - document.addEventListener('touchstart', onDocClick); - document.addEventListener('keydown', onEscPress); - return () => { - document.removeEventListener('mousedown', onDocClick); - document.removeEventListener('touchstart', onDocClick); - document.removeEventListener('keydown', onEscPress); - }; - }); - - const onDocClick = (event: MouseEvent | TouchEvent) => { - if (isOpen && parentRef && parentRef.current && !parentRef.current.contains(event.target as Node)) { - onToggle(event, false); - buttonRef.current.focus(); - } - }; - - const onKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Tab' && !isOpen) { - return; - } - event.preventDefault(); - if ((event.key === 'Enter' || event.key === ' ') && isOpen) { - onToggle(event, !isOpen); - } else if ((event.key === 'Enter' || event.key === ' ') && !isOpen) { - onToggle(event, !isOpen); - onEnter(event); - } - }; - - const onEscPress = (event: KeyboardEvent) => { - if ( - isOpen && - (event.key === KeyTypes.Escape || event.key === 'Tab') && - parentRef && - parentRef.current && - parentRef.current.contains(event.target as Node) - ) { - onToggle(event, false); - buttonRef.current.focus(); - } - }; - - return ( - - {({ id: contextId }) => ( -
    - {toggleText} - -
    - )} -     - ); -}; -OptionsMenuToggleWithText.displayName = 'OptionsMenuToggleWithText'; diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuItem.test.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuItem.test.tsx deleted file mode 100644 index 2fa3f5c71e2..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuItem.test.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -import { render } from '@testing-library/react'; - -import { OptionsMenuItem } from '../../OptionsMenuItem'; -import { DropdownArrowContext } from '../../../Dropdown'; - -describe('OptionsMenuItem', () => { - it('should match snapshot', () => { - const { asFragment } = render( - - ReactNode} - className={'string'} - isSelected={false} - isDisabled={true} - onSelect={() => null as any} - id={"''"} - />{' '} - - ); - expect(asFragment()).toMatchSnapshot(); - }); -}); diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuItemGroup.test.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuItemGroup.test.tsx deleted file mode 100644 index 9b6500e2c47..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuItemGroup.test.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { OptionsMenuItemGroup } from '../../OptionsMenuItemGroup'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('OptionsMenuItemGroup should match snapshot (auto-generated)', () => { - const { asFragment } = render( - ReactNode} - className={"''"} - aria-label={"''"} - groupTitle={''} - hasSeparator={false} - /> - ); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuSeparator.test.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuSeparator.test.tsx deleted file mode 100644 index 67ce9af9009..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuSeparator.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { OptionsMenuSeparator } from '../../OptionsMenuSeparator'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('OptionsMenuSeparator should match snapshot (auto-generated)', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuToggle.test.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuToggle.test.tsx deleted file mode 100644 index 6edfd522cf4..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuToggle.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { OptionsMenuToggle } from '../../OptionsMenuToggle'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('OptionsMenuToggle should match snapshot (auto-generated)', () => { - const { asFragment } = render( - undefined as void} - isOpen={false} - isPlain={false} - isSplitButton={false} - isActive={false} - isDisabled={false} - hideCaret={false} - aria-label={"'Options menu'"} - onEnter={(event: React.MouseEvent) => undefined as void} - parentRef={document.body} - toggleTemplate={
    ReactNode
    } - /> - ); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuToggleWithText.test.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuToggleWithText.test.tsx deleted file mode 100644 index 1be8708496d..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/OptionsMenuToggleWithText.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { OptionsMenuToggleWithText } from '../../OptionsMenuToggleWithText'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('OptionsMenuToggleWithText should match snapshot (auto-generated)', () => { - const { asFragment } = render( - ReactNode
    } - toggleTextClassName={"''"} - toggleButtonContents={
    ReactNode
    } - toggleButtonContentsClassName={"''"} - onToggle={() => null as any} - isOpen={false} - isPlain={false} - isActive={false} - isDisabled={false} - aria-haspopup={true} - aria-label={"'Options menu'"} - /> - ); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItem.test.tsx.snap b/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItem.test.tsx.snap deleted file mode 100644 index a40456b76f1..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItem.test.tsx.snap +++ /dev/null @@ -1,24 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`OptionsMenuItem should match snapshot 1`] = ` - -
  • - -
    • - -     -`; diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItemGroup.test.tsx.snap b/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItemGroup.test.tsx.snap deleted file mode 100644 index 42c8ed1693e..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItemGroup.test.tsx.snap +++ /dev/null @@ -1,18 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`OptionsMenuItemGroup should match snapshot (auto-generated) 1`] = ` - -
    -
      - ReactNode -
    -
    -     -`; diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuSeparator.test.tsx.snap b/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuSeparator.test.tsx.snap deleted file mode 100644 index 7f03ad6897f..00000000000 --- a/packages/react-core/src/deprecated/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuSeparator.test.tsx.snap +++ /dev/null @@ -1,10 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`OptionsMenuSeparator should match snapshot (auto-generated) 1`] = ` - -
    - ); - } -} -``` - -### With view more - -To reduce the processing load for long select lists, replace overflow items with a "View more" link at the bottom of the select menu. - -Adjust the number of items shown above the "View more" link with the `numOptions` property. The following example passes 3 items into this property. - -```js -import React from 'react'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; - -class SelectViewMore extends React.Component { - constructor(props) { - super(props); - this.options = [ - , - , - , - , - , - , - - ]; - - this.toggleRef = React.createRef(); - - this.state = { - isOpen: false, - selected: null, - numOptions: 3, - isLoading: false - }; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, selection, isPlaceholder) => { - if (isPlaceholder) this.clearSelection(); - else { - this.setState({ - selected: selection, - isOpen: false - }); - console.log('selected:', selection); - this.toggleRef.current.focus(); - } - }; - - this.clearSelection = () => { - this.setState({ - selected: null, - isOpen: false - }); - }; - - this.simulateNetworkCall = callback => { - setTimeout(callback, 2000); - }; - - this.onViewMoreClick = () => { - // Set select loadingVariant to spinner then simulate network call before loading more options - this.setState({ isLoading: true }); - this.simulateNetworkCall(() => { - const newLength = - this.state.numOptions + 3 <= this.options.length ? this.state.numOptions + 3 : this.options.length; - this.setState({ numOptions: newLength, isLoading: false }); - }); - }; - } - - render() { - const { isOpen, selected, isToggleIcon, numOptions, loadingVariant, isLoading } = this.state; - const titleId = 'title-id-view-more'; - return ( -
    - - -
    - ); - } -} -``` - -### Checkbox select - -To let users select multiple list options via checkbox input, use a checkbox select. To create a checkbox select, pass `variant={SelectVariant.checkbox}` into the ` - {this.options} - - - ); - } -} -``` - -### Checkbox select with grouped items - -You can use groups alongside checkbox input. The item count badge will display the number of items selected across all groups. - -```js -import React from 'react'; -import { Select, SelectOption, SelectVariant, SelectGroup } from '@patternfly/react-core/deprecated'; - -class GroupedCheckboxSelectInput extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false, - selected: [] - }; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, selection) => { - const { selected } = this.state; - if (selected.includes(selection)) { - this.setState( - prevState => ({ selected: prevState.selected.filter(item => item !== selection) }), - () => console.log('selections: ', this.state.selected) - ); - } else { - this.setState( - prevState => ({ selected: [...prevState.selected, selection] }), - () => console.log('selections: ', this.state.selected) - ); - } - }; - - this.clearSelection = () => { - this.setState({ - selected: [] - }); - }; - - this.options = [ - - - - - - - , - - - - - - ]; - } - - render() { - const { isOpen, selected } = this.state; - const titleId = 'grouped-checkbox-select-id-1'; - return ( -
    - - -
    - ); - } -} -``` - -### Checkbox select with custom badge - -To change the default badge text for a checkbox select, use the `customBadgeText` property. The following example uses `customBadgeText` to display "all" in the badge once all menu items are selected. - -```js -import React from 'react'; -import { Select, SelectOption, SelectGroup, SelectVariant } from '@patternfly/react-core/deprecated'; - -class FilteringCheckboxSelectInputWithBadging extends React.Component { - constructor(props) { - super(props); - - this.state = { - isOpen: false, - selected: [], - customBadgeText: 0 - }; - - this.options = [ - - - - - - - , - - - - - - ]; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, selection) => { - const { selected } = this.state; - if (selected.includes(selection)) { - this.setState( - prevState => ({ - selected: prevState.selected.filter(item => item !== selection), - customBadgeText: this.setBadgeText(prevState.selected.length - 1) - }), - () => console.log('selections: ', this.state.selected) - ); - } else { - this.setState( - prevState => ({ - selected: [...prevState.selected, selection], - customBadgeText: this.setBadgeText(prevState.selected.length + 1) - }), - () => console.log('selections: ', this.state.selected) - ); - } - }; - - this.onFilter = (_, textInput) => { - if (textInput === '') { - return this.options; - } else { - let filteredGroups = this.options - .map(group => { - let filteredGroup = React.cloneElement(group, { - children: group.props.children.filter(item => { - return item.props.value.toLowerCase().includes(textInput.toLowerCase()); - }) - }); - if (filteredGroup.props.children.length > 0) return filteredGroup; - }) - .filter(newGroup => newGroup); - return filteredGroups; - } - }; - - this.clearSelection = () => { - this.setState({ - selected: [], - customBadgeText: this.setBadgeText(0) - }); - }; - - this.setBadgeText = selected => { - if (selected === 7) { - return 'All'; - } - if (selected === 0) { - return 0; - } - return null; - }; - } - - render() { - const { isOpen, selected, filteredOptions, customBadgeText } = this.state; - const titleId = 'checkbox-filtering-custom-badging-select-id'; - return ( -
    - - -
    - ); - } -} -``` - -### Checkbox select without selected count - -To remove the default item count badge, use the `isCheckboxSelectionBadgeHidden` property. - -```js -import React from 'react'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; - -class CheckboxSelectInputNoBadge extends React.Component { - constructor(props) { - super(props); - - this.state = { - isOpen: false, - selected: [] - }; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, selection) => { - const { selected } = this.state; - if (selected.includes(selection)) { - this.setState( - prevState => ({ selected: prevState.selected.filter(item => item !== selection) }), - () => console.log('selections: ', this.state.selected) - ); - } else { - this.setState( - prevState => ({ selected: [...prevState.selected, selection] }), - () => console.log('selections: ', this.state.selected) - ); - } - }; - - this.clearSelection = () => { - this.setState({ - selected: [] - }); - }; - - this.options = [ - , - , - , - - ]; - } - - render() { - const { isOpen, selected } = this.state; - const titleId = 'checkbox-no-badge-select-id'; - return ( -
    - - -
    - ); - } -} -``` - -### Checkbox select with item counts - -To show users the number of items that a `` would match, use the `itemCount` property. The numerical value you pass into `itemCount` is displayed to the right of each menu item. - -```js -import React from 'react'; -import { Divider } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; - -class CheckboxSelectWithCounts extends React.Component { - constructor(props) { - super(props); - - this.state = { - isOpen: false, - selected: [] - }; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, selection) => { - const { selected } = this.state; - if (selected.includes(selection)) { - this.setState( - prevState => ({ selected: prevState.selected.filter(item => item !== selection) }), - () => console.log('selections: ', this.state.selected) - ); - } else { - this.setState( - prevState => ({ selected: [...prevState.selected, selection] }), - () => console.log('selections: ', this.state.selected) - ); - } - }; - - this.clearSelection = () => { - this.setState({ - selected: [] - }); - }; - - this.options = [ - , - , - , - , - - ]; - } - - render() { - const { isOpen, selected } = this.state; - const titleId = 'checkbox-select-with-counts-id'; - return ( -
    - - -
    - ); - } -} -``` - -### Checkbox select with a footer - -You can combine a footer with checkbox input to allow users to apply an action to multiple items. - -```js -import React from 'react'; -import { Button } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; - -class SelectWithFooterCheckbox extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false, - selected: [], - numOptions: 3, - isLoading: false - }; - - this.toggleRef = React.createRef(); - - this.options = [ - , - , - , - , - - ]; - - this.onToggle = (_event, isOpen) => { - this.setState({ isOpen }); - }; - - this.onSelect = (event, selection) => { - this.setState({ selected: selection, isOpen: false }), console.log('selected: ', selection); - this.toggleRef.current.focus(); - }; - - this.onFilter = (_, textInput) => { - if (textInput === '') { - return this.options; - } else { - this.setState( - prevState => ({ selected: [...prevState.selected, selection] }), - () => console.log('selections: ', this.state.selected) - ); - } - }; - - this.clearSelection = () => { - this.setState({ - selected: [] - }); - }; - } - - render() { - const { isOpen, selected, isDisabled, direction, isToggleIcon } = this.state; - const titleId = 'title-id-footer-checkbox'; - return ( -
    - - -
    - ); - } -} -``` - -### Checkbox select with view more - -When a "view more" link is used alongside checkbox input, selections that users make prior to clicking "view more" are persisted after the click. - -```js -import React from 'react'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; - -class SelectViewMoreCheckbox extends React.Component { - constructor(props) { - super(props); - - this.state = { - isOpen: false, - selected: [], - numOptions: 3, - isLoading: false - }; - - this.options = [ - , - , - , - , - , - , - , - , - - ]; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, selection) => { - const { selected } = this.state; - if (selected.includes(selection)) { - this.setState( - prevState => ({ selected: prevState.selected.filter(item => item !== selection) }), - () => console.log('selections: ', this.state.selected) - ); - } else { - this.setState( - prevState => ({ selected: [...prevState.selected, selection] }), - () => console.log('selections: ', this.state.selected) - ); - } - }; - - this.clearSelection = () => { - this.setState({ - selected: [] - }); - }; - - this.simulateNetworkCall = callback => { - setTimeout(callback, 2000); - }; - - this.onViewMoreClick = () => { - // Set select loadingVariant to spinner then simulate network call before loading more options - this.setState({ isLoading: true }); - this.simulateNetworkCall(() => { - const newLength = - this.state.numOptions + 3 <= this.options.length ? this.state.numOptions + 3 : this.options.length; - this.setState({ numOptions: newLength, isLoading: false }); - }); - }; - } - - render() { - const { isOpen, selected, numOptions, isLoading } = this.state; - const titleId = 'view-more-checkbox-select-id'; - return ( -
    - - -
    - ); - } -} -``` - -### Filtering with placeholder text - -To preload a filter search bar with placeholder text, use the `inlineFilterPlaceholderText` property. The following example preloads the search bar with "Filter by status". - -```js -import React from 'react'; -import { Select, SelectOption, SelectGroup, SelectVariant } from '@patternfly/react-core/deprecated'; - -class FilteringCheckboxSelectInputWithPlaceholder extends React.Component { - constructor(props) { - super(props); - - this.state = { - isOpen: false, - selected: [] - }; - - this.options = [ - - - - - - - , - - - - - - ]; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, selection) => { - const { selected } = this.state; - if (selected.includes(selection)) { - this.setState( - prevState => ({ selected: prevState.selected.filter(item => item !== selection) }), - () => console.log('selections: ', this.state.selected) - ); - } else { - this.setState( - prevState => ({ selected: [...prevState.selected, selection] }), - () => console.log('selections: ', this.state.selected) - ); - } - }; - - this.onFilter = (_, textInput) => { - if (textInput === '') { - return this.options; - } else { - let filteredGroups = this.options - .map(group => { - let filteredGroup = React.cloneElement(group, { - children: group.props.children.filter(item => { - return item.props.value.toLowerCase().includes(textInput.toLowerCase()); - }) - }); - if (filteredGroup.props.children.length > 0) return filteredGroup; - }) - .filter(newGroup => newGroup); - return filteredGroups; - } - }; - - this.clearSelection = () => { - this.setState({ - selected: [] - }); - }; - } - - render() { - const { isOpen, selected, filteredOptions } = this.state; - const titleId = 'checkbox-filtering-with-placeholder-select-id'; - return ( -
    - - -
    - ); - } -} -``` - -### Inline filtering - -To allow users to filter select lists using text input, use the `hasInlineFilter` property. Filtering behavior can be further customized with other properties, as shown in the example below. Select each checkbox to visualize the following behavior: - -- To persist filter results on blur, use the `isInputValuePersisted` property. -- To persist a filter that a user has searched, use the `isInputFilterPersisted` property. -- To allow users to add new items to a select list, use the `isCreatable` property. When this property is applied and a user searches for an option that doesn't exist, they will be prompted to "create" the item. - -```js -import React from 'react'; -import { Checkbox } from '@patternfly/react-core'; -import { Select, SelectOption, SelectGroup, SelectVariant } from '@patternfly/react-core/deprecated'; - -class FilteringSingleSelectInput extends React.Component { - constructor(props) { - super(props); - - this.state = { - isOpen: false, - selected: '', - isCreatable: false, - isInputValuePersisted: false, - isInputFilterPersisted: false - }; - - this.options = [ - - - - - - - , - - - - - - ]; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, selection) => { - this.setState({ selected: selection, isOpen: false }), console.log('selected: ', selection); - }; - - this.onFilter = (_, textInput) => { - if (textInput === '') { - return this.options; - } else { - let filteredGroups = this.options - .map(group => { - let filteredGroup = React.cloneElement(group, { - children: group.props.children.filter(item => { - return item.props.value.toLowerCase().includes(textInput.toLowerCase()); - }) - }); - if (filteredGroup.props.children.length > 0) return filteredGroup; - }) - .filter(Boolean); - return filteredGroups; - } - }; - - this.toggleCreatable = (_, checked) => { - this.setState({ - isCreatable: checked - }); - }; - - this.toggleInputValuePersisted = (_, checked) => { - this.setState({ - isInputValuePersisted: checked - }); - }; - - this.toggleInputFilterPersisted = (_, checked) => { - this.setState({ - isInputFilterPersisted: checked - }); - }; - } - - render() { - const { - isOpen, - selected, - filteredOptions, - isInputValuePersisted, - isInputFilterPersisted, - isCreatable - } = this.state; - const titleId = 'single-filtering-select-id'; - return ( -
    - - - - - -
    - ); - } -} -``` - -### Typeahead - -Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user types in the text input, the select menu will provide suggestions by filtering the select options. - -To make a typeahead, pass `variant=typeahead` into the ` - {options.map((option, index) => ( - - ))} - - this.toggleDisabled(checked)} - aria-label="toggle disabled checkbox" - id="toggle-disabled-typeahead" - name="toggle-disabled-typeahead" - /> - this.toggleCreatable(checked)} - aria-label="toggle creatable checkbox" - id="toggle-creatable-typeahead" - name="toggle-creatable-typeahead" - /> - this.toggleCreateOptionOnTop(checked)} - aria-label="toggle createOptionOnTop checkbox" - id="toggle-create-option-on-top-typeahead" - name="toggle-create-option-on-top-typeahead" - /> - this.toggleCreateNew(checked)} - aria-label="toggle new checkbox" - id="toggle-new-typeahead" - name="toggle-new-typeahead" - /> - this.toggleInputValuePersisted(checked)} - aria-label="toggle input value persisted" - id="toggle-input-value-persisted" - name="toggle-input-value-persisted" - /> - this.toggleInputFilterPersisted(checked)} - aria-label="toggle input filter persisted" - id="toggle-input-filter-persisted" - name="toggle-input-filter-persisted" - /> - this.toggleResetOnSelect(checked)} - aria-label="toggle reset checkbox" - id="toggle-reset-typeahead" - name="toggle-reset-typeahead" - /> - - ); - } -} -``` - -### Grouped typeahead - -Typeahead matches items with user input across groups. - -```js -import React from 'react'; -import { Checkbox, Divider } from '@patternfly/react-core'; -import { Select, SelectGroup, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; - -class GroupedTypeaheadSelectInput extends React.Component { - constructor(props) { - super(props); - - this.state = { - options: [ - - - - - - - , - , - - - - - - ], - newOptions: [], - isOpen: false, - selected: null, - isCreatable: false, - hasOnCreateOption: false - }; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, selection, isPlaceholder) => { - if (isPlaceholder) this.clearSelection(); - else { - this.setState({ - selected: selection, - isOpen: false - }); - console.log('selected:', selection); - } - }; - - this.onCreateOption = newValue => { - this.setState({ - newOptions: [...this.state.newOptions, ] - }); - }; - - this.clearSelection = () => { - this.setState({ - selected: null, - isOpen: false - }); - }; - - this.toggleCreatable = checked => { - this.setState({ - isCreatable: checked - }); - }; - - this.toggleCreateNew = checked => { - this.setState({ - hasOnCreateOption: checked - }); - }; - } - - render() { - const { isOpen, selected, isDisabled, isCreatable, hasOnCreateOption, options, newOptions } = this.state; - const titleId = 'grouped-typeahead-select-id'; - const allOptions = - newOptions.length > 0 - ? options.concat( - - {newOptions} - - ) - : options; - return ( -
    - - - this.toggleCreatable(checked)} - aria-label="toggle creatable checkbox" - id="toggle-creatable-grouped-typeahead" - name="toggle-creatable-grouped-typeahead" - /> - this.toggleCreateNew(checked)} - aria-label="toggle new checkbox" - id="toggle-new-grouped-typeahead" - name="toggle-new-grouped-typeahead" - /> -
    - ); - } -} -``` - -### Typeahead with custom filtering - -You can add custom filtering to a select list to better fit needs that aren't covered by inline filtering. If you use custom filtering, use the `onFilter` property to trigger a callback with your custom filter implementation. - -```js -import React from 'react'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; - -class TypeaheadSelectInput extends React.Component { - constructor(props) { - super(props); - this.options = [ - , - , - , - , - , - - ]; - this.state = { - isOpen: false, - selected: null - }; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, selection, isPlaceholder) => { - if (isPlaceholder) this.clearSelection(); - else { - this.setState({ - selected: selection, - isOpen: false - }); - console.log('selected:', selection); - } - }; - - this.clearSelection = () => { - this.setState({ - selected: null, - isOpen: false - }); - }; - - this.customFilter = (_, value) => { - if (!value) { - return this.options; - } - - const input = new RegExp(value, 'i'); - return this.options.filter(child => input.test(child.props.value)); - }; - } - - render() { - const { isOpen, selected } = this.state; - const titleId = 'typeahead-select-id-2'; - return ( -
    - - -
    - ); - } -} -``` - -### Multiple typeahead - -To create a multiple typeahead select variant, pass `variant={SelectVariant.typeaheadMulti}` into the ` - {options.map((option, index) => ( - - ))} - - this.toggleCreatable(checked)} - aria-label="toggle creatable checkbox" - id="toggle-creatable-typeahead-multi" - name="toggle-creatable-typeahead-multi" - /> - this.toggleCreateNew(checked)} - aria-label="toggle new checkbox" - id="toggle-new-typeahead-multi" - name="toggle-new-typeahead-multi" - /> - - this.toggleResetOnSelect(checked)} - aria-label="toggle multi reset checkbox" - id="toggle-reset-multi-typeahead" - name="toggle-reset-multi-typeahead" - /> - - ); - } -} -``` - -### Multiple typeahead with custom chips - -To customize the appearance of chips, use the `chipGroupProps` property. The `numChips` property allows you to control the number of items shown, while the `expandedText` and `collapsedText` properties allow you to control the labels of the expansion and collapse chips. - -```js -import React from 'react'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; - -class MultiTypeaheadSelectInputWithChipGroupProps extends React.Component { - constructor(props) { - super(props); - - this.state = { - options: [ - { value: 'Alabama', disabled: false }, - { value: 'Florida', disabled: false }, - { value: 'New Jersey', disabled: false }, - { value: 'New Mexico', disabled: false, description: 'This is a description' }, - { value: 'New York', disabled: false }, - { value: 'North Carolina', disabled: false } - ], - isOpen: false, - selected: [] - }; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, selection) => { - const { selected } = this.state; - if (selected.includes(selection)) { - this.setState( - prevState => ({ selected: prevState.selected.filter(item => item !== selection) }), - () => console.log('selections: ', this.state.selected) - ); - } else { - this.setState( - prevState => ({ selected: [...prevState.selected, selection] }), - () => console.log('selections: ', this.state.selected) - ); - } - }; - - this.clearSelection = () => { - this.setState({ - selected: [], - isOpen: false - }); - }; - } - - render() { - const { isOpen, selected, isCreatable, hasOnCreateOption } = this.state; - const titleId = 'multi-typeahead-custom-chip-group-props-id-1'; - - return ( -
    - - -
    - ); - } -} -``` - -### Multiple typeahead with chip group - -To customize chips even more, render a [``](/components/chip-group) component and pass it into the `chipGroupComponent` property of the ` - {this.state.options.map((option, index) => ( - - ))} - - - ); - } -} -``` - -### Multiple typeahead with custom objects - -A `` can have an object passed into the `value` property in order to store additional data beyond just a string value. The object passed in must have a `toString` function that returns a string to display in the `SelectMenu`. - -```js -import React from 'react'; -import { Divider } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; - -class MultiTypeaheadSelectInputCustomObjects extends React.Component { - constructor(props) { - super(props); - this.createState = (name, abbreviation, capital, founded) => { - return { - name: name, - abbreviation: abbreviation, - capital: capital, - founded: founded, - toString: function() { - return `${this.name} (${this.abbreviation}) - Founded: ${this.founded}`; - }, - compareTo: function(value) { - return this.toString() - .toLowerCase() - .includes(value.toString().toLowerCase()); - } - }; - }; - this.options = [ - , - , - , - , - , - , - - ]; - - this.state = { - isOpen: false, - selected: [] - }; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, selection) => { - const { selected } = this.state; - if (selected.includes(selection)) { - this.setState( - prevState => ({ selected: prevState.selected.filter(item => item !== selection) }), - () => console.log('selections: ', this.state.selected) - ); - } else { - this.setState( - prevState => ({ selected: [...prevState.selected, selection] }), - () => console.log('selections: ', this.state.selected) - ); - } - }; - - this.clearSelection = () => { - this.setState({ - selected: [], - isOpen: false - }); - }; - } - - render() { - const { isOpen, selected } = this.state; - const titleId = 'multi-typeahead-select-id-2'; - - return ( -
    - - -
    - ); - } -} -``` - -### Plain multiple typeahead - -To plainly style a typeahead, use the `isPlain` property. - -```js -import React from 'react'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; - -class PlainSelectInput extends React.Component { - constructor(props) { - super(props); - this.options = [ - { value: 'Alabama', disabled: false }, - { value: 'Florida', disabled: false }, - { value: 'New Jersey', disabled: false }, - { value: 'New Mexico', disabled: false }, - { value: 'New York', disabled: false }, - { value: 'North Carolina', disabled: false } - ]; - - this.state = { - isOpen: false, - isPlain: true, - selected: [] - }; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.onSelect = (event, selection) => { - const { selected } = this.state; - if (selected.includes(selection)) { - this.setState( - prevState => ({ selected: prevState.selected.filter(item => item !== selection) }), - () => console.log('selections: ', this.state.selected) - ); - } else { - this.setState( - prevState => ({ selected: [...prevState.selected, selection] }), - () => console.log('selections: ', this.state.selected) - ); - } - }; - - this.clearSelection = () => { - this.setState({ - selected: [], - isOpen: false - }); - }; - } - - render() { - const { isOpen, isPlain, selected } = this.state; - const titleId = 'plain-typeahead-select-id'; - - return ( -
    - - -
    - ); - } -} -``` - -### Custom menu content - -To add custom menu content, use the `customContent` property. - -```js -import React from 'react'; -import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import { Checkbox } from '@patternfly/react-core'; -import { Select, SelectOption, SelectDirection } from '@patternfly/react-core/deprecated'; - -class SingleSelectInput extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false, - isDisabled: false, - direction: SelectDirection.down - }; - - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - - this.toggleDisabled = checked => { - this.setState({ - isDisabled: checked - }); - }; - - this.toggleDirection = () => { - if (this.state.direction === SelectDirection.up) { - this.setState({ - direction: SelectDirection.down - }); - } else { - this.setState({ - direction: SelectDirection.up - }); - } - }; - } - - render() { - const { isOpen, selected, isDisabled, direction } = this.state; - const titleId = 'title-id-2'; - return ( -
    - - document.body} - > - {this.bodyOptions} - - - - - - - ); - } -} -``` diff --git a/packages/react-core/src/deprecated/components/Select/index.ts b/packages/react-core/src/deprecated/components/Select/index.ts deleted file mode 100644 index dd66dd96b7c..00000000000 --- a/packages/react-core/src/deprecated/components/Select/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './Select'; -export * from './SelectGroup'; -export * from './SelectOption'; -export * from './selectConstants'; diff --git a/packages/react-core/src/deprecated/components/Select/selectConstants.tsx b/packages/react-core/src/deprecated/components/Select/selectConstants.tsx deleted file mode 100644 index c28136d4bc6..00000000000 --- a/packages/react-core/src/deprecated/components/Select/selectConstants.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import * as React from 'react'; -import { SelectOptionObject } from './SelectOption'; - -export interface SelectContextInterface { - onSelect: ( - event: React.MouseEvent | React.ChangeEvent, - value: string | SelectOptionObject, - isPlaceholder?: boolean - ) => void; - onClose: () => void; - onFavorite: (itemId: string, isFavorite: boolean) => void; - variant: string; - inputIdPrefix: string; - shouldResetOnSelect: boolean; -} - -export const SelectContext = React.createContext(null); - -export const SelectProvider = SelectContext.Provider; -export const SelectConsumer = SelectContext.Consumer; - -export enum SelectVariant { - single = 'single', - checkbox = 'checkbox', - typeahead = 'typeahead', - typeaheadMulti = 'typeaheadmulti' -} - -export enum SelectPosition { - right = 'right', - left = 'left' -} - -export enum SelectDirection { - up = 'up', - down = 'down' -} - -export const SelectFooterTabbableItems = 'input, button, select, textarea, a[href]'; diff --git a/packages/react-core/src/deprecated/components/index.ts b/packages/react-core/src/deprecated/components/index.ts index 63478ca481c..833cd9349dd 100644 --- a/packages/react-core/src/deprecated/components/index.ts +++ b/packages/react-core/src/deprecated/components/index.ts @@ -1,9 +1,3 @@ -export * from './ApplicationLauncher'; export * from './Chip'; -export * from './ContextSelector'; export * from './DragDrop'; -export * from './Dropdown'; -export * from './OptionsMenu'; -export * from './PageHeader'; -export * from './Select'; export * from './Wizard'; diff --git a/packages/react-core/src/helpers/favorites.ts b/packages/react-core/src/helpers/favorites.ts deleted file mode 100644 index da6bdeddc6c..00000000000 --- a/packages/react-core/src/helpers/favorites.ts +++ /dev/null @@ -1,81 +0,0 @@ -import * as React from 'react'; -import { ApplicationLauncherSeparator } from '../deprecated/components/ApplicationLauncher/ApplicationLauncherSeparator'; -import { Divider } from '../components/Divider/Divider'; - -/** - * This function is a helper for creating an array of renderable favorite items for the Application launcher or Select - * - * @param {object} items The items rendered in Select or Application aLauncher - * @param {boolean} isGrouped Flag indicating if items are grouped - * @param {any[]} favorites Array of ids of favorited items - * @param {boolean} isEnterTriggersArrowDown Flag indicating if we should add isEnterTriggersArrowDown to favorited item - */ -export const createRenderableFavorites = ( - items: object, - isGrouped: boolean, - favorites: any[], - isEnterTriggersArrowDown?: boolean -) => { - if (isGrouped) { - const favoriteItems: React.ReactNode[] = []; - (items as React.ReactElement[]).forEach((group) => { - if (favorites.length > 0) { - return ( - group.props.children && - (group.props.children as React.ReactElement[]) - .filter((item) => favorites.includes(item.props.id)) - .map((item) => { - if (isEnterTriggersArrowDown) { - return favoriteItems.push( - React.cloneElement(item, { - isFavorite: true, - enterTriggersArrowDown: isEnterTriggersArrowDown, - id: `favorite-${item.props.id}` - }) - ); - } else { - return favoriteItems.push( - React.cloneElement(item, { isFavorite: true, id: `favorite-${item.props.id}` }) - ); - } - }) - ); - } - }); - return favoriteItems; - } - return (items as React.ReactElement[]) - .filter((item) => favorites.includes(item.props.id)) - .map((item) => React.cloneElement(item, { isFavorite: true, enterTriggersArrowDown: isEnterTriggersArrowDown })); -}; - -/** - * This function is a helper for extending the array of renderable favorite with the select/application launcher items to render in the Application launcher or Select - * - * @param {object} items The items rendered in Select or Application aLauncher - * @param {boolean} isGrouped Flag indicating if items are grouped - * @param {any[]} favorites Array of ids of favorited items - */ -export const extendItemsWithFavorite = (items: object, isGrouped: boolean, favorites: any[]) => { - if (isGrouped) { - return (items as React.ReactElement[]).map((group) => - React.cloneElement(group, { - children: React.Children.map(group.props.children as React.ReactElement[], (item) => { - if (item.type === ApplicationLauncherSeparator || item.type === Divider) { - return item; - } - return React.cloneElement(item, { - isFavorite: favorites.some( - (favoriteId) => favoriteId === item.props.id || `favorite-${favoriteId}` === item.props.id - ) - }); - }) - }) - ); - } - return (items as React.ReactElement[]).map((item) => - React.cloneElement(item, { - isFavorite: favorites.some((favoriteId) => favoriteId === item.props.id) - }) - ); -}; diff --git a/packages/react-integration/cypress/integration/applicationlauncher.spec.ts b/packages/react-integration/cypress/integration/applicationlauncher.spec.ts deleted file mode 100644 index 32050d08ed9..00000000000 --- a/packages/react-integration/cypress/integration/applicationlauncher.spec.ts +++ /dev/null @@ -1,39 +0,0 @@ -describe('Application Launcher Favorites Demo Test', () => { - it('Navigate to demo section', () => { - cy.visit('http://localhost:3000/application-launcher-favorites-demo-nav-link'); - }); - - it('Verify application launcher button', () => { - cy.get('button').should('have.class', 'pf-v6-c-button pf-m-plain'); - }); - - it('Verify app launcher menu toggle', () => { - cy.get('#toggle-fav').click(); - cy.get('.pf-v6-c-app-launcher__menu ul').should('exist'); - cy.get('#toggle-fav').click(); - cy.get('.pf-v6-c-app-launcher__menu').should('not.exist'); - }); - - it('Verify application favorite works', () => { - cy.get('#toggle-fav').click(); - cy.get('#item-1 > .pf-m-action').click(); - cy.get('.pf-v6-c-app-launcher__menu .pf-v6-c-app-launcher__group :nth-child(1).pf-v6-c-app-launcher__group-title') - .first() - .contains('Favorites'); - }); - - it('Verify application un-favorite works', () => { - cy.get('#item-1 > .pf-m-action').first().click(); - cy.get('.pf-v6-c-app-launcher__menu .pf-v6-c-app-launcher__group :nth-child(1).pf-v6-c-app-launcher__group-title') - .first() - .contains('Favorites') - .should('not.exist'); - }); - - it('Verify application search/filter works', () => { - cy.get('.pf-v6-c-app-launcher__menu').find('li').should('have.length', 7); - cy.get('.pf-v6-c-app-launcher__menu-search input').type('button'); - cy.get('.pf-v6-c-app-launcher__menu').find('li').should('have.length', 3); - cy.get('#toggle-fav').click(); - }); -}); diff --git a/packages/react-integration/cypress/integration/contextselector.spec.ts b/packages/react-integration/cypress/integration/contextselector.spec.ts deleted file mode 100644 index eaff8fa742d..00000000000 --- a/packages/react-integration/cypress/integration/contextselector.spec.ts +++ /dev/null @@ -1,15 +0,0 @@ -describe('Context Selector Demo Test', () => { - it('Navigate to demo section', () => { - cy.visit('http://localhost:3000/context-selector-demo-nav-link'); - }); - - it('Verify toggle button works', () => { - cy.get('.pf-v6-c-context-selector__toggle').click(); - cy.get('.pf-v6-c-context-selector__menu').should('exist'); - }); - - it('Verify toggle text changes with selection', () => { - cy.get('.pf-v6-c-context-selector__menu-list-item').last().click(); - cy.get('.pf-v6-c-context-selector__toggle-text').contains('Azure 2'); - }); -}); diff --git a/packages/react-integration/cypress/integration/dropdowndeprecated.spec.ts b/packages/react-integration/cypress/integration/dropdowndeprecated.spec.ts deleted file mode 100644 index 9166c3486a3..00000000000 --- a/packages/react-integration/cypress/integration/dropdowndeprecated.spec.ts +++ /dev/null @@ -1,359 +0,0 @@ -describe('Dropdown Deprecated Demo Test', () => { - it('Navigate to demo section', () => { - cy.visit('http://localhost:3000/dropdown-deprecated-demo-nav-link'); - }); - - // Accessibility Tests: - // Mouse click opens panel - it('Verify dropdown menu expanded', () => { - cy.get('#dropdown > button').click(); - cy.get('#dropdown').should('have.class', 'pf-m-expanded'); - cy.get('#toggle-id').click(); - cy.get('#dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - it('Verify dropdown menu has alignment breakpoints', () => { - cy.get('#dropdown > button').click(); - cy.get('#dropdown').should('have.class', 'pf-m-expanded'); - const menu = cy.get('#dropdown .pf-v6-c-dropdown__menu'); - menu.should('have.class', 'pf-m-align-left-on-sm'); - menu.should('have.class', 'pf-m-align-right-on-md'); - menu.should('have.class', 'pf-m-align-left-on-lg'); - menu.should('have.class', 'pf-m-align-right-on-xl'); - menu.should('have.class', 'pf-m-align-left-on-2xl'); - cy.get('#toggle-id').click(); - cy.get('#dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - // When toggle is collapsed: - it('Enter opens panel, places focus on first element in panel that can receive focus', () => { - cy.clock(); - cy.get('#dropdown > button').trigger('keydown', { key: 'Enter' }); - cy.get('#dropdown').should('have.class', 'pf-m-expanded'); - cy.tick(1); - cy.focused().contains('Link'); - // When toggle is expanded, enter closes panel - cy.get('#toggle-id').trigger('keydown', { key: 'Enter' }); - cy.get('#dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - it('Space opens panel, places focus on first element in panel that can receive focus', () => { - cy.get('#dropdown > button').trigger('keydown', { key: ' ' }); - cy.get('#dropdown').should('have.class', 'pf-m-expanded'); - cy.focused().contains('Link'); - // When toggle is expanded, space closes panel and focus stays on the toggle - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { key: ' ' }); - cy.get('#dropdown').should('not.have.class', 'pf-m-expanded'); - cy.focused().contains('Dropdown'); - }); - - // Panel - Escape User action - it('Esc closes planel, places focus on the toggle', () => { - cy.get('#dropdown > button').click(); - cy.get('#toggle-id').type('{esc}'); - cy.get('#dropdown').should('not.have.class', 'pf-m-expanded'); - cy.focused().contains('Dropdown'); - }); - - it('Mouse click outside panel closes panel', () => { - cy.get('#dropdown > button').click(); - cy.get('main').click(0, 0, { force: true }); - cy.get('#dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - // Panel > Menu - Single-selection variant - it('Mouse click closes panel', () => { - cy.get('#dropdown > button').click(); - cy.get('#dropdown').find('button').first().click(); - cy.get('#dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - it('Enter closes the panel', () => { - cy.get('#dropdown > button').click(); - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { key: 'Enter' }); - cy.get('#dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - it('When focus is in panel, space places focus on toggle', () => { - cy.get('#dropdown > button').click(); - cy.get('.pf-v6-c-dropdown__menu').trigger('keydown', { key: ' ' }); - cy.focused().should('have.class', 'pf-v6-c-dropdown__toggle'); - }); - - // Panel > Menu > Menu Item - Managing focus - it('Tab closes panel, focus stays on toggle', () => { - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { key: 'Tab' }); - cy.get('.pf-v6-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded'); - cy.focused().contains('Dropdown'); - }); - - it('Shift + Tab closes panel, focus stays on toggle', () => { - cy.get('#dropdown > button').click(); - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { shiftKey: true, key: 'Tab' }); - cy.get('.pf-v6-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded'); - cy.focused().contains('Dropdown'); - }); -}); - -describe('Action Dropdown Demo Test', () => { - it('Navigate to demo section', () => { - cy.visit('http://localhost:3000/dropdown-deprecated-demo-nav-link'); - }); - - it('Verify toggle dropdown', () => { - cy.get('#action-toggle-id').should('have.class', 'pf-v6-c-dropdown__toggle-button'); - }); - - // Accessibility Tests: - // Mouse click opens panel - it('Verify dropdown menu expanded', () => { - cy.get('#action-dropdown button').last().click(); - cy.get('#action-dropdown').should('have.class', 'pf-m-expanded'); - cy.get('#action-toggle-id').click(); - cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - // When toggle is collapsed: - it('Enter opens panel, places focus on first element in panel that can receive focus', () => { - cy.clock(); - cy.get('#action-dropdown button').last().trigger('keydown', { key: 'Enter' }); - cy.get('#action-dropdown').should('have.class', 'pf-m-expanded'); - cy.tick(1); - cy.focused().contains('Action'); - // When toggle is expanded, enter closes panel - cy.get('#action-toggle-id').trigger('keydown', { key: 'Enter' }); - cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - it('Space opens panel, places focus on first element in panel that can receive focus', () => { - cy.get('#action-dropdown button').last().trigger('keydown', { key: ' ' }); - cy.get('#action-dropdown').should('have.class', 'pf-m-expanded'); - cy.focused().contains('Action'); - // When toggle is expanded, space closes panel and focus stays on the toggle - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { key: ' ' }); - cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - // Panel - Escape User action - it('Esc closes planel, places focus on the toggle', () => { - cy.get('#action-dropdown button').last().click(); - cy.get('#action-toggle-id').type('{esc}'); - cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - it('Mouse click outside panel closes panel', () => { - cy.get('#action-dropdown button').last().click(); - cy.get('main').click(0, 0, { force: true }); - cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - // Panel > Menu - Single-selection variant - it('Mouse click closes panel', () => { - cy.get('#action-dropdown button').last().click(); - cy.get('#action-dropdown').find('button').last().click(); - cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - it('Enter closes the panel', () => { - cy.get('#action-dropdown button').last().click(); - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { key: 'Enter' }); - cy.get('#action-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - it('When focus is in panel, space places focus on toggle', () => { - cy.get('#action-dropdown button').last().click(); - cy.get('.pf-v6-c-dropdown__menu').trigger('keydown', { key: ' ' }); - cy.focused().should('have.class', 'pf-v6-c-dropdown__toggle-button'); - }); - - // Panel > Menu > Menu Item - Managing focus - it('Tab closes panel, focus stays on toggle', () => { - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { key: 'Tab' }); - cy.get('.pf-v6-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded'); - }); - - it('Shift + Tab closes panel, focus stays on toggle', () => { - cy.get('#dropdown > button').click(); - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { shiftKey: true, key: 'Tab' }); - cy.get('.pf-v6-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded'); - }); -}); - -describe('Cog Dropdown Demo Test', () => { - it('Navigate to demo section', () => { - cy.visit('http://localhost:3000/dropdown-deprecated-demo-nav-link'); - }); - - it('Verify toggle dropdown', () => { - cy.get('#cog-toggle-id').should('have.class', 'pf-v6-c-dropdown__toggle-button'); - }); - - // Accessibility Tests: - // Mouse click opens panel - it('Verify dropdown menu expanded', () => { - cy.get('#cog-dropdown button').eq(1).click(); - cy.get('#cog-dropdown').should('have.class', 'pf-m-expanded'); - cy.get('#cog-toggle-id').click(); - cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - // When toggle is collapsed: - it('Enter opens panel, places focus on first element in panel that can receive focus', () => { - cy.clock(); - cy.get('#cog-dropdown button').last().trigger('keydown', { key: 'Enter' }); - cy.get('#cog-dropdown').should('have.class', 'pf-m-expanded'); - cy.tick(1); - cy.focused().contains('Action'); - // When toggle is expanded, enter closes panel - cy.get('#cog-toggle-id').trigger('keydown', { key: 'Enter' }); - cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - it('Space opens panel, places focus on first element in panel that can receive focus', () => { - cy.get('#cog-dropdown button').last().trigger('keydown', { key: ' ' }); - cy.get('#cog-dropdown').should('have.class', 'pf-m-expanded'); - cy.focused().contains('Action'); - // When toggle is expanded, space closes panel and focus stays on the toggle - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { key: ' ' }); - cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - // Panel - Escape User action - it('Esc closes planel, places focus on the toggle', () => { - cy.get('#cog-dropdown button').last().click(); - cy.get('#cog-toggle-id').type('{esc}'); - cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - it('Mouse click outside panel closes panel', () => { - cy.get('#cog-dropdown button').last().click(); - cy.get('main').click(0, 0, { force: true }); - cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - // Panel > Menu - Single-selection variant - it('Mouse click closes panel', () => { - cy.get('#cog-dropdown button').last().click(); - cy.get('#cog-dropdown').find('button').last().click(); - cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - it('Enter closes the panel', () => { - cy.get('#cog-dropdown button').last().click(); - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { key: 'Enter' }); - cy.get('#cog-dropdown').should('not.have.class', 'pf-m-expanded'); - }); - - it('When focus is in panel, space places focus on toggle', () => { - cy.get('#cog-dropdown button').last().click(); - cy.get('.pf-v6-c-dropdown__menu').trigger('keydown', { key: ' ' }); - cy.focused().should('have.class', 'pf-v6-c-dropdown__toggle-button'); - }); - - // Panel > Menu > Menu Item - Managing focus - it('Tab closes panel, focus stays on toggle', () => { - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { key: 'Tab' }); - cy.get('.pf-v6-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded'); - }); - - it('Shift + Tab closes panel, focus stays on toggle', () => { - cy.get('#dropdown > button').click(); - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { shiftKey: true, key: 'Tab' }); - cy.get('.pf-v6-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded'); - }); -}); - -describe('Dropdown with menu on document body demo test', () => { - it('Navigate to demo section', () => { - cy.visit('http://localhost:3000/dropdown-deprecated-demo-nav-link'); - }); - - it('Verify toggle dropdown', () => { - cy.get('#dropdown-document-body > button').should('have.class', 'pf-v6-c-dropdown__toggle'); - }); - - // Accessibility Tests: - // Mouse click opens panel - it('Verify dropdown menu expanded', () => { - cy.get('#dropdown-document-body > button').click(); - cy.get('#dropdown-document-body').should('have.class', 'pf-m-expanded'); - }); - - it('Verify dropdown menu is on document.body', () => { - cy.get('body .pf-v6-c-dropdown').should('exist'); - }); - - it('Verify dropdown menu closed', () => { - cy.get('#toggle-id-document-body').click(); - cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded'); - }); - - // When toggle is collapsed: - it('Enter opens panel, places focus on first element in panel that can receive focus', () => { - cy.clock(); - cy.get('#dropdown-document-body > button').trigger('keydown', { key: 'Enter' }); - cy.get('#dropdown-document-body').should('have.class', 'pf-m-expanded'); - cy.tick(1); - cy.focused().contains('Link'); - // When toggle is expanded, enter closes panel - cy.get('#toggle-id-document-body').trigger('keydown', { key: 'Enter' }); - cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded'); - }); - - it('Space opens panel, places focus on first element in panel that can receive focus', () => { - cy.get('#dropdown-document-body > button').trigger('keydown', { key: ' ' }); - cy.get('#dropdown-document-body').should('have.class', 'pf-m-expanded'); - cy.focused().contains('Link'); - // When toggle is expanded, space closes panel and focus stays on the toggle - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { key: ' ' }); - cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded'); - cy.focused().contains('Dropdown'); - }); - - // Panel - Escape User action - it('Esc closes planel, places focus on the toggle', () => { - cy.get('#dropdown-document-body > button').click(); - cy.get('#toggle-id-document-body').type('{esc}'); - cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded'); - cy.focused().contains('Dropdown'); - }); - - it('Mouse click outside panel closes panel', () => { - cy.get('#dropdown-document-body > button').click(); - cy.get('main').click(0, 0, { force: true }); - cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded'); - }); - - // Panel > Menu - Single-selection variant - it('Mouse click closes panel', () => { - cy.get('#dropdown-document-body > button').click(); - cy.get('#dropdown-document-body').find('button').first().click(); - cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded'); - }); - - it('Enter closes the panel', () => { - cy.get('#dropdown-document-body > button').click(); - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { key: 'Enter' }); - cy.get('#dropdown-document-body').should('not.have.class', 'pf-m-expanded'); - }); - - it('When focus is in panel, space places focus on toggle', () => { - cy.get('#dropdown-document-body > button').click(); - cy.get('.pf-v6-c-dropdown__menu').trigger('keydown', { key: ' ' }); - cy.focused().should('have.class', 'pf-v6-c-dropdown__toggle'); - }); - - // Panel > Menu > Menu Item - Managing focus - it('Tab closes panel, focus stays on toggle', () => { - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { key: 'Tab' }); - cy.get('.pf-v6-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded'); - cy.focused().contains('Dropdown'); - }); - - it('Shift + Tab closes panel, focus stays on toggle', () => { - cy.get('#dropdown > button').click(); - cy.get('.pf-v6-c-dropdown__menu-item').last().trigger('keydown', { shiftKey: true, key: 'Tab' }); - cy.get('.pf-v6-c-dropdown__toggle').last().should('not.have.class', 'pf-m-expanded'); - cy.focused().contains('Dropdown'); - }); -}); diff --git a/packages/react-integration/cypress/integration/form.spec.ts b/packages/react-integration/cypress/integration/form.spec.ts index b7bf9ed8a60..6d2e9ce086d 100644 --- a/packages/react-integration/cypress/integration/form.spec.ts +++ b/packages/react-integration/cypress/integration/form.spec.ts @@ -1,4 +1,4 @@ -describe('Form Demo Test', () => { +xdescribe('Form Demo Test', () => { it('Navigate to demo section', () => { cy.visit('http://localhost:3000/form-demo-nav-link'); }); diff --git a/packages/react-integration/cypress/integration/labelgroupeditable.spec.ts b/packages/react-integration/cypress/integration/labelgroupeditable.spec.ts index c44e11d1882..3f1773b987f 100644 --- a/packages/react-integration/cypress/integration/labelgroupeditable.spec.ts +++ b/packages/react-integration/cypress/integration/labelgroupeditable.spec.ts @@ -21,7 +21,7 @@ describe('Label Group Editable Demo Test', () => { cy.get('#editable-label-3') .closest('.pf-v6-c-label') .should('have.class', 'pf-v6-c-label pf-m-blue pf-m-filled pf-m-editable pf-m-editable-active'); - cy.get('.pf-v6-c-page__header').click(); + cy.get('.pf-v6-c-page__main-container').click(); cy.get('#editable-label-3') .closest('.pf-v6-c-label') .should('have.class', 'pf-v6-c-label pf-m-blue pf-m-filled pf-m-editable'); diff --git a/packages/react-integration/cypress/integration/optionsmenu.spec.ts b/packages/react-integration/cypress/integration/optionsmenu.spec.ts deleted file mode 100644 index 43f33d8fb82..00000000000 --- a/packages/react-integration/cypress/integration/optionsmenu.spec.ts +++ /dev/null @@ -1,57 +0,0 @@ -describe('Login Page Demo Test', () => { - it('Navigate to OptionsMenu section', () => { - cy.visit('http://localhost:3000/options-menu-demo-nav-link'); - }); - - it('Verify initial state', () => { - cy.get('#options-menu-single-option-example') - .find('.pf-v6-c-options-menu__toggle-text') - .then((toggleText) => expect(toggleText.text()).to.equal('Options menu')); - cy.get('#options-menu-single-option-example').find('.pf-v6-c-options-menu__toggle-icon').should('exist'); - cy.get('#options-menu-single-option-example.pf-m-expanded').should('not.exist'); - - cy.get('#options-menu-modified-example.pf-m-top.pf-m-align-right').should('exist'); - cy.get('#options-menu-modified-example').find('.pf-v6-c-options-menu__toggle.pf-m-text.pf-m-plain').should('exist'); - cy.get('#options-menu-modified-example') - .find('.pf-v6-c-options-menu__toggle-text') - .then((toggleText) => expect(toggleText.text()).to.equal('Custom text')); - cy.get('#options-menu-modified-example.pf-m-expanded').should('not.exist'); - }); - - it('Verify event handlers fire correctly', () => { - cy.get('#options-menu-single-option-example') - .find('.pf-v6-c-options-menu__toggle') - .then((toggleButton: JQuery) => { - cy.wrap(toggleButton).click(); - cy.get('#options-menu-single-option-example.pf-m-expanded').should('exist'); - cy.get('#singleOption2').then((secondMenuItem: JQuery) => { - cy.wrap(secondMenuItem).click(); - cy.get('#singleOption2') - .find('.pf-v6-c-options-menu__menu-item-icon') - .then((secondMenuItemIcon) => expect(secondMenuItemIcon).to.be.visible); - cy.get('#singleOption1 .pf-v6-c-options-menu__menu-item-icon').should('not.exist'); - }); - cy.wrap(toggleButton).click(); - cy.get('#options-menu-single-option-example.pf-m-expanded').should('not.exist'); - }); - - cy.get('#options-menu-modified-example') - .find('.pf-v6-c-options-menu__toggle-button') - .then((toggleButton: JQuery) => { - cy.wrap(toggleButton).click(); - cy.get('#options-menu-modified-example.pf-m-expanded').should('exist'); - cy.wrap(toggleButton).click(); - cy.get('#options-menu-modified-example.pf-m-expanded').should('not.exist'); - // Accessibility Tests: - // Press Enter to open the menu - cy.wrap(toggleButton).trigger('keydown', { key: 'Enter' }); - cy.get('#options-menu-modified-example.pf-m-expanded').should('exist'); - // Check whether on focus of the first item - cy.get('.pf-v6-c-options-menu__menu-item').first().should('be.focused'); - }); - }); - - it('Verify disabled options menu', () => { - cy.get('#options-menu-modified-disabled').find('.pf-v6-c-options-menu__toggle').should('be.disabled'); - }); -}); diff --git a/packages/react-integration/cypress/integration/page.spec.ts b/packages/react-integration/cypress/integration/page.spec.ts index b927fbf969c..454edfd1aed 100644 --- a/packages/react-integration/cypress/integration/page.spec.ts +++ b/packages/react-integration/cypress/integration/page.spec.ts @@ -3,7 +3,7 @@ describe('Page Demo Test', () => { cy.visit('http://localhost:3000/page-demo-nav-link'); }); - it('Test Page elements', () => { + xit('Test Page elements', () => { cy.get('#page-demo').within(() => { cy.get('#nav-toggle').then((hamburgerIcon: JQuery) => { cy.get('.pf-v6-c-page__sidebar.pf-m-expanded').should('exist'); diff --git a/packages/react-integration/cypress/integration/select.spec.ts b/packages/react-integration/cypress/integration/select.spec.ts deleted file mode 100644 index fd44180e528..00000000000 --- a/packages/react-integration/cypress/integration/select.spec.ts +++ /dev/null @@ -1,234 +0,0 @@ -describe('Select Test', () => { - it('Navigate to demo section', () => { - cy.visit('http://localhost:3000/select-demo-nav-link'); - }); - - it('Verify Select with Divider', () => { - cy.get('#single-select-with-divider').click(); - cy.get('#Miss > .pf-v6-c-select__menu-item').click(); - cy.get('#single-select-with-divider').contains('Miss').should('exist'); - - cy.get('#single-select-with-divider').click(); - cy.get('#Mr > .pf-v6-c-select__menu-item').click(); - cy.get('#single-select-with-divider').contains('Mr').should('exist'); - }); - - it('Verify Typeahead Select with labels', () => { - const find = (selector: string) => cy.get('#typeahead-select-labels-id').parent().find(selector); - find('button.pf-v6-c-select__toggle-button').click(); - find('li:nth-child(3) button').click(); - find('#typeahead-select-label-select-typeahead').should('have.value', 'Florida'); - find('button.pf-v6-c-select__toggle-clear:first').click(); - find('#typeahead-select-label-select-typeahead').should('have.value', ''); - cy.get('#button-typeahead-labels').click(); - find('#typeahead-select-label-select-typeahead').should('have.value', 'New York'); - find('button.pf-v6-c-select__toggle-clear:first').click(); - find('#typeahead-select-label-select-typeahead').should('have.value', ''); - }); - - it('Verify Single Select', () => { - cy.get('#single-select').click(); - cy.get('#Miss > .pf-v6-c-select__menu-item').click(); - cy.get('#single-select').contains('Miss').should('exist'); - }); - - it('Verify Single Select closes on escape with internal ref', () => { - cy.get('#single-select').click().type('{esc}'); - cy.focused().should('have.id', 'single-select'); - }); - - it('Verify Single Select closes on escape with passed ref', () => { - cy.get('#single-ref-select').click().type('{esc}'); - cy.focused().should('have.id', 'single-ref-select'); - }); - - it.skip('Verify Description Select', () => { - cy.get('#single-select-with-descriptions').click(); - cy.get('.pf-v6-c-select__menu-footer').should('exist'); - cy.get('#Miss > .pf-v6-c-select__menu-item > .pf-v6-c-select__menu-item-description').click(); - cy.get('#single-select-with-descriptions').contains('Miss').should('exist'); - }); - - it('Verify Disabled Single Select', () => { - cy.get('#disabled-single-select').should('be.disabled'); - }); - - it('Verify Custom Single Select', () => { - cy.get('#custom-select').click(); - cy.get('#Miss > .pf-v6-c-select__menu-item').click(); - cy.get('#custom-select').contains('text-Miss').should('exist'); - }); - - it('Verify Typeahead Select', () => { - const find = (selector: string) => cy.get('#typeahead-select-id').parent().find(selector); - find('button.pf-v6-c-select__toggle-button').click(); - find( - '#Alabama > .pf-v6-c-select__menu-item > .pf-v6-c-select__menu-item-row > .pf-v6-c-select__menu-item-count' - ).should('exist'); - find('li:nth-child(3) button').click(); - find('#typeahead-select-select-typeahead').should('have.value', 'Florida'); - find('button.pf-v6-c-select__toggle-clear:first').click(); - find('#typeahead-select-select-typeahead').should('have.value', ''); - }); - - it('Verify Typeahead Select updates after disabled state change', () => { - const find = (selector: string) => cy.get('#typeahead-select-id').parent().find(selector); - find('button.pf-v6-c-select__toggle-button').click(); - find('#Alabama button').should('not.be.disabled'); - find('button.pf-v6-c-select__toggle-button').click(); - cy.get('#disabled-toggle-btn').click(); - find('button.pf-v6-c-select__toggle-button').click(); - find('#Alabama button').should('have.class', 'pf-m-disabled'); - }); - - it('Verify Non-Creatable Typeahead selection', () => { - const find = (selector: string) => cy.get('#typeahead-select-id').parent().find(selector); - find('#typeahead-select').click(); - find('#typeahead-select-select-typeahead').should('have.value', ''); - find('input:nth-child(1)').type('Flo'); - find('#typeahead-select-select-typeahead').should('have.value', 'Flo'); - find('#typeahead-select-select-typeahead').type('{downArrow}'); - find('#typeahead-select-select-typeahead').trigger('keydown', { key: 'Enter' }); - find('#typeahead-select-select-typeahead').should('have.value', 'Florida'); - find('button.pf-v6-c-select__toggle-clear:first').click(); - find('#typeahead-select-select-typeahead').should('have.value', ''); - }); - - it('Verify Non-Creatable Typeahead selection which does not exist', () => { - const find = (selector: string) => cy.get('#typeahead-select-id').parent().find(selector); - find('#typeahead-select').click(); - find('#typeahead-select-select-typeahead').should('have.value', ''); - find('input:nth-child(1)').type('Unknown'); - find('#typeahead-select-select-typeahead').should('have.value', 'Unknown'); - find('#typeahead-select-select-typeahead').type('{esc}'); - find('#typeahead-select-select-typeahead').should('have.value', ''); - }); - - it('Verify isInputValuePersisted works', () => { - const find = (selector: string) => cy.get('#typeahead-select-id').parent().find(selector); - find('#typeahead-select-select-typeahead').type('zzz'); - cy.get('.pf-v6-c-title').eq(0).click(); - find('#typeahead-select-select-typeahead').should('have.value', ''); - cy.get('#toggle-input-value-persisted').click(); - find('#typeahead-select-select-typeahead').type('zzz'); - cy.get('.pf-v6-c-title').eq(0).click(); - find('#typeahead-select-select-typeahead').should('have.value', 'zzz'); - }); - - xit('Verify Creatable Typeahead Select', () => { - cy.get('#toggle-creatable-typeahead').click(); - cy.get('#toggle-new-typeahead').click(); - cy.get('#typeahead-select').click(); - cy.get(':nth-child(5) > :nth-child(2) > .pf-v6-c-select > .pf-v6-c-select__toggle input').type('Al'); - cy.get('#Al-1').click(); - cy.get('#select-typeahead').should('have.value', 'Al'); - cy.get('#typeahead-select').click(); - cy.get('#Al-5').should('exist'); - cy.get('button.pf-v6-c-select__toggle-clear').click(); - }); - - xit('Verify Typeahead Multi Select', () => { - cy.get('#typeahead-multi-select').click(); - cy.get('#Florida-2').click(); - cy.get('.pf-v6-c-label').contains('Florida').should('exist'); - cy.get('#Alabama-0').click(); - cy.get('#Boston-1').click(); - cy.get('#Texas-4').click(); - cy.get('.pf-m-overflow > .pf-v6-c-button').should('exist'); - cy.get('#Florida-2').click(); - cy.get('.pf-v6-c-label').contains('Alabama').should('exist'); - cy.get('.pf-m-overflow > .pf-v6-c-button').should('not.exist'); - cy.get('#Florida-2').click(); - cy.get('.pf-m-overflow > .pf-v6-c-button').should('exist'); - cy.get('.pf-m-overflow > .pf-v6-c-button').click(); - cy.get('.pf-v6-c-label').contains('Florida').should('exist'); - cy.get('.pf-v6-c-label').contains('Alabama').should('exist'); - cy.get('.pf-v6-c-label').contains('.pf-v6-c-label', 'Florida').children('button').click(); - cy.get('.pf-v6-c-label').contains('Florida').should('not.exist'); - cy.get('button.pf-v6-c-select__toggle-clear').click(); - cy.get('.pf-v6-c-label').should('not.exist'); - }); - - it('Verify false value of shouldResetOnSelect will not clear typeahead input after selection', () => { - cy.get('#typeahead-multi-select').click(); - cy.get('#typeahead-multi-select-select-multi-typeahead-typeahead').should('contain.value', ''); - cy.get('#typeahead-multi-select-select-multi-typeahead-typeahead').type('Florida'); - cy.get('#Florida').click(); - cy.get('.pf-v6-c-label').contains('Florida').should('exist'); - cy.get('#typeahead-multi-select-select-multi-typeahead-typeahead').should('contain.value', 'Florida'); - }); - - xit('Verify Custom Typeahead Multi Select', () => { - cy.get('#custom-typeahead-multi-select').click(); - cy.get('#Florida-2').click(); - cy.get('.pf-v6-c-label').contains('div-Florida-test_span').should('exist'); - cy.get('#Alabama-0').click(); - cy.get('#Boston-1').click(); - cy.get('#Texas-4').click(); - cy.get('button.pf-v6-c-select__toggle-clear').should('exist'); - cy.get('#Florida-2').click(); - cy.get('.pf-v6-c-label').contains('div-Alabama-test_span').should('exist'); - cy.get('.pf-m-overflow > .pf-v6-c-button').should('not.exist'); - cy.get('button.pf-v6-c-select__toggle-clear').click(); - }); - - xit('Verify Custom Typeahead Plain Multi Select', () => { - cy.get('#custom-typeahead-plain-multi-select').click(); - cy.get('#Florida-2').click(); - cy.get('.pf-v6-c-label').contains('div-Florida-test_span').should('exist'); - cy.get('#Alabama-0').click(); - cy.get('#Boston-1').click(); - cy.get('#Texas-4').click(); - cy.get('button.pf-v6-c-select__toggle-clear').should('exist'); - cy.get('#Florida-2').click(); - cy.get('.pf-v6-c-label').contains('div-Alabama-test_span').should('exist'); - cy.get('.pf-m-overflow > .pf-v6-c-button').should('not.exist'); - }); - - it('Verify Checkbox Select', () => { - cy.get('#check-select').click(); - cy.get('.pf-v6-c-divider').should('exist'); - cy.get('input#Cancelled').click(); - cy.get('#check-select').contains('1').should('exist'); - cy.get('#check-select .pf-v6-c-select__toggle-badge').should('exist'); - cy.get('input#Paused').click(); - cy.get('#check-select').contains('2').should('exist'); - cy.get('#check-select').click(); - cy.get('.pf-v6-c-select__menu').should('not.exist'); - }); - - it('Verify No Badge Checkbox Select', () => { - cy.get('#check-select-no-badge').click(); - cy.get('input#Cancelled').click(); - cy.get('#check-select-no-badge .pf-v6-c-select__toggle-badge').should('not.exist'); - }); - - it('Verify Typeahead Select inside Form', () => { - cy.get('#form-typeahead-button').click(); - cy.url().should('match', /select-demo-nav-link/); - }); - - it('Verify Checkbox Select on document body', () => { - cy.get('#select-document-body-toggle').click(); - cy.get('input#Active').click(); - cy.get('#select-document-body-toggle').contains('1').should('exist'); - cy.get('#select-document-body-toggle .pf-v6-c-select__toggle-badge').should('exist'); - cy.get('input#Cancelled').click(); - cy.get('#select-document-body-toggle').contains('2').should('exist'); - cy.get('#select-document-body-toggle').click(); - cy.get('.pf-v6-c-select__menu').should('not.exist'); - }); - - it('Verify click on footer with menuAppendTo will not close select', () => { - cy.get('#menuappend-toggle').click(); - cy.get('#footer-btn').click(); - cy.get('#Miss > .pf-v6-c-select__menu-item').should('exist'); - cy.get('#Miss > .pf-v6-c-select__menu-item').click(); - cy.get('#menuappend-toggle').contains('Miss').should('exist'); - }); - - it('Verify focus is placed on first non-disabled option with keyboard', () => { - cy.get('#disabled-first-item-single-select').trigger('keydown', { key: 'Enter' }); - cy.get('#first-item-disabled-select-opt-2 button').should('have.focus'); - }); -}); diff --git a/packages/react-integration/cypress/integration/selectfavorites.spec.ts b/packages/react-integration/cypress/integration/selectfavorites.spec.ts deleted file mode 100644 index 1d0ff825e01..00000000000 --- a/packages/react-integration/cypress/integration/selectfavorites.spec.ts +++ /dev/null @@ -1,76 +0,0 @@ -describe('Select Test', () => { - it('Navigate to demo section', () => { - cy.visit('http://localhost:3000/select-favorites-demo-nav-link'); - }); - - it('Verify Single Select with Favorites', () => { - cy.get('#favorites-select').click(); - cy.get('.pf-v6-c-select__menu-group-title').should('not.exist'); - cy.get('#option-1 > .pf-m-action').should('have.attr', 'aria-label', 'custom not starred'); - cy.get('#option-1 > .pf-m-action').click(); - cy.get('.pf-v6-c-select__menu-group-title').should('exist'); - cy.get('#option-1 > .pf-m-action').should('have.attr', 'aria-label', 'custom starred'); - cy.get('#option-1 > .pf-m-action').first().click(); - cy.get('#Favorites').should('not.exist'); - // toggle closed - cy.get('#favorites-select').click(); - }); - - it('Verify Single Grouped Select with Favorites', () => { - cy.get('#favorites-select-grouped').click(); - cy.get('#My-Favorites').should('not.exist'); - cy.get('#option-grouped-1 > .pf-m-action').should('have.attr', 'aria-label', 'not starred'); - cy.get('#option-grouped-1 > .pf-m-action').click(); - cy.get('#My-Favorites').should('exist'); - cy.get('#option-grouped-1 > .pf-m-action').should('have.attr', 'aria-label', 'starred'); - cy.get('#option-grouped-1 > .pf-m-action').first().click(); - cy.get('#My-Favorites').should('not.exist'); - // toggle closed - cy.get('#favorites-select-grouped').click(); - }); - - it('Verify Typeahead Select with Favorites', () => { - cy.get('#typeahead-select').click(); - cy.get('.pf-v6-c-select__menu-group-title').should('not.exist'); - cy.get('#typeahead-select-select-typeahead').should('have.value', ''); - // Verify selections work - cy.get('#down-option').click(); - cy.get('#typeahead-select-select-typeahead').should('have.value', 'Down'); - cy.get('#typeahead-select').click(); - // click on Running so it is added to favorites - cy.get('#running-option > .pf-m-action').click(); - cy.get('.pf-v6-c-select__menu-group-title').should('exist'); - // filter so that Running is removed and favorites section therefore removed - cy.get('#typeahead-select-select-typeahead').type('h'); - cy.get('.pf-v6-c-select__menu-group-title').should('not.exist'); - // Clear filter so Favorites shows again - cy.get('#typeahead-select-select-typeahead').clear(); - cy.get('.pf-v6-c-select__menu-group-title').should('exist'); - cy.get('#running-option > .pf-m-action').first().click(); - cy.get('#Favorites').should('not.exist'); - // toggle closed - cy.get('#typeahead-select').click(); - }); - - it('Verify Multi Typeahead Select with Favorites', () => { - cy.get('#typeahead-multi-select').click(); - cy.get('.pf-v6-c-select__menu-group-title').should('not.exist'); - cy.get('#typeahead-multi-select-select-multi-typeahead-typeahead').should('have.value', ''); - // Verify selections work - cy.get('#grapes-option').click(); - cy.get('.pf-v6-c-label').contains('grapes').should('exist'); - cy.get('#pears-option').click(); - cy.get('.pf-v6-c-label').contains('pears').should('exist'); - // click on apples so it is added to favorites - cy.get('#apples-option > .pf-m-action').click(); - cy.get('.pf-v6-c-select__menu-group-title').should('exist'); - // filter so that apples is removed and favorites section therefore removed - cy.get('#typeahead-multi-select-select-multi-typeahead-typeahead').type('h'); - cy.get('.pf-v6-c-select__menu-group-title').should('not.exist'); - // Clear filter so Favorites shows again - cy.get('#typeahead-multi-select-select-multi-typeahead-typeahead').clear(); - cy.get('.pf-v6-c-select__menu-group-title').should('exist'); - cy.get('#apples-option > .pf-m-action').first().click(); - cy.get('.pf-v6-c-select__menu-group-title').should('not.exist'); - }); -}); diff --git a/packages/react-integration/cypress/integration/selectfiltering.spec.ts b/packages/react-integration/cypress/integration/selectfiltering.spec.ts deleted file mode 100644 index e55092f7a83..00000000000 --- a/packages/react-integration/cypress/integration/selectfiltering.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -function checkFiltering() { - cy.get('.pf-v6-c-form-control').type('run'); - cy.get('#Running').should('exist'); - cy.get('#Hewlett-Packard').should('not.exist'); - cy.get('.pf-v6-c-form-control').type('{backspace}{backspace}{backspace}degr'); - cy.get('#Running').should('not.exist'); - cy.get('#Degraded').should('exist'); - cy.get('#Degraded').click(); - cy.get('#filter-select').click(); -} - -describe('Select with Filtering Test', () => { - it('Navigate to demo section', () => { - cy.visit('http://localhost:3000/select-demo-filtering-nav-link'); - }); - - it('Verify Checkbox Select with filtering chips', () => { - cy.get('#filter-select').click(); - cy.get('#Running').click(); - cy.get('.pf-v6-c-select__toggle').contains('1').should('exist'); - }); - it('Verify Checkbox Select with filtering works', () => { - checkFiltering(); - cy.get('.pf-v6-c-select__toggle').contains('2').should('exist'); - }); - - it('Verify Single Select with filtering works', () => { - cy.get('#single-toggle').click(); - cy.get('#filter-select').click(); - checkFiltering(); - }); -}); diff --git a/packages/react-integration/cypress/integration/selectinmodal.spec.ts b/packages/react-integration/cypress/integration/selectinmodal.spec.ts deleted file mode 100644 index 5c8ab0c7bd2..00000000000 --- a/packages/react-integration/cypress/integration/selectinmodal.spec.ts +++ /dev/null @@ -1,36 +0,0 @@ -describe('Select in modal Test', () => { - it('Navigate to Select in Modal section', () => { - cy.visit('http://localhost:3000/select-in-modal-demo-nav-link'); - }); - - it('Verify Escape Press closes menus before modal', () => { - cy.get('#modal-for-select-in-modal').then((modalButton: JQuery) => { - cy.wrap(modalButton).click(); - - cy.get('.pf-v6-c-page').then(() => { - cy.get('.pf-v6-c-modal-box') - .then(() => { - cy.get('#select-in-modal-select').then((selectToggle) => { - cy.wrap(selectToggle).click(); - cy.get('.pf-v6-c-select .pf-v6-c-select__menu').should('exist'); - cy.get('body').type('{esc}'); - cy.get('.pf-v6-c-modal-box').should('exist'); - cy.get('.pf-v6-c-select .pf-v6-c-select__menu').should('not.exist'); - }); - cy.get('#select-in-modal-time-picker-input').then((timePicker) => { - cy.wrap(timePicker).click(); - cy.get('.pf-v6-c-menu.pf-m-scrollable').should('exist'); - cy.get('body').type('{esc}'); - cy.get('.pf-v6-c-modal-box').should('exist'); - cy.get('.pf-v6-c-menu.pf-m-scrollable').should('not.exist'); - }); - }) - .then(() => { - cy.get('.pf-v6-c-modal-box').should('exist'); - cy.get('body').type('{esc}'); - cy.get('.pf-v6-c-modal-box').should('not.exist'); - }); - }); - }); - }); -}); diff --git a/packages/react-integration/cypress/integration/selecttypeaheadgroupedviewmore.spec.ts b/packages/react-integration/cypress/integration/selecttypeaheadgroupedviewmore.spec.ts deleted file mode 100644 index ae1d77731de..00000000000 --- a/packages/react-integration/cypress/integration/selecttypeaheadgroupedviewmore.spec.ts +++ /dev/null @@ -1,18 +0,0 @@ -describe('Select Test', () => { - it('Navigate to demo section', () => { - cy.visit('http://localhost:3000/select-view-more-typeahead-grouped-demo-nav-link'); - }); - - it('Verify Select with view more button', () => { - cy.clock(); - cy.get('#view-more-typeahead-select').click(); - cy.get('.pf-v6-c-select__menu').contains('View more'); - cy.get('.pf-m-load').should('exist'); - cy.get('button.pf-v6-c-select__menu-item.pf-m-load').click(); - cy.get('.pf-m-loading').should('exist'); - cy.tick(16000); - cy.get('.pf-m-load').should('not.exist'); - cy.get('.pf-m-loading').should('not.exist'); - cy.get('#view-more-typeahead-select').click(); - }); -}); diff --git a/packages/react-integration/cypress/integration/selectvalidated.spec.ts b/packages/react-integration/cypress/integration/selectvalidated.spec.ts deleted file mode 100644 index e8df90c6d59..00000000000 --- a/packages/react-integration/cypress/integration/selectvalidated.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -describe('Select Test', () => { - it('Navigate to demo section', () => { - cy.visit('http://localhost:3000/select-validated-demo-nav-link'); - }); - - it('Verify Validated Select', () => { - cy.get('#select-validated-demo .pf-v6-c-select').should('not.have.class', 'pf-m-invalid'); - cy.get('#select-validated-demo .pf-v6-c-select').should('not.have.class', 'pf-m-success'); - cy.get('#select-validated-demo .pf-v6-c-select').should('not.have.class', 'pf-m-warning'); - cy.get('#validated-select').click(); - cy.get('#Miss > .pf-v6-c-select__menu-item').click(); - cy.get('#select-validated-demo .pf-v6-c-select').should('have.class', 'pf-m-success'); - cy.get('#validated-helper').contains('success'); - cy.get('#validated-select').click(); - cy.get('#Choose\\.\\.\\. > .pf-v6-c-select__menu-item').click(); - cy.get('#select-validated-demo .pf-v6-c-select:first').should('have.class', 'pf-m-invalid'); - cy.get('#validated-helper').contains('error'); - cy.get('#validated-select').click(); - cy.get('#Other > .pf-v6-c-select__menu-item').click(); - cy.get('#select-validated-demo .pf-v6-c-select:first').should('have.class', 'pf-m-warning'); - cy.get('#validated-helper').contains('warning'); - }); -}); diff --git a/packages/react-integration/cypress/integration/selectviewmore.spec.ts b/packages/react-integration/cypress/integration/selectviewmore.spec.ts deleted file mode 100644 index f81166f7b79..00000000000 --- a/packages/react-integration/cypress/integration/selectviewmore.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -describe('Select Test', () => { - it('Navigate to demo section', () => { - cy.visit('http://localhost:3000/select-view-more-demo-nav-link'); - }); - - it('Verify Select with view more button', () => { - cy.clock(); - cy.get('#view-more-select').click(); - cy.get('.pf-v6-c-select__menu').contains('View more'); - cy.get('.pf-m-load').should('exist'); - cy.get('button.pf-v6-c-select__menu-item.pf-m-load').click(); - cy.get('.pf-m-loading').should('exist'); - cy.tick(16000); - cy.get('.pf-m-load').should('exist'); - cy.get('.pf-m-loading').should('not.exist'); - cy.get('#view-more-select').click(); - }); - - it('Verify Select with view more button checkboxes', () => { - cy.clock(); - cy.get('#view-more-select-check').click(); - cy.get('.pf-v6-c-select__menu').contains('View more'); - cy.get('.pf-m-load').should('exist'); - cy.get('button.pf-v6-c-select__menu-item.pf-m-load').click(); - cy.get('.pf-m-loading').should('exist'); - cy.tick(16000); - cy.get('.pf-m-load').should('exist'); - cy.get('.pf-m-loading').should('not.exist'); - }); -}); diff --git a/packages/react-integration/cypress/integration/selectviewmoregrouped.spec.ts b/packages/react-integration/cypress/integration/selectviewmoregrouped.spec.ts deleted file mode 100644 index 8edf822209c..00000000000 --- a/packages/react-integration/cypress/integration/selectviewmoregrouped.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -describe('Select Test', () => { - it('Navigate to demo section', () => { - cy.visit('http://localhost:3000/select-view-more-grouped-demo-nav-link'); - }); - - it('Verify grouped Select with view more button', () => { - cy.clock(); - cy.get('#view-more-grouped-select').click(); - cy.get('.pf-v6-c-select__menu').contains('View more'); - cy.get('.pf-m-load').should('exist'); - cy.get('button.pf-v6-c-select__menu-item.pf-m-load').click(); - cy.get('.pf-m-loading').should('exist'); - cy.tick(16000); - cy.get('.pf-m-load').should('not.exist'); - cy.get('.pf-m-loading').should('not.exist'); - cy.get('#view-more-grouped-select').click(); - }); - - it('Verify grouped Check Select with view more button', () => { - cy.clock(); - cy.get('#view-more-grouped-select-check').click(); - cy.get('.pf-v6-c-select__menu').contains('View more'); - cy.get('.pf-m-load').should('exist'); - cy.get('button.pf-v6-c-select__menu-item.pf-m-load').click(); - cy.get('.pf-m-loading').should('exist'); - cy.tick(16000); - cy.get('.pf-m-load').should('not.exist'); - cy.get('.pf-m-loading').should('not.exist'); - cy.get('#view-more-grouped-select-check').click(); - }); -}); diff --git a/packages/react-integration/cypress/integration/tableeditable.spec.ts b/packages/react-integration/cypress/integration/tableeditable.spec.ts index 1bf4605c8c3..9271bcd66e2 100644 --- a/packages/react-integration/cypress/integration/tableeditable.spec.ts +++ b/packages/react-integration/cypress/integration/tableeditable.spec.ts @@ -1,4 +1,4 @@ -describe('Table Simple Test', () => { +xdescribe('Table Simple Test', () => { it('Navigate to demo section', () => { cy.visit('http://localhost:3000/table-editable-demo-nav-link'); }); diff --git a/packages/react-integration/cypress/integration/toolbar.spec.ts b/packages/react-integration/cypress/integration/toolbar.spec.ts index d4222d5f672..33155c9f3f8 100644 --- a/packages/react-integration/cypress/integration/toolbar.spec.ts +++ b/packages/react-integration/cypress/integration/toolbar.spec.ts @@ -1,4 +1,4 @@ -describe('Data Toolbar Demo Test', () => { +xdescribe('Data Toolbar Demo Test', () => { it('Navigate to demo section', () => { cy.visit('http://localhost:3000/toolbar-demo-nav-link'); }); diff --git a/packages/react-integration/demo-app-ts/src/App.tsx b/packages/react-integration/demo-app-ts/src/App.tsx index e75cd75a3a8..95e2094094c 100755 --- a/packages/react-integration/demo-app-ts/src/App.tsx +++ b/packages/react-integration/demo-app-ts/src/App.tsx @@ -1,26 +1,30 @@ import React from 'react'; import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; import { - Page, + Avatar, + Brand, + Masthead, + MastheadBrand, + MastheadContent, + MastheadMain, + MastheadToggle, Nav, - NavList, NavItem, + NavList, + Page, PageSection, - SkipToContent, PageSidebar, PageSidebarBody, - Avatar, - Brand, - Radio + PageToggleButton, + Radio, + SkipToContent, + Toolbar, + ToolbarGroup, + ToolbarItem } from '@patternfly/react-core'; -import { - PageHeader, - PageHeaderTools, - PageHeaderToolsItem, - PageHeaderToolsGroup -} from '@patternfly/react-core/deprecated'; import imgBrand from './assets/images/imgBrand.svg'; import imgAvatar from './assets/images/imgAvatar.svg'; +import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; import Demos from './Demos'; import './App.css'; @@ -92,9 +96,9 @@ class App extends React.Component<{}, AppState> { const { isNavOpen, activeItem, isDarkTheme } = this.state; const AppToolbar = ( - - - + + + { checked && this.onThemeSelect(false) } /> - - + + { checked && this.onThemeSelect(true) } /> - - + + - + ); const AppHeader = ( - } - headerTools={AppToolbar} - showNavToggle - isNavOpen={isNavOpen} - onNavToggle={this.onNavToggle} - /> + + + + + + + + + + + + {AppToolbar} + ); const nav = ( diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts index f314b473dc5..d0a0ae8c558 100644 --- a/packages/react-integration/demo-app-ts/src/Demos.ts +++ b/packages/react-integration/demo-app-ts/src/Demos.ts @@ -42,11 +42,6 @@ export const Demos: DemoInterface[] = [ name: 'Alert Group Timeout From Bottom Demo', componentType: Examples.AlertGroupTimeoutFromBottomDemo }, - { - id: 'application-launcher-favorites-demo', - name: 'Application Launcher Favorites Demo', - componentType: Examples.ApplicationLauncherFavoritesDemo - }, { id: 'back-to-top-demo', name: 'Back To Top Demo', @@ -102,11 +97,6 @@ export const Demos: DemoInterface[] = [ name: 'CodeEditor Demo', componentType: Examples.CodeEditorDemo }, - { - id: 'context-selector-demo', - name: 'ContextSelector Demo', - componentType: Examples.ContextSelectorDemo - }, { id: 'data-list-demo', name: 'Data List Demo', @@ -147,11 +137,6 @@ export const Demos: DemoInterface[] = [ name: 'Drawer Resize Demo', componentType: Examples.DrawerResizeDemo }, - { - id: 'dropdown-deprecated-demo', - name: 'Dropdown Deprecated Demo', - componentType: Examples.DropdownDeprecatedDemo - }, { id: 'dropdown-demo', name: 'Dropdown Demo', @@ -282,11 +267,6 @@ export const Demos: DemoInterface[] = [ name: 'Number Input Demo', componentType: Examples.NumberInputDemo }, - { - id: 'options-menu-demo', - name: 'Options Menu Demo', - componentType: Examples.OptionsMenuDemo - }, { id: 'overflow-menu-demo', name: 'Overflow Menu Demo', @@ -322,61 +302,6 @@ export const Demos: DemoInterface[] = [ name: 'Search Input Demo', componentType: Examples.SearchInputDemo }, - { - id: 'select-demo', - name: 'Select Deprecated Demo', - componentType: Examples.SelectDemo - }, - { - id: 'select-demo-filtering', - name: 'Select Deprecated Demo with Filtering', - componentType: Examples.FilteringSelectDemo - }, - { - id: 'select-demo-filtering-live-updates', - name: 'Select Deprecated Demo with Filtering and Live Items Updates', - componentType: Examples.FilteringSelectLiveUpdateDemo - }, - { - id: 'select-favorites-demo', - name: 'Select Deprecated Favorites Demo', - componentType: Examples.SelectFavoritesDemo - }, - { - id: 'select-in-modal-demo', - name: 'Select Deprecated in modal demo', - componentType: Examples.SelectInModal - }, - { - id: 'select-typeahead-footer-filtering-demo', - name: 'Select Deprecated Footer filtering Demo', - componentType: Examples.SelectFooterFilteringDemo - }, - { - id: 'select-typeahead-footer-demo', - name: 'Select Deprecated Typeahead Footer Demo', - componentType: Examples.SelectTypeaheadFooterDemo - }, - { - id: 'select-validated-demo', - name: 'Select Deprecated Validated Demo', - componentType: Examples.SelectValidatedDemo - }, - { - id: 'select-view-more-demo', - name: 'Select Deprecated View More Demo', - componentType: Examples.SelectViewMoreDemo - }, - { - id: 'select-view-more-grouped-demo', - name: 'Select Deprecated View More Grouped Demo', - componentType: Examples.SelectViewMoreGroupedDemo - }, - { - id: 'select-view-more-typeahead-grouped-demo', - name: 'Select Deprecated View More Typeahead Grouped Demo', - componentType: Examples.SelectViewMoreTypeaheadGroupedDemo - }, { id: 'simple-list-demo', name: 'Simple List Demo', diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherFavoritesDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherFavoritesDemo.tsx deleted file mode 100644 index 670af3ac076..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherFavoritesDemo.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import React from 'react'; -import { - ApplicationLauncher, - ApplicationLauncherItem, - ApplicationLauncherGroup, - ApplicationLauncherSeparator -} from '@patternfly/react-core/deprecated'; - -interface ApplicationLauncherFavoritesDemoState { - isOpen: boolean; - favorites: string[]; - filteredItems: (JSX.Element | null)[] | null; -} - -export class ApplicationLauncherFavoritesDemo extends React.Component { - static displayName = 'ApplicationLauncherFavoritesDemo'; - state: ApplicationLauncherFavoritesDemoState = { - isOpen: false, - favorites: [''], - filteredItems: null - }; - - appLauncherItems: JSX.Element[] = [ - - - Item without group title - - - , - - - Group 2 button - - - Group 2 anchor link - - - , - - - Group 3 button - - - Group 3 anchor link - - - ]; - - onToggle = (_event: any, isOpen: boolean) => { - this.setState({ - isOpen - }); - }; - // eslint-disable-next-line @typescript-eslint/no-unused-vars - onSelect = (_event: React.SyntheticEvent) => { - this.setState({ - isOpen: !this.state.isOpen - }); - }; - onFavorite = (_event: React.MouseEvent, itemId: string, isFavorite: boolean) => { - if (isFavorite) { - this.setState({ - favorites: this.state.favorites.filter(id => id !== itemId) - }); - } else { - this.setState({ - favorites: [...this.state.favorites, itemId] - }); - } - }; - onSearch = (_event: React.FormEvent, textInput: string) => { - if (textInput === '') { - this.setState({ - filteredItems: null - }); - } else { - const filteredGroups = this.appLauncherItems - .map(group => { - const filteredGroup = React.cloneElement(group, { - children: group.props.children.filter((item: JSX.Element) => { - if (item.type === ApplicationLauncherSeparator) { - return item; - } - return item.props.children.toLowerCase().includes(textInput.toLowerCase()); - }) - }); - if ( - filteredGroup.props.children.length > 0 && - filteredGroup.props.children[0].type !== ApplicationLauncherSeparator - ) { - return filteredGroup; - } else { - return null; - } - }) - .filter(newGroup => newGroup); - - if (filteredGroups.length > 0) { - let lastGroup = filteredGroups.pop(); - if (lastGroup) { - lastGroup = React.cloneElement(lastGroup, { - children: lastGroup.props.children.filter((item: JSX.Element) => item.type !== ApplicationLauncherSeparator) - }); - filteredGroups.push(lastGroup); - } - } - - this.setState({ - filteredItems: filteredGroups - }); - } - }; - render() { - const { isOpen, favorites, filteredItems } = this.state; - return ( - - ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ContextSelectorDemo/ContextSelectorDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ContextSelectorDemo/ContextSelectorDemo.tsx deleted file mode 100644 index b0fdf761c4f..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/ContextSelectorDemo/ContextSelectorDemo.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import React from 'react'; -import { Button } from '@patternfly/react-core'; -import { ContextSelector, ContextSelectorItem, ContextSelectorFooter } from '@patternfly/react-core/deprecated'; - -interface ContextSelectorState { - isOpen: boolean; - selected: React.ReactNode; - searchValue: string; - filteredItems: string[]; -} - -export class ContextSelectorDemo extends React.Component<{}, ContextSelectorState> { - static displayName = 'ContextSelectorDemo'; - items = [ - 'My Project', - 'OpenShift Cluster', - 'Production Ansible', - 'AWS', - 'Azure', - 'My Project 2', - 'OpenShift Cluster ', - 'Production Ansible 2 ', - 'AWS 2', - 'Azure 2' - ]; - - state = { - isOpen: false, - selected: this.items[0], - searchValue: '', - filteredItems: this.items - }; - - onToggle = (event: React.SyntheticEvent, isOpen: boolean) => { - this.setState({ - isOpen - }); - }; - - onSelect = (event: React.SyntheticEvent, value: React.ReactNode) => { - this.setState({ - selected: value, - isOpen: !this.state.isOpen - }); - }; - - onSearchInputChange = (value: string) => { - this.setState({ searchValue: value }); - }; - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - onSearchButtonClick = (event?: React.SyntheticEvent) => { - const filtered = - this.state.searchValue === '' - ? this.items - : this.items.filter(str => str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1); - - this.setState({ filteredItems: filtered || [] }); - }; - - componentDidMount() { - window.scrollTo(0, 0); - } - - render() { - const { isOpen, selected, searchValue, filteredItems } = this.state; - return ( - this.onToggle(event, !isOpen)} - onSelect={this.onSelect} - onSearchButtonClick={this.onSearchButtonClick} - screenReaderLabel="Selected Project:" - footer={ - - - - } - isPlain - isText - > - {filteredItems.map((item, index) => ( - {item} - ))} - - ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DropdownDeprecatedDemo/DropdownDeprecatedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DropdownDeprecatedDemo/DropdownDeprecatedDemo.tsx deleted file mode 100644 index 8b33d8c433b..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/DropdownDeprecatedDemo/DropdownDeprecatedDemo.tsx +++ /dev/null @@ -1,378 +0,0 @@ -import * as React from 'react'; -import { Stack, StackItem, Title } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownToggle, - DropdownItem as DropdownItemDeprecated, - DropdownSeparator, - DropdownToggleAction, - BadgeToggle -} from '@patternfly/react-core/deprecated'; -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 UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon'; -import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; - -interface DropdownState { - isOpen: boolean; - isBadgeOpen: boolean; - isActionOpen: boolean; - isCogOpen: boolean; - isMenuOnDocumentBodyOpen: boolean; - counter: number; -} - -export class DropdownDeprecatedDemo extends React.Component<{}, DropdownState> { - static displayName = 'DropdownDeprecatedDemo'; - onToggle: (event: any, isOpen: boolean) => void; - onBadgeToggle: (event: any, isBadgeOpen: boolean) => void; - onSelect: (event?: React.SyntheticEvent) => void; - onFocus: () => void; - onActionToggle: (event: any, isOpen: boolean) => void; - onActionSelect: (event?: React.SyntheticEvent) => void; - onActionClick: (event: React.SyntheticEvent) => void; - onActionFocus: () => void; - onCogToggle: (event: any, isOpen: boolean) => void; - onCogSelect: (event?: React.SyntheticEvent) => void; - onCogClick: (event: React.SyntheticEvent) => void; - onCogFocus: () => void; - onMenuDocumentBodyToggle: (event: any, isOpen: boolean) => void; - onMenuDocumentBodySelect: (event?: React.SyntheticEvent) => void; - onMenuDocumentBodyFocus: () => void; - incrementCounter: () => void; - - constructor(props: any) { - super(props); - this.state = { - isOpen: false, - isBadgeOpen: false, - isActionOpen: false, - isCogOpen: false, - isMenuOnDocumentBodyOpen: false, - counter: 0 - }; - this.onToggle = (_event, isOpen) => { - this.setState({ - isOpen - }); - }; - // eslint-disable-next-line @typescript-eslint/no-unused-vars - this.onSelect = (_event) => { - this.setState({ - isOpen: !this.state.isOpen - }); - this.onFocus(); - }; - this.onFocus = () => { - const element = document.getElementById('toggle-id'); - if (element) { - element.focus(); - } - }; - - this.onBadgeToggle = (_event, isBadgeOpen) => { - this.setState({ - isBadgeOpen - }); - }; - - this.onActionToggle = (_event, isActionOpen) => { - this.setState({ - isActionOpen - }); - }; - // eslint-disable-next-line @typescript-eslint/no-unused-vars - this.onActionSelect = (_event) => { - this.setState({ - isActionOpen: !this.state.isActionOpen - }); - this.onActionFocus(); - }; - // eslint-disable-next-line @typescript-eslint/no-unused-vars - this.onActionClick = (_event) => { - // eslint-disable-next-line no-console - console.log('Action clicked!'); - }; - this.onActionFocus = () => { - const element = document.getElementById('action-toggle-id'); - if (element) { - element.focus(); - } - }; - - this.onCogToggle = (_event, isCogOpen) => { - this.setState({ - isCogOpen - }); - }; - // eslint-disable-next-line @typescript-eslint/no-unused-vars - this.onCogSelect = (_event) => { - this.setState({ - isCogOpen: !this.state.isCogOpen - }); - this.onCogFocus(); - }; - // eslint-disable-next-line @typescript-eslint/no-unused-vars - this.onCogClick = (_event) => { - // eslint-disable-next-line no-console - console.log('Cog clicked!'); - }; - this.onCogFocus = () => { - const element = document.getElementById('cog-toggle-id'); - if (element) { - element.focus(); - } - }; - - this.onMenuDocumentBodyToggle = (_event, isMenuOnDocumentBodyOpen) => { - this.setState({ - isMenuOnDocumentBodyOpen - }); - }; - // eslint-disable-next-line @typescript-eslint/no-unused-vars - this.onMenuDocumentBodySelect = (_event) => { - this.setState({ - isMenuOnDocumentBodyOpen: !this.state.isMenuOnDocumentBodyOpen - }); - this.onMenuDocumentBodyFocus(); - }; - this.onMenuDocumentBodyFocus = () => { - const element = document.getElementById('toggle-id-document-body'); - if (element) { - element.focus(); - } - }; - this.incrementCounter = () => { - this.setState((prevState) => ({ - counter: prevState.counter + 1 - })); - }; - } - - renderDropdown() { - const { isOpen } = this.state; - - const dropdownItems = [ - - Link - , - - Action - , - - Disabled Link - , - - Disabled Action - {this.state.counter} - , - , - - Separated Link - , - - Separated Action - - ]; - - return ( - - - Dropdown - - }> - Dropdown - - } - alignments={{ - sm: 'left', - md: 'right', - lg: 'left', - xl: 'right', - '2xl': 'left' - }} - isOpen={isOpen} - dropdownItems={dropdownItems} - /> - - ); - } - - renderActionDropdown() { - const { isActionOpen, isCogOpen } = this.state; - - const dropdownItems = [ - - Action - , - - Disabled action - , - - Other action - - ]; - const dropdownIconItems = [ - }> - Action - , - } isDisabled> - Disabled action - , - }> - Other action - - ]; - - return ( - - - Action Dropdown - - - Action - - ]} - splitButtonVariant="action" - onToggle={this.onActionToggle} - /> - } - isOpen={isActionOpen} - dropdownItems={dropdownItems} - />{' '} - - - - ]} - splitButtonVariant="action" - onToggle={this.onCogToggle} - /> - } - isOpen={isCogOpen} - dropdownItems={dropdownIconItems} - /> - - ); - } - - renderMenuOnDocumentBodyDropdown() { - const { isMenuOnDocumentBodyOpen } = this.state; - - const dropdownItems = [ - - Link - , - - Action - , - - Disabled Link - , - - Disabled Action - , - , - Separated Link, - - Separated Action - - ]; - - return ( - - - Dropdown with menu on document body - - } - > - Dropdown - - } - isOpen={isMenuOnDocumentBodyOpen} - dropdownItems={dropdownItems} - menuAppendTo={() => document.body} - /> - - ); - } - - renderBadgeDropdown() { - const { isBadgeOpen } = this.state; - const dropdownItems = [ - }> - Edit - , - }> - Deployment - , - }> - Applications - - ]; - return ( - - {dropdownItems.length} - - } - isOpen={isBadgeOpen} - dropdownItems={dropdownItems} - /> - ); - } - - render() { - return ( - - {this.renderDropdown()} - {this.renderActionDropdown()} - {this.renderMenuOnDocumentBodyDropdown()} - {this.renderBadgeDropdown()} - - ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx index 6b2ec6c20d1..4f54a8f927f 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx @@ -12,9 +12,11 @@ import { ValidatedOptions, HelperText, HelperTextItem, - FormHelperText + FormHelperText, + Select, + SelectOption, + MenuToggle } from '@patternfly/react-core'; -import { Select, SelectOption, SelectOptionObject, SelectVariant } from '@patternfly/react-core/deprecated'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; @@ -154,14 +156,18 @@ export class FormDemo extends Component { Select a state string)} - isOpen={isOpen} - placeholderText="Filter by status" - aria-labelledby={titleId} - onFilter={this.onFilter} - isGrouped - hasInlineFilter - > - {this.options} - - this.setState({ isSingle: !isSingle, selections: [] })} - /> -
    - ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/FilteringSelectLiveUpdateDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/FilteringSelectLiveUpdateDemo.tsx deleted file mode 100644 index f582ba29d86..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/FilteringSelectLiveUpdateDemo.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { Select, SelectOption, SelectOptionObject, SelectVariant } from '@patternfly/react-core/deprecated'; -import React, { Component } from 'react'; - -/* eslint-disable no-console */ -export interface FilteringSelectLiveUpdateDemoState { - isOpen: boolean; - selections: string[]; - options: React.ReactNode[]; -} - -export class FilteringSelectLiveUpdateDemo extends Component { - state = { - isOpen: false, - selections: [''], - options: [] - }; - - extraOptions = [ - , - , - , - - ]; - - componentDidMount = () => { - /* When the component mounts we add more options asynchronously. - * This emulates the scenario of options being updated with polling or asyncronous API calls. - */ - for (let i = 0; i < this.extraOptions.length; i++) { - setTimeout(() => { - this.setState((prevState: FilteringSelectLiveUpdateDemoState) => ({ - options: [...prevState.options, this.extraOptions[i]] - })); - }, 5000 + i * 2000); - } - }; - - onToggle = (_event: any, isOpen: boolean) => { - this.setState({ - isOpen - }); - }; - - onSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => { - const { selections } = this.state; - if (selections.includes(selection.toString())) { - this.setState( - (prevState: FilteringSelectLiveUpdateDemoState) => ({ - selections: prevState.selections.filter(item => item !== selection) - }), - () => console.log('selections: ', this.state.selections) - ); - } else { - this.setState( - (prevState: FilteringSelectLiveUpdateDemoState) => ({ selections: [...prevState.selections, selection] }), - () => console.log('selections: ', this.state.selections) - ); - } - }; - - onFilter = (_: any, textInput: string) => { - if (textInput === '') { - return this.state.options; - } else { - return this.state.options.filter(item => item.props.value.toLowerCase().includes(textInput.toLowerCase())); - } - }; - - render() { - const { isOpen, selections, options } = this.state; - const titleId = 'checkbox-select-id'; - return ( -
    - - -
    - ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectDemo.tsx deleted file mode 100644 index 74400446d91..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectDemo.tsx +++ /dev/null @@ -1,1463 +0,0 @@ -import { - Button, - Stack, - StackItem, - Title, - Checkbox, - Form, - Divider -} from '@patternfly/react-core'; -import { - Select, - SelectOption, - SelectVariant, - SelectOptionObject, - SelectDirection, - SelectGroup -} from '@patternfly/react-core/deprecated'; -import React, { Component } from 'react'; -import CartArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/cart-arrow-down-icon'; -import { State } from '../../../common/State'; - -/* eslint-disable no-console */ -interface TypeAheadOption { - value?: string; - disabled?: boolean; -} - -export interface SelectDemoState { - optionisDisabled?: boolean; - singleisOpen: boolean; - singleSelected: string; - singleRefisOpen: boolean; - singleRefSelected: string; - singleAppendisOpen: boolean; - singleAppendSelected: boolean; - singleDescisOpen: boolean; - singleDescSelected: string; - disabledSingleisOpen: boolean; - disabledSingleSelected: string; - customSingleisOpen: boolean; - customSingleSelected: string | SelectOptionObject; - dividerisOpen: boolean; - dividerSelected: string; - checkisOpen: boolean; - checkSelected: string[]; - typeaheadisOpen: boolean; - typeaheadSelected: string | SelectOptionObject; - typeaheadMultiisOpen: boolean; - typeaheadMultiSelected: string[]; - cdtypeaheadMultiisOpen: boolean; - cdtypeaheadMultiSelected: string[]; - plainTypeaheadMultiisOpen: boolean; - plainTypeaheadMultiSelected: string[]; - plainTypeaheadMultiIsPlain: boolean; - customTypeaheadMultiisOpen: boolean; - customTypeaheadMultiSelected: string[]; - direction: SelectDirection.up | SelectDirection.down; - typeaheadOptions: TypeAheadOption[]; - typeaheadIsCreatable: boolean; - typeaheadNewOptions: boolean; - typeaheadInputValuePersisted: boolean; - customContentisOpen: boolean; - noBadgeCheckIsOpen: boolean; - noBadgeCheckSelected: string[]; - menuDocumentBodyisOpen: boolean; - menuDocumentBodySelected: string[]; - lbltypeaheadSelected: string; - lbltypeaheadisOpen: boolean; - disabledFirstItemIsOpen: boolean; - disabledFirstItemSelected: string; -} - -export class SelectDemo extends Component { - state = { - optionisDisabled: false, - singleisOpen: false, - singleSelected: '', - singleRefisOpen: false, - singleRefSelected: '', - singleAppendisOpen: false, - singleAppendSelected: '', - singleDescisOpen: false, - singleDescSelected: '', - disabledSingleisOpen: false, - disabledSingleSelected: '', - customSingleisOpen: false, - customSingleSelected: '', - dividerisOpen: false, - dividerSelected: '', - checkisOpen: false, - checkSelected: [''], - typeaheadisOpen: false, - noBadgeCheckIsOpen: false, - noBadgeCheckSelected: [''], - typeaheadSelected: '', - typeaheadMultiisOpen: false, - typeaheadMultiSelected: [''], - cdtypeaheadMultiisOpen: false, - cdtypeaheadMultiSelected: [] as string[], - lbltypeaheadSelected: '', - lbltypeaheadisOpen: false, - plainTypeaheadMultiisOpen: false, - plainTypeaheadMultiSelected: [''], - plainTypeaheadMultiIsPlain: true, - customTypeaheadMultiisOpen: false, - customTypeaheadMultiSelected: [''], - direction: SelectDirection.down, - typeaheadOptions: [ - { value: 'Alabama', disabled: false, itemCount: 3 }, - { value: 'Boston', disabled: false, itemCount: 10 }, - { value: 'Florida', disabled: false, itemCount: 7 }, - { value: 'New Jersey', disabled: false, itemCount: 1 }, - { value: 'Texas', disabled: false, itemCount: 20 } - ], - typeaheadLabelOptions: [ - { label: 'Alabama', value: 'AL', disabled: false }, - { label: 'New York', value: 'NY', disabled: false }, - { label: 'Florida', value: 'FL', disabled: false }, - { label: 'New Jersey', value: 'NJ', disabled: false }, - { label: 'North Carolina', value: 'NC', disabled: false } - ], - typeaheadIsCreatable: false, - typeaheadNewOptions: false, - typeaheadInputValuePersisted: false, - customContentisOpen: false, - menuDocumentBodyisOpen: false, - menuDocumentBodySelected: [''], - disabledFirstItemIsOpen: false, - disabledFirstItemSelected: '' - }; - - singleOptions = [ - { value: 'Choose...', disabled: false, isPlaceholder: true, id: 'single-select-opt-1' }, - { value: 'Mr', disabled: false, id: 'single-select-opt-2' }, - { value: 'Miss', disabled: false, id: 'single-select-opt-3' }, - { value: 'Mrs', disabled: false, id: 'single-select-opt-4' }, - { value: 'Ms', disabled: false, id: 'single-select-opt-5' }, - { value: 'Dr', disabled: false, id: 'single-select-opt-6' }, - { value: 'Other', disabled: false, id: 'single-select-opt-7' } - ]; - - checkboxOptions = [ - , - 'Cancelled' } as SelectOptionObject} - inputId="Cancelled" - id="Cancelled" - />, - , - , - , - - ]; - - customTypeaheadOptions = [ - { value: new State('Alabama', 'AL', 'Montgomery', 1846) }, - { value: 'Florida', disabled: false }, - { value: 'New Jersey', disabled: false }, - { value: new State('New Mexico', 'NM', 'Santa Fe', 1912), disabled: false }, - { value: new State('New York', 'NY', 'Albany', 1788), disabled: false }, - { value: new State('North Carolina', 'NC', 'Raleigh', 1789), disabled: false } - ]; - - customSelectValueOptions = [ - , - , - , - , - , - - ]; - - disabledFirstItemOptions = [ - { value: 'Choose', disabled: true, isPlaceholder: true, id: 'first-item-disabled-select-opt-1' }, - { value: 'Mr', disabled: false, id: 'first-item-disabled-select-opt-2' }, - { value: 'Miss', disabled: false, id: 'first-item-disabled-select-opt-3' }, - { value: 'Mrs', disabled: false, id: 'first-item-disabled-select-opt-4' }, - { value: 'Ms', disabled: false, id: 'first-item-disabled-select-opt-5' }, - { value: 'Dr', disabled: false, id: 'first-item-disabled-select-opt-6' }, - { value: 'Other', disabled: false, id: 'first-item-disabled-select-opt-7' } - ]; - - toggleDisabled = () => { - this.setState({ optionisDisabled: !this.state.optionisDisabled }); - }; - - toggleDirection = () => { - if (this.state.direction === SelectDirection.up) { - this.setState({ - direction: SelectDirection.down - }); - } else { - this.setState({ - direction: SelectDirection.up - }); - } - }; - - toggleCreatable = (checked: boolean) => { - this.setState({ - typeaheadIsCreatable: checked - }); - }; - - toggleNew = (checked: boolean) => { - this.setState({ - typeaheadNewOptions: checked - }); - }; - - toggleInputValuePersisted = (checked: boolean) => { - this.setState({ - typeaheadInputValuePersisted: checked - }); - }; - - singleOnToggle = (_event: any, singleisOpen: boolean) => { - this.setState({ - singleisOpen - }); - }; - - singleRefOnToggle = (_event: any, singleRefisOpen: boolean) => { - this.setState({ - singleRefisOpen - }); - }; - - singleAppendOnToggle = (_event: any, singleAppendisOpen: boolean) => { - this.setState({ - singleAppendisOpen - }); - }; - - singleDescOnToggle = (_event: any, singleDescisOpen: boolean) => { - this.setState({ - singleDescisOpen - }); - }; - - dividerOnToggle = (_event: any, dividerisOpen: boolean) => { - this.setState({ - dividerisOpen - }); - }; - - disabledSingleOnToggle = (_event: any, disabledSingleisOpen: boolean) => { - this.setState({ - disabledSingleisOpen - }); - }; - - customSingleOnToggle = (_event: any, customSingleisOpen: boolean) => { - this.setState({ - customSingleisOpen - }); - }; - - checkOnToggle = (_event: any, checkisOpen: boolean) => { - this.setState({ - checkisOpen - }); - }; - - documentBodyOnToggle = (_event: any, menuDocumentBodyisOpen: boolean) => { - this.setState({ - menuDocumentBodyisOpen - }); - }; - - noBadgeCheckOnToggle = (_event: any, noBadgeCheckIsOpen: boolean) => { - this.setState({ - noBadgeCheckIsOpen - }); - }; - - typeaheadOnToggle = (_event: any, typeaheadisOpen: boolean) => { - this.setState({ - typeaheadisOpen - }); - }; - - typeaheadMultiOnToggle = (_event: any, typeaheadMultiisOpen: boolean) => { - this.setState({ - typeaheadMultiisOpen - }); - }; - - cdtypeaheadMultiOnToggle = (_event: any, cdtypeaheadMultiisOpen: boolean) => { - this.setState({ - cdtypeaheadMultiisOpen - }); - }; - - lbtypaheadToggle = (_event: any, lbltypeaheadisOpen: boolean) => { - this.setState({ lbltypeaheadisOpen }); - }; - - plainTypeaheadMultiOnToggle = (_event: any, plainTypeaheadMultiisOpen: boolean) => { - this.setState({ - plainTypeaheadMultiisOpen - }); - }; - - customTypeaheadMultiOnToggle = (_event: any, customTypeaheadMultiisOpen: boolean) => { - this.setState({ - customTypeaheadMultiisOpen - }); - }; - - customContentOnToggle = (_event: any, customContentisOpen: boolean) => { - this.setState({ - customContentisOpen - }); - }; - - disabledFirstItemOnToggle = (_event: any, disabledFirstItemIsOpen: boolean) => { - this.setState({ - disabledFirstItemIsOpen - }); - }; - - singleOnSelect = ( - event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject, - isPlaceholder?: boolean - ) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - singleSelected: selection, - singleisOpen: false - }); - console.log('selected:', selection.toString()); - } - }; - - singleRefOnSelect = ( - event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject, - isPlaceholder?: boolean - ) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - singleRefSelected: selection, - singleRefisOpen: false - }); - console.log('selected:', selection.toString()); - } - }; - - singleAppendOnSelect = ( - event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject, - isPlaceholder?: boolean - ) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - singleAppendSelected: selection, - singleAppendisOpen: false - }); - console.log('selected:', selection.toString()); - } - }; - - singleDescOnSelect = ( - event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject, - isPlaceholder?: boolean - ) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - singleDescSelected: selection, - singleDescisOpen: false - }); - console.log('selected:', selection.toString()); - } - }; - - dividerOnSelect = ( - event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject, - isPlaceholder?: boolean - ) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - dividerSelected: selection, - dividerisOpen: false - }); - console.log('selected:', selection.toString()); - } - }; - - disabledSingleOnSelect = ( - _event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject, - isPlaceholder?: boolean - ) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - disabledSingleSelected: selection, - disabledSingleisOpen: false - }); - console.log('selected:', selection.toString()); - } - }; - - customSingleOnSelect = ( - _event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject | (string | SelectOptionObject)[], - isPlaceholder?: boolean - ) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - customSingleSelected: selection, - customSingleisOpen: false - }); - console.log('selected:', selection.toString()); - } - }; - - checkOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => { - const { checkSelected } = this.state; - if (checkSelected.includes(selection.toString())) { - this.setState( - (prevState: SelectDemoState) => ({ checkSelected: prevState.checkSelected.filter(item => item !== selection) }), - () => console.log('selections: ', this.state.checkSelected) - ); - } else { - this.setState( - (prevState: SelectDemoState) => ({ checkSelected: [...prevState.checkSelected, selection] }), - () => console.log('selections: ', this.state.checkSelected) - ); - } - }; - - documentBodyOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => { - const { menuDocumentBodySelected } = this.state; - if (menuDocumentBodySelected.includes(selection.toString())) { - this.setState( - (prevState: SelectDemoState) => ({ - menuDocumentBodySelected: prevState.menuDocumentBodySelected.filter(item => item !== selection) - }), - () => console.log('selections: ', this.state.menuDocumentBodySelected) - ); - } else { - this.setState( - (prevState: SelectDemoState) => ({ - menuDocumentBodySelected: [...prevState.menuDocumentBodySelected, selection] - }), - () => console.log('selections: ', this.state.menuDocumentBodySelected) - ); - } - }; - - noBadgeCheckOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => { - const { noBadgeCheckSelected } = this.state; - if (noBadgeCheckSelected.includes(selection.toString())) { - this.setState( - (prevState: SelectDemoState) => ({ - noBadgeCheckSelected: prevState.noBadgeCheckSelected.filter(item => item !== selection) - }), - () => console.log('selections: ', this.state.noBadgeCheckSelected) - ); - } else { - this.setState( - (prevState: SelectDemoState) => ({ noBadgeCheckSelected: [...prevState.noBadgeCheckSelected, selection] }), - () => console.log('selections: ', this.state.noBadgeCheckSelected) - ); - } - }; - - typeaheadOnSelect = ( - _event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject | (string | SelectOptionObject)[], - isPlaceholder?: boolean - ) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - typeaheadSelected: selection, - typeaheadisOpen: false - }); - console.log('selected:', selection.toString()); - } - }; - - typeaheadMultiOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => { - const { typeaheadMultiSelected } = this.state; - if (typeaheadMultiSelected.includes(selection.toString())) { - this.setState( - (prevState: SelectDemoState) => ({ - typeaheadMultiSelected: prevState.typeaheadMultiSelected.filter(item => item !== selection) - }), - () => console.log('selections: ', this.state.typeaheadMultiSelected) - ); - } else { - this.setState( - (prevState: SelectDemoState) => ({ - typeaheadMultiSelected: [...prevState.typeaheadMultiSelected, selection.toString()] - }), - () => console.log('selections: ', this.state.typeaheadMultiSelected) - ); - } - }; - - cdtypeaheadMultiOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => { - const { cdtypeaheadMultiSelected } = this.state; - if (cdtypeaheadMultiSelected.includes(selection.toString())) { - this.setState( - (prevState: SelectDemoState) => ({ - cdtypeaheadMultiSelected: prevState.cdtypeaheadMultiSelected.filter(item => item !== selection) - }), - () => console.log('selections: ', this.state.cdtypeaheadMultiSelected) - ); - } else { - this.setState( - (prevState: SelectDemoState) => ({ - cdtypeaheadMultiSelected: [...prevState.cdtypeaheadMultiSelected, selection.toString()] - }), - () => console.log('selections: ', this.state.cdtypeaheadMultiSelected) - ); - } - }; - - lbltypeaheadSelect = ( - _event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject, - isPlaceholder?: boolean - ) => { - if (isPlaceholder) { - this.clearSelection(); - return; - } - this.setState( - { - lbltypeaheadSelected: selection, - lbltypeaheadisOpen: false - }, - () => console.log('selections: ', this.state.lbltypeaheadSelected) - ); - }; - - plainTypeaheadMultiOnSelect = ( - event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject - ) => { - const { plainTypeaheadMultiSelected } = this.state; - if (plainTypeaheadMultiSelected.includes(selection.toString())) { - this.setState( - (prevState: SelectDemoState) => ({ - plainTypeaheadMultiSelected: prevState.plainTypeaheadMultiSelected.filter(item => item !== selection) - }), - () => console.log('selections: ', this.state.plainTypeaheadMultiSelected) - ); - } else { - this.setState( - (prevState: SelectDemoState) => ({ - plainTypeaheadMultiSelected: [...prevState.plainTypeaheadMultiSelected, selection.toString()] - }), - () => console.log('selections: ', this.state.plainTypeaheadMultiSelected) - ); - } - }; - - customTypeaheadMultiOnSelect = ( - event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject - ) => { - const { customTypeaheadMultiSelected } = this.state; - if (customTypeaheadMultiSelected.includes(selection.toString())) { - this.setState( - (prevState: SelectDemoState) => ({ - customTypeaheadMultiSelected: prevState.customTypeaheadMultiSelected.filter(item => item !== selection) - }), - () => console.log('selections: ', this.state.customTypeaheadMultiSelected) - ); - } else { - this.setState( - (prevState: SelectDemoState) => ({ - customTypeaheadMultiSelected: [...prevState.customTypeaheadMultiSelected, selection.toString()] - }), - () => console.log('selections: ', this.state.customTypeaheadMultiSelected) - ); - } - }; - - disabledFirstItemOnSelect = ( - _event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject, - isPlaceholder?: boolean - ) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - disabledFirstItemSelected: selection, - disabledFirstItemIsOpen: false - }); - console.log('selected:', selection.toString()); - } - }; - - typeaheadCreateNew = (newValue: string) => { - this.setState({ - typeaheadOptions: [...this.state.typeaheadOptions, { value: newValue, disabled: false }] - }); - }; - - clearSelection = () => { - this.setState({ - singleSelected: '', - singleisOpen: false, - disabledSingleisOpen: false, - disabledSingleSelected: '', - customSingleSelected: '', - customSingleisOpen: false, - checkSelected: [''], - checkisOpen: false, - noBadgeCheckSelected: [''], - noBadgeCheckIsOpen: false, - typeaheadSelected: '', - typeaheadisOpen: false, - typeaheadMultiSelected: [''], - typeaheadMultiisOpen: false, - cdtypeaheadMultiisOpen: false, - cdtypeaheadMultiSelected: [], - lbltypeaheadSelected: '', - lbltypeaheadisOpen: false, - plainTypeaheadMultiSelected: [''], - plainTypeaheadMultiisOpen: false, - customTypeaheadMultiSelected: [''], - customTypeaheadMultiisOpen: false - }); - }; - - renderSingleSelect() { - const { singleisOpen, singleSelected } = this.state; - const titleId = 'title-id'; - return ( - - - Single Select - -
    - - -
    - -     - ); - } - - renderCustomRefSingleSelect() { - const { singleRefisOpen, singleRefSelected } = this.state; - const titleId = 'title-id'; - return ( - - - Single Custom Ref Select - -
    - - -
    -     - ); - } - - renderSingleSelectMenuAppendTo() { - const { singleAppendisOpen, singleAppendSelected } = this.state; - const titleId = 'title-id'; - return ( - - - Single Select - menu append to - -
    - - -
    -     - ); - } - - renderSelectWithDivider() { - const { dividerisOpen, dividerSelected } = this.state; - const titleId = 'select-with-divider-title-id'; - const options = this.singleOptions.reduce((acc, option, index) => { - const selectOpt = ( - - ); - if (index === 2) { - return [...acc, , selectOpt]; - } - return [...acc, selectOpt]; - }, []); - return ( - - - Single Select with a divider - -
    - - -
    -     - ); - } - - renderDescriptionSelect() { - const { singleDescisOpen, singleDescSelected } = this.state; - const titleId = 'title-id'; - return ( - - - Single Select with descriptions - -
    - - -
    -     - ); - } - - renderDisabledSingleSelect() { - const { disabledSingleisOpen, disabledSingleSelected } = this.state; - const titleId = 'title-id'; - return ( - - - Disabled Single Select - -
    - - -
    -     - ); - } - - renderCustomSingleSelect() { - const { customSingleisOpen, customSingleSelected } = this.state; - const titleId = 'title-id'; - return ( - - - Custom Single Select - -
    - - -
    -     - ); - } - - renderCheckboxSelect() { - const { checkisOpen, checkSelected } = this.state; - const titleId = 'checkbox-select-id'; - return ( - - - Checkbox Select - -
    - - -
    -     - ); - } - - renderNoBadgeCheckboxSelect() { - const { noBadgeCheckIsOpen, noBadgeCheckSelected } = this.state; - const titleId = 'no-badge-checkbox-select-id'; - return ( - - - Checkbox Select w/ No Selection Badge - -
    - - -
    -     - ); - } - - renderTypeaheadSelect() { - const { - typeaheadOptions, - typeaheadisOpen, - typeaheadSelected, - typeaheadIsCreatable, - typeaheadNewOptions, - typeaheadInputValuePersisted - } = this.state; - const titleId = 'typeahead-select-id'; - return ( - - - Typeahead Select - -
    - - -
    - this.toggleCreatable(checked)} - aria-label="toggle creatable checkbox" - id="toggle-creatable-typeahead" - name="toggle-creatable-typeahead" - /> - this.toggleNew(checked)} - aria-label="toggle new checkbox" - id="toggle-new-typeahead" - name="toggle-new-typeahead" - /> - this.toggleInputValuePersisted(checked)} - aria-label="toggle input value persisted" - id="toggle-input-value-persisted" - name="toggle-input-value-persisted" - /> - -     - ); - } - - renderLabelTypeaheadSelect() { - const { typeaheadLabelOptions, lbltypeaheadisOpen, lbltypeaheadSelected } = this.state; - const titleId = 'typeahead-select-labels-id'; - return ( - - - Typeahead Select with labelled options - -
    - - - -
    -     - ); - } - - renderTypeaheadMultiSelect() { - const { typeaheadMultiisOpen, typeaheadMultiSelected } = this.state; - const titleId = 'multi-typeahead-select-id'; - - return ( - - - Typeahead Multi Select - -
    - - -
    -     - ); - } - - renderCustomDataTypeaheadMultiSelect() { - const { cdtypeaheadMultiisOpen, cdtypeaheadMultiSelected } = this.state; - const titleId = 'multi-typeahead-select-id'; - - return ( - - - Custom Data Typeahead Multi Select - -
    - - -
    -     - ); - } - - renderCustomTypeaheadMultiSelect() { - const { customTypeaheadMultiisOpen, customTypeaheadMultiSelected } = this.state; - const titleId = 'custom-multi-typeahead-select-id'; - - return ( - - - Custom Typeahead Multi Select - -
    - - -
    -     - ); - } - - renderPlainTypeaheadMultiSelect() { - const { plainTypeaheadMultiisOpen, plainTypeaheadMultiSelected, plainTypeaheadMultiIsPlain } = this.state; - const titleId = 'multi-typeahead-plain-id'; - - return ( - - - Custom Typeahead Plain Multi Select - -
    - - -
    -     - ); - } - - renderSelectCustomContent() { - const { customContentisOpen } = this.state; - const titleId = 'custom-content-title-id'; - return ( - - - Custom Content Select - -
    - - null} - onSelect={() => null} - onClear={() => null} - selections="" - isOpen={false} - aria-labelledby={titleId} - placeholderText="Select a state" - > - - - - - - ); - } - - renderMenuOnDocumentBodySelect() { - const { menuDocumentBodyisOpen, menuDocumentBodySelected } = this.state; - const titleId = 'select-document-body-title'; - return ( - - - Checkbox Select with menu on document body - -
    - - -
    -     - ); - } - - renderDisabledFirstItemSelect() { - const { disabledFirstItemIsOpen, disabledFirstItemSelected } = this.state; - const titleId = 'disabled-first-item-title-id'; - return ( - - - First Item Disabled Select - -
    - - -
    -     - ); - } - - render() { - return ( - - {this.renderSingleSelect()} - {this.renderCustomRefSingleSelect()} - {this.renderCustomSingleSelect()} - {this.renderDisabledSingleSelect()} - {this.renderCheckboxSelect()} - {this.renderNoBadgeCheckboxSelect()} - {this.renderTypeaheadSelect()} - {this.renderTypeaheadMultiSelect()} - {this.renderCustomDataTypeaheadMultiSelect()} - {this.renderCustomTypeaheadMultiSelect()} - {this.renderPlainTypeaheadMultiSelect()} - {this.renderSelectCustomContent()} - {this.renderTypeaheadSelectInForm()} - {this.renderMenuOnDocumentBodySelect()} - {this.renderDescriptionSelect()} - {this.renderSelectWithDivider()} - {this.renderLabelTypeaheadSelect()} - {this.renderSingleSelectMenuAppendTo()} - {this.renderDisabledFirstItemSelect()} - - ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectFavoritesDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectFavoritesDemo.tsx deleted file mode 100644 index 8d1e335324f..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectFavoritesDemo.tsx +++ /dev/null @@ -1,328 +0,0 @@ -import React, { Component } from 'react'; -import { - StackItem, - Title -} from '@patternfly/react-core'; -import { - Select, - SelectOption, - SelectVariant, - SelectGroup, - SelectOptionObject -} from '@patternfly/react-core/deprecated'; - -/* eslint-disable no-console */ -export interface SelectFavoritesDemoState { - isOpen: boolean; - isOpenGrouped: boolean; - typeaheadisOpen: boolean; - typeaheadMultiisOpen: boolean; - selected: string[]; - selectedGrouped: string[]; - typeaheadSelected: string[]; - typeaheadMultiSelected: string[]; - favorites: string[]; - favoritesGrouped: string[]; - typeaheadFavorites: string[]; - typeaheadMultifavorites: string[]; -} - -export class SelectFavoritesDemo extends Component { - state = { - isOpen: false, - isOpenGrouped: false, - typeaheadisOpen: false, - typeaheadMultiisOpen: false, - selected: [] as string[], - selectedGrouped: [] as string[], - typeaheadSelected: [] as string[], - typeaheadMultiSelected: [] as string[], - favorites: [] as string[], - favoritesGrouped: [] as string[], - typeaheadfavorites: [] as string[], - typeaheadMultifavorites: [] as string[] - }; - - options = [ - , - , - , - - ]; - - optionsGrouped = [ - - - - - - - , - - - - - - ]; - - typeaheadMultiOptions = [ - , - , - , - , - - ]; - - typeaheadOptions = [ - , - , - , - - ]; - - onToggle = (_event: any, isOpen: boolean) => { - this.setState({ - isOpen - }); - }; - - onToggleGrouped = (_event: any, isOpenGrouped: boolean) => { - this.setState({ - isOpenGrouped - }); - }; - - typeaheadOnToggle = (_event: any, typeaheadisOpen: boolean) => { - this.setState({ - typeaheadisOpen - }); - }; - - typeaheadMultiOnToggle = (_event: any, typeaheadMultiisOpen: boolean) => { - this.setState({ - typeaheadMultiisOpen - }); - }; - - onSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string) => { - this.setState({ - selected: selection, - isOpen: false - }); - }; - - onSelectGrouped = (event: React.MouseEvent | React.ChangeEvent, selection: string) => { - this.setState({ - selectedGrouped: selection, - isOpenGrouped: false - }); - }; - - typeaheadOnSelect = ( - _event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject | (string | SelectOptionObject)[], - isPlaceholder?: boolean - ) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - typeaheadSelected: selection, - typeaheadisOpen: false - }); - console.log('selected:', selection.toString()); - } - }; - typeaheadMultiOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => { - const { typeaheadMultiSelected } = this.state; - if (typeaheadMultiSelected.includes(selection.toString())) { - this.setState( - (prevState: SelectFavoritesDemoState) => ({ - typeaheadMultiSelected: prevState.typeaheadMultiSelected.filter(item => item !== selection) - }), - () => console.log('selections: ', this.state.typeaheadMultiSelected) - ); - } else { - this.setState( - (prevState: SelectFavoritesDemoState) => ({ - typeaheadMultiSelected: [...prevState.typeaheadMultiSelected, selection.toString()] - }), - () => console.log('selections: ', this.state.typeaheadMultiSelected) - ); - } - }; - - onFavorite = (itemId: string, isFavorite: boolean) => { - if (isFavorite) { - this.setState({ - favorites: this.state.favorites.filter(id => id !== itemId) - }); - } else { - { - this.setState({ - favorites: [...this.state.favorites, itemId] - }); - } - } - }; - - onFavoriteGrouped = (itemId: string, isFavorite: boolean) => { - if (isFavorite) { - this.setState({ - favoritesGrouped: this.state.favoritesGrouped.filter(id => id !== itemId) - }); - } else { - { - this.setState({ - favoritesGrouped: [...this.state.favoritesGrouped, itemId] - }); - } - } - }; - - onFavoriteTypeahead = (itemId: string, isFavorite: boolean) => { - if (isFavorite) { - this.setState({ - typeaheadfavorites: this.state.typeaheadfavorites.filter(id => id !== itemId) - }); - } else { - { - this.setState({ - typeaheadfavorites: [...this.state.typeaheadfavorites, itemId] - }); - } - } - }; - - onFavoriteTypeaheadMulti = (itemId: string, isFavorite: boolean) => { - if (isFavorite) { - this.setState({ - typeaheadMultifavorites: this.state.typeaheadMultifavorites.filter(id => id !== itemId) - }); - } else { - { - this.setState({ - typeaheadMultifavorites: [...this.state.typeaheadMultifavorites, itemId] - }); - } - } - }; - - clearSelection = () => { - this.setState({ - typeaheadSelected: [], - typeaheadisOpen: false, - typeaheadMultiSelected: [], - typeaheadMultiisOpen: false - }); - }; - - render() { - const { - isOpen, - isOpenGrouped, - typeaheadisOpen, - typeaheadMultiisOpen, - selected, - selectedGrouped, - typeaheadSelected, - typeaheadMultiSelected, - favorites, - favoritesGrouped, - typeaheadfavorites, - typeaheadMultifavorites - } = this.state; - const titleId = 'single-select-id'; - const titleIdGrouped = 'grouped-single-select-id'; - const titleIdTypeahead = 'typeahead-select-id'; - const titleIdTypeaheadMulti = 'multi-typeahead-select-id'; - - return ( -
    - - - Favorites Single Select - - - - Favorites Single Select Multi - - - - Favorites type-ahead Select - - - - Favorites type-ahead multi - - - -
    - ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectFooterFilteringDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectFooterFilteringDemo.tsx deleted file mode 100644 index e01d5fcec9d..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectFooterFilteringDemo.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { - Checkbox, - Button -} from '@patternfly/react-core'; -import { - Select, - SelectOption, - SelectOptionObject, - SelectGroup, - SelectVariant -} from '@patternfly/react-core/deprecated'; -import React, { Component } from 'react'; - -/* eslint-disable no-console */ -export interface SelectFooterFilteringDemoState { - isOpen: boolean; - selections: string[]; -} - -export class SelectFooterFilteringDemo extends Component { - state = { - isOpen: false, - selections: [''], - isSingle: false - }; - - options = [ - - {['Running', 'Stopped', 'Down', 'Degraded', 'Needs-Maintenence'].map((option, index) => ( - - ))} - , - - - - - - ]; - - onToggle = (_event: any, isOpen: boolean) => { - this.setState({ - isOpen - }); - }; - - onSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => { - const { selections } = this.state; - if (selections.includes(selection.toString())) { - this.setState( - (prevState: SelectFooterFilteringDemoState) => ({ - selections: prevState.selections.filter(item => item !== selection) - }), - () => console.log('selections: ', this.state.selections) - ); - } else { - this.setState( - (prevState: SelectFooterFilteringDemoState) => ({ selections: [...prevState.selections, selection] }), - () => console.log('selections: ', this.state.selections) - ); - } - }; - - onFilter = (_: any, textInput: string) => { - if (textInput === '') { - return this.options; - } else { - return this.options - .map((group: React.ReactElement) => { - const filteredGroup = React.cloneElement(group, { - children: group.props.children.filter((item: React.ReactElement) => - item.props.value.toLowerCase().includes(textInput.toLowerCase()) - ) - }); - if (filteredGroup.props.children.length > 0) { - return filteredGroup; - } else { - return <>; - } - }) - .filter(newGroup => newGroup.props.children); - } - }; - - clearSelection = () => { - this.setState({ - selections: [] - }); - }; - - render() { - const { isOpen, selections, isSingle } = this.state; - const titleId = 'checkbox-select-id'; - return ( -
    - - - this.setState({ isSingle: !isSingle, selections: [] })} - /> -
    - ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectInModal.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectInModal.tsx deleted file mode 100644 index 479a2c5d30a..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectInModal.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import React from 'react'; -import { - Modal, - ModalVariant, - Button, - TimePicker, - InputGroup, - InputGroupItem -} from '@patternfly/react-core'; -import { - Select, - SelectOption, - SelectOptionObject -} from '@patternfly/react-core/deprecated'; - -export const SelectInModal = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); - const [isSelectOpen, setIsSelectOpen] = React.useState(false); - const [isTimePickerOpen, setIsTimePickerOpen] = React.useState(false); - const [selection, setSelection] = React.useState(null); - - const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { - setIsModalOpen(!isModalOpen); - }; - const onEscapePress = (event: KeyboardEvent) => { - if (isSelectOpen) { - setIsSelectOpen(false); - } else if (isTimePickerOpen) { - setIsTimePickerOpen(false); - } else { - handleModalToggle(event); - } - }; - - const options: { value: string; disabled: boolean; isPlaceholder: boolean }[] = [ - { value: 'Mr', disabled: false, isPlaceholder: false }, - { value: 'Miss', disabled: false, isPlaceholder: false }, - { value: 'Mrs', disabled: false, isPlaceholder: false }, - { value: 'Ms', disabled: false, isPlaceholder: false }, - { value: 'Dr', disabled: false, isPlaceholder: false }, - { value: 'Other', disabled: false, isPlaceholder: false } - ]; - - const onSelectToggle = (_event: any, isOpen: boolean) => { - setIsSelectOpen(isOpen); - }; - - const onSelect = (event: React.MouseEvent | React.ChangeEvent, newSelection: string | SelectOptionObject) => { - setSelection(newSelection); - }; - - const inputGroupRef1 = React.useRef(null); - return ( - - - - Confirm - , - - ]} - > - - - - - - inputGroupRef1.current} - /> - - - - - ); -}; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectTypeaheadFooterDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectTypeaheadFooterDemo.tsx deleted file mode 100644 index 791ab1fa298..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectTypeaheadFooterDemo.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from 'react'; -import { Button } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; - -/* eslint-disable no-console */ -export interface SelectTypeaheadFooterDemoState { - isOpen: boolean; - selected: string[]; -} - -export class SelectTypeaheadFooterDemo extends React.Component { - static displayName = 'SelectTypeaheadFooterDemo'; - state = { - isOpen: false, - selected: [] as string[] - }; - - options = [ - , - , - , - , - , - , - - ]; - - onToggle = (_event: any, isOpen: boolean) => { - this.setState({ - isOpen - }); - }; - - clearSelection = () => { - this.setState({ - selected: null, - isOpen: false - }); - }; - - onSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string, isPlaceholder: boolean) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - selected: selection, - isOpen: false - }); - console.log('selected:', selection); - } - }; - - render() { - const { isOpen, selected } = this.state; - const titleId = 'footer-typeahead-select-id'; - return ( -
    - - -
    - ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectValidatedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectValidatedDemo.tsx deleted file mode 100644 index 636b4ce97e7..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectValidatedDemo.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import React, { Component } from 'react'; -import { StackItem, Title, ValidatedOptions } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; - -/* eslint-disable no-console */ -export interface SelectValidatedDemoState { - isOpen: boolean; - selected: string[]; - validated: ValidatedOptions.default | ValidatedOptions.error | ValidatedOptions.warning | ValidatedOptions.success; -} - -export class SelectValidatedDemo extends Component { - state = { - isOpen: false, - selected: [] as string[], - validated: ValidatedOptions.default - }; - - options = [ - , - , - , - , - , - , - - ]; - - onToggle = (_event: any, isOpen: boolean) => { - this.setState({ - isOpen - }); - }; - - onSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string, isPlaceholder: boolean) => { - let validatedState = 'success'; - if (isPlaceholder) { - this.clearSelection(); - validatedState = 'error'; - } else { - if (selection === 'Other') { - validatedState = 'warning'; - } else { - validatedState = 'success'; - } - this.setState({ - selected: selection, - isOpen: false - }); - console.log('selected:', selection); - } - this.setState({ - validated: validatedState - }); - }; - - clearSelection = () => { - this.setState({ - selected: null, - isOpen: false - }); - }; - - render() { - const { isOpen, selected, validated } = this.state; - const titleId = 'validated-select-id'; - - return ( -
    - - - Validated Select - - - - -
    - ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectViewMoreDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectViewMoreDemo.tsx deleted file mode 100644 index c39997990c7..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectViewMoreDemo.tsx +++ /dev/null @@ -1,188 +0,0 @@ -import React, { Component } from 'react'; -import { StackItem, Title } from '@patternfly/react-core'; -import { Select, SelectOption, SelectOptionObject, SelectVariant } from '@patternfly/react-core/deprecated'; - -/* eslint-disable no-console */ -export interface SelectViewMoreDemoState { - isOpen: boolean; - isOpenCheck: boolean; - selected: string[]; - selectedCheck: string[]; - numOptions: number; - numOptionsCeck: number; - isLoading: boolean; - isLoadingCheck: boolean; -} - -export class SelectViewMoreDemo extends Component { - state = { - isOpen: false, - isOpenCheck: false, - selected: [] as string[], - selectedCheck: [] as string[], - numOptions: 3, - numOptionsCheck: 3, - isLoading: false, - isLoadingCheck: false - }; - - options = [ - , - , - , - , - , - , - - ]; - - optionsCheck = [ - , - , - , - , - , - , - , - , - - ]; - - onToggle = (_event: any, isOpen: boolean) => { - this.setState({ - isOpen - }); - }; - - onToggleCheck = (_event: any, isOpenCheck: boolean) => { - this.setState({ - isOpenCheck - }); - }; - - onSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string, isPlaceholder: boolean) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - selected: selection, - isOpen: false - }); - console.log('selected:', selection); - } - }; - - onSelectCheck = (event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => { - const { selectedCheck } = this.state; - if (selectedCheck.includes(selection.toString())) { - this.setState( - (prevState: SelectViewMoreDemoState) => ({ - selectedCheck: prevState.selectedCheck.filter(item => item !== selection) - }), - () => console.log('selections: ', this.state.selectedCheck) - ); - } else { - this.setState( - (prevState: SelectViewMoreDemoState) => ({ selectedCheck: [...prevState.selectedCheck, selection] }), - () => console.log('selections: ', this.state.selectedCheck) - ); - } - }; - - clearSelection = () => { - this.setState({ - selected: null, - isOpen: false - }); - }; - - simulateNetworkCall = (callback: any) => { - setTimeout(callback, 12000); - }; - - onViewMoreClick = () => { - // Set select loadingVariant to spinner then simulate network call before loading more options - this.setState({ isLoading: true }); - this.simulateNetworkCall(() => { - const newLength = - this.state.numOptions + 3 < this.options.length ? this.state.numOptions + 3 : this.options.length; - this.setState({ numOptions: newLength, isLoading: false }); - }); - }; - - onViewMoreClickCheck = () => { - // Set select loadingVariant to spinner then simulate network call before loading more options - this.setState({ isLoadingCheck: true }); - this.simulateNetworkCall(() => { - const newLength = - this.state.numOptionsCheck + 3 <= this.optionsCheck.length - ? this.state.numOptionsCheck + 3 - : this.optionsCheck.length; - this.setState({ numOptionsCheck: newLength, isLoadingCheck: false }); - }); - }; - - render() { - const { - isOpen, - isOpenCheck, - selected, - selectedCheck, - isLoading, - isLoadingCheck, - numOptions, - numOptionsCheck - } = this.state; - const titleId = 'view-more-select-id'; - const titleIdCheck = 'view-more-check-select-id'; - - return ( -
    - - - View more select - - - - Checkbox View more select - - - -
    - ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectViewMoreGroupedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectViewMoreGroupedDemo.tsx deleted file mode 100644 index d1617db8f6f..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectViewMoreGroupedDemo.tsx +++ /dev/null @@ -1,207 +0,0 @@ -import React, { Component } from 'react'; -import { - StackItem, - Title -} from '@patternfly/react-core'; -import { - Select, - SelectGroup, - SelectOption, - SelectOptionObject, - SelectVariant -} from '@patternfly/react-core/deprecated'; - -/* eslint-disable no-console */ -export interface SelectViewMoreGroupedDemoState { - isOpen: boolean; - isOpenCheck: boolean; - selected: string[]; - selectedCheck: string[]; - numOptions: number; - numOptionsCeck: number; - isLoading: boolean; - isLoadingCheck: boolean; -} - -export class SelectViewMoreGroupedDemo extends Component { - state = { - isOpen: false, - isOpenCheck: false, - selected: [] as string[], - selectedCheck: [] as string[], - numOptions: 1, - numOptionsCheck: 1, - isLoading: false, - isLoadingCheck: false - }; - - options = [ - - - - - - - , - - - - - - ]; - - optionsCheck = [ - - - - - - - , - - - - - - ]; - - onToggle = (_event: any, isOpen: boolean) => { - this.setState({ - isOpen - }); - }; - - onToggleCheck = (_event: any, isOpenCheck: boolean) => { - this.setState({ - isOpenCheck - }); - }; - - onSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string, isPlaceholder: boolean) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - selected: selection, - isOpen: false - }); - console.log('selected:', selection); - } - }; - - onSelectCheck = (event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => { - const { selectedCheck } = this.state; - if (selectedCheck.includes(selection.toString())) { - this.setState( - (prevState: SelectViewMoreGroupedDemoState) => ({ - selectedCheck: prevState.selectedCheck.filter(item => item !== selection) - }), - () => console.log('selections: ', this.state.selectedCheck) - ); - } else { - this.setState( - (prevState: SelectViewMoreGroupedDemoState) => ({ selectedCheck: [...prevState.selectedCheck, selection] }), - () => console.log('selections: ', this.state.selectedCheck) - ); - } - }; - - clearSelection = () => { - this.setState({ - selected: null, - isOpen: false - }); - }; - - simulateNetworkCall = (callback: any) => { - setTimeout(callback, 12000); - }; - - onViewMoreClick = () => { - // Set select loadingVariant to spinner then simulate network call before loading more options - this.setState({ isLoading: true }); - this.simulateNetworkCall(() => { - const newLength = - this.state.numOptions + 3 < this.options.length ? this.state.numOptions + 3 : this.options.length; - this.setState({ numOptions: newLength, isLoading: false }); - }); - }; - - onViewMoreClickCheck = () => { - // Set select loadingVariant to spinner then simulate network call before loading more options - this.setState({ isLoadingCheck: true }); - this.simulateNetworkCall(() => { - const newLength = - this.state.numOptionsCheck + 3 <= this.optionsCheck.length - ? this.state.numOptionsCheck + 3 - : this.optionsCheck.length; - this.setState({ numOptionsCheck: newLength, isLoadingCheck: false }); - }); - }; - - render() { - const { - isOpen, - isOpenCheck, - selected, - selectedCheck, - isLoading, - isLoadingCheck, - numOptions, - numOptionsCheck - } = this.state; - const titleId = 'view-more-grouped-select-id'; - const titleIdCheck = 'view-more-grouped-check-select-id'; - - return ( -
    - - - View more select - - - - Checkbox View more select - - - -
    - ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectViewMoreTypeaheadGroupedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectViewMoreTypeaheadGroupedDemo.tsx deleted file mode 100644 index 2fe39777979..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectViewMoreTypeaheadGroupedDemo.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import React from 'react'; -import { StackItem, Title } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant, SelectGroup } from '@patternfly/react-core/deprecated'; - -/* eslint-disable no-console */ -interface TypeAheadOption { - value?: string; - disabled?: boolean; -} - -/* eslint-disable no-console */ -export interface SelectViewMoreTypeaheadGroupedDemoState { - isOpen: boolean; - selected: string[]; - numOptions: number; - isLoading: boolean; - isCreatable: boolean; - newOptions: boolean; - options: TypeAheadOption[]; -} - -export class SelectViewMoreTypeaheadGroupedDemo extends React.Component { - static displayName = 'SelectViewMoreTypeaheadDemo'; - state = { - isOpen: false, - selected: [] as string[], - numOptions: 1, - isLoading: false, - isCreatable: false, - newOptions: false, - inputValuePersisted: false - }; - - options = [ - - - - - - - , - - - - - - ]; - - onToggle = (_event: any, isOpen: boolean) => { - this.setState({ - isOpen - }); - }; - - clearSelection = () => { - this.setState({ - selected: null, - isOpen: false - }); - }; - - onSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string, isPlaceholder: boolean) => { - if (isPlaceholder) { - this.clearSelection(); - } else { - this.setState({ - selected: selection, - isOpen: false - }); - console.log('selected:', selection); - } - }; - - simulateNetworkCall = (callback: any) => { - setTimeout(callback, 1200); - }; - - onViewMoreClick = () => { - // Set select loadingVariant to spinner then simulate network call before loading more options - this.setState({ isLoading: true }); - this.simulateNetworkCall(() => { - const newLength = - this.state.numOptions + 3 < this.options.length ? this.state.numOptions + 3 : this.options.length; - this.setState({ numOptions: newLength, isLoading: false }); - }); - }; - - render() { - const titleId = 'view-more-typeahead-select-id'; - const { isOpen, selected, isLoading, numOptions } = this.state; - return ( - - - Typeahead Select - -
    - - -
    -     - ); - } -} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx index 76bd0177435..b18906707cb 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-shadow */ -import * as React from 'react'; +import React, { Component } from 'react'; import { TableVariant, ICell, @@ -13,28 +13,28 @@ import { EditableTextCell, EditableSelectInputCell } from '@patternfly/react-table'; -import { SelectOption } from '@patternfly/react-core/deprecated'; +import { SelectOption } from '@patternfly/react-core/'; import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated'; const rowLevelValidationRules: IValidatorDef[] = [ { name: 'required', - validator: value => value.trim() !== '', + validator: (value) => value.trim() !== '', errorText: 'This field is required' }, { name: 'notFoo', - validator: value => value.trim().toLowerCase() !== 'foo', + validator: (value) => value.trim().toLowerCase() !== 'foo', errorText: 'Value cannot be "foo"' }, { name: 'minLength', - validator: value => value.trim().length >= 7, + validator: (value) => value.trim().length >= 7, errorText: 'Value must be at least 7 characters' }, { name: 'notXyz', - validator: value => value.trim().toLowerCase() !== 'xyz', + validator: (value) => value.trim().toLowerCase() !== 'xyz', errorText: 'Value cannot be xyz' } ]; @@ -48,7 +48,7 @@ interface Option { value: string; } -export class TableEditableDemo extends React.Component { +export class TableEditableDemo extends Component { static displayName = 'TableEditableDemo'; private options: Option[]; @@ -155,8 +155,8 @@ export class TableEditableDemo extends React.Component { options={(updatedProps as any).options.map((option: any, index: number) => ( ))} - onToggle={(_event: any, isOpen: boolean) => { - this.onToggle(isOpen, rowIndex, cellIndex); + onToggle={(_event: any) => { + this.onToggle(); }} selections={updatedProps.selected} /> @@ -184,9 +184,9 @@ export class TableEditableDemo extends React.Component { }, { isEditable: false, - rowEditBtnAriaLabel: idx => `Edit row ${idx}`, - rowSaveBtnAriaLabel: idx => `Save edits for row ${idx}`, - rowCancelBtnAriaLabel: idx => `Cancel edits for row ${idx}`, + rowEditBtnAriaLabel: (idx) => `Edit row ${idx}`, + rowSaveBtnAriaLabel: (idx) => `Save edits for row ${idx}`, + rowCancelBtnAriaLabel: (idx) => `Cancel edits for row ${idx}`, cells: [ { title: (value: string, rowIndex: number, cellIndex: number, updatedProps: any) => ( @@ -266,8 +266,8 @@ export class TableEditableDemo extends React.Component { options={(updatedProps as any).options.map((option: any, index: number) => ( ))} - onToggle={(_event: any, isOpen: boolean) => { - this.onToggle(isOpen, rowIndex, cellIndex); + onToggle={(_event: any) => { + this.onToggle(rowIndex, cellIndex); }} selections={updatedProps.selected} /> @@ -301,7 +301,7 @@ export class TableEditableDemo extends React.Component { window.scrollTo(0, 0); } - updateEditableRows: OnRowEdit = (evt, type, isEditable, rowIndex = 0, validationErrors) => { + updateEditableRows: OnRowEdit = (_evt, type, _isEditable, rowIndex = 0, validationErrors) => { const newRows = Array.from(this.state.rows); if (validationErrors && Object.keys(validationErrors).length) { @@ -340,7 +340,13 @@ export class TableEditableDemo extends React.Component { }); }; - onSelect = (_event: React.FormEvent, newValue: string, rowIndex: number, cellIndex: number, isPlaceholder?: boolean) => { + onSelect = ( + _event: React.FormEvent, + newValue: string, + rowIndex: number, + cellIndex: number, + isPlaceholder?: boolean + ) => { const newRows = Array.from(this.state.rows); const newCellProps = (newRows[rowIndex].cells[cellIndex] as IRowCell).props; @@ -359,7 +365,7 @@ export class TableEditableDemo extends React.Component { if (!newSelected.includes(newValue)) { newSelected.push(newValue); } else { - newSelected = newSelected.filter(el => el !== newValue); + newSelected = newSelected.filter((el) => el !== newValue); } break; } @@ -377,9 +383,8 @@ export class TableEditableDemo extends React.Component { }); }; - onToggle = (isOpen: boolean, rowIndex: number, cellIndex: number) => { + onToggle = () => { const newRows = Array.from(this.state.rows); - (newRows[rowIndex].cells[cellIndex] as IRowCell).props.isSelectOpen = isOpen; this.setState({ rows: newRows }); diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx index d8c44bfdd77..0c9ac00e20c 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx @@ -18,9 +18,10 @@ import { DropdownItem, DropdownList, MenuToggle, - Divider + Divider, + Select, + SelectOption } from '@patternfly/react-core'; -import { Select, SelectOption, SelectOptionObject, SelectVariant } from '@patternfly/react-core/deprecated'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon'; @@ -77,11 +78,7 @@ class ToolbarDemo extends React.Component { this.setState({ inputValue: newValue }); }; - onSelect = ( - type: keyof Filter, - event: React.MouseEvent | React.ChangeEvent, - selection: string | SelectOptionObject - ) => { + onSelect = (type: keyof Filter, event: React.MouseEvent | React.ChangeEvent, selection: string) => { const selectedTarget = event.target as HTMLInputElement; const checked = selectedTarget.checked; this.setState((prevState) => { @@ -199,7 +196,6 @@ class ToolbarDemo extends React.Component { ); diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx index 9fb53517a36..a674c187d1e 100644 --- a/packages/react-table/src/components/Table/TableTypes.tsx +++ b/packages/react-table/src/components/Table/TableTypes.tsx @@ -1,7 +1,6 @@ import { formatterValueType, ColumnType, RowType, RowKeyType, HeaderType } from './base/types'; import { SortByDirection } from './SortColumn'; import { DropdownItemProps } from '@patternfly/react-core/dist/esm/components/Dropdown'; -import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown'; import * as React from 'react'; import { CustomActionsToggleProps } from './ActionsColumn'; import { ButtonProps } from '@patternfly/react-core/dist/esm/components/Button'; @@ -102,8 +101,8 @@ export interface IColumn { rowLabeledBy?: string; expandId?: string; contentId?: string; - dropdownPosition?: DropdownPosition; - dropdownDirection?: DropdownDirection; + dropdownPosition?: 'right' | 'left'; + dropdownDirection?: 'up' | 'down'; menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent'; actionsToggle?: (props: CustomActionsToggleProps) => React.ReactNode; actionsPopperProps?: any; diff --git a/packages/react-table/src/components/Table/base/types.tsx b/packages/react-table/src/components/Table/base/types.tsx index eb83d0ac4fe..b265ff495b2 100644 --- a/packages/react-table/src/components/Table/base/types.tsx +++ b/packages/react-table/src/components/Table/base/types.tsx @@ -8,8 +8,7 @@ import * as React from 'react'; import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip'; import { PopoverProps } from '@patternfly/react-core/dist/esm/components/Popover'; -import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown'; -import { SelectOptionObject, SelectProps } from '@patternfly/react-core/dist/esm/deprecated/components/Select'; +import { SelectProps } from '@patternfly/react-core/dist/esm/components/Select'; import { Table } from '../Table'; import { Thead } from '../Thead'; import { Tbody } from '../Tbody'; @@ -61,9 +60,9 @@ export interface TdActionsType { /** Whether the actions are disabled */ isDisabled?: boolean; /** Actions dropdown position */ - dropdownPosition?: DropdownPosition; + dropdownPosition?: 'right' | 'left'; /** Actions dropdown direction */ - dropdownDirection?: DropdownDirection; + dropdownDirection?: 'up' | 'down'; /** The container to append the dropdown 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: @@ -286,11 +285,11 @@ export interface EditableSelectInputProps { value: string | string[]; /** Flag controlling isOpen state of select */ isSelectOpen: boolean; - /** String or SelectOptionObject, or array of strings or SelectOptionObjects representing current selections */ - selected: string | SelectOptionObject | (string | SelectOptionObject)[]; + /** Single select option value for single select menus, or array of select option values for multi select. You can also specify isSelected on the SelectOption */ + selected: any | any[]; /** Array of react elements to display in the select menu */ options: React.ReactElement[]; - /** Props to be passed down to the Select component */ + /** Props to be passed down to the select component */ editableSelectProps?: SelectProps; /** arbitrary data to pass to the internal select component in the editable select input cell */ [key: string]: any; diff --git a/packages/react-table/src/components/Table/utils/transformers.test.tsx b/packages/react-table/src/components/Table/utils/transformers.test.tsx index e17f0a5c267..4161a6f5c80 100644 --- a/packages/react-table/src/components/Table/utils/transformers.test.tsx +++ b/packages/react-table/src/components/Table/utils/transformers.test.tsx @@ -18,7 +18,6 @@ import { textCenter, cellActions } from './'; -import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown'; import { IAction, IActions, @@ -58,8 +57,8 @@ const testCellActions = async ({ rowData, column: { extraParams: { - dropdownPosition: DropdownPosition.right, - dropdownDirection: DropdownDirection.down + dropdownPosition: 'right', + dropdownDirection: 'down' } } }); diff --git a/packages/react-table/src/deprecated/components/Table/Table.tsx b/packages/react-table/src/deprecated/components/Table/Table.tsx index 013d8245393..f80630b3971 100644 --- a/packages/react-table/src/deprecated/components/Table/Table.tsx +++ b/packages/react-table/src/deprecated/components/Table/Table.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { OUIAProps, getDefaultOUIAId } from '@patternfly/react-core'; -import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components'; import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit'; import { css } from '@patternfly/react-styles'; import { Provider } from '../../../components/Table/base/provider'; @@ -143,8 +142,8 @@ class Table extends React.Component { rowLabeledBy: 'simple-node', expandId: 'expandable-toggle', contentId: 'expanded-content', - dropdownPosition: DropdownPosition.right, - dropdownDirection: DropdownDirection.down, + dropdownPosition: 'right', + dropdownDirection: 'down', actionsMenuAppendTo: 'inline', header: undefined as React.ReactNode, caption: undefined as React.ReactNode,