@upbound/monarch-blocks 0.4.1 → 0.6.0

package/dist/empty-view-DO36LNvk.d.ts

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import { IconName } from '@upbound/monarch-core';
+import { RowData, Cell } from '@tanstack/react-table';
+
+/**
+ * Non-CEL column filter definitions — the `meta.filter` vocabulary consumed by
+ * contextual (right-click cell) filtering and by the plain filter bar.
+ * Mirrors TableWrapper's `Filters/types.ts` shapes; `id` is omitted here since
+ * it comes from the owning `ColumnDef.id`, not the filter definition itself.
+ */
+type ColumnFilterType = 'checkbox' | 'radio' | 'dateRange' | 'text' | 'multiText';
+type ColumnFilterOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    children?: ColumnFilterOption[];
+};
+type FetchColumnFilterOptionsArgs = {
+    query: string;
+    page: number;
+    signal: AbortSignal;
+};
+type FetchColumnFilterOptionsResult = {
+    items: ColumnFilterOption[];
+    hasMore: boolean;
+};
+type FetchColumnFilterOptions = (args: FetchColumnFilterOptionsArgs) => Promise<FetchColumnFilterOptionsResult>;
+type ColumnFilterBase = {
+    title: string;
+    type: ColumnFilterType;
+    order?: number;
+};
+type StaticCheckboxColumnFilter = ColumnFilterBase & {
+    type: 'checkbox';
+    options: string[] | ColumnFilterOption[];
+    fetchFilterOptions?: never;
+    /** Whether the chip's value popup is a searchable Combobox. Defaults to `true`. */
+    searchable?: boolean;
+};
+type AsyncCheckboxColumnFilter = ColumnFilterBase & {
+    type: 'checkbox';
+    fetchFilterOptions: FetchColumnFilterOptions;
+    options?: never;
+    /** Whether the chip's value popup is a searchable Combobox. Defaults to `true`. */
+    searchable?: boolean;
+};
+type CheckboxColumnFilter = StaticCheckboxColumnFilter | AsyncCheckboxColumnFilter;
+type RadioColumnFilter = ColumnFilterBase & {
+    type: 'radio';
+    options: string[] | ColumnFilterOption[];
+    /** Whether the chip's value popup is a searchable Combobox. Defaults to `true`. */
+    searchable?: boolean;
+};
+type DateRangeColumnFilter = ColumnFilterBase & {
+    type: 'dateRange';
+    /** When true, always show time inputs. When false, never show them. When omitted, auto-detect from value. */
+    includeTime?: boolean;
+};
+type TextColumnFilter = ColumnFilterBase & {
+    type: 'text';
+    placeholder?: string;
+};
+type MultiTextColumnFilter = ColumnFilterBase & {
+    type: 'multiText';
+    /** Defaults to comma (`,`) when omitted. */
+    delimiter?: string;
+    description?: string;
+    placeholder?: string;
+};
+type ColumnFilterDefinition = CheckboxColumnFilter | DateRangeColumnFilter | RadioColumnFilter | TextColumnFilter | MultiTextColumnFilter;
+type CheckboxColumnFilterValue = string[] | undefined;
+type RadioColumnFilterValue = string | undefined;
+type DateRangeColumnFilterValue = {
+    startDate: Date | null;
+    endDate: Date | null;
+} | undefined;
+type TextColumnFilterValue = string | undefined;
+type MultiTextColumnFilterValue = string[] | undefined;
+type ColumnFilterValue = CheckboxColumnFilterValue | RadioColumnFilterValue | DateRangeColumnFilterValue | TextColumnFilterValue | MultiTextColumnFilterValue;
+
+/** Derives a contextual (right-click cell) column-filter value from a cell. */
+type ContextualFilterValueParser<TData extends RowData, TValue> = (cell: Cell<TData, TValue>) => ColumnFilterValue | undefined;
+/** Derives a contextual (right-click cell) global-search term from a cell. */
+type ContextualGlobalSearchValueParser<TData extends RowData, TValue> = (cell: Cell<TData, TValue>) => string | undefined;
+/** A fixed-width grid track: sizes to content or an explicit CSS length. */
+type GridColumnFixed = {
+    fixed: string;
+    flex?: never;
+};
+type GridColumnFlexContentMin = {
+    min: 'max-content' | 'min-content';
+    minCap?: string;
+};
+type GridColumnFlexFixedMin = {
+    min?: string;
+    minCap?: never;
+};
+/** A proportional grid track: shares space by weight, with optional min/max. */
+type GridColumnFlex = {
+    flex: number;
+    max?: string;
+    fixed?: never;
+} & (GridColumnFlexContentMin | GridColumnFlexFixedMin);
+/**
+ * Column sizing for grid layout mode.
+ *
+ * Fixed column (sizes to content or explicit value):
+ *   { fixed: 'max-content' }
+ *   { fixed: '200px' }
+ *
+ * Proportional column (shares space by weight, with optional min/max):
+ *   { flex: 2, min: '100px' }
+ *   { flex: 0.5, min: 'max-content' }
+ *   { flex: 0.5, min: 'max-content', minCap: '200px' }
+ *   { flex: 1, min: '80px', max: '500px' }
+ */
+type GridColumnSizing = GridColumnFixed | GridColumnFlex;
+/**
+ * Column-def metadata `DataTable` reads — a straight port of TableWrapper's
+ * `ColumnMeta` module augmentation. Import this file for its side effect
+ * (`import '@/lib/data-table/table-meta'`) wherever a `ColumnDef` is authored
+ * with any of these fields.
+ */
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /** Pins the column left or right. Pinned columns are excluded from column reordering. */
+        pinning?: 'left' | 'right';
+        /** Marks an actions column — hides its header label and excludes it from contextual filtering. */
+        actions?: boolean;
+        /** The column's non-CEL filter definition, read by the plain filter bar and contextual filtering. */
+        filter?: ColumnFilterDefinition;
+        /** Parses a cell into a filter value for contextual (right-click) cell filtering. */
+        contextualFilterValue?: ContextualFilterValueParser<TData, TValue>;
+        /** Parses a cell into a search term for contextual (right-click) global search. */
+        contextualGlobalSearchValue?: ContextualGlobalSearchValueParser<TData, TValue>;
+        /** When true, the column is used only for filtering and is never rendered in the table. */
+        filterOnly?: boolean;
+        /** Column sizing for `layout="grid"` mode — see `GridColumnSizing`. */
+        grid?: GridColumnSizing;
+    }
+}
+
+type TableDataState = 'empty' | 'loading' | 'error' | 'success';
+
+/**
+ * Monarch-native equivalent of TableWrapper's `EmptyConfig` — same four
+ * states (error / empty / filtered-empty), rebuilt on Monarch's `Empty`
+ * compound API instead of a single props-driven component. Two deliberate
+ * adaptations: `icon` takes a Monarch `IconName` (no FontAwesome dependency),
+ * and `action` is a rendered node rather than a `ComponentType` reference.
+ * `details` has no native `Empty` slot — it composes `Alert` instead.
+ */
+type DataTableEmptyConfig = {
+    icon?: IconName;
+    header?: React.ReactNode;
+    subheader?: React.ReactNode;
+    details?: React.ReactNode;
+    action?: React.ReactNode;
+    className?: string;
+    wrapperClassName?: string;
+};
+declare const defaultErrorConfig: DataTableEmptyConfig;
+declare const defaultEmptyConfig: DataTableEmptyConfig;
+declare const defaultNoFilterFoundConfig: DataTableEmptyConfig;
+type DataTableEmptyView = {
+    empty?: DataTableEmptyConfig;
+    error?: DataTableEmptyConfig;
+    filter?: DataTableEmptyConfig;
+};
+declare function DataTableEmptyView({ emptyView, tableState, filterCount, resetFilters, className, }: {
+    emptyView?: DataTableEmptyView;
+    /** `'success'`/`'loading'` render nothing here — the table body handles those. */
+    tableState: TableDataState;
+    filterCount: number;
+    resetFilters: () => void;
+    className?: string;
+}): React.JSX.Element;
+
+export { type DataTableEmptyConfig as D, type TableDataState as T, DataTableEmptyView as a, defaultErrorConfig as b, defaultNoFilterFoundConfig as c, defaultEmptyConfig as d };

