aplance-ui 1.3.0 → 1.5.0

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/filters.tsx

@@ -0,0 +1,21 @@
+import { useMediaQuery } from "../../../hooks/useMediaQuery";
+import { FilterBar } from "./filter-bar";
+import { FilterModal } from "./filter-modal";
+import type { FilterBarProps } from "./types";
+
+// Below this width an inline filter row can't fit its fields (matches the
+// `--md` custom-media token in styles/media.css): the filters collapse into a
+// single "Filters" button and a modal instead of stacking full-height.
+const FILTER_COMPACT_QUERY = "(max-width: 900px)";
+
+/**
+ * A list's filters: the inline <FilterBar> while it fits, the <FilterModal>
+ * on a narrower screen. DataTable shows its filters through it; a list built
+ * on its own uses it the same way.
+ */
+export const Filters = (props: FilterBarProps) =>
+  useMediaQuery(FILTER_COMPACT_QUERY) ? (
+    <FilterModal {...props} />
+  ) : (
+    <FilterBar {...props} />
+  );

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

@@ -8,6 +8,7 @@ import clsx from "clsx";
 import { Button } from "../button/button";
 import { CustomSelect } from "../input-fields/custom-select/custom-select";
 import { Loader } from "../loader/loader";
+import { ScrollRail } from "../scroll-rail/scroll-rail";
 import type { PaginationBarProps } from "./types";
 import s from "./data-table.module.css";
 
