From 066947224a28ff5704b45f8b1e1242473b95ad27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Tue, 10 Dec 2024 14:55:20 +0100
Subject: [PATCH 01/18] Try to fix floating

---
 src/components/List/List.tsx            |   2 +-
 src/components/Select/Select.tsx        |  14 +--
 src/components/Select/SelectWrapper.tsx | 109 +++++++++++-------------
 src/hooks/useFloating.ts                |   7 +-
 4 files changed, 63 insertions(+), 69 deletions(-)

diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 18b5980f..d44cb879 100644
--- a/src/components/List/List.tsx
+++ b/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
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 6b3f1f37..45217dbf 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -9,6 +9,7 @@ import {
 
 import { useFloating } from "~/hooks/useFloating";
 import { isString } from "~/utils";
+import { SelectWrapper } from "~/components/Select/SelectWrapper";
 import {
   Box,
   List,
@@ -30,7 +31,6 @@ import {
 } from "../BaseSelect";
 import { getListDisplayMode } from "../BaseSelect/helpers";
 
-import { SelectWrapper } from "./SelectWrapper";
 import { useSelect } from "./useSelect";
 
 export type SelectProps<T, V> = PropsWithBox<
@@ -114,7 +114,7 @@ const SelectInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating();
+  const { refs, floatingStyles } = useFloating<HTMLUListElement>();
 
   const labelColor = useMemo((): TextProps["color"] => {
     if (error) {
@@ -131,7 +131,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 +140,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 +160,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 +174,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) => (
diff --git a/src/components/Select/SelectWrapper.tsx b/src/components/Select/SelectWrapper.tsx
index 07ce18f7..6630815e 100644
--- a/src/components/Select/SelectWrapper.tsx
+++ b/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,62 @@ 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>
+      <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
-          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"}
+          display="flex"
+          flexDirection="column"
+          // Take full width minus the arrow icon width
+          __width="calc(100% - 30px)"
         >
           <Box
-            display="flex"
-            flexDirection="column"
-            // Take full width minus the arrow icon width
-            __width="calc(100% - 30px)"
+            as="span"
+            className={classNames(spanRecipe({ typed, size, disabled, error }))}
+            {...getLabelProps({ htmlFor: id })}
           >
-            <Box
-              as="span"
-              className={classNames(
-                spanRecipe({ typed, size, disabled, error })
-              )}
-              {...getLabelProps({ htmlFor: id })}
-            >
-              {label}
-            </Box>
-            {children}
+            {label}
           </Box>
-
-          <ArrowDownIcon
-            className={classNames(
-              toggleIconStyle,
-              sprinkles({ cursor: "pointer" })
-            )}
-            size={size}
-          />
+          {children}
         </Box>
+
+        <ArrowDownIcon
+          className={classNames(
+            toggleIconStyle,
+            sprinkles({ cursor: "pointer" })
+          )}
+          size={size}
+        />
       </Box>
-    );
-  }
-);
+    </Box>
+  );
+};
 
 SelectWrapper.displayName = "SelectWrapper";
diff --git a/src/hooks/useFloating.ts b/src/hooks/useFloating.ts
index 3f592c0f..69b45845 100644
--- a/src/hooks/useFloating.ts
+++ b/src/hooks/useFloating.ts
@@ -4,14 +4,15 @@ import {
   UseFloatingReturn,
   flip,
   autoUpdate,
+  ReferenceType,
 } from "@floating-ui/react-dom";
 
