@patternfly/react-core 4.222.13 → 4.222.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.222.13",
+  "version": "4.222.14",
   "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.13",
-    "@patternfly/react-styles": "^4.72.13",
-    "@patternfly/react-tokens": "^4.74.13",
+    "@patternfly/react-icons": "^4.73.14",
+    "@patternfly/react-styles": "^4.72.14",
+    "@patternfly/react-tokens": "^4.74.14",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.198.1",
+    "@patternfly/patternfly": "4.198.2",
     "@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": "12411175163290e8c6dd598cfb5ce53ba58688b3"
+  "gitHead": "0d04c7d4c7970f2be7e485e1f4bd0bda94ee5d46"
 }

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

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

@@ -0,0 +1,356 @@
+import React from 'react';
+import {
+  LabelGroup,
+  Label,
+  Modal,
+  ModalVariant,
+  Button,
+  Form,
+  FormGroup,
+  TextInput,
+  Menu,
+  MenuContent,
+  MenuList,
+  MenuItem,
+  MenuToggle,
+  Radio,
+  Popper
+} from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
+  const [isModalOpen, setModalOpen] = React.useState<boolean>(false);
+  const [idIndex, setIdIndex] = React.useState<number>(3);
+  const [labelText, setLabelText] = React.useState<string>('');
+  const [color, setColor] = React.useState<string>();
+  const [icon, setIcon] = React.useState<any>();
+  const [labelType, setLabelType] = React.useState<string>('filled');
+  const [isClosable, setIsCloseable] = React.useState<boolean>(false);
+  const [isEditable, setIsEditable] = React.useState<boolean>(false);
+  const labelInputRef = React.useRef();
+
+  const [isColorOpen, setIsColorOpen] = React.useState<boolean>(false);
+  const colorMenuRef = React.useRef<HTMLDivElement>();
+  const colorContainerRef = React.useRef<HTMLDivElement>();
+  const colorToggleRef = React.useRef<HTMLButtonElement>();
+
+  const [isIconOpen, setIsIconOpen] = React.useState<boolean>(false);
+  const iconMenuRef = React.useRef<HTMLDivElement>();
+  const iconContainerRef = React.useRef<HTMLDivElement>();
+  const iconToggleRef = React.useRef<HTMLButtonElement>();
+
+  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 = () => {
+    let labelIcon = null;
+    if (icon === 'Info circle icon') {
+      labelIcon = <InfoCircleIcon />;
+    }
+
+    setLabels([
+      {
+        name: labelText || 'New Label',
+        props: {
+          color: color ? color.toLowerCase() : 'gray',
+          icon: labelIcon,
+          variant: labelType || 'filled',
+          ...(!isClosable && isClosable !== undefined && { onClose: null }),
+          isEditable: isEditable !== undefined ? isEditable : true,
+          ...(isEditable && {
+            editableProps: {
+              'aria-label': 'label editable text'
+            }
+          })
+        },
+        id: idIndex
+      },
+      ...labels
+    ]);
+    setModalOpen(!isModalOpen);
+    setIdIndex(idIndex + 1);
+    setLabelText('');
+    setColor(null);
+    setIcon(null);
+    setLabelType('filled');
+    setIsCloseable(false);
+    setIsEditable(false);
+  };
+
+  const handleModalToggle = () => {
+    setModalOpen(!isModalOpen);
+  };
+
+  React.useEffect(() => {
+    if (isModalOpen && labelInputRef && labelInputRef.current) {
+      (labelInputRef.current as HTMLInputElement).focus();
+    }
+  }, [isModalOpen]);
+
+  const handleMenuKeys = (event: KeyboardEvent) => {
+    if (isColorOpen && colorMenuRef.current.contains(event.target as Node)) {
+      if (event.key === 'Escape' || event.key === 'Tab') {
+        setIsColorOpen(!isColorOpen);
+        colorToggleRef.current.focus();
+      }
+    }
+    if (isIconOpen && iconMenuRef.current.contains(event.target as Node)) {
+      if (event.key === 'Escape' || event.key === 'Tab') {
+        setIsIconOpen(!isIconOpen);
+        iconToggleRef.current.focus();
+      }
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (isColorOpen && !colorMenuRef.current.contains(event.target as Node)) {
+      setIsColorOpen(false);
+    }
+    if (isIconOpen && !iconMenuRef.current.contains(event.target as Node)) {
+      setIsIconOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isColorOpen, isIconOpen, colorMenuRef, iconMenuRef]);
+
+  const onColorToggleClick = (ev: React.MouseEvent) => {
+    ev.stopPropagation(); // Stop handleClickOutside from handling
+    setTimeout(() => {
+      if (colorMenuRef.current) {
+        const firstElement = colorMenuRef.current.querySelector('li > button:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }
+    }, 0);
+    setIsColorOpen(!isColorOpen);
+  };
+
+  const colorToggle = (
+    <MenuToggle ref={colorToggleRef} onClick={onColorToggleClick} isExpanded={isColorOpen}>
+      {color || 'Select'}
+    </MenuToggle>
+  );
+
+  const colorMenu = (
+    <Menu
+      ref={colorMenuRef}
+      activeItemId={color}
+      onSelect={(_ev, itemId) => {
+        setColor(itemId.toString());
+        setIsColorOpen(false);
+      }}
+      selected={color}
+    >
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId="Gray">Gray</MenuItem>
+          <MenuItem itemId="Blue">Blue</MenuItem>
+          <MenuItem itemId="Green">Green</MenuItem>
+          <MenuItem itemId="Orange">Orange</MenuItem>
+          <MenuItem itemId="Red">Red</MenuItem>
+          <MenuItem itemId="Purple">Purple</MenuItem>
+          <MenuItem itemId="Cyan">Cyan</MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  const onIconToggleClick = (ev: React.MouseEvent) => {
+    ev.stopPropagation(); // Stop handleClickOutside from handling
+    setTimeout(() => {
+      if (iconMenuRef.current) {
+        const firstElement = iconMenuRef.current.querySelector('li > button:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }
+    }, 0);
+    setIsIconOpen(!isIconOpen);
+  };
+
+  const iconToggle = (
+    <MenuToggle ref={iconToggleRef} onClick={onIconToggleClick} isExpanded={isIconOpen}>
+      {icon || 'Select'}
+    </MenuToggle>
+  );
+
+  const iconMenu = (
+    <Menu
+      ref={iconMenuRef}
+      activeItemId={icon}
+      onSelect={(_ev, itemId) => {
+        setIcon(itemId.toString());
+        setIsIconOpen(false);
+      }}
+      selected={icon}
+    >
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId="No icon">No icon</MenuItem>
+          <MenuItem itemId="Info circle icon">
+            <InfoCircleIcon />
+            Info circle icon
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <div>
+      <LabelGroup
+        categoryName="Label group 1"
+        numLabels={5}
+        isEditable
+        addLabelControl={
+          <Label color="blue" variant="outline" isOverflowLabel onClick={handleModalToggle}>
+            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>
+      <Modal
+        variant={ModalVariant.small}
+        title="Add Label"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="create" variant="primary" form="create-label-form" onClick={onAdd}>
+            Save
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        <Form id="create-label-form">
+          <FormGroup label="Label text" fieldId="create-label-form-label-text">
+            <TextInput
+              type="text"
+              id="create-label-form-label-text"
+              name="create-label-form-label-text"
+              value={labelText}
+              onChange={setLabelText}
+              ref={labelInputRef}
+            />
+          </FormGroup>
+          <FormGroup label="Color" fieldId="create-label-form-color">
+            <div ref={colorContainerRef}>
+              <Popper
+                trigger={colorToggle}
+                popper={colorMenu}
+                appendTo={colorContainerRef.current}
+                isVisible={isColorOpen}
+                popperMatchesTriggerWidth={false}
+              />
+            </div>
+          </FormGroup>
+          <FormGroup label="Icon" fieldId="create-label-form-icon">
+            <div ref={iconContainerRef}>
+              <Popper
+                trigger={iconToggle}
+                popper={iconMenu}
+                appendTo={iconContainerRef.current}
+                isVisible={isIconOpen}
+                popperMatchesTriggerWidth={false}
+              />
+            </div>
+          </FormGroup>
+          <FormGroup label="Label type" fieldId="create-label-form-label-type">
+            <Radio
+              isChecked={labelType === 'filled'}
+              name="filled-label"
+              onChange={() => setLabelType('filled')}
+              label="Filled"
+              id="radio-filled"
+              value="check1"
+            />
+            <Radio
+              isChecked={labelType === 'outline'}
+              name="outline-label"
+              onChange={() => setLabelType('outline')}
+              label="Outlined"
+              id="radio-outline"
+              value="check2"
+            />
+          </FormGroup>
+          <FormGroup label="Dismissable" fieldId="create-label-form-dismissable">
+            <Radio
+              isChecked={isClosable === true}
+              name="closeable-label"
+              onChange={() => setIsCloseable(true)}
+              label="Yes"
+              id="radio-closable"
+              value="check1"
+            />
+            <Radio
+              isChecked={isClosable === false}
+              name="not-closeable-label"
+              onChange={() => setIsCloseable(false)}
+              label="No"
+              id="radio-not-closable"
+              value="check2"
+            />
+          </FormGroup>
+          <FormGroup label="Editable" fieldId="create-label-form-editable">
+            <Radio
+              isChecked={isEditable === true}
+              name="editable-label"
+              onChange={() => setIsEditable(true)}
+              label="Yes"
+              id="radio-editable"
+              value="check3"
+            />
+            <Radio
+              isChecked={isEditable === false}
+              name="not-editable-label"
+              onChange={() => setIsEditable(false)}
+              label="No"
+              id="radio-not-editable"
+              value="check4"
+            />
+          </FormGroup>
+        </Form>
+      </Modal>
+    </div>
+  );
+};

package/src/demos/LabelGroupDemos.md

@@ -0,0 +1,18 @@
+---
+id: Label group
+section: components
+---
+
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+## Demos
+
+### Editable labels with add dropdown
+
+```ts file="../components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx"
+```
+
+### Editable labels with add modal
+
+```ts file="../components/LabelGroup/examples/LabelGroupEditableAddModal.tsx"
+```