@fairfox/polly 0.73.0 → 0.74.0

package/dist/src/polly-ui/ActionSelect.d.ts

@@ -9,9 +9,11 @@
  * <ActionInput> and <ActionForm>, with no synthetic signal or bridging
  * `effect` required.
  *
- * Composes <Dropdown> for the menu. The trigger is a plain <span> (not a
- * nested <button>) so the Dropdown's own button is the single
- * interactive element. A disabled ActionSelect renders as static text.
+ * Composes <Dropdown> for the menu. The trigger styling is applied
+ * directly to Dropdown's own <button> via `triggerClassName`, so the
+ * visible box and the interactive element are one and the same node —
+ * no styled <span> nested inside an unstyled <button>. A disabled
+ * ActionSelect renders as static text without a caret.
  */
 import type { JSX } from "preact";
 import { type PassthroughAttrs } from "./internal/passthrough.ts";
@@ -30,6 +32,8 @@ export type ActionSelectProps = PassthroughAttrs & {
     /** Trigger text shown when `value` matches no option. Default: "Select…". */
     placeholder?: string;
     disabled?: boolean;
+    /** Apply a comfortable minimum width to the trigger. Default: sizes to content. */
+    wide?: boolean;
     className?: string;
     id?: string;
 };

package/dist/src/polly-ui/Dropdown.d.ts

@@ -1,6 +1,12 @@
 /**
  * Dropdown — trigger button + popover menu using the native Popover API.
  *
+ * A shown popover is promoted to the browser's top layer, where CSS
+ * positioning resolves against the viewport rather than the `.dropdown`
+ * wrapper — so the menu cannot be placed with `position: absolute`
+ * alone. Instead it is pinned with `position: fixed` and coordinates
+ * measured from the trigger; see `positionMenu` below (issue #128).
+ *
  * The menu element gets `popover="auto"` and a unique `data-overlay-id`.
  * `closeTopOverlay()` from @fairfox/polly/actions finds the topmost
  * `[data-overlay-id]` element and dispatches `overlay:close` — the
@@ -18,6 +24,15 @@ export type DropdownProps = {
     align?: "left" | "right";
     multiSelect?: boolean;
     className?: string;
+    /**
+     * Class applied to the trigger <button> in place of Dropdown's own
+     * default. Lets a composing component (Select, ActionSelect) style
+     * the single interactive element directly, with no styled node
+     * nested inside the button.
+     */
+    triggerClassName?: string;
+    /** Disables the trigger <button>. */
+    triggerDisabled?: boolean;
     id?: string;
 };
 export declare function Dropdown(props: DropdownProps): JSX.Element;

package/dist/src/polly-ui/Select.d.ts

@@ -20,6 +20,8 @@ export type SelectProps<T = string> = {
     placeholder?: string;
     multiSelect?: boolean;
     disabled?: boolean;
+    /** Apply a comfortable minimum width to the trigger. Default: sizes to content. */
+    wide?: boolean;
     className?: string;
     id?: string;
 };

package/dist/src/polly-ui/index.css

@@ -67,10 +67,9 @@
   }
 
   .menu_HX48zA {
-    position: absolute;
+    position: fixed;
     inset: unset;
     z-index: var(--polly-z-raised);
-    margin: var(--polly-space-xs) 0 0;
     padding: var(--polly-space-xs) 0;
     border: var(--polly-border-width-default) solid var(--polly-border);
     border-radius: var(--polly-radius-md);
@@ -80,13 +79,7 @@
     overflow-y: auto;
     min-width: 160px;
     max-height: 280px;
-    top: 100%;
-    left: 0;
-  }
-
-  .alignRight_HX48zA {
-    left: auto;
-    right: 0;
+    margin: 0;
   }
 }
 