-export const useFloating = (
+export const useFloating = <T extends ReferenceType>(
   zIndexValue = 1
-): UseFloatingReturn & {
+): UseFloatingReturn<T> & {
   floatingStyles: { zIndex: number };
 } => {
-  const { floatingStyles, ...rest } = useFloatingHook({
+  const { floatingStyles, ...rest } = useFloatingHook<T>({
     whileElementsMounted: autoUpdate,
     middleware: [
       flip(),

From 0a3544e91daf0037fa800b093666c59bcf651f2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Tue, 14 Jan 2025 14:29:51 +0100
Subject: [PATCH 02/18] Fix select floating

---
 src/components/Select/Select.tsx |  2 +-
 src/hooks/useFloating.ts         | 50 ++++++++++++++++++++++----------
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 45217dbf..f0f693fc 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -114,7 +114,7 @@ const SelectInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating<HTMLUListElement>();
+  const { refs, floatingStyles } = useFloating<HTMLUListElement>(1, isOpen);
 
   const labelColor = useMemo((): TextProps["color"] => {
     if (error) {
diff --git a/src/hooks/useFloating.ts b/src/hooks/useFloating.ts
index 69b45845..a41b800a 100644
--- a/src/hooks/useFloating.ts
+++ b/src/hooks/useFloating.ts
@@ -3,32 +3,50 @@ import {
   size,
   UseFloatingReturn,
   flip,
-  autoUpdate,
   ReferenceType,
+  autoUpdate,
 } from "@floating-ui/react-dom";
+import { useLayoutEffect } from "react";
 
 export const useFloating = <T extends ReferenceType>(
-  zIndexValue = 1
+  zIndexValue = 1,
+  isOpen: boolean
 ): UseFloatingReturn<T> & {
   floatingStyles: { zIndex: number };
 } => {
-  const { floatingStyles, ...rest } = useFloatingHook<T>({
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      flip(),
-      size({
-        apply({ rects, availableHeight, elements }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
-            maxHeight: `${availableHeight}px`,
-          });
-        },
-      }),
-    ],
-  });
+  const { floatingStyles, refs, update, strategy, ...rest } =
+    useFloatingHook<T>({
+      middleware: [
+        flip(),
+        size({
+          apply({ rects, availableHeight, elements }) {
+            Object.assign(elements.floating.style, {
+              position: strategy,
+              top: rects.reference.y + rects.reference.height + "px" ?? "",
+              left: rects.reference.x + "px" ?? "",
+              width: `${rects.reference.width}px`,
+              maxHeight: `${availableHeight}px`,
+            });
+          },
+        }),
+      ],
+    });
+
+  useLayoutEffect(() => {
+    if (isOpen) {
+      return autoUpdate(
+        refs.reference.current!,
+        refs.floating.current!,
+        update
+      );
+    }
+  }, [isOpen, update, refs.floating, refs.reference]);
 
   return {
     ...rest,
+    refs,
+    strategy,
+    update,
     floatingStyles: {
       ...floatingStyles,
       zIndex: zIndexValue,

From 391edac888048ddfacde26996542b42a6fa70995 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Tue, 14 Jan 2025 14:31:12 +0100
Subject: [PATCH 03/18] Update useFloating props

---
 src/components/Combobox/Dynamic/DynamicCombobox.tsx       | 2 +-
 src/components/Combobox/Static/Combobox.tsx               | 2 +-
 src/components/Multiselect/Dynamic/DynamicMultiselect.tsx | 2 +-
 src/components/Multiselect/Static/Multiselect.tsx         | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Combobox/Dynamic/DynamicCombobox.tsx b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
index 6fb6546c..17fe484f 100644
--- a/src/components/Combobox/Dynamic/DynamicCombobox.tsx
+++ b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
@@ -107,7 +107,7 @@ const DynamicComboboxInner = <T extends Option>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating();
+  const { refs, floatingStyles } = useFloating(1, isOpen);
 
   const scrollRef = useInfinityScroll(onScrollEnd);
 
diff --git a/src/components/Combobox/Static/Combobox.tsx b/src/components/Combobox/Static/Combobox.tsx
index 9fa0eb39..28f62ac9 100644
--- a/src/components/Combobox/Static/Combobox.tsx
+++ b/src/components/Combobox/Static/Combobox.tsx
@@ -98,7 +98,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating();
+  const { refs, floatingStyles } = useFloating(1, isOpen);
 
   const inputProps = getInputProps({
     id,
diff --git a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
index 7ff7d7c1..9242dc5c 100644
--- a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
+++ b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
@@ -114,7 +114,7 @@ const DynamicMultiselectInner = <T extends Option>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating();
+  const { refs, floatingStyles } = useFloating(1, isOpen);
 
   const scrollRef = useInfinityScroll(onScrollEnd);
 
diff --git a/src/components/Multiselect/Static/Multiselect.tsx b/src/components/Multiselect/Static/Multiselect.tsx
index b34f121b..e6a1cf3b 100644
--- a/src/components/Multiselect/Static/Multiselect.tsx
+++ b/src/components/Multiselect/Static/Multiselect.tsx
@@ -105,7 +105,7 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating();
+  const { refs, floatingStyles } = useFloating(1, isOpen);
 
   const inputProps = getInputProps({
     id,

From d60e03356bacad5706c4db9f7b4ced5a456d43aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Tue, 14 Jan 2025 14:36:53 +0100
Subject: [PATCH 04/18] Add changeset

---
 .changeset/cool-balloons-greet.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cool-balloons-greet.md

diff --git a/.changeset/cool-balloons-greet.md b/.changeset/cool-balloons-greet.md
new file mode 100644
index 00000000..96596c4e
--- /dev/null
+++ b/.changeset/cool-balloons-greet.md
@@ -0,0 +1,5 @@
+---
+"@saleor/macaw-ui": patch
+---
+
+Floating ui now working corectly with react 18

From 0b4dd6544555be10481734d84432f3bd8882a5ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Tue, 14 Jan 2025 15:10:43 +0100
Subject: [PATCH 05/18] Update rest of dropdowns

---
 .../Combobox/Dynamic/DynamicCombobox.tsx      | 13 +++--
 src/components/Combobox/Static/Combobox.tsx   | 13 +++--
 .../Dynamic/DynamicMultiselect.tsx            | 14 ++---
 .../Multiselect/Static/Multiselect.tsx        | 14 ++---
 src/components/Select/Select.tsx              |  4 +-
 src/hooks/useFloating.ts                      | 54 ++++++++++---------
 6 files changed, 63 insertions(+), 49 deletions(-)

diff --git a/src/components/Combobox/Dynamic/DynamicCombobox.tsx b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
index 17fe484f..4d1118b1 100644
--- a/src/components/Combobox/Dynamic/DynamicCombobox.tsx
+++ b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
@@ -107,7 +107,9 @@ const DynamicComboboxInner = <T extends Option>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating(1, isOpen);
+  const { refs, floatingStyles } = useFloating({
+    shouldUpdate: isOpen,
+  });
 
   const scrollRef = useInfinityScroll(onScrollEnd);
 
@@ -128,7 +130,9 @@ const DynamicComboboxInner = <T extends Option>(
         label={label}
         error={error}
         className={className}
-        getLabelProps={getLabelProps}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        getLabelProps={() => getLabelProps({ ref: refs.reference })}
         getToggleButtonProps={getToggleButtonProps}
       >
         <Box display="flex">
@@ -149,7 +153,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 +169,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) => (
diff --git a/src/components/Combobox/Static/Combobox.tsx b/src/components/Combobox/Static/Combobox.tsx
index 28f62ac9..3ceab492 100644
--- a/src/components/Combobox/Static/Combobox.tsx
+++ b/src/components/Combobox/Static/Combobox.tsx
@@ -98,7 +98,9 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating(1, isOpen);
+  const { refs, floatingStyles } = useFloating({
+    shouldUpdate: isOpen,
+  });
 
   const inputProps = getInputProps({
     id,
@@ -117,7 +119,9 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
         label={label}
         error={error}
         className={className}
-        getLabelProps={getLabelProps}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        getLabelProps={() => getLabelProps({ ref: refs.reference })}
         getToggleButtonProps={getToggleButtonProps}
       >
         <Box display="flex">
@@ -142,7 +146,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 +161,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) => (
diff --git a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
index 9242dc5c..95972b48 100644
--- a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
+++ b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
@@ -114,7 +114,9 @@ const DynamicMultiselectInner = <T extends Option>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating(1, isOpen);
+  const { refs, floatingStyles } = useFloating({
+    shouldUpdate: isOpen,
+  });
 
   const scrollRef = useInfinityScroll(onScrollEnd);
 
@@ -127,7 +129,6 @@ const DynamicMultiselectInner = <T extends Option>(
   return (
     <Box display="flex" flexDirection="column">
       <MultiselectWrapper
-        ref={refs.setReference}
         id={id}
         typed={typed}
         active={active}
@@ -136,7 +137,9 @@ const DynamicMultiselectInner = <T extends Option>(
         label={label}
         error={error}
         className={className}
-        getLabelProps={getLabelProps}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        getLabelProps={() => getLabelProps({ ref: refs.reference })}
         getToggleButtonProps={getToggleButtonProps}
         renderEndAdornment={renderEndAdornment}
         hasItemsToSelect={hasItemsToSelect}
@@ -194,7 +197,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 +212,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) => (
diff --git a/src/components/Multiselect/Static/Multiselect.tsx b/src/components/Multiselect/Static/Multiselect.tsx
index e6a1cf3b..1f5e0e59 100644
--- a/src/components/Multiselect/Static/Multiselect.tsx
+++ b/src/components/Multiselect/Static/Multiselect.tsx
@@ -105,7 +105,9 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating(1, isOpen);
+  const { refs, floatingStyles } = useFloating({
+    shouldUpdate: isOpen,
+  });
 
   const inputProps = getInputProps({
     id,
@@ -116,7 +118,6 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
   return (
     <Box display="flex" flexDirection="column">
       <MultiselectWrapper
-        ref={refs.setReference}
         id={id}
         typed={typed}
         active={active}
@@ -125,7 +126,9 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
         label={label}
         error={error}
         className={className}
-        getLabelProps={getLabelProps}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        getLabelProps={() => getLabelProps({ ref: refs.reference })}
         getToggleButtonProps={getToggleButtonProps}
         renderEndAdornment={renderEndAdornment}
         hasItemsToSelect={hasItemsToSelect}
@@ -183,7 +186,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 +195,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) => (
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index f0f693fc..ed3b228d 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -114,7 +114,9 @@ const SelectInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating<HTMLUListElement>(1, isOpen);
+  const { refs, floatingStyles } = useFloating<HTMLUListElement>({
+    shouldUpdate: isOpen,
+  });
 
   const labelColor = useMemo((): TextProps["color"] => {
     if (error) {
diff --git a/src/hooks/useFloating.ts b/src/hooks/useFloating.ts
index a41b800a..6b93ece6 100644
--- a/src/hooks/useFloating.ts
+++ b/src/hooks/useFloating.ts
@@ -8,45 +8,47 @@ import {
 } from "@floating-ui/react-dom";
 import { useLayoutEffect } from "react";
 
-export const useFloating = <T extends ReferenceType>(
+interface UseFloatingProps {
+  zIndexValue?: number;
+  shouldUpdate: boolean;
+}
+
+export const useFloating = <T extends ReferenceType>({
   zIndexValue = 1,
-  isOpen: boolean
-): UseFloatingReturn<T> & {
-  floatingStyles: { zIndex: number };
+  shouldUpdate,
+}: UseFloatingProps): {
+  floatingStyles: UseFloatingReturn<T>["floatingStyles"] & { zIndex: number };
+  refs: UseFloatingReturn<T>["refs"];
 } => {
-  const { floatingStyles, refs, update, strategy, ...rest } =
-    useFloatingHook<T>({
-      middleware: [
-        flip(),
-        size({
-          apply({ rects, availableHeight, elements }) {
-            Object.assign(elements.floating.style, {
-              position: strategy,
-              top: rects.reference.y + rects.reference.height + "px" ?? "",
-              left: rects.reference.x + "px" ?? "",
-              width: `${rects.reference.width}px`,
-              maxHeight: `${availableHeight}px`,
-            });
-          },
-        }),
-      ],
-    });
+  const { floatingStyles, refs, update, strategy } = useFloatingHook<T>({
+    middleware: [
+      flip(),
+      size({
+        apply({ rects, availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            position: strategy,
+            top: rects.reference.y + rects.reference.height + "px" ?? "",
+            left: rects.reference.x + "px" ?? "",
+            width: `${rects.reference.width}px`,
+            maxHeight: `${availableHeight}px`,
+          });
+        },
+      }),
+    ],
+  });
 
   useLayoutEffect(() => {
-    if (isOpen) {
+    if (shouldUpdate) {
       return autoUpdate(
         refs.reference.current!,
         refs.floating.current!,
         update
       );
     }
-  }, [isOpen, update, refs.floating, refs.reference]);
+  }, [shouldUpdate, update, refs.floating, refs.reference]);
 
   return {
-    ...rest,
     refs,
-    strategy,
-    update,
     floatingStyles: {
       ...floatingStyles,
       zIndex: zIndexValue,

From 13458f1011f8c1f508434e998745c5d30c0b7f46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Wed, 15 Jan 2025 12:26:52 +0100
Subject: [PATCH 06/18] Fix floating styles and props

---
 .../Combobox/Common/ComboboxWrapper.tsx       |  7 ++++---
 .../Combobox/Dynamic/DynamicCombobox.tsx      |  9 ++++-----
 src/components/Combobox/Static/Combobox.tsx   |  9 ++++-----
 .../Multiselect/Common/MultiselectWrapper.tsx |  7 ++++---
 .../Dynamic/DynamicMultiselect.tsx            |  8 ++++----
 .../Multiselect/Static/Multiselect.tsx        |  8 ++++----
 src/hooks/useFloating.ts                      | 20 ++++++++-----------
 7 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/src/components/Combobox/Common/ComboboxWrapper.tsx b/src/components/Combobox/Common/ComboboxWrapper.tsx
index 01593b37..6e5e3a28 100644
--- a/src/components/Combobox/Common/ComboboxWrapper.tsx
+++ b/src/components/Combobox/Common/ComboboxWrapper.tsx
@@ -19,7 +19,9 @@ type ComboboxWrapperProps = LabelVariants & {
   error?: boolean;
   children: ReactNode;
   getToggleButtonProps: UseComboboxPropGetters<Option>["getToggleButtonProps"];
-  getLabelProps: UseComboboxPropGetters<Option>["getLabelProps"];
+  getLabelProps: () => ReturnType<
+    UseComboboxPropGetters<Option>["getLabelProps"]
+  >;
 };
 
 export const ComboboxWrapper = forwardRef<
@@ -28,7 +30,6 @@ export const ComboboxWrapper = forwardRef<
 >(
   (
     {
-      id,
       label,
       className,
       error,
@@ -56,7 +57,7 @@ export const ComboboxWrapper = forwardRef<
         flexWrap="nowrap"
         gap={3}
         data-macaw-ui-component="Combobox"
-        {...getLabelProps({ htmlFor: id })}
+        {...getLabelProps()}
         cursor={disabled ? "not-allowed" : "text"}
       >
         <Box display="flex" flexDirection="column" width="100%">
diff --git a/src/components/Combobox/Dynamic/DynamicCombobox.tsx b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
index 4d1118b1..e69f5cdf 100644
--- a/src/components/Combobox/Dynamic/DynamicCombobox.tsx
+++ b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
@@ -122,7 +122,6 @@ const DynamicComboboxInner = <T extends Option>(
     <Box display="flex" flexDirection="column">
       <ComboboxWrapper
         id={id}
-        ref={refs.setReference}
         typed={typed}
         active={active}
         disabled={disabled}
@@ -130,9 +129,9 @@ const DynamicComboboxInner = <T extends Option>(
         label={label}
         error={error}
         className={className}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        getLabelProps={() => getLabelProps({ ref: refs.reference })}
+        getLabelProps={() =>
+          getLabelProps({ ref: refs.setReference, htmlFor: id! })
+        }
         getToggleButtonProps={getToggleButtonProps}
       >
         <Box display="flex">
@@ -169,7 +168,7 @@ const DynamicComboboxInner = <T extends Option>(
           <List
             as="ul"
             className={listStyle}
-            {...getMenuProps({ ref: refs.floating })}
+            {...getMenuProps({ ref: refs.setFloating })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (
diff --git a/src/components/Combobox/Static/Combobox.tsx b/src/components/Combobox/Static/Combobox.tsx
index 3ceab492..b70e0616 100644
--- a/src/components/Combobox/Static/Combobox.tsx
+++ b/src/components/Combobox/Static/Combobox.tsx
@@ -111,7 +111,6 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
     <Box display="flex" flexDirection="column">
       <ComboboxWrapper
         id={id}
-        ref={refs.setReference}
         typed={typed}
         active={active}
         disabled={disabled}
@@ -119,9 +118,9 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
         label={label}
         error={error}
         className={className}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        getLabelProps={() => getLabelProps({ ref: refs.reference })}
+        getLabelProps={() =>
+          getLabelProps({ ref: refs.setReference, htmlFor: id! })
+        }
         getToggleButtonProps={getToggleButtonProps}
       >
         <Box display="flex">
@@ -161,7 +160,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
           <List
             as="ul"
             className={listStyle}
-            {...getMenuProps({ ref: refs.floating })}
+            {...getMenuProps({ ref: refs.setFloating })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (
diff --git a/src/components/Multiselect/Common/MultiselectWrapper.tsx b/src/components/Multiselect/Common/MultiselectWrapper.tsx
index 04c313af..079a38e6 100644
--- a/src/components/Multiselect/Common/MultiselectWrapper.tsx
+++ b/src/components/Multiselect/Common/MultiselectWrapper.tsx
@@ -20,7 +20,9 @@ type MultiselectWrapperProps = LabelVariants & {
   className?: string;
   error?: boolean;
   children: ReactNode;
-  getLabelProps: UseComboboxPropGetters<Option>["getLabelProps"];
+  getLabelProps: () => ReturnType<
+    UseComboboxPropGetters<Option>["getLabelProps"]
+  >;
   getToggleButtonProps: ReturnType<
     typeof useMultiselect
   >["getToggleButtonProps"];
@@ -34,7 +36,6 @@ export const MultiselectWrapper = forwardRef<
 >(
   (
     {
-      id,
       label,
       className,
       error,
@@ -64,7 +65,7 @@ export const MultiselectWrapper = forwardRef<
         flexWrap="nowrap"
         gap={3}
         data-macaw-ui-component="Multiselect"
-        {...getLabelProps({ htmlFor: id })}
+        {...getLabelProps()}
         cursor={disabled ? "not-allowed" : "text"}
       >
         <Box display="flex" flexDirection="column" width="100%">
diff --git a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
index 95972b48..9d1aa64e 100644
--- a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
+++ b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
@@ -137,9 +137,9 @@ const DynamicMultiselectInner = <T extends Option>(
         label={label}
         error={error}
         className={className}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        getLabelProps={() => getLabelProps({ ref: refs.reference })}
+        getLabelProps={() =>
+          getLabelProps({ ref: refs.setReference, htmlFor: id! })
+        }
         getToggleButtonProps={getToggleButtonProps}
         renderEndAdornment={renderEndAdornment}
         hasItemsToSelect={hasItemsToSelect}
@@ -212,7 +212,7 @@ const DynamicMultiselectInner = <T extends Option>(
           <List
             as="ul"
             className={listStyle}
-            {...getMenuProps({ ref: refs.floating })}
+            {...getMenuProps({ ref: refs.setFloating })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (
diff --git a/src/components/Multiselect/Static/Multiselect.tsx b/src/components/Multiselect/Static/Multiselect.tsx
index 1f5e0e59..060fc185 100644
--- a/src/components/Multiselect/Static/Multiselect.tsx
+++ b/src/components/Multiselect/Static/Multiselect.tsx
@@ -126,9 +126,9 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
         label={label}
         error={error}
         className={className}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        getLabelProps={() => getLabelProps({ ref: refs.reference })}
+        getLabelProps={() =>
+          getLabelProps({ ref: refs.setReference, htmlFor: id! })
+        }
         getToggleButtonProps={getToggleButtonProps}
         renderEndAdornment={renderEndAdornment}
         hasItemsToSelect={hasItemsToSelect}
@@ -195,7 +195,7 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
           <List
             as="ul"
             className={listStyle}
-            {...getMenuProps({ ref: refs.floating })}
+            {...getMenuProps({ ref: refs.setFloating })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (
diff --git a/src/hooks/useFloating.ts b/src/hooks/useFloating.ts
index 6b93ece6..f1ed6342 100644
--- a/src/hooks/useFloating.ts
+++ b/src/hooks/useFloating.ts
@@ -14,21 +14,21 @@ interface UseFloatingProps {
 }
 
 export const useFloating = <T extends ReferenceType>({
-  zIndexValue = 1,
+  zIndexValue = 2,
   shouldUpdate,
 }: UseFloatingProps): {
   floatingStyles: UseFloatingReturn<T>["floatingStyles"] & { zIndex: number };
   refs: UseFloatingReturn<T>["refs"];
 } => {
-  const { floatingStyles, refs, update, strategy } = useFloatingHook<T>({
+  const { floatingStyles, refs, elements, update } = useFloatingHook<T>({
+    strategy: "fixed",
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate,
     middleware: [
       flip(),
       size({
         apply({ rects, availableHeight, elements }) {
           Object.assign(elements.floating.style, {
-            position: strategy,
-            top: rects.reference.y + rects.reference.height + "px" ?? "",
-            left: rects.reference.x + "px" ?? "",
             width: `${rects.reference.width}px`,
             maxHeight: `${availableHeight}px`,
           });
@@ -38,14 +38,10 @@ export const useFloating = <T extends ReferenceType>({
   });
 
   useLayoutEffect(() => {
-    if (shouldUpdate) {
-      return autoUpdate(
-        refs.reference.current!,
-        refs.floating.current!,
-        update
-      );
+    if (shouldUpdate && elements.reference && elements.floating) {
+      return autoUpdate(elements.reference, elements.floating, update);
     }
-  }, [shouldUpdate, update, refs.floating, refs.reference]);
+  }, [shouldUpdate, elements, update]);
 
   return {
     refs,

From 20cb90f1617743868b979df53a019acff8597953 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Wed, 15 Jan 2025 17:55:47 +0100
Subject: [PATCH 07/18] Fix passing label and trigger button props

---
 package.json                                      |  2 +-
 .../Combobox/Common/ComboboxWrapper.tsx           | 15 +++++++--------
 .../Combobox/Dynamic/DynamicCombobox.tsx          | 15 +++++++++++----
 src/components/Combobox/Static/Combobox.tsx       | 15 +++++++++++----
 src/components/Multiselect/Common/Adornment.tsx   | 15 +++------------
 .../Multiselect/Common/MultiselectWrapper.tsx     |  7 ++++---
 .../Multiselect/Common/useMultiselect.tsx         |  5 +----
 .../Multiselect/Dynamic/DynamicMultiselect.tsx    | 13 +++++++++----
 .../Multiselect/Static/Multiselect.stories.tsx    |  4 ++--
 src/components/Multiselect/Static/Multiselect.tsx | 13 +++++++++----
 10 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/package.json b/package.json
index 5df56ad4..0c4decb1 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.1.15",
+  "version": "1.34.15",
   "license": "CC-BY-4.0",
   "homepage": "https://macaw-ui.vercel.app/",
   "repository": {
diff --git a/src/components/Combobox/Common/ComboboxWrapper.tsx b/src/components/Combobox/Common/ComboboxWrapper.tsx
index 6e5e3a28..e7e1b6d0 100644
--- a/src/components/Combobox/Common/ComboboxWrapper.tsx
+++ b/src/components/Combobox/Common/ComboboxWrapper.tsx
@@ -53,17 +53,22 @@ export const ComboboxWrapper = forwardRef<
         )}
         alignItems="center"
         justifyContent="space-between"
-        disabled={disabled}
         flexWrap="nowrap"
         gap={3}
         data-macaw-ui-component="Combobox"
-        {...getLabelProps()}
+        {...getToggleButtonProps({
+          disabled,
+          onClick: (event) => {
+            event.preventDefault();
+          },
+        })}
         cursor={disabled ? "not-allowed" : "text"}
       >
         <Box display="flex" flexDirection="column" width="100%">
           <Box
             as="span"
             className={classNames(spanRecipe({ typed, size, disabled, error }))}
+            {...getLabelProps()}
           >
             {label}
           </Box>
@@ -76,12 +81,6 @@ export const ComboboxWrapper = forwardRef<
             sprinkles({ cursor: "pointer" })
           )}
           size={size}
-          {...getToggleButtonProps({
-            disabled,
-            onClick: (event) => {
-              event.preventDefault();
-            },
-          })}
         />
       </Box>
     );
diff --git a/src/components/Combobox/Dynamic/DynamicCombobox.tsx b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
index e69f5cdf..a338da88 100644
--- a/src/components/Combobox/Dynamic/DynamicCombobox.tsx
+++ b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
@@ -129,10 +129,17 @@ const DynamicComboboxInner = <T extends Option>(
         label={label}
         error={error}
         className={className}
-        getLabelProps={() =>
-          getLabelProps({ ref: refs.setReference, htmlFor: id! })
+        getLabelProps={() => getLabelProps({ htmlFor: id! })}
+        getToggleButtonProps={(props) =>
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          getToggleButtonProps({
+            ...props,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            ref: refs.reference,
+          })
         }
-        getToggleButtonProps={getToggleButtonProps}
       >
         <Box display="flex">
           {startAdornment && typed && <Box>{startAdornment(value)}</Box>}
@@ -168,7 +175,7 @@ const DynamicComboboxInner = <T extends Option>(
           <List
             as="ul"
             className={listStyle}
-            {...getMenuProps({ ref: refs.setFloating })}
+            {...getMenuProps({ ref: refs.floating })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (
diff --git a/src/components/Combobox/Static/Combobox.tsx b/src/components/Combobox/Static/Combobox.tsx
index b70e0616..416f27cd 100644
--- a/src/components/Combobox/Static/Combobox.tsx
+++ b/src/components/Combobox/Static/Combobox.tsx
@@ -118,10 +118,17 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
         label={label}
         error={error}
         className={className}
-        getLabelProps={() =>
-          getLabelProps({ ref: refs.setReference, htmlFor: id! })
+        getLabelProps={() => getLabelProps({ htmlFor: id! })}
+        getToggleButtonProps={(props) =>
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          getToggleButtonProps({
+            ...props,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            ref: refs.reference,
+          })
         }
-        getToggleButtonProps={getToggleButtonProps}
       >
         <Box display="flex">
           {startAdornment && typed && <Box>{startAdornment(value)}</Box>}
@@ -160,7 +167,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
           <List
             as="ul"
             className={listStyle}
-            {...getMenuProps({ ref: refs.setFloating })}
+            {...getMenuProps({ ref: refs.floating })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (
diff --git a/src/components/Multiselect/Common/Adornment.tsx b/src/components/Multiselect/Common/Adornment.tsx
index 93425ccd..8cd419d3 100644
--- a/src/components/Multiselect/Common/Adornment.tsx
+++ b/src/components/Multiselect/Common/Adornment.tsx
@@ -3,30 +3,21 @@ import { classNames } from "~/utils";
 
 import { toggleIconStyle } from "../../BaseSelect";
 import { ArrowDownIcon } from "../../Icons";
-import { RenderEndAdornmentType, useMultiselect } from "./useMultiselect";
+import { RenderEndAdornmentType } from "./useMultiselect";
 
 export type AdornmentProps = {
   size?: "small" | "medium" | "large";
-  getToggleButtonProps: ReturnType<
-    typeof useMultiselect
-  >["getToggleButtonProps"];
   renderEndAdornment?: RenderEndAdornmentType;
   disabled?: boolean;
 };
 
-export const Adornment = ({
-  size,
-  getToggleButtonProps,
-  renderEndAdornment,
-  disabled,
-}: AdornmentProps) => {
+export const Adornment = ({ size, renderEndAdornment }: AdornmentProps) => {
   return renderEndAdornment ? (
-    <>{renderEndAdornment(getToggleButtonProps())}</>
+    <>{renderEndAdornment()}</>
   ) : (
     <ArrowDownIcon
       className={classNames(toggleIconStyle, sprinkles({ cursor: "pointer" }))}
       size={size}
-      {...getToggleButtonProps({ disabled })}
     />
   );
 };
diff --git a/src/components/Multiselect/Common/MultiselectWrapper.tsx b/src/components/Multiselect/Common/MultiselectWrapper.tsx
index 079a38e6..6fe2e9d7 100644
--- a/src/components/Multiselect/Common/MultiselectWrapper.tsx
+++ b/src/components/Multiselect/Common/MultiselectWrapper.tsx
@@ -61,11 +61,12 @@ export const MultiselectWrapper = forwardRef<
         )}
         alignItems="center"
         justifyContent="space-between"
-        disabled={disabled}
         flexWrap="nowrap"
         gap={3}
         data-macaw-ui-component="Multiselect"
-        {...getLabelProps()}
+        {...getToggleButtonProps({
+          disabled,
+        })}
         cursor={disabled ? "not-allowed" : "text"}
       >
         <Box display="flex" flexDirection="column" width="100%">
@@ -75,6 +76,7 @@ export const MultiselectWrapper = forwardRef<
               multiselectSpanRecipe({ typed }),
               spanRecipe({ typed, size, disabled, error })
             )}
+            {...getLabelProps()}
           >
             {label}
           </Box>
@@ -92,7 +94,6 @@ export const MultiselectWrapper = forwardRef<
         {hasItemsToSelect ? (
           <Adornment
             size={size}
-            getToggleButtonProps={getToggleButtonProps}
             renderEndAdornment={renderEndAdornment}
             disabled={disabled}
           />
diff --git a/src/components/Multiselect/Common/useMultiselect.tsx b/src/components/Multiselect/Common/useMultiselect.tsx
index 303e31c8..e7015045 100644
--- a/src/components/Multiselect/Common/useMultiselect.tsx
+++ b/src/components/Multiselect/Common/useMultiselect.tsx
@@ -2,7 +2,6 @@ import {
   GetPropsCommonOptions,
   UseComboboxGetInputPropsOptions,
   UseComboboxGetToggleButtonPropsOptions,
-  UseComboboxGetToggleButtonPropsReturnValue,
   useCombobox,
   useMultipleSelection,
 } from "downshift";
@@ -11,9 +10,7 @@ import { FocusEvent, ReactNode, useState, MouseEventHandler } from "react";
 import { MultiChangeHandler, Option } from "~/components/BaseSelect";
 import { isStringArray } from "~/utils";
 
-export type RenderEndAdornmentType = (
-  props: UseComboboxGetToggleButtonPropsReturnValue
-) => ReactNode;
+export type RenderEndAdornmentType = () => ReactNode;
 
 const getItemsFilter = <T extends Option>(
   selectedItems: T[],
diff --git a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
index 9d1aa64e..62adb4bb 100644
--- a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
+++ b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
@@ -137,10 +137,15 @@ const DynamicMultiselectInner = <T extends Option>(
         label={label}
         error={error}
         className={className}
-        getLabelProps={() =>
-          getLabelProps({ ref: refs.setReference, htmlFor: id! })
+        getLabelProps={() => getLabelProps({ htmlFor: id! })}
+        getToggleButtonProps={(props) =>
+          getToggleButtonProps({
+            ...props,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            ref: refs.reference,
+          })
         }
-        getToggleButtonProps={getToggleButtonProps}
         renderEndAdornment={renderEndAdornment}
         hasItemsToSelect={hasItemsToSelect}
       >
@@ -212,7 +217,7 @@ const DynamicMultiselectInner = <T extends Option>(
           <List
             as="ul"
             className={listStyle}
-            {...getMenuProps({ ref: refs.setFloating })}
+            {...getMenuProps({ ref: refs.floating })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (
diff --git a/src/components/Multiselect/Static/Multiselect.stories.tsx b/src/components/Multiselect/Static/Multiselect.stories.tsx
index 84dfacb6..9d54299a 100644
--- a/src/components/Multiselect/Static/Multiselect.stories.tsx
+++ b/src/components/Multiselect/Static/Multiselect.stories.tsx
@@ -158,7 +158,7 @@ const [selectedItems, setSelectedItems] = useState([{ value: "color-black", labe
 export const WithEndAdornment: Story = {
   ...MultiselectTemplate,
   args: {
-    renderEndAdornment: (props) => <ViewTableIcon {...props} />,
+    renderEndAdornment: () => <ViewTableIcon />,
   },
   parameters: {
     docs: {
@@ -172,7 +172,7 @@ const [selectedItems, setSelectedItems] = useState([{ value: "color-black", labe
   value={selectedItems}
   onChange={(values) => setSelectedItems(values)}
   options={[{ value: "color-black", label: "Black" }]}
-  renderEndAdornment={(props) => <ViewTableIcon {...props} />}
+  renderEndAdornment={() => <ViewTableIcon  />}
 />;
         `,
       },
diff --git a/src/components/Multiselect/Static/Multiselect.tsx b/src/components/Multiselect/Static/Multiselect.tsx
index 060fc185..f58b7c23 100644
--- a/src/components/Multiselect/Static/Multiselect.tsx
+++ b/src/components/Multiselect/Static/Multiselect.tsx
@@ -126,10 +126,15 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
         label={label}
         error={error}
         className={className}
-        getLabelProps={() =>
-          getLabelProps({ ref: refs.setReference, htmlFor: id! })
+        getLabelProps={() => getLabelProps({ htmlFor: id! })}
+        getToggleButtonProps={(props) =>
+          getToggleButtonProps({
+            ...props,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            ref: refs.reference,
+          })
         }
-        getToggleButtonProps={getToggleButtonProps}
         renderEndAdornment={renderEndAdornment}
         hasItemsToSelect={hasItemsToSelect}
       >
@@ -195,7 +200,7 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
           <List
             as="ul"
             className={listStyle}
-            {...getMenuProps({ ref: refs.setFloating })}
+            {...getMenuProps({ ref: refs.floating })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (

From 2e831e14da19882963bc3e0da80100e6a607af3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Wed, 15 Jan 2025 22:34:47 +0100
Subject: [PATCH 08/18] Fix floating

---
 src/hooks/useFloating.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useFloating.ts b/src/hooks/useFloating.ts
index f1ed6342..826d13ce 100644
--- a/src/hooks/useFloating.ts
+++ b/src/hooks/useFloating.ts
@@ -20,7 +20,7 @@ export const useFloating = <T extends ReferenceType>({
   floatingStyles: UseFloatingReturn<T>["floatingStyles"] & { zIndex: number };
   refs: UseFloatingReturn<T>["refs"];
 } => {
-  const { floatingStyles, refs, elements, update } = useFloatingHook<T>({
+  const { floatingStyles, refs, update, x, y } = useFloatingHook<T>({
     strategy: "fixed",
     placement: "bottom-start",
     whileElementsMounted: autoUpdate,
@@ -38,15 +38,17 @@ export const useFloating = <T extends ReferenceType>({
   });
 
   useLayoutEffect(() => {
-    if (shouldUpdate && elements.reference && elements.floating) {
-      return autoUpdate(elements.reference, elements.floating, update);
+    if (shouldUpdate && refs.reference.current && refs.floating.current) {
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
     }
-  }, [shouldUpdate, elements, update]);
+  }, [shouldUpdate, refs, update]);
 
   return {
     refs,
     floatingStyles: {
       ...floatingStyles,
+      top: y ?? 0,
+      left: x ?? 0,
       zIndex: zIndexValue,
       pointerEvents: "auto",
     },

From aad74f8261356e32c1b2c7932872909553dfc880 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Wed, 15 Jan 2025 22:50:31 +0100
Subject: [PATCH 09/18] Fi open dropdowns

---
 src/components/Combobox/Common/useCombobox.tsx        | 11 +++++++++++
 .../Multiselect/Common/MultiselectWrapper.tsx         |  2 +-
 src/components/Multiselect/Common/useMultiselect.tsx  |  3 +++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/Combobox/Common/useCombobox.tsx b/src/components/Combobox/Common/useCombobox.tsx
index 73c6743c..3bfed05a 100644
--- a/src/components/Combobox/Common/useCombobox.tsx
+++ b/src/components/Combobox/Common/useCombobox.tsx
@@ -67,6 +67,17 @@ export const useCombobox = <T extends Option, V extends string | Option>({
     highlightedIndex,
     onHighlightedIndexChange,
     isItemDisabled: (item) => item?.disabled ?? false,
+    stateReducer: (_state, actionAndChanges) => {
+      const { changes, type } = actionAndChanges;
+
+      switch (type) {
+        case useDownshiftCombobox.stateChangeTypes.InputClick:
+        case useDownshiftCombobox.stateChangeTypes.ToggleButtonClick:
+          return { ...changes, isOpen: true };
+        default:
+          return changes;
+      }
+    },
     onStateChange: ({ inputValue: newInputValue, type }) => {
       switch (type) {
         case useDownshiftCombobox.stateChangeTypes.InputChange:
diff --git a/src/components/Multiselect/Common/MultiselectWrapper.tsx b/src/components/Multiselect/Common/MultiselectWrapper.tsx
index 6fe2e9d7..a77d40e3 100644
--- a/src/components/Multiselect/Common/MultiselectWrapper.tsx
+++ b/src/components/Multiselect/Common/MultiselectWrapper.tsx
@@ -67,6 +67,7 @@ export const MultiselectWrapper = forwardRef<
         {...getToggleButtonProps({
           disabled,
         })}
+        {...getLabelProps()}
         cursor={disabled ? "not-allowed" : "text"}
       >
         <Box display="flex" flexDirection="column" width="100%">
@@ -76,7 +77,6 @@ export const MultiselectWrapper = forwardRef<
               multiselectSpanRecipe({ typed }),
               spanRecipe({ typed, size, disabled, error })
             )}
-            {...getLabelProps()}
           >
             {label}
           </Box>
diff --git a/src/components/Multiselect/Common/useMultiselect.tsx b/src/components/Multiselect/Common/useMultiselect.tsx
index e7015045..9e6faad0 100644
--- a/src/components/Multiselect/Common/useMultiselect.tsx
+++ b/src/components/Multiselect/Common/useMultiselect.tsx
@@ -107,6 +107,9 @@ export const useMultiselect = <T extends Option, V extends Option | string>({
       const { changes, type } = actionAndChanges;
 
       switch (type) {
+        case useCombobox.stateChangeTypes.InputClick:
+        case useCombobox.stateChangeTypes.ToggleButtonClick:
+          return { ...changes, isOpen: true };
         case useCombobox.stateChangeTypes.InputKeyDownEnter:
         case useCombobox.stateChangeTypes.ItemClick:
           setInputValue("");

From 5092f289ff9d00f2c803402826a2d2d6bd3b2001 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Fri, 17 Jan 2025 11:16:49 +0100
Subject: [PATCH 10/18] Fix floating position

---
 src/hooks/useFloating.ts | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useFloating.ts b/src/hooks/useFloating.ts
index 826d13ce..5d4e0edc 100644
--- a/src/hooks/useFloating.ts
+++ b/src/hooks/useFloating.ts
@@ -20,15 +20,14 @@ export const useFloating = <T extends ReferenceType>({
   floatingStyles: UseFloatingReturn<T>["floatingStyles"] & { zIndex: number };
   refs: UseFloatingReturn<T>["refs"];
 } => {
-  const { floatingStyles, refs, update, x, y } = useFloatingHook<T>({
-    strategy: "fixed",
-    placement: "bottom-start",
-    whileElementsMounted: autoUpdate,
+  const { floatingStyles, refs, update } = useFloatingHook<T>({
     middleware: [
       flip(),
       size({
         apply({ rects, availableHeight, elements }) {
           Object.assign(elements.floating.style, {
+            top: `${rects.reference.y + rects.reference.height}px`,
+            left: `${rects.reference.x}px`,
             width: `${rects.reference.width}px`,
             maxHeight: `${availableHeight}px`,
           });
@@ -47,8 +46,6 @@ export const useFloating = <T extends ReferenceType>({
     refs,
     floatingStyles: {
       ...floatingStyles,
-      top: y ?? 0,
-      left: x ?? 0,
       zIndex: zIndexValue,
       pointerEvents: "auto",
     },

From 2aa5c846e254168878981743611dad57cc060b70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Fri, 17 Jan 2025 14:47:42 +0100
Subject: [PATCH 11/18] Set max height

---
 src/hooks/useFloating.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useFloating.ts b/src/hooks/useFloating.ts
index 5d4e0edc..e8ffbead 100644
--- a/src/hooks/useFloating.ts
+++ b/src/hooks/useFloating.ts
@@ -14,13 +14,14 @@ interface UseFloatingProps {
 }
 
 export const useFloating = <T extends ReferenceType>({
-  zIndexValue = 2,
+  zIndexValue = 999,
   shouldUpdate,
 }: UseFloatingProps): {
   floatingStyles: UseFloatingReturn<T>["floatingStyles"] & { zIndex: number };
   refs: UseFloatingReturn<T>["refs"];
 } => {
   const { floatingStyles, refs, update } = useFloatingHook<T>({
+    strategy: "fixed",
     middleware: [
       flip(),
       size({
@@ -29,7 +30,7 @@ export const useFloating = <T extends ReferenceType>({
             top: `${rects.reference.y + rects.reference.height}px`,
             left: `${rects.reference.x}px`,
             width: `${rects.reference.width}px`,
-            maxHeight: `${availableHeight}px`,
+            maxHeight: `${Math.min(230, availableHeight)}px`,
           });
         },
       }),

From dc0ac44663c292b81ff18c93ba961c9fbc8be865 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Fri, 17 Jan 2025 15:39:03 +0100
Subject: [PATCH 12/18] Fix types

---
 package.json                                  |  2 +-
 .../Combobox/Common/ComboboxWrapper.tsx       | 19 ++++++------
 .../Combobox/Common/useCombobox.tsx           | 11 -------
 .../Combobox/Dynamic/DynamicCombobox.tsx      | 16 +++-------
 src/components/Combobox/Static/Combobox.tsx   | 16 +++-------
 .../Multiselect/Common/Adornment.tsx          | 29 +++++++++++++++++--
 .../Multiselect/Common/MultiselectWrapper.tsx | 11 +++----
 .../Multiselect/Common/useMultiselect.tsx     |  9 +++---
 .../Dynamic/DynamicMultiselect.tsx            | 14 +++------
 .../Multiselect/Static/Multiselect.tsx        | 14 +++------
 src/components/Select/Select.tsx              |  2 +-
 src/hooks/useFloating.ts                      |  2 +-
 12 files changed, 62 insertions(+), 83 deletions(-)

diff --git a/package.json b/package.json
index 0c4decb1..5df56ad4 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.34.15",
+  "version": "1.1.15",
   "license": "CC-BY-4.0",
   "homepage": "https://macaw-ui.vercel.app/",
   "repository": {
diff --git a/src/components/Combobox/Common/ComboboxWrapper.tsx b/src/components/Combobox/Common/ComboboxWrapper.tsx
index e7e1b6d0..46ee86b7 100644
--- a/src/components/Combobox/Common/ComboboxWrapper.tsx
+++ b/src/components/Combobox/Common/ComboboxWrapper.tsx
@@ -19,9 +19,7 @@ type ComboboxWrapperProps = LabelVariants & {
   error?: boolean;
   children: ReactNode;
   getToggleButtonProps: UseComboboxPropGetters<Option>["getToggleButtonProps"];
-  getLabelProps: () => ReturnType<
-    UseComboboxPropGetters<Option>["getLabelProps"]
-  >;
+  getLabelProps: UseComboboxPropGetters<Option>["getLabelProps"];
 };
 
 export const ComboboxWrapper = forwardRef<
@@ -30,6 +28,7 @@ export const ComboboxWrapper = forwardRef<
 >(
   (
     {
+      id,
       label,
       className,
       error,
@@ -56,19 +55,13 @@ export const ComboboxWrapper = forwardRef<
         flexWrap="nowrap"
         gap={3}
         data-macaw-ui-component="Combobox"
-        {...getToggleButtonProps({
-          disabled,
-          onClick: (event) => {
-            event.preventDefault();
-          },
-        })}
         cursor={disabled ? "not-allowed" : "text"}
       >
         <Box display="flex" flexDirection="column" width="100%">
           <Box
             as="span"
+            {...getLabelProps({ htmlFor: id })}
             className={classNames(spanRecipe({ typed, size, disabled, error }))}
-            {...getLabelProps()}
           >
             {label}
           </Box>
@@ -80,6 +73,12 @@ export const ComboboxWrapper = forwardRef<
             toggleIconStyle,
             sprinkles({ cursor: "pointer" })
           )}
+          {...getToggleButtonProps({
+            disabled,
+            onClick: (event) => {
+              event.preventDefault();
+            },
+          })}
           size={size}
         />
       </Box>
diff --git a/src/components/Combobox/Common/useCombobox.tsx b/src/components/Combobox/Common/useCombobox.tsx
index 3bfed05a..73c6743c 100644
--- a/src/components/Combobox/Common/useCombobox.tsx
+++ b/src/components/Combobox/Common/useCombobox.tsx
@@ -67,17 +67,6 @@ export const useCombobox = <T extends Option, V extends string | Option>({
     highlightedIndex,
     onHighlightedIndexChange,
     isItemDisabled: (item) => item?.disabled ?? false,
-    stateReducer: (_state, actionAndChanges) => {
-      const { changes, type } = actionAndChanges;
-
-      switch (type) {
-        case useDownshiftCombobox.stateChangeTypes.InputClick:
-        case useDownshiftCombobox.stateChangeTypes.ToggleButtonClick:
-          return { ...changes, isOpen: true };
-        default:
-          return changes;
-      }
-    },
     onStateChange: ({ inputValue: newInputValue, type }) => {
       switch (type) {
         case useDownshiftCombobox.stateChangeTypes.InputChange:
diff --git a/src/components/Combobox/Dynamic/DynamicCombobox.tsx b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
index a338da88..e789ee3b 100644
--- a/src/components/Combobox/Dynamic/DynamicCombobox.tsx
+++ b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
@@ -107,7 +107,7 @@ const DynamicComboboxInner = <T extends Option>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating({
+  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
     shouldUpdate: isOpen,
   });
 
@@ -122,6 +122,7 @@ const DynamicComboboxInner = <T extends Option>(
     <Box display="flex" flexDirection="column">
       <ComboboxWrapper
         id={id}
+        ref={refs.reference}
         typed={typed}
         active={active}
         disabled={disabled}
@@ -129,17 +130,8 @@ const DynamicComboboxInner = <T extends Option>(
         label={label}
         error={error}
         className={className}
-        getLabelProps={() => getLabelProps({ htmlFor: id! })}
-        getToggleButtonProps={(props) =>
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-expect-error
-          getToggleButtonProps({
-            ...props,
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            ref: refs.reference,
-          })
-        }
+        getLabelProps={getLabelProps}
+        getToggleButtonProps={getToggleButtonProps}
       >
         <Box display="flex">
           {startAdornment && typed && <Box>{startAdornment(value)}</Box>}
diff --git a/src/components/Combobox/Static/Combobox.tsx b/src/components/Combobox/Static/Combobox.tsx
index 416f27cd..bd81d098 100644
--- a/src/components/Combobox/Static/Combobox.tsx
+++ b/src/components/Combobox/Static/Combobox.tsx
@@ -98,7 +98,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating({
+  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
     shouldUpdate: isOpen,
   });
 
@@ -111,6 +111,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
     <Box display="flex" flexDirection="column">
       <ComboboxWrapper
         id={id}
+        ref={refs.reference}
         typed={typed}
         active={active}
         disabled={disabled}
@@ -118,17 +119,8 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
         label={label}
         error={error}
         className={className}
-        getLabelProps={() => getLabelProps({ htmlFor: id! })}
-        getToggleButtonProps={(props) =>
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-expect-error
-          getToggleButtonProps({
-            ...props,
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            ref: refs.reference,
-          })
-        }
+        getLabelProps={getLabelProps}
+        getToggleButtonProps={getToggleButtonProps}
       >
         <Box display="flex">
           {startAdornment && typed && <Box>{startAdornment(value)}</Box>}
diff --git a/src/components/Multiselect/Common/Adornment.tsx b/src/components/Multiselect/Common/Adornment.tsx
index 8cd419d3..d3a9a8c3 100644
--- a/src/components/Multiselect/Common/Adornment.tsx
+++ b/src/components/Multiselect/Common/Adornment.tsx
@@ -3,21 +3,44 @@ import { classNames } from "~/utils";
 
 import { toggleIconStyle } from "../../BaseSelect";
 import { ArrowDownIcon } from "../../Icons";
-import { RenderEndAdornmentType } from "./useMultiselect";
+import { RenderEndAdornmentType, useMultiselect } from "./useMultiselect";
 
 export type AdornmentProps = {
   size?: "small" | "medium" | "large";
+  getToggleButtonProps: ReturnType<
+    typeof useMultiselect
+  >["getToggleButtonProps"];
   renderEndAdornment?: RenderEndAdornmentType;
   disabled?: boolean;
 };
 
-export const Adornment = ({ size, renderEndAdornment }: AdornmentProps) => {
+export const Adornment = ({
+  size,
+  getToggleButtonProps,
+  renderEndAdornment,
+  disabled,
+}: AdornmentProps) => {
   return renderEndAdornment ? (
-    <>{renderEndAdornment()}</>
+    <>
+      {renderEndAdornment(
+        getToggleButtonProps({
+          disabled,
+          onClick: (event) => {
+            event.preventDefault();
+          },
+        })
+      )}
+    </>
   ) : (
     <ArrowDownIcon
       className={classNames(toggleIconStyle, sprinkles({ cursor: "pointer" }))}
       size={size}
+      {...getToggleButtonProps({
+        disabled,
+        onClick: (event) => {
+          event.preventDefault();
+        },
+      })}
     />
   );
 };
diff --git a/src/components/Multiselect/Common/MultiselectWrapper.tsx b/src/components/Multiselect/Common/MultiselectWrapper.tsx
index a77d40e3..05cd8abe 100644
--- a/src/components/Multiselect/Common/MultiselectWrapper.tsx
+++ b/src/components/Multiselect/Common/MultiselectWrapper.tsx
@@ -20,9 +20,7 @@ type MultiselectWrapperProps = LabelVariants & {
   className?: string;
   error?: boolean;
   children: ReactNode;
-  getLabelProps: () => ReturnType<
-    UseComboboxPropGetters<Option>["getLabelProps"]
-  >;
+  getLabelProps: UseComboboxPropGetters<Option>["getLabelProps"];
   getToggleButtonProps: ReturnType<
     typeof useMultiselect
   >["getToggleButtonProps"];
@@ -36,6 +34,7 @@ export const MultiselectWrapper = forwardRef<
 >(
   (
     {
+      id,
       label,
       className,
       error,
@@ -64,10 +63,7 @@ export const MultiselectWrapper = forwardRef<
         flexWrap="nowrap"
         gap={3}
         data-macaw-ui-component="Multiselect"
-        {...getToggleButtonProps({
-          disabled,
-        })}
-        {...getLabelProps()}
+        {...getLabelProps({ htmlFor: id })}
         cursor={disabled ? "not-allowed" : "text"}
       >
         <Box display="flex" flexDirection="column" width="100%">
@@ -94,6 +90,7 @@ export const MultiselectWrapper = forwardRef<
         {hasItemsToSelect ? (
           <Adornment
             size={size}
+            getToggleButtonProps={getToggleButtonProps}
             renderEndAdornment={renderEndAdornment}
             disabled={disabled}
           />
diff --git a/src/components/Multiselect/Common/useMultiselect.tsx b/src/components/Multiselect/Common/useMultiselect.tsx
index 9e6faad0..07478315 100644
--- a/src/components/Multiselect/Common/useMultiselect.tsx
+++ b/src/components/Multiselect/Common/useMultiselect.tsx
@@ -4,14 +4,16 @@ import {
   UseComboboxGetToggleButtonPropsOptions,
   useCombobox,
   useMultipleSelection,
+  UseComboboxGetToggleButtonPropsReturnValue,
 } from "downshift";
 import { FocusEvent, ReactNode, useState, MouseEventHandler } from "react";
 
 import { MultiChangeHandler, Option } from "~/components/BaseSelect";
 import { isStringArray } from "~/utils";
 
-export type RenderEndAdornmentType = () => ReactNode;
-
+export type RenderEndAdornmentType = (
+  props: UseComboboxGetToggleButtonPropsReturnValue
+) => ReactNode;
 const getItemsFilter = <T extends Option>(
   selectedItems: T[],
   inputValue: string,
@@ -107,9 +109,6 @@ export const useMultiselect = <T extends Option, V extends Option | string>({
       const { changes, type } = actionAndChanges;
 
       switch (type) {
-        case useCombobox.stateChangeTypes.InputClick:
-        case useCombobox.stateChangeTypes.ToggleButtonClick:
-          return { ...changes, isOpen: true };
         case useCombobox.stateChangeTypes.InputKeyDownEnter:
         case useCombobox.stateChangeTypes.ItemClick:
           setInputValue("");
diff --git a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
index 62adb4bb..ba4938c5 100644
--- a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
+++ b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
@@ -114,7 +114,7 @@ const DynamicMultiselectInner = <T extends Option>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating({
+  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
     shouldUpdate: isOpen,
   });
 
@@ -130,6 +130,7 @@ const DynamicMultiselectInner = <T extends Option>(
     <Box display="flex" flexDirection="column">
       <MultiselectWrapper
         id={id}
+        ref={refs.reference}
         typed={typed}
         active={active}
         disabled={disabled}
@@ -137,15 +138,8 @@ const DynamicMultiselectInner = <T extends Option>(
         label={label}
         error={error}
         className={className}
-        getLabelProps={() => getLabelProps({ htmlFor: id! })}
-        getToggleButtonProps={(props) =>
-          getToggleButtonProps({
-            ...props,
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            ref: refs.reference,
-          })
-        }
+        getLabelProps={getLabelProps}
+        getToggleButtonProps={getToggleButtonProps}
         renderEndAdornment={renderEndAdornment}
         hasItemsToSelect={hasItemsToSelect}
       >
diff --git a/src/components/Multiselect/Static/Multiselect.tsx b/src/components/Multiselect/Static/Multiselect.tsx
index f58b7c23..1ade3b3e 100644
--- a/src/components/Multiselect/Static/Multiselect.tsx
+++ b/src/components/Multiselect/Static/Multiselect.tsx
@@ -105,7 +105,7 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating({
+  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
     shouldUpdate: isOpen,
   });
 
@@ -119,6 +119,7 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
     <Box display="flex" flexDirection="column">
       <MultiselectWrapper
         id={id}
+        ref={refs.reference}
         typed={typed}
         active={active}
         disabled={disabled}
@@ -126,15 +127,8 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
         label={label}
         error={error}
         className={className}
-        getLabelProps={() => getLabelProps({ htmlFor: id! })}
-        getToggleButtonProps={(props) =>
-          getToggleButtonProps({
-            ...props,
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            ref: refs.reference,
-          })
-        }
+        getLabelProps={getLabelProps}
+        getToggleButtonProps={getToggleButtonProps}
         renderEndAdornment={renderEndAdornment}
         hasItemsToSelect={hasItemsToSelect}
       >
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index ed3b228d..63cd1131 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -114,7 +114,7 @@ const SelectInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating<HTMLUListElement>({
+  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
     shouldUpdate: isOpen,
   });
 
diff --git a/src/hooks/useFloating.ts b/src/hooks/useFloating.ts
index e8ffbead..ac8840df 100644
--- a/src/hooks/useFloating.ts
+++ b/src/hooks/useFloating.ts
@@ -14,7 +14,7 @@ interface UseFloatingProps {
 }
 
 export const useFloating = <T extends ReferenceType>({
-  zIndexValue = 999,
+  zIndexValue = 2,
   shouldUpdate,
 }: UseFloatingProps): {
   floatingStyles: UseFloatingReturn<T>["floatingStyles"] & { zIndex: number };

From cff4a03f1ee74fd0332a9a02581016cad003d7be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Fri, 17 Jan 2025 15:55:14 +0100
Subject: [PATCH 13/18] Final polish

---
 .../Combobox/Common/ComboboxWrapper.tsx       |   5 +-
 .../Multiselect/Common/Adornment.tsx          |  16 +--
 .../Multiselect/Common/MultiselectWrapper.tsx |   1 +
 .../Multiselect/Common/useMultiselect.tsx     |   3 +-
 .../Dynamic/DynamicMultiselect.tsx            |   2 +-
 .../Static/Multiselect.stories.tsx            |   3 +-
 src/components/Select/Select.tsx              |   5 +-
 src/components/Select/SelectWrapper.tsx       | 110 ++++++++++--------
 8 files changed, 72 insertions(+), 73 deletions(-)

diff --git a/src/components/Combobox/Common/ComboboxWrapper.tsx b/src/components/Combobox/Common/ComboboxWrapper.tsx
index 46ee86b7..01593b37 100644
--- a/src/components/Combobox/Common/ComboboxWrapper.tsx
+++ b/src/components/Combobox/Common/ComboboxWrapper.tsx
@@ -52,15 +52,16 @@ export const ComboboxWrapper = forwardRef<
         )}
         alignItems="center"
         justifyContent="space-between"
+        disabled={disabled}
         flexWrap="nowrap"
         gap={3}
         data-macaw-ui-component="Combobox"
+        {...getLabelProps({ htmlFor: id })}
         cursor={disabled ? "not-allowed" : "text"}
       >
         <Box display="flex" flexDirection="column" width="100%">
           <Box
             as="span"
-            {...getLabelProps({ htmlFor: id })}
             className={classNames(spanRecipe({ typed, size, disabled, error }))}
           >
             {label}
@@ -73,13 +74,13 @@ export const ComboboxWrapper = forwardRef<
             toggleIconStyle,
             sprinkles({ cursor: "pointer" })
           )}
+          size={size}
           {...getToggleButtonProps({
             disabled,
             onClick: (event) => {
               event.preventDefault();
             },
           })}
-          size={size}
         />
       </Box>
     );
diff --git a/src/components/Multiselect/Common/Adornment.tsx b/src/components/Multiselect/Common/Adornment.tsx
index d3a9a8c3..2b0c4192 100644
--- a/src/components/Multiselect/Common/Adornment.tsx
+++ b/src/components/Multiselect/Common/Adornment.tsx
@@ -22,25 +22,13 @@ export const Adornment = ({
 }: AdornmentProps) => {
   return renderEndAdornment ? (
     <>
-      {renderEndAdornment(
-        getToggleButtonProps({
-          disabled,
-          onClick: (event) => {
-            event.preventDefault();
-          },
-        })
-      )}
+      <>{renderEndAdornment(getToggleButtonProps())}</>
     </>
   ) : (
     <ArrowDownIcon
       className={classNames(toggleIconStyle, sprinkles({ cursor: "pointer" }))}
       size={size}
-      {...getToggleButtonProps({
-        disabled,
-        onClick: (event) => {
-          event.preventDefault();
-        },
-      })}
+      {...getToggleButtonProps({ disabled })}
     />
   );
 };
diff --git a/src/components/Multiselect/Common/MultiselectWrapper.tsx b/src/components/Multiselect/Common/MultiselectWrapper.tsx
index 05cd8abe..04c313af 100644
--- a/src/components/Multiselect/Common/MultiselectWrapper.tsx
+++ b/src/components/Multiselect/Common/MultiselectWrapper.tsx
@@ -60,6 +60,7 @@ export const MultiselectWrapper = forwardRef<
         )}
         alignItems="center"
         justifyContent="space-between"
+        disabled={disabled}
         flexWrap="nowrap"
         gap={3}
         data-macaw-ui-component="Multiselect"
diff --git a/src/components/Multiselect/Common/useMultiselect.tsx b/src/components/Multiselect/Common/useMultiselect.tsx
index 07478315..303e31c8 100644
--- a/src/components/Multiselect/Common/useMultiselect.tsx
+++ b/src/components/Multiselect/Common/useMultiselect.tsx
@@ -2,9 +2,9 @@ import {
   GetPropsCommonOptions,
   UseComboboxGetInputPropsOptions,
   UseComboboxGetToggleButtonPropsOptions,
+  UseComboboxGetToggleButtonPropsReturnValue,
   useCombobox,
   useMultipleSelection,
-  UseComboboxGetToggleButtonPropsReturnValue,
 } from "downshift";
 import { FocusEvent, ReactNode, useState, MouseEventHandler } from "react";
 
@@ -14,6 +14,7 @@ import { isStringArray } from "~/utils";
 export type RenderEndAdornmentType = (
   props: UseComboboxGetToggleButtonPropsReturnValue
 ) => ReactNode;
+
 const getItemsFilter = <T extends Option>(
   selectedItems: T[],
   inputValue: string,
diff --git a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
index ba4938c5..915c1094 100644
--- a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
+++ b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
@@ -129,8 +129,8 @@ const DynamicMultiselectInner = <T extends Option>(
   return (
     <Box display="flex" flexDirection="column">
       <MultiselectWrapper
-        id={id}
         ref={refs.reference}
+        id={id}
         typed={typed}
         active={active}
         disabled={disabled}
diff --git a/src/components/Multiselect/Static/Multiselect.stories.tsx b/src/components/Multiselect/Static/Multiselect.stories.tsx
index 9d54299a..95420497 100644
--- a/src/components/Multiselect/Static/Multiselect.stories.tsx
+++ b/src/components/Multiselect/Static/Multiselect.stories.tsx
@@ -172,7 +172,8 @@ const [selectedItems, setSelectedItems] = useState([{ value: "color-black", labe
   value={selectedItems}
   onChange={(values) => setSelectedItems(values)}
   options={[{ value: "color-black", label: "Black" }]}
-  renderEndAdornment={() => <ViewTableIcon  />}
+  renderEndAdornment={(props) => <ViewTableIcon {...props} />}
+
 />;
         `,
       },
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 63cd1131..392ea795 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -133,6 +133,7 @@ const SelectInner = <T extends Option, V extends Option | string>(
   return (
     <Box display="flex" flexDirection="column">
       <SelectWrapper
+        ref={refs.reference}
         id={id}
         typed={typed}
         active={active}
@@ -142,9 +143,7 @@ const SelectInner = <T extends Option, V extends Option | string>(
         error={error}
         className={className}
         getLabelProps={getLabelProps}
-        getToggleButtonProps={() =>
-          getToggleButtonProps({ ref: refs.reference })
-        }
+        getToggleButtonProps={getToggleButtonProps}
       >
         <Box height={getBoxHeight(size)} {...props} ref={ref} display="flex">
           {startAdornment && typed && startAdornment(value)}
diff --git a/src/components/Select/SelectWrapper.tsx b/src/components/Select/SelectWrapper.tsx
index 6630815e..0bfd2499 100644
--- a/src/components/Select/SelectWrapper.tsx
+++ b/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 } from "react";
+import { forwardRef, ReactNode } from "react";
 
 import { classNames } from "~/utils";
 
@@ -23,62 +23,70 @@ type SelectWrapperProps = LabelVariants & {
   getLabelProps: UseSelectPropGetters<Option>["getLabelProps"];
 };
 
-export const SelectWrapper = ({
-  id,
-  label,
-  className,
-  error,
-  children,
-  getToggleButtonProps,
-  getLabelProps,
-  typed,
-  active,
-  disabled,
-  size,
-}: SelectWrapperProps) => {
-  return (
-    <Box>
-      <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"}
-      >
+export const SelectWrapper = forwardRef<HTMLLabelElement, SelectWrapperProps>(
+  (
+    {
+      id,
+      label,
+      className,
+      error,
+      children,
+      getToggleButtonProps,
+      getLabelProps,
+      typed,
+      active,
+      disabled,
+      size,
+    },
+    ref
+  ) => {
+    return (
+      <Box>
         <Box
-          display="flex"
-          flexDirection="column"
-          // Take full width minus the arrow icon width
-          __width="calc(100% - 30px)"
+          ref={ref}
+          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
-            as="span"
-            className={classNames(spanRecipe({ typed, size, disabled, error }))}
-            {...getLabelProps({ htmlFor: id })}
+            display="flex"
+            flexDirection="column"
+            // Take full width minus the arrow icon width
+            __width="calc(100% - 30px)"
           >
-            {label}
+            <Box
+              as="span"
+              className={classNames(
+                spanRecipe({ typed, size, disabled, error })
+              )}
+              {...getLabelProps({ htmlFor: id })}
+            >
+              {label}
+            </Box>
+            {children}
           </Box>
-          {children}
-        </Box>
 
-        <ArrowDownIcon
-          className={classNames(
-            toggleIconStyle,
-            sprinkles({ cursor: "pointer" })
-          )}
-          size={size}
-        />
+          <ArrowDownIcon
+            className={classNames(
+              toggleIconStyle,
+              sprinkles({ cursor: "pointer" })
+            )}
+            size={size}
+          />
+        </Box>
       </Box>
-    </Box>
-  );
-};
+    );
+  }
+);
 
 SelectWrapper.displayName = "SelectWrapper";

From c3bbff390940cd1910dfa626866b5c42dec95177 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Fri, 17 Jan 2025 15:59:24 +0100
Subject: [PATCH 14/18] Remove not needed changes

---
 .../Multiselect/Common/Adornment.tsx          |  4 +-
 .../Static/Multiselect.stories.tsx            |  3 +-
 src/components/Select/Select.tsx              |  2 +-
 src/components/Select/SelectWrapper.tsx       | 70 +++++++++----------
 4 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/src/components/Multiselect/Common/Adornment.tsx b/src/components/Multiselect/Common/Adornment.tsx
index 2b0c4192..93425ccd 100644
--- a/src/components/Multiselect/Common/Adornment.tsx
+++ b/src/components/Multiselect/Common/Adornment.tsx
@@ -21,9 +21,7 @@ export const Adornment = ({
   disabled,
 }: AdornmentProps) => {
   return renderEndAdornment ? (
-    <>
-      <>{renderEndAdornment(getToggleButtonProps())}</>
-    </>
+    <>{renderEndAdornment(getToggleButtonProps())}</>
   ) : (
     <ArrowDownIcon
       className={classNames(toggleIconStyle, sprinkles({ cursor: "pointer" }))}
diff --git a/src/components/Multiselect/Static/Multiselect.stories.tsx b/src/components/Multiselect/Static/Multiselect.stories.tsx
index 95420497..84dfacb6 100644
--- a/src/components/Multiselect/Static/Multiselect.stories.tsx
+++ b/src/components/Multiselect/Static/Multiselect.stories.tsx
@@ -158,7 +158,7 @@ const [selectedItems, setSelectedItems] = useState([{ value: "color-black", labe
 export const WithEndAdornment: Story = {
   ...MultiselectTemplate,
   args: {
-    renderEndAdornment: () => <ViewTableIcon />,
+    renderEndAdornment: (props) => <ViewTableIcon {...props} />,
   },
   parameters: {
     docs: {
@@ -173,7 +173,6 @@ const [selectedItems, setSelectedItems] = useState([{ value: "color-black", labe
   onChange={(values) => setSelectedItems(values)}
   options={[{ value: "color-black", label: "Black" }]}
   renderEndAdornment={(props) => <ViewTableIcon {...props} />}
-
 />;
         `,
       },
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 392ea795..928068cc 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -9,7 +9,6 @@ import {
 
 import { useFloating } from "~/hooks/useFloating";
 import { isString } from "~/utils";
-import { SelectWrapper } from "~/components/Select/SelectWrapper";
 import {
   Box,
   List,
@@ -31,6 +30,7 @@ import {
 } from "../BaseSelect";
 import { getListDisplayMode } from "../BaseSelect/helpers";
 
+import { SelectWrapper } from "./SelectWrapper";
 import { useSelect } from "./useSelect";
 
 export type SelectProps<T, V> = PropsWithBox<
diff --git a/src/components/Select/SelectWrapper.tsx b/src/components/Select/SelectWrapper.tsx
index 0bfd2499..3c845c45 100644
--- a/src/components/Select/SelectWrapper.tsx
+++ b/src/components/Select/SelectWrapper.tsx
@@ -41,49 +41,45 @@ export const SelectWrapper = forwardRef<HTMLLabelElement, SelectWrapperProps>(
     ref
   ) => {
     return (
-      <Box>
+      <Box
+        ref={ref}
+        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
-          ref={ref}
-          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"}
+          display="flex"
+          flexDirection="column"
+          // Take full width minus the arrow icon width
+          __width="calc(100% - 30px)"
         >
           <Box
-            display="flex"
-            flexDirection="column"
-            // Take full width minus the arrow icon width
-            __width="calc(100% - 30px)"
+            as="span"
+            className={classNames(spanRecipe({ typed, size, disabled, error }))}
+            {...getLabelProps({ htmlFor: id })}
           >
-            <Box
-              as="span"
-              className={classNames(
-                spanRecipe({ typed, size, disabled, error })
-              )}
-              {...getLabelProps({ htmlFor: id })}
-            >
-              {label}
-            </Box>
-            {children}
+            {label}
           </Box>
-
-          <ArrowDownIcon
-            className={classNames(
-              toggleIconStyle,
-              sprinkles({ cursor: "pointer" })
-            )}
-            size={size}
-          />
+          {children}
         </Box>
+
+        <ArrowDownIcon
+          className={classNames(
+            toggleIconStyle,
+            sprinkles({ cursor: "pointer" })
+          )}
+          size={size}
+        />
       </Box>
     );
   }

From ecf0e86eca349e98b678b42986ad6ea9381dd5d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Tue, 21 Jan 2025 00:39:13 +0100
Subject: [PATCH 15/18] Fix Select refs

---
 src/components/Select/Select.tsx        |   5 +-
 src/components/Select/SelectWrapper.tsx | 106 +++++++++++-------------
 2 files changed, 53 insertions(+), 58 deletions(-)

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 928068cc..b8cf552a 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -133,7 +133,6 @@ const SelectInner = <T extends Option, V extends Option | string>(
   return (
     <Box display="flex" flexDirection="column">
       <SelectWrapper
-        ref={refs.reference}
         id={id}
         typed={typed}
         active={active}
@@ -143,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)}
diff --git a/src/components/Select/SelectWrapper.tsx b/src/components/Select/SelectWrapper.tsx
index 3c845c45..742bb1c3 100644
--- a/src/components/Select/SelectWrapper.tsx
+++ b/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 { forwardRef, ReactNode } from "react";
+import { ReactNode } from "react";
 
 import { classNames } from "~/utils";
 
@@ -23,66 +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 (
+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
-        ref={ref}
-        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"}
+        display="flex"
+        flexDirection="column"
+        // Take full width minus the arrow icon width
+        __width="calc(100% - 30px)"
       >
         <Box
-          display="flex"
-          flexDirection="column"
-          // Take full width minus the arrow icon width
-          __width="calc(100% - 30px)"
+          as="span"
+          className={classNames(spanRecipe({ typed, size, disabled, error }))}
+          {...getLabelProps({ htmlFor: id })}
         >
-          <Box
-            as="span"
-            className={classNames(spanRecipe({ typed, size, disabled, error }))}
-            {...getLabelProps({ htmlFor: id })}
-          >
-            {label}
-          </Box>
-          {children}
+          {label}
         </Box>
-
-        <ArrowDownIcon
-          className={classNames(
-            toggleIconStyle,
-            sprinkles({ cursor: "pointer" })
-          )}
-          size={size}
-        />
+        {children}
       </Box>
-    );
-  }
-);
+
+      <ArrowDownIcon
+        className={classNames(
+          toggleIconStyle,
+          sprinkles({ cursor: "pointer" })
+        )}
+        size={size}
+      />
+    </Box>
+  );
+};
 
 SelectWrapper.displayName = "SelectWrapper";

From 0b91b1770b262f9efb8e96a85fc7a410100efbc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Wed, 22 Jan 2025 01:10:39 +0100
Subject: [PATCH 16/18] Add debugging to hooks

---
 src/components/Combobox/Common/useCombobox.tsx       | 2 ++
 src/components/Multiselect/Common/useMultiselect.tsx | 3 +++
 src/components/Select/useSelect.tsx                  | 4 ++++
 3 files changed, 9 insertions(+)

diff --git a/src/components/Combobox/Common/useCombobox.tsx b/src/components/Combobox/Common/useCombobox.tsx
index 73c6743c..a35012fe 100644
--- a/src/components/Combobox/Common/useCombobox.tsx
+++ b/src/components/Combobox/Common/useCombobox.tsx
@@ -68,6 +68,8 @@ export const useCombobox = <T extends Option, V extends string | Option>({
     onHighlightedIndexChange,
     isItemDisabled: (item) => item?.disabled ?? false,
     onStateChange: ({ inputValue: newInputValue, type }) => {
+      // eslint-disable-next-line no-console
+      console.log("Debug useCombobox state change", type, newInputValue);
       switch (type) {
         case useDownshiftCombobox.stateChangeTypes.InputChange:
           onInputValueChange?.(newInputValue ?? "");
diff --git a/src/components/Multiselect/Common/useMultiselect.tsx b/src/components/Multiselect/Common/useMultiselect.tsx
index 303e31c8..e237f8ec 100644
--- a/src/components/Multiselect/Common/useMultiselect.tsx
+++ b/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:
diff --git a/src/components/Select/useSelect.tsx b/src/components/Select/useSelect.tsx
index c177d058..877580df 100644
--- a/src/components/Select/useSelect.tsx
+++ b/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

From 9929153ca3e9afa06ce3cf4fcecc3ad73c6900b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Wed, 22 Jan 2025 10:12:29 +0100
Subject: [PATCH 17/18] Fix debug combobox

---
 src/components/Combobox/Common/useCombobox.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/Combobox/Common/useCombobox.tsx b/src/components/Combobox/Common/useCombobox.tsx
index a35012fe..a3e2cbed 100644
--- a/src/components/Combobox/Common/useCombobox.tsx
+++ b/src/components/Combobox/Common/useCombobox.tsx
@@ -2,6 +2,7 @@ import {
   GetPropsCommonOptions,
   useCombobox as useDownshiftCombobox,
   UseComboboxGetInputPropsOptions,
+  UseSelectStateChangeTypes,
 } from "downshift";
 import { FocusEvent, useState } from "react";
 
@@ -67,9 +68,22 @@ 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, newInputValue);
+      console.log(
+        "Debug useCombobox state change type",
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        UseSelectStateChangeTypes[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 ?? "");

From a257bcec8bab33af857649fdc1f72f749e80e84b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Wed, 22 Jan 2025 10:33:26 +0100
Subject: [PATCH 18/18] Fix debug combobox

---
 src/components/Combobox/Common/useCombobox.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/Combobox/Common/useCombobox.tsx b/src/components/Combobox/Common/useCombobox.tsx
index a3e2cbed..f40e1a3e 100644
--- a/src/components/Combobox/Common/useCombobox.tsx
+++ b/src/components/Combobox/Common/useCombobox.tsx
@@ -2,7 +2,6 @@ import {
   GetPropsCommonOptions,
   useCombobox as useDownshiftCombobox,
   UseComboboxGetInputPropsOptions,
-  UseSelectStateChangeTypes,
 } from "downshift";
 import { FocusEvent, useState } from "react";
 
@@ -70,13 +69,7 @@ export const useCombobox = <T extends Option, V extends string | Option>({
     isItemDisabled: (item) => item?.disabled ?? false,
     onStateChange: ({ inputValue: newInputValue, type, selectedItem }) => {
       // eslint-disable-next-line no-console
-      console.log(
-        "Debug useCombobox state change type",
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        UseSelectStateChangeTypes[type],
-        type
-      );
+      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
@@ -96,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