@patternfly/react-core 4.208.10 → 4.208.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.208.10",
+  "version": "4.208.11",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.59.10",
-    "@patternfly/react-styles": "^4.58.10",
-    "@patternfly/react-tokens": "^4.60.10",
+    "@patternfly/react-icons": "^4.59.11",
+    "@patternfly/react-styles": "^4.58.11",
+    "@patternfly/react-tokens": "^4.60.11",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "b08f176b3d55fd3feb719db6c02ea0d593405d6b"
+  "gitHead": "8a9ebad3fd36e1fd06c01b9b66d6e8d2b288ed2f"
 }

package/src/components/AlertGroup/examples/AlertGroup.md

@@ -8,389 +8,35 @@ propComponents: ['Alert', 'AlertGroup', 'AlertActionCloseButton', 'AlertActionLi
 ## Examples
 ### Static alert group
 These alerts appear on page load and are discoverable from within the normal page content flow, and will not be announced individually/explicitly to assistive technology.
-```js
-import React from 'react';
-import { Alert, AlertGroup } from '@patternfly/react-core';
-
-class StaticAlertGroup extends React.Component {
-  render() {
-    return (
-      <React.Fragment>
-        <AlertGroup>
-          <Alert title="Success alert" variant="success" isInline />
-          <Alert title="Info alert" variant="info" isInline/>
-        </AlertGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./AlertGroupStatic.tsx"
 ```
 
 ### Toast alert group
 Alerts asynchronously appended into dynamic AlertGroups with `isLiveRegion` will be announced to assistive technology at the moment the change happens, following the strategy used for aria-atomic, which defaults to false. This means only changes of type "addition" will be announced.
-```js
-import React from 'react';
-import { Alert, AlertGroup, AlertActionCloseButton, AlertVariant, InputGroup } from '@patternfly/react-core';
-class ToastAlertGroup extends React.Component {
-  constructor() {
-    super();
-    this.state = { alerts: [] };
-    this.addAlert = (title, variant, key) => {
-      this.setState({
-        alerts: [ ...this.state.alerts, { title: title, variant: variant, key }]
-      });
-    };
-    this.removeAlert = key => {
-      this.setState({ alerts: [...this.state.alerts.filter(el => el.key !== key)] });
-    };
-  }
-  render() {
-    const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
-    const getUniqueId = () => (new Date().getTime());
-    const addSuccessAlert = () => { this.addAlert('Toast success alert', 'success', getUniqueId()) };
-    const addDangerAlert = () => { this.addAlert('Toast danger alert', 'danger', getUniqueId()) };
-    const addInfoAlert = () => { this.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>
-          {this.state.alerts.map(({key, variant, title}) => (
-            <Alert
-              variant={AlertVariant[variant]}
-              title={title}
-              actionClose={
-                <AlertActionCloseButton
-                  title={title}
-                  variantLabel={`${variant} alert`}
-                  onClose={() => this.removeAlert(key)}
-                />
-              }
-              key={key} />
-          ))}
-        </AlertGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./AlertGroupToast.tsx"
 ```
 
 ### Toast alert group with overflow capture
 After a specified number of alerts displayed is reached, we will see an overflow message instead of new alerts. Alerts asynchronously appended into dynamic AlertGroups with `isLiveRegion` will be announced to assistive technology at the moment the change happens. When the overflow message appears or is updated in AlertGroups with `isLiveRegion`, the `View 1 more alert` text will be read, but the alert message will not be read. screen reader user or keyboard user will need a way to navigate to and reveal the hidden alerts before they disappear. Alternatively, there should be a place that notifications or alerts are collected to be viewed or read later. In this example we are showing a max of 4 alerts.
-```js isBeta
-import React from 'react';
-import { Alert, AlertGroup, AlertActionCloseButton, AlertVariant, InputGroup } from '@patternfly/react-core';
-class ToastAlertGroup extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      alerts: [],
-      maxDisplayed: "4",
-      overflowMessage: ''
-    };
-    this.getOverflowMessage = (alertsNumber) => {
-      const overflow = alertsNumber - this.state.maxDisplayed;
-      if (overflow > 0) {
-        return "View " + (overflow) + " more alerts";
-      }
-      return '';
-    };
-    this.addAlert = (title, variant, key) => {
-      this.setState({
-        ...this.state,
-        alerts: [ ...this.state.alerts, { title: title, variant: variant, key }],
-        overflowMessage: this.getOverflowMessage(this.state.alerts.length + 1)
-      });
-    };
-    this.removeAlert = key => {
-      const newAlerts = [...this.state.alerts.filter(el => el.key !== key)];
-      this.setState({
-        ...this.state,
-        alerts: newAlerts,
-        overflowMessage: this.getOverflowMessage(newAlerts.length)
-      });
-    };
-  }
-  render() {
-    const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
-    const getUniqueId = () => (new Date().getTime());
-    const addSuccessAlert = () => { this.addAlert('Toast success alert', 'success', getUniqueId()) };
-    const addDangerAlert = () => { this.addAlert('Toast danger alert', 'danger', getUniqueId()) };
-    const addInfoAlert = () => { this.addAlert('Toast info alert', 'info', getUniqueId()) };
-    const onOverflowClick = () => {
-      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={this.state.overflowMessage}>
-          {this.state.alerts.slice(0, this.state.maxDisplayed).map(({key, variant, title}) => (
-            <Alert
-              variant={AlertVariant[variant]}
-              title={title}
-              actionClose={
-                <AlertActionCloseButton
-                  title={title}
-                  variantLabel={`${variant} alert`}
-                  onClose={() => this.removeAlert(key)}
-                />
-              }
-              key={key} />
-          ))}
-        </AlertGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="AlertGroupToastOverflowCapture.tsx" isBeta
 ```
 
 ### Singular dynamic alert group
 This alert will appear in the page, most likely in response to a user action.
-```js
-import React from 'react';
-import { Alert, AlertGroup, AlertVariant, AlertActionCloseButton, InputGroup } from '@patternfly/react-core';
-class SingularAdditiveAlertGroup extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      alerts: []
-    }
-  }
-  render() {
-    const addAlert = (title, variant, key) => {
-      this.setState({ alerts: [...this.state.alerts, { title: title, variant: variant, key }] });
-    };
-    const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
-    const getUniqueId = () => (new Date().getTime());
-    const addSuccessAlert = () => { addAlert('Single success alert', 'success', getUniqueId()) };
-    const addDangerAlert = () => { addAlert('Single danger alert', 'danger', getUniqueId()) };
-    const addInfoAlert = () => { addAlert('Single info alert', 'info', getUniqueId()) };
-    this.removeAlert = key => {
-      this.setState({ alerts: [...this.state.alerts.filter(el => el.key !== key)] });
-    };
-    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>
-          {this.state.alerts.map(({ title, variant, key }) => (
-            <Alert
-              isInline
-              variant={AlertVariant[variant]}
-              title={title}
-              key={key}
-              actionClose={
-                <AlertActionCloseButton
-                  title={title}
-                  variantLabel={`${variant} alert`}
-                  onClose={() => this.removeAlert(key)}
-                />
-              }/>
-          ))}
-        </AlertGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./AlertGroupSingularDynamic.tsx"
 ```
 
 ### Singular dynamic alert group with overflow message
 This alert will appear in the page, most likely in response to a user action. In this example we are showing a max of 4 alerts.
-```js isBeta
-import React from 'react';
-import { Alert, AlertGroup, AlertVariant, AlertActionCloseButton, InputGroup } from '@patternfly/react-core';
-class SingularAdditiveAlertGroup extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      alerts: [],
-      maxDisplayed: "4",
-      overflowMessage: ''
-    };
-    this.getOverflowMessage = (alertsNumber) => {
-      const overflow = alertsNumber - this.state.maxDisplayed;
-      if (overflow > 0) {
-        return "View " + (overflow) + " more alerts";
-      }
-      return '';
-    };
-    this.addAlert = (title, variant, key) => {
-      this.setState({
-        ...this.state,
-        alerts: [ ...this.state.alerts, { title: title, variant: variant, key }],
-        overflowMessage: this.getOverflowMessage(this.state.alerts.length + 1)
-      });
-    };
-    this.removeAlert = key => {
-      const newAlerts = [...this.state.alerts.filter(el => el.key !== key)];
-      this.setState({
-        ...this.state,
-        alerts: newAlerts,
-        overflowMessage: this.getOverflowMessage(newAlerts.length)
-      });
-    };
-  }
-  render() {
-    const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
-    const getUniqueId = () => (new Date().getTime());
-    const addSuccessAlert = () => { this.addAlert('Single success alert', 'success', getUniqueId()) };
-    const addDangerAlert = () => { this.addAlert('Single danger alert', 'danger', getUniqueId()) };
-    const addInfoAlert = () => { this.addAlert('Single info alert', 'info', getUniqueId()) };
-    const onOverflowClick = () => {
-      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 overflowMessage={this.state.overflowMessage} onOverflowClick={onOverflowClick}>
-          {this.state.alerts.slice(0, this.state.maxDisplayed).map(({ title, variant, key }) => (
-            <Alert
-              isInline
-              variant={AlertVariant[variant]}
-              title={title}
-              key={key}
-              actionClose={
-                <AlertActionCloseButton
-                  title={title}
-                  variantLabel={`${variant} alert`}
-                  onClose={() => this.removeAlert(key)}
-                />
-              }/>
-          ))}
-        </AlertGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="AlertGroupSingularDynamicOverflow.tsx" isBeta
 ```
 
 ### Multiple dynamic alert group
 These alerts will appear in the page, most likely in response to a user action.
-```js
-import React from 'react';
-import { Alert, AlertGroup, AlertVariant, AlertActionCloseButton, InputGroup } from '@patternfly/react-core';
-class MultipleAdditiveAlertGroup extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      alerts: []
-    }
-  }
-  render() {
-    const addAlerts = (incomingAlerts) => {
-      this.setState({ alerts: [...this.state.alerts, ...incomingAlerts] });
-    };
-    const getUniqueId = () => (
-      (String.fromCharCode(65 + Math.floor(Math.random() * 26))+ Date.now())
-    );
-    const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
-    const addAlertCollection = () => {
-      addAlerts([
-        { title: 'First alert notification.', variant: 'success', key: getUniqueId() },
-        { title: 'Second alert notification.', variant: 'warning', key: getUniqueId() },
-        { title: 'Third alert notification.', variant: 'danger', key: getUniqueId() }
-      ])
-    };
-    this.removeAlert = key => {
-      this.setState({ alerts: [...this.state.alerts.filter(el => el.key !== key)] });
-    };
-    return (
-      <React.Fragment>
-        <InputGroup style={{ marginBottom: '16px' }}>
-          <button onClick={addAlertCollection} type="button" className={btnClasses}>Add alert collection</button>
-        </InputGroup>
-        <AlertGroup isToast isLiveRegion>
-          {this.state.alerts.map(({ title, variant, key, action }) => (
-            <Alert
-              variant={AlertVariant[variant]}
-              title={title}
-              key={key}
-              actionClose={
-                <AlertActionCloseButton
-                  title={title}
-                  variantLabel={`${variant} alert`}
-                  onClose={() => this.removeAlert(key)}
-                />
-              }/>
-          ))}
-        </AlertGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./AlertGroupMultipleDynamic.tsx"
 ```
 
 ### Async alert group
 This shows how an alert could be triggered by an asynchronous event in the application. Note how you can customize how the alert will be announced to assistive technology. See the alert group accessibility tab for more information.
-```js
-import React from 'react';
-import { Alert, AlertGroup, AlertActionCloseButton, AlertVariant, InputGroup } from '@patternfly/react-core';
-class AsyncAdditiveAlertGroup extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      alerts: [],
-      timer: null
-    }
-    this.stopAsyncAlerts = () => { clearInterval(this.state.timer); }
-  }
-  componentWillUnmount() { this.stopAsyncAlerts(); }
-  render() {
-    const addAlerts = (incomingAlerts) => { this.setState({ alerts: [...this.state.alerts, ...incomingAlerts] }); };
-    const getUniqueId = () => (new Date().getTime());
-    const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
-    this.removeAlert = key => {
-      this.setState({ alerts: [...this.state.alerts.filter(el => el.key !== key)] });
-    };
-    const startAsyncAlerts = () => {
-      let timerValue = setInterval(() => {
-        addAlerts([
-          {
-            title: `Async notification ${this.state.alerts.length + 1} was added to the queue.`,
-            variant: 'danger',
-            key: getUniqueId()
-          }
-        ])
-      }, 4500);
-      this.setState({timer: timerValue});
-    };
-    return (
-      <React.Fragment>
-        <InputGroup style={{ marginBottom: '16px' }}>
-          <button onClick={startAsyncAlerts} type="button" className={btnClasses}>Start async alerts</button>
-          <button onClick={this.stopAsyncAlerts} type="button" className={btnClasses}>Stop async alerts</button>
-        </InputGroup>
-        <AlertGroup isToast isLiveRegion aria-live="assertive">
-          {this.state.alerts.map(({ title, variant, key }) => (
-            <Alert
-              variant={AlertVariant[variant]}
-              title={title}
-              key={key}
-              actionClose={
-                <AlertActionCloseButton
-                  title={title}
-                  variantLabel={`${variant} alert`}
-                  onClose={() => this.removeAlert(key)}
-                />
-              }/>
-          ))}
-        </AlertGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./AlertGroupAsync.tsx"
 ```

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup,
+  useInterval
+} from '@patternfly/react-core';
+
+export const AlertGroupAsync: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+  const [isRunning, setIsRunning] = React.useState(false);
+
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const getUniqueId = () => new Date().getTime();
+
+  const addAlert = () => {
+    setAlerts(prevAlerts => [
+      ...prevAlerts,
+      {
+        title: `Async notification ${prevAlerts.length + 1} was added to the queue.`,
+        variant: 'danger',
+        key: getUniqueId()
+      }
+    ]);
+  };
+
+  const removeAlert = (key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
+  };
+
+  const startAsyncAlerts = () => {
+    setIsRunning(true);
+  };
+
+  const stopAsyncAlerts = () => {
+    setIsRunning(false);
+  };
+
+  useInterval(addAlert, isRunning ? 4500 : null);
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={startAsyncAlerts} type="button" className={btnClasses}>
+          Start async alerts
+        </button>
+        <button onClick={stopAsyncAlerts} type="button" className={btnClasses}>
+          Stop async alerts
+        </button>
+      </InputGroup>
+      <AlertGroup isToast isLiveRegion aria-live="assertive">
+        {alerts.map(({ title, variant, key }) => (
+          <Alert
+            variant={AlertVariant[variant]}
+            title={title}
+            key={key}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup
+} from '@patternfly/react-core';
+
+export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
+  const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
+
+  const addAlerts = (incomingAlerts: Partial<AlertProps>[]) => {
+    setAlerts(prevAlerts => [...prevAlerts, ...incomingAlerts]);
+  };
+
+  const removeAlert = (key: React.Key) => {
+    setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
+  };
+
+  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+
+  const getUniqueId = () => String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now();
+
+  const addAlertCollection = () => {
+    addAlerts([
+      { title: 'First alert notification.', variant: 'success', key: getUniqueId() },
+      { title: 'Second alert notification.', variant: 'warning', key: getUniqueId() },
+      { title: 'Third alert notification.', variant: 'danger', key: getUniqueId() }
+    ]);
+  };
+
+  return (
+    <React.Fragment>
+      <InputGroup style={{ marginBottom: '16px' }}>
+        <button onClick={addAlertCollection} type="button" className={btnClasses}>
+          Add alert collection
+        </button>
+      </InputGroup>
+      <AlertGroup isToast isLiveRegion>
+        {alerts.map(({ title, variant, key }) => (
+          <Alert
+            variant={AlertVariant[variant]}
+            title={title}
+            key={key}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import {
+  Alert,
+  AlertProps,
+  AlertGroup,
+  AlertActionCloseButton,
+  AlertVariant,
+  InputGroup
+} from '@patternfly/react-core';
+
+export const AlertGroupSingularDynamic: 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 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>
+        {alerts.map(({ title, variant, key }) => (
+          <Alert
+            isInline
+            variant={AlertVariant[variant]}
+            title={title}
+            key={key}
+            actionClose={
+              <AlertActionCloseButton
+                title={title as string}
+                variantLabel={`${variant} alert`}
+                onClose={() => removeAlert(key)}
+              />
+            }
+          />
+        ))}
+      </AlertGroup>
+    </React.Fragment>
+  );
+};