@upbound/monarch-blocks 0.5.0 → 0.6.0

package/dist/data-table.d.ts

@@ -1,8 +1,10 @@
 import * as React$1 from 'react';
 import { ReactNode, Dispatch, SetStateAction, ComponentType } from 'react';
 import { RowData, ColumnFilter, Cell, Column, ColumnOrderState, Row, ColumnDef, CellContext, HeaderGroup, TableOptions, TableState, InitialTableState, SortingFn, FilterFn, ExpandedState, ColumnFiltersState, PaginationState, SortingState, VisibilityState, ColumnPinningState, GroupingState, OnChangeFn, ColumnSizingState } from '@tanstack/react-table';
-import { DropdownMenuItem, IconName } from '@upbound/monarch-core';
+import { DropdownMenuItem } from '@upbound/monarch-core';
 import { f as CelFilterSchema, g as CelFilterTree, k as CompileResult, i as CelRestrictedOptionSelectPayload } from './types-BULiU2qC.js';
+import { T as TableDataState, a as DataTableEmptyView } from './empty-view-DO36LNvk.js';
+export { D as DataTableEmptyConfig, d as defaultEmptyConfig, b as defaultErrorConfig, c as defaultNoFilterFoundConfig } from './empty-view-DO36LNvk.js';
 
 /** A single entry (or nested submenu) in a cell's contextual right-click menu, alongside the built-in "Filter by this value" item. */
 type ContextualMenuAction<TData extends RowData = RowData, TValue = unknown> = {
@@ -86,180 +88,6 @@ declare function TimestampCell({ timestamp }: {
     timestamp?: Date | string | number;
 }): React$1.JSX.Element;
 
-/**
- * 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$1.ReactNode;
-    subheader?: React$1.ReactNode;
-    details?: React$1.ReactNode;
-    action?: React$1.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$1.JSX.Element;
-
 type RowCountRelation = 'eq' | 'gt';
 /** Pass `true` for defaults, `false` to disable the footer entirely (handled by the caller, not this component), or an object to toggle individual parts. */
 type DataTablePaginationConfig = boolean | {
@@ -533,4 +361,4 @@ type ViewFilterProps<TData extends RowData> = {
  */
 declare function ViewFilter<TData extends RowData>({ columns, columnFilters, onColumnFiltersChange, className, }: ViewFilterProps<TData>): React$1.JSX.Element;
 
-export { CellContextualFilter, type CellContextualFilterProps, ColumnOptions, type ColumnOptionsProps, type ContextualMenuAction, DataTable, DataTableBody, type DataTableCelFilterConfig, DataTableCell, type DataTableEmptyConfig, DataTableEmptyView, DataTableExpandedRow, type DataTableFilterVisibilityConfig, DataTableGroupRow, DataTableHeader, DataTablePagination, type DataTablePaginationConfig, type DataTablePaginationProps, type DataTableProps, DataTableRow, type DataTableRowProps, DataTableSkeletonBody, DataTableValueCell, type DataTableValueCellProps, ExpandButton, RowActionItem, RowActions, type RowCountRelation, type StickyHeaderConfig, type TableHookOptions, type TableLayout, TimestampCell, ViewFilter, type ViewFilterProps, defaultEmptyConfig, defaultErrorConfig, defaultNoFilterFoundConfig, getActionsColumnDefinition, getExpandColumnDefinition, normalizePageSizeOptions };
+export { CellContextualFilter, type CellContextualFilterProps, ColumnOptions, type ColumnOptionsProps, type ContextualMenuAction, DataTable, DataTableBody, type DataTableCelFilterConfig, DataTableCell, DataTableEmptyView, DataTableExpandedRow, type DataTableFilterVisibilityConfig, DataTableGroupRow, DataTableHeader, DataTablePagination, type DataTablePaginationConfig, type DataTablePaginationProps, type DataTableProps, DataTableRow, type DataTableRowProps, DataTableSkeletonBody, DataTableValueCell, type DataTableValueCellProps, ExpandButton, RowActionItem, RowActions, type RowCountRelation, type StickyHeaderConfig, type TableHookOptions, type TableLayout, TimestampCell, ViewFilter, type ViewFilterProps, getActionsColumnDefinition, getExpandColumnDefinition, normalizePageSizeOptions };

package/dist/data-table.js

@@ -99,7 +99,15 @@ function CellContextualFilter({
     );
   }
   return /* @__PURE__ */ jsxs(ContextMenuContent, { children: [
-    /* @__PURE__ */ jsx(ContextMenuItem, { disabled, onClick: (event) => event.stopPropagation(), onSelect: handleSelect, children: "Filter by this value" }),
+    /* @__PURE__ */ jsx(
+      ContextMenuItem,
+      {
+        disabled,
+        onClick: (event) => event.stopPropagation(),
+        onSelect: handleSelect,
+        children: "Filter by this value"
+      }
+    ),
     contextualMenuActions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ContextMenuSeparator, {}),
       contextualMenuActions.map(renderAction)
@@ -152,6 +160,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/lib/data-table/utils.ts
 var TO_EACH_SIDE = 2;
@@ -601,8 +612,25 @@ function RowActions({
   contentClassName
 }) {
   return /* @__PURE__ */ jsxs3(DropdownMenu2, { children: [
-    /* @__PURE__ */ jsx4(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx4(Button2, { variant: "ghost", size: "icon-xs", "aria-label": "Row actions", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx4(Icon2, { name: "ellipsis-vertical", size: "sm" }) }) }),
-    /* @__PURE__ */ jsx4(DropdownMenuContent2, { align, className: contentClassName, onClick: (event) => event.stopPropagation(), children })
+    /* @__PURE__ */ jsx4(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx4(
+      Button2,
+      {
+        variant: "ghost",
+        size: "icon-xs",
+        "aria-label": "Row actions",
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsx4(Icon2, { name: "ellipsis-vertical", size: "sm" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx4(
+      DropdownMenuContent2,
+      {
+        align,
+        className: contentClassName,
+        onClick: (event) => event.stopPropagation(),
+        children
+      }
+    )
   ] });
 }
 function RowActionItem({
@@ -1787,7 +1815,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__ */ jsxs4(
     Combobox,
     {
@@ -2015,7 +2046,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);
@@ -2104,7 +2135,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);
@@ -3153,6 +3184,7 @@ function DataTablePagination({
             PaginationLink,
             {
               href: "#",
+              size: "icon",
               isActive: page === currentPage,
               onClick: (e) => {
                 e.preventDefault();
@@ -3794,6 +3826,9 @@ function composeRefs(...refs) {
     }
   };
 }
+function hasOrder(filter) {
+  return typeof filter.order === "number";
+}
 function FilterBar(_a) {
   var _b = _a, {
     filters,
@@ -3815,7 +3850,8 @@ function FilterBar(_a) {
     "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] = React7.useState(null);
   function handleAddFilter(key) {
@@ -3950,7 +3986,8 @@ function CheckboxFilterChip({
   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) {
@@ -4035,7 +4072,8 @@ function RadioFilterChip({
   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;
@@ -4290,21 +4328,21 @@ function toFilterOption(opt) {
   return typeof opt === "string" ? { value: opt, label: opt } : { value: opt.value, label: opt.label };
 }
 function toFilterBarDefinition(key, filter) {
-  var _a, _b, _c;
-  const base = { key, label: filter.title, order: (_a = filter.order) != null ? _a : 0 };
+  var _a, _b;
+  const base = { key, label: filter.title, order: filter.order };
   if (isCheckboxColumnFilter(filter)) {
     const options = "options" in filter && filter.options ? filter.options : [];
     return __spreadProps(__spreadValues({}, base), {
       type: "checkbox",
       options: options.map(toFilterOption),
-      searchable: (_b = filter.searchable) != null ? _b : true
+      searchable: (_a = filter.searchable) != null ? _a : true
     });
   }
   if (isRadioColumnFilter(filter)) {
     return __spreadProps(__spreadValues({}, base), {
       type: "radio",
       options: filter.options.map(toFilterOption),
-      searchable: (_c = filter.searchable) != null ? _c : true
+      searchable: (_b = filter.searchable) != null ? _b : true
     });
   }
   if (isDateRangeColumnFilter(filter)) {
@@ -4337,7 +4375,12 @@ function ViewFilter({
     [columns]
   );
   const filterDefinitions = React8.useMemo(
-    () => filterableColumns.map(({ key, filter }) => toFilterBarDefinition(key, filter)).sort((a, b) => a.order - b.order),
+    () => filterableColumns.map(({ key, filter }) => toFilterBarDefinition(key, filter)).sort((a, b) => {
+      if (a.order == null && b.order == null) return 0;
+      if (a.order == null) return 1;
+      if (b.order == null) return -1;
+      return a.order - b.order;
+    }),
     [filterableColumns]
   );
   const emptyValueByKey = React8.useMemo(