aplance-ui 1.5.2 → 1.6.0

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

@@ -1,18 +1,44 @@
 import { Fragment } from "react";
-import type { FilterBarProps } from "./types";
+import { FilterSheet } from "./filter-sheet";
+import type { FilterBarProps, FilterField } from "./types";
+import { placementOf, renderFilter } from "./utils";
 import s from "./data-table.module.css";
 
+interface FilterRowProps extends FilterBarProps {
+  /** The filters kept behind the "Filters" button at the row's end. */
+  kept: FilterField[];
+  /** The button shows only its icon, beside the row's own fields. */
+  iconOnly?: boolean;
+}
+
 /**
- * Headless single-row filter bar.
+ * A single row of filters, then the "Filters" button for those kept off it.
  * Each field owns its rendering via a render-prop and sets its own grid
- * column width. The bar never wraps - consumers pick widths that fit.
+ * column width. The row never wraps - consumers pick widths that fit.
+ * With no field of its own, the row is the button alone, with its label; with
+ * no filter at all, it renders nothing.
  *
  * Width defaults: input fields -> `1fr`, actions -> `auto`.
  */
-export const FilterBar = ({ fields, values, onChange }: FilterBarProps) => {
-  const gridCols = fields
-    .map((f) => f.width ?? (f.type === "action" ? "auto" : "1fr"))
-    .join(" ");
+export const FilterRow = ({
+  fields,
+  kept,
+  values,
+  onChange,
+  iconOnly = false,
+}: FilterRowProps) => {
+  if (fields.length === 0 && kept.length === 0) return null;
+  if (fields.length === 0) {
+    return (
+      <div className={s.filter_modal_bar}>
+        <FilterSheet fields={kept} values={values} onChange={onChange} />
+      </div>
+    );
+  }
+  const gridCols = [
+    ...fields.map((f) => f.width ?? (f.type === "action" ? "auto" : "1fr")),
+    ...(kept.length > 0 ? ["auto"] : []),
+  ].join(" ");
 
   return (
     <div className={s.filter_bar} style={{ gridTemplateColumns: gridCols }}>
@@ -20,14 +46,31 @@ export const FilterBar = ({ fields, values, onChange }: FilterBarProps) => {
         <Fragment
           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),
-              })}
+          {renderFilter(field, values, onChange)}
         </Fragment>
       ))}
+      {kept.length > 0 && (
+        <FilterSheet
+          fields={kept}
+          values={values}
+          onChange={onChange}
+          iconOnly={iconOnly}
+        />
+      )}
     </div>
   );
 };
+
+/**
+ * Headless filter bar for a screen wide enough: every filter in one row,
+ * but those placed in the modal, which sit behind a "Filters" button at its
+ * end.
+ */
+export const FilterBar = ({ fields, values, onChange }: FilterBarProps) => (
+  <FilterRow
+    fields={fields.filter((f) => placementOf(f) !== "modal")}
+    kept={fields.filter((f) => placementOf(f) === "modal")}
+    values={values}
+    onChange={onChange}
+  />
+);

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

@@ -1,86 +1,20 @@
-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 { FilterRow } from "./filter-bar";
 import type { FilterBarProps } from "./types";
-import s from "./data-table.module.css";
+import { placementOf } from "./utils";
 
 /**
- * Small-screen counterpart to <FilterBar>. It keeps filtering live while moving
- * the same field contract into a Modal bottom sheet.
+ * Small-screen counterpart to <FilterBar>. The filters placed inline, as a
+ * search, keep their place in the row with an icon "Filters" button beside
+ * them; every other filter moves into its modal, a bottom sheet on phones,
+ * still filtering live. With no inline filter, the button stands alone with
+ * its label.
  */
-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>
-  );
-};
+export const FilterModal = ({ fields, values, onChange }: FilterBarProps) => (
+  <FilterRow
+    fields={fields.filter((f) => placementOf(f) === "inline")}
+    kept={fields.filter((f) => placementOf(f) !== "inline")}
+    values={values}
+    onChange={onChange}
+    iconOnly
+  />
+);

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

@@ -0,0 +1,97 @@
+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 { FilterSheetProps } from "./types";
+import { isFilterSet, renderFilter } from "./utils";
+import s from "./data-table.module.css";
+
+/**
+ * The "Filters" button and the modal it opens: the filters kept off a row,
+ * stacked, with Clear all and Done. The button counts the filters in use,
+ * each against its own default; the modal is a bottom sheet on phones.
+ */
+export const FilterSheet = ({
+  fields,
+  values,
+  onChange,
+  iconOnly = false,
+}: FilterSheetProps) => {
+  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 badge and Clear all.
+  const inUse = fields.filter(
+    (field) => field.type === "field" && isFilterSet(field, values),
+  );
+  const clearAll = () => {
+    inUse.forEach((field) => {
+      if (field.type === "field") onChange(field.key, field.defaultValue ?? "");
+    });
+  };
+  // One name for every layout: the icon-only button has no visible text, and
+  // the count badge alone reads as a bare number.
+  const label =
+    inUse.length > 0 ? `Filters, ${inUse.length} in use` : "Filters";
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant="bordered"
+        layout={iconOnly && inUse.length === 0 ? "box" : "default"}
+        className={s.filter_trigger}
+        aria-label={label}
+        onClick={() => setIsOpen(true)}
+      >
+        <Icon>
+          <IconFilter />
+        </Icon>
+        {iconOnly ? null : "Filters"}
+        {inUse.length > 0 && (
+          <span className={s.filter_count} aria-hidden="true">
+            {inUse.length}
+          </span>
+        )}
+      </Button>
+
+      <Modal isOpen={isOpen} onOpenChange={setIsOpen} 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}`}
+              >
+                {renderFilter(field, values, onChange)}
+              </div>
+            ))}
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={clearAll}
+            disabled={inUse.length === 0}
+          >
+            Clear all
+          </Button>
+          <Button type="button" variant="primary" onClick={() => setIsOpen(false)}>
+            Done
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+};

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

@@ -1,21 +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} />
-  );
+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

@@ -4,6 +4,7 @@ import {
   IconChevronsLeft,
   IconChevronsRight,
 } from "@tabler/icons-react";
+import type { RowData } from "@tanstack/react-table";
 import clsx from "clsx";
 import { Button } from "../button/button";
 import { CustomSelect } from "../input-fields/custom-select/custom-select";
@@ -18,7 +19,7 @@ const getSkeletonWidth = (
   maxCharacters: number,
 ) => `${Math.min(maxCharacters, Math.max(minCharacters, characters))}ch`;
 
-export const PaginationBar = <TData,>({
+export const PaginationBar = <TData extends RowData>({
   table,
   pagination,
   onPaginationChange,
@@ -32,6 +33,7 @@ export const PaginationBar = <TData,>({
   label,
   extra,
 }: PaginationBarProps<TData>) => {
+  // -1 while the total is unknown (server-side, nothing counted yet).
   const pageCount = table.getPageCount();
   const total = totalCount ?? table.getRowCount();
   const canPrev = table.getCanPreviousPage();
@@ -82,11 +84,7 @@ export const PaginationBar = <TData,>({
     .map((n) => ({ value: String(n), label: String(n) }));
 
   const resolvedPageCount =
-    pageCount > 0
-      ? pageCount
-      : totalCount === undefined
-        ? Math.max(1, pagination.pageIndex + 1)
-        : Math.max(1, Math.ceil(totalCount / pagination.pageSize));
+    pageCount > 0 ? pageCount : Math.max(1, pagination.pageIndex + 1);
   const countSkeletonWidth = getSkeletonWidth(
     String(total).length +
       rowLabel.length +