aplance-ui 1.2.2 → 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 }),
@@ -345,11 +355,11 @@ export const DataTable = <TData extends { id: string }>({
   // ── Sync header/body scrolling ──────────────────────────────────────────────
   // The header lives in its own `overflow:hidden` container; we drive its
   // scrollLeft from the body's scrollLeft on every scroll event so pinned
-  // columns stay perfectly aligned with their body counterparts.
-  const headerRef = useRef<HTMLDivElement>(null);
-  const bodyRef = useRef<HTMLDivElement>(null);
-  const bodyTableRef = useRef<HTMLTableElement>(null);
-  const skeletonRowRef = useRef<HTMLTableRowElement>(null);
+  // columns stay perfectly aligned with their body counterparts.
+  const headerRef = useRef<HTMLDivElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const bodyTableRef = useRef<HTMLTableElement>(null);
+  const skeletonRowRef = useRef<HTMLTableRowElement>(null);
   const rows = table.getRowModel().rows;
   const headerCount = table.getFlatHeaders().length;
   const totalWidth = table.getTotalSize();
@@ -402,6 +412,9 @@ export const DataTable = <TData extends { id: string }>({
       paddingRight,
     );
     header.parentElement?.setAttribute("data-has-scroll", hasScroll.toString());
+    // Mirror onto the body wrap so CSS can release the reserved scrollbar gutter
+    // when there's no vertical overflow (no blank strip on a few-row table).
+    body.setAttribute("data-has-scroll", hasScroll.toString());
 
     // Re-sync horizontal scroll position after width changes so pinned
     // columns stay perfectly aligned with their body counterparts.
@@ -465,7 +478,7 @@ export const DataTable = <TData extends { id: string }>({
   }, []);
 
   // ── Derived UI state ────────────────────────────────────────────────────────
-  // Defer the empty state by a tick after a loading-to-idle transition so the
+  // Defer the empty state by a tick after a loading-to-idle transition so the
   // loader doesn't flicker into "no results" for one paint before rows land.
   // Genuinely empty results (no in-flight load) commit immediately on mount.
   const isRowsEmpty = rows.length === 0;
@@ -474,6 +487,9 @@ export const DataTable = <TData extends { id: string }>({
   );
   const wasLoadingRef = useRef(isLoading);
 
+  // wasLoadingRef is intentionally omitted from the dep array: it's a ref used
+  // to track the previous value of isLoading across renders without triggering
+  // re-runs. React guarantees ref objects are stable across the component lifetime.
   useEffect(() => {
     const wasLoading = wasLoadingRef.current;
     wasLoadingRef.current = isLoading;
@@ -482,18 +498,19 @@ export const DataTable = <TData extends { id: string }>({
       setShowEmptyState(false);
       return;
     }
-    if (wasLoading) {
-      const id = window.setTimeout(
-        () => setShowEmptyState(true),
-        EMPTY_STATE_GRACE_MS,
-      );
-      return () => window.clearTimeout(id);
+    if (!wasLoading) {
+      setShowEmptyState(true);
+      return;
     }
-    setShowEmptyState(true);
+    const id = window.setTimeout(
+      () => setShowEmptyState(true),
+      EMPTY_STATE_GRACE_MS,
+    );
+    return () => window.clearTimeout(id);
   }, [isLoading, isRowsEmpty]);
 
   // Single tab-like discriminator drives the body - loader, empty, or content.
-  // While loading OR while bridging the loading-to-empty grace window, the
+  // While loading OR while bridging the loading-to-empty grace window, the
   // loader stays visible to avoid the brief "no results" flash.
   const view: "loader" | "empty" | "content" =
     isLoading || (isRowsEmpty && !showEmptyState)
@@ -525,20 +542,20 @@ export const DataTable = <TData extends { id: string }>({
   const selectedCount = rowsSelectable
     ? table.getSelectedRowModel().flatRows.length
     : 0;
-  const headerGroups = table.getHeaderGroups();
-  const visibleLeafColumns = table.getVisibleLeafColumns();
-
-  const skeletonRowCount =
-    bodyViewportHeight > 0 && skeletonRowHeight > 0
-      ? Math.max(
+  const headerGroups = table.getHeaderGroups();
+  const visibleLeafColumns = table.getVisibleLeafColumns();
+
+  const skeletonRowCount =
+    bodyViewportHeight > 0 && skeletonRowHeight > 0
+      ? Math.max(
           MIN_SKELETON_ROWS,
           Math.floor(bodyViewportHeight / skeletonRowHeight),
         )
       : MIN_SKELETON_ROWS;
 
-  const columnExtraWidths = useMemo<Record<string, number>>(() => {
-    const extraSpace = Math.max(0, bodyViewportWidth - totalWidth);
-    if (extraSpace <= 0) return EMPTY_COLUMN_EXTRA_WIDTHS;
+  const columnExtraWidths = useMemo<Record<string, number>>(() => {
+    const extraSpace = Math.max(0, bodyViewportWidth - totalWidth);
+    if (extraSpace <= 0) return EMPTY_COLUMN_EXTRA_WIDTHS;
 
     // Never add responsive width onto pinned columns because tanstack computes
     // sticky offsets from base sizes; changing pinned visual width would desync
@@ -561,27 +578,27 @@ export const DataTable = <TData extends { id: string }>({
         remainder -= 1;
       }
     }
-
-    return next;
-  }, [bodyViewportWidth, totalWidth, visibleLeafColumns]);
-
-  const tableWidth = Math.max(totalWidth, bodyViewportWidth);
-
-  // Match the table element width to the measured column widths. This keeps
-  // header, body, and skeleton rows on the same sizing contract during resize.
-  const tableSizingStyle: CSSProperties = useMemo(
-    () => ({ width: `${tableWidth}px`, minWidth: `${totalWidth}px` }),
-    [tableWidth, totalWidth],
-  );
-
-  const bodySkeletonStyle: CSSProperties = {
-    height: "var(--spacing-9)",
-  };
-
-  const selectSkeletonStyle: CSSProperties = {
-    width: "var(--data-table-selection-control-size, var(--spacing-9))",
-    height: "var(--data-table-selection-control-size, var(--spacing-9))",
-  };
+
+    return next;
+  }, [bodyViewportWidth, totalWidth, visibleLeafColumns]);
+
+  const tableWidth = Math.max(totalWidth, bodyViewportWidth);
+
+  // Match the table element width to the measured column widths. This keeps
+  // header, body, and skeleton rows on the same sizing contract during resize.
+  const tableSizingStyle: CSSProperties = useMemo(
+    () => ({ width: `${tableWidth}px`, minWidth: `${totalWidth}px` }),
+    [tableWidth, totalWidth],
+  );
+
+  const bodySkeletonStyle: CSSProperties = {
+    height: "var(--spacing-9)",
+  };
+
+  const selectSkeletonStyle: CSSProperties = {
+    width: "var(--data-table-selection-control-size, var(--spacing-9))",
+    height: "var(--data-table-selection-control-size, var(--spacing-9))",
+  };
 
   const tableClass = clsx(
     s.table,
@@ -590,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 */}
@@ -644,66 +669,65 @@ export const DataTable = <TData extends { id: string }>({
           {/* Scrollable body - only this element scrolls. The body is a
               single switch over `view`: at most one branch ever renders, the
               other two are unmounted entirely. */}
-          <div
-            className={s.table_body_wrap}
-            style={{ pointerEvents: isLoading ? "none" : undefined }}
-            ref={bodyRef}
-          >
-            {view === "loader" && (
-              <table className={tableClass} style={tableSizingStyle}>
-                <tbody>
-                  {Array.from({ length: skeletonRowCount }).map(
-                    (_, rowIndex) => (
-                      <tr
-                        key={`skeleton-${rowIndex}`}
-                        ref={rowIndex === 0 ? skeletonRowRef : undefined}
-                      >
-                        {visibleLeafColumns.map((column) => {
-                          const isPinned = column.getIsPinned();
-                          const isLastPinnedCol =
-                            isPinned && isLastPinned(column);
-                          const isSelectColumn =
-                            column.id === SELECT_COLUMN_ID;
-
-                          return (
-                            <td
-                              key={column.id}
-                              className={clsx(
-                                isSelectColumn && s.col_select,
-                                isPinned === "left" && s.col_pinned_left,
-                                isPinned === "right" && s.col_pinned_right,
-                                isLastPinnedCol && s.col_pinned_last,
-                              )}
-                              style={getColumnStyle(
-                                column,
-                                column.getSize(),
-                                columnExtraWidths[column.id] ?? 0,
-                              )}
-                            >
-                              <div className={s.td_inner}>
-                                <Loader
-                                  variant="skeleton"
-                                  className={
-                                    isSelectColumn
-                                      ? s.loading_select_skeleton
-                                      : undefined
-                                  }
-                                  style={
-                                    isSelectColumn
-                                      ? selectSkeletonStyle
-                                      : bodySkeletonStyle
-                                  }
-                                />
-                              </div>
-                            </td>
-                          );
-                        })}
-                      </tr>
-                    ),
-                  )}
-                </tbody>
-              </table>
-            )}
+          <div
+            className={s.table_body_wrap}
+            style={{ pointerEvents: isLoading ? "none" : undefined }}
+            ref={bodyRef}
+          >
+            {view === "loader" && (
+              <table className={tableClass} style={tableSizingStyle}>
+                <tbody>
+                  {Array.from({ length: skeletonRowCount }).map(
+                    (_, rowIndex) => (
+                      <tr
+                        key={`skeleton-${rowIndex}`}
+                        ref={rowIndex === 0 ? skeletonRowRef : undefined}
+                      >
+                        {visibleLeafColumns.map((column) => {
+                          const isPinned = column.getIsPinned();
+                          const isLastPinnedCol =
+                            isPinned && isLastPinned(column);
+                          const isSelectColumn = column.id === SELECT_COLUMN_ID;
+
+                          return (
+                            <td
+                              key={column.id}
+                              className={clsx(
+                                isSelectColumn && s.col_select,
+                                isPinned === "left" && s.col_pinned_left,
+                                isPinned === "right" && s.col_pinned_right,
+                                isLastPinnedCol && s.col_pinned_last,
+                              )}
+                              style={getColumnStyle(
+                                column,
+                                column.getSize(),
+                                columnExtraWidths[column.id] ?? 0,
+                              )}
+                            >
+                              <div className={s.td_inner}>
+                                <Loader
+                                  variant="skeleton"
+                                  className={
+                                    isSelectColumn
+                                      ? s.loading_select_skeleton
+                                      : undefined
+                                  }
+                                  style={
+                                    isSelectColumn
+                                      ? selectSkeletonStyle
+                                      : bodySkeletonStyle
+                                  }
+                                />
+                              </div>
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    ),
+                  )}
+                </tbody>
+              </table>
+            )}
             {view === "empty" && (
               <div className={s.state_overlay}>
                 <p className={s.empty_msg}>{emptyMessage}</p>

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

@@ -34,6 +34,9 @@
     /* Option button */
     .option {
       width: 100%;
+      /* button base is min-width: fit-content - a long label must truncate
+         inside the row, never widen it past the menu */
+      min-width: 0;
       /* button has justify-content: space-between */
       justify-content: flex-start;
       /* modifying padding of actual button variant for consistency */
@@ -42,8 +45,14 @@
 
       /* > icon */
 
+      /* The label owns the row's slack space so trailing affordances
+         (.option_delete) always sit at the row's end - layout-driven, no
+         auto-margins (those tie with the Icon primitive's own margin reset
+         and the winner would depend on CSS bundle order). */
       .option_label {
-        max-width: 100% !important;
+        flex: 1 1 auto;
+        min-width: 0;
+        text-align: start;
       }
     }
   }
@@ -53,4 +62,26 @@
   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
+   selects the option. */
+.option_delete {
+  flex-shrink: 0;
+  --icon-color: var(--color-muted-foreground);
 
+  &:hover {
+    --icon-color: var(--color-error-foreground);
+  }
+}