package/dist/filter-bar.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ComboboxContent } from '@upbound/monarch-core';
 
 type FilterType = 'checkbox' | 'radio' | 'text' | 'multiText' | 'date';
 interface FilterOption {
@@ -58,6 +59,7 @@ interface ActiveFilter {
     key: string;
     value?: FilterValue;
 }
+type PortalContainer = React.ComponentProps<typeof ComboboxContent>['container'];
 interface FilterBarProps extends React.ComponentProps<'div'> {
     filters: FilterDefinition[];
     activeFilters: ActiveFilter[];
@@ -65,15 +67,17 @@ interface FilterBarProps extends React.ComponentProps<'div'> {
     onRemoveFilter: (key: string) => void;
     onChangeFilter: (key: string, value: FilterValue) => void;
 }
-declare function FilterBar({ filters, activeFilters, onAddFilter, onRemoveFilter, onChangeFilter, className, children, ...props }: FilterBarProps): React.JSX.Element;
+declare function FilterBar({ filters, activeFilters, onAddFilter, onRemoveFilter, onChangeFilter, className, children, ref, ...props }: FilterBarProps): React.JSX.Element;
 interface FilterChipProps {
     definition: FilterDefinition;
     value: FilterValue | undefined;
     /** Opens the chip's value popup as soon as it mounts — used right after the filter is added. */
     autoOpen?: boolean;
+    /** Portals a searchable checkbox/radio chip's Combobox popup here instead of the default `document.body` — see `FilterBar`'s own `containerRef` for why. */
+    container?: PortalContainer;
     onChangeValue: (value: FilterValue) => void;
     onRemove: () => void;
 }
-declare function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }: FilterChipProps): React.JSX.Element;
+declare function FilterChip({ definition, value, autoOpen, container, onChangeValue, onRemove }: FilterChipProps): React.JSX.Element;
 
 export { type ActiveFilter, type CheckboxFilterDefinition, type CheckboxFilterValue, type DateFilterDefinition, type DateFilterValue, FilterBar, type FilterBarProps, FilterChip, type FilterDefinition, type FilterOption, type FilterType, type FilterValue, type MultiTextFilterDefinition, type MultiTextFilterValue, type RadioFilterDefinition, type RadioFilterValue, type TextFilterDefinition, type TextFilterValue };

