@loadsmart/loadsmart-ui 6.0.14 → 6.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/loadsmart-ui",
-	"version": "6.0.14",
+	"version": "6.0.15",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [
@@ -78,10 +78,10 @@
 		"@types/lodash.range": "^3.2.6",
 		"@types/mdx": "^2.0.2",
 		"@types/node": "^18.11.18",
-		"@types/react": "^17.0.5",
-		"@types/react-dom": "^17.0.3",
+		"@types/react": "^17.0.59",
+		"@types/react-dom": "^17.0.20",
 		"@types/react-test-renderer": "^17.0.1",
-		"@types/styled-components": "^5.1.9",
+		"@types/styled-components": "^5.1.26",
 		"@typescript-eslint/eslint-plugin": "^4.22.1",
 		"@typescript-eslint/parser": "^4.22.1",
 		"@zerollup/ts-transform-paths": "^1.7.18",
@@ -149,7 +149,7 @@
 		"styled-components": ">=5.3.0"
 	},
 	"dependencies": {
-		"@floating-ui/react-dom": "^1.3.0",
+		"@floating-ui/react-dom": "^2.0.0",
 		"@loadsmart/utils-function": "0.3.1",
 		"@loadsmart/utils-object": "0.3.1",
 		"@loadsmart/utils-string": "0.3.1",

package/src/components/Dropdown/Dropdown.test.tsx

@@ -10,7 +10,7 @@ const { Playground, WithSections, Extended } = composeStories(stories)
 
 describe('Dropdown', () => {
   describe('Generic', () => {
-    const setup = (overrides?: stories.DropdownStoryProps) =>
+    const setup = (overrides?: Partial<stories.DropdownStoryProps>) =>
       renderer(<Playground {...overrides} />).render()
 
     it('starts collapsed', () => {

package/src/components/Dropdown/DropdownMenu.tsx

@@ -32,6 +32,7 @@ const StyledPopover = styled(Popover.Floating)`
   border: 1px solid ${token('dropdown-border-color')};
   border-radius: ${token('dropdown-border-radius')};
   box-shadow: ${token('dropdown-shadow')};
+  width: max-content;
 `
 
 const StyledSpan = styled.span`
@@ -154,6 +155,8 @@ const GenericDropdownMenuWrapper = styled.div`
 const DropdownMenuWrapper = styled(GenericDropdownMenuWrapper)`
   max-height: 240px;
   overflow-y: auto;
+  max-width: 100%;
+  width: 100%;
 
   ${DropdownItemWrapper} + ${DropdownItemWrapper},
   ${DropdownSectionHeader} + ${DropdownItemWrapper} {

package/src/components/Popover/Popover.test.tsx

@@ -4,8 +4,7 @@ import { composeStories } from '@storybook/testing-react'
 import * as stories from './Popover.stories'
 import generator from '../../tests/generator'
 import renderer, { screen } from '../../tests/renderer'
-
-import type { PopoverProps } from './Popover'
+import type { PopoverProps } from './Popover.types'
 
 const { Playground } = composeStories(stories)
 

package/src/components/Popover/Popover.tsx

@@ -1,7 +1,6 @@
-import React, { useMemo } from 'react'
-import { useFloating, autoUpdate } from '@floating-ui/react-dom'
-import { offset, flip, shift, arrow } from '@floating-ui/core'
-import type { Placement, MiddlewareState } from '@floating-ui/core'
+import React, { CSSProperties, useMemo, useRef } from 'react'
+import { useFloating, offset, flip, shift, arrow, autoUpdate } from '@floating-ui/react-dom'
+import type { Placement } from '@floating-ui/react-dom'
 
 import type {
   PopoverAlign,
@@ -25,75 +24,50 @@ export function usePopover(): UsePopoverReturn {
 }
 
 function Popover(props: PopoverProps): JSX.Element {
-  const arrowRef = React.useRef<HTMLElement | null>(null)
+  const arrowRef = useRef<HTMLElement | null>(null)
 
   const { position = 'bottom', align = 'start', strategy = 'fixed' } = props
 
-  const desiredPlacement = `${position}${align === 'center' ? '' : `-${align}`}` as Placement
+  const desiredPlacement: Placement = `${position}${
+    align === 'center' ? '' : `-${align}`
+  }` as Placement
 
-  const result = useFloating({
+  const floating = useFloating({
     placement: desiredPlacement,
     strategy,
-    middleware: [
-      offset(10),
-      flip(),
-      shift(),
-      {
-        name: 'arrow',
-        fn(args: MiddlewareState) {
-          if (arrowRef.current) {
-            return arrow({ element: arrowRef.current, padding: 8 }).fn(args)
-          }
-
-          return {}
-        },
-      },
-    ],
+    middleware: [offset(10), flip(), shift(), arrow({ element: arrowRef, padding: 8 })],
     // TODO: FloatingUI docs states that `autoUpdate` is expensive.
     // This should be properly investidated since it's the way to
     // update fixed positions after scrolling.
     whileElementsMounted: autoUpdate,
   })
 
-  const registerArrow = React.useCallback(
-    (node: HTMLElement) => {
-      arrowRef.current = node
-      result.update()
-    },
-    [result]
-  )
-
-  const [resultPosition = position, resultAlign = align] = result.placement.split('-') as [
+  const [resultPosition = position, resultAlign = align] = floating.placement.split('-') as [
     PopoverPosition,
     PopoverAlign
   ]
 
-  const value = useMemo(
+  const value = useMemo<UsePopoverReturn>(
     () => ({
       strategy,
       register: {
-        reference: result.refs.setReference,
-        floating: result.refs.setFloating,
-        arrow: registerArrow,
+        setReference: floating.refs.setReference,
+        setFloating: floating.refs.setFloating,
+        setArrow: arrowRef,
       },
       result: {
-        floating: {
-          top: result.y ?? 0,
-          left: result.x ?? 0,
-        },
-        arrow: { top: result.middlewareData.arrow?.y, left: result.middlewareData.arrow?.x },
+        floatingStyles: floating.floatingStyles,
+        arrow: { top: floating.middlewareData.arrow?.y, left: floating.middlewareData.arrow?.x },
         position: resultPosition,
         align: resultAlign,
       },
     }),
     [
-      registerArrow,
-      result.refs.setFloating,
-      result.middlewareData.arrow?.x,
-      result.middlewareData.arrow?.y,
-      result.refs.setReference,
-      result.x,
-      result.y,
+      floating.refs.setFloating,
+      floating.middlewareData.arrow?.x,
+      floating.middlewareData.arrow?.y,
+      floating.refs.setReference,
+      floating.floatingStyles,
       resultAlign,
       resultPosition,
       strategy,
@@ -104,41 +78,24 @@ function Popover(props: PopoverProps): JSX.Element {
 }
 
 function PopoverReference({ children, ...others }: PopoverReferenceProps): JSX.Element {
-  const ref = React.useRef<HTMLDivElement | null>(null)
   const { register } = usePopover()
 
-  React.useLayoutEffect(() => {
-    if (ref.current) {
-      register.reference(ref.current)
-    }
-  }, [register])
-
   return (
-    <div ref={ref} {...others}>
+    <div ref={register.setReference} {...others}>
       {children}
     </div>
   )
 }
 
 function PopoverFloating({ children, style, ...others }: PopoverFloatingProps): JSX.Element {
-  const { register, result, strategy } = usePopover()
-
-  const ref = React.useRef<HTMLDivElement | null>(null)
-
-  React.useLayoutEffect(() => {
-    if (ref.current) {
-      register.floating(ref.current)
-    }
-  }, [register])
+  const { register, result } = usePopover()
 
   return (
     <div
-      ref={ref}
+      ref={register.setFloating}
       {...others}
       style={{
-        position: strategy,
-        top: result.floating.top,
-        left: result.floating.left,
+        ...result.floatingStyles,
         ...style,
       }}
     >

package/src/components/Popover/Popover.types.ts

@@ -1,16 +1,14 @@
-import type { HTMLAttributes, MutableRefObject, PropsWithChildren } from 'react'
+import type { UseFloatingReturn } from '@floating-ui/react-dom'
+import type { CSSProperties, HTMLAttributes, MutableRefObject, PropsWithChildren } from 'react'
 
 export interface UsePopoverReturn {
   register: {
-    reference: (el: HTMLElement) => void
-    floating: (el: HTMLElement) => void
-    arrow: (el: HTMLElement) => void
+    setReference: UseFloatingReturn['refs']['setReference']
+    setFloating: UseFloatingReturn['refs']['setFloating']
+    setArrow: MutableRefObject<Element | null>
   }
   result: {
-    floating: {
-      top: number
-      left: number
-    }
+    floatingStyles: CSSProperties
     arrow: {
       top: number | undefined
       left: number | undefined

package/src/components/Select/SelectTrigger.tsx

@@ -49,16 +49,9 @@ const SelectTrigger = forwardRef<HTMLInputElement, SelectTriggerProps>(function
 ) {
   const { className, ...others } = props
   const { disabled, expanded, toggle } = useContext(DropdownContext)
-  const triggerRef = React.useRef<HTMLElement | null>(null)
 
   const { register } = usePopover()
 
-  React.useEffect(() => {
-    if (triggerRef.current) {
-      register.reference(triggerRef.current)
-    }
-  }, [register])
-
   function handleClick() {
     if (!expanded) {
       toggle()
@@ -75,7 +68,7 @@ const SelectTrigger = forwardRef<HTMLInputElement, SelectTriggerProps>(function
             ref(node)
           }
 
-          triggerRef.current = node
+          register.setReference(node)
         }}
         type="search"
         disabled={disabled}

package/src/components/Tooltip/Tooltip.tsx

@@ -129,17 +129,10 @@ const StyledArrow = styled.span<ArrowProps>`
 
 function Arrow() {
   const { register, result } = usePopover()
-  const ref = React.useRef<HTMLDivElement | null>(null)
-
-  React.useLayoutEffect(() => {
-    if (ref.current) {
-      register.arrow(ref.current)
-    }
-  }, [register])
 
   return (
     <StyledArrow
-      ref={ref}
+      ref={(element) => (register.setArrow.current = element)}
       position={result.position}
       top={result.arrow.top}
       left={result.arrow.left}