@upbound/monarch-blocks 0.4.1 → 0.5.0

package/dist/cel-filter-bar.js

@@ -1218,6 +1218,7 @@ function CelFilterBar({
     (_a = onCompileResultChangeRef.current) == null ? void 0 : _a.call(onCompileResultChangeRef, __spreadProps(__spreadValues({}, displayResult), { isEmitReady }));
   }, [displayResult, isEmitReady]);
   const conditions = tree.root.children.filter(isCelFilterCondition);
+  const containerRef = React.useRef(null);
   function handleAddFilter(columnId) {
     const condition = createDefaultCondition({ schema, columnId });
     onChange(appendCondition(tree, condition));
@@ -1232,8 +1233,8 @@ function CelFilterBar({
     onChange({ root: __spreadProps(__spreadValues({}, tree.root), { children: [] }) });
     editor.clearSuppress();
   }
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "cel-filter-bar", className: cn("flex flex-wrap items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx(CelAddFilterButton, { schema, conditions, onSelect: handleAddFilter }),
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "cel-filter-bar", className: cn("flex flex-wrap items-center gap-2", className), ref: containerRef, children: [
+    /* @__PURE__ */ jsx(CelAddFilterButton, { schema, conditions, onSelect: handleAddFilter, container: containerRef }),
     conditions.map((condition) => {
       const columnDef = resolveColumnDefinition(condition, schema);
       if (!columnDef) return null;
@@ -1248,7 +1249,8 @@ function CelFilterBar({
           controller: editor.getController(condition.id),
           issues: displayResult.issues.filter((issue) => issue.nodeId === condition.id),
           onRemove: () => handleRemove(condition.id),
-          onRestrictedOptionSelect
+          onRestrictedOptionSelect,
+          container: containerRef
         },
         condition.id
       );
@@ -1259,7 +1261,8 @@ function CelFilterBar({
 function CelAddFilterButton({
   schema,
   conditions,
-  onSelect
+  onSelect,
+  container
 }) {
   var _a, _b;
   const usedSingleInstanceColumnIds = new Set(
@@ -1290,7 +1293,7 @@ function CelAddFilterButton({
           /* @__PURE__ */ jsx(Icon, { name: "plus", "data-icon": "inline-start" }),
           "Add filter"
         ] }),
-        /* @__PURE__ */ jsxs(ComboboxContent, { align: "start", className: "w-64", children: [
+        /* @__PURE__ */ jsxs(ComboboxContent, { container, align: "start", className: "w-64", children: [
           /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: "Search filters\u2026" }),
           /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No filters found." }),
           /* @__PURE__ */ jsx(ComboboxList, { children: (group) => /* @__PURE__ */ jsxs(ComboboxGroup, { items: group.items, children: [
@@ -1354,7 +1357,8 @@ function CelFilterPill({
   controller,
   issues,
   onRemove,
-  onRestrictedOptionSelect
+  onRestrictedOptionSelect,
+  container
 }) {
   var _a;
   const shape = (_a = resolveFilterShape(condition, schema)) != null ? _a : columnDef.filterType;
@@ -1371,7 +1375,8 @@ function CelFilterPill({
         controller,
         issues,
         onRemove,
-        onRestrictedOptionSelect
+        onRestrictedOptionSelect,
+        container
       }
     );
   }
@@ -1386,7 +1391,8 @@ function CelFilterPill({
         controller,
         issues,
         onRemove,
-        onRestrictedOptionSelect
+        onRestrictedOptionSelect,
+        container
       }
     );
   }
@@ -1496,7 +1502,8 @@ function CelCheckboxComboboxPill({
   controller,
   issues,
   onRemove,
-  onRestrictedOptionSelect
+  onRestrictedOptionSelect,
+  container
 }) {
   var _a;
   const options = (_a = columnDef.options) != null ? _a : [];
@@ -1555,7 +1562,7 @@ function CelCheckboxComboboxPill({
           ),
           /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", "aria-label": `Remove ${columnDef.title} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx(Icon, { name: "xmark" }) })
         ] }),
-        /* @__PURE__ */ jsxs(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+        /* @__PURE__ */ jsxs(ComboboxContent, { container, className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
           /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: `Search ${columnDef.title.toLowerCase()}\u2026` }),
           selected.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs(ComboboxSelectedChips, { children: [
@@ -1584,7 +1591,8 @@ function CelRadioComboboxPill({
   controller,
   issues,
   onRemove,
-  onRestrictedOptionSelect
+  onRestrictedOptionSelect,
+  container
 }) {
   var _a, _b;
   const options = (_a = columnDef.options) != null ? _a : [];
@@ -1639,7 +1647,7 @@ function CelRadioComboboxPill({
           ),
           /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", "aria-label": `Remove ${columnDef.title} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx(Icon, { name: "xmark" }) })
         ] }),
-        /* @__PURE__ */ jsxs(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+        /* @__PURE__ */ jsxs(ComboboxContent, { container, className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
           /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: `Search ${columnDef.title.toLowerCase()}\u2026` }),
           /* @__PURE__ */ jsxs(ComboboxEmpty, { children: [
             "No ",