@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.8

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

@@ -0,0 +1,253 @@
+import React from 'react';
+import {
+  Button,
+  ButtonVariant,
+  KebabToggle,
+  Select,
+  SelectOption,
+  SelectOptionObject,
+  SelectVariant,
+  Pagination,
+  Dropdown,
+  DropdownSeparator,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem,
+  DropdownPosition,
+  Divider,
+  OverflowMenu,
+  OverflowMenuContent,
+  OverflowMenuControl,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  Toolbar,
+  ToolbarContent,
+  ToolbarToggleGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+
+export const ToolbarStacked: React.FunctionComponent = () => {
+  // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned
+  // pagination - right aligned
+  const resourceOptions = [
+    { value: 'All resources', disabled: false },
+    { value: 'Deployment', disabled: false },
+    { value: 'Pod', disabled: false }
+  ];
+
+  const statusOptions = [
+    { value: 'Running', disabled: false },
+    { value: 'New', disabled: false },
+    { value: 'Pending', disabled: false },
+    { value: 'Cancelled', disabled: false }
+  ];
+
+  const [kebabIsOpen, setKebabIsOpen] = React.useState(false);
+  const [resourceIsExpanded, setResourceIsExpanded] = React.useState(false);
+  const [resourceSelected, setResourceSelected] = React.useState<string | SelectOptionObject>();
+  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
+  const [statusSelected, setStatusSelected] = React.useState<string | SelectOptionObject>();
+  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = React.useState(false);
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+
+  const onKebabToggle = (isOpen: boolean) => {
+    setKebabIsOpen(isOpen);
+  };
+
+  const onResourceToggle = (isExpanded: boolean) => {
+    setResourceIsExpanded(isExpanded);
+  };
+
+  const onResourceSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string | SelectOptionObject) => {
+    setResourceSelected(selection);
+    setResourceIsExpanded(false);
+  };
+
+  const onResourceSelectDropdown = (event: React.SyntheticEvent<HTMLDivElement, Event> | undefined) => {
+    setResourceSelected(event?.target);
+    setResourceIsExpanded(false);
+  };
+
+  const onStatusToggle = (isExpanded: boolean) => {
+    setStatusIsExpanded(isExpanded);
+  };
+
+  const onStatusSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string | SelectOptionObject) => {
+    setStatusSelected(selection);
+    setStatusIsExpanded(false);
+  };
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, pageNumber: number) => {
+    setPage(pageNumber);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    perPage: number,
+    page: number
+  ) => {
+    setPage(page);
+    setPerPage(perPage);
+  };
+
+  const onSplitButtonToggle = (isOpen: boolean) => {
+    setSplitButtonDropdownIsOpen(isOpen);
+  };
+
+  const onSplitButtonSelect = () => {
+    setSplitButtonDropdownIsOpen(!splitButtonDropdownIsOpen);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
+
+  const splitButtonDropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>
+  ];
+
+  const toggleGroupItems = (
+    <React.Fragment>
+      <ToolbarItem variant="label" id="stacked-example-resource-select">
+        Resource
+      </ToolbarItem>
+      <ToolbarItem>
+        <Select
+          variant={SelectVariant.single}
+          aria-label="Select Input"
+          onToggle={onResourceToggle}
+          onSelect={onResourceSelect}
+          selections={resourceSelected}
+          isOpen={resourceIsExpanded}
+          aria-labelledby="stacked-example-resource-select"
+        >
+          {resourceOptions.map((option, index) => (
+            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+          ))}
+        </Select>
+      </ToolbarItem>
+      <ToolbarItem variant="label" id="stacked-example-status-select">
+        Status
+      </ToolbarItem>
+      <ToolbarItem>
+        <Select
+          variant={SelectVariant.single}
+          aria-label="Select Input"
+          onToggle={onStatusToggle}
+          onSelect={onStatusSelect}
+          selections={statusSelected}
+          isOpen={statusIsExpanded}
+          aria-labelledby="stacked-example-status-select"
+        >
+          {statusOptions.map((option, index) => (
+            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+          ))}
+        </Select>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const firstRowItems = (
+    <React.Fragment>
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="lg">
+            {toggleGroupItems}
+          </ToolbarToggleGroup>
+          <ToolbarItem variant="overflow-menu">
+            <OverflowMenu breakpoint="2xl">
+              <OverflowMenuContent>
+                <OverflowMenuGroup groupType="button">
+                  <OverflowMenuItem>
+                    <Button variant={ButtonVariant.primary}>Primary</Button>
+                  </OverflowMenuItem>
+                  <OverflowMenuItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </OverflowMenuItem>
+                </OverflowMenuGroup>
+              </OverflowMenuContent>
+              <OverflowMenuControl hasAdditionalOptions>
+                <Dropdown
+                  onSelect={onResourceSelectDropdown}
+                  toggle={<KebabToggle onToggle={onKebabToggle} />}
+                  isOpen={kebabIsOpen}
+                  isPlain
+                  dropdownItems={dropdownItems}
+                  position={DropdownPosition.right}
+                />
+              </OverflowMenuControl>
+            </OverflowMenu>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    </React.Fragment>
+  );
+
+  const secondRowItems = (
+    <React.Fragment>
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarItem variant="bulk-select">
+            <Dropdown
+              onSelect={onSplitButtonSelect}
+              toggle={
+                <DropdownToggle
+                  id="stacked-example-toggle"
+                  splitButtonItems={[
+                    <DropdownToggleCheckbox id="example-checkbox-1" key="split-checkbox" aria-label="Select all" />
+                  ]}
+                  onToggle={onSplitButtonToggle}
+                />
+              }
+              isOpen={splitButtonDropdownIsOpen}
+              dropdownItems={splitButtonDropdownItems}
+            />
+          </ToolbarItem>
+          <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
+            <Pagination
+              itemCount={37}
+              perPage={perPage}
+              page={page}
+              onSetPage={onSetPage}
+              widgetId="pagination-options-menu-top"
+              onPerPageSelect={onPerPageSelect}
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    </React.Fragment>
+  );
+
+  return (
+    <React.Fragment>
+      {firstRowItems}
+      <Divider />
+      {secondRowItems}
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';
+
+export const ToolbarSticky: React.FunctionComponent = () => {
+  const [isSticky, setIsSticky] = React.useState(true);
+  const [showEvenOnly, setShowEvenOnly] = React.useState(true);
+  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;
+
+  return (
+    <React.Fragment>
+      <div style={{ overflowY: 'scroll', height: '200px' }}>
+        <Toolbar id="toolbar-sticky" inset={{ default: 'insetNone' }} isSticky={isSticky}>
+          <ToolbarContent>
+            <ToolbarItem>
+              <SearchInput aria-label="Sticky example search input" />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Checkbox
+                label="Show only even number items"
+                isChecked={showEvenOnly}
+                onChange={setShowEvenOnly}
+                id="showOnlyEvenCheckbox"
+              />
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+        <ul>
+          {numbers.map(number => (
+            <li key={number}>{`item ${number}`}</li>
+          ))}
+        </ul>
+      </div>
+      <Checkbox label="Is toolbar sticky" isChecked={isSticky} onChange={setIsSticky} id="isStickyCheckbox" />
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarWidths: React.FunctionComponent = () => {
+  const widths = {
+    default: '100px',
+    sm: '80px',
+    md: '150px',
+    lg: '200px',
+    xl: '250px',
+    '2xl': '300px'
+  };
+
+  const items = (
+    <React.Fragment>
+      <ToolbarItem widths={widths}>
+        <Button variant="secondary" style={{ width: '100%' }}>
+          Action
+        </Button>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  return (
+    <Toolbar id="toolbar-widths">
+      <ToolbarContent>{items}</ToolbarContent>
+    </Toolbar>
+  );
+};

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

@@ -0,0 +1,222 @@
+import React from 'react';
+import {
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarFilter,
+  ToolbarToggleGroup,
+  ToolbarGroup,
+  SelectOptionObject
+} from '@patternfly/react-core';
+import {
+  Button,
+  Select,
+  SelectOption,
+  SelectVariant,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownPosition,
+  KebabToggle,
+  SearchInput
+} from '@patternfly/react-core';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
+import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
+import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+
+export const ToolbarWithFilters: React.FunctionComponent = () => {
+  const [inputValue, setInputValue] = React.useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
+  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
+  const [filters, setFilters] = React.useState({
+    risk: ['Low'],
+    status: ['New', 'Pending']
+  });
+  const [kebabIsOpen, setKebabIsOpen] = React.useState(false);
+
+  const onInputChange = (newValue: string) => {
+    setInputValue(newValue);
+  };
+
+  const onSelect = (
+    type: string,
+    event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject
+  ) => {
+    const checked = (event.target as HTMLInputElement).checked;
+    setFilters(prev => {
+      const prevSelections = prev[type];
+      return {
+        ...prev,
+        [type]: checked ? [...prevSelections, selection] : prevSelections.filter(value => value !== selection)
+      };
+    });
+  };
+
+  const onStatusSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+    onSelect('status', event, selection);
+  };
+
+  const onRiskSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+    onSelect('risk', event, selection);
+  };
+
+  const onDelete = (type: string, id: string) => {
+    if (type === 'Risk') {
+      setFilters({ risk: filters.risk.filter((fil: string) => fil !== id), status: filters.status });
+    } else if (type === 'Status') {
+      setFilters({ risk: filters.risk, status: filters.status.filter((fil: string) => fil !== id) });
+    } else {
+      setFilters({ risk: [], status: [] });
+    }
+  };
+
+  const onDeleteGroup = (type: string) => {
+    if (type === 'Risk') {
+      setFilters({ risk: [], status: filters.status });
+    } else if (type === 'Status') {
+      setFilters({ risk: filters.risk, status: [] });
+    }
+  };
+
+  const onStatusToggle = (isExpanded: boolean) => {
+    setStatusIsExpanded(isExpanded);
+  };
+
+  const onRiskToggle = (isExpanded: boolean) => {
+    setRiskIsExpanded(isExpanded);
+  };
+
+  const onKebabToggle = (isOpen: boolean) => {
+    setKebabIsOpen(isOpen);
+  };
+
+  const statusMenuItems = [
+    <SelectOption key="statusNew" value="New" />,
+    <SelectOption key="statusPending" value="Pending" />,
+    <SelectOption key="statusRunning" value="Running" />,
+    <SelectOption key="statusCancelled" value="Cancelled" />
+  ];
+
+  const riskMenuItems = [
+    <SelectOption key="riskLow" value="Low" />,
+    <SelectOption key="riskMedium" value="Medium" />,
+    <SelectOption key="riskHigh" value="High" />
+  ];
+
+  const toggleGroupItems = (
+    <React.Fragment>
+      <ToolbarItem variant="search-filter">
+        <SearchInput
+          aria-label="With filters example search input"
+          onChange={(_event, value) => onInputChange(value)}
+          value={inputValue}
+          onClear={() => {
+            onInputChange('');
+          }}
+        />
+      </ToolbarItem>
+      <ToolbarGroup variant="filter-group">
+        <ToolbarFilter
+          chips={filters.status}
+          deleteChip={(category, chip) => onDelete(category as string, chip as string)}
+          deleteChipGroup={category => onDeleteGroup(category as string)}
+          categoryName="Status"
+        >
+          <Select
+            variant={SelectVariant.checkbox}
+            aria-label="Status"
+            onToggle={onStatusToggle}
+            onSelect={onStatusSelect}
+            selections={filters.status}
+            isOpen={statusIsExpanded}
+            placeholderText="Status"
+          >
+            {statusMenuItems}
+          </Select>
+        </ToolbarFilter>
+        <ToolbarFilter
+          chips={filters.risk}
+          deleteChip={(category, chip) => onDelete(category as string, chip as string)}
+          categoryName="Risk"
+        >
+          <Select
+            variant={SelectVariant.checkbox}
+            aria-label="Risk"
+            onToggle={onRiskToggle}
+            onSelect={onRiskSelect}
+            selections={filters.risk}
+            isOpen={riskIsExpanded}
+            placeholderText="Risk"
+          >
+            {riskMenuItems}
+          </Select>
+        </ToolbarFilter>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
+
+  const toolbarItems = (
+    <React.Fragment>
+      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        {toggleGroupItems}
+      </ToolbarToggleGroup>
+      <ToolbarGroup variant="icon-button-group">
+        <ToolbarItem>
+          <Button variant="plain" aria-label="edit">
+            <EditIcon />
+          </Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="plain" aria-label="clone">
+            <CloneIcon />
+          </Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="plain" aria-label="sync">
+            <SyncIcon />
+          </Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem>
+        <Dropdown
+          toggle={<KebabToggle onToggle={onKebabToggle} />}
+          isOpen={kebabIsOpen}
+          isPlain
+          dropdownItems={dropdownItems}
+          position={DropdownPosition.right}
+        />
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  return (
+    <Toolbar
+      id="toolbar-with-filter"
+      className="pf-m-toggle-group-container"
+      collapseListedFiltersBreakpoint="xl"
+      clearAllFilters={() => onDelete('', '')}
+    >
+      <ToolbarContent>{toolbarItems}</ToolbarContent>
+    </Toolbar>
+  );
+};

package/src/components/Wizard/Wizard.tsx

@@ -112,6 +112,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   hasDrawer?: boolean;
   /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
+  /** Callback function for when the drawer is toggled. Can be used to set browser focus in the drawer. */
+  onExpandDrawer?: () => void;
 }
 
 interface WizardState {
@@ -149,7 +151,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     isOpen: undefined,
     isNavExpandable: false,
     hasDrawer: false,
-    isDrawerExpanded: false
+    isDrawerExpanded: false,
+    onExpandDrawer: () => undefined as any
   };
   private titleId: string;
   private descriptionId: string;
@@ -408,6 +411,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       onCurrentStepChanged,
       hasDrawer,
       isDrawerExpanded,
+      onExpandDrawer,
       ...rest
       /* eslint-enable @typescript-eslint/no-unused-vars */
     } = this.props;
@@ -539,6 +543,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
           <WizardToggle
             hasDrawer={hasDrawer}
             isDrawerExpanded={isDrawerExpanded}
+            onExpandDrawer={onExpandDrawer}
             mainAriaLabel={mainAriaLabel}
             isInPage={isOpen === undefined}
             mainAriaLabelledBy={(title || mainAriaLabelledBy) && (mainAriaLabelledBy || this.titleId)}

package/src/components/Wizard/WizardBody.tsx

@@ -22,6 +22,7 @@ export interface WizardBodyProps {
   /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
   /** Callback function for when the drawer is toggled */
+  onExpandDrawer?: () => void;
 }
 
 export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
@@ -32,6 +33,7 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
   mainComponent = 'div',
   hasDrawer,
   isDrawerExpanded,
+  onExpandDrawer,
   activeStep
 }: WizardBodyProps) => {
   const MainComponent = mainComponent;
@@ -40,7 +42,7 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
       <WizardDrawerWrapper
         hasDrawer={hasDrawer && activeStep.drawerPanelContent}
         wrapper={(children: React.ReactNode) => (
-          <Drawer isInline isExpanded={isDrawerExpanded}>
+          <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpandDrawer}>
             <DrawerContent panelContent={activeStep.drawerPanelContent}>{children}</DrawerContent>
           </Drawer>
         )}

package/src/components/Wizard/WizardToggle.tsx

@@ -33,6 +33,8 @@ export interface WizardToggleProps {
   hasDrawer?: boolean;
   /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
+  /** Callback function for when the drawer is toggled */
+  onExpandDrawer?: () => void;
 }
 
 export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
@@ -48,7 +50,8 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
   mainAriaLabel = null,
   isInPage = true,
   hasDrawer,
-  isDrawerExpanded
+  isDrawerExpanded,
+  onExpandDrawer
 }: WizardToggleProps) => {
   let activeStepIndex;
   let activeStepName;
@@ -99,6 +102,7 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
             hasNoBodyPadding={hasNoBodyPadding}
             activeStep={activeStep}
             isDrawerExpanded={isDrawerExpanded}
+            onExpandDrawer={onExpandDrawer}
             hasDrawer={hasDrawer}
           >
             {hasDrawer && !isDrawerExpanded && activeStep.drawerToggleButton}

package/src/components/Wizard/examples/WizardWithDrawer.tsx

@@ -14,6 +14,10 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
 
   const drawerRef = React.useRef<HTMLSpanElement>(null);
 
+  const onExpandDrawer = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
   const onOpenClick = () => {
     setIsDrawerExpanded(true);
   };
@@ -117,6 +121,7 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
       <Wizard
         height={400}
         isDrawerExpanded={isDrawerExpanded}
+        onExpandDrawer={onExpandDrawer}
         hasDrawer
         navAriaLabel={`${title} steps`}
         steps={steps}

package/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx

@@ -250,7 +250,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     // eslint-disable-next-line no-console
     <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
       <MenuInput>
-        <SearchInput aria-label="Filter menu items" type="search" onChange={value => onTextChange(value)} />
+        <SearchInput aria-label="Filter menu items" type="search" onChange={(_event, value) => onTextChange(value)} />
       </MenuInput>
       <Divider />
       <MenuContent>

package/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx

@@ -164,7 +164,7 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
             value={searchInputValue}
             type="search"
             placeholder="Search"
-            onChange={onSearchInputChange}
+            onChange={(_event, value) => onSearchInputChange(value)}
             onKeyPress={onEnterPressed}
             aria-labelledby="pf-context-selector-search-button-id-1"
           />

package/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx

@@ -66,13 +66,18 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
     setActiveMenu('rootMenu');
   };
 
-  const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
+  const drillIn = (
+    _event: React.KeyboardEvent | React.MouseEvent,
+    fromMenuId: string,
+    toMenuId: string,
+    pathId: string
+  ) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
     setDrilldownPath([...drilldownPath, pathId]);
     setActiveMenu(toMenuId);
   };
 
-  const drillOut = (toMenuId: string) => {
+  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
     setMenuDrilledIn(menuDrilledIn.slice(0, menuDrilledIn.length - 1));
     setDrilldownPath(drilldownPath.slice(0, drilldownPath.length - 1));
     setActiveMenu(toMenuId);