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

package/dist/index.js

@@ -1045,7 +1045,7 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
 
 // src/components/Dropdown/Dropdown.tsx
 import * as React9 from "react";
-import { ChevronDown, ChevronUp } from "@mirror-physics/fractal-icons";
+import { ChevronDown, ChevronLeft, ChevronRight as ChevronRight2, ChevronUp } from "@mirror-physics/fractal-icons";
 import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var MARGIN = 4;
 function Dropdown({
@@ -1055,6 +1055,7 @@ function Dropdown({
   triggerLabel = "Options",
   direction = "down",
   align = "left",
+  triggerOrientation = "horizontal",
   triggerContent,
   label,
   iconOnly = false,
@@ -1078,41 +1079,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 ? ChevronUp : ChevronDown;
+  const isHorizontalDirection = direction === "left" || direction === "right";
+  const ChevronIcon = direction === "up" ? ChevronUp : direction === "left" ? ChevronLeft : direction === "right" ? ChevronRight2 : 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) => {
@@ -1138,6 +1157,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
         ),
@@ -1678,7 +1698,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
 
 // src/components/Disclosure/Disclosure.tsx
 import { useId as useId3, useState as useState7 } from "react";
-import { ChevronRight as ChevronRight2, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
+import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
 import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function Disclosure({
   title,
@@ -1729,7 +1749,7 @@ function Disclosure({
             disabled,
             onClick: toggle,
             children: [
-              /* @__PURE__ */ jsx21("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx21(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx21(ChevronRight2, { size: 16 }) }),
+              /* @__PURE__ */ jsx21("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx21(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx21(ChevronRight3, { size: 16 }) }),
               /* @__PURE__ */ jsx21("span", { className: "fractal-disclosure-title", children: title }),
               meta && /* @__PURE__ */ jsx21("span", { className: "fractal-disclosure-meta", children: meta })
             ]