@patternfly/react-core 4.222.3 → 4.222.6

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupCategory: React.FunctionComponent = () => (
+  <LabelGroup categoryName="Group label">
+    <Label icon={<InfoCircleIcon />}>Label 1</Label>
+    <Label icon={<InfoCircleIcon />} color="blue">
+      Label 2
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="green">
+      Label 3
+    </Label>
+  </LabelGroup>
+);

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupCategoryRemovable: React.FunctionComponent = () => {
+  const [labels, setLabels] = React.useState([
+    ['Label 1', 'grey'],
+    ['Label 2', 'blue'],
+    ['Label 3', 'green'],
+    ['Label 4', 'orange'],
+    ['Label 5', 'red']
+  ]);
+  const deleteCategory = () => setLabels([]);
+
+  return (
+    <LabelGroup categoryName="Group label" isClosable onClick={deleteCategory}>
+      {labels.map(([labelText, labelColor]) => (
+        <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>
+          {labelText}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { LabelGroup, Label } from '@patternfly/react-core';
+
+export const LabelGroupEditableLabels: React.FunctionComponent = () => {
+  const [label1, setLabel1] = React.useState('Editable label');
+  const [label2, setLabel2] = React.useState('Editable label 2');
+  const [label3, setLabel3] = React.useState('Editable label 3');
+
+  return (
+    <LabelGroup numLabels={5} isEditable>
+      <Label
+        color="blue"
+        onClose={() => Function.prototype}
+        onEditCancel={prevText => setLabel1(prevText)}
+        onEditComplete={newText => setLabel1(newText)}
+        isEditable
+        editableProps={{
+          'aria-label': 'Editable text',
+          id: 'editable-label-1'
+        }}
+      >
+        {label1}
+      </Label>
+      <Label color="green">Static label</Label>
+      <Label
+        color="blue"
+        onClose={() => Function.prototype}
+        onEditCancel={prevText => setLabel2(prevText)}
+        onEditComplete={newText => setLabel2(newText)}
+        isEditable
+        editableProps={{
+          'aria-label': 'Editable text 2',
+          id: 'editable-label-2'
+        }}
+      >
+        {label2}
+      </Label>
+      <Label
+        color="blue"
+        onClose={() => Function.prototype}
+        onEditCancel={prevText => setLabel3(prevText)}
+        onEditComplete={newText => setLabel3(newText)}
+        isEditable
+        editableProps={{
+          'aria-label': 'Editable text 3',
+          id: 'editable-label-3'
+        }}
+      >
+        {label3}
+      </Label>
+    </LabelGroup>
+  );
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupOverflow: React.FunctionComponent = () => (
+  <LabelGroup>
+    <Label icon={<InfoCircleIcon />}>Label 1</Label>
+    <Label icon={<InfoCircleIcon />} color="blue">
+      Label 2
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="green">
+      Label 3
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="orange">
+      Label 4
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="red">
+      Label 5
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="purple">
+      Label 6
+    </Label>
+  </LabelGroup>
+);

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponent = () => {
+  const [labels, setLabels] = React.useState([
+    ['Label 1', 'grey'],
+    ['Label 2', 'blue'],
+    ['Label 3', 'green'],
+    ['Label 4', 'orange'],
+    ['Label 5', 'red']
+  ]);
+  const deleteCategory = () => setLabels([]);
+
+  return (
+    <LabelGroup categoryName="Group label with a very long name" isVertical isClosable onClick={deleteCategory}>
+      {labels.map(([labelText, labelColor]) => (
+        <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>
+          {labelText}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};

package/src/components/List/examples/List.md

@@ -5,97 +5,35 @@ cssPrefix: pf-c-list
 propComponents: ['List', 'ListItem']
 ---
 
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-
-<List>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListBasic.tsx"
 ```
 
 ### Inline
-```js
-import React from 'react';
-import { List, ListItem, ListVariant } from '@patternfly/react-core';
-
-<List variant={ListVariant.inline}>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListInline.tsx"
 ```
 
 ### Ordered
-```js
-import React from 'react';
-import { List, ListItem, ListComponent, OrderType } from '@patternfly/react-core';
-
-<List component={ListComponent.ol} type={OrderType.number}>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListOrdered.tsx"
 ```
 
 ### Plain
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-
-<List isPlain>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListPlain.tsx"
 ```
 
 ### With horizontal rules
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-
-<List isPlain isBordered>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListHorizontalRules.tsx"
 ```
 
 ### With icons
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
-
-<List isPlain>
-  <ListItem icon={<BookOpen />}>First</ListItem>
-  <ListItem icon={<Key />}>Second</ListItem>
-  <ListItem icon={<Desktop />}>Third</ListItem>
-</List>
+```ts file="./ListIcons.tsx"
 ```
 
 ### With large icons
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
-
-<List isPlain iconSize="large">
-  <ListItem icon={<BookOpen />}>First</ListItem>
-  <ListItem icon={<Key />}>Second</ListItem>
-  <ListItem icon={<Desktop />}>Third</ListItem>
-</List>
+```ts file="./ListLargeIcons.tsx"
 ```

package/src/components/List/examples/ListBasic.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+export const ListBasic: React.FunctionComponent = () => (
+  <List>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListHorizontalRules.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+export const ListHorizontalRules: React.FunctionComponent = () => (
+  <List isPlain isBordered>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListIcons.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+
+export const ListIcons: React.FunctionComponent = () => (
+  <List isPlain>
+    <ListItem icon={<BookOpenIcon />}>First</ListItem>
+    <ListItem icon={<KeyIcon />}>Second</ListItem>
+    <ListItem icon={<DesktopIcon />}>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListInline.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem, ListVariant } from '@patternfly/react-core';
+
+export const ListInline: React.FunctionComponent = () => (
+  <List variant={ListVariant.inline}>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListLargeIcons.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+
+export const ListLargeIcons: React.FunctionComponent = () => (
+  <List isPlain iconSize="large">
+    <ListItem icon={<BookOpenIcon />}>First</ListItem>
+    <ListItem icon={<KeyIcon />}>Second</ListItem>
+    <ListItem icon={<DesktopIcon />}>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListOrdered.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem, ListComponent, OrderType } from '@patternfly/react-core';
+
+export const ListOrdered: React.FunctionComponent = () => (
+  <List component={ListComponent.ol} type={OrderType.number}>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListPlain.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+export const ListPlain: React.FunctionComponent = () => (
+  <List isPlain>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/Menu/MenuItem.tsx

@@ -224,7 +224,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
         onDrillIn(
           menuId,
           typeof drilldownMenu === 'function'
-            ? drilldownMenu().props.id
+            ? (drilldownMenu() as any).props.id
             : (drilldownMenu as React.ReactElement).props.id,
           itemId
         );

package/src/components/MenuToggle/MenuToggle.tsx

@@ -61,7 +61,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
       <React.Fragment>
         {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
         <span className="pf-c-menu-toggle__text">{children}</span>
-        {badge && <span className={css(styles.menuToggleCount)}>{badge}</span>}
+        {badge && <span className={css(styles.menuToggleCount)}>{badge as React.ReactNode}</span>}
         <span className={css(styles.menuToggleControls)}>
           <span className={css(styles.menuToggleToggleIcon)}>
             <CaretDownIcon aria-hidden />

package/src/components/Modal/Modal.tsx

@@ -243,6 +243,6 @@ export class Modal extends React.Component<ModalProps, ModalState> {
         ouiaSafe={ouiaSafe}
       />,
       container
-    );
+    ) as React.ReactElement;
   }
 }

package/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItem.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`OptionsMenuItem should match snapshot 1`] = `
 <DocumentFragment>
   <li
     id="''"
-    role="menuitem"
+    role="none"
   >
     <button
       aria-disabled="true"
@@ -12,6 +12,7 @@ exports[`OptionsMenuItem should match snapshot 1`] = `
       data-ouia-component-id="OUIA-Generated-DropdownItem-1"
       data-ouia-component-type="PF4/DropdownItem"
       data-ouia-safe="true"
+      role="menuitem"
       tabindex="-1"
       type="button"
     >

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

@@ -61,7 +61,7 @@ exports[`optionsMenu expanded 1`] = `
         >
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -69,6 +69,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-1"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -77,7 +78,7 @@ exports[`optionsMenu expanded 1`] = `
           </li>
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -85,6 +86,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-2"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -93,7 +95,7 @@ exports[`optionsMenu expanded 1`] = `
           </li>
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="true"
@@ -101,6 +103,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-3"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -109,7 +112,7 @@ exports[`optionsMenu expanded 1`] = `
           </li>
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -117,6 +120,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-4"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -145,7 +149,7 @@ exports[`optionsMenu expanded 1`] = `
         >
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -153,6 +157,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-5"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -161,7 +166,7 @@ exports[`optionsMenu expanded 1`] = `
           </li>
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -169,6 +174,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-6"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >

package/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
 <DocumentFragment>
   <li
-    role="menuitem"
+    role="none"
   >
     <button
       aria-disabled="false"
@@ -11,6 +11,7 @@ exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
       data-ouia-component-id="OUIA-Generated-DropdownItem-1"
       data-ouia-component-type="PF4/DropdownItem"
       data-ouia-safe="true"
+      role="menuitem"
       tabindex="-1"
       type="button"
     >

package/src/components/Select/Select.tsx

@@ -447,7 +447,10 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         typeaheadFilteredChildren =
           typeaheadInputValue.toString() !== ''
             ? React.Children.map(children, group => {
-                if (React.isValidElement(group) && group.type === SelectGroup) {
+                if (
+                  React.isValidElement<React.ComponentProps<typeof SelectGroup>>(group) &&
+                  group.type === SelectGroup
+                ) {
                   const filteredGroupChildren = (React.Children.toArray(group.props.children) as React.ReactElement<
                     SelectGroupProps
                   >[]).filter(childFilter);
@@ -635,8 +638,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     optionContainerRef: React.ReactNode,
     index: number
   ) => {
-    this.refCollection[index] = [optionRef as HTMLElement, favoriteRef as HTMLElement];
-    this.optionContainerRefCollection[index] = optionContainerRef as HTMLElement;
+    this.refCollection[index] = [(optionRef as unknown) as HTMLElement, (favoriteRef as unknown) as HTMLElement];
+    this.optionContainerRefCollection[index] = (optionContainerRef as unknown) as HTMLElement;
   };
 
   handleMenuKeys = (index: number, innerIndex: number, position: string) => {

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -144,7 +144,10 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
                         </Button>
                       </div>
                       {isExpanded
-                        ? ReactDOM.createPortal(children, expandableContentRef.current.firstElementChild)
+                        ? (ReactDOM.createPortal(
+                            children,
+                            expandableContentRef.current.firstElementChild
+                          ) as React.ReactElement)
                         : children}
                     </div>
                   );