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

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -85,12 +85,12 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []); // Selecting all should only select all currently filtered rows
+    setSelectedRepoNames(isSelecting ? filteredRepos.map((r) => r.name) : []); // Selecting all should only select all currently filtered rows
   const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
@@ -107,7 +107,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }
@@ -234,7 +234,9 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}

package/src/demos/Filters/examples/FilterSingleSelect.tsx

@@ -73,12 +73,12 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []);
+    setSelectedRepoNames(isSelecting ? filteredRepos.map((r) => r.name) : []);
   const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
@@ -95,7 +95,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }
@@ -221,7 +221,9 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -323,7 +325,14 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
 
   const select = (
     <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current || undefined} isVisible={isOpen} />
+      <Popper
+        trigger={toggle}
+        triggerRef={toggleRef}
+        popper={menu}
+        popperRef={menuRef}
+        appendTo={containerRef.current || undefined}
+        isVisible={isOpen}
+      />
     </div>
   );
 

package/src/demos/PasswordGenerator.md

@@ -96,7 +96,9 @@ const PasswordGenerator: React.FunctionComponent = () => {
   };
 
   // The autocomplete menu should close if the user clicks outside the menu.
-  const handleClickOutside = (event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>) => {
+  const handleClickOutside = (
+    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>
+  ) => {
     if (
       isAutocompleteOpen &&
       autocompleteRef &&
@@ -146,7 +148,7 @@ const PasswordGenerator: React.FunctionComponent = () => {
             actions={
               <MenuItemAction
                 icon={<RedoIcon aria-hidden />}
-                onClick={e => {
+                onClick={(e) => {
                   setGeneratedPassword(generatePassword());
                 }}
                 actionId="redo"
@@ -164,7 +166,9 @@ const PasswordGenerator: React.FunctionComponent = () => {
   return (
     <Popper
       trigger={textInput}
+      triggerRef={searchInputRef}
       popper={autocomplete}
+      popperRef={autocompleteRef}
       isVisible={isAutocompleteOpen}
       enableFlip={false}
       // append the autocomplete menu to the search input in the DOM for the sake of the keyboard navigation experience

package/src/demos/SearchInput/SearchInput.md

@@ -173,7 +173,9 @@ SearchAutocomplete = () => {
   return (
     <Popper
       trigger={searchInput}
+      triggerRef={searchInputRef}
       popper={autocomplete}
+      popperRef={autocompleteRef}
       isVisible={isAutocompleteOpen}
       enableFlip={false}
       // append the autocomplete menu to the search input in the DOM for the sake of the keyboard navigation experience
@@ -445,7 +447,7 @@ AdvancedComposableSearchInput = () => {
               <Grid hasGutter md={6}>
                 <GridItem>
                   <FormGroup label='Date within' fieldId='date-within' key='date-within'>
-                    <Popper trigger={dateWithinToggle} popper={dateWithinOptions} isVisible={isDateWithinOpen} />
+                    <Popper trigger={dateWithinToggle} triggerRef={dateWithinToggleRef} popper={dateWithinOptions} popperRef={dateWithinMenuRef} isVisible={isDateWithinOpen} />
                   </FormGroup>
                 </GridItem>
                 <GridItem>
@@ -477,7 +479,9 @@ AdvancedComposableSearchInput = () => {
   return (
     <Popper
       trigger={searchInput}
+      triggerRef={searchInputRef}
       popper={advancedForm}
+      popperRef={advancedSearchPaneRef}
       isVisible={isAdvancedSearchOpen}
       enableFlip={false}
       appendTo={() => document.querySelector("#custom-advanced-search")}

package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

@@ -50,7 +50,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
 
   /** callback for removing a chip from the chip selections */
   const deleteChip = (chipToDelete: string) => {
-    const newChips = currentChips.filter(chip => !Object.is(chip, chipToDelete));
+    const newChips = currentChips.filter((chip) => !Object.is(chip, chipToDelete));
     setCurrentChips(newChips);
   };
 
@@ -71,7 +71,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
     /** in the menu only show items that include the text in the input */
     const filteredMenuItems = menuItemsText
       .filter(
-        item =>
+        (item) =>
           !inputValue ||
           item.toLowerCase().includes(
             inputValue
@@ -225,7 +225,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
           onKeyDown={handleTextInputKeyDown}
         >
           <ChipGroup>
-            {currentChips.map(currentChip => (
+            {currentChips.map((currentChip) => (
               <Chip key={currentChip} onClick={() => deleteChip(currentChip)}>
                 {currentChip}
               </Chip>
@@ -255,5 +255,14 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
     </div>
   );
 
-  return <Popper trigger={inputGroup} popper={menu} isVisible={menuIsOpen} onDocumentClick={handleClick} />;
+  return (
+    <Popper
+      trigger={inputGroup}
+      triggerRef={textInputGroupRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={menuIsOpen}
+      onDocumentClick={handleClick}
+    />
+  );
 };

package/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx

@@ -37,7 +37,7 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
 
   /** callback for removing a chip from the chip selections */
   const deleteChip = (chipToDelete: string) => {
-    const newChips = currentChips.filter(chip => !Object.is(chip, chipToDelete));
+    const newChips = currentChips.filter((chip) => !Object.is(chip, chipToDelete));
     setCurrentChips(newChips);
   };
 
@@ -50,7 +50,7 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
   React.useEffect(() => {
     /** in the menu only show items that include the text in the input */
     const filteredMenuItems = suggestionItems
-      .filter(item => !inputValue || item.toLowerCase().includes(inputValue.toString().toLowerCase()))
+      .filter((item) => !inputValue || item.toLowerCase().includes(inputValue.toString().toLowerCase()))
       .map((currentValue, index) => (
         <MenuItem key={currentValue} itemId={index}>
           {currentValue}
@@ -219,7 +219,7 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
           aria-label="Search input"
         >
           <ChipGroup>
-            {currentChips.map(currentChip => (
+            {currentChips.map((currentChip) => (
               <Chip key={currentChip} onClick={() => deleteChip(currentChip)}>
                 {currentChip}
               </Chip>
@@ -252,7 +252,9 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
   return (
     <Popper
       trigger={inputGroup}
+      triggerRef={textInputGroupRef}
       popper={menu}
+      popperRef={menuRef}
       appendTo={() => textInputGroupRef.current}
       isVisible={menuIsOpen}
       onDocumentClick={handleClick}

package/src/helpers/Popper/Popper.tsx

@@ -46,17 +46,22 @@ export const getOpacityTransition = (animationDuration: number) =>
 
 export interface PopperProps {
   /**
-   * The reference element to which the Popover is relatively placed to.
-   * Use either trigger or reference, not both.
+   * Trigger reference element to which the popper is relatively placed to.
    */
   trigger?: React.ReactNode;
   /**
-   * The reference element to which the Popover is relatively placed to.
-   * Use either trigger or reference, not both.
+   * A reference to the trigger reference element that can be passed instead of or along
+   * with the trigger prop. When passed along with the trigger prop, the div element that
+   * wraps the trigger will be removed.
    */
-  reference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
+  triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /** The popper (menu/tooltip/popover) element */
   popper: React.ReactElement;
+  /**
+   * @beta Reference to the popper (menu/tooltip/popover) element.
+   * Passing this prop will remove the wrapper div element from the popper.
+   */
+  popperRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /** True to set the width of the popper element to the trigger element's width */
   popperMatchesTriggerWidth?: boolean;
   /** popper direction */
@@ -137,8 +142,6 @@ export interface PopperProps {
         | 'right-start'
         | 'right-end'
       )[];
-  /** @beta Reference to the popper (menu/tooltip/popover) element. */
-  popperRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
 }
 
 export const Popper: React.FunctionComponent<PopperProps> = ({
@@ -166,7 +169,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   onDocumentKeyDown,
   enableFlip = true,
   flipBehavior = 'flip',
-  reference,
+  triggerRef,
   popperRef
 }) => {
   const [triggerElement, setTriggerElement] = React.useState(null);
@@ -183,14 +186,14 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     setReady(true);
   }, []);
   React.useEffect(() => {
-    if (reference) {
-      if ((reference as React.RefObject<any>).current) {
-        setRefElement((reference as React.RefObject<any>).current);
-      } else if (typeof reference === 'function') {
-        setRefElement(reference());
+    if (triggerRef) {
+      if ((triggerRef as React.RefObject<any>).current) {
+        setRefElement((triggerRef as React.RefObject<any>).current);
+      } else if (typeof triggerRef === 'function') {
+        setRefElement(triggerRef());
       }
     }
-  }, [reference]);
+  }, [triggerRef]);
   React.useEffect(() => {
     // When the popperRef is defined or the popper visibility changes, ensure the popper element is up to date
     if (popperRef) {
@@ -272,11 +275,10 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     return convertedPlacement as Placement;
   };
   const getPlacementMemo = React.useMemo(getPlacement, [direction, position, placement]);
-  const getOppositePlacementMemo = React.useMemo(() => getOppositePlacement(getPlacement()), [
-    direction,
-    position,
-    placement
-  ]);
+  const getOppositePlacementMemo = React.useMemo(
+    () => getOppositePlacement(getPlacement()),
+    [direction, position, placement]
+  );
   const sameWidthMod: Modifier<'sameWidth', {}> = React.useMemo(
     () => ({
       name: 'sameWidth',
@@ -294,7 +296,12 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     [popperMatchesTriggerWidth]
   );
 
-  const { styles: popperStyles, attributes, update, forceUpdate } = usePopper(refOrTrigger, popperElement, {
+  const {
+    styles: popperStyles,
+    attributes,
+    update,
+    forceUpdate
+  } = usePopper(refOrTrigger, popperElement, {
     placement: getPlacementMemo,
     modifiers: [
       {
@@ -352,7 +359,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     return popperRef ? (
       localPopper
     ) : (
-      <div style={{ display: 'contents' }} ref={node => setPopperElement(node?.firstElementChild as HTMLElement)}>
+      <div style={{ display: 'contents' }} ref={(node) => setPopperElement(node?.firstElementChild as HTMLElement)}>
         {localPopper}
       </div>
     );
@@ -369,11 +376,12 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
 
   return (
     <>
-      {!reference && trigger && React.isValidElement(trigger) && (
-        <div style={{ display: 'contents' }} ref={node => setTriggerElement(node?.firstElementChild as HTMLElement)}>
+      {!triggerRef && trigger && React.isValidElement(trigger) && (
+        <div style={{ display: 'contents' }} ref={(node) => setTriggerElement(node?.firstElementChild as HTMLElement)}>
           {trigger}
         </div>
       )}
+      {triggerRef && trigger && React.isValidElement(trigger) && trigger}
       {ready && isVisible && getPopper()}
     </>
   );

package/src/next/components/Dropdown/Dropdown.tsx

@@ -120,7 +120,9 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     <div ref={containerRef} {...ouiaProps}>
       <Popper
         trigger={toggle(toggleRef)}
+        triggerRef={toggleRef}
         popper={menu}
+        popperRef={menuRef}
         appendTo={containerRef.current || undefined}
         isVisible={isOpen}
         zIndex={zIndex}

package/src/next/components/Select/Select.tsx

@@ -119,7 +119,9 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
     <div ref={containerRef}>
       <Popper
         trigger={toggle(toggleRef)}
+        triggerRef={toggleRef}
         popper={menu}
+        popperRef={menuRef}
         appendTo={containerRef.current || undefined}
         isVisible={isOpen}
         zIndex={zIndex}

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"}

package/dist/esm/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/dist/esm/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/dist/esm/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/dist/esm/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"}

package/dist/js/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/dist/js/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/dist/js/components/AboutModal/AboutModalContainer.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AboutModalContainer = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_styles_1 = require("@patternfly/react-styles");
-const bullseye_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/layouts/Bullseye/bullseye"));
-const helpers_1 = require("../../helpers");
-const AboutModalBoxContent_1 = require("./AboutModalBoxContent");
-const AboutModalBoxHeader_1 = require("./AboutModalBoxHeader");
-const AboutModalBoxHero_1 = require("./AboutModalBoxHero");
-const AboutModalBoxBrand_1 = require("./AboutModalBoxBrand");
-const AboutModalBoxCloseButton_1 = require("./AboutModalBoxCloseButton");
-const AboutModalBox_1 = require("./AboutModalBox");
-const Backdrop_1 = require("../Backdrop/Backdrop");
-const AboutModalContainer = (_a) => {
-    var { children, className = '', isOpen = false, onClose = _e => undefined, productName = '', trademark, brandImageSrc, brandImageAlt, backgroundImageSrc, closeButtonAriaLabel, aboutModalBoxHeaderId, aboutModalBoxContentId, disableFocusTrap = false } = _a, props = tslib_1.__rest(_a, ["children", "className", "isOpen", "onClose", "productName", "trademark", "brandImageSrc", "brandImageAlt", "backgroundImageSrc", "closeButtonAriaLabel", "aboutModalBoxHeaderId", "aboutModalBoxContentId", "disableFocusTrap"]);
-    if (!isOpen) {
-        return null;
-    }
-    return (React.createElement(Backdrop_1.Backdrop, null,
-        React.createElement(helpers_1.FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } }, className: (0, react_styles_1.css)(bullseye_1.default.bullseye) },
-            React.createElement(AboutModalBox_1.AboutModalBox, { className: className, "aria-labelledby": aboutModalBoxHeaderId, "aria-describedby": aboutModalBoxContentId },
-                React.createElement(AboutModalBoxBrand_1.AboutModalBoxBrand, { src: brandImageSrc, alt: brandImageAlt }),
-                React.createElement(AboutModalBoxCloseButton_1.AboutModalBoxCloseButton, { "aria-label": closeButtonAriaLabel, onClose: onClose }),
-                productName && React.createElement(AboutModalBoxHeader_1.AboutModalBoxHeader, { id: aboutModalBoxHeaderId, productName: productName }),
-                React.createElement(AboutModalBoxContent_1.AboutModalBoxContent, Object.assign({ trademark: trademark, id: aboutModalBoxContentId, noAboutModalBoxContentContainer: false }, props), children),
-                React.createElement(AboutModalBoxHero_1.AboutModalBoxHero, { backgroundImageSrc: backgroundImageSrc })))));
-};
-exports.AboutModalContainer = AboutModalContainer;
-exports.AboutModalContainer.displayName = 'AboutModalContainer';
-//# sourceMappingURL=AboutModalContainer.js.map

package/dist/js/components/AboutModal/AboutModalContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AboutModalContainer.js","sourceRoot":"","sources":["../../../../src/components/AboutModal/AboutModalContainer.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,2DAA+C;AAC/C,8GAA4E;AAC5E,2CAA0C;AAE1C,iEAA8D;AAC9D,+DAA4D;AAC5D,2DAAwD;AACxD,6DAA0D;AAC1D,yEAAsE;AACtE,mDAAgD;AAChD,mDAAgD;AA+BzC,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,sBAd6E,iOAetF,CADS;IAER,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IACD,OAAO,CACL,oBAAC,mBAAQ;QACP,oBAAC,mBAAS,IACR,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,EAC9F,SAAS,EAAE,IAAA,kBAAG,EAAC,kBAAM,CAAC,QAAQ,CAAC;YAE/B,oBAAC,6BAAa,IACZ,SAAS,EAAE,SAAS,qBACH,qBAAqB,sBACpB,sBAAsB;gBAExC,oBAAC,uCAAkB,IAAC,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,aAAa,GAAI;gBAC9D,oBAAC,mDAAwB,kBAAa,oBAAoB,EAAE,OAAO,EAAE,OAAO,GAAI;gBAC/E,WAAW,IAAI,oBAAC,yCAAmB,IAAC,EAAE,EAAE,qBAAqB,EAAE,WAAW,EAAE,WAAW,GAAI;gBAC5F,oBAAC,2CAAoB,kBACnB,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,sBAAsB,EAC1B,+BAA+B,EAAE,KAAK,IAClC,KAAK,GAER,QAAQ,CACY;gBACvB,oBAAC,qCAAiB,IAAC,kBAAkB,EAAE,kBAAkB,GAAI,CAC/C,CACN,CACH,CACZ,CAAC;AACJ,CAAC,CAAC;AA/CW,QAAA,mBAAmB,uBA+C9B;AACF,2BAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC"}