How to achieve floating ui size and hide functionality in ark ui select, combobox.

[raja-OX]

I want to floating ui functionality of size functionality fit to view port and hide functionality when reference is hidden. Is this possible in ark ui?

floating ui hide functionality.

const {refs, floatingStyles, middlewareData} = useFloating({
  middleware: [hide()],
});
 
return (
  <div
    ref={refs.setFloating}
    style={{
      ...floatingStyles,
      visibility: middlewareData.hide?.referenceHidden
        ? 'hidden'
        : 'visible',
    }}
  />
);

floating ui Size functionality.

const [maxHeight, setMaxHeight] = useState(null);
 
const {refs, floatingStyles} = useFloating({
  middleware: [
    size({
      apply({availableHeight}) {
        flushSync(() => setMaxHeight(availableHeight));
      },
    }),
  ],
});
 
return (
  <div
    ref={refs.setFloating}
    style={{...floatingStyles, maxHeight}}
  />
);

[segunadebayo]

We don't currently support the hide functionality (looking into it)

For the available height, please use the exposed css variable var(--available-height) as the value of maxHeight for the content.