Fix floating ui

.changeset/cool-balloons-greet.md

@@ -0,0 +1,5 @@
+---
+"@saleor/macaw-ui": patch
+---
+
+Floating ui now working corectly with react 18

src/components/Combobox/Common/useCombobox.tsx

@@ -67,7 +67,16 @@ export const useCombobox = <T extends Option, V extends string | Option>({
     highlightedIndex,
     onHighlightedIndexChange,
     isItemDisabled: (item) => item?.disabled ?? false,
-    onStateChange: ({ inputValue: newInputValue, type }) => {
+    onStateChange: ({ inputValue: newInputValue, type, selectedItem }) => {
+      // eslint-disable-next-line no-console
+      console.log("Debug useCombobox state change type", type);
+      // eslint-disable-next-line no-console
+      console.log("Debug useCombobox state change input value", inputValue);
+      // eslint-disable-next-line no-console
+      console.log(
+        "Debug useCombobox state change new selected item",
+        selectedItem
+      );
       switch (type) {
         case useDownshiftCombobox.stateChangeTypes.InputChange:
           onInputValueChange?.(newInputValue ?? "");
@@ -80,6 +89,8 @@ export const useCombobox = <T extends Option, V extends string | Option>({
       }
     },
     onSelectedItemChange: ({ selectedItem }) => {
+      // eslint-disable-next-line no-console
+      console.log("onSelectedItemChange", selectedItem);
       if (selectedItem) {
         const selectedValue = isValuePassedAsString
           ? selectedItem.value

src/components/Combobox/Dynamic/DynamicCombobox.tsx

@@ -107,7 +107,9 @@ const DynamicComboboxInner = <T extends Option>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating();
+  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
+    shouldUpdate: isOpen,
+  });
 
   const scrollRef = useInfinityScroll(onScrollEnd);
 
@@ -120,7 +122,7 @@ const DynamicComboboxInner = <T extends Option>(
     <Box display="flex" flexDirection="column">
       <ComboboxWrapper
         id={id}
-        ref={refs.setReference}
+        ref={refs.reference}
         typed={typed}
         active={active}
         disabled={disabled}
@@ -149,7 +151,7 @@ const DynamicComboboxInner = <T extends Option>(
           {endAdornment && typed && <Box>{endAdornment(value)}</Box>}
         </Box>
       </ComboboxWrapper>
-      <Portal asChild ref={refs.setFloating} style={floatingStyles}>
+      <Portal asChild style={floatingStyles}>
         <Box
           position="relative"
           display={getListDisplayMode({
@@ -165,8 +167,7 @@ const DynamicComboboxInner = <T extends Option>(
           <List
             as="ul"
             className={listStyle}
-            // suppress error because of rendering list in portal
-            {...getMenuProps({}, { suppressRefError: true })}
+            {...getMenuProps({ ref: refs.floating })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (

src/components/Combobox/Static/Combobox.tsx

@@ -98,7 +98,9 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating();
+  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
+    shouldUpdate: isOpen,
+  });
 
   const inputProps = getInputProps({
     id,
@@ -109,7 +111,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
     <Box display="flex" flexDirection="column">
       <ComboboxWrapper
         id={id}
-        ref={refs.setReference}
+        ref={refs.reference}
         typed={typed}
         active={active}
         disabled={disabled}
@@ -142,7 +144,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
         </Box>
       </ComboboxWrapper>
 
-      <Portal asChild ref={refs.setFloating} style={floatingStyles}>
+      <Portal asChild style={floatingStyles}>
         <Box
           position="relative"
           display={getListDisplayMode({
@@ -157,8 +159,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
           <List
             as="ul"
             className={listStyle}
-            // suppress error because of rendering list in portal
-            {...getMenuProps({}, { suppressRefError: true })}
+            {...getMenuProps({ ref: refs.floating })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (

src/components/List/List.tsx

@@ -8,7 +8,7 @@ export type ListProps = PropsWithBox<{
   className?: string;
 }>;
 
-export const List = forwardRef<HTMLUListElement | HTMLOListElement, ListProps>(
+export const List = forwardRef<HTMLElement, ListProps>(
   ({ children, as = "ul", className, ...rest }, ref) => {
     return (
       <Box

src/components/Multiselect/Common/useMultiselect.tsx

@@ -72,6 +72,9 @@ export const useMultiselect = <T extends Option, V extends Option | string>({
     useMultipleSelection({
       selectedItems,
       onStateChange({ selectedItems: newSelectedItems, type }) {
+        // eslint-disable-next-line no-console
+        console.log("Debug useCombobox state change", type, newSelectedItems);
+
         switch (type) {
           case useMultipleSelection.stateChangeTypes
             .SelectedItemKeyDownBackspace:

src/components/Multiselect/Dynamic/DynamicMultiselect.tsx

@@ -114,7 +114,9 @@ const DynamicMultiselectInner = <T extends Option>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating();
+  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
+    shouldUpdate: isOpen,
+  });
 
   const scrollRef = useInfinityScroll(onScrollEnd);
 
@@ -127,7 +129,7 @@ const DynamicMultiselectInner = <T extends Option>(
   return (
     <Box display="flex" flexDirection="column">
       <MultiselectWrapper
-        ref={refs.setReference}
+        ref={refs.reference}
         id={id}
         typed={typed}
         active={active}
@@ -194,7 +196,7 @@ const DynamicMultiselectInner = <T extends Option>(
         />
       </MultiselectWrapper>
 
-      <Portal asChild ref={refs.setFloating} style={floatingStyles}>
+      <Portal asChild style={floatingStyles}>
         <Box
           position="relative"
           display={getListDisplayMode({
@@ -209,8 +211,7 @@ const DynamicMultiselectInner = <T extends Option>(
           <List
             as="ul"
             className={listStyle}
-            // suppress error because of rendering list in portal
-            {...getMenuProps({}, { suppressRefError: true })}
+            {...getMenuProps({ ref: refs.floating })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (

src/components/Multiselect/Static/Multiselect.tsx

@@ -105,7 +105,9 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating();
+  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
+    shouldUpdate: isOpen,
+  });
 
   const inputProps = getInputProps({
     id,
@@ -116,8 +118,8 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
   return (
     <Box display="flex" flexDirection="column">
       <MultiselectWrapper
-        ref={refs.setReference}
         id={id}
+        ref={refs.reference}
         typed={typed}
         active={active}
         disabled={disabled}
@@ -183,7 +185,7 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
         />
       </MultiselectWrapper>
 
-      <Portal asChild ref={refs.setFloating} style={floatingStyles}>
+      <Portal asChild style={floatingStyles}>
         <Box
           position="relative"
           display={isOpen ? "block" : "none"}
@@ -192,8 +194,7 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
           <List
             as="ul"
             className={listStyle}
-            // suppress error because of rendering list in portal
-            {...getMenuProps({}, { suppressRefError: true })}
+            {...getMenuProps({ ref: refs.floating })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (

src/components/Select/Select.tsx

@@ -114,7 +114,9 @@ const SelectInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating();
+  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
+    shouldUpdate: isOpen,
+  });
 
   const labelColor = useMemo((): TextProps["color"] => {
     if (error) {
@@ -131,7 +133,6 @@ const SelectInner = <T extends Option, V extends Option | string>(
   return (
     <Box display="flex" flexDirection="column">
       <SelectWrapper
-        ref={refs.setReference}
         id={id}
         typed={typed}
         active={active}
@@ -141,7 +142,9 @@ const SelectInner = <T extends Option, V extends Option | string>(
         error={error}
         className={className}
         getLabelProps={getLabelProps}
-        getToggleButtonProps={getToggleButtonProps}
+        getToggleButtonProps={() =>
+          getToggleButtonProps({ ref: refs.reference })
+        }
       >
         <Box height={getBoxHeight(size)} {...props} ref={ref} display="flex">
           {startAdornment && typed && startAdornment(value)}
@@ -159,7 +162,7 @@ const SelectInner = <T extends Option, V extends Option | string>(
           {endAdornment && typed && endAdornment(value)}
         </Box>
       </SelectWrapper>
-      <Portal asChild ref={refs.setFloating} style={floatingStyles}>
+      <Portal asChild style={floatingStyles}>
         <Box
           position="relative"
           display={getListDisplayMode({
@@ -173,8 +176,7 @@ const SelectInner = <T extends Option, V extends Option | string>(
           <List
             as="ul"
             className={listStyle}
-            // suppress error because of rendering list in portal
-            {...getMenuProps({}, { suppressRefError: true })}
+            {...getMenuProps({ ref: refs.floating })}
           >
             {isOpen &&
               options?.map((item, index) => (

src/components/Select/SelectWrapper.tsx

@@ -2,7 +2,7 @@
   Do not expose this file, it's for internal purposes only.
 */
 import { UseSelectPropGetters } from "downshift";
-import { ReactNode, forwardRef } from "react";
+import { ReactNode } from "react";
 
 import { classNames } from "~/utils";
 
@@ -23,69 +23,60 @@ type SelectWrapperProps = LabelVariants & {
   getLabelProps: UseSelectPropGetters<Option>["getLabelProps"];
 };
 
-export const SelectWrapper = forwardRef<HTMLLabelElement, SelectWrapperProps>(
-  (
-    {
-      id,
-      label,
-      className,
-      error,
-      children,
-      getToggleButtonProps,
-      getLabelProps,
-      typed,
-      active,
-      disabled,
-      size,
-    },
-    ref
-  ) => {
-    return (
-      <Box ref={ref}>
+export const SelectWrapper = ({
+  id,
+  label,
+  className,
+  error,
+  children,
+  getToggleButtonProps,
+  getLabelProps,
+  typed,
+  active,
+  disabled,
+  size,
+}: SelectWrapperProps) => {
+  return (
+    <Box
+      as="label"
+      className={classNames(
+        labelRecipe({ typed, active, disabled, size, error }),
+        className
+      )}
+      alignItems="center"
+      justifyContent="space-between"
+      disabled={disabled}
+      flexWrap="nowrap"
+      gap={3}
+      {...getToggleButtonProps()}
+      data-macaw-ui-component="Select"
+      cursor={disabled ? "not-allowed" : "pointer"}
+    >
+      <Box
+        display="flex"
+        flexDirection="column"
+        // Take full width minus the arrow icon width
+        __width="calc(100% - 30px)"
+      >
         <Box
-          as="label"
-          className={classNames(
-            labelRecipe({ typed, active, disabled, size, error }),
-            className
-          )}
-          alignItems="center"
-          justifyContent="space-between"
-          disabled={disabled}
-          flexWrap="nowrap"
-          gap={3}
-          {...getToggleButtonProps()}
-          data-macaw-ui-component="Select"
-          cursor={disabled ? "not-allowed" : "pointer"}
+          as="span"
+          className={classNames(spanRecipe({ typed, size, disabled, error }))}
+          {...getLabelProps({ htmlFor: id })}
         >
-          <Box
-            display="flex"
-            flexDirection="column"
-            // Take full width minus the arrow icon width
-            __width="calc(100% - 30px)"
-          >
-            <Box
-              as="span"
-              className={classNames(
-                spanRecipe({ typed, size, disabled, error })
-              )}
-              {...getLabelProps({ htmlFor: id })}
-            >
-              {label}
-            </Box>
-            {children}
-          </Box>
-
-          <ArrowDownIcon
-            className={classNames(
-              toggleIconStyle,
-              sprinkles({ cursor: "pointer" })
-            )}
-            size={size}
-          />
+          {label}
         </Box>
+        {children}
       </Box>
-    );
-  }
-);
+
+      <ArrowDownIcon
+        className={classNames(
+          toggleIconStyle,
+          sprinkles({ cursor: "pointer" })
+        )}
+        size={size}
+      />
+    </Box>
+  );
+};
 
 SelectWrapper.displayName = "SelectWrapper";

src/components/Select/useSelect.tsx

@@ -46,6 +46,10 @@ export const useSelect = <T extends Option, V extends string | Option>({
       onHighlightedIndexChange(change);
     },
     itemToString: (item) => item?.value ?? "",
+    onStateChange({ selectedItem, type }) {
+      // eslint-disable-next-line no-console
+      console.log("Debug useCombobox state change", type, selectedItem);
+    },
     onSelectedItemChange: ({ selectedItem }) => {
       if (selectedItem) {
         const selectedValue = isValuePassedAsString