@patternfly/react-core 4.233.1 → 4.234.0

package/src/components/Timestamp/__tests__/Timestamp.test.tsx

@@ -0,0 +1,177 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Timestamp, TimestampFormat, TimestampTooltipVariant } from '../Timestamp';
+
+jest.mock('../../Tooltip', () => ({
+  Tooltip: ({ content, children, ...props }) => (
+    <div data-testid="timestamp-tooltip-mock" {...props}>
+      <div data-testid="timestamp-tooltip-mock-content">{content}</div>
+      {children}
+    </div>
+  )
+}));
+
+test('Matches snapshot', () => {
+  /** Due to how the datetime attribute is contstructed internally, dateTime must be
+   * manually passed for this snapshot to pass on GitHub.
+   */
+  const { asFragment } = render(<Timestamp dateTime="2022-01-01T00:00:00.000Z" date={new Date(2022, 0, 1)} />);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders component', () => {
+  render(
+    <div data-testid="timestamp-container">
+      <Timestamp />
+    </div>
+  );
+
+  expect(screen.getByTestId('timestamp-container').firstChild).toBeVisible();
+});
+
+test('Renders with current date by default with default formatting', () => {
+  render(<Timestamp />);
+
+  expect(screen.getByText(new Date().toLocaleString())).toBeInTheDocument();
+});
+
+test('Renders passed in date with default formatting', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toBeInTheDocument();
+});
+
+test('Renders with custom formatting when dateFormat and timeFormat are passed in', () => {
+  render(
+    <Timestamp date={new Date(2022, 0, 1)} dateFormat={TimestampFormat.full} timeFormat={TimestampFormat.short} />
+  );
+
+  expect(screen.getByText('Saturday, January 1, 2022 at 12:00 AM')).toBeInTheDocument();
+});
+
+test('Renders with only date when dateFormat is passed in', () => {
+  render(<Timestamp date={new Date('1 Jan 2022 00:00:00 EST')} dateFormat={TimestampFormat.full} />);
+
+  expect(screen.getByText('Saturday, January 1, 2022')).toBeInTheDocument();
+});
+
+test('Renders with only time when timeFormat is passed in', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} timeFormat={TimestampFormat.short} />);
+
+  expect(screen.getByText('12:00 AM')).toBeInTheDocument();
+});
+
+test('Renders with custom formatting when customFormat is passed in', () => {
+  render(
+    <Timestamp
+      date={new Date(2022, 0, 1)}
+      customFormat={{ year: '2-digit', month: 'short', weekday: 'short', day: 'numeric', hour: 'numeric' }}
+    />
+  );
+
+  expect(screen.getByText('Sat, Jan 1, 22, 12 AM')).toBeInTheDocument();
+});
+
+test('Renders with custom content', () => {
+  render(<Timestamp>2 days ago</Timestamp>);
+
+  expect(screen.getByText('2 days ago')).toBeInTheDocument();
+});
+
+test('Renders with a custom suffix when displaySuffix is passed in', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} displaySuffix="US Eastern" />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM US Eastern')).toBeInTheDocument();
+});
+
+test('Renders with 12 hour time when is12Hour is passed', () => {
+  render(<Timestamp date={new Date(2022, 0, 1, 13, 0)} is12Hour />);
+
+  expect(screen.getByText('1/1/2022, 1:00:00 PM')).toBeInTheDocument();
+});
+
+test('Renders with 24 hour time when is12Hour is set to false', () => {
+  render(<Timestamp date={new Date(2022, 0, 1, 13, 0)} is12Hour={false} />);
+
+  expect(screen.getByText('1/1/2022, 13:00:00')).toBeInTheDocument();
+});
+
+test('Renders with locale passed in', () => {
+  render(<Timestamp date={new Date(2022, 1, 1)} locale="en-GB" />);
+
+  expect(screen.getByText('01/02/2022, 00:00:00')).toBeInTheDocument();
+});
+
+test('Renders with 12 hour time by default for US locale', () => {
+  render(<Timestamp date={new Date(2022, 1, 1, 13, 0)} locale="en-US" />);
+
+  expect(screen.getByText('2/1/2022, 1:00:00 PM')).toBeInTheDocument();
+});
+
+test('Renders with 24 hour time for US locale when is12Hour is false', () => {
+  render(<Timestamp date={new Date(2022, 1, 1, 13, 0)} locale="en-US" is12Hour={false} />);
+
+  expect(screen.getByText('2/1/2022, 13:00:00')).toBeInTheDocument();
+});
+
+test('Renders with 12 hour time for a 24 hour locale when is12Hour is passed', () => {
+  render(<Timestamp date={new Date(2022, 1, 1, 13, 0)} locale="en-GB" is12Hour />);
+
+  expect(screen.getByText('01/02/2022, 1:00:00 pm')).toBeInTheDocument();
+});
+
+test('Renders with pf-c-timestamp by default', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-c-timestamp');
+});
+
+test('Renders with pf-c-timestamp__text by default', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveClass('pf-c-timestamp__text');
+});
+
+test('Renders with custom class names', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} className="custom-time-class" />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('custom-time-class');
+});
+
+test('Renders with pf-m-help-text class when tooltip is passed in with default variant', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} tooltip={{ variant: TimestampTooltipVariant.default }} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-m-help-text');
+});
+
+test('Renders with pf-m-help-text class when tooltip is passed in with custom variant', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} tooltip={{ variant: TimestampTooltipVariant.custom }} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-m-help-text');
+});
+
+test('Renders with default tooltip content for default variant', () => {
+  render(
+    <Timestamp date={new Date('1 Jan 2022 00:00:00 EST')} tooltip={{ variant: TimestampTooltipVariant.default }} />
+  );
+
+  expect(screen.getByText('1/1/2022, 5:00:00 AM UTC')).toBeInTheDocument();
+});
+
+test('Renders with custom tooltip suffix for default variant', () => {
+  render(
+    <Timestamp
+      date={new Date('1 Jan 2022 00:00:00 EST')}
+      tooltip={{ variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time' }}
+    />
+  );
+
+  expect(screen.getByText('1/1/2022, 5:00:00 AM Coordinated Universal Time')).toBeInTheDocument();
+});
+
+test('Renders with custom tooltip content', () => {
+  render(<Timestamp tooltip={{ variant: TimestampTooltipVariant.custom, content: 'Custom tooltip content' }} />);
+
+  expect(screen.getByText('Custom tooltip content')).toBeInTheDocument();
+});

package/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-timestamp"
+    datetime="2022-01-01T00:00:00.000Z"
+  >
+    <time
+      class="pf-c-timestamp__text"
+      datetime="2022-01-01T00:00:00.000Z"
+    >
+      1/1/2022, 12:00:00 AM
+    </time>
+  </span>
+</DocumentFragment>
+`;

package/src/components/Timestamp/examples/Timestamp.md

@@ -0,0 +1,57 @@
+---
+id: Timestamp
+section: components
+cssPrefix: pf-c-timestamp
+propComponents: ['Timestamp', 'TimestampTooltip']
+beta: true
+---
+
+## Examples
+
+### Default
+
+By default, a timestamp will display the current date and time based on the current locale if the `date` prop is not passed in.
+
+```ts file="./TimestampDefault.tsx"
+```
+
+### Basic formats
+
+The format of the displayed content can be customized by passing in the `dateFormat` and/or `timeFormat` props. Passing in only one of the props will display only the date or time, depending on which prop is passed in. The possible options are "full", "long", "medium", and "short".
+
+You can also pass in the `displaySuffix` prop to display a custom suffix at the end of the displayed content. This will not override a timezone that is already displayed from the applied time format.
+
+```ts file="./TimestampBasicFormats.tsx"
+```
+
+### Custom format
+
+The format of the displayed content can be further customized by passing in the `customFormat` prop. Read [datetime format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) for a list of options that can be passed in.
+
+```ts file="./TimestampCustomFormat.tsx"
+```
+
+### Default tooltip
+
+To render a tooltip that displays the timestamp content as a UTC time, you can pass in the `tooltip` prop with a variant of "default". The format of the default tooltip content will match the format of the timestamp content.
+
+You can customize the suffix of this default tooltip variant by passing in `suffix` to the `tooltip` prop.
+
+```ts file="./TimestampDefaultTooltip.tsx"
+```
+
+### Custom content
+
+To display custom content, such as a relative time or prefacing text, you can pass in content to the `children` prop.
+
+When also rendering a default tooltip with the `tooltip` prop, you can pass in the `dateFormat` and/or `timeFormat` props to customize the tooltip content without affecting the custom timestamp content.
+
+```ts file="TimestampCustomContent.tsx"
+```
+
+### Custom tooltip
+
+By passing in `variant="custom"` and `content` to the `tooltip` prop, you can display custom content within the timestamp's tooltip.
+
+```ts file="TimestampCustomTooltip.tsx"
+```

package/src/components/Timestamp/examples/TimestampBasicFormats.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Timestamp, TimestampFormat } from '@patternfly/react-core';
+
+export const TimestampBasicFormats: React.FunctionComponent = () => {
+  const currentDate = new Date();
+
+  return (
+    <>
+      <Timestamp date={currentDate} dateFormat={TimestampFormat.full} timeFormat={TimestampFormat.full} />
+      <br />
+      <br />
+      <Timestamp date={currentDate} dateFormat={TimestampFormat.full} />
+      <br />
+      <br />
+      <Timestamp date={currentDate} timeFormat={TimestampFormat.full} />
+      <br />
+      <br />
+      <Timestamp
+        date={currentDate}
+        dateFormat={TimestampFormat.medium}
+        timeFormat={TimestampFormat.short}
+        displaySuffix="US Eastern"
+      />
+    </>
+  );
+};

package/src/components/Timestamp/examples/TimestampCustomContent.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Timestamp, TimestampFormat, TimestampTooltipVariant } from '@patternfly/react-core';
+
+export const TimestampCustomContent: React.FunctionComponent = () => (
+  <>
+    <Timestamp date={new Date(2022, 7, 9, 14, 57, 0)} tooltip={{ variant: TimestampTooltipVariant.default }}>
+      1 hour ago
+    </Timestamp>
+    <br />
+    <br />
+    <Timestamp
+      date={new Date(2022, 7, 9, 14, 57, 0)}
+      dateFormat={TimestampFormat.medium}
+      timeFormat={TimestampFormat.short}
+      tooltip={{ variant: TimestampTooltipVariant.default }}
+    >
+      Last updated August 9th, 2022 at 2:57 PM EDT
+    </Timestamp>
+  </>
+);

package/src/components/Timestamp/examples/TimestampCustomFormat.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Timestamp } from '@patternfly/react-core';
+
+export const TimestampCustomFormat: React.FunctionComponent = () => (
+  <Timestamp customFormat={{ year: '2-digit', month: 'short', weekday: 'short', day: 'numeric', hour: 'numeric' }} />
+);

package/src/components/Timestamp/examples/TimestampCustomTooltip.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
+
+export const TimestampCustomTooltip: React.FunctionComponent = () => (
+  <>
+    <Timestamp
+      date={new Date(2022, 7, 9, 14, 57, 0)}
+      tooltip={{ variant: TimestampTooltipVariant.custom, content: 'Last updated on August 9th, 2022 - 2:57 PM UTC' }}
+    />
+    <br />
+    <br />
+    <Timestamp
+      date={new Date(2022, 9, 31)}
+      tooltip={{ variant: TimestampTooltipVariant.custom, content: '31st of October, 2022' }}
+    >
+      Halloween
+    </Timestamp>
+  </>
+);

package/src/components/Timestamp/examples/TimestampDefault.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Timestamp } from '@patternfly/react-core';
+
+export const TimestampDefault: React.FunctionComponent = () => <Timestamp />;

package/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
+
+export const TimestampDefaultTooltip: React.FunctionComponent = () => {
+  const currentDate = new Date();
+
+  return (
+    <>
+      <Timestamp date={currentDate} tooltip={{ variant: TimestampTooltipVariant.default }} />
+      <br />
+      <br />
+      <Timestamp
+        date={currentDate}
+        tooltip={{ variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time' }}
+      />
+    </>
+  );
+};

package/src/components/Timestamp/index.ts

@@ -0,0 +1 @@
+export * from './Timestamp';

package/src/components/index.ts

@@ -73,6 +73,7 @@ export * from './TextArea';
 export * from './TextInput';
 export * from './Tile';
 export * from './TimePicker';
+export * from './Timestamp';
 export * from './Title';
 export * from './ToggleGroup';
 export * from './Toolbar';

package/src/demos/Button.md

@@ -5,10 +5,14 @@ section: components
 
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
-## Demos
+## Demos 
 
 ### Progress button
 
+The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `loginState`. 
+
+Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. 
+
 ```ts
 import React from 'react';
 import { Form, FormGroup, ActionGroup, InputGroup, TextInput, Button } from '@patternfly/react-core';

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

@@ -8,21 +8,21 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 export const ComposableActionsMenu: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isOpen && menuRef.current.contains(event.target as Node)) {
+    if (isOpen && menuRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -36,7 +36,11 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     };
   }, [isOpen, menuRef]);
 
