@upbound/monarch-blocks 0.4.1 → 0.6.0

package/README.md

@@ -51,6 +51,23 @@ import { DataTable } from '@upbound/monarch-blocks/data-table';
 Same caveat as `monarch-core`: the root barrel bundles every component into one file and is a client boundary
 unconditionally. Import a component's own subpath if you need it in a context where that matters.
 
+## Graph needs its own CSS
+
+`Graph`/`GraphView` render on [ReactFlow](https://reactflow.dev), which ships its own base stylesheet for
+`Controls`/`MiniMap`/`Background`/handle positioning. This is the one component in the package that ships CSS — import
+it once, alongside `monarch-core`'s theme:
+
+```css
+@import 'tailwindcss';
+@import '@upbound/monarch-core/theme.css';
+@import '@upbound/monarch-blocks/graph.css';
+
+@source '../../node_modules/@upbound/monarch-core/dist/*.js';
+@source '../../node_modules/@upbound/monarch-blocks/dist/*.js';
+```
+
+No other component in this package needs a CSS import.
+
 ## Not part of the shadcn registry
 
 Unlike `@upbound/monarch-core`, these components are **not** available through `npx shadcn add @monarch/...` — the

package/dist/cel-filter-bar.js

@@ -66,6 +66,9 @@ var twMerge = extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function sortBy(items, getKey) {
+  return [...items].sort((a, b) => getKey(a).localeCompare(getKey(b)));
+}
 
 // src/hooks/use-mounted.ts
 import { useSyncExternalStore } from "react";
@@ -1218,6 +1221,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 +1236,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 +1252,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 +1264,8 @@ function CelFilterBar({
 function CelAddFilterButton({
   schema,
   conditions,
-  onSelect
+  onSelect,
+  container
 }) {
   var _a, _b;
   const usedSingleInstanceColumnIds = new Set(
@@ -1275,7 +1281,10 @@ function CelAddFilterButton({
     list.push(column);
     groupMap.set(key, list);
   }
-  const groups = Array.from(groupMap.entries()).map(([value, items]) => ({ value, items }));
+  const groups = sortBy(
+    Array.from(groupMap.entries()).map(([value, items]) => ({ value, items: sortBy(items, (item) => item.title) })),
+    (group) => group.value
+  );
   return /* @__PURE__ */ jsxs(
     Combobox,
     {
@@ -1290,7 +1299,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 +1363,8 @@ function CelFilterPill({
   controller,
   issues,
   onRemove,
-  onRestrictedOptionSelect
+  onRestrictedOptionSelect,
+  container
 }) {
   var _a;
   const shape = (_a = resolveFilterShape(condition, schema)) != null ? _a : columnDef.filterType;
@@ -1371,7 +1381,8 @@ function CelFilterPill({
         controller,
         issues,
         onRemove,
-        onRestrictedOptionSelect
+        onRestrictedOptionSelect,
+        container
       }
     );
   }
@@ -1386,7 +1397,8 @@ function CelFilterPill({
         controller,
         issues,
         onRemove,
-        onRestrictedOptionSelect
+        onRestrictedOptionSelect,
+        container
       }
     );
   }
@@ -1496,10 +1508,11 @@ function CelCheckboxComboboxPill({
   controller,
   issues,
   onRemove,
-  onRestrictedOptionSelect
+  onRestrictedOptionSelect,
+  container
 }) {
   var _a;
-  const options = (_a = columnDef.options) != null ? _a : [];
+  const options = sortBy((_a = columnDef.options) != null ? _a : [], (o) => o.label);
   const value = isCheckboxCelValue(condition.value) ? condition.value : [];
   const selected = options.filter((option) => value.includes(option.value));
   const allowedOperators = getAllowedOperators(columnDef);
@@ -1555,7 +1568,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,10 +1597,11 @@ function CelRadioComboboxPill({
   controller,
   issues,
   onRemove,
-  onRestrictedOptionSelect
+  onRestrictedOptionSelect,
+  container
 }) {
   var _a, _b;
-  const options = (_a = columnDef.options) != null ? _a : [];
+  const options = sortBy((_a = columnDef.options) != null ? _a : [], (o) => o.label);
   const value = typeof condition.value === "string" ? condition.value : "";
   const selected = (_b = options.find((option) => option.value === value)) != null ? _b : null;
   const allowedOperators = getAllowedOperators(columnDef);
@@ -1639,7 +1653,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 ",