From d4cc17b9013dfd383ac68049335e7f766f8b1ef8 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 11 Oct 2019 19:28:32 +0200
Subject: [PATCH] perf: remove Box usages where it is redundant (#2023)

* perf: remove Box usages where it is redundant

* add changelog
---
 CHANGELOG.md                                  |  3 +++
 .../src/components/Attachment/Attachment.tsx  |  6 +----
 .../src/components/Popup/PopupContent.tsx     | 24 +++++--------------
 .../react/src/components/Tooltip/Tooltip.tsx  |  2 +-
 .../src/components/Tooltip/TooltipContent.tsx | 10 ++------
 5 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 17d70d8f39..5abb7a3fe4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Documentation
 - Fix 'RTL' and 'Theme it' in examples @miroslavstastny ([#2020](https://github.com/stardust-ui/react/pull/2020))
 
+### Performance
+- Remove redundant usages of `Box` component in `Attachment`, `Popup` and `Tooltip` @layershifter ([#2023](https://github.com/stardust-ui/react/pull/2023))
+
 <!--------------------------------[ v0.40.0 ]------------------------------- -->
 ## [v0.40.0](https://github.com/stardust-ui/react/tree/v0.40.0) (2019-10-09)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.39.0...v0.40.0)
diff --git a/packages/react/src/components/Attachment/Attachment.tsx b/packages/react/src/components/Attachment/Attachment.tsx
index b6412afa7c..73afadaa5a 100644
--- a/packages/react/src/components/Attachment/Attachment.tsx
+++ b/packages/react/src/components/Attachment/Attachment.tsx
@@ -14,7 +14,6 @@ import {
 import Icon, { IconProps } from '../Icon/Icon'
 import Button, { ButtonProps } from '../Button/Button'
 import Text, { TextProps } from '../Text/Text'
-import Box from '../Box/Box'
 import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces'
 
 export interface AttachmentProps extends UIComponentProps, ChildrenComponentProps {
@@ -114,10 +113,7 @@ class Attachment extends UIComponent<WithAsProp<AttachmentProps>> {
               className: Attachment.slotClassNames.action,
             },
           })}
-        {!_.isNil(progress) &&
-          Box.create('', {
-            defaultProps: { styles: styles.progress },
-          })}
+        {!_.isNil(progress) && <div className={classes.progress} />}
       </ElementType>
     )
   }
diff --git a/packages/react/src/components/Popup/PopupContent.tsx b/packages/react/src/components/Popup/PopupContent.tsx
index bffdf751fc..8352a5496d 100644
--- a/packages/react/src/components/Popup/PopupContent.tsx
+++ b/packages/react/src/components/Popup/PopupContent.tsx
@@ -4,7 +4,7 @@ import {
   AutoFocusZoneProps,
   AutoFocusZone,
 } from '@stardust-ui/react-bindings'
-import { Ref } from '@stardust-ui/react-component-ref'
+import cx from 'classnames'
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
@@ -25,7 +25,6 @@ import {
 import { Accessibility } from '@stardust-ui/accessibility'
 import { PopperChildrenProps } from '../../lib/positioner'
 import { WithAsProp, ComponentEventHandler, withSafeTypeForAs } from '../../types'
-import Box from '../Box/Box'
 
 export interface PopupContentSlotClassNames {
   content: string
@@ -59,7 +58,7 @@ export interface PopupContentProps
   pointing?: boolean
 
   /** A ref to a pointer element. */
-  pointerRef?: React.Ref<Element>
+  pointerRef?: React.Ref<HTMLDivElement>
 
   /** Controls whether or not focus trap should be applied, using boolean or FocusTrapZoneProps type value. */
   trapFocus?: boolean | FocusTrapZoneProps
@@ -114,21 +113,10 @@ class PopupContent extends UIComponent<WithAsProp<PopupContentProps>> {
 
     const popupContent = (
       <>
-        {pointing && (
-          <Ref innerRef={pointerRef}>
-            {Box.create({}, { defaultProps: { styles: styles.pointer } })}
-          </Ref>
-        )}
-        {Box.create(
-          {},
-          {
-            defaultProps: {
-              className: PopupContent.slotClassNames.content,
-              children: childrenExist(children) ? children : content,
-              styles: styles.content,
-            },
-          },
-        )}
+        {pointing && <div className={classes.pointer} ref={pointerRef} />}
+        <div className={cx(PopupContent.slotClassNames.content, classes.content)}>
+          {childrenExist(children) ? children : content}
+        </div>
       </>
     )
 
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx
index 2cd63f77fe..dc751dacd6 100644
--- a/packages/react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.tsx
@@ -142,7 +142,7 @@ export default class Tooltip extends AutoControlledComponent<TooltipProps, Toolt
 
   static create: ShorthandFactory<TooltipProps>
 
-  pointerTargetRef = React.createRef<HTMLElement>()
+  pointerTargetRef = React.createRef<HTMLDivElement>()
   triggerRef = React.createRef<HTMLElement>()
   contentRef = React.createRef<HTMLElement>()
   closeTimeoutId
diff --git a/packages/react/src/components/Tooltip/TooltipContent.tsx b/packages/react/src/components/Tooltip/TooltipContent.tsx
index 9ef0fb6d6e..3db735f2d4 100644
--- a/packages/react/src/components/Tooltip/TooltipContent.tsx
+++ b/packages/react/src/components/Tooltip/TooltipContent.tsx
@@ -1,4 +1,3 @@
-import { Ref } from '@stardust-ui/react-component-ref'
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
@@ -19,7 +18,6 @@ import { Accessibility } from '@stardust-ui/accessibility'
 
 import { PopperChildrenProps } from '../../lib/positioner'
 import { WithAsProp, withSafeTypeForAs } from '../../types'
-import Box from '../Box/Box'
 
 export interface TooltipContentProps
   extends UIComponentProps,
@@ -40,7 +38,7 @@ export interface TooltipContentProps
   pointing?: boolean
 
   /** A ref to a pointer element. */
-  pointerRef?: React.Ref<Element>
+  pointerRef?: React.Ref<HTMLDivElement>
 }
 
 class TooltipContent extends UIComponent<WithAsProp<TooltipContentProps>> {
@@ -72,11 +70,7 @@ class TooltipContent extends UIComponent<WithAsProp<TooltipContentProps>> {
         {...accessibility.attributes.root}
         {...unhandledProps}
       >
-        {open && pointing && (
-          <Ref innerRef={pointerRef}>
-            {Box.create({}, { defaultProps: { styles: styles.pointer } })}
-          </Ref>
-        )}
+        {open && pointing && <div className={classes.pointer} ref={pointerRef} />}
 
         <div className={classes.content}>{childrenExist(children) ? children : content}</div>
       </ElementType>