-  const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: number) => {
+  const onSelect = (event?: React.MouseEvent, itemId?: string | number) => {
+    if (typeof itemId === 'string' || typeof itemId === 'undefined') {
+      return;
+    }
+
     if (selectedItems.includes(itemId)) {
       setSelectedItems(selectedItems.filter(id => id !== itemId));
     } else {
@@ -125,7 +129,7 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
         trigger={toggle}
         popper={menu}
         isVisible={isOpen}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
         popperMatchesTriggerWidth={false}
       />
     </div>

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

@@ -21,24 +21,24 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
   const [refFullOptions, setRefFullOptions] = React.useState<Element[]>();
   const [favorites, setFavorites] = React.useState<string[]>([]);
   const [filteredIds, setFilteredIds] = React.useState<string[]>(['*']);
-  const menuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
       return;
     }
-    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -132,7 +132,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
   ];
 
   const createFavorites = (favIds: string[]) => {
-    const favorites = [];
+    const favorites: unknown[] = [];
 
     menuItems.forEach(item => {
       if (item.type === MenuList) {
@@ -219,9 +219,10 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
       return;
     }
 
-    const filteredIds = refFullOptions
-      .filter(item => (item as HTMLElement).innerText.toLowerCase().includes(textValue.toString().toLowerCase()))
-      .map(item => item.id);
+    const filteredIds =
+      refFullOptions
+        ?.filter(item => (item as HTMLElement).innerText.toLowerCase().includes(textValue.toString().toLowerCase()))
+        .map(item => item.id) || [];
     setFilteredIds(filteredIds);
   };
 
@@ -275,7 +276,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
         popper={menu}
         isVisible={isOpen}
         popperMatchesTriggerWidth={false}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
       />
     </div>
   );

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

@@ -54,39 +54,37 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
     'Azure 2'
   ];
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<ItemData | string>(
-    typeof items[0] === 'string' ? items[0] : items[0].text
-  );
+  const [selected, setSelected] = React.useState(typeof items[0] === 'string' ? items[0] : items[0].text);
   const [filteredItems, setFilteredItems] = React.useState<ItemArrayType>(items);
   const [searchInputValue, setSearchInputValue] = React.useState<string>('');
-  const menuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuFooterBtnRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuFooterBtnRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
       return;
     }
