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

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)
   }));

package/src/components/DatePicker/DatePicker.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DatePicker/date-picker';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
+import calendarMonthStyles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
 import { TextInput, TextInputProps } from '../TextInput/TextInput';
 import { Popover, PopoverProps } from '../Popover/Popover';
 import { InputGroup, InputGroupItem } from '../InputGroup';
@@ -12,6 +13,14 @@ import { KeyTypes } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
 import { HelperText, HelperTextItem } from '../HelperText';
 
+/** Props that customize the requirement of a date */
+export interface DatePickerRequiredObject {
+  /** Flag indicating the date is required. */
+  isRequired?: boolean;
+  /** Error message to display when the text input is empty and the isRequired prop is also passed in. */
+  emptyDateText?: string;
+}
+
 /** The main date picker component. */
 
 export interface DatePickerProps
@@ -32,7 +41,7 @@ export interface DatePickerProps
   className?: string;
   /** How to format the date in the text input. */
   dateFormat?: (date: Date) => string;
-  /** How to format the date in the text input. */
+  /** How to parse the date in the text input. */
   dateParse?: (value: string) => Date;
   /** Helper text to display alongside the date picker. Expects a HelperText component. */
   helperText?: React.ReactNode;
@@ -40,7 +49,7 @@ export interface DatePickerProps
   inputProps?: TextInputProps;
   /** Flag indicating the date picker is disabled. */
   isDisabled?: boolean;
-  /** Error message to display when the text input cannot be parsed. */
+  /** Error message to display when the text input contains a non-empty value in an invalid format. */
   invalidFormatText?: string;
   /** Callback called every time the text input loses focus. */
   onBlur?: (event: any, value: string, date?: Date) => void;
@@ -50,6 +59,8 @@ export interface DatePickerProps
   placeholder?: string;
   /** Props to pass to the popover that contains the calendar month component. */
   popoverProps?: Partial<Omit<PopoverProps, 'appendTo'>>;
+  /** Options to customize the requirement of a date */
+  requiredDateOptions?: DatePickerRequiredObject;
   /** Functions that returns an error message if a date is invalid. */
   validators?: ((date: Date) => string)[];
   /** Value of the text input. */
@@ -95,6 +106,7 @@ const DatePickerBase = (
     onChange = (): any => undefined,
     onBlur = (): any => undefined,
     invalidFormatText = 'Invalid date',
+    requiredDateOptions,
     helperText,
     appendTo = 'inline',
     popoverProps,
@@ -117,11 +129,14 @@ const DatePickerBase = (
   const [popoverOpen, setPopoverOpen] = React.useState(false);
   const [selectOpen, setSelectOpen] = React.useState(false);
   const [pristine, setPristine] = React.useState(true);
+  const [textInputFocused, setTextInputFocused] = React.useState(false);
   const widthChars = React.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]);
   const style = { '--pf-v5-c-date-picker__input--c-form-control--width-chars': widthChars, ...styleProps };
   const buttonRef = React.useRef<HTMLButtonElement>();
   const datePickerWrapperRef = React.useRef<HTMLDivElement>();
   const triggerRef = React.useRef<HTMLDivElement>();
+  const dateIsRequired = requiredDateOptions?.isRequired || false;
+  const emptyDateText = requiredDateOptions?.emptyDateText || 'Date cannot be blank';
 
   React.useEffect(() => {
     setValue(valueProp);
@@ -134,6 +149,9 @@ const DatePickerBase = (
     if (errorText && isValidDate(newValueDate)) {
       setError(newValueDate);
     }
+    if (value === '' && !pristine && !textInputFocused) {
+      dateIsRequired ? setErrorText(emptyDateText) : setErrorText('');
+    }
   }, [value]);
 
   const setError = (date: Date) => {
@@ -153,17 +171,23 @@ const DatePickerBase = (
   };
 
   const onInputBlur = (event: any) => {
-    if (pristine) {
-      return;
-    }
+    setTextInputFocused(false);
     const newValueDate = dateParse(value);
-    if (isValidDate(newValueDate)) {
-      onBlur(event, value, new Date(newValueDate));
+    const dateIsValid = isValidDate(newValueDate);
+    const onBlurDateArg = dateIsValid ? new Date(newValueDate) : undefined;
+    onBlur(event, value, onBlurDateArg);
+
+    if (dateIsValid) {
       setError(newValueDate);
-    } else {
-      onBlur(event, value);
+    }
+
+    if (!dateIsValid && !pristine) {
       setErrorText(invalidFormatText);
     }
+
+    if (!dateIsValid && pristine && requiredDateOptions?.isRequired) {
+      setErrorText(emptyDateText);
+    }
   };
 
   const onDateClick = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, newValueDate: Date) => {
@@ -197,9 +221,15 @@ const DatePickerBase = (
     [setPopoverOpen, popoverOpen, selectOpen]
   );
 
+  const createFocusSelectorString = (modifierClass: string) =>
+    `.${calendarMonthStyles.calendarMonthDatesCell}.${modifierClass} .${calendarMonthStyles.calendarMonthDate}`;
+  const focusSelectorForSelectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.selected);
+  const focusSelectorForUnselectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.current);
+
   return (
     <div className={css(styles.datePicker, className)} ref={datePickerWrapperRef} style={style} {...props}>
       <Popover
+        elementToFocus={valueDate ? focusSelectorForSelectedDate : focusSelectorForUnselectedDate}
         position="bottom"
         bodyContent={
           <CalendarMonth
@@ -215,7 +245,6 @@ const DatePickerBase = (
             dayFormat={dayFormat}
             weekStart={weekStart}
             rangeStart={rangeStart}
-            isDateFocused
           />
         }
         showClose={false}
@@ -236,6 +265,10 @@ const DatePickerBase = (
             event.stopPropagation();
             setPopoverOpen(false);
             hideFunction();
+            // If datepicker is required and the popover is opened without the text input
+            // first receiving focus, we want to validate that the text input is not blank upon
+            // closing the popover
+            requiredDateOptions?.isRequired && !value && setErrorText(emptyDateText);
           }
           if (event.key === KeyTypes.Escape && popoverOpen) {
             event.stopPropagation();
@@ -254,12 +287,14 @@ const DatePickerBase = (
             <InputGroupItem isFill>
               <TextInput
                 isDisabled={isDisabled}
+                isRequired={requiredDateOptions?.isRequired}
                 aria-label={ariaLabel}
                 placeholder={placeholder}
                 validated={errorText.trim() ? 'error' : 'default'}
                 value={value}
                 onChange={onTextInput}
                 onBlur={onInputBlur}
+                onFocus={() => setTextInputFocused(true)}
                 onKeyPress={onKeyPress}
                 {...inputProps}
               />