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

package/src/components/Brand/Brand.tsx

@@ -68,7 +68,13 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
         <img src={src} alt={alt} />
       </picture>
     ) : (
-      <img {...props} className={css(styles.brand, className)} style={{ ...style, ...responsiveStyles }} src={src} alt={alt} />
+      <img
+        {...props}
+        className={css(styles.brand, className)}
+        style={{ ...style, ...responsiveStyles }}
+        src={src}
+        alt={alt}
+      />
     )
   );
 };

package/src/components/Brand/examples/Brand.md

@@ -5,13 +5,13 @@ cssPrefix: null
 propComponents: ['Brand']
 ---
 
-import pfLogo from './pfLogo.svg';
-import logoXl from './pf-c-brand--logo-on-xl.svg';
-import logoLg from './pf-c-brand--logo-on-lg.svg';
-import logoMd from './pf-c-brand--logo-on-md.svg';
-import logoSm from './pf-c-brand--logo-on-sm.svg';
-import logo from './pf-c-brand--logo.svg';
-import logoBase from './pf-c-brand--logo-base.jpg';
+import pfLogo from '../../assets/pfLogo.svg';
+import logoXl from '../../assets/pf-c-brand--logo-on-xl.svg';
+import logoLg from '../../assets/pf-c-brand--logo-on-lg.svg';
+import logoMd from '../../assets/pf-c-brand--logo-on-md.svg';
+import logoSm from '../../assets/pf-c-brand--logo-on-sm.svg';
+import logo from '../../assets/pf-c-brand--logo.svg';
+import logoBase from '../../assets/pf-c-brand--logo-base.jpg';
 
 ## Examples
 

package/src/components/Brand/examples/BrandBasic.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Brand } from '@patternfly/react-core';
-import pfLogo from './pfLogo.svg';
+import pfLogo from '../../assets/pfLogo.svg';
 
-export const BrandBasic: React.FunctionComponent = () => <Brand src={pfLogo} alt="Patternfly Logo" widths={{ default: '200px', md: '400px', xl: '600px' }} />;
+export const BrandBasic: React.FunctionComponent = () => (
+  <Brand src={pfLogo} alt="Patternfly Logo" widths={{ default: '200px', md: '400px', xl: '600px' }} />
+);

package/src/components/Brand/examples/BrandResponsive.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Brand } from '@patternfly/react-core';
-import logoXl from './pf-c-brand--logo-on-xl.svg';
-import logoLg from './pf-c-brand--logo-on-lg.svg';
-import logoMd from './pf-c-brand--logo-on-md.svg';
-import logoSm from './pf-c-brand--logo-on-sm.svg';
-import logo from './pf-c-brand--logo.svg';
-import logoBase from './pf-c-brand--logo-base.jpg';
+import logoXl from '../../assets/pf-c-brand--logo-on-xl.svg';
+
+import logoLg from '../../assets/pf-c-brand--logo-on-lg.svg';
+import logoMd from '../../assets/pf-c-brand--logo-on-md.svg';
+import logoSm from '../../assets/pf-c-brand--logo-on-sm.svg';
+import logo from '../../assets/pf-c-brand--logo.svg';
+import logoBase from '../../assets/pf-c-brand--logo-base.jpg';
 
 export const BrandBasic: React.FunctionComponent = () => (
   <Brand src={logoBase} alt="Fallback patternfly default logo" widths={{ default: '40px', sm: '60px', md: '220px' }}>

package/src/components/Button/Button.tsx

@@ -70,8 +70,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   type?: 'button' | 'submit' | 'reset';
   /** Adds button variant styles */
   variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control';
-  /** Sets position of the link icon */
-  iconPosition?: 'left' | 'right';
+  /** Sets position of the icon. Note: "left" and "right" are deprecated. Use "start" and "end" instead */
+  iconPosition?: 'start' | 'end' | 'left' | 'right';
   /** Adds accessible text to the button. */
   'aria-label'?: string;
   /** Icon for the button. Usable by all variants except for plain. */
@@ -108,7 +108,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isInline = false,
   type = ButtonType.button,
   variant = ButtonVariant.primary,
-  iconPosition = 'left',
+  iconPosition = 'start',
   'aria-label': ariaLabel = null,
   icon = null,
   ouiaId,
@@ -158,7 +158,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         isActive && styles.modifiers.active,
         isInline && variant === ButtonVariant.link && styles.modifiers.inline,
         isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger,
-        isLoading !== null && children !== null && styles.modifiers.progress,
+        isLoading !== null && variant !== ButtonVariant.plain && styles.modifiers.progress,
         isLoading && styles.modifiers.inProgress,
         size === ButtonSize.sm && styles.modifiers.small,
         size === ButtonSize.lg && styles.modifiers.displayLg,
@@ -183,11 +183,11 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         </span>
       )}
       {variant === ButtonVariant.plain && children === null && icon ? icon : null}
