@patternfly/react-core 4.227.2 → 4.227.5

package/src/components/Menu/examples/MenuBasic.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Menu, MenuContent, MenuList, MenuItem, Checkbox } from '@patternfly/react-core';
+
+export const MenuBasic: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+  const [isPlain, setIsPlain] = React.useState(false);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number; // eslint-disable-next-line no-console
+    console.log(`clicked ${itemId}`);
+    setActiveItem(item);
+  };
+
+  const togglePlain = (checked: boolean) => {
+    setIsPlain(checked);
+  };
+
+  return (
+    <React.Fragment>
+      <Menu activeItemId={activeItem} onSelect={onSelect} isPlain={isPlain}>
+        <MenuContent>
+          <MenuList>
+            <MenuItem itemId={0}>Action</MenuItem>
+            <MenuItem
+              itemId={1}
+              to="#default-link2"
+              // just for demo so that navigation is not triggered
+              onClick={event => event.preventDefault()}
+            >
+              Link
+            </MenuItem>
+            <MenuItem isDisabled>Disabled action</MenuItem>
+            <MenuItem isDisabled to="#default-link4">
+              Disabled link
+            </MenuItem>
+          </MenuList>
+        </MenuContent>
+      </Menu>
+      <div style={{ marginTop: 20 }}>
+        <Checkbox
+          label="Plain menu"
+          isChecked={isPlain}
+          onChange={togglePlain}
+          aria-label="plain menu checkbox"
+          id="toggle-plain"
+          name="toggle-plain"
+        />
+      </div>
+    </React.Fragment>
+  );
+};

