From fee3c0438c636f5f2aea86ad72f7856c1a63fd5a Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Wed, 27 Sep 2023 14:23:05 +0200
Subject: [PATCH 1/2] docs(custom menu): add example with search input inline
 filtering

---
 .../src/demos/CustomMenus/CustomMenus.md      |   6 ++
 .../CustomMenus/examples/FilterMenuDemo.tsx   | 102 ++++++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 packages/react-core/src/demos/CustomMenus/examples/FilterMenuDemo.tsx

diff --git a/packages/react-core/src/demos/CustomMenus/CustomMenus.md b/packages/react-core/src/demos/CustomMenus/CustomMenus.md
index 779c345e64b..aa731bd1160 100644
--- a/packages/react-core/src/demos/CustomMenus/CustomMenus.md
+++ b/packages/react-core/src/demos/CustomMenus/CustomMenus.md
@@ -50,6 +50,12 @@ Additionally, menu components may be connected to each other manually through ou
 
 ```
 
+### With search input filtering
+
+```ts file="./examples/FilterMenuDemo.tsx"
+
+```
+
 ### Tree view menu
 
 When rendering a menu-like element that does not contain `<MenuItem>` components, [panel](/components/panel) allows more flexible control and customization.
diff --git a/packages/react-core/src/demos/CustomMenus/examples/FilterMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/FilterMenuDemo.tsx
new file mode 100644
index 00000000000..3f243dffc21
--- /dev/null
+++ b/packages/react-core/src/demos/CustomMenus/examples/FilterMenuDemo.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import {
+  Menu,
+  MenuList,
+  MenuContent,
+  MenuSearch,
+  MenuSearchInput,
+  Divider,
+  SearchInput,
+  SelectOption,
+  MenuToggle,
+  MenuContainer
+} from '@patternfly/react-core';
+
+export const FilterMenuDemo: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+  const [input, setInput] = React.useState('');
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggleRef = React.useRef<any>();
+  const menuRef = React.useRef<any>();
+
+  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) => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    setInput(value);
+  };
+
+  const menuListItemsText = [
+    'Action 1',
+    'Action 2',
+    'Action 3',
+    'My project',
+    'OpenShift cluster',
+    'Production Ansible',
+    'AWS',
+    'Azure',
+    'My project 2',
+    'OpenShift cluster ',
+    'Production Ansible 2 ',
+    'AWS 2',
+    'Azure 2'
+  ];
+
+  const menuListItems = menuListItemsText
+    .filter((item) => !input || item.toLowerCase().includes(input.toString().toLowerCase()))
+    .map((currentValue, index) => (
+      <SelectOption key={currentValue} itemId={index}>
+        {currentValue}
+      </SelectOption>
+    ));
+  if (input && menuListItems.length === 0) {
+    menuListItems.push(
+      <SelectOption isDisabled key="no result">
+        No results found
+      </SelectOption>
+    );
+  }
+
+  const toggle = (
+    <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isExpanded={isOpen}>
+      {isOpen ? 'Expanded' : 'Collapsed'}
+    </MenuToggle>
+  );
+
+  const menu = (
+    <Menu ref={menuRef} onSelect={onSelect} activeItemId={activeItem} isScrollable>
+      <MenuSearch>
+        <MenuSearchInput>
+          <SearchInput
+            value={input}
+            aria-label="Filter menu items"
+            onChange={(_event, value) => handleTextInputChange(value)}
+          />
+        </MenuSearchInput>
+      </MenuSearch>
+      <Divider />
+      <MenuContent maxMenuHeight="200px">
+        <MenuList>{menuListItems}</MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <MenuContainer
+      menu={menu}
+      menuRef={menuRef}
+      toggle={toggle}
+      toggleRef={toggleRef}
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onOpenChangeKeys={['Escape']}
+    />
+  );
+};

From 0c344e0014ae7f69bf42ac4203e7c08b25dcd855 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Wed, 1 Nov 2023 11:59:04 +0100
Subject: [PATCH 2/2] refactor(demo menu): rename to InlineSearchFilterMenuDemo

---
 packages/react-core/src/demos/CustomMenus/CustomMenus.md      | 4 ++--
 .../{FilterMenuDemo.tsx => InlineSearchFilterMenuDemo.tsx}    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/react-core/src/demos/CustomMenus/examples/{FilterMenuDemo.tsx => InlineSearchFilterMenuDemo.tsx} (97%)

diff --git a/packages/react-core/src/demos/CustomMenus/CustomMenus.md b/packages/react-core/src/demos/CustomMenus/CustomMenus.md
index aa731bd1160..5b734d87904 100644
--- a/packages/react-core/src/demos/CustomMenus/CustomMenus.md
+++ b/packages/react-core/src/demos/CustomMenus/CustomMenus.md
@@ -50,9 +50,9 @@ Additionally, menu components may be connected to each other manually through ou
 
 ```
 
-### With search input filtering
+### With inline search filter
 
-```ts file="./examples/FilterMenuDemo.tsx"
+```ts file="./examples/InlineSearchFilterMenuDemo.tsx"
 
 ```
 
diff --git a/packages/react-core/src/demos/CustomMenus/examples/FilterMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx
similarity index 97%
rename from packages/react-core/src/demos/CustomMenus/examples/FilterMenuDemo.tsx
rename to packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx
index 3f243dffc21..d561f52581b 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/FilterMenuDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx
@@ -12,7 +12,7 @@ import {
   MenuContainer
 } from '@patternfly/react-core';
 
-export const FilterMenuDemo: React.FunctionComponent = () => {
+export const InlineSearchFilterMenuDemo: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState(0);
   const [input, setInput] = React.useState('');
   const [isOpen, setIsOpen] = React.useState(false);