@@ -28,6 +29,7 @@ export const PaginationBar = <TData,>({
   rowLabel,
   rowsSelectable,
   selectedCount,
+  label,
   extra,
 }: PaginationBarProps<TData>) => {
   const pageCount = table.getPageCount();
@@ -42,6 +44,7 @@ export const PaginationBar = <TData,>({
   const pageNavItems = [
     {
       key: "first",
+      edge: true,
       label: "First page",
       icon: <IconChevronsLeft size={14} stroke={2} />,
       onClick: () => goTo(0),
@@ -63,6 +66,7 @@ export const PaginationBar = <TData,>({
     },
     {
       key: "last",
+      edge: true,
       label: "Last page",
       icon: <IconChevronsRight size={14} stroke={2} />,
       onClick: () => goTo(pageCount - 1),
@@ -111,11 +115,9 @@ export const PaginationBar = <TData,>({
   );
 
   return (
-    <div
-      className={clsx(s.pagination_bar, isLoading && s.pagination_bar_loading)}
-      aria-busy={isLoading || undefined}
-    >
-      {/* left - count + optional bulk-action extra slot */}
+    <div className={s.pagination_bar} aria-busy={isLoading || undefined}>
+      {/* left - the count (or the caller's label), then the extra slot,
+          which scrolls on its own while the count stays put */}
       <div
         className={clsx(
           s.pagination_left,
@@ -131,18 +133,26 @@ export const PaginationBar = <TData,>({
         ) : (
           <>
             <p className={s.pagination_count}>
-              {rowsSelectable && selectedCount > 0 ? (
-                <>
-                  <span>{selectedCount}</span> of <span>{total}</span>{" "}
-                  {rowLabel}(s) selected
-                </>
-              ) : (
-                <>
-                  <span>{total}</span> {rowLabel}(s)
-                </>
-              )}
+              {label ??
+                (rowsSelectable && selectedCount > 0 ? (
+                  <>
+                    <span>{selectedCount}</span> of <span>{total}</span>{" "}
+                    {rowLabel}(s) selected
+                  </>
+                ) : (
+                  <>
+                    <span>{total}</span> {rowLabel}(s)
+                  </>
+                ))}
             </p>
-            {extra}
+            {extra ? (
+              <ScrollRail
+                className={s.pagination_extra}
+                contentClassName={s.pagination_extra_items}
+              >
+                {extra}
+              </ScrollRail>
+            ) : null}
           </>
         )}
       </div>
@@ -205,7 +215,10 @@ export const PaginationBar = <TData,>({
                   <Loader
                     key={`${item.key}-skeleton`}
                     variant="skeleton"
-                    className={s.pagination_button_skeleton}
+                    className={clsx(
+                      s.pagination_button_skeleton,
+                      item.edge && s.page_nav_edge,
+                    )}
                   />
                 ))
               : pageNavItems.map((item) => (
@@ -213,6 +226,7 @@ export const PaginationBar = <TData,>({
                     key={item.key}
                     variant="bordered"
                     layout="box"
+                    className={item.edge ? s.page_nav_edge : undefined}
                     onClick={item.onClick}
                     disabled={item.disabled}
                     aria-label={item.label}

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

@@ -159,6 +159,7 @@ export interface PaginationBarProps<TData> {
   rowLabel: string;
   rowsSelectable: boolean;
   selectedCount: number;
+  label: ReactNode;
   extra: ReactNode;
 }
 
@@ -298,10 +299,19 @@ export interface DataTableProps<TData extends { id: string }> {
 
   /**
    * Slot rendered inside the pagination bar next to the count text.
-   * Perfect for bulk-action buttons. Does not shift table layout.
+   * Perfect for bulk-action buttons. Does not shift table layout: when it
+   * does not fit, it scrolls across on its own (a ScrollRail) while the count
+   * stays put.
    */
   paginationExtra?: ReactNode;
 
+  /**
+   * Replaces the pagination bar's count text, e.g. for a selection that
+   * reaches past the loaded rows ("All 120 files selected"). Numbers wrapped
+   * in a `<span>` are emphasised like the default count's.
+   */
+  paginationLabel?: ReactNode;
+
   className?: string;
 }
 
@@ -556,6 +566,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 +585,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

@@ -260,8 +260,7 @@ export function useDataTable<TData extends { id: string }>({
         return;
       }
       const next = [...prev];
-      const [moved] = next.splice(draggedIdx, 1);
-      next.splice(targetIdx, 0, moved);
+      next.splice(targetIdx, 0, ...next.splice(draggedIdx, 1));
       localDataRef.current = next;
       setLocalData(next);
       onDataChange?.(next);
@@ -334,6 +333,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;
 }
@@ -333,9 +358,10 @@ export function writeSearchParams(
     params.delete(p(PARAM_KEYS.pageSize));
   }
 
-  if (state.sorting && state.sorting.length > 0) {
-    params.set(p(PARAM_KEYS.sortBy), state.sorting[0].id);
-    params.set(p(PARAM_KEYS.sortDir), state.sorting[0].desc ? "desc" : "asc");
+  const sort = state.sorting?.[0];
+  if (sort) {
+    params.set(p(PARAM_KEYS.sortBy), sort.id);
+    params.set(p(PARAM_KEYS.sortDir), sort.desc ? "desc" : "asc");
   } else {
     params.delete(p(PARAM_KEYS.sortBy));
     params.delete(p(PARAM_KEYS.sortDir));

package/registry/components/ui/input-fields/common/input-field-common.module.css

@@ -1,6 +1,9 @@
-.container {
+.container {
   width: 100%;
-  min-width: fit-content;
+  /* A field takes the width its layout gives it, never its content's: a long
+     value truncates instead of pushing the field over its neighbour in a grid
+     column or a flex row. */
+  min-width: 0;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
@@ -248,6 +251,9 @@
    Keep these after .field_default so they reliably override base paddings. */
 .field_full_width {
   width: 100% !important;
+  /* Fills the field and no more: a button is otherwise never narrower than
+     its label (`--button-min-width`), which would defeat `.truncate_text`. */
+  --button-min-width: 0;
 }
 
 .field_wrapper_fit {

package/registry/components/ui/input-fields/common/picker-popover-common.module.css

@@ -10,6 +10,10 @@
 
 .picker_popover_trigger {
   width: 100%;
+  /* A field's trigger takes the field's width, never its value's: Popover
+     keeps a trigger at least as wide as its content (right for a plain
+     button), which would push a long value over the next field. */
+  --popover-trigger-min-width: 0;
 }
 
 .picker_popover_menu_base {

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

@@ -1,76 +1,118 @@
-/* uses input-field-common (.container and all) 
-+ popover related stuff
-*/
-
-/* actual menu selector */
-.popover_menu {
-  --picker-popover-menu-width: 100%;
-  width: 100%;
-  border-radius: calc(var(--radius-md) + var(--spacing-2));
-
-  /* Search container */
-  .search_container {
-    padding: var(--spacing-4);
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  /* Options container */
-  .options_container {
-    width: 100%;
-    max-height: 16rem;
-    overflow-y: auto;
-    padding: var(--spacing-2);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-2);
-
-    .no_options {
-      padding: var(--spacing-4);
-      text-align: center;
-      color: var(--color-muted-foreground);
-      font-size: var(--font-size-sm);
-    }
-
-    /* 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 */
-      padding: var(--spacing-3) var(--spacing-4);
-      border-radius: var(--radius-md);
-
-      /* > 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 {
-        flex: 1 1 auto;
-        min-width: 0;
-        text-align: start;
-      }
-    }
-  }
-}
-
-.option_label {
-  max-width: 100% !important;
-}
-
-/* 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);
-  }
-}
+/* uses input-field-common (.container and all) 
++ popover related stuff
+*/
+
+/* actual menu selector */
+.popover_menu {
+  --picker-popover-menu-width: 100%;
+  width: 100%;
+  border-radius: calc(var(--radius-md) + var(--spacing-2));
+
+  /* Search container */
+  .search_container {
+    padding: var(--spacing-4);
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  /* Options container */
+  .options_container {
+    width: 100%;
+    max-height: 16rem;
+    overflow-y: auto;
+    padding: var(--spacing-2);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+
+    .no_options {
+      padding: var(--spacing-4);
+      text-align: center;
+      color: var(--color-muted-foreground);
+      font-size: var(--font-size-sm);
+    }
+
+    /* Option button */
+    .option {
+      width: 100%;
+      /* The list scrolls; an option keeps its height. The button base sets a
+         min-height, which would otherwise let a long list squeeze each option
+         down to it, its text spilling over the next. */
+      flex-shrink: 0;
+      /* 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 */
+      padding: var(--spacing-3) var(--spacing-4);
+      border-radius: var(--radius-md);
+
+      /* > 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 {
+        flex: 1 1 auto;
+        min-width: 0;
+        text-align: start;
+      }
+
+      /* With a description: two lines, so more room around them, and what
+         leads the row (a checkbox, an icon) sits at the label's line. */
+      &.option_rich {
+        padding-block: var(--spacing-5);
+        align-items: flex-start;
+      }
+    }
+  }
+}
+
+.option_label {
+  max-width: 100% !important;
+}
+
+/* An option with a description: its label over a line saying what it does.
+   The pair takes the row's slack, as a label alone does, and the line wraps:
+   the button base keeps its text on one line. */
+.option_text {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  text-align: start;
+}
+
+.option_description {
+  color: var(--color-muted-foreground);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-md);
+  white-space: normal;
+}
+
+/* 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);
+  }
+}