@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import {
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  Popover,
+  HelperTextItem,
+  TextInput
+} from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+export const PasswordStrengthDemo: React.FunctionComponent = () => {
+  type HelperTextItemVariant = 'default' | 'indeterminate' | 'warning' | 'success' | 'error';
+  interface PassStrength {
+    variant: HelperTextItemVariant;
+    icon: JSX.Element;
+    text: string;
+  }
+
+  const [password, setPassword] = React.useState('');
+  const [ruleLength, setRuleLength] = React.useState<HelperTextItemVariant>('indeterminate');
+  const [ruleContent, setRuleContent] = React.useState<HelperTextItemVariant>('indeterminate');
+  const [ruleCharacters, setRuleCharacters] = React.useState<HelperTextItemVariant>('indeterminate');
+  const [passStrength, setPassStrength] = React.useState<PassStrength>({
+    variant: 'error',
+    icon: <ExclamationCircleIcon />,
+    text: 'Weak'
+  });
+
+  const handlePasswordInput = (_event: any, password: string) => {
+    setPassword(password);
+    validate(password);
+  };
+
+  const validate = (password: string) => {
+    if (password === '') {
+      setRuleLength('indeterminate');
+      setRuleContent('indeterminate');
+      setRuleCharacters('indeterminate');
+      return;
+    }
+
+    if (password.length < 14) {
+      setRuleLength('error');
+    } else {
+      setRuleLength('success');
+    }
+
+    if (/redhat/gi.test(password)) {
+      setRuleContent('error');
+    } else {
+      setRuleContent('success');
+    }
+
+    let rulesCount = 0;
+    let strCount = 0;
+    if (/[a-z]/g.test(password)) {
+      rulesCount++;
+    }
+    if (/[A-Z]/g.test(password)) {
+      strCount += password.match(/[A-Z]/g).length;
+      rulesCount++;
+    }
+    if (/\d/g.test(password)) {
+      strCount += password.match(/\d/g).length;
+      rulesCount++;
+    }
+    if (/\W/g.test(password)) {
+      strCount += password.match(/\W/g).length;
+      rulesCount++;
+    }
+
+    if (rulesCount < 3) {
+      setRuleCharacters('error');
+    } else {
+      setRuleCharacters('success');
+    }
+
+    if (strCount < 3) {
+      setPassStrength({ variant: 'error', icon: <ExclamationCircleIcon />, text: 'Weak' });
+    } else if (strCount < 5) {
+      setPassStrength({ variant: 'warning', icon: <ExclamationTriangleIcon />, text: 'Medium' });
+    } else {
+      setPassStrength({ variant: 'success', icon: <CheckCircleIcon />, text: 'Strong' });
+    }
+  };
+
+  const iconPopover = (
+    <Popover headerContent={<div>Password Requirements</div>} bodyContent={<div>Password rules</div>}>
+      <button
+        type="button"
+        aria-label="More info for name field"
+        onClick={(e) => e.preventDefault()}
+        aria-describedby="password-field"
+        className="pf-v5-c-form__group-label-help"
+      >
+        <HelpIcon />
+      </button>
+    </Popover>
+  );
+
+  const passStrLabel = (
+    <HelperText>
+      <HelperTextItem variant={passStrength.variant} icon={passStrength.icon}>
+        {passStrength.text}
+      </HelperTextItem>
+    </HelperText>
+  );
+
+  return (
+    <Form>
+      <FormGroup
+        label="Password"
+        labelIcon={iconPopover}
+        isRequired
+        fieldId="password-field"
+        {...(ruleLength === 'success' &&
+          ruleContent === 'success' &&
+          ruleCharacters === 'success' && {
+            labelInfo: passStrLabel
+          })}
+      >
+        <TextInput
+          isRequired
+          type="text"
+          id="password-field"
+          name="password-field"
+          aria-describedby="password-field-helper"
+          aria-invalid={ruleLength === 'error' || ruleContent === 'error' || ruleCharacters === 'error'}
+          value={password}
+          onChange={handlePasswordInput}
+        />
+        <FormHelperText>
+          <HelperText component="ul" aria-live="polite" id="password-field-helper">
+            <HelperTextItem isDynamic variant={ruleLength} component="li">
+              Must be at least 14 characters
+            </HelperTextItem>
+            <HelperTextItem isDynamic variant={ruleContent} component="li">
+              Cannot contain the word "redhat"
+            </HelperTextItem>
+            <HelperTextItem isDynamic variant={ruleCharacters} component="li">
+              Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+    </Form>
+  );
+};

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -433,7 +433,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
       <Divider component="div" />
       <PageSection padding={{ default: 'noPadding' }}>
         <Drawer isExpanded={isDrawerExpanded}>
