@broberg/app-shell 0.11.0 → 0.11.1

package/dist/preact.js

@@ -845,6 +845,33 @@ function Segmented(props) {
 }
 function Dropdown(props) {
   const [state, setState] = useState({ open: false, highlighted: -1 });
+  const btnRef = useRef(null);
+  const listRef = useRef(null);
+  const [pos, setPos] = useState(void 0);
+  useLayoutEffect(() => {
+    if (!state.open || !btnRef.current) return setPos(void 0);
+    const r = btnRef.current.getBoundingClientRect();
+    const vw = window.innerWidth, vh = window.innerHeight, m = 8;
+    const h = listRef.current?.offsetHeight ?? 0;
+    const width = Math.min(Math.max(r.width, 160), vw - 2 * m);
+    const left = Math.max(m, Math.min(r.right - width, vw - width - m));
+    const below = r.bottom + 4;
+    const top = below + h <= vh - m || r.top - 4 - h < m ? Math.min(below, vh - m - h) : r.top - 4 - h;
+    setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px`, width: `${width}px` });
+  }, [state.open]);
+  useEffect(() => {
+    if (!state.open) return;
+    const close = (e) => {
+      if (e.target instanceof Node && listRef.current?.contains(e.target)) return;
+      setState((st) => ({ ...st, open: false }));
+    };
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    return () => {
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+    };
+  }, [state.open]);
   const current = Math.max(0, props.options.findIndex(([v]) => v === props.value));
   const choose = (i) => {
     setState({ open: false, highlighted: i });
@@ -865,6 +892,7 @@ function Dropdown(props) {
     /* @__PURE__ */ jsxs(
       "button",
       {
+        ref: btnRef,
         type: "button",
         class: "bas-dd__btn",
         "data-testid": props.testid,
@@ -880,7 +908,7 @@ function Dropdown(props) {
         ]
       }
     ),
-    state.open ? /* @__PURE__ */ jsx("ul", { class: "bas-dd__list", role: "listbox", "aria-label": props.label, "data-testid": `${props.testid}-list`, children: props.options.map(([v, label], i) => /* @__PURE__ */ jsxs(
+    state.open ? /* @__PURE__ */ jsx("ul", { ref: listRef, class: "bas-dd__list", style: pos ?? { position: "fixed", visibility: "hidden" }, role: "listbox", "aria-label": props.label, "data-testid": `${props.testid}-list`, children: props.options.map(([v, label], i) => /* @__PURE__ */ jsxs(
       "li",
       {
         id: optId(v),