fix: minor fixes for Tooltip & Popover

Author: gregberge

docs/components/Popover.mdx

@@ -43,7 +43,23 @@ Add a `<Popover />` in a component and it will automatically be displayed. Popov
   of={PropDesc({
     children: PropDesc.node,
     onHide: PropDesc.func,
-    placement: PropDesc.oneOf(['top', 'right', 'bottom', 'left']),
+    placement: PropDesc.oneOf([
+      'auto',
+      'auto-start',
+      'auto-end',
+      'top',
+      'top-start',
+      'top-end',
+      'right',
+      'right-start',
+      'right-end',
+      'bottom',
+      'bottom-start',
+      'bottom-end',
+      'left',
+      'left-start',
+      'left-end',
+    ]).defaultTo('auto'),
     visible: PropDesc.bool,
     hideOnClickOutside: PropDesc.bool.defaultTo(true),
     ...getSystemPropDesc(Popover),

docs/components/Tooltip.mdx

@@ -32,7 +32,23 @@ Add a `<Tooltip />` in a component and it will automatically be displayed. It is
 <PropsTable
   of={PropDesc({
     children: PropDesc.node,
-    placement: PropDesc.oneOf(['top', 'right', 'bottom', 'left']),
+    placement: PropDesc.oneOf([
+      'auto',
+      'auto-start',
+      'auto-end',
+      'top',
+      'top-start',
+      'top-end',
+      'right',
+      'right-start',
+      'right-end',
+      'bottom',
+      'bottom-start',
+      'bottom-end',
+      'left',
+      'left-start',
+      'left-end',
+    ]).defaultTo('auto'),
     ...getSystemPropDesc(Tooltip),
   })}
 />

packages/shared/core/Popover.js

@@ -4,7 +4,7 @@ import { css } from './styled-engine'
 import createComponent from './createComponent'
 import Portal from './Portal'
 import useRandomId from './hooks/useRandomId'
-import usePopper from './hooks/usePopper'
+import usePopper, { placements } from './hooks/usePopper'
 import useSetAttribute from './hooks/useSetAttribute'
 import useAsyncRef from './hooks/useAsyncRef'
 import useClickOutside from './hooks/useClickOutside'
@@ -14,15 +14,15 @@ function PopoverComponent({
   children,
   visible,
   id: idProp,
-  placement = 'top',
-  forwardedRef,
-  as: As = 'div',
+  placement = 'auto',
+  ref,
+  Component,
   hideOnClickOutside = true,
   onHide,
   ...props
 }) {
   const parentRef = useRef()
-  const [popoverRef, handlePopoverRef] = useAsyncRef(undefined, forwardedRef)
+  const [popoverRef, handlePopoverRef] = useAsyncRef(undefined, ref)
   const randomId = useRandomId('tooltip')
   const id = idProp || randomId
 
@@ -38,23 +38,24 @@ function PopoverComponent({
     <>
       <ParentElement ref={parentRef} />
       <Portal>
-        <As
+        <Component
           ref={handlePopoverRef}
           id={id}
           aria-hidden={!visible}
           role="group"
           {...props}
         >
           {children}
-        </As>
+        </Component>
       </Portal>
     </>
   )
 }
 
 const Popover = createComponent(() => ({
   name: 'popover',
-  InnerComponent: PopoverComponent,
+  render: PopoverComponent,
+  defaultComponent: 'div',
   style: () => css`
     &[aria-hidden='true'] {
       pointer-events: none;
@@ -64,7 +65,7 @@ const Popover = createComponent(() => ({
   propTypes: {
     children: PropTypes.node,
     onHide: PropTypes.func,
-    placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    placement: PropTypes.oneOf(placements),
     visible: PropTypes.bool,
   },
 }))

packages/shared/core/Tooltip.js

@@ -5,7 +5,7 @@ import { css } from './styled-engine'
 import createComponent from './createComponent'
 import Portal from './Portal'
 import useRandomId from './hooks/useRandomId'
-import usePopper from './hooks/usePopper'
+import usePopper, { placements } from './hooks/usePopper'
 import useAsyncRef from './hooks/useAsyncRef'
 import useEventListener from './hooks/useEventListener'
 import useSetAttribute from './hooks/useSetAttribute'
@@ -15,13 +15,13 @@ function TooltipComponent({
   children,
   id: idProp,
   placement = 'top',
-  forwardedRef,
-  as: As = 'div',
+  ref,
+  Component,
   ...props
 }) {
   const parentRef = useRef()
   const [visible, setVisible] = useState(false)
-  const [tooltipRef, handleTooltipRef] = useAsyncRef(undefined, forwardedRef)
+  const [tooltipRef, handleTooltipRef] = useAsyncRef(undefined, ref)
   const randomId = useRandomId('tooltip')
   const id = idProp || randomId
 
@@ -39,24 +39,24 @@ function TooltipComponent({
     <>
       <ParentElement ref={parentRef} />
       <Portal>
-        <As
+        <Component
           ref={handleTooltipRef}
           id={id}
           aria-hidden={!visible}
           role="tooltip"
           {...props}
         >
           {children}
-        </As>
+        </Component>
       </Portal>
     </>
   )
 }
 
 const Tooltip = createComponent(() => ({
   name: 'tooltip',
-  defaultComponent: null,
-  InnerComponent: TooltipComponent,
+  defaultComponent: 'div',
+  render: TooltipComponent,
   style: p => css`
     &[aria-hidden='true'] {
       pointer-events: none;
@@ -73,7 +73,7 @@ const Tooltip = createComponent(() => ({
   `,
   propTypes: {
     children: PropTypes.node,
-    placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    placement: PropTypes.oneOf(placements),
   },
 }))
 

packages/shared/core/createComponent.js

@@ -39,22 +39,17 @@ function createComponent(getConfig) {
   const baseClassName = `sui-${name}`
   const InnerComponent =
     InnerComponentFromConfig ||
-    class Component extends React.Component {
-      render() {
-        const { className, as, forwardedRef, ...props } = this.props
-        const Component = as || defaultComponent
+    function Component({ className, as, forwardedRef, ...props }) {
+      const Component = as || defaultComponent
 
-        const renderProps = {
-          ref: forwardedRef,
-          Component,
-          className: className
-            ? `${baseClassName} ${className}`
-            : baseClassName,
-          ...omit(props, omittedProps),
-        }
-
-        return render(renderProps)
+      const renderProps = {
+        ref: forwardedRef,
+        Component,
+        className: className ? `${baseClassName} ${className}` : baseClassName,
+        ...omit(props, omittedProps),
       }
+
+      return render(renderProps)
     }
 
   InnerComponent.displayName = `sui-${name}`

packages/shared/core/hooks/usePopper.js

@@ -4,7 +4,7 @@ import PopperJs from 'popper.js'
 export default function usePopper(
   containerRef,
   elementRef,
-  { placement = 'top' } = {},
+  { placement = 'auto' } = {},
 ) {
   useEffect(() => {
     const container = containerRef.current
@@ -16,3 +16,21 @@ export default function usePopper(
     return () => popper.destroy()
   }, [containerRef, elementRef, placement])
 }
+
+export const placements = [
+  'auto',
+  'auto-start',
+  'auto-end',
+  'top',
+  'top-start',
+  'top-end',
+  'right',
+  'right-start',
+  'right-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'left',
+  'left-start',
+  'left-end',
+]