fix(ui): popover ref & wrapping of children (wip)

Author: psychedelicious

invokeai/frontend/web/public/locales/en.json

@@ -1213,14 +1213,14 @@
         },
         "dynamicPromptsCombinatorial": {
             "heading": "Combinatorial Generation",
-            "paragraph": "Generate an image for every possible combination of Dynamic Prompt until the Max Prompts is reached."
+            "paragraph": "Generate an image for every possible combination of Dynamic Prompts until the Max Prompts is reached."
         },
         "infillMethod": {
             "heading": "Infill Method",
             "paragraph": "Method to infill the selected area."
         },
         "lora": {
-            "heading": "LoRA",
+            "heading": "LoRA Weight",
             "paragraph": "Weight of the LoRA. Higher weight will lead to larger impacts on the final image."
         },
         "noiseEnable": {
@@ -1239,21 +1239,21 @@
             "heading": "Denoising Strength",
             "paragraph": "How much noise is added to the input image. 0 will result in an identical image, while 1 will result in a completely new image."
         },
-        "paramImages": {
-            "heading": "Images",
-            "paragraph": "Number of images that will be generated."
+        "paramIterations": {
+            "heading": "Iterations",
+            "paragraph": "The number of images to generate. If Dynamic Prompts is enabled, each of the prompts will be generated this many times."
         },
         "paramModel": {
             "heading": "Model",
             "paragraph": "Model used for the denoising steps. Different models are trained to specialize in producing different aesthetic results and content."
         },
         "paramNegativeConditioning": {
-            "heading": "Negative Prompts",
-            "paragraph": "This is where you enter your negative prompts."
+            "heading": "Negative Prompt",
+            "paragraph": "The generation process avoids the concepts in the negative prompt. Use this to exclude qualities or objects from the output. Supports Compel syntax and embeddings."
         },
         "paramPositiveConditioning": {
-            "heading": "Positive Prompts",
-            "paragraph": "This is where you enter your positive prompts."
+            "heading": "Positive Prompt",
+            "paragraph": "Guides the generation process. You may use any words or phrases. Supports Compel and Dynamic Prompts syntaxes and embeddings."
         },
         "paramRatio": {
             "heading": "Ratio",

invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx

@@ -1,37 +1,43 @@
 import {
+  Box,
   Button,
+  Divider,
+  Flex,
+  Heading,
+  Image,
   Popover,
-  PopoverTrigger,
-  PopoverContent,
   PopoverArrow,
-  PopoverCloseButton,
-  PopoverHeader,
   PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
   PopoverProps,
-  Flex,
+  PopoverTrigger,
+  Portal,
   Text,
-  Image,
 } from '@chakra-ui/react';
-import { useAppSelector } from '../../app/store/storeHooks';
+import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useAppSelector } from '../../app/store/storeHooks';
 
-interface Props extends PopoverProps {
+const OPEN_DELAY = 1500;
+
+type Props = Omit<PopoverProps, 'children'> & {
   details: string;
-  children: JSX.Element;
+  children: ReactNode;
   image?: string;
   buttonLabel?: string;
   buttonHref?: string;
   placement?: PopoverProps['placement'];
-}
+};
 
-function IAIInformationalPopover({
+const IAIInformationalPopover = ({
   details,
   image,
   buttonLabel,
   buttonHref,
   children,
   placement,
-}: Props): JSX.Element {
+}: Props) => {
   const shouldEnableInformationalPopovers = useAppSelector(
     (state) => state.system.shouldEnableInformationalPopovers
   );
@@ -41,18 +47,21 @@ function IAIInformationalPopover({
   const paragraph = t(`popovers.${details}.paragraph`);
 
   if (!shouldEnableInformationalPopovers) {
-    return children;
-  } else {
-    return (
-      <Popover
-        placement={placement || 'top'}
-        closeOnBlur={false}
-        trigger="hover"
-        variant="informational"
-      >
-        <PopoverTrigger>
-          <div>{children}</div>
-        </PopoverTrigger>
+    return <>{children}</>;
+  }
+
+  return (
+    <Popover
+      placement={placement || 'top'}
+      closeOnBlur={false}
+      trigger="hover"
+      variant="informational"
+      openDelay={OPEN_DELAY}
+    >
+      <PopoverTrigger>
+        <Box w="full">{children}</Box>
+      </PopoverTrigger>
+      <Portal>
         <PopoverContent>
           <PopoverArrow />
           <PopoverCloseButton />
@@ -83,14 +92,17 @@ function IAIInformationalPopover({
                   gap: 3,
                   flexDirection: 'column',
                   width: '100%',
-                  p: 3,
-                  pt: heading ? 0 : 3,
                 }}
               >
-                {heading && <PopoverHeader>{heading}</PopoverHeader>}
-                <Text sx={{ px: 3 }}>{paragraph}</Text>
+                {heading && (
+                  <>
+                    <Heading size="sm">{heading}</Heading>
+                    <Divider />
+                  </>
+                )}
+                <Text>{paragraph}</Text>
                 {buttonLabel && (
-                  <Flex sx={{ px: 3 }} justifyContent="flex-end">
+                  <Flex justifyContent="flex-end">
                     <Button
                       onClick={() => window.open(buttonHref)}
                       size="sm"
@@ -104,9 +116,9 @@ function IAIInformationalPopover({
             </Flex>
           </PopoverBody>
         </PopoverContent>
-      </Popover>
-    );
-  }
-}
+      </Portal>
+    </Popover>
+  );
+};
 
-export default IAIInformationalPopover;
+export default memo(IAIInformationalPopover);

invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx

@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
+import { FormControl, FormLabel, Tooltip, forwardRef } from '@chakra-ui/react';
 import { MultiSelect, MultiSelectProps } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
@@ -11,7 +11,7 @@ type IAIMultiSelectProps = Omit<MultiSelectProps, 'label'> & {
   label?: string;
 };
 
-const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
+const IAIMantineMultiSelect = forwardRef((props: IAIMultiSelectProps, ref) => {
   const {
     searchable = true,
     tooltip,
@@ -47,7 +47,7 @@ const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
       <MultiSelect
         label={
           label ? (
-            <FormControl isDisabled={disabled}>
+            <FormControl ref={ref} isDisabled={disabled}>
               <FormLabel>{label}</FormLabel>
             </FormControl>
           ) : undefined
@@ -63,6 +63,8 @@ const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
       />
     </Tooltip>
   );
-};
+});
+
+IAIMantineMultiSelect.displayName = 'IAIMantineMultiSelect';
 
 export default memo(IAIMantineMultiSelect);

invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx

@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
+import { FormControl, FormLabel, Tooltip, forwardRef } from '@chakra-ui/react';
 import { Select, SelectProps } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
@@ -17,7 +17,7 @@ type IAISelectProps = Omit<SelectProps, 'label'> & {
   inputRef?: RefObject<HTMLInputElement>;
 };
 
-const IAIMantineSearchableSelect = (props: IAISelectProps) => {
+const IAIMantineSearchableSelect = forwardRef((props: IAISelectProps, ref) => {
   const {
     searchable = true,
     tooltip,
@@ -74,7 +74,7 @@ const IAIMantineSearchableSelect = (props: IAISelectProps) => {
         ref={inputRef}
         label={
           label ? (
-            <FormControl isDisabled={disabled}>
+            <FormControl ref={ref} isDisabled={disabled}>
               <FormLabel>{label}</FormLabel>
             </FormControl>
           ) : undefined
@@ -92,6 +92,8 @@ const IAIMantineSearchableSelect = (props: IAISelectProps) => {
       />
     </Tooltip>
   );
-};
+});
+
+IAIMantineSearchableSelect.displayName = 'IAIMantineSearchableSelect';
 
 export default memo(IAIMantineSearchableSelect);

invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx

@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
+import { FormControl, FormLabel, Tooltip, forwardRef } from '@chakra-ui/react';
 import { Select, SelectProps } from '@mantine/core';
 import { useMantineSelectStyles } from 'mantine-theme/hooks/useMantineSelectStyles';
 import { RefObject, memo } from 'react';
@@ -15,7 +15,7 @@ export type IAISelectProps = Omit<SelectProps, 'label'> & {
   label?: string;
 };
 
-const IAIMantineSelect = (props: IAISelectProps) => {
+const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
   const { tooltip, inputRef, label, disabled, required, ...rest } = props;
 
   const styles = useMantineSelectStyles();
@@ -25,7 +25,7 @@ const IAIMantineSelect = (props: IAISelectProps) => {
       <Select
         label={
           label ? (
-            <FormControl isRequired={required} isDisabled={disabled}>
+            <FormControl ref={ref} isRequired={required} isDisabled={disabled}>
               <FormLabel>{label}</FormLabel>
             </FormControl>
           ) : undefined
@@ -37,6 +37,8 @@ const IAIMantineSelect = (props: IAISelectProps) => {
       />
     </Tooltip>
   );
-};
+});
+
+IAIMantineSelect.displayName = 'IAIMantineSelect';
 
 export default memo(IAIMantineSelect);

invokeai/frontend/web/src/common/components/IAINumberInput.tsx

@@ -13,6 +13,7 @@ import {
   NumberInputStepperProps,
   Tooltip,
   TooltipProps,
+  forwardRef,
 } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { stopPastePropagation } from 'common/util/stopPastePropagation';
@@ -50,7 +51,7 @@ interface Props extends Omit<NumberInputProps, 'onChange'> {
 /**
  * Customized Chakra FormControl + NumberInput multi-part component.
  */
-const IAINumberInput = (props: Props) => {
+const IAINumberInput = forwardRef((props: Props, ref) => {
   const {
     label,
     isDisabled = false,
@@ -141,6 +142,7 @@ const IAINumberInput = (props: Props) => {
   return (
     <Tooltip {...tooltipProps}>
       <FormControl
+        ref={ref}
         isDisabled={isDisabled}
         isInvalid={isInvalid}
         {...formControlProps}
@@ -172,6 +174,8 @@ const IAINumberInput = (props: Props) => {
       </FormControl>
     </Tooltip>
   );
-};
+});
+
+IAINumberInput.displayName = 'IAINumberInput';
 
 export default memo(IAINumberInput);

invokeai/frontend/web/src/common/components/IAISlider.tsx

@@ -22,6 +22,7 @@ import {
   SliderTrackProps,
   Tooltip,
   TooltipProps,
+  forwardRef,
 } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { roundDownToMultiple } from 'common/util/roundDownToMultiple';
@@ -71,7 +72,7 @@ export type IAIFullSliderProps = {
   sliderIAIIconButtonProps?: IAIIconButtonProps;
 };
 
-const IAISlider = (props: IAIFullSliderProps) => {
+const IAISlider = forwardRef((props: IAIFullSliderProps, ref) => {
   const [showTooltip, setShowTooltip] = useState(false);
   const {
     label,
@@ -187,6 +188,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
 
   return (
     <FormControl
+      ref={ref}
       onClick={forceInputBlur}
       sx={
         isCompact
@@ -354,6 +356,8 @@ const IAISlider = (props: IAIFullSliderProps) => {
       </HStack>
     </FormControl>
   );
-};
+});
+
+IAISlider.displayName = 'IAISlider';
 
 export default memo(IAISlider);

invokeai/frontend/web/src/common/components/IAISwitch.tsx

@@ -72,4 +72,6 @@ const IAISwitch = (props: IAISwitchProps) => {
   );
 };
 
+IAISwitch.displayName = 'IAISwitch';
+
 export default memo(IAISwitch);

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamIterations.tsx

@@ -61,7 +61,7 @@ const ParamIterations = ({ asSlider }: Props) => {
   }, [dispatch, initial]);
 
   return asSlider || shouldUseSliders ? (
-    <IAIInformationalPopover details="paramImages">
+    <IAIInformationalPopover details="paramIterations">
       <IAISlider
         label={t('parameters.iterations')}
         step={step}
@@ -77,7 +77,7 @@ const ParamIterations = ({ asSlider }: Props) => {
       />
     </IAIInformationalPopover>
   ) : (
-    <IAIInformationalPopover details="paramImages">
+    <IAIInformationalPopover details="paramIterations">
       <IAINumberInput
         label={t('parameters.iterations')}
         step={step}