@mirror-physics/fractal-ui 0.2.0-next.57 → 0.2.0-next.58

package/dist/index.cjs

@@ -1158,6 +1158,7 @@ function Dropdown({
   triggerLabel = "Options",
   direction = "down",
   align = "left",
+  triggerOrientation = "horizontal",
   triggerContent,
   label,
   iconOnly = false,
@@ -1181,41 +1182,59 @@ function Dropdown({
   const selectableItems = visibleItems.filter((i) => i.kind !== "header");
   const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? selectableItems[0] ?? visibleItems[0];
   const isUp = direction === "up";
-  const ChevronIcon = isUp ? import_fractal_icons7.ChevronUp : import_fractal_icons7.ChevronDown;
+  const isHorizontalDirection = direction === "left" || direction === "right";
+  const ChevronIcon = direction === "up" ? import_fractal_icons7.ChevronUp : direction === "left" ? import_fractal_icons7.ChevronLeft : direction === "right" ? import_fractal_icons7.ChevronRight : import_fractal_icons7.ChevronDown;
   React9.useLayoutEffect(() => {
     if (!open || !triggerRef.current || !panelRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const panelRect = panelRef.current.getBoundingClientRect();
     const vw = window.innerWidth;
     const vh = window.innerHeight;
-    const spaceBelow = vh - triggerRect.bottom - MARGIN;
-    const spaceAbove = triggerRect.top - MARGIN;
-    let placeAbove = isUp;
-    if (placeAbove && panelRect.height > spaceAbove && spaceBelow > spaceAbove) {
-      placeAbove = false;
-    } else if (!placeAbove && panelRect.height > spaceBelow && spaceAbove > spaceBelow) {
-      placeAbove = true;
-    }
-    const top = placeAbove ? -(panelRect.height + MARGIN) : triggerRect.height + MARGIN;
+    let top;
     let left;
     let right;
-    if (align === "right") {
-      right = 0;
-      const panelLeft = triggerRect.right - panelRect.width;
-      if (panelLeft < 0) {
-        right = void 0;
-        left = 0;
+    if (isHorizontalDirection) {
+      const spaceRight = vw - triggerRect.right - MARGIN;
+      const spaceLeft = triggerRect.left - MARGIN;
+      let placeRight = direction === "right";
+      if (placeRight && panelRect.width > spaceRight && spaceLeft > spaceRight) {
+        placeRight = false;
+      } else if (!placeRight && panelRect.width > spaceLeft && spaceRight > spaceLeft) {
+        placeRight = true;
       }
+      left = placeRight ? triggerRect.width + MARGIN : -(panelRect.width + MARGIN);
+      top = 0;
+      const panelBottom = triggerRect.top + panelRect.height;
+      if (panelBottom > vh - MARGIN) top -= panelBottom - (vh - MARGIN);
+      if (triggerRect.top + top < MARGIN) top += MARGIN - (triggerRect.top + top);
     } else {
-      left = 0;
-      const panelRight = triggerRect.left + panelRect.width;
-      if (panelRight > vw) {
-        left = void 0;
+      const spaceBelow = vh - triggerRect.bottom - MARGIN;
+      const spaceAbove = triggerRect.top - MARGIN;
+      let placeAbove = isUp;
+      if (placeAbove && panelRect.height > spaceAbove && spaceBelow > spaceAbove) {
+        placeAbove = false;
+      } else if (!placeAbove && panelRect.height > spaceBelow && spaceAbove > spaceBelow) {
+        placeAbove = true;
+      }
+      top = placeAbove ? -(panelRect.height + MARGIN) : triggerRect.height + MARGIN;
+      if (align === "right") {
         right = 0;
+        const panelLeft = triggerRect.right - panelRect.width;
+        if (panelLeft < 0) {
+          right = void 0;
+          left = 0;
+        }
+      } else {
+        left = 0;
+        const panelRight = triggerRect.left + panelRect.width;
+        if (panelRight > vw) {
+          left = void 0;
+          right = 0;
+        }
       }
     }
     setPanelStyle({ top, left, right });
-  }, [open, isUp, align]);
+  }, [open, direction, isHorizontalDirection, isUp, align]);
   React9.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
@@ -1241,6 +1260,7 @@ function Dropdown({
           "fractal-dropdown-trigger",
           `fractal-dropdown-trigger--${size}`,
           `fractal-dropdown-trigger--${triggerVariant}`,
+          `fractal-dropdown-trigger--${triggerOrientation}`,
           iconOnly && "fractal-dropdown-trigger--icon-only",
           triggerClassName
         ),