package/dist/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/filter-bar/filter-bar.tsx
 import { Badge } from "@upbound/monarch-core";
@@ -90,7 +93,6 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger
@@ -132,6 +134,17 @@ function applyTimeToDate(date, time) {
 function formatDateLabel(date) {
   return date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
 }
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
+}
+function hasOrder(filter) {
+  return typeof filter.order === "number";
+}
 function FilterBar(_a) {
   var _b = _a, {
     filters,
@@ -140,7 +153,8 @@ function FilterBar(_a) {
     onRemoveFilter,
     onChangeFilter,
     className,
-    children
+    children,
+    ref
   } = _b, props = __objRest(_b, [
     "filters",
     "activeFilters",
@@ -148,39 +162,50 @@ function FilterBar(_a) {
     "onRemoveFilter",
     "onChangeFilter",
     "className",
-    "children"
+    "children",
+    "ref"
   ]);
   const usedKeys = new Set(activeFilters.map((f) => f.key));
-  const availableFilters = filters.filter((f) => !usedKeys.has(f.key));
+  const remainingFilters = filters.filter((f) => !usedKeys.has(f.key));
+  const availableFilters = filters.some(hasOrder) ? remainingFilters : sortBy(remainingFilters, (f) => f.label);
   const shouldShowFilters = availableFilters.length > 0 || activeFilters.length > 0;
   const [pendingOpenKey, setPendingOpenKey] = React.useState(null);
   function handleAddFilter(key) {
     onAddFilter(key);
     setPendingOpenKey(key);
   }
+  const containerRef = React.useRef(null);
   return /* @__PURE__ */ jsxs(
     "div",
     __spreadProps(__spreadValues({
       "data-slot": "filter-bar",
       "data-visible-filters": shouldShowFilters,
-      className: cn("flex flex-wrap items-center gap-2", className)
+      className: cn("flex flex-wrap items-center gap-2", className),
+      ref: composeRefs(containerRef, ref)
     }, props), {
       children: [
-        availableFilters.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
-            /* @__PURE__ */ jsx(Icon, { name: "plus", "data-icon": "inline-start" }),
-            "Add filter"
-          ] }) }),
-          /* @__PURE__ */ jsx(
-            DropdownMenuContent,
-            {
-              align: "start",
-              className: "w-48",
-              onCloseAutoFocus: (e) => e.preventDefault(),
-              children: availableFilters.map((filter) => /* @__PURE__ */ jsx(DropdownMenuItem, { onSelect: () => handleAddFilter(filter.key), children: filter.label }, filter.key))
-            }
-          )
-        ] }),
+        availableFilters.length > 0 && /* @__PURE__ */ jsxs(
+          Combobox,
+          {
+            items: availableFilters,
+            itemToStringValue: (item) => item.label,
+            itemToStringLabel: (item) => item.label,
+            onValueChange: (filter) => {
+              if (filter) handleAddFilter(filter.key);
+            },
+            children: [
+              /* @__PURE__ */ jsxs(ComboboxTrigger, { "aria-label": "Add filter", render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: [
+                /* @__PURE__ */ jsx(Icon, { name: "plus", "data-icon": "inline-start" }),
+                "Add filter"
+              ] }),
+              /* @__PURE__ */ jsxs(ComboboxContent, { container: containerRef, align: "start", className: "w-48", children: [
+                /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: "Search filters\u2026" }),
+                /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No filters found." }),
+                /* @__PURE__ */ jsx(ComboboxList, { children: (filter) => /* @__PURE__ */ jsx(ComboboxItem, { value: filter, children: filter.label }, filter.key) })
+              ] })
+            ]
+          }
+        ),
         activeFilters.map((active) => {
           const definition = filters.find((f) => f.key === active.key);
           if (!definition) return null;
@@ -190,6 +215,7 @@ function FilterBar(_a) {
               definition,
               value: active.value,
               autoOpen: active.key === pendingOpenKey,
+              container: containerRef,
               onChangeValue: (value) => onChangeFilter(active.key, value),
               onRemove: () => onRemoveFilter(active.key)
             },
@@ -201,7 +227,7 @@ function FilterBar(_a) {
     })
   );
 }