package/src/components/Menu/examples/MenuFilteringWithTextInput.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Menu, MenuList, MenuItem, MenuContent, MenuInput, TextInput, Divider } from '@patternfly/react-core';
+
+export const MenuFilteringWithTextInput: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+  const [input, setInput] = React.useState('');
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number; // eslint-disable-next-line no-console
+    console.log(`clicked ${itemId}`);
+    setActiveItem(item);
+  };
+
+  const handleTextInputChange = (value: string) => {
+    setInput(value);
+  };
+
+  const menuListItemsText = ['Action 1', 'Action 2', 'Action 3'];
+
+  const menuListItems = menuListItemsText
+    .filter(item => !input || item.toLowerCase().includes(input.toString().toLowerCase()))
+    .map((currentValue, index) => (
+      <MenuItem key={currentValue} itemId={index}>
+        {currentValue}
+      </MenuItem>
+    ));
+  if (input && menuListItems.length === 0) {
+    menuListItems.push(
+      <MenuItem isDisabled key="no result">
+        No results found
+      </MenuItem>
+    );
+  }
+
+  return (
+    <Menu onSelect={onSelect} activeItemId={activeItem}>
+      <MenuInput>
+        <TextInput
+          value={input}
+          aria-label="Filter menu items"
+          iconVariant="search"
+          type="search"
+          onChange={value => handleTextInputChange(value)}
+        />
+      </MenuInput>
+      <Divider />
+      <MenuContent>
+        <MenuList>{menuListItems}</MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Menu/examples/MenuOptionMultiSelect.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
+import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
+
+export const MenuOptionMultiSelect: React.FunctionComponent = () => {
+  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number;
+    if (selectedItems.indexOf(item) !== -1) {
+      setSelectedItems(selectedItems.filter(id => id !== item));
+    } else {
+      setSelectedItems([...selectedItems, item]);
+    }
+  };
+
+  return (
+    <Menu onSelect={onSelect} activeItemId={0} selected={selectedItems}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId={0}>Option 1</MenuItem>
+          <MenuItem itemId={1}>Option 2</MenuItem>
+          <MenuItem icon={<TableIcon aria-hidden />} itemId={2}>
+            Option 3
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Menu/examples/MenuOptionSingleSelect.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
+import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
+
+export const MenuOptionSingleSelect: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+  const [selectedItem, setSelectedItem] = React.useState(0);
+
+  const onSelect = (_event, itemId) => {
+    setActiveItem(itemId);
+    setSelectedItem(itemId);
+  };
+
+  return (
+    <Menu onSelect={onSelect} activeItemId={activeItem} selected={selectedItem}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId={0}>Option 1</MenuItem>
+          <MenuItem itemId={1}>Option 2</MenuItem>
+          <MenuItem icon={<TableIcon aria-hidden />} itemId={2}>
+            Option 3
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Menu/examples/MenuScrollable.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
+
+export const MenuScrollable: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (_event, itemId) => {
+    // eslint-disable-next-line no-console
+    console.log(`clicked ${itemId}`);
+    setActiveItem(itemId);
+  };
+
+  return (
+    <Menu activeItemId={activeItem} onSelect={onSelect} isScrollable>
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId={0}>Action 1</MenuItem>
+          <MenuItem itemId={1}>Action 2</MenuItem>
+          <MenuItem itemId={2}>Action 3</MenuItem>
+          <MenuItem itemId={3}>Action 4</MenuItem>
+          <MenuItem itemId={4}>Action 5</MenuItem>
+          <MenuItem itemId={5}>Action 6</MenuItem>
+          <MenuItem itemId={6}>Action 7</MenuItem>
+          <MenuItem itemId={7}>Action 8</MenuItem>
+          <MenuItem itemId={8}>Action 9</MenuItem>
+          <MenuItem itemId={9}>Action 10</MenuItem>
+          <MenuItem itemId={10}>Action 11</MenuItem>
+          <MenuItem itemId={11}>Action 12</MenuItem>
+          <MenuItem itemId={12}>Action 13</MenuItem>
+          <MenuItem itemId={13}>Action 14</MenuItem>
+          <MenuItem itemId={14}>Action 15</MenuItem>
+          <MenuItem
+            itemId={15}
+            to="#default-link2"
+            // just for demo so that navigation is not triggered
+            onClick={event => event.preventDefault()}
+          >
+            Link
+          </MenuItem>
+          <MenuItem isDisabled>Disabled action</MenuItem>
+          <MenuItem isDisabled to="#default-link4">
+            Disabled link
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Menu/examples/MenuScrollableCustomMenuHeight.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
+
+export const MenuScrollableCustomMenuHeight: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (_event, itemId) => {
+    // eslint-disable-next-line no-console
+    console.log(`clicked ${itemId}`);
+    setActiveItem(itemId);
+  };
+
+  return (
+    <Menu activeItemId={activeItem} onSelect={onSelect} isScrollable>
+      <MenuContent menuHeight="200px">
+        <MenuList>
+          <MenuItem itemId={0}>Action 1</MenuItem>
+          <MenuItem itemId={1}>Action 2</MenuItem>
+          <MenuItem itemId={2}>Action 3</MenuItem>
+          <MenuItem itemId={3}>Action 4</MenuItem>
+          <MenuItem itemId={4}>Action 5</MenuItem>
+          <MenuItem itemId={5}>Action 6</MenuItem>
+          <MenuItem itemId={6}>Action 7</MenuItem>
+          <MenuItem itemId={7}>Action 8</MenuItem>
+          <MenuItem itemId={8}>Action 9</MenuItem>
+          <MenuItem itemId={9}>Action 10</MenuItem>
+          <MenuItem itemId={10}>Action 11</MenuItem>
+          <MenuItem itemId={11}>Action 12</MenuItem>
+          <MenuItem itemId={12}>Action 13</MenuItem>
+          <MenuItem itemId={13}>Action 14</MenuItem>
+          <MenuItem itemId={14}>Action 15</MenuItem>
+          <MenuItem
+            itemId={15}
+            to="#default-link2"
+            // just for demo so that navigation is not triggered
+            onClick={event => event.preventDefault()}
+          >
+            Link
+          </MenuItem>
+          <MenuItem isDisabled>Disabled action</MenuItem>
+          <MenuItem isDisabled to="#default-link4">
+            Disabled link
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Menu/examples/MenuWithActions.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Menu, MenuContent, MenuGroup, MenuList, MenuItem, MenuItemAction } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const MenuWithActions: React.FunctionComponent = () => {
+  const [selectedItems, setSelectedItems] = React.useState<number[]>([0, 2, 3]);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number;
+    if (selectedItems.indexOf(item) !== -1) {
+      setSelectedItems(selectedItems.filter(id => id !== item));
+    } else {
+      setSelectedItems([...selectedItems, item]);
+    }
+  };
+
+  return (
+    <Menu
+      onSelect={onSelect}
+      // eslint-disable-next-line no-console
+      onActionClick={(_event, itemId, actionId) => console.log(`clicked on ${itemId} - ${actionId}`)}
+      activeItemId={0}
+    >
+      <MenuContent>
+        <MenuGroup label="Actions" labelHeadingLevel="h3">
+          <MenuList>
+            <MenuItem
+              isSelected={selectedItems.indexOf(0) !== -1}
+              actions={
+                <MenuItemAction
+                  icon={<CodeBranchIcon aria-hidden />}
+                  actionId="code"
+                  // eslint-disable-next-line no-console
+                  onClick={() => console.log('clicked on code icon')}
+                  aria-label="Code"
+                />
+              }
+              description="This is a description"
+              itemId={0}
+            >
+              Item 1
+            </MenuItem>
+            <MenuItem
+              isDisabled
+              isSelected={selectedItems.indexOf(1) !== -1}
+              actions={<MenuItemAction icon={<BellIcon aria-hidden />} actionId="alert" aria-label="Alert" />}
+              description="This is a description"
+              itemId={1}
+            >
+              Item 2
+            </MenuItem>
+            <MenuItem
+              isSelected={selectedItems.indexOf(2) !== -1}
+              actions={<MenuItemAction icon={<ClipboardIcon aria-hidden />} actionId="copy" aria-label="Copy" />}
+              itemId={2}
+            >
+              Item 3
+            </MenuItem>
+            <MenuItem
+              isSelected={selectedItems.indexOf(3) !== -1}
+              actions={<MenuItemAction icon={<BarsIcon aria-hidden />} actionId="expand" aria-label="Expand" />}
+              description="This is a description"
+              itemId={3}
+            >
+              Item 4
+            </MenuItem>
+          </MenuList>
+        </MenuGroup>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Menu/examples/MenuWithCheckbox.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
-export const MenuCheckboxList: React.FunctionComponent = () => {
+export const MenuWithCheckbox: React.FunctionComponent = () => {
   const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
 
   /* eslint no-unused-vars: ["error", {"args": "after-used"}] */
-  const onSelect = (event: React.MouseEvent<Element, MouseEvent>, itemId: number | string) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;
     if (selectedItems.includes(item)) {
       setSelectedItems(selectedItems.filter(id => id !== item));

package/src/components/Menu/examples/MenuWithDescription.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+
+export const MenuWithDescription: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number; // eslint-disable-next-line no-console
+    console.log(`clicked ${item}`);
+    setActiveItem(item);
+  };
+
+  return (
+    <Menu onSelect={onSelect} activeItemId={activeItem}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem icon={<CodeBranchIcon aria-hidden />} description="Description" itemId={0}>
+            Action 1
+          </MenuItem>
+          <MenuItem isDisabled icon={<CodeBranchIcon aria-hidden />} description="Description" itemId={1}>
+            Action 2 disabled
+          </MenuItem>
+          <MenuItem
+            icon={<CodeBranchIcon aria-hidden />}
+            description="Nunc non ornare ex, et pretium dui. Duis nec augue at urna elementum blandit tincidunt eget metus. Aenean sed metus id urna dignissim interdum. Aenean vel nisl vitae arcu vehicula pulvinar eget nec turpis. Cras sit amet est est."
+            itemId={2}
+          >
+            Action 3
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Menu/examples/{MenuDrilldown.tsx → MenuWithDrilldown.tsx}

@@ -5,7 +5,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
-export const MenuDrilldown: React.FunctionComponent = () => {
+export const MenuWithDrilldown: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<any>({});