@patternfly/react-core 4.232.11 → 4.232.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.232.11",
+  "version": "4.232.12",
   "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",
@@ -50,9 +50,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.83.11",
-    "@patternfly/react-styles": "^4.82.11",
-    "@patternfly/react-tokens": "^4.84.11",
+    "@patternfly/react-icons": "^4.83.12",
+    "@patternfly/react-styles": "^4.82.12",
+    "@patternfly/react-tokens": "^4.84.12",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -76,5 +76,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "3b4fe0a85d88aa9616d7a6768d187d6fc87abb32"
+  "gitHead": "f78c7a0fe58401bb6a9e3b380067a98af76cf523"
 }

package/src/components/Label/Label.tsx

@@ -104,7 +104,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   render,
   ...props
 }: LabelProps) => {
-  const [isEditableActive, setIsEditableActive] = useState(false);
+  const [isEditableActive, setIsEditableActive] = useState<boolean>(false);
   const [currValue, setCurrValue] = useState(children);
   const editableButtonRef = React.useRef<HTMLButtonElement>();
   const editableInputRef = React.useRef<HTMLInputElement>();
@@ -151,6 +151,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         onEditComplete && onEditComplete(editableInputRef.current.value);
       }
       setIsEditableActive(false);
+      editableButtonRef?.current?.focus();
     }
     if (isEditableActive && key === 'Escape') {
       event.preventDefault();
@@ -161,6 +162,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         onEditCancel && onEditCancel(children as string);
       }
       setIsEditableActive(false);
