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

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

@@ -81,12 +81,12 @@ export const FilterMixedSelectGroup: 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);
@@ -103,7 +103,7 @@ export const FilterMixedSelectGroup: 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);
     }
@@ -230,7 +230,9 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -322,7 +324,9 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     <div ref={statusContainerRef}>
       <Popper
         trigger={statusToggle}
+        triggerRef={statusToggleRef}
         popper={statusMenu}
+        popperRef={statusMenuRef}
         appendTo={statusContainerRef.current || undefined}
         isVisible={isStatusMenuOpen}
       />
@@ -379,7 +383,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
 
     setLocationSelections(
       locationSelections.includes(itemStr)
-        ? locationSelections.filter(selection => selection !== itemStr)
+        ? locationSelections.filter((selection) => selection !== itemStr)
         : [itemStr, ...locationSelections]
     );
   }
@@ -434,7 +438,9 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     <div ref={locationContainerRef}>
       <Popper
         trigger={locationToggle}
+        triggerRef={locationToggleRef}
         popper={locationMenu}
+        popperRef={locationMenuRef}
         appendTo={locationContainerRef.current || undefined}
         isVisible={isLocationMenuOpen}
       />

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

@@ -82,12 +82,12 @@ export const FilterSameSelectGroup: 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);
@@ -104,7 +104,7 @@ export const FilterSameSelectGroup: 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);
     }
@@ -231,7 +231,9 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -324,7 +326,9 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     <div ref={statusContainerRef}>
       <Popper
         trigger={statusToggle}
+        triggerRef={statusToggleRef}
         popper={statusMenu}
+        popperRef={statusMenuRef}
         appendTo={statusContainerRef.current || undefined}
         isVisible={isStatusMenuOpen}
       />
@@ -421,7 +425,9 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     <div ref={locationContainerRef}>
       <Popper
         trigger={locationToggle}
+        triggerRef={locationToggleRef}
         popper={locationMenu}
+        popperRef={locationMenuRef}
         appendTo={locationContainerRef.current || undefined}
         isVisible={isLocationMenuOpen}
       />

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}