-      {variant !== ButtonVariant.plain && icon && iconPosition === 'left' && (
+      {variant !== ButtonVariant.plain && icon && (iconPosition === 'start' || iconPosition === 'left') && (
         <span className={css(styles.buttonIcon, styles.modifiers.start)}>{icon}</span>
       )}
       {children}
-      {variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (
+      {variant !== ButtonVariant.plain && icon && (iconPosition === 'end' || iconPosition === 'right') && (
         <span className={css(styles.buttonIcon, styles.modifiers.end)}>{icon}</span>
       )}
       {countOptions && (

package/src/components/Button/examples/ButtonVariations.tsx

@@ -7,18 +7,30 @@ import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 
 export const ButtonVariations: React.FunctionComponent = () => (
   <React.Fragment>
-    <Button variant="primary" ouiaId="Primary">Primary</Button> <Button variant="secondary" ouiaId="Secondary">Secondary</Button>{' '}
+    <Button variant="primary" ouiaId="Primary">
+      Primary
+    </Button>{' '}
+    <Button variant="secondary" ouiaId="Secondary">
+      Secondary
+    </Button>{' '}
     <Button variant="secondary" ouiaId="DangerSecondary" isDanger>
       Danger Secondary
     </Button>{' '}
-    <Button variant="tertiary" ouiaId="Tertiary">Tertiary</Button> <Button variant="danger" ouiaId="Danger">Danger</Button>{' '}
-    <Button variant="warning" ouiaId="Warning">Warning</Button>
+    <Button variant="tertiary" ouiaId="Tertiary">
+      Tertiary
+    </Button>{' '}
+    <Button variant="danger" ouiaId="Danger">
+      Danger
+    </Button>{' '}
+    <Button variant="warning" ouiaId="Warning">
+      Warning
+    </Button>
     <br />
     <br />
     <Button variant="link" icon={<PlusCircleIcon />}>
       Link
     </Button>{' '}
-    <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+    <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
       Link
     </Button>{' '}
     <Button variant="link" isInline>

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -180,11 +180,8 @@ export const CalendarMonth = ({
 
   useEffect(() => {
     // Calendar month should not be focused on page load
-    // Datepicker should place focus in calendar month when opened
     if ((shouldFocus || isDateFocused) && focusedDateValidated && focusRef.current) {
       focusRef.current.focus();
-    } else {
-      setShouldFocus(true);
     }
   }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
 

package/src/components/Card/Card.tsx

@@ -57,6 +57,8 @@ interface CardContextProps {
   isClickable: boolean;
   isSelectable: boolean;
   isDisabled: boolean;
+  // TODO: Remove hasSelectableInput when deprecated prop is removed
+  hasSelectableInput: boolean;
 }
 
 interface AriaProps {
@@ -160,7 +162,9 @@ export const Card: React.FunctionComponent<CardProps> = ({
         isExpanded,
         isClickable,
         isSelectable,
-        isDisabled
+        isDisabled,
+        // TODO: Remove hasSelectableInput when deprecated prop is removed
+        hasSelectableInput
       }}
     >
       {hasSelectableInput && (

package/src/components/Card/CardHeader.tsx

@@ -79,7 +79,8 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   ...props
 }: CardHeaderProps) => (
   <CardContext.Consumer>
-    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled }) => {
+    {/* TODO: Remove hasSelectableInput when deprecated props are removed */}
+    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled, hasSelectableInput }) => {
       const cardHeaderToggle = (
         <div className={css(styles.cardHeaderToggle)}>
           <Button
@@ -97,7 +98,11 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
         </div>
       );
 
-      if (actions?.actions && !(isClickable && isSelectable)) {
+      const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
+      // TODO: Remove following variable and update if block when deprecated prop is removed
+      // We don't want to throw a warning for the deprecated card
+      const isDeprecatedSelectableCard = hasSelectableInput;
+      if (actions?.actions && isClickableOrSelectableOnly && !isDeprecatedSelectableCard) {
         // eslint-disable-next-line no-console
         console.warn(
           `${

package/src/components/Card/CardHeaderMain.tsx

@@ -14,7 +14,7 @@ export const CardHeaderMain: React.FunctionComponent<CardHeaderMainProps> = ({
   className,
   ...props
 }: CardHeaderMainProps) => (
-  <div className={css(styles.cardHeaderMain ,className)} {...props}>
+  <div className={css(styles.cardHeaderMain, className)} {...props}>
     {children}
   </div>
 );

package/src/components/Card/CardTitle.tsx

@@ -28,7 +28,7 @@ export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
     return () => registerTitleId('');
   }, [registerTitleId, titleId]);
 
-    return (
+  return (
     <div className={css(styles.cardTitle)}>
       <Component className={css(styles.cardTitleText, className)} id={titleId || undefined} {...props}>
         {children}

package/src/components/Card/__tests__/CardSelectableActions.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CardSelectableActions } from '../CardSelectableActions';
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CardSelectableActions>Test</CardSelectableActions>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+  render(<CardSelectableActions data-testid="card-selectable-actions" />);
+
+  expect(screen.getByTestId('card-selectable-actions')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<CardSelectableActions>Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-v5-c-card__selectable-actions', () => {
+  render(<CardSelectableActions>Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-card__selectable-actions');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<CardSelectableActions className="test-class">Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});

package/src/components/Card/__tests__/__snapshots__/CardSelectableActions.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-card__selectable-actions"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Card/examples/Card.md

@@ -16,8 +16,8 @@ propComponents:
 ouia: true
 ---
 
-import pfLogo from './pfLogo.svg';
-import pfLogoSmall from './pf-logo-small.svg';
+import pfLogo from '../../assets/pfLogo.svg';
+import pfLogoSmall from '../../assets/pf-c-brand--logo-on-sm.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples

package/src/components/Card/examples/CardExpandableWithIcon.tsx

@@ -13,7 +13,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import pfLogoSmall from './pf-logo-small.svg';
+import pfLogoSmall from '../../assets/pf-c-brand--logo-on-sm.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardExpandableWithIcon: React.FunctionComponent = () => {

package/src/components/Card/examples/CardWithImageAndActions.tsx

@@ -15,7 +15,7 @@ import {
   Divider
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import pfLogo from './pfLogo.svg';
+import pfLogo from '../../assets/pfLogo.svg';
 
 export const CardWithImageAndActions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);

package/src/components/Card/examples/CardWithModifiers.tsx

@@ -8,13 +8,13 @@ export const CardWithModifiers: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <div style={{ marginBottom: '12px' }}>
-        {mods.map(mod => (
+        {mods.map((mod) => (
           <Checkbox
             id={mod}
             key={mod}
             label={mod}
             isChecked={modifiers[mod]}
-            onChange={(_event, checked) =>  {
+            onChange={(_event, checked) => {
               modifiers[mod] = checked;
               setModifiers({ ...modifiers });
             }}

package/src/components/Checkbox/Checkbox.tsx

@@ -48,7 +48,7 @@ interface CheckboxState {
   ouiaStateId: string;
 }
 
-export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
+class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
   static displayName = 'Checkbox';
   static defaultProps: PickOptional<CheckboxProps> = {
     className: '',
@@ -139,3 +139,5 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
     );
   }
 }
+
+export { Checkbox };

package/src/components/Chip/Chip.tsx

@@ -8,6 +8,8 @@ import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export interface ChipProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+  /** Badge to add to the chip. The badge will be rendered after the chip text. */
+  badge?: React.ReactNode;
   /** Content rendered inside the chip text */
   children?: React.ReactNode;
   /** Aria Label for close button */
@@ -50,7 +52,7 @@ interface ChipState {
   ouiaStateId: string;
 }
 
-export class Chip extends React.Component<ChipProps, ChipState> {
+class Chip extends React.Component<ChipProps, ChipState> {
   static displayName = 'Chip';
   constructor(props: ChipProps) {
     super(props);
@@ -84,6 +86,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
 
   renderOverflowChip = () => {
     const {
+      badge,
       children,
       className,
       onClick,
@@ -116,6 +119,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
       >
         <span className={css(styles.chipContent)}>
           <span className={css(styles.chipText)}>{children}</span>
+          {badge && badge}
         </span>
       </Component>
     );
@@ -123,6 +127,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
 
   renderInnerChip(id: string) {
     const {
+      badge,
       children,
       className,
       onClick,
@@ -151,6 +156,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
           <span ref={this.span} className={css(styles.chipText)} id={id}>
             {children}
           </span>
+          {badge && badge}
         </span>
         {!isReadOnly && (
           <span className={css(styles.chipActions)}>
@@ -191,3 +197,5 @@ export class Chip extends React.Component<ChipProps, ChipState> {
     );
   }
 }
+
+export { Chip };

package/src/components/Chip/ChipGroup.tsx

@@ -59,7 +59,7 @@ interface ChipGroupState {
   isTooltipVisible: boolean;
 }
 
-export class ChipGroup extends React.Component<ChipGroupProps, ChipGroupState> {
+class ChipGroup extends React.Component<ChipGroupProps, ChipGroupState> {
   static displayName = 'ChipGroup';
   constructor(props: ChipGroupProps) {
     super(props);
@@ -94,7 +94,7 @@ export class ChipGroup extends React.Component<ChipGroupProps, ChipGroupState> {
   }
 
   toggleCollapse = () => {
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       isOpen: !prevState.isOpen,
       isTooltipVisible: Boolean(
         this.headingRef.current && this.headingRef.current.offsetWidth < this.headingRef.current.scrollWidth
@@ -175,7 +175,7 @@ export class ChipGroup extends React.Component<ChipGroupProps, ChipGroupState> {
                 <li className={css(styles.chipGroupListItem)}>
                   <Chip
                     isOverflowChip
-                    onClick={event => {
+                    onClick={(event) => {
                       this.toggleCollapse();
                       onOverflowChipClick(event);
                     }}
@@ -205,6 +205,10 @@ export class ChipGroup extends React.Component<ChipGroupProps, ChipGroupState> {
       );
     };
 
-    return numChildren === 0 ? null : <GenerateId>{randomId => renderChipGroup(this.props.id || randomId)}</GenerateId>;
+    return numChildren === 0 ? null : (
+      <GenerateId>{(randomId) => renderChipGroup(this.props.id || randomId)}</GenerateId>
+    );
   }
 }
+
+export { ChipGroup };

package/src/components/Chip/examples/ChipDefault.tsx

@@ -47,9 +47,12 @@ export const ChipDefault: React.FunctionComponent = () => {
       )}
       {badgechip && (
         <React.Fragment>
-          <Chip key="chip3" onClick={() => deleteItem('badgechip')}>
+          <Chip
+            key="chip3"
+            onClick={() => deleteItem('badgechip')}
+            badge={<Badge isRead={badgechip.isRead}>{badgechip.count}</Badge>}
+          >
             {badgechip.name}
-            <Badge isRead={badgechip.isRead}>{badgechip.count}</Badge>
           </Chip>
           <br /> <br />
         </React.Fragment>

package/src/components/Chip/examples/ChipGroupInline.tsx

@@ -12,13 +12,13 @@ export const ChipGroupInline: React.FunctionComponent = () => {
 
   const deleteItem = (id: string) => {
     const copyOfChips = [...chips];
-    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+    const filteredCopy = copyOfChips.filter((chip) => chip !== id);
     setChips(filteredCopy);
   };
 
   return (
     <ChipGroup>
-      {chips.map(currentChip => (
+      {chips.map((currentChip) => (
         <Chip key={currentChip} onClick={() => deleteItem(currentChip)}>
           {currentChip}
         </Chip>

package/src/components/Chip/examples/ChipGroupRemovableCategories.tsx

@@ -7,7 +7,7 @@ export const ChipGroupRemovableCategories: React.FunctionComponent = () => {
 
   const deleteItem = (id: string, group: string[]) => {
     const copyOfChips = [...group];
-    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+    const filteredCopy = copyOfChips.filter((chip) => chip !== id);
 
     if (group === chipGroup1) {
       setChipGroup1(filteredCopy);
@@ -27,7 +27,7 @@ export const ChipGroupRemovableCategories: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <ChipGroup categoryName="Category one" isClosable onClick={() => deleteCategory(chipGroup1)}>
-        {chipGroup1.map(currentChip => (
+        {chipGroup1.map((currentChip) => (
           <Chip key={currentChip} onClick={() => deleteItem(currentChip, chipGroup1)}>
             {currentChip}
           </Chip>
@@ -35,7 +35,7 @@ export const ChipGroupRemovableCategories: React.FunctionComponent = () => {
       </ChipGroup>
       <br /> <br />
       <ChipGroup categoryName="Category two has a very long name" isClosable onClick={() => deleteCategory(chipGroup2)}>
-        {chipGroup2.map(currentChip => (
+        {chipGroup2.map((currentChip) => (
           <Chip key={currentChip} onClick={() => deleteItem(currentChip, chipGroup2)}>
             {currentChip}
           </Chip>

package/src/components/Chip/examples/ChipGroupWithCategories.tsx

@@ -12,13 +12,13 @@ export const ChipGroupWithCategories: React.FunctionComponent = () => {
 
   const deleteItem = (id: string) => {
     const copyOfChips = [...chips];
-    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+    const filteredCopy = copyOfChips.filter((chip) => chip !== id);
     setChips(filteredCopy);
   };
 
   return (
     <ChipGroup categoryName="Category one">
-      {chips.map(currentChip => (
+      {chips.map((currentChip) => (
         <Chip key={currentChip} onClick={() => deleteItem(currentChip)}>
           {currentChip}
         </Chip>

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -83,7 +83,7 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   ouiaSafe?: boolean;
 }
 
-export class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopyState> {
+class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopyState> {
   static displayName = 'ClipboardCopy';
   timer = null as number;
   constructor(props: ClipboardCopyProps) {
@@ -278,3 +278,5 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
     );
   };
 }
+
+export { ClipboardCopy };

package/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx

@@ -12,7 +12,7 @@ export interface ClipboardCopyExpandedProps extends Omit<ClipboardCopyProps, 'on
   isCode?: boolean;
 }
 
-export class ClipboardCopyExpanded extends React.Component<ClipboardCopyExpandedProps> {
+class ClipboardCopyExpanded extends React.Component<ClipboardCopyExpandedProps> {
   static displayName = 'ClipboardCopyExpanded';
   constructor(props: any) {
     super(props);
@@ -41,3 +41,5 @@ export class ClipboardCopyExpanded extends React.Component<ClipboardCopyExpanded
     );
   }
 }
+
+export { ClipboardCopyExpanded };

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -29,7 +29,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
           id="basic-copy-button"
           textId="code-content"
           aria-label="Copy to clipboard"
-          onClick={e => onClick(e, code)}
+          onClick={(e) => onClick(e, code)}
           exitDelay={copied ? 1500 : 600}
           maxWidth="110px"
           variant="plain"

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -14,7 +14,7 @@ export const ExpandableCodeBlock: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [copied, setCopied] = React.useState(false);
 
-  const onToggle = isExpanded => {
+  const onToggle = (isExpanded) => {
     setIsExpanded(isExpanded);
   };
 
@@ -50,7 +50,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
           id="expandable-copy-button"
           textId="code-content"
           aria-label="Copy to clipboard"
-          onClick={e => onClick(e, copyBlock)}
+          onClick={(e) => onClick(e, copyBlock)}
           exitDelay={copied ? 1500 : 600}
           maxWidth="110px"
           variant="plain"

package/src/components/DataList/DataList.tsx

@@ -51,7 +51,7 @@ export const DataListContext = React.createContext<Partial<DataListContextProps>
   isSelectable: false
 });
 
-export class DataList extends React.Component<DataListProps> {
+class DataList extends React.Component<DataListProps> {
   static displayName = 'DataList';
   static defaultProps: PickOptional<DataListProps> = {
     children: null,
@@ -115,3 +115,5 @@ export class DataList extends React.Component<DataListProps> {
     );
   }
 }
+
+export { DataList };

package/src/components/DataList/DataListItem.tsx

@@ -24,7 +24,7 @@ export interface DataListItemChildProps {
   rowid: string;
 }
 
-export class DataListItem extends React.Component<DataListItemProps> {
+class DataListItem extends React.Component<DataListItemProps> {
   static displayName = 'DataListItem';
   static defaultProps: DataListItemProps = {
     isExpanded: false,
@@ -116,3 +116,5 @@ export class DataListItem extends React.Component<DataListItemProps> {
     );
   }
 }
+
+export { DataListItem };

package/src/components/DataList/DataListItemRow.tsx

@@ -24,7 +24,7 @@ export const DataListItemRow: React.FunctionComponent<DataListItemRowProps> = ({
   <div className={css(styles.dataListItemRow, className, wrapModifier && styles.modifiers[wrapModifier])} {...props}>
     {React.Children.map(
       children,
-      child =>
+      (child) =>
         React.isValidElement(child) &&
         React.cloneElement(child as React.ReactElement<any>, {
           rowid

package/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap

@@ -164,7 +164,7 @@ exports[`DataList DataListAction dropdown 1`] = `
         data-ouia-component-id="OUIA-Generated-Dropdown-1"
         data-ouia-component-type="PF5/Dropdown"
         data-ouia-safe="true"
-        style="position: absolute; left: 0px; top: 0px; z-index: 9999;"
+        style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
       >
         <div
           class="pf-v5-c-menu__content"

package/src/components/DataList/examples/DataListDraggable.tsx

@@ -20,7 +20,7 @@ interface ItemType {
 }
 
 const getItems = (count: number) =>
-  Array.from({ length: count }, (_, idx) => idx).map(idx => ({
+  Array.from({ length: count }, (_, idx) => idx).map((idx) => ({
     id: `draggable-item-${idx}`,
     content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)
   }));