@patternfly/react-core 6.4.0-prerelease.2 → 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.1","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.1","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.1","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.2",
+  "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": "1e63105aae6b8ac5c6896743bb06fda4c825714b"
+  "gitHead": "299d9d2d4df6d9a2868c6f367201655398ea6bae"
 }

package/src/components/Alert/examples/AlertDynamicLiveRegion.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useState } from 'react';
-import { Alert, AlertGroup, AlertVariant, InputGroup } from '@patternfly/react-core';
+import { Alert, AlertGroup, AlertVariant, Flex, FlexItem } from '@patternfly/react-core';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 interface AlertInfo {
@@ -41,17 +41,23 @@ export const DynamicLiveRegionAlert: React.FunctionComponent = () => {
 
   return (
     <Fragment>
-      <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add single success alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add single info alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add single danger alert
-        </button>
-      </InputGroup>
+      <Flex gap={{ default: 'gapXs' }} style={{ marginBottom: '16px' }}>
+        <FlexItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add single success alert
+          </button>
+        </FlexItem>
+        <FlexItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add single info alert
+          </button>
+        </FlexItem>
+        <FlexItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add single danger alert
+          </button>
+        </FlexItem>
+      </Flex>
       <AlertGroup hasAnimations isLiveRegion aria-live="polite" aria-relevant="additions text" aria-atomic="false">
         {alerts.map(({ title, variant, key }) => (
           <Alert variant={variant} title={title} key={key} />

package/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx

@@ -5,8 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup,
-  InputGroupItem
+  Flex,
+  FlexItem
 } from '@patternfly/react-core';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
@@ -35,13 +35,13 @@ export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
 
   return (
     <Fragment>
-      <InputGroup style={{ marginBottom: '16px' }}>
-        <InputGroupItem>
+      <Flex gap={{ default: 'gapXs' }}>
+        <FlexItem>
           <button onClick={addAlertCollection} type="button" className={btnClasses}>
             Add alert collection
           </button>
-        </InputGroupItem>
-      </InputGroup>
+        </FlexItem>
+      </Flex>
       <AlertGroup hasAnimations isToast isLiveRegion>
         {alerts.map(({ title, variant, key }) => (
           <Alert

package/src/components/Alert/examples/AlertGroupSingularDynamic.tsx

@@ -5,8 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup,
-  InputGroupItem
+  Flex,
+  FlexItem
 } from '@patternfly/react-core';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
@@ -39,23 +39,23 @@ export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
 
   return (
     <Fragment>
-      <InputGroup style={{ marginBottom: '16px' }}>
-        <InputGroupItem>
+      <Flex gap={{ default: 'gapXs' }} style={{ marginBottom: '16px' }}>
+        <FlexItem>
           <button onClick={addSuccessAlert} type="button" className={btnClasses}>
             Add single success alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addDangerAlert} type="button" className={btnClasses}>
             Add single danger alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addInfoAlert} type="button" className={btnClasses}>
             Add single info alert
           </button>
-        </InputGroupItem>
-      </InputGroup>
+        </FlexItem>
+      </Flex>
       <AlertGroup hasAnimations isLiveRegion>
         {alerts.map(({ title, variant, key }) => (
           <Alert

package/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx

@@ -5,8 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup,
-  InputGroupItem
+  Flex,
+  FlexItem
 } from '@patternfly/react-core';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
@@ -58,23 +58,23 @@ export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =>
 
   return (
     <Fragment>
-      <InputGroup style={{ marginBottom: '16px' }}>
-        <InputGroupItem>
+      <Flex gap={{ default: 'gapXs' }} style={{ marginBottom: '16px' }}>
+        <FlexItem>
           <button onClick={addSuccessAlert} type="button" className={btnClasses}>
             Add single success alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addDangerAlert} type="button" className={btnClasses}>
             Add single danger alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addInfoAlert} type="button" className={btnClasses}>
             Add single info alert
           </button>
-        </InputGroupItem>
-      </InputGroup>
+        </FlexItem>
+      </Flex>
       <AlertGroup hasAnimations isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
         {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (
           <Alert

package/src/components/Alert/examples/AlertGroupToast.tsx

@@ -5,8 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup,
-  InputGroupItem
+  Flex,
+  FlexItem
 } from '@patternfly/react-core';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
@@ -39,23 +39,23 @@ export const AlertGroupToast: React.FunctionComponent = () => {
 
   return (
     <Fragment>
-      <InputGroup style={{ marginBottom: '16px' }}>
-        <InputGroupItem>
+      <Flex gap={{ default: 'gapXs' }}>
+        <FlexItem>
           <button onClick={addSuccessAlert} type="button" className={btnClasses}>
             Add toast success alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addDangerAlert} type="button" className={btnClasses}>
             Add toast danger alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addInfoAlert} type="button" className={btnClasses}>
             Add toast info alert
           </button>
-        </InputGroupItem>
-      </InputGroup>
+        </FlexItem>
+      </Flex>
       <AlertGroup hasAnimations isToast isLiveRegion>
         {alerts.map(({ key, variant, title }) => (
           <Alert

package/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx

@@ -5,8 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup,
-  InputGroupItem
+  Flex,
+  FlexItem
 } from '@patternfly/react-core';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
@@ -58,23 +58,23 @@ export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
 
   return (
     <Fragment>
-      <InputGroup style={{ marginBottom: '16px' }}>
-        <InputGroupItem>
+      <Flex gap={{ default: 'gapXs' }} style={{ marginBottom: '16px' }}>
+        <FlexItem>
           <button onClick={addSuccessAlert} type="button" className={btnClasses}>
             Add toast success alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addDangerAlert} type="button" className={btnClasses}>
             Add toast danger alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addInfoAlert} type="button" className={btnClasses}>
             Add toast info alert
           </button>
-        </InputGroupItem>
-      </InputGroup>
+        </FlexItem>
+      </Flex>
       <AlertGroup
         hasAnimations
         isToast

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>