@patternfly/react-core 5.0.0-alpha.14 → 5.0.0-alpha.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.15",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "15626ee299af769871fd0852efd69373fa1e49b5"
+  "gitHead": "01c2451bcb6af1dc7767d86e6884c509b6b41891"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
-import { canUseDOM } from '../../helpers';
-import { KeyTypes } from '../../helpers/constants';
-import { AboutModalContainer } from './AboutModalContainer';
-import { PickOptional } from '../../helpers/typeUtils';
-
-export interface AboutModalProps {
+import { AboutModalBoxContent } from './AboutModalBoxContent';
+import { AboutModalBoxHeader } from './AboutModalBoxHeader';
+import { AboutModalBoxHero } from './AboutModalBoxHero';
+import { AboutModalBoxBrand } from './AboutModalBoxBrand';
+import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
+import { AboutModalBox } from './AboutModalBox';
+import { Modal, ModalVariant } from '../Modal';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+
+export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the about modal */
   children: React.ReactNode;
   /** Additional classes added to the about modal */
@@ -27,123 +29,77 @@ export interface AboutModalProps {
   /** The URL of the image for the background  */
   backgroundImageSrc?: string;
   /** Prevents the about modal from rendering content inside a container; allows for more flexible layouts  */
-  noAboutModalBoxContentContainer?: boolean;
+  hasNoContentContainer?: boolean;
   /** The parent container to append the modal to. Defaults to document.body */
   appendTo?: HTMLElement | (() => HTMLElement);
+  /** Aria label for the about modal.  This should be used when no productName prop is provided */
+  'aria-label'?: string;
   /** Set aria label to the close button */
   closeButtonAriaLabel?: string;
   /** Flag to disable focus trap */
   disableFocusTrap?: boolean;
 }
 
-interface ModalState {
-  container: HTMLElement;
-}
-
-export class AboutModal extends React.Component<AboutModalProps, ModalState> {
-  static displayName = 'AboutModal';
-  private static currentId = 0;
-  private id = AboutModal.currentId++;
-  ariaLabelledBy = `pf-about-modal-title-${this.id}`;
-  ariaDescribedBy = `pf-about-modal-content-${this.id}`;
-
-  static defaultProps: PickOptional<AboutModalProps> = {
-    className: '',
-    isOpen: false,
-    onClose: (_e): any => undefined,
-    productName: '',
-    trademark: '',
-    backgroundImageSrc: '',
-    noAboutModalBoxContentContainer: false,
-    appendTo: null as HTMLElement
-  };
-
-  constructor(props: AboutModalProps) {
-    super(props);
-
-    this.state = {
-      container: undefined
-    };
-    if (props.brandImageSrc && !props.brandImageAlt) {
-      // eslint-disable-next-line no-console
-      console.error('AboutModal:', 'brandImageAlt is required when a brandImageSrc is specified');
-    }
+export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
+  children,
+  className,
+  isOpen = false,
+  onClose = (_e): any => undefined,
+  productName,
+  trademark,
+  backgroundImageSrc,
+  brandImageSrc,
+  brandImageAlt,
+  hasNoContentContainer = false,
+  appendTo,
+  closeButtonAriaLabel,
+  'aria-label': ariaLabel,
+  disableFocusTrap,
+  ...props
+}: AboutModalProps) => {
+  if (brandImageSrc && !brandImageAlt) {
+    // eslint-disable-next-line no-console
+    console.error('AboutModal:', 'brandImageAlt is required when a brandImageSrc is specified, and should not be an empty string.');
   }
 
-  handleEscKeyClick = (event: KeyboardEvent) => {
-    if (event.key === KeyTypes.Escape && this.props.isOpen) {
-      this.props.onClose?.(event);
-    }
-  };
-
-  toggleSiblingsFromScreenReaders = (hide: boolean) => {
-    const { appendTo } = this.props;
-    const target: HTMLElement = this.getElement(appendTo);
-    const bodyChildren = target.children;
-    for (const child of Array.from(bodyChildren)) {
-      if (child !== this.state.container) {
-        hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
-      }
-    }
-  };
-
-  getElement = (appendTo: HTMLElement | (() => HTMLElement)) => {
-    if (typeof appendTo === 'function') {
-      return appendTo();
-    }
-    return appendTo || document.body;
-  };
-
-  componentDidMount() {
-    const container = document.createElement('div');
-    const target: HTMLElement = this.getElement(this.props.appendTo);
-    this.setState({ container });
-    target.appendChild(container);
-    target.addEventListener('keydown', this.handleEscKeyClick, false);
-
-    if (this.props.isOpen) {
-      target.classList.add(css(styles.backdropOpen));
-    } else {
-      target.classList.remove(css(styles.backdropOpen));
-    }
-  }
-
-  componentDidUpdate() {
-    const target: HTMLElement = this.getElement(this.props.appendTo);
-    if (this.props.isOpen) {
-      target.classList.add(css(styles.backdropOpen));
-      this.toggleSiblingsFromScreenReaders(true);
-    } else {
-      target.classList.remove(css(styles.backdropOpen));
-      this.toggleSiblingsFromScreenReaders(false);
-    }
-  }
-
-  componentWillUnmount() {
-    const target: HTMLElement = this.getElement(this.props.appendTo);
-    if (this.state.container) {
-      target.removeChild(this.state.container);
-    }
-    target.removeEventListener('keydown', this.handleEscKeyClick, false);
-    target.classList.remove(css(styles.backdropOpen));
+  if (!productName && !ariaLabel) {
+    // eslint-disable-next-line no-console
+    console.error('AboutModal:', 'Either productName or ariaLabel is required for component to be accessible');
   }
 
-  render() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { appendTo, ...props } = this.props;
-    const { container } = this.state;
-
-    if (!canUseDOM || !container) {
-      return null;
-    }
-
-    return ReactDOM.createPortal(
-      <AboutModalContainer
-        aboutModalBoxHeaderId={this.ariaLabelledBy}
-        aboutModalBoxContentId={this.ariaDescribedBy}
-        {...props}
-      />,
-      container
-    ) as React.ReactElement;
+  if (!isOpen) {
+    return null;
   }
-}
+  return (
+    <GenerateId prefix="pf-about-modal-title-">
+      {ariaLabelledBy => (
+        <Modal
+          isOpen={isOpen}
+          variant={ModalVariant.large}
+          {...(productName && {'aria-labelledby': ariaLabelledBy})}
+          aria-label={ariaLabel}
+          onEscapePress={onClose}
+          showClose={false}
+          appendTo={appendTo}
+          disableFocusTrap={disableFocusTrap}
+          hasNoBodyWrapper
+        >
+          <AboutModalBox className={css(className)}>
+            <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
+            <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
+            {productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
+            <AboutModalBoxContent
+              trademark={trademark}
+              hasNoContentContainer={hasNoContentContainer}
+              {...props}
+            >
+              {children}
+            </AboutModalBoxContent>
+            <AboutModalBoxHero backgroundImageSrc={backgroundImageSrc} />
+          </AboutModalBox>
+        </Modal>
+      )}
+    </GenerateId>
+  );
+};
+AboutModal.displayName = 'AboutModal';

package/src/components/AboutModal/AboutModalBox.tsx

@@ -3,18 +3,18 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
 
 export interface AboutModalBoxProps extends React.HTMLProps<HTMLDivElement> {
-  /** content rendered inside the AboutModelBox. */
+  /** Content rendered inside the about modal box */
   children: React.ReactNode;
-  /** additional classes added to the AboutModalBox */
+  /** Additional classes added to the about modal box */
   className?: string;
 }
 
 export const AboutModalBox: React.FunctionComponent<AboutModalBoxProps> = ({
   children,
-  className = '',
+  className,
   ...props
 }: AboutModalBoxProps) => (
-  <div role="dialog" aria-modal="true" className={css(styles.aboutModalBox, className)} {...props}>
+  <div className={css(styles.aboutModalBox, className)} {...props}>
     {children}
   </div>
 );

package/src/components/AboutModal/AboutModalBoxBrand.tsx

@@ -3,21 +3,18 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
 
 export interface AboutModalBoxBrandProps extends React.HTMLProps<HTMLDivElement> {
-  /** additional classes added to the About Modal Brand  */
-  className?: string;
-  /** the URL of the image for the Brand.  */
-  src?: string;
-  /** the alternate text of the Brand image.  */
+  /** The URL of the image for the brand.  */
+  src: string;
+  /** The alternate text of the brand image.  */
   alt: string;
 }
 
 export const AboutModalBoxBrand: React.FunctionComponent<AboutModalBoxBrandProps> = ({
-  className = '',
-  src = '',
+  src,
   alt,
   ...props
 }: AboutModalBoxBrandProps) => (
-  <div className={css(styles.aboutModalBoxBrand, className)} {...props}>
+  <div className={css(styles.aboutModalBoxBrand)} {...props}>
     <img className={css(styles.aboutModalBoxBrandImage)} src={src} alt={alt} />
   </div>
 );

package/src/components/AboutModal/AboutModalBoxCloseButton.tsx

@@ -5,8 +5,6 @@ import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface AboutModalBoxCloseButtonProps extends React.HTMLProps<HTMLDivElement> {
-  /** additional classes added to the About Modal Close button  */
-  className?: string;
   /** A callback for when the close button is clicked  */
   onClose?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
   /** Set close button aria label */
@@ -14,12 +12,11 @@ export interface AboutModalBoxCloseButtonProps extends React.HTMLProps<HTMLDivEl
 }
 
 export const AboutModalBoxCloseButton: React.FunctionComponent<AboutModalBoxCloseButtonProps> = ({
-  className = '',
   onClose = _e => undefined as any,
   'aria-label': ariaLabel = 'Close Dialog',
   ...props
 }: AboutModalBoxCloseButtonProps) => (
-  <div className={css(styles.aboutModalBoxClose, className)} {...props}>
+  <div className={css(styles.aboutModalBoxClose)} {...props}>
     <Button variant="plain" onClick={onClose} aria-label={ariaLabel}>
       <TimesIcon />
     </Button>

package/src/components/AboutModal/AboutModalBoxContent.tsx

@@ -4,29 +4,23 @@ import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-
 import contentStyles from '@patternfly/react-styles/css/components/Content/content';
 
 export interface AboutModalBoxContentProps extends React.HTMLProps<HTMLDivElement> {
-  /** content rendered inside the AboutModalBoxContent  */
+  /** Content rendered inside the about modal box content */
   children: React.ReactNode;
-  /** additional classes added to the AboutModalBoxContent  */
-  className?: string;
-  /** id to use for About Modal Box aria described by  */
-  id: string;
-  /** The Trademark info for the product  */
+  /** The trademark info for the product  */
   trademark: string;
   /** Prevents the about modal from rendering content inside a container; allows for more flexible layouts */
-  noAboutModalBoxContentContainer?: boolean;
+  hasNoContentContainer?: boolean;
 }
 
 export const AboutModalBoxContent: React.FunctionComponent<AboutModalBoxContentProps> = ({
   children,
-  className = '',
   trademark,
-  id,
-  noAboutModalBoxContentContainer = false,
+  hasNoContentContainer = false,
   ...props
 }: AboutModalBoxContentProps) => (
-  <div className={css(styles.aboutModalBoxContent, className)} id={id} {...props}>
+  <div className={css(styles.aboutModalBoxContent)} {...props}>
     <div className={css('pf-c-about-modal-box__body')}>
-      {noAboutModalBoxContentContainer ? children : <div className={css(contentStyles.content)}>{children}</div>}
+      {hasNoContentContainer ? children : <div className={css(contentStyles.content)}>{children}</div>}
     </div>
     <p className={css(styles.aboutModalBoxStrapline)}>{trademark}</p>
   </div>

package/src/components/AboutModal/AboutModalBoxHeader.tsx

@@ -4,21 +4,18 @@ import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-
 import { Title } from '../Title';
 
 export interface AboutModalBoxHeaderProps extends React.HTMLProps<HTMLDivElement> {
-  /** additional classes added to the button  */
-  className?: string;
-  /** Name of the Product  */
+  /** Name of the product  */
   productName?: string;
-  /** id to used for Modal Box header  */
+  /** Id to use for about modal box header  */
   id: string;
 }
 
 export const AboutModalBoxHeader: React.FunctionComponent<AboutModalBoxHeaderProps> = ({
-  className = '',
-  productName = '',
+  productName,
   id,
   ...props
 }: AboutModalBoxHeaderProps) => (
-  <div className={css(styles.aboutModalBoxHeader, className)} {...props}>
+  <div className={css(styles.aboutModalBoxHeader)} {...props}>
     <Title headingLevel="h1" size="4xl" id={id}>
       {productName}
     </Title>

package/src/components/AboutModal/AboutModalBoxHero.tsx

@@ -5,14 +5,11 @@ import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-
 import c_about_modal_box__hero_sm_BackgroundImage from '@patternfly/react-tokens/dist/esm/c_about_modal_box__hero_sm_BackgroundImage';
 
 export interface AboutModalBoxHeroProps extends React.HTMLProps<HTMLDivElement> {
-  /** additional classes added to the About Modal Hero  */
-  className?: string;
-  /** background image data or file path  */
+  /** Background image data or file path  */
   backgroundImageSrc?: string;
 }
 
 export const AboutModalBoxHero: React.FunctionComponent<AboutModalBoxHeroProps> = ({
-  className,
   backgroundImageSrc,
   ...props
 }: AboutModalBoxHeroProps) => (
@@ -24,7 +21,7 @@ export const AboutModalBoxHero: React.FunctionComponent<AboutModalBoxHeroProps>
         : {}
       /* eslint-enable camelcase */
     }
-    className={css(styles.aboutModalBoxHero, className)}
+    className={css(styles.aboutModalBoxHero)}
     {...props}
   />
 );

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

@@ -30,14 +30,6 @@ describe('AboutModal', () => {
     expect(screen.queryByRole('dialog')).toBeNull();
   });
 
-  test('Each modal is given new aria-describedby and aria-labelledby', () => {
-    const first = new AboutModal(props);
-    const second = new AboutModal(props);
-
-    expect(first.ariaLabelledBy).not.toBe(second.ariaLabelledBy);
-    expect(first.ariaDescribedBy).not.toBe(second.ariaDescribedBy);
-  });
-
   test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => {
     const noImgAltrops = {
       onClose: jest.fn(),
@@ -53,4 +45,18 @@ describe('AboutModal', () => {
     render(<AboutModal {...noImgAltrops}>Test About Modal</AboutModal>);
     expect(myMock).toHaveBeenCalled();
   });
+
+  test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => {
+    const noProductNameProps = {
+      onClose: jest.fn(),
+      children: 'modal content',
+      trademark: 'Trademark and copyright information here'
+
+    } as any;
+    const myMock = jest.fn() as any;
+    global.console = { error: myMock } as any;
+
+    render(<AboutModal {...noProductNameProps}>Test About Modal</AboutModal>);
+    expect(myMock).toHaveBeenCalled();
+  });
 });

package/src/components/AboutModal/__tests__/AboutModalBox.test.tsx

@@ -4,7 +4,7 @@ import { AboutModalBox } from '../AboutModalBox';
 
 test('AboutModalBox Test', () => {
   const { asFragment } = render(
-    <AboutModalBox aria-labelledby="id" aria-describedby="id2">
+    <AboutModalBox aria-labelledby="id">
       This is a AboutModalBox
     </AboutModalBox>
   );

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBox.test.tsx.snap

@@ -3,11 +3,8 @@
 exports[`AboutModalBox Test 1`] = `
 <DocumentFragment>
   <div
-    aria-describedby="id2"
     aria-labelledby="id"
-    aria-modal="true"
     class="pf-c-about-modal-box"
-    role="dialog"
   >
     This is a AboutModalBox
   </div>

package/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx

@@ -20,7 +20,7 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
-        noAboutModalBoxContentContainer={true}
+        hasNoContentContainer={true}
         productName="Product Name"
       >
         <TextContent id="test1" className="pf-u-py-xl">

package/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx

@@ -22,6 +22,7 @@ export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
         backgroundImageSrc={bgImg}
+        aria-label="Background image about modal"
       >
         <TextContent>
           <TextList component="dl">

package/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx

@@ -20,6 +20,7 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
+        aria-label="No product name about modal"
       >
         <TextContent>
           <TextList component="dl">

package/src/components/DataList/DataList.tsx

@@ -22,7 +22,7 @@ export enum DataListWrapModifier {
 
 export interface SelectableRowObject {
   /** Callback that executes when the screen reader accessible element receives a change event */
-  onChange: (id: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
 }
 
 export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, 'ref'> {
@@ -33,7 +33,7 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
   /** Adds accessible text to the DataList list */
   'aria-label': string;
   /** Optional callback to make DataList selectable, fired when DataListItem selected */
-  onSelectDataListItem?: (id: string) => void;
+  onSelectDataListItem?: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;
   /** Id of DataList item currently selected */
   selectedDataListItemId?: string;
   /** Flag indicating if DataList should have compact styling */
@@ -49,7 +49,7 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
 interface DataListContextProps {
   isSelectable: boolean;
   selectedDataListItemId: string;
-  updateSelectedDataListItem: (id: string) => void;
+  updateSelectedDataListItem: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;
   selectableRow?: SelectableRowObject;
 }
 
@@ -73,7 +73,7 @@ export class DataList extends React.Component<DataListProps> {
     super(props);
   }
 
-  getIndex = (id: string) => Array.from(this.ref.current.children).findIndex(item => item.id === id);
+  getIndex = (id: string) => Array.from(this.ref.current.children).findIndex((item) => item.id === id);
 
   render() {
     const {
@@ -89,8 +89,8 @@ export class DataList extends React.Component<DataListProps> {
     } = this.props;
     const isSelectable = onSelectDataListItem !== undefined;
 
-    const updateSelectedDataListItem = (id: string) => {
-      onSelectDataListItem(id);
+    const updateSelectedDataListItem = (event: React.MouseEvent | React.KeyboardEvent, id: string) => {
+      onSelectDataListItem(event, id);
     };
 
     return (

package/src/components/DataList/DataListItem.tsx

@@ -60,12 +60,13 @@ export class DataListItem extends React.Component<DataListItemProps> {
                 target = target.parentNode;
               }
             }
-            updateSelectedDataListItem(id);
+            updateSelectedDataListItem(event, id);
           };
 
           const onKeyDown = (event: React.KeyboardEvent) => {
-            if (event.key === KeyTypes.Enter) {
-              updateSelectedDataListItem(id);
+            if ([KeyTypes.Enter, KeyTypes.Space].includes(event.key)) {
+              event.preventDefault();
+              updateSelectedDataListItem(event, id);
             }
           };
 
@@ -95,14 +96,14 @@ export class DataListItem extends React.Component<DataListItemProps> {
                   className="pf-screen-reader"
                   type="radio"
                   checked={isSelected}
-                  onChange={event => selectableRow.onChange(id, event)}
+                  onChange={(event) => selectableRow.onChange(event, id)}
                   tabIndex={-1}
                   {...selectableInputAriaProps}
                 />
               )}
               {React.Children.map(
                 children,
-                child =>
+                (child) =>
                   React.isValidElement(child) &&
                   React.cloneElement(child as React.ReactElement<any>, {
                     rowid: ariaLabelledBy

package/src/components/DataList/examples/DataListSelectableRows.tsx

@@ -33,11 +33,11 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
     setIsOpen2(!isOpen2);
   };
 
-  const onSelectDataListItem = id => {
+  const onSelectDataListItem = (_event: React.MouseEvent | React.KeyboardEvent, id: string) => {
     setSelectedDataListItemId(id);
   };
 
-  const handleInputChange = (id: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, id: string) => {
     setSelectedDataListItemId(id);
   };
 

package/components/AboutModal/AboutModalContainer.d.ts

@@ -1,31 +0,0 @@
-import * as React from 'react';
-export interface AboutModalContainerProps extends React.HTMLProps<HTMLDivElement> {
-    /** content rendered inside the About Modal Box Content.  */
-    children: React.ReactNode;
-    /** additional classes added to the About Modal Box  */
-    className?: string;
-    /** Flag to show the About Modal  */
-    isOpen?: boolean;
-    /** A callback for when the close button is clicked  */
-    onClose?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
-    /** Product Name  */
-    productName?: string;
-    /** Trademark information  */
-    trademark?: string;
-    /** the URL of the image for the Brand.  */
-    brandImageSrc: string;
-    /** the alternate text of the Brand image.  */
-    brandImageAlt: string;
-    /** the URL of the image for the background.  */
-    backgroundImageSrc?: string;
-    /** id to use for About Modal Box aria labeled by  */
-    aboutModalBoxHeaderId: string;
-    /** id to use for About Modal Box aria described by  */
-    aboutModalBoxContentId: string;
-    /** Set close button aria label */
-    closeButtonAriaLabel?: string;
-    /** Flag to disable focus trap */
-    disableFocusTrap?: boolean;
-}
-export declare const AboutModalContainer: React.FunctionComponent<AboutModalContainerProps>;
-//# sourceMappingURL=AboutModalContainer.d.ts.map

package/components/AboutModal/AboutModalContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AboutModalContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/AboutModal/AboutModalContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC/E,4DAA4D;IAC5D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACzE,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qDAAqD;IACrD,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,kCAAkC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAAC,wBAAwB,CA+CjF,CAAC"}

package/components/AboutModal/AboutModalContainer.js

@@ -1,28 +0,0 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
-import { FocusTrap } from '../../helpers';
-import { AboutModalBoxContent } from './AboutModalBoxContent';
-import { AboutModalBoxHeader } from './AboutModalBoxHeader';
-import { AboutModalBoxHero } from './AboutModalBoxHero';
-import { AboutModalBoxBrand } from './AboutModalBoxBrand';
-import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
-import { AboutModalBox } from './AboutModalBox';
-import { Backdrop } from '../Backdrop/Backdrop';
-export const AboutModalContainer = (_a) => {
-    var { children, className = '', isOpen = false, onClose = _e => undefined, productName = '', trademark, brandImageSrc, brandImageAlt, backgroundImageSrc, closeButtonAriaLabel, aboutModalBoxHeaderId, aboutModalBoxContentId, disableFocusTrap = false } = _a, props = __rest(_a, ["children", "className", "isOpen", "onClose", "productName", "trademark", "brandImageSrc", "brandImageAlt", "backgroundImageSrc", "closeButtonAriaLabel", "aboutModalBoxHeaderId", "aboutModalBoxContentId", "disableFocusTrap"]);
-    if (!isOpen) {
-        return null;
-    }
-    return (React.createElement(Backdrop, null,
-        React.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } }, className: css(styles.bullseye) },
-            React.createElement(AboutModalBox, { className: className, "aria-labelledby": aboutModalBoxHeaderId, "aria-describedby": aboutModalBoxContentId },
-                React.createElement(AboutModalBoxBrand, { src: brandImageSrc, alt: brandImageAlt }),
-                React.createElement(AboutModalBoxCloseButton, { "aria-label": closeButtonAriaLabel, onClose: onClose }),
-                productName && React.createElement(AboutModalBoxHeader, { id: aboutModalBoxHeaderId, productName: productName }),
-                React.createElement(AboutModalBoxContent, Object.assign({ trademark: trademark, id: aboutModalBoxContentId, noAboutModalBoxContentContainer: false }, props), children),
-                React.createElement(AboutModalBoxHero, { backgroundImageSrc: backgroundImageSrc })))));
-};
-AboutModalContainer.displayName = 'AboutModalContainer';
-//# sourceMappingURL=AboutModalContainer.js.map

package/components/AboutModal/AboutModalContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AboutModalContainer.js","sourceRoot":"","sources":["../../../../src/components/AboutModal/AboutModalContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,MAAM,MAAM,wDAAwD,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AA+BhD,MAAM,CAAC,MAAM,mBAAmB,GAAsD,CAAC,EAe5D,EAAE,EAAE;QAfwD,EACrF,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,SAAS,EACzB,WAAW,GAAG,EAAE,EAChB,SAAS,EACT,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,gBAAgB,GAAG,KAAK,OAEC,EADtB,KAAK,cAd6E,iOAetF,CADS;IAER,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IACD,OAAO,CACL,oBAAC,QAAQ;QACP,oBAAC,SAAS,IACR,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,EAC9F,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC;YAE/B,oBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,qBACH,qBAAqB,sBACpB,sBAAsB;gBAExC,oBAAC,kBAAkB,IAAC,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,aAAa,GAAI;gBAC9D,oBAAC,wBAAwB,kBAAa,oBAAoB,EAAE,OAAO,EAAE,OAAO,GAAI;gBAC/E,WAAW,IAAI,oBAAC,mBAAmB,IAAC,EAAE,EAAE,qBAAqB,EAAE,WAAW,EAAE,WAAW,GAAI;gBAC5F,oBAAC,oBAAoB,kBACnB,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,sBAAsB,EAC1B,+BAA+B,EAAE,KAAK,IAClC,KAAK,GAER,QAAQ,CACY;gBACvB,oBAAC,iBAAiB,IAAC,kBAAkB,EAAE,kBAAkB,GAAI,CAC/C,CACN,CACH,CACZ,CAAC;AACJ,CAAC,CAAC;AACF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC"}