fix(deps): bump @floating-ui/react from 0.22.3 to 0.25.2 in /react (#467

)

* fix(deps): bump @floating-ui/react from 0.22.3 to 0.25.2 in /react

Bumps [@floating-ui/react](https://github.com/floating-ui/floating-ui/tree/HEAD/packages/react) from 0.22.3 to 0.25.2.
- [Release notes](https://github.com/floating-ui/floating-ui/releases)
- [Commits](https://github.com/floating-ui/floating-ui/commits/@floating-ui/[email protected]/packages/react)

---
updated-dependencies:
- dependency-name: "@floating-ui/react"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

* fix: changes in select popover due to floating-ui update

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Kar Rui Lau <[email protected]>

react/package.json

@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@chakra-ui/utils": "^2.0.12",
-    "@floating-ui/react": "^0.22.2",
+    "@floating-ui/react": "^0.25.2",
     "@fontsource/ibm-plex-mono": "^5.0.3",
     "country-flag-icons": "^1.4.19",
     "date-fns": "^2.28.0",

react/src/SingleSelect/components/SelectPopover/SelectPopover.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import { PropsWithChildren, useLayoutEffect, useMemo, useRef } from 'react'
 import { Box, useMergeRefs, useOutsideClick } from '@chakra-ui/react'
 import {
   autoUpdate,
@@ -20,7 +20,13 @@ export const SelectPopoverProvider = ({
 
   const wrapperRef = useRef<HTMLDivElement | null>(null)
 
-  const { x, y, refs, reference, floating, strategy, update } = useFloating({
+  const {
+    x,
+    y,
+    refs: { reference, floating, setFloating, setReference },
+    strategy,
+    update,
+  } = useFloating({
     placement: 'bottom-start',
     strategy: 'absolute',
     open: isOpen,
@@ -40,7 +46,7 @@ export const SelectPopoverProvider = ({
     ],
   })
 
-  const mergedReferenceRefs = useMergeRefs(wrapperRef, reference)
+  const mergedReferenceRefs = useMergeRefs(wrapperRef, setReference)
 
   const floatingStyles = useMemo(
     () => ({
@@ -51,11 +57,11 @@ export const SelectPopoverProvider = ({
     [strategy, x, y],
   )
 
-  useEffect(() => {
-    if (isOpen && refs.reference.current && refs.floating.current) {
-      return autoUpdate(refs.reference.current, refs.floating.current, update)
+  useLayoutEffect(() => {
+    if (isOpen && reference.current && floating.current) {
+      return autoUpdate(reference.current, floating.current, update)
     }
-  }, [isOpen, update, refs.floating, refs.reference])
+  }, [floating, isOpen, reference, update])
 
   useOutsideClick({
     ref: wrapperRef,
@@ -65,7 +71,7 @@ export const SelectPopoverProvider = ({
   return (
     <SelectPopoverContext.Provider
       value={{
-        floatingRef: floating,
+        floatingRef: setFloating,
         floatingStyles,
       }}
     >

react/src/SingleSelect/components/SelectPopover/SelectPopoverContext.tsx

@@ -2,7 +2,7 @@ import { createContext, useContext } from 'react'
 import { Strategy, UseFloatingReturn } from '@floating-ui/react'
 
 interface SelectPopoverContextReturn {
-  floatingRef: UseFloatingReturn['floating']
+  floatingRef: UseFloatingReturn['refs']['setFloating']
   floatingStyles: {
     position: Strategy
     top: number