aplance-ui 1.3.0 → 1.4.0

package/registry/components/ui/data-table/data-table.tsx

@@ -24,6 +24,7 @@ import {
 } from "react";
 import clsx from "clsx";
 import { FilterBar } from "./filter-bar";
+import { FilterModal } from "./filter-modal";
 import { PaginationBar } from "./pagination-bar";
 import { Loader } from "../loader/loader";
 import type {
@@ -60,6 +61,12 @@ import {
 } from "@tabler/icons-react";
 import { getScrollbarWidth } from "../../../lib/dom";
 import { Button } from "../button/button";
+import { useMediaQuery } from "../../../hooks/useMediaQuery";
+
+// Below this width the inline filter row can't fit its fields (matches the
+// `--md` custom-media token in styles/media.css); the table collapses filters
+// into a single "Filters" button + modal instead of stacking them full-height.
+const FILTER_COMPACT_QUERY = "(max-width: 900px)";
 
 const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50];
 const DEFAULT_PAGINATION = { pageIndex: 0, pageSize: 10 };
@@ -143,6 +150,9 @@ export const DataTable = <TData extends { id: string }>({
   paginationExtra,
   className,
 }: DataTableProps<TData>) => {
+  // Collapse the filter row into a button + modal once it no longer fits inline.
+  const filtersCompact = useMediaQuery(FILTER_COMPACT_QUERY);
+
   // ── Table meta ──────────────────────────────────────────────────────────────
   const meta: DataTableMeta<TData> = useMemo(
     () => ({ editingRowId, updateData: onUpdateData }),
@@ -597,14 +607,22 @@ export const DataTable = <TData extends { id: string }>({
 
   return (
     <div className={clsx(s.root, className)}>
-      {/* Filter bar - fixed height, never scrolls */}
-      {filters.length > 0 && (
-        <FilterBar
-          fields={filters}
-          values={filterValues}
-          onChange={onFilterChange}
-        />
-      )}
+      {/* Filters - inline row on desktop; a "Filters" button + modal once the
+          row no longer fits (so phones aren't buried under stacked fields). */}
+      {filters.length > 0 &&
+        (filtersCompact ? (
+          <FilterModal
+            fields={filters}
+            values={filterValues}
+            onChange={onFilterChange}
+          />
+        ) : (
+          <FilterBar
+            fields={filters}
+            values={filterValues}
+            onChange={onFilterChange}
+          />
+        ))}
 
       {/* Content wrap - grows to fill remaining height.
           table_shell fills it; pagination pins to the bottom via margin-top:auto */}

package/registry/components/ui/data-table/filter-modal.tsx

@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { IconFilter } from "@tabler/icons-react";
+import {
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+} from "../../primitives/modal/modal";
+import { Icon } from "../../primitives/icon/icon";
+import { Button } from "../button/button";
+import type { FilterBarProps } from "./types";
+import s from "./data-table.module.css";
+
+/**
+ * Small-screen counterpart to <FilterBar>. It keeps filtering live while moving
+ * the same field contract into a Modal bottom sheet.
+ */
+export const FilterModal = ({ fields, values, onChange }: FilterBarProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Action slots (buttons/menus) render alongside the inputs; only input fields
+  // carry a value, so only they count toward the active badge + Clear-all reset.
+  const inputFields = fields.filter((field) => field.type === "field");
+  const activeCount = inputFields.filter(
+    (field) => (values[field.key] ?? "") !== "",
+  ).length;
+  const clearAll = () => {
+    inputFields.forEach((field) => {
+      if ((values[field.key] ?? "") !== "") onChange(field.key, "");
+    });
+  };
+
+  return (
+    <div className={s.filter_modal_bar}>
+      <Button
+        type="button"
+        variant="bordered"
+        className={s.filter_trigger}
+        onClick={() => setIsOpen(true)}
+      >
+        <Icon>
+          <IconFilter />
+        </Icon>
+        Filters
+        {activeCount > 0 && <span className={s.filter_count}>{activeCount}</span>}
+      </Button>
+
+      <Modal isOpen={isOpen} onOpenChange={setIsOpen} placement="bottom" size="md">
+        <ModalHeader>
+          <ModalTitle>Filters</ModalTitle>
+        </ModalHeader>
+        <ModalBody>
+          <div className={s.filter_modal_fields}>
+            {fields.map((field, i) => (
+              <div
+                className={s.filter_modal_field}
+                key={field.type === "action" ? `act:${i}` : `k:${field.key}`}
+              >
+                {field.type === "action"
+                  ? field.render()
+                  : field.render({
+                      value: values[field.key] ?? "",
+                      onChange: (v) => onChange(field.key, v),
+                    })}
+              </div>
+            ))}
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={clearAll}
+            disabled={activeCount === 0}
+          >
+            Clear all
+          </Button>
+          <Button type="button" variant="primary" onClick={() => setIsOpen(false)}>
+            Done
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </div>
+  );
+};

package/registry/components/ui/data-table/types.ts

@@ -556,6 +556,8 @@ export interface PersistArgs {
   setGrouping: (next: GroupingState) => void;
   expanded: ExpandedState;
   setExpanded: (next: ExpandedState) => void;
+  /** Resolved default expansion - used to skip persisting it when unchanged. */
+  defaultExpanded: ExpandedState;
 }
 
 // ─── Snapshot / apply helpers shape ───────────────────────────────────────────
@@ -573,6 +575,12 @@ export interface SnapshotInput {
   columnSizing: ColumnSizingState;
   grouping: GroupingState;
   expanded: ExpandedState;
+  /**
+   * Resolved default expansion (the hook's `defaultExpanded ?? true`). Used to
+   * skip persisting `expanded` when it still matches the default - otherwise the
+   * default writes a noisy `?expanded=true` even when no group was touched.
+   */
+  defaultExpanded: ExpandedState;
 }
 
 /** Setters used by `applyPersistedState` to push hydrated values back into state. */

package/registry/components/ui/data-table/useDataTable.tsx

@@ -334,6 +334,7 @@ export function useDataTable<TData extends { id: string }>({
     setGrouping: setGroupingState,
     expanded,
     setExpanded: setExpandedState,
+    defaultExpanded: defaultExpanded ?? true,
   });
 
   // ── Derived data ────────────────────────────────────────────────────────────

package/registry/components/ui/data-table/utils.ts

@@ -147,6 +147,23 @@ export const RESERVED_PARAM_KEYS = new Set<string>(Object.values(PARAM_KEYS));
 const isNonEmptyExpanded = (e: ExpandedState | undefined): boolean =>
   e !== undefined && (e === true || Object.keys(e).length > 0);
 
+/**
+ * Structural equality for two `ExpandedState`s (each a boolean or an
+ * id -> boolean record). Lets the snapshot skip persisting `expanded` while it
+ * still matches the table's default.
+ */
+const expandedEquals = (
+  a: ExpandedState | undefined,
+  b: ExpandedState | undefined,
+): boolean => {
+  if (a === b) return true;
+  if (typeof a === "boolean" || typeof b === "boolean") return false;
+  if (!a || !b) return false;
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  return aKeys.every((k) => a[k] === b[k]);
+};
+
 /**
  * Build a `PersistedState` snapshot from current state, omitting empty/default
  * slices so the persisted blob (URL or storage) stays minimal.
@@ -183,7 +200,15 @@ export function snapshotPersistedState(input: SnapshotInput): PersistedState {
     out.columnSizing = input.columnSizing;
   }
   if (input.grouping.length > 0) out.grouping = input.grouping;
-  if (isNonEmptyExpanded(input.expanded)) out.expanded = input.expanded;
+  // Persist expansion only when it deviates from the default - otherwise the
+  // default (`true` = all groups expanded) writes a noisy `?expanded=true` even
+  // when the user never touched a group.
+  if (
+    isNonEmptyExpanded(input.expanded) &&
+    !expandedEquals(input.expanded, input.defaultExpanded)
+  ) {
+    out.expanded = input.expanded;
+  }
 
   return out;
 }

package/registry/components/ui/input-fields/custom-select/custom-select.module.css

@@ -62,6 +62,17 @@
   max-width: 100% !important;
 }
 
+/* Trailing per-option meta (option.meta). The growing .option_label pushes it
+   to the row's end; consumers own the slot's visual styling. */
+.option_meta {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-inline-start: var(--spacing-3);
+  white-space: nowrap;
+}
+
 /* Trailing per-option delete affordance (option.onDelete). The growing
    .option_label pushes it to the row's end; muted until hovered, then
    error-toned. Click is stopPropagation'd in the component so it never