refactor(types): Type definitions for Position and PositionAnimated (#…

…461)

packages/fuselage/src/components/Box/Position/Position.d.ts

@@ -0,0 +1,10 @@
+import { Placements, PositionOptions } from '@rocket.chat/fuselage-hooks';
+import { ComponentProps, FC, RefObject } from 'react';
+
+type PositionProps = {
+  anchor?: RefObject<Element>;
+  placement?: Placements;
+  margin?: PositionOptions['margin'];
+} & ComponentProps<typeof Box>;
+
+declare const Position: FC<PositionProps>;

packages/fuselage/src/components/Box/Position/index.js → packages/fuselage/src/components/Box/Position/Position.js

@@ -1,8 +1,6 @@
 import { usePosition } from '@rocket.chat/fuselage-hooks';
-import React, { useRef, useMemo, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-
-import AnimatedVisibility from '../AnimatedVisibility';
+import { useRef, useMemo, useEffect, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
 
 const Position = ({
   anchor,
@@ -33,8 +31,8 @@ const Position = ({
     portalContainer,
   ]);
 
-  return ReactDOM.createPortal(
-    React.cloneElement(children, {
+  return createPortal(
+    cloneElement(children, {
       ref: target,
       style,
       ...props,
@@ -44,19 +42,4 @@ const Position = ({
   );
 };
 
-export const PositionAnimated = ({
-  width,
-  margin,
-  placement,
-  visible,
-  children,
-  ...props
-}) => (
-  <AnimatedVisibility visibility={visible}>
-    <Position margin={margin} placement={placement} {...props}>
-      {children}
-    </Position>
-  </AnimatedVisibility>
-);
-
 export default Position;

packages/fuselage/src/components/Box/Position/PositionAnimated.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+
+import Position from '.';
+
+type PositionAnimatedProps = {
+  visibility?: boolean;
+} & ComponentProps<typeof Position>;
+
+declare const PositionAnimated: FC<PositionAnimatedProps>;

packages/fuselage/src/components/Box/Position/PositionAnimated.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Position from '.';
+import AnimatedVisibility from '../AnimatedVisibility';
+
+const PositionAnimated = ({ width, visible, children, ...props }) => (
+  <AnimatedVisibility visibility={visible}>
+    <Position {...props}>{children}</Position>
+  </AnimatedVisibility>
+);
+
+export default PositionAnimated;

packages/fuselage/src/components/Box/Position/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Position';
+
+export { default as PositionAnimated } from './PositionAnimated';