fix: do not swallow dom props (#23)

* fix: do not swallow dom props

* memoize reposition callback

Author: frontendphil

src/Stick.js

@@ -42,6 +42,7 @@ function Stick({
   autoFlipHorizontally,
   autoFlipVertically,
   onClickOutside,
+  ...rest
 }: PropsT) {
   const [width, setWidth] = useState(0)
   const [containerNestingKeyExtension] = useState(() => uniqueId())
@@ -125,14 +126,27 @@ function Stick({
     getModifiers({ position: resolvedPosition, align: resolvedAlign })
   )
 
+  const handleReposition = useCallback(() => {
+    if (nodeRef.current && anchorRef.current) {
+      checkAlignment(nodeRef.current, anchorRef.current)
+    }
+  }, [checkAlignment])
+
   if (!node) {
-    return children
+    const Component = component || 'div'
+
+    return (
+      <StickContext.Provider value={nestingKey}>
+        <Component {...rest}>{children}</Component>
+      </StickContext.Provider>
+    )
   }
 
   if (inline) {
     return (
       <StickContext.Provider value={nestingKey}>
         <StickInline
+          {...rest}
           position={resolvedPosition}
           align={resolvedAlign}
           node={
@@ -162,6 +176,7 @@ function Stick({
   return (
     <StickContext.Provider value={nestingKey}>
       <StickPortal
+        {...rest}
         updateOnAnimationFrame={!!updateOnAnimationFrame}
         transportTo={transportTo}
         component={component}
@@ -188,11 +203,7 @@ function Stick({
         style={resolvedStyle}
         nestingKey={nestingKey}
         containerRef={containerRef}
-        onReposition={() => {
-          if (nodeRef.current && anchorRef.current) {
-            checkAlignment(nodeRef.current, anchorRef.current)
-          }
-        }}
+        onReposition={handleReposition}
       >
         {children}
       </StickPortal>

src/StickInline.js

@@ -19,10 +19,16 @@ function StickInline({
   component,
   containerRef,
   nestingKey,
+  ...rest
 }: PropsT) {
   const Component = component || 'div'
   return (
-    <Component {...style} ref={containerRef} data-sticknestingkey={nestingKey}>
+    <Component
+      {...style}
+      {...rest}
+      ref={containerRef}
+      data-sticknestingkey={nestingKey}
+    >
       {children}
       {node && <div {...style('node')}>{node}</div>}
     </Component>

src/StickPortal.js

@@ -77,6 +77,7 @@ function StickPortal(
   return (
     <Component
       {...style}
+      {...rest}
       ref={node => {
         if (typeof ref === 'function') {
           ref(node)