@ceebee/ui 0.5.0 → 0.5.2

package/dist/client.js

@@ -456,6 +456,7 @@ function AutoComplete({
   const [loading, setLoading] = useState(false);
   const [failed, setFailed] = useState(false);
   const [chosen, setChosen] = useState(null);
+  const [open, setOpen] = useState(false);
   const available = async ? loaded : items ?? [];
   const optionFor = (candidate) => {
     if (candidate == null) return null;
@@ -497,6 +498,17 @@ function AutoComplete({
     asked.current += 1;
     inFlight.current?.abort();
   }, []);
+  useEffect(() => {
+    if (!open) return void 0;
+    const onScroll = (event) => {
+      const target = event.target;
+      if (target === document || target === document.documentElement || target === document.body) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("scroll", onScroll, { capture: true, passive: true });
+    return () => window.removeEventListener("scroll", onScroll, { capture: true });
+  }, [open]);
   return /* @__PURE__ */ jsxs(
     Combobox.Root,
     {
@@ -510,6 +522,9 @@ function AutoComplete({
         setChosen(option);
         onValueChange?.(option?.value ?? null);
       },
+      modal: true,
+      open,
+      onOpenChange: setOpen,
       isItemEqualToValue: (a, b) => a?.value === b?.value,
       itemToStringLabel: (item) => typeof item === "string" ? item : item.label,
       disabled,

package/dist/styles.css

@@ -547,11 +547,13 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
    not line up with the thing it was a list for. The tick moves to the trailing
    edge — `order`, so the reading order is untouched — and the row's inline
    padding matches the field's. */
+/* Same shape and the same reasoning as the Select's popup — see select.css. */
 .cb-autocomplete__popup {
   box-sizing: border-box;
-  width: var(--anchor-width, auto);
+  width: max-content;
   min-width: var(--anchor-width, 12rem);
-  max-height: 18rem;
+  max-width: var(--available-width, 100vw);
+  max-height: min(18rem, var(--available-height, 18rem));
   overflow-y: auto;
   padding: var(--cb-space-1);
   background: var(--cb-surface-raised);
@@ -1180,11 +1182,26 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-select[data-disabled] { opacity: 0.55; cursor: not-allowed; }
 .cb-select__icon { display: inline-flex; color: var(--cb-fg-subtle); }
 
+/* As wide as its longest option, and never wider than the screen.
+ *
+ * Pinned to the anchor's width, a popup dropping from a field that is half a
+ * filter row is 175px on a phone — and the options in it are place names.
+ * "Kabupaten Tangerang Selatan (5)" wrapped to three lines there, the one below
+ * it to two, and the list read as a cramped column of broken phrases rather
+ * than as a set of choices.
+ *
+ * So the anchor's width becomes the floor rather than the value: still never
+ * narrower than the field it belongs to, because a popup narrower than its
+ * field reads as belonging to something else. `--available-width` is the room
+ * the positioner measured between the anchor and the edge of the screen, so
+ * the ceiling moves with the viewport instead of being a number written here.
+ */
 .cb-select__popup {
   box-sizing: border-box;
-  width: var(--anchor-width, auto);
+  width: max-content;
   min-width: var(--anchor-width, 10rem);
-  max-height: 18rem;
+  max-width: var(--available-width, 100vw);
+  max-height: min(18rem, var(--available-height, 18rem));
   overflow-y: auto;
   background: var(--cb-surface-raised);
   border: var(--cb-border-width) solid var(--cb-border);
@@ -1762,7 +1779,17 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 
 .cb-drawer__title { margin: 0; font-family: var(--cb-font-sans); font-size: var(--cb-text-lg); font-weight: var(--cb-weight-semibold); }
 .cb-drawer__description { margin: 0; font-family: var(--cb-font-sans); font-size: var(--cb-text-sm); color: var(--cb-fg-muted); }
-.cb-drawer__body { min-height: 0; flex: 1; overflow-y: auto; font-family: var(--cb-font-sans); font-size: var(--cb-text-sm); }
+/* Same scrollbar as the Modal's body, same answer — see modal.css. */
+.cb-drawer__body {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  margin-inline: calc(-1 * var(--cb-space-5));
+  padding-inline: var(--cb-space-5);
+  font-family: var(--cb-font-sans);
+  font-size: var(--cb-text-sm);
+}
 .cb-drawer__footer { display: flex; justify-content: flex-end; gap: var(--cb-space-2); }
 
 /* overlay/modal.css */
@@ -1818,7 +1845,27 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 
 .cb-modal__title { margin: 0; font-family: var(--cb-font-sans); font-size: var(--cb-text-lg); font-weight: var(--cb-weight-semibold); }
 .cb-modal__description { margin: 0; font-family: var(--cb-font-sans); font-size: var(--cb-text-sm); color: var(--cb-fg-muted); }
-.cb-modal__body { min-height: 0; overflow-y: auto; font-family: var(--cb-font-sans); font-size: var(--cb-text-sm); }
+/* The body is the only scrolling part of the dialog, and a scroller draws its
+   bar at its own inline edge — which, with the body running to the content edge,
+   is the right edge of every field inside it. Platforms differ in how that looks
+   and neither way is acceptable: macOS and Android float an overlay bar over the
+   field, Windows reserves real width and squeezes it.
+
+   So both halves are needed. `scrollbar-gutter: stable` keeps the reserved bar
+   out of the content box — always, not only while the content overflows, so a
+   field appearing does not shift the rest sideways. The bleed-and-pad puts a
+   space-5 margin between the content and the edge where an overlay bar is drawn,
+   and hands the width back to the dialog so the padding costs nothing. It also
+   stops a focused field's ring being clipped at the scroller's edge. */
+.cb-modal__body {
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  margin-inline: calc(-1 * var(--cb-space-5));
+  padding-inline: var(--cb-space-5);
+  font-family: var(--cb-font-sans);
+  font-size: var(--cb-text-sm);
+}
 .cb-modal__footer { flex: none; display: flex; justify-content: flex-end; gap: var(--cb-space-2); margin-top: var(--cb-space-2); }
 
 /* overlay/popover.css */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceebee/ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {