message: fix(fuselage-hooks): Fix `usePosition`
diff: -import type { RefObject } from 'react';
  -import { useEffect, useRef } from 'react';
  +import type { AllHTMLAttributes, RefObject } from 'react';
  +import { useState, useEffect, useRef } from 'react';
  -import { useDebouncedState } from './useDebouncedState';
  +import { useDebouncedCallback } from './useDebouncedCallback';
  import { useMutableCallback } from './useMutableCallback';
  export type Positions = 'top' | 'left' | 'bottom' | 'right';
  @@ -51,26 +51,8 @@ type VariantBoundaries = {
  hm: number;
  };
  -type PositionStyle = {
  - top: string;
  - left: string;
  - position?: 'fixed';
  - ZIndex: '9999';
  - transition: 'none !important';
  - bottom?: '0px';
  - overflowY?: 'auto';
  -};
  -
  -type PositionEmptyResult = {
  - visibility: 'hidden';
  - top: '-9999px';
  - left: '-9999px';
  - position: 'fixed';
  - overflowY?: 'initial';
  -};
  -
  type PositionResult = {
  - style: PositionStyle | PositionEmptyResult;
  + style: AllHTMLAttributes<HTMLElement>['style'];
  placement?: Placements;
  };
  @@ -101,8 +83,6 @@ const emptyStyle: PositionResult = {
  style: {
  position: 'fixed',
  visibility: 'hidden',
  - top: '-9999px',
  - left: '-9999px',
  },
  };
  @@ -247,7 +227,7 @@ export const getPositionStyle = ({
  bottom: `${margin}px`,
  overflowY: 'auto',
  }),
  - ZIndex: '9999',
  + ...({ zIndex: '9999' } as any),
  },
  placement: `${PlacementMap[placementAttempt]}-${
  PlacementMap[variantsAttempts[0]]
  @@ -311,10 +291,18 @@ export const usePosition = <T extends Element, R extends Element>(
  } = options;
  const container = useRef(containerElement);
  - const [style, setStyle] = useDebouncedState<PositionResult>(emptyStyle, 10);
  + const [style, setStyle] = useState<PositionResult>(emptyStyle);
  +
  + const callback = useDebouncedCallback(
  + useMutableCallback(() => {
  + const clone = target.current.cloneNode(true) as HTMLElement;
  +
  + clone.style.bottom = '';
  + clone.id = 'clone';
  + target.current.parentElement.appendChild(clone);
  + const boundaries = clone.getBoundingClientRect();
  + target.current.parentElement.removeChild(clone);
  - const callback = useMutableCallback(() => {
  - const boundaries = target.current.getBoundingClientRect();
  const targetBoundaries = getTargetBoundaries({
  referenceBox: reference.current.getBoundingClientRect(),
  target: boundaries,
  @@ -324,6 +312,7 @@ export const usePosition = <T extends Element, R extends Element>(
  referenceBox: reference.current.getBoundingClientRect(),
  target: boundaries,
  });
  +
  setStyle(
  getPositionStyle({
  placement,
  @@ -334,7 +323,9 @@ export const usePosition = <T extends Element, R extends Element>(
  margin,
  })
  );
  - });
  + }),
  + 10
  + );
  useBoundingClientRect(target, watch, callback);
  useBoundingClientRect(reference, watch, callback);
  