@patternfly/react-core 6.4.0-prerelease.3 → 6.4.0-prerelease.4

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.4.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.4.0-prerelease.3","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.4.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.4.0-prerelease.3","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.4.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.4.0-prerelease.3","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.4.0-prerelease.3",
+  "version": "6.4.0-prerelease.4",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "1127a29191a3f597052c8784e898356e001ff6e4"
+  "gitHead": "299d9d2d4df6d9a2868c6f367201655398ea6bae"
 }

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

@@ -110,6 +110,7 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
                       value={startInput}
                       aria-label="Filter menu items"
                       onChange={(_event, value) => handleStartTextInputChange(value)}
+                      onClear={() => handleStartTextInputChange('')}
                     />
                   </MenuSearchInput>
                 </MenuSearch>

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

@@ -49,6 +49,7 @@ export const MenuFilteringWithSearchInput: React.FunctionComponent = () => {
             value={input}
             aria-label="Filter menu items"
             onChange={(_event, value) => handleTextInputChange(value)}
+            onClear={() => handleTextInputChange('')}
           />
         </MenuSearchInput>
       </MenuSearch>

package/src/components/Toolbar/examples/ToolbarContentWrap.tsx

@@ -1,12 +1,19 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';
 import { Button, SearchInput } from '@patternfly/react-core';
 
-export const ToolbarItems: React.FunctionComponent = () => {
+export const ToolbarItems = () => {
+  const [searchValue, setSearchValue] = useState('');
+
   const items = (
     <Fragment>
       <ToolbarItem>
-        <SearchInput aria-label="Items example search input" />
+        <SearchInput
+          aria-label="Items example search input"
+          value={searchValue}
+          onChange={(_event, value) => setSearchValue(value)}
+          onClear={() => setSearchValue('')}
+        />
       </ToolbarItem>
       <ToolbarItem>
         <Button variant="secondary">Action</Button>

package/src/components/Toolbar/examples/ToolbarItems.tsx

@@ -1,19 +1,26 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';
 import { Button, SearchInput } from '@patternfly/react-core';
 
-export const ToolbarItems: React.FunctionComponent = () => {
+export const ToolbarItems = () => {
+  const [searchValue, setSearchValue] = useState('');
+
   const items = (
     <Fragment>
       <ToolbarItem>
-        <SearchInput aria-label="Items example search input" />
+        <SearchInput
+          aria-label="Items example search input"
+          value={searchValue}
+          onChange={(_event, value) => setSearchValue(value)}
+          onClear={() => setSearchValue('')}
+        />
       </ToolbarItem>
       <ToolbarItem>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
       <ToolbarItem variant="separator" />
       <ToolbarItem>
-        <Button variant="primary">Action</Button>
+        <Button variant="primary">Action2</Button>
       </ToolbarItem>
     </Fragment>
   );

package/src/components/Toolbar/examples/ToolbarSticky.tsx

@@ -1,9 +1,10 @@
 import { Fragment, useState } from 'react';
 import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';
 
-export const ToolbarSticky: React.FunctionComponent = () => {
+export const ToolbarSticky = () => {
   const [isSticky, setIsSticky] = useState(true);
   const [showEvenOnly, setShowEvenOnly] = useState(true);
+  const [searchValue, setSearchValue] = useState('');
   const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes
   const numbers = showEvenOnly ? array.filter((number) => number % 2 === 0) : array;
 
@@ -13,7 +14,12 @@ export const ToolbarSticky: React.FunctionComponent = () => {
         <Toolbar id="toolbar-sticky" inset={{ default: 'insetNone' }} isSticky={isSticky}>
           <ToolbarContent>
             <ToolbarItem>
-              <SearchInput aria-label="Sticky example search input" />
+              <SearchInput
+                aria-label="Sticky example search input"
+                value={searchValue}
+                onChange={(_event, value) => setSearchValue(value)}
+                onClear={() => setSearchValue('')}
+              />
             </ToolbarItem>
             <ToolbarItem alignSelf="center">
               <Checkbox

package/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx

@@ -78,6 +78,10 @@ export const InlineSearchFilterMenuDemo: React.FunctionComponent = () => {
             value={input}
             aria-label="Filter menu items"
             onChange={(_event, value) => handleTextInputChange(value)}
+            onClear={(event) => {
+              event.stopPropagation();
+              handleTextInputChange('');
+            }}
           />
         </MenuSearchInput>
       </MenuSearch>

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -38,6 +38,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
   const [isOpen2, setIsOpen2] = useState(false);
   const [isOpen3, setIsOpen3] = useState(false);
   const [allExpanded, setAllExpanded] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
 
   const onToggleAll = () => {
     setAllExpanded((prevAllExpanded) => !prevAllExpanded);
@@ -103,7 +104,12 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
               </Tooltip>
             </ToolbarItem>
             <ToolbarItem>
-              <SearchInput aria-label="search input example" />
+              <SearchInput
+                aria-label="search input example"
+                value={searchValue}
+                onChange={(_event, value) => setSearchValue(value)}
+                onClear={() => setSearchValue('')}
+              />
             </ToolbarItem>
             <ToolbarItem>
               <Button variant="secondary">Action</Button>

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -74,6 +74,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
   const [refFullOptions, setRefFullOptions] = useState<Element[]>();
   const [favorites, setFavorites] = useState<string[]>([]);
   const [filteredIds, setFilteredIds] = useState<string[]>(['*']);
+  const [searchValue, setSearchValue] = useState('');
   const menuRef = useRef<HTMLDivElement>(null);
   const toggleRef = useRef<HTMLButtonElement>(null);
 
@@ -297,6 +298,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
   };
 
   const onTextChange = (textValue: string) => {
+    setSearchValue(textValue);
     if (textValue === '') {
       setFilteredIds(['*']);
       return;
@@ -331,7 +333,15 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     // eslint-disable-next-line no-console
     <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
       <MenuSearchInput>
-        <SearchInput aria-label="Filter menu items" onChange={(_event, value) => onTextChange(value)} />
+        <SearchInput
+          aria-label="Filter menu items"
+          value={searchValue}
+          onChange={(_event, value) => onTextChange(value)}
+          onClear={(event) => {
+            event.stopPropagation();
+            onTextChange('');
+          }}
+        />
       </MenuSearchInput>
       <Divider />
       <MenuContent>