@upbound/monarch-blocks 0.4.0 → 0.5.0

package/dist/cel-filter-bar.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 import { k as CompileResult, t as CelValidationMeta, d as CelFilterCondition, f as CelFilterSchema, V as ValidationIssue, g as CelFilterTree, P as PillActiveSurface, u as CelFilterType, h as CelOperator, v as CelFilterShape, C as CelColumnDefinition, w as CelEmitOn, D as DateCelValue, M as MapKeyCelValue, l as MultiTextCelValue, m as RelativeDurationPreset, c as CelFilterBarProps } from './types-BULiU2qC.js';
 export { a as CelColumnOption, b as CelConditionValue, e as CelFilterGroup, i as CelRestrictedOptionSelectPayload, j as CheckboxCelValue, R as RadioCelValue, n as isCelFilterCondition, o as isCelFilterGroup, p as isCheckboxCelValue, q as isDateCelValue, r as isMapKeyCelValue, s as isMultiTextCelValue } from './types-BULiU2qC.js';
 
@@ -198,6 +198,6 @@ declare function readMultiTextCelValue(value: unknown): MultiTextCelValue;
 declare const RELATIVE_DURATION_PRESET_VALUES: readonly ["24h", "168h", "720h"];
 declare function isRelativeDurationPreset(value: string): value is RelativeDurationPreset;
 
-declare function CelFilterBar({ tree, onChange, schema, onCompileResultChange, onRestrictedOptionSelect, showClearButton, className, }: CelFilterBarProps): react_jsx_runtime.JSX.Element;
+declare function CelFilterBar({ tree, onChange, schema, onCompileResultChange, onRestrictedOptionSelect, showClearButton, className, }: CelFilterBarProps): React.JSX.Element;
 
 export { CelColumnDefinition, CelFilterBar, CelFilterBarProps, CelFilterCondition, CelFilterSchema, CelFilterTree, CelOperator, CompileResult, DateCelValue, MapKeyCelValue, MultiTextCelValue, PillActiveSurface, RELATIVE_DURATION_PRESET_VALUES, RelativeDurationPreset, ValidationIssue, allowsMultipleConditions, appendCondition, applyDisplayRules, applyOperatorChange, calendarDayEndInstant, calendarDayStartInstant, celStringLiteral, compileCelFilterTree, computeIsEmitReady, createCelNodeId, createDefaultCondition, createEmptyCelFilterTree, dateBoundaryForOperator, denormalizeColumnIdWithReservedNames, denormalizeColumnsWithReservedNames, escapeCelString, formatCalendarDateUtc, formatInstantLabel, getAllowedOperators, getColumnEmitOn, getDefaultOperator, getOperatorLabel, getQuantifierLabel, isDateRangeOperator, isDateRelativeOperator, isDateWindowOperator, isEndOfDayTimestamp, isEndOfMinuteTimestamp, isMultiTextColumn, isRealCalendarDay, isRelativeDateCelValue, isRelativeDurationPreset, isStartOfDayTimestamp, mergeContextualIntoCelTree, normalizeColumnsWithReservedNames, parseCalendarDate, readDateCelValue, readMapKeyCelValue, readMultiTextCelValue, readTimeOfDay, removeConditionById, replaceCondition, resolveColumnDefinition, resolveFilterShape, startInstantFromEndOfDay, startInstantFromEndOfMinute, validateCondition, withTimeOfDay };

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 ",