@patternfly/react-core 4.208.8 → 4.208.11

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup
+} from '@patternfly/react-core';
+
+export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+  const [overflowMessage, setOverflowMessage] = React.useState<string>('');
+
+  const maxDisplayed = 4;
+
+  const getOverflowMessage = (alertsNumber: number) => {
+    const overflow = alertsNumber - maxDisplayed;
+    if (overflow > 0) {
+      return `View ${overflow} more alerts`;
+    }
+    return '';
+  };
+
+  const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
+    setOverflowMessage(getOverflowMessage(alerts.length + 1));
+  };
+
+  const removeAlert = (key: React.Key) => {
+    const newAlerts = alerts.filter(alert => alert.key !== key);
+    setAlerts(newAlerts);
+    setOverflowMessage(getOverflowMessage(newAlerts.length));
+  };
+
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const getUniqueId = () => new Date().getTime();
+
+  const addSuccessAlert = () => {
+    addAlert('Toast success alert', 'success', getUniqueId());
+  };
+
+  const addDangerAlert = () => {
+    addAlert('Toast danger alert', 'danger', getUniqueId());
+  };
+
+  const addInfoAlert = () => {
+    addAlert('Toast info alert', 'info', getUniqueId());
+  };
+
+  const onOverflowClick = () => {
+    // eslint-disable-next-line no-console
+    console.log('Overflow message clicked');
+  };
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+          Add single success alert
+        </button>
+        <button onClick={addDangerAlert} type="button" className={btnClasses}>
+          Add single danger alert
+        </button>
+        <button onClick={addInfoAlert} type="button" className={btnClasses}>
+          Add single info alert
+        </button>
+      </InputGroup>
+      <AlertGroup isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
+        {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (
+          <Alert
+            isInline
+            variant={AlertVariant[variant]}
+            title={title}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+            key={key}
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};

package/src/components/AlertGroup/examples/AlertGroupStatic.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Alert, AlertGroup } from '@patternfly/react-core';
+
+export const AlertGroupStatic: React.FunctionComponent = () => (
+  <React.Fragment>
+    <AlertGroup>
+      <Alert title="Success alert" variant="success" isInline />
+      <Alert title="Info alert" variant="info" isInline />
+    </AlertGroup>
+  </React.Fragment>
+);

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup
+} from '@patternfly/react-core';
+
+export const AlertGroupToast: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+
+  const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
+  };
+
+  const removeAlert = (key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
+  };
+
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const getUniqueId = () => new Date().getTime();
+
+  const addSuccessAlert = () => {
+    addAlert('Toast success alert', 'success', getUniqueId());
+  };
+
+  const addDangerAlert = () => {
+    addAlert('Toast danger alert', 'danger', getUniqueId());
+  };
+
+  const addInfoAlert = () => {
+    addAlert('Toast info alert', 'info', getUniqueId());
+  };
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+          Add toast success alert
+        </button>
+        <button onClick={addDangerAlert} type="button" className={btnClasses}>
+          Add toast danger alert
+        </button>
+        <button onClick={addInfoAlert} type="button" className={btnClasses}>
+          Add toast info alert
+        </button>
+      </InputGroup>
+      <AlertGroup isToast isLiveRegion>
+        {alerts.map(({ key, variant, title }) => (
+          <Alert
+            variant={AlertVariant[variant]}
+            title={title}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+            key={key}
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup
+} from '@patternfly/react-core';
+
+export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+  const [overflowMessage, setOverflowMessage] = React.useState<string>('');
+
+  const maxDisplayed = 4;
+
+  const getOverflowMessage = (alertsNumber: number) => {
+    const overflow = alertsNumber - maxDisplayed;
+    if (overflow > 0) {
+      return `View ${overflow} more alerts`;
+    }
+    return '';
+  };
+
+  const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
+    setOverflowMessage(getOverflowMessage(alerts.length + 1));
+  };
+
+  const removeAlert = (key: React.Key) => {
+    const newAlerts = alerts.filter(alert => alert.key !== key);
+    setAlerts(newAlerts);
+    setOverflowMessage(getOverflowMessage(newAlerts.length));
+  };
+
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const getUniqueId = () => new Date().getTime();
+
+  const addSuccessAlert = () => {
+    addAlert('Toast success alert', 'success', getUniqueId());
+  };
+
+  const addDangerAlert = () => {
+    addAlert('Toast danger alert', 'danger', getUniqueId());
+  };
+
+  const addInfoAlert = () => {
+    addAlert('Toast info alert', 'info', getUniqueId());
+  };
+
+  const onOverflowClick = () => {
+    // eslint-disable-next-line no-console
+    console.log('Overflow message clicked');
+  };
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+          Add toast success alert
+        </button>
+        <button onClick={addDangerAlert} type="button" className={btnClasses}>
+          Add toast danger alert
+        </button>
+        <button onClick={addInfoAlert} type="button" className={btnClasses}>
+          Add toast info alert
+        </button>
+      </InputGroup>
+      <AlertGroup isToast isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
+        {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (
+          <Alert
+            variant={AlertVariant[variant]}
+            title={title}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+            key={key}
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};

package/src/components/Dropdown/DropdownMenu.tsx

@@ -45,6 +45,7 @@ export interface DropdownMenuItem extends React.HTMLAttributes<any> {
 
 export class DropdownMenu extends React.Component<DropdownMenuProps> {
   static displayName = 'DropdownMenu';
+  context!: React.ContextType<typeof DropdownContext>;
   refsCollection = [] as HTMLElement[][];
 
   static defaultProps: DropdownMenuProps = {

package/src/components/Menu/Menu.tsx

@@ -72,6 +72,7 @@ export interface MenuState {
 class MenuBase extends React.Component<MenuProps, MenuState> {
   static displayName = 'Menu';
   static contextType = MenuContext;
+  context!: React.ContextType<typeof MenuContext>;
   private menuRef = React.createRef<HTMLDivElement>();
   private activeMenu = null as Element;
   static defaultProps: MenuProps = {

package/src/components/Nav/NavList.tsx

@@ -23,7 +23,7 @@ export interface NavListProps
 export class NavList extends React.Component<NavListProps> {
   static displayName = 'NavList';
   static contextType = NavContext;
-
+  context!: React.ContextType<typeof NavContext>;
   static defaultProps: NavListProps = {
     ariaLeftScroll: 'Scroll left',
     ariaRightScroll: 'Scroll right'

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -28,7 +28,8 @@ export interface ToolbarExpandableContentProps extends React.HTMLProps<HTMLDivEl
 
 export class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentProps> {
   static displayName = 'ToolbarExpandableContent';
-  static contextType: any = ToolbarContext;
+  static contextType = ToolbarContext;
+  context!: React.ContextType<typeof ToolbarContext>;
   static defaultProps: PickOptional<ToolbarExpandableContentProps> = {
     isExpanded: false,
     clearFiltersButtonText: 'Clear all filters'

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -45,7 +45,8 @@ interface ToolbarFilterState {
 
 export class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterState> {
   static displayName = 'ToolbarFilter';
-  static contextType: any = ToolbarContext;
+  static contextType = ToolbarContext;
+  context!: React.ContextType<typeof ToolbarContext>;
   static defaultProps: PickOptional<ToolbarFilterProps> = {
     chips: [] as (string | ToolbarChip)[],
     showToolbarItem: true

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -5,7 +5,7 @@ import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpo
 import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
 import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_breakpoint_2xl';
 
-interface ToolbarContextProps {
+export interface ToolbarContextProps {
   isExpanded: boolean;
   toggleIsExpanded: () => void;
   chipGroupContentRef: RefObject<HTMLDivElement>;

package/src/helpers/index.ts

@@ -9,3 +9,4 @@ export * from './Popper/Popper';
 export * from './useIsomorphicLayout';
 export * from './KeyboardHandler';
 export * from './resizeObserver';
+export * from './useInterval';

package/src/helpers/useInterval.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+/** This is a custom React hook in a format suggest by Dan Abramov in a blog post here:
+ * https://overreacted.io/making-setinterval-declarative-with-react-hooks/. It allows setInterval to be used
+ * declaratively in functional React components.
+ */
+
+export function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = React.useRef(() => {});
+
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  React.useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}