@patternfly/react-core 4.222.12 → 4.222.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.222.12",
+  "version": "4.222.15",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.73.12",
-    "@patternfly/react-styles": "^4.72.12",
-    "@patternfly/react-tokens": "^4.74.12",
+    "@patternfly/react-icons": "^4.73.15",
+    "@patternfly/react-styles": "^4.72.15",
+    "@patternfly/react-tokens": "^4.74.15",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.197.0",
+    "@patternfly/patternfly": "4.200.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "38768ae0d7afdf586573a16af314bc3e67b0d73f"
+  "gitHead": "95acf13e41106a55890dd36b6764104a0b8f4b63"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -55,6 +55,8 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
   className?: string;
   /** @hide Internal prop to allow pressing escape in select menu to not close popover */
   onSelectToggle?: (open: boolean) => void;
+  /** Flag to set browser focus on the passed date **/
+  isDateFocused?: boolean;
 }
 
 // Must be numeric given current header design
@@ -110,19 +112,24 @@ export const CalendarMonth = ({
   nextMonthAriaLabel = 'Next month',
   yearInputAriaLabel = 'Select year',
   cellAriaLabel,
+  isDateFocused = false,
   ...props
 }: CalendarProps) => {
   const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(monthNum => new Date(1990, monthNum)).map(monthFormat);
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
   // eslint-disable-next-line prefer-const
-  let [focusedDate, setFocusedDate] = React.useState(new Date(dateProp));
-  if (!isValidDate(focusedDate)) {
-    if (isValidDate(rangeStart)) {
-      focusedDate = rangeStart;
+  const [focusedDate, setFocusedDate] = React.useState(() => {
+    const initDate = new Date(dateProp);
+    if (isValidDate(initDate)) {
+      return initDate;
     } else {
-      focusedDate = today;
+      if (isValidDate(rangeStart)) {
+        return rangeStart;
+      } else {
+        return today;
+      }
     }
-  }
+  });
   const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
   const focusRef = React.useRef<HTMLButtonElement>();
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
@@ -131,21 +138,22 @@ export const CalendarMonth = ({
   const isValidated = (date: Date) => validators.every(validator => validator(date));
   const focusedDateValidated = isValidated(focusedDate);
   useEffect(() => {
-    if (!(isValidDate(dateProp) && isSameDate(focusedDate, dateProp))) {
+    if (isValidDate(dateProp) && !isSameDate(focusedDate, dateProp)) {
       setFocusedDate(dateProp);
+    } else if (!dateProp) {
+      setFocusedDate(today);
     }
   }, [dateProp]);
 
   useEffect(() => {
-    // When using header controls don't move focus
-    if (shouldFocus) {
-      if (focusRef.current && focusedDateValidated) {
-        focusRef.current.focus();
-      }
+    // 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]);
+  }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
 
   const onMonthClick = (newDate: Date) => {
     setFocusedDate(newDate);

package/src/components/DatePicker/DatePicker.tsx

@@ -8,6 +8,7 @@ import { InputGroup } from '../InputGroup/InputGroup';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import { CalendarMonth, CalendarFormat, isValidDate } from '../CalendarMonth';
 import { useImperativeHandle } from 'react';
+import { KeyTypes } from '../../helpers';
 
 export interface DatePickerProps
   extends CalendarFormat,
@@ -36,8 +37,13 @@ export interface DatePickerProps
   helperText?: React.ReactNode;
   /** Aria label for the button to open the date picker */
   buttonAriaLabel?: string;
-  /** The element to append the popover to */
-  appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement);
+  /** The container to append the menu to. Defaults to 'parent'.
+   * If your menu is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * menuAppendTo={() => document.body}
+   * menuAppendTo={document.getElementById('target')}
+   */
+  appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'parent';
   /** Props to pass to the Popover */
   popoverProps?: Omit<PopoverProps, 'appendTo'>;
   /** Functions that returns an error message if a date is invalid */
@@ -49,8 +55,13 @@ export interface DatePickerProps
 export interface DatePickerRef {
   /** Sets the calendar open status */
   setCalendarOpen: (isOpen: boolean) => void;
-  /** Toggles the calendar open status */
-  toggleCalendar: () => void;
+  /** Toggles the calendar open status. If no parameters are passed, the calendar will simply toggle its open status.
+   * If the isOpen parameter is passed, that will set the calendar open status to the value of the isOpen parameter.
+   * If the eventKey parameter is set to 'Escape', that will invoke the date pickers onEscapePress event to toggle the
+   * correct control appropriately. */
+  toggleCalendar: (isOpen?: boolean, eventKey?: string) => void;
+  /** Current calendar open status */
+  isCalendarOpen: boolean;
 }
 
 export const yyyyMMddFormat = (date: Date) =>
@@ -74,7 +85,7 @@ const DatePickerBase = (
     onBlur = (): any => undefined,
     invalidFormatText = 'Invalid date',
     helperText,
-    appendTo,
+    appendTo = 'parent',
     popoverProps,
     monthFormat,
     weekdayFormat,
@@ -98,6 +109,7 @@ const DatePickerBase = (
   const widthChars = React.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]);
   const style = { '--pf-c-date-picker__input--c-form-control--width-chars': widthChars, ...styleProps };
   const buttonRef = React.useRef<HTMLButtonElement>();
+  const datePickerWrapperRef = React.useRef<HTMLDivElement>();
 
   React.useEffect(() => {
     setValue(valueProp);
@@ -159,13 +171,21 @@ const DatePickerBase = (
     ref,
     () => ({
       setCalendarOpen: (isOpen: boolean) => setPopoverOpen(isOpen),
-      toggleCalendar: () => setPopoverOpen(prev => !prev)
+      toggleCalendar: (setOpen?: boolean, eventKey?: string) => {
+        if (eventKey === KeyTypes.Escape && popoverOpen && !selectOpen) {
+          setPopoverOpen(prev => (setOpen !== undefined ? setOpen : !prev));
+        }
+      },
+      isCalendarOpen: popoverOpen
     }),
-    [setPopoverOpen]
+    [setPopoverOpen, popoverOpen, selectOpen]
   );
 
+  const getParentElement = () =>
+    datePickerWrapperRef && datePickerWrapperRef.current ? datePickerWrapperRef.current : null;
+
   return (
-    <div className={css(styles.datePicker, className)} style={style} {...props}>
+    <div className={css(styles.datePicker, className)} ref={datePickerWrapperRef} style={style} {...props}>
       <Popover
         position="bottom"
         bodyContent={
@@ -182,14 +202,16 @@ const DatePickerBase = (
             dayFormat={dayFormat}
             weekStart={weekStart}
             rangeStart={rangeStart}
+            isDateFocused
           />
         }
         showClose={false}
         isVisible={popoverOpen}
         shouldClose={(_1, _2, event) => {
           event = event as KeyboardEvent;
-          // Let the select menu close
-          if (event.keyCode && event.keyCode === 27 && selectOpen) {
+          if (event.key === KeyTypes.Escape && selectOpen) {
+            event.stopPropagation();
+            setSelectOpen(false);
             return false;
           }
           // Let our button handle toggling
@@ -197,12 +219,15 @@ const DatePickerBase = (
             return false;
           }
           setPopoverOpen(false);
+          if (event.key === KeyTypes.Escape && popoverOpen) {
+            event.stopPropagation();
+          }
           return true;
         }}
         withFocusTrap
         hasNoPadding
         hasAutoWidth
-        appendTo={appendTo}
+        appendTo={appendTo === 'parent' ? getParentElement() : appendTo}
         {...popoverProps}
       >
         <div className={styles.datePickerInput}>

package/src/components/Label/Label.tsx

@@ -110,15 +110,15 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   const editableInputRef = React.useRef<HTMLInputElement>();
 
   React.useEffect(() => {
-    document.addEventListener('click', onDocClick);
+    document.addEventListener('mousedown', onDocMouseDown);
     document.addEventListener('keydown', onKeyDown);
     return () => {
-      document.removeEventListener('click', onDocClick);
+      document.removeEventListener('mousedown', onDocMouseDown);
       document.removeEventListener('keydown', onKeyDown);
     };
   });
 
-  const onDocClick = (event: MouseEvent) => {
+  const onDocMouseDown = (event: MouseEvent) => {
     if (
       isEditableActive &&
       editableInputRef &&

package/src/components/LabelGroup/LabelGroup.tsx

@@ -58,6 +58,8 @@ export interface LabelGroupProps extends React.HTMLProps<HTMLUListElement> {
   hasEditableTextArea?: boolean;
   /** @beta Additional props passed to the editable textarea. */
   editableTextAreaProps?: any;
+  /** @beta Control for adding new labels */
+  addLabelControl?: React.ReactNode;
 }
 
 interface LabelGroupState {
@@ -149,6 +151,7 @@ export class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState
       isEditable,
       hasEditableTextArea,
       editableTextAreaProps,
+      addLabelControl,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...rest
     } = this.props;
@@ -189,6 +192,7 @@ export class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState
                 </Label>
               </li>
             )}
+            {addLabelControl && <li className={css(styles.labelGroupListItem)}>{addLabelControl}</li>}
             {isEditable && hasEditableTextArea && (
               <li className={css(styles.labelGroupListItem, styles.modifiers.textarea)}>
                 <textarea className={css(styles.labelGroupTextarea)} rows={1} tabIndex={0} {...editableTextAreaProps} />
@@ -228,7 +232,7 @@ export class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState
       );
     };
 
-    return numChildren === 0 ? null : (
+    return numChildren === 0 && addLabelControl === undefined ? null : (
       <GenerateId>{randomId => renderLabelGroup(this.props.id || randomId)}</GenerateId>
     );
   }

package/src/components/LabelGroup/examples/LabelGroup.md

@@ -40,3 +40,10 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 
 ```ts file="LabelGroupEditableLabels.tsx" isBeta
 ```
+
+### Editable labels with add button
+
+For additional documentation that showcases adding a new label, see [label group demos](/components/label-group/react-demos).
+
+```ts file="LabelGroupEditableAdd.tsx"
+```

package/src/components/LabelGroup/examples/LabelGroupEditableAdd.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { LabelGroup, Label } from '@patternfly/react-core';
+
+export const LabelGroupEditableAdd: React.FunctionComponent = () => {
+  const [idIndex, setIdIndex] = React.useState<number>(3);
+  const [labels, setLabels] = React.useState<any>([
+    { name: 'Label 1', id: 0 },
+    { name: 'Label 2', id: 1 },
+    {
+      name: 'Label 3',
+      props: {
+        isEditable: true,
+        editableProps: {
+          'aria-label': 'label editable text'
+        }
+      },
+      id: 2
+    }
+  ]);
+
+  const onClose = (labelId: string) => {
+    setLabels(labels.filter((l: any) => l.id !== labelId));
+  };
+
+  const onEdit = (nextText: string, index: number) => {
+    const copy = [...labels];
+    copy[index] = { name: nextText, props: labels[index].props, id: labels[index].id };
+    setLabels(copy);
+  };
+
+  const onAdd = () => {
+    setLabels([
+      {
+        name: 'New Label',
+        props: {
+          isEditable: true,
+          editableProps: {
+            'aria-label': 'label editable text'
+          }
+        },
+        id: idIndex
+      },
+      ...labels
+    ]);
+    setIdIndex(idIndex + 1);
+  };
+
+  return (
+    <LabelGroup
+      categoryName="Label group 1"
+      numLabels={5}
+      isEditable
+      addLabelControl={
+        <Label color="blue" variant="outline" isOverflowLabel onClick={onAdd}>
+          Add label
+        </Label>
+      }
+    >
+      {labels.map((label, index) => (
+        <Label
+          key={`${label.name}-${index}`}
+          id={`${label.name}-${index}`}
+          color="blue"
+          onClose={() => onClose(label.id)}
+          onEditCancel={prevText => onEdit(prevText, index)}
+          onEditComplete={newText => onEdit(newText, index)}
+          {...label.props}
+        >
+          {label.name}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};

package/src/components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { LabelGroup, Label, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
+
+export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
+  const toggleRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
+
+  const [idIndex, setIdIndex] = React.useState<number>(3);
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [labels, setLabels] = React.useState<any>([
+    { name: 'Label 1', id: 0 },
+    { name: 'Label 2', id: 1 },
+    {
+      name: 'Label 3',
+      props: {
+        isEditable: true,
+        editableProps: {
+          'aria-label': 'label editable text'
+        }
+      },
+      id: 2
+    }
+  ]);
+
+  const onClose = (labelId: string) => {
+    setLabels(labels.filter((l: any) => l.id !== labelId));
+  };
+
+  const onEdit = (nextText: string, index: number) => {
+    const copy = [...labels];
+    copy[index] = { name: nextText, props: labels[index].props, id: labels[index].id };
+    setLabels(copy);
+  };
+
+  const onAdd = (labelText: string) => {
+    setLabels([
+      {
+        name: labelText,
+        id: idIndex
+      },
+      ...labels
+    ]);
+    setIdIndex(idIndex + 1);
+    setIsOpen(!isOpen);
+  };
+
+  const handleMenuKeys = (event: KeyboardEvent) => {
+    if (isOpen && menuRef.current.contains(event.target as Node)) {
+      if (event.key === 'Escape' || event.key === 'Tab') {
+        setIsOpen(!isOpen);
+        toggleRef.current.focus();
+      }
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      isOpen &&
+      !(menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node))
+    ) {
+      setIsOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen, menuRef]);
+
+  const onToggleClick = () => {
+    setTimeout(() => {
+      if (menuRef.current) {
+        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }
+    }, 0);
+    setIsOpen(!isOpen);
+  };
+
+  const menu = (
+    <Menu ref={menuRef} onSelect={(_ev, itemId) => onAdd(itemId.toString())}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId="Label text 1">Label text 1</MenuItem>
+          <MenuItem itemId="Label text 2">Label text 2</MenuItem>
+          <MenuItem itemId="Label text 3">Label text 3</MenuItem>
+          <MenuItem itemId="Label text 4">Label text 4</MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  const toggle = (
+    <div ref={toggleRef}>
+      <Label color="blue" variant="outline" isOverflowLabel onClick={onToggleClick}>
+        Add label
+      </Label>
+    </div>
+  );
+
+  return (
+    <div ref={containerRef}>
+      <LabelGroup
+        categoryName="Label group 1"
+        numLabels={5}
+        isEditable
+        addLabelControl={
+          <Popper
+            trigger={toggle}
+            popper={menu}
+            appendTo={containerRef.current}
+            isVisible={isOpen}
+            popperMatchesTriggerWidth={false}
+          />
+        }
+      >
+        {labels.map((label, index) => (
+          <Label
+            key={`${label.name}-${index}`}
+            id={`${label.name}-${index}`}
+            color="blue"
+            onClose={() => onClose(label.id)}
+            onEditCancel={prevText => onEdit(prevText, index)}
+            onEditComplete={newText => onEdit(newText, index)}
+            {...label.props}
+          >
+            {label.name}
+          </Label>
+        ))}
+      </LabelGroup>
+    </div>
+  );
+};