+      editableButtonRef?.current?.focus();
     }
     if (!isEditableActive && key === 'Enter') {
       event.preventDefault();

package/src/components/LabelGroup/LabelGroup.tsx

@@ -52,13 +52,13 @@ export interface LabelGroupProps extends React.HTMLProps<HTMLUListElement> {
     | 'right-end';
   /** Flag to implement a vertical layout */
   isVertical?: boolean;
-  /** @beta Flag indicating contained labels are editable. Allows spacing for a text input after the labels. */
+  /** Flag indicating contained labels are editable. Allows spacing for a text input after the labels. */
   isEditable?: boolean;
-  /** @beta Flag indicating the editable label group should be appended with a textarea. */
+  /** Flag indicating the editable label group should be appended with a textarea. */
   hasEditableTextArea?: boolean;
-  /** @beta Additional props passed to the editable textarea. */
+  /** Additional props passed to the editable textarea. */
   editableTextAreaProps?: any;
-  /** @beta Control for adding new labels */
+  /** Control for adding new labels */
   addLabelControl?: React.ReactNode;
 }
 

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

@@ -38,7 +38,7 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 
 ### Editable labels
 
-```ts file="LabelGroupEditableLabels.tsx" isBeta
+```ts file="LabelGroupEditableLabels.tsx"
 ```
 
 ### Editable labels with add button

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

@@ -58,7 +58,7 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
     >
       {labels.map((label, index) => (
         <Label
-          key={`${label.name}-${index}`}
+          key={label.id}
           id={`${label.name}-${index}`}
           color="blue"
           onClose={() => onClose(label.id)}

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

@@ -121,7 +121,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
       >
         {labels.map((label, index) => (
           <Label
-            key={`${label.name}-${index}`}
+            key={label.id}
             id={`${label.name}-${index}`}
             color="blue"
             onClose={() => onClose(label.id)}

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

@@ -27,17 +27,17 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   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 labelInputRef = React.useRef(null);
 
   const [isColorOpen, setIsColorOpen] = React.useState<boolean>(false);
-  const colorMenuRef = React.useRef<HTMLDivElement>();
-  const colorContainerRef = React.useRef<HTMLDivElement>();
-  const colorToggleRef = React.useRef<HTMLButtonElement>();
+  const colorMenuRef = React.useRef<HTMLDivElement>(null);
+  const colorContainerRef = React.useRef<HTMLDivElement>(null);
+  const colorToggleRef = React.useRef<HTMLButtonElement>(null);
 
   const [isIconOpen, setIsIconOpen] = React.useState<boolean>(false);
-  const iconMenuRef = React.useRef<HTMLDivElement>();
-  const iconContainerRef = React.useRef<HTMLDivElement>();
-  const iconToggleRef = React.useRef<HTMLButtonElement>();
+  const iconMenuRef = React.useRef<HTMLDivElement>(null);
+  const iconContainerRef = React.useRef<HTMLDivElement>(null);
+  const iconToggleRef = React.useRef<HTMLButtonElement>(null);
 
   const [labels, setLabels] = React.useState<any>([
     { name: 'Label 1', id: 0 },
@@ -65,7 +65,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   };
 
   const onAdd = () => {
-    let labelIcon = null;
+    let labelIcon: any;
     if (icon === 'Info circle icon') {
       labelIcon = <InfoCircleIcon />;
     }
@@ -92,7 +92,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
     setModalOpen(!isModalOpen);
     setIdIndex(idIndex + 1);
     setLabelText('');
-    setColor(null);
+    setColor('');
     setIcon(null);
     setLabelType('filled');
     setIsCloseable(false);
@@ -110,25 +110,25 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   }, [isModalOpen]);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isColorOpen && colorMenuRef.current.contains(event.target as Node)) {
+    if (isColorOpen && colorMenuRef?.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsColorOpen(!isColorOpen);
-        colorToggleRef.current.focus();
+        colorToggleRef?.current?.focus();
       }
     }
-    if (isIconOpen && iconMenuRef.current.contains(event.target as Node)) {
+    if (isIconOpen && iconMenuRef?.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsIconOpen(!isIconOpen);
-        iconToggleRef.current.focus();
+        iconToggleRef?.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isColorOpen && !colorMenuRef.current.contains(event.target as Node)) {
+    if (isColorOpen && !colorMenuRef?.current?.contains(event.target as Node)) {
       setIsColorOpen(false);
     }
-    if (isIconOpen && !iconMenuRef.current.contains(event.target as Node)) {
+    if (isIconOpen && !iconMenuRef?.current?.contains(event.target as Node)) {
       setIsIconOpen(false);
     }
   };
@@ -164,7 +164,8 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
       ref={colorMenuRef}
       activeItemId={color}
       onSelect={(_ev, itemId) => {
-        setColor(itemId.toString());
+        setColor(itemId?.toString());
+        colorToggleRef?.current?.focus();
         setIsColorOpen(false);
       }}
       selected={color}
@@ -205,7 +206,8 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
       ref={iconMenuRef}
       activeItemId={icon}
       onSelect={(_ev, itemId) => {
-        setIcon(itemId.toString());
+        setIcon(itemId?.toString());
+        iconToggleRef?.current?.focus();
         setIsIconOpen(false);
       }}
       selected={icon}
@@ -234,9 +236,9 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
           </Label>
         }
       >
-        {labels.map((label, index) => (
+        {labels.map((label: { name: string; id: string; props: any }, index: number) => (
           <Label
-            key={`${label.name}-${index}`}
+            key={label.id}
             id={`${label.name}-${index}`}
             color="blue"
             onClose={() => onClose(label.id)}
@@ -278,7 +280,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
               <Popper
                 trigger={colorToggle}
                 popper={colorMenu}
-                appendTo={colorContainerRef.current}
+                appendTo={colorContainerRef.current as HTMLElement}
                 isVisible={isColorOpen}
                 popperMatchesTriggerWidth={false}
               />
@@ -289,7 +291,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
               <Popper
                 trigger={iconToggle}
                 popper={iconMenu}
-                appendTo={iconContainerRef.current}
+                appendTo={iconContainerRef.current as HTMLElement}
                 isVisible={isIconOpen}
                 popperMatchesTriggerWidth={false}
               />