-function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }) {
+function FilterChip({ definition, value, autoOpen, container, onChangeValue, onRemove }) {
   var _a;
   const type = (_a = definition.type) != null ? _a : "checkbox";
   switch (type) {
@@ -212,6 +238,7 @@ function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }) {
           definition,
           value,
           autoOpen,
+          container,
           onChangeValue,
           onRemove
         }
@@ -223,6 +250,7 @@ function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }) {
           definition,
           value,
           autoOpen,
+          container,
           onChangeValue,
           onRemove
         }
@@ -269,11 +297,13 @@ function CheckboxFilterChip({
   definition,
   value,
   autoOpen,
+  container,
   onChangeValue,
   onRemove
 }) {
   var _a, _b;
-  const { label, options, searchable = false } = definition;
+  const { label, searchable = false } = definition;
+  const options = sortBy(definition.options, (o) => o.label);
   const values = asCheckboxValue(value);
   const displayLabel = values.length === 0 ? "Any" : values.length === 1 ? (_b = (_a = options.find((o) => o.value === values[0])) == null ? void 0 : _a.label) != null ? _b : values[0] : `${values.length} selected`;
   function toggle(optionValue) {
@@ -299,25 +329,33 @@ function CheckboxFilterChip({
               children: /* @__PURE__ */ jsx("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel })
             }
           ),
-          /* @__PURE__ */ jsxs(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
-            /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
-            values.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(ComboboxSelectedChips, { children: [
-                /* @__PURE__ */ jsx(ComboboxValue, { children: (selected) => /* @__PURE__ */ jsx(Fragment, { children: selected.map((item) => /* @__PURE__ */ jsx(ComboboxChip, { children: item.label }, item.value)) }) }),
-                /* @__PURE__ */ jsx(ComboboxClearAll, { onClick: () => onChangeValue([]) })
-              ] }),
-              /* @__PURE__ */ jsx(ComboboxSeparator, {})
-            ] }),
-            /* @__PURE__ */ jsxs(ComboboxEmpty, { children: [
-              "No ",
-              label.toLowerCase(),
-              " found."
-            ] }),
-            /* @__PURE__ */ jsx(ComboboxList, { children: (item) => /* @__PURE__ */ jsxs(ComboboxItem, { value: item, children: [
-              item.icon,
-              item.label
-            ] }, item.value) })
-          ] })
+          /* @__PURE__ */ jsxs(
+            ComboboxContent,
+            {
+              container,
+              className: "min-w-64",
+              collisionAvoidance: { side: "none", align: "shift" },
+              children: [
+                /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
+                values.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(ComboboxSelectedChips, { children: [
+                    /* @__PURE__ */ jsx(ComboboxValue, { children: (selected) => /* @__PURE__ */ jsx(Fragment, { children: selected.map((item) => /* @__PURE__ */ jsx(ComboboxChip, { children: item.label }, item.value)) }) }),
+                    /* @__PURE__ */ jsx(ComboboxClearAll, { onClick: () => onChangeValue([]) })
+                  ] }),
+                  /* @__PURE__ */ jsx(ComboboxSeparator, {})
+                ] }),
+                /* @__PURE__ */ jsxs(ComboboxEmpty, { children: [
+                  "No ",
+                  label.toLowerCase(),
+                  " found."
+                ] }),
+                /* @__PURE__ */ jsx(ComboboxList, { children: (item) => /* @__PURE__ */ jsxs(ComboboxItem, { value: item, children: [
+                  item.icon,
+                  item.label
+                ] }, item.value) })
+              ]
+            }
+          )
         ]
       }
     ) : /* @__PURE__ */ jsxs(DropdownMenu, { defaultOpen: autoOpen, children: [
@@ -345,11 +383,13 @@ function RadioFilterChip({
   definition,
   value,
   autoOpen,
+  container,
   onChangeValue,
   onRemove
 }) {
   var _a, _b, _c;
-  const { label, options, searchable = false } = definition;
+  const { label, searchable = false } = definition;
+  const options = sortBy(definition.options, (o) => o.label);
   const selectedValue = asRadioValue(value);
   const displayLabel = selectedValue ? (_b = (_a = options.find((o) => o.value === selectedValue)) == null ? void 0 : _a.label) != null ? _b : selectedValue : "Any";
   const selected = (_c = options.find((o) => o.value === selectedValue)) != null ? _c : null;
@@ -374,18 +414,26 @@ function RadioFilterChip({
               children: /* @__PURE__ */ jsx("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel })
             }
           ),
-          /* @__PURE__ */ jsxs(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
-            /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
-            /* @__PURE__ */ jsxs(ComboboxEmpty, { children: [
-              "No ",
-              label.toLowerCase(),
-              " found."
-            ] }),
-            /* @__PURE__ */ jsx(ComboboxList, { children: (item) => /* @__PURE__ */ jsxs(ComboboxItem, { value: item, children: [
-              item.icon,
-              item.label
-            ] }, item.value) })
-          ] })
+          /* @__PURE__ */ jsxs(
+            ComboboxContent,
+            {
+              container,
+              className: "min-w-64",
+              collisionAvoidance: { side: "none", align: "shift" },
+              children: [
+                /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
+                /* @__PURE__ */ jsxs(ComboboxEmpty, { children: [
+                  "No ",
+                  label.toLowerCase(),
+                  " found."
+                ] }),
+                /* @__PURE__ */ jsx(ComboboxList, { children: (item) => /* @__PURE__ */ jsxs(ComboboxItem, { value: item, children: [
+                  item.icon,
+                  item.label
+                ] }, item.value) })
+              ]
+            }
+          )
         ]
       }
     ) : /* @__PURE__ */ jsxs(DropdownMenu, { defaultOpen: autoOpen, children: [