@@ -163,7 +156,9 @@
   }
 
   .trigger_daofbw {
-    display: inline-block;
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--polly-space-sm);
     padding: var(--polly-space-sm) var(--polly-space-md);
     border: var(--polly-border-width-default) solid var(--polly-border);
     border-radius: var(--polly-radius-sm);
@@ -173,15 +168,37 @@
     color: var(--polly-text);
     text-align: left;
     cursor: pointer;
+    max-width: 100%;
+  }
+
+  .trigger_daofbw:disabled, .trigger_daofbw[aria-disabled="true"] {
+    opacity: var(--polly-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .triggerWide_daofbw {
+    min-width: 140px;
+  }
+
+  .triggerLabel_daofbw {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    min-width: 140px;
+    flex: auto;
+    min-width: 0;
   }
 
-  .trigger_daofbw:disabled {
-    opacity: var(--polly-opacity-disabled);
-    cursor: not-allowed;
+  .caret_daofbw {
+    color: var(--polly-text-muted);
+    pointer-events: none;
+    flex: none;
+  }
+
+  .caret_daofbw:before {
+    content: "▾";
+    display: block;
+    font-size: var(--polly-text-xs);
+    line-height: 1;
   }
 
   .placeholder_daofbw {

package/dist/src/polly-ui/index.js

@@ -275,8 +275,7 @@ import { useEffect as useEffect2, useRef as useRef2 } from "preact/hooks";
 var Dropdown_module_default = {
   dropdown: "dropdown_HX48zA",
   trigger: "trigger_HX48zA",
-  menu: "menu_HX48zA",
-  alignRight: "alignRight_HX48zA"
+  menu: "menu_HX48zA"
 };
 
 // src/polly-ui/Layout.tsx
@@ -392,8 +391,20 @@ function Layout(props) {
 // src/polly-ui/Dropdown.tsx
 import { jsxDEV as jsxDEV3 } from "preact/jsx-dev-runtime";
 var dropdownCounter = 0;
+var MENU_GAP = 4;
+var VIEWPORT_PADDING = 8;
 function Dropdown(props) {
-  const { isOpen, trigger, children, align = "left", multiSelect = false, className, id } = props;
+  const {
+    isOpen,
+    trigger,
+    children,
+    align = "left",
+    multiSelect = false,
+    className,
+    triggerClassName,
+    triggerDisabled = false,
+    id
+  } = props;
   const menuRef = useRef2(null);
   const triggerRef = useRef2(null);
   const idRef = useRef2(`polly-dropdown-${++dropdownCounter}`);
@@ -415,6 +426,60 @@ function Dropdown(props) {
       menu.removeEventListener("overlay:close", onOverlayClose);
     };
   }, [popoverId, isOpen]);
+  useEffect2(() => {
+    const menu = menuRef.current;
+    const trigger2 = triggerRef.current;
+    if (!menu || !trigger2)
+      return;
+    const positionMenu = () => {
+      const t = trigger2.getBoundingClientRect();
+      const prevDisplay = menu.style.display;
+      menu.style.maxHeight = "";
+      menu.style.display = "block";
+      const menuWidth = menu.offsetWidth;
+      const menuHeight = menu.offsetHeight;
+      menu.style.display = prevDisplay;
+      const viewportWidth = document.documentElement.clientWidth;
+      const viewportHeight = document.documentElement.clientHeight;
+      let left = align === "right" ? t.right - menuWidth : t.left;
+      const maxLeft = Math.max(VIEWPORT_PADDING, viewportWidth - menuWidth - VIEWPORT_PADDING);
+      left = Math.min(Math.max(left, VIEWPORT_PADDING), maxLeft);
+      const spaceBelow = viewportHeight - t.bottom - MENU_GAP - VIEWPORT_PADDING;
+      const spaceAbove = t.top - MENU_GAP - VIEWPORT_PADDING;
+      let top;
+      if (menuHeight <= spaceBelow || spaceBelow >= spaceAbove) {
+        top = t.bottom + MENU_GAP;
+        if (menuHeight > spaceBelow) {
+          menu.style.maxHeight = `${Math.max(spaceBelow, 0)}px`;
+        }
+      } else {
+        const available = Math.max(spaceAbove, 0);
+        menu.style.maxHeight = `${available}px`;
+        top = t.top - MENU_GAP - Math.min(menuHeight, available);
+      }
+      menu.style.position = "fixed";
+      menu.style.margin = "0";
+      menu.style.left = `${left}px`;
+      menu.style.top = `${top}px`;
+    };
+    const onBeforeToggle = (e) => {
+      if (e.newState === "open") {
+        positionMenu();
+      }
+    };
+    const onReposition = () => {
+      if (menu.matches(":popover-open"))
+        positionMenu();
+    };
+    menu.addEventListener("beforetoggle", onBeforeToggle);
+    window.addEventListener("scroll", onReposition, true);
+    window.addEventListener("resize", onReposition);
+    return () => {
+      menu.removeEventListener("beforetoggle", onBeforeToggle);
+      window.removeEventListener("scroll", onReposition, true);
+      window.removeEventListener("resize", onReposition);
+    };
+  }, [align]);
   useSignalEffect(() => {
     const menu = menuRef.current;
     if (!menu)
@@ -443,9 +508,6 @@ function Dropdown(props) {
   const parts = [Dropdown_module_default["dropdown"] ?? ""];
   if (className)
     parts.push(className);
-  const menuParts = [Dropdown_module_default["menu"] ?? ""];
-  if (align === "right")
-    menuParts.push(Dropdown_module_default["alignRight"] ?? "");
   return /* @__PURE__ */ jsxDEV3("div", {
     id,
     class: parts.filter(Boolean).join(" "),
@@ -455,14 +517,16 @@ function Dropdown(props) {
       /* @__PURE__ */ jsxDEV3("button", {
         ref: triggerRef,
         type: "button",
-        class: Dropdown_module_default["trigger"],
+        class: triggerClassName ?? Dropdown_module_default["trigger"] ?? "",
+        disabled: triggerDisabled,
         children: trigger
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV3("div", {
         ref: menuRef,
         id: popoverId,
         role: "listbox",
-        class: menuParts.filter(Boolean).join(" "),
+        class: Dropdown_module_default["menu"] ?? "",
+        "data-align": align,
         popover: "auto",
         "data-overlay-id": popoverId,
         onToggle: handleToggle,
@@ -483,6 +547,9 @@ var Select_module_default = {
   select: "select_daofbw",
   label: "label_daofbw",
   trigger: "trigger_daofbw",
+  triggerWide: "triggerWide_daofbw",
+  triggerLabel: "triggerLabel_daofbw",
+  caret: "caret_daofbw",
   placeholder: "placeholder_daofbw",
   actions: "actions_daofbw",
   actionBtn: "actionBtn_daofbw",
@@ -492,7 +559,7 @@ var Select_module_default = {
 };
 
 // src/polly-ui/ActionSelect.tsx
-import { jsxDEV as jsxDEV4 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV4, Fragment } from "preact/jsx-dev-runtime";
 function labelFor(options, value) {
   for (const opt of options) {
     if (opt.value === value)
@@ -509,6 +576,7 @@ function ActionSelect(props) {
     label,
     placeholder = "Select…",
     disabled = false,
+    wide = false,
     className,
     id
   } = props;
@@ -522,7 +590,12 @@ function ActionSelect(props) {
       return;
     dispatchAction(action, { ...actionData ?? {}, value: next });
   };
-  const triggerClass = isEmpty ? `${Select_module_default["trigger"]} ${Select_module_default["placeholder"]}` : Select_module_default["trigger"];
+  const triggerParts = [Select_module_default["trigger"] ?? ""];
+  if (isEmpty)
+    triggerParts.push(Select_module_default["placeholder"] ?? "");
+  if (wide)
+    triggerParts.push(Select_module_default["triggerWide"] ?? "");
+  const triggerClass = triggerParts.filter(Boolean).join(" ");
   const parts = [Select_module_default["select"] ?? ""];
   if (className)
     parts.push(className);
@@ -541,13 +614,25 @@ function ActionSelect(props) {
       disabled ? /* @__PURE__ */ jsxDEV4("span", {
         class: triggerClass,
         "aria-disabled": "true",
-        children: displayText
+        children: /* @__PURE__ */ jsxDEV4("span", {
+          class: Select_module_default["triggerLabel"],
+          children: displayText
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV4(Dropdown, {
         isOpen,
-        trigger: /* @__PURE__ */ jsxDEV4("span", {
-          class: triggerClass,
-          children: displayText
-        }, undefined, false, undefined, this),
+        triggerClassName: triggerClass,
+        trigger: /* @__PURE__ */ jsxDEV4(Fragment, {
+          children: [
+            /* @__PURE__ */ jsxDEV4("span", {
+              class: Select_module_default["triggerLabel"],
+              children: displayText
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV4("span", {
+              class: Select_module_default["caret"],
+              "aria-hidden": "true"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
         children: options.map((opt) => {
           const isSelected = opt.value === value;
           const optClass = isSelected ? `${Select_module_default["option"]} ${Select_module_default["optionSelected"]}` : Select_module_default["option"];
@@ -1571,7 +1656,7 @@ function Host() {
 var ConfirmDialog = { Host, confirm };
 // src/polly-ui/Select.tsx
 import { useComputed, useSignal as useSignal2 } from "@preact/signals";
-import { jsxDEV as jsxDEV14 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV14, Fragment as Fragment2 } from "preact/jsx-dev-runtime";
 function formatSelected(options, selected) {
   if (selected.size === 0)
     return "";
@@ -1590,6 +1675,7 @@ function Select(props) {
     placeholder = "Select…",
     multiSelect = false,
     disabled = false,
+    wide = false,
     className,
     id
   } = props;
@@ -1618,13 +1704,24 @@ function Select(props) {
   const handleClear = () => {
     selected.value = new Set;
   };
-  const triggerClass = isEmpty.value ? `${Select_module_default["trigger"]} ${Select_module_default["placeholder"]}` : Select_module_default["trigger"];
-  const triggerButton = /* @__PURE__ */ jsxDEV14("button", {
-    type: "button",
-    class: triggerClass,
-    disabled,
-    children: displayText.value
-  }, undefined, false, undefined, this);
+  const triggerParts = [Select_module_default["trigger"] ?? ""];
+  if (isEmpty.value)
+    triggerParts.push(Select_module_default["placeholder"] ?? "");
+  if (wide)
+    triggerParts.push(Select_module_default["triggerWide"] ?? "");
+  const triggerClass = triggerParts.filter(Boolean).join(" ");
+  const triggerContent = /* @__PURE__ */ jsxDEV14(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsxDEV14("span", {
+        class: Select_module_default["triggerLabel"],
+        children: displayText.value
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV14("span", {
+        class: Select_module_default["caret"],
+        "aria-hidden": "true"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
   const parts = [Select_module_default["select"] ?? ""];
   if (className)
     parts.push(className);
@@ -1640,7 +1737,9 @@ function Select(props) {
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV14(Dropdown, {
         isOpen: isOpen2,
-        trigger: triggerButton,
+        trigger: triggerContent,
+        triggerClassName: triggerClass,
+        triggerDisabled: disabled,
         multiSelect,
         children: [
           multiSelect && /* @__PURE__ */ jsxDEV14("div", {
@@ -2100,4 +2199,4 @@ export {
   ActionForm
 };
 
-//# debugId=7DA35338ECD4891D64756E2164756E21
+//# debugId=D646BF0B09E9BEC064756E2164756E21