-    if (menuFooterBtnRef.current.contains(event.target as Node)) {
+    if (menuFooterBtnRef.current?.contains(event.target as Node)) {
       if (event.key === 'Tab') {
         if (event.shiftKey) {
           return;
         }
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
-    if (menuRef.current.contains(event.target as Node)) {
+    if (menuRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };

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

@@ -24,21 +24,21 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<MenuHeightsType>({});
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isOpen && menuRef.current.contains(event.target as Node)) {
+    if (isOpen && menuRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -248,7 +248,7 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
       <Popper
         trigger={toggle}
         popper={menu}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
         isVisible={isOpen}
         popperMatchesTriggerWidth={false}
       />

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
 
 // eslint-disable-next-line no-console
-const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: string) => console.log('selected', itemId);
+const onSelect = (event?: React.MouseEvent, itemId?: string | number) => console.log('selected', itemId);
 
 interface FlyoutMenuProps {
   children?: React.ReactElement;
@@ -31,24 +31,24 @@ const FlyoutMenu: React.FunctionComponent<FlyoutMenuProps> = ({ depth, children
 
 export const ComposableFlyout: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const menuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
       return;
     }
-    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -105,7 +105,7 @@ export const ComposableFlyout: React.FunctionComponent = () => {
       <Popper
         trigger={toggle}
         popper={menu}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
         isVisible={isOpen}
         popperMatchesTriggerWidth={false}
       />