|
|
|
@ -1,4 +1,4 @@ |
|
|
|
import { autoUpdate, flip, size, useFloating } from '@floating-ui/react'; |
|
|
|
import { autoUpdate, autoPlacement, size, useFloating } from '@floating-ui/react'; |
|
|
|
import { useMemo, useRef, useState } from 'react'; |
|
|
|
import { useMemo, useRef, useState } from 'react'; |
|
|
|
|
|
|
|
|
|
|
|
import { measureText } from '../../utils'; |
|
|
|
import { measureText } from '../../utils'; |
|
|
|
@ -31,10 +31,11 @@ export const useComboboxFloat = (items: Array<ComboboxOption<string | number>>, |
|
|
|
|
|
|
|
|
|
|
|
// the order of middleware is important!
|
|
|
|
// the order of middleware is important!
|
|
|
|
const middleware = [ |
|
|
|
const middleware = [ |
|
|
|
flip({ |
|
|
|
autoPlacement({ |
|
|
|
// see https://floating-ui.com/docs/flip#combining-with-shift
|
|
|
|
// see https://floating-ui.com/docs/autoplacement
|
|
|
|
crossAxis: true, |
|
|
|
allowedPlacements: ['bottom-start', 'bottom-end', 'top-start', 'top-end'], |
|
|
|
boundary: document.body, |
|
|
|
boundary: document.body, |
|
|
|
|
|
|
|
crossAxis: true, |
|
|
|
}), |
|
|
|
}), |
|
|
|
size({ |
|
|
|
size({ |
|
|
|
apply({ availableWidth, availableHeight }) { |
|
|
|
apply({ availableWidth, availableHeight }) { |
|
|
|
|