@upbound/monarch-blocks 0.5.0 → 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";
@@ -1278,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,
     {
@@ -1506,7 +1512,7 @@ function CelCheckboxComboboxPill({
   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);
@@ -1595,7 +1601,7 @@ function CelRadioComboboxPill({
   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);