fix: auto fallback possition and align (#37)

* fix: auto fallback position and align

* style: move inline style to file

src/components/pop-out/PopOut.css.ts

@@ -0,0 +1,19 @@
+import { style } from "@vanilla-extract/css";
+import { config } from "../../theme";
+
+export const PopOut = style({
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  zIndex: config.zIndex.Max,
+  ...style,
+});
+
+export const PopOutContainer = style({
+  display: "inline-block",
+  position: "fixed",
+  maxWidth: "100vw",
+  maxHeight: "100vh",
+});

src/components/pop-out/PopOut.stories.tsx

@@ -1,26 +1,27 @@
 import FocusTrap from "focus-trap-react";
 import React, { useState } from "react";
-import { ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { Text } from "../text";
 import { PopOut } from "./PopOut";
 import { Menu, MenuItem } from "../menu";
 import { Icon, Icons } from "../icon";
 import { IconButton } from "../icon-button";
 import { config } from "../../theme/config.css";
+import { Box } from "../box";
 
 export default {
   title: "PopOut",
   component: PopOut,
 } as ComponentMeta<typeof PopOut>;
 
-export const Interactive = () => {
+const Template: ComponentStory<typeof PopOut> = (args) => {
   const [open, setOpen] = useState(false);
 
   return (
-    <div style={{ height: "100vh" }}>
+    <Box justifyContent="Center" alignItems="Center" style={{ height: "100vh" }}>
       <PopOut
+        {...args}
         open={open}
-        align="Start"
         content={
           <FocusTrap
             focusTrapOptions={{
@@ -51,6 +52,8 @@ export const Interactive = () => {
           </IconButton>
         )}
       </PopOut>
-    </div>
+    </Box>
   );
 };
+
+export const Interactive = Template.bind({});

src/components/pop-out/PopOut.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import React, {
   ReactNode,
   RefCallback,
@@ -6,10 +7,10 @@ import React, {
   useLayoutEffect,
   useRef,
 } from "react";
-import { config } from "../../theme";
 import { as } from "../as";
 import { Portal } from "../portal";
 import { Align, getRelativeFixedPosition, Position } from "../util";
+import * as css from "./PopOut.css";
 
 export interface PopOutProps {
   open: boolean;
@@ -24,14 +25,14 @@ export const PopOut = as<"div", PopOutProps>(
   (
     {
       as: AsPopOut = "div",
+      className,
       open,
       position = "Bottom",
       align = "Center",
       offset = 10,
       alignOffset = 0,
       content,
       children,
-      style,
       ...props
     },
     ref
@@ -45,19 +46,18 @@ export const PopOut = as<"div", PopOutProps>(
       if (!anchor) return;
       if (!baseEl) return;
 
-      const css = getRelativeFixedPosition(
+      const pCSS = getRelativeFixedPosition(
         anchor.getBoundingClientRect(),
+        baseEl.getBoundingClientRect(),
         position,
         align,
         offset,
-        alignOffset,
-        baseEl.getBoundingClientRect()
+        alignOffset
       );
-      baseEl.style.top = css.top;
-      baseEl.style.bottom = css.bottom;
-      baseEl.style.left = css.left;
-      baseEl.style.right = css.right;
-      baseEl.style.transform = css.transform;
+      baseEl.style.top = pCSS.top ?? "unset";
+      baseEl.style.bottom = pCSS.bottom ?? "unset";
+      baseEl.style.left = pCSS.left ?? "unset";
+      baseEl.style.right = pCSS.right ?? "unset";
     }, [position, align, offset, alignOffset]);
 
     useEffect(() => {
@@ -80,28 +80,8 @@ export const PopOut = as<"div", PopOutProps>(
         {children(handleAnchorRef)}
         <Portal>
           {open && (
-            <AsPopOut
-              style={{
-                position: "fixed",
-                top: 0,
-                right: 0,
-                bottom: 0,
-                left: 0,
-                zIndex: config.zIndex.Max,
-                ...style,
-              }}
-              {...props}
-              ref={ref}
-            >
-              <div
-                ref={baseRef}
-                style={{
-                  display: "inline-block",
-                  position: "fixed",
-                  maxWidth: "100vw",
-                  maxHeight: "100vh",
-                }}
-              >
+            <AsPopOut className={classNames(css.PopOut, className)} {...props} ref={ref}>
+              <div ref={baseRef} className={css.PopOutContainer}>
                 {content}
               </div>
             </AsPopOut>

src/components/tooltip/Tooltip.css.ts

@@ -1,4 +1,4 @@
-import { ComplexStyleRule, keyframes } from "@vanilla-extract/css";
+import { ComplexStyleRule, keyframes, style } from "@vanilla-extract/css";
 import { recipe, RecipeVariants } from "@vanilla-extract/recipes";
 import { color } from "../../theme/color.css";
 import { config } from "../../theme/config.css";
@@ -53,3 +53,12 @@ export const Tooltip = recipe({
 });
 
 export type TooltipVariants = RecipeVariants<typeof Tooltip>;
+
+export const TooltipProvider = style({
+  display: "inline-block",
+  position: "fixed",
+  maxWidth: "100vw",
+  maxHeight: "100vh",
+  zIndex: config.zIndex.Max,
+  pointerEvents: "none",
+});

src/components/tooltip/Tooltip.stories.tsx

@@ -35,19 +35,207 @@ Surface.args = {
 };
 
 export const Interactive = () => (
-  <Box style={{ padding: "100px" }}>
+  <Box wrap="Wrap" gap="400" style={{ padding: "100px" }}>
+    <TooltipProvider
+      position="Top"
+      align="Start"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Top Start
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Top"
+      align="Center"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Top Center
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Top"
+      align="End"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Top End
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Right"
+      align="Start"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Right Start
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Right"
+      align="Center"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Right Center
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
     <TooltipProvider
       position="Right"
+      align="End"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Right End
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Bottom"
+      align="Start"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Bottom Start
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Bottom"
+      align="Center"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Bottom Center
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Bottom"
+      align="End"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Bottom End
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Left"
+      align="Start"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Left Start
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Left"
+      align="Center"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Left Center
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Left"
+      align="End"
       tooltip={
         <Tooltip>
           <Text truncate size="T300">
-            Tooltip is Long
+            Left End
           </Text>
         </Tooltip>
       }
     >
       {(ref) => (
-        <IconButton variant="Success" size="600" ref={ref}>
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
           <Icon src={Icons.Info} />
         </IconButton>
       )}