-          <DrawerContent panelContent={panelContent} className={'pf-m-no-background'}>
+          <DrawerContent panelContent={panelContent} colorVariant="no-background">
             <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
           </DrawerContent>
         </Drawer>

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -90,7 +90,7 @@ export const ModalTabs: React.FunctionComponent = () => {
         </PageSection>
         <PageSection isFilled>
           <Gallery hasGutter aria-label="Selectable card container">
-            {products.map(product => (
+            {products.map((product) => (
               <Card
                 isSelectable
                 isSelectableRaised

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -94,20 +94,12 @@ export const TablesAndTabs = () => {
     lastCommit: 'Last commit'
   };
 
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
-  const setRepoSelected = (event: React.FormEvent<HTMLInputElement>, repo: Repository, isSelecting = true) => {
-    setSelectedRepoNames((prevSelected) => {
-      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
-      return isSelecting ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
-    });
-    event.stopPropagation();
+  const [selectedRepoName, setSelectedRepoName] = React.useState<string>(repositories[0].name);
+  const isRepoSelected = (repo: Repository) => repo.name === selectedRepoName;
+  const setRepoSelected = (_event: React.FormEvent<HTMLInputElement>, repo: Repository) => {
+    setSelectedRepoName(repo.name);
+    setIsExpanded(true);
   };
-  const onSelectAll = (isSelecting = true) => setSelectedRepoNames(isSelecting ? repositories.map((r) => r.name) : []);
-  const allRowsSelected = selectedRepoNames.length === repositories.length;
-  const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
-
-  const [rowClicked, setRowClicked] = React.useState<string>('Node 1');
-  const isRowClicked = (repo: Repository) => rowClicked === repo.name;
 
   const defaultActions: IAction[] = [
     {
@@ -155,8 +147,6 @@ export const TablesAndTabs = () => {
     const shouldFocus = [ArrowDown, ArrowUp, Enter, Space].includes(event.key);
 
     if (shouldToggle) {
-      event.preventDefault();
-      event.stopPropagation();
       onToggle(event);
     }
 
@@ -167,6 +157,11 @@ export const TablesAndTabs = () => {
     }
   };
 
+  const handleDrawerClose = () => {
+    setIsExpanded(false);
+    setSelectedRepoName('');
+  };
+
   const customActionsToggle = (props: CustomActionsToggleProps, toggleName: string) => (
     <MenuToggle
       isDisabled={props.isDisabled}
@@ -234,12 +229,7 @@ export const TablesAndTabs = () => {
     <Table aria-label="`Composable` table">
       <Thead noWrap>
         <Tr>
-          <Th
-            select={{
-              onSelect: (_event, isSelecting) => onSelectAll(isSelecting),
-              isSelected: allRowsSelected
-            }}
-          />
+          <Th />
           <Th>{columnNames.name}</Th>
           <Th>{columnNames.branches}</Th>
           <Th>{columnNames.prs}</Th>
@@ -249,29 +239,23 @@ export const TablesAndTabs = () => {
       </Thead>
       <Tbody>
         {repositories.map((repo, rowIndex) => (
-          <Tr
-            key={repo.name}
-            onRowClick={(event) => {
-              if ((event?.target as HTMLInputElement).type !== 'checkbox') {
-                setRowClicked(rowClicked === repo.name ? '' : repo.name);
-                setIsExpanded(!isRowClicked(repo));
-              }
-            }}
-            isHoverable
-            isRowSelected={repo.name === rowClicked}
-          >
+          <Tr key={repo.name}>
             <Td
               key={`${rowIndex}_0`}
               select={{
                 rowIndex,
-                onSelect: (event, isSelected) => setRepoSelected(event, repo, isSelected),
-                isSelected: isRepoSelected(repo)
+                onSelect: (event) => setRepoSelected(event, repo),
+                isSelected: isRepoSelected(repo),
+                variant: 'radio'
               }}
             />
             <Td dataLabel={columnNames.name}>
               {repo.name}
               <div>
-                <a href="#">siemur/test-space</a>
+                {/** Preventing default behavior for demo purposes only */}
+                <a onClick={(event) => event.preventDefault()} href="#">
+                  siemur/test-space
+                </a>
               </div>
             </Td>
             <Td dataLabel={columnNames.branches}>
@@ -316,21 +300,19 @@ export const TablesAndTabs = () => {
     <DrawerPanelContent widths={{ default: 'width_33', xl: 'width_33' }}>
       <DrawerHead>
         <DrawerActions>
-          <DrawerCloseButton
-            onClick={() => {
-              setRowClicked('');
-              setIsExpanded(false);
-            }}
-          />
+          <DrawerCloseButton onClick={handleDrawerClose} />
         </DrawerActions>
         <Flex spaceItems={{ default: 'spaceItemsSm' }} direction={{ default: 'column' }}>
           <FlexItem>
             <Title headingLevel="h2" size="lg">
-              {rowClicked}
+              {selectedRepoName}
             </Title>
           </FlexItem>
           <FlexItem>
-            <a href="#">siemur/test-space</a>
+            {/** Preventing default behavior for demo purposes only */}
+            <a onClick={(event) => event.preventDefault()} href="#">
+              siemur/test-space
+            </a>
           </FlexItem>
         </Flex>
       </DrawerHead>

package/src/deprecated/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -2,12 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
-import {
-  DropdownDirection,
-  DropdownPosition,
-  DropdownToggle,
-  DropdownContext
-} from '../Dropdown';
+import { DropdownDirection, DropdownPosition, DropdownToggle, DropdownContext } from '../Dropdown';
 import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
 import { ApplicationLauncherGroup } from './ApplicationLauncherGroup';
 import { ApplicationLauncherSeparator } from './ApplicationLauncherSeparator';
@@ -70,7 +65,7 @@ export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement
   zIndex?: number;
 }
 
-export class ApplicationLauncher extends React.Component<ApplicationLauncherProps> {
+class ApplicationLauncher extends React.Component<ApplicationLauncherProps> {
   static displayName = 'ApplicationLauncher';
   static defaultProps: ApplicationLauncherProps = {
     className: '',
@@ -209,3 +204,5 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
     );
   }
 }
+
+export { ApplicationLauncher };

package/src/deprecated/components/ApplicationLauncher/ApplicationLauncherContent.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 import { ApplicationLauncherIcon } from './ApplicationLauncherIcon';
 import { ApplicationLauncherText } from './ApplicationLauncherText';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
@@ -25,7 +24,7 @@ export const ApplicationLauncherContent: React.FunctionComponent<ApplicationLaun
             <span className={css(styles.appLauncherMenuItemExternalIcon)}>
               <ExternalLinkAltIcon />
             </span>
-            <span className={css(accessibleStyles.screenReader)}>(opens new window)</span>
+            <span className="pf-v5-screen-reader">(opens new window)</span>
           </>
         )}
       </>

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

@@ -11,7 +11,7 @@ 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 './pf-logo-small.svg';
+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).

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DropdownPosition } from '@patternfly/react-core/deprecated'
+import { DropdownPosition } from '@patternfly/react-core/deprecated';
 import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core/deprecated';
 
 const appLauncherItems: React.ReactElement[] = [

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx

@@ -17,7 +17,7 @@ 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);
+  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
 
   return <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} />;
 };

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx

@@ -18,7 +18,7 @@ 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);
+  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
 
   return (
     <ApplicationLauncher

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherDisabled.tsx

@@ -17,7 +17,7 @@ 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);
+  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
 
   return (
     <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} isDisabled />

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherDocumentBody.tsx

@@ -17,7 +17,7 @@ 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);
+  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
 
   return (
     <ApplicationLauncher

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx

@@ -5,7 +5,7 @@ import {
   ApplicationLauncherGroup,
   ApplicationLauncherSeparator
 } from '@patternfly/react-core/deprecated';
-import pfLogoSm from './pf-logo-small.svg';
+import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
 
 const icon: JSX.Element = <img src={pfLogoSm} />;
 
@@ -49,7 +49,7 @@ export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = ()
     let updatedFavorites: string[] = [...favorites, itemId];
 
     if (isFavorite) {
-      updatedFavorites = favorites.filter(id => id !== itemId);
+      updatedFavorites = favorites.filter((id) => id !== itemId);
     }
 
     setFavorites(updatedFavorites);
@@ -78,13 +78,13 @@ export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = ()
             return filteredGroup;
           }
         })
-        .filter(newGroup => newGroup);
+        .filter((newGroup) => newGroup);
 
       if (filteredGroups.length > 0) {
         let lastGroup = filteredGroups.pop();
 
         lastGroup = React.cloneElement(lastGroup, {
-          children: lastGroup.props.children.filter(item => item.type !== ApplicationLauncherSeparator)
+          children: lastGroup.props.children.filter((item) => item.type !== ApplicationLauncherSeparator)
         });
 
         filteredGroups.push(lastGroup);

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx

@@ -5,7 +5,7 @@ import {
   ApplicationLauncherItem,
   ApplicationLauncherContent
 } from '@patternfly/react-core/deprecated';
-import pfLogoSm from './pf-logo-small.svg';
+import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
 
 const icon: JSX.Element = <img src={pfLogoSm} />;
 

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx

@@ -5,7 +5,7 @@ import {
   ApplicationLauncherGroup,
   ApplicationLauncherSeparator
 } from '@patternfly/react-core/deprecated';
-import pfLogoSm from './pf-logo-small.svg';
+import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
 
 const icon = <img src={pfLogoSm} />;
 
@@ -39,7 +39,7 @@ 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);
+  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
 
   return (
     <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} isGrouped />

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx

@@ -29,7 +29,7 @@ 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);
+  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
 
   return <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} />;
 };

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

@@ -71,7 +71,7 @@ export interface ContextSelectorProps extends OUIAProps {
   menuAriaLabel?: string;
 }
 
-export class ContextSelector extends React.Component<ContextSelectorProps, { ouiaStateId: string }> {
+class ContextSelector extends React.Component<ContextSelectorProps, { ouiaStateId: string }> {
   static displayName = 'ContextSelector';
   static defaultProps: ContextSelectorProps = {
     children: null as React.ReactNode,
@@ -227,3 +227,5 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     );
   }
 }
+
+export { ContextSelector };

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

@@ -20,7 +20,7 @@ export interface ContextSelectorItemProps {
   href?: string;
 }
 
-export class ContextSelectorItem extends React.Component<ContextSelectorItemProps> {
+class ContextSelectorItem extends React.Component<ContextSelectorItemProps> {
   static displayName = 'ContextSelectorItem';
   static defaultProps: ContextSelectorItemProps = {
     children: null as React.ReactNode,
@@ -55,7 +55,7 @@ export class ContextSelectorItem extends React.Component<ContextSelectorItemProp
                 className
               )}
               ref={this.ref}
-              onClick={event => {
+              onClick={(event) => {
                 if (!isDisabled) {
                   onClick(event);
                   onSelect(event, children);
@@ -74,3 +74,5 @@ export class ContextSelectorItem extends React.Component<ContextSelectorItemProp
     );
   }
 }
+
+export { ContextSelectorItem };

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

@@ -13,7 +13,7 @@ export interface ContextSelectorMenuListProps {
   'aria-label'?: string;
 }
 
-export class ContextSelectorMenuList extends React.Component<ContextSelectorMenuListProps> {
+class ContextSelectorMenuList extends React.Component<ContextSelectorMenuListProps> {
   static displayName = 'ContextSelectorMenuList';
   static defaultProps: ContextSelectorMenuListProps = {
     children: null as React.ReactNode,
@@ -47,3 +47,5 @@ export class ContextSelectorMenuList extends React.Component<ContextSelectorMenu
     );
   };
 }
+
+export { ContextSelectorMenuList };

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

@@ -30,7 +30,7 @@ export interface ContextSelectorToggleProps {
   isText?: boolean;
 }
 
-export class ContextSelectorToggle extends React.Component<ContextSelectorToggleProps> {
+class ContextSelectorToggle extends React.Component<ContextSelectorToggleProps> {
   static displayName = 'ContextSelectorToggle';
   static defaultProps: PickOptional<ContextSelectorToggleProps> = {
     className: '',
@@ -116,7 +116,7 @@ export class ContextSelectorToggle extends React.Component<ContextSelectorToggle
           className
         )}
         type="button"
-        onClick={event => onToggle(event, !isOpen)}
+        onClick={(event) => onToggle(event, !isOpen)}
         aria-expanded={isOpen}
         onKeyDown={this.onKeyDown}
       >
@@ -128,3 +128,5 @@ export class ContextSelectorToggle extends React.Component<ContextSelectorToggle
     );
   }
 }
+
+export { ContextSelectorToggle };

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

@@ -52,7 +52,7 @@ export const ContextSelectorBasic: React.FunctionComponent = () => {
     const filtered =
       searchValue === ''
         ? items
-        : items.filter(item => {
+        : items.filter((item) => {
             const str = typeof item === 'string' ? item : item.text;
             return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
           });

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

@@ -51,7 +51,7 @@ export const ContextSelectorPlainText: React.FunctionComponent = () => {
     const filtered =
       searchValue === ''
         ? items
-        : items.filter(item => {
+        : items.filter((item) => {
             const str = typeof item === 'string' ? item : item.text;
             return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
           });

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

@@ -52,7 +52,7 @@ export const ContextSelectorWithFooter: React.FunctionComponent = () => {
     const filtered =
       searchValue === ''
         ? items
-        : items.filter(item => {
+        : items.filter((item) => {
             const str = typeof item === 'string' ? item : item.text;
             return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
           });

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

@@ -41,7 +41,7 @@ export interface DropdownMenuItem extends React.HTMLAttributes<any> {
   ref: HTMLElement;
 }
 
-export class DropdownMenu extends React.Component<DropdownMenuProps> {
+class DropdownMenu extends React.Component<DropdownMenuProps> {
   static displayName = 'DropdownMenu';
   context!: React.ContextType<typeof DropdownContext>;
   refsCollection = [] as HTMLElement[][];
@@ -250,3 +250,5 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
 }
 
 DropdownMenu.contextType = DropdownContext;
+
+export { DropdownMenu };

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

@@ -17,8 +17,9 @@ export interface DropdownToggleActionProps {
   'aria-label'?: string;
 }
 
-export class DropdownToggleAction extends React.Component<DropdownToggleActionProps> {
+class DropdownToggleAction extends React.Component<DropdownToggleActionProps> {
   static displayName = 'DropdownToggleAction';
+
   static defaultProps: DropdownToggleActionProps = {
     className: '',
     isDisabled: false,
@@ -41,3 +42,5 @@ export class DropdownToggleAction extends React.Component<DropdownToggleActionPr
     );
   }
 }
+
+export { DropdownToggleAction };

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

@@ -38,7 +38,7 @@ export interface DropdownToggleCheckboxProps
   ouiaSafe?: boolean;
 }
 
-export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckboxProps, { ouiaStateId: string }> {
+class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckboxProps, { ouiaStateId: string }> {
   static displayName = 'DropdownToggleCheckbox';
   static defaultProps: PickOptional<DropdownToggleCheckboxProps> = {
     className: '',
@@ -127,3 +127,4 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
     );
   }
 }
+export { DropdownToggleCheckbox };

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

@@ -8,7 +8,7 @@ import { getOUIAProps, OUIAProps } from '../../../helpers';
 import { PickOptional } from '../../../helpers/typeUtils';
 import { Popper } from '../../../helpers/Popper/Popper';
 
-export class DropdownWithContext extends React.Component<DropdownProps & OUIAProps> {
+class DropdownWithContext extends React.Component<DropdownProps & OUIAProps> {
   static displayName = 'DropdownWithContext';
 
   openedOnEnter = false;
@@ -189,3 +189,5 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
     );
   }
 }
+
+export { DropdownWithContext };