@gtivr4/a1-design-system-react 0.1.0 → 0.2.3

package/src/components/data-table/DataTableFilters.jsx

@@ -0,0 +1,339 @@
+import { useRef, useState } from "react";
+import { Button } from "../button/Button.jsx";
+import { Icon } from "../icon/Icon.jsx";
+import { Menu, MenuSection, MenuItem } from "../menu/Menu.jsx";
+import "./data-table-filters.css";
+
+/**
+ * filters: Array<{
+ *   key: string,
+ *   label: string,
+ *   type?: "single" | "multi",   default "single"
+ *   options: Array<{ value: string, label: string }>,
+ * }>
+ * value: Record<string, string | string[]>
+ *   single → string ("" = no filter)
+ *   multi  → string[] ([] = no filter)
+ *
+ * searchValue?: string
+ * onSearchChange?: (text: string) => void
+ * searchColumn?: string          — key of column being searched; "" = all
+ * onSearchColumnChange?: (key: string) => void
+ * searchableColumns?: Array<{ key: string, label: string }>
+ */
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function getSublabel(filter, selected) {
+  if (filter.type === "multi") {
+    const arr = Array.isArray(selected) ? selected : [];
+    if (arr.length === 0) return null;
+    if (arr.length === 1) return filter.options.find((o) => o.value === arr[0])?.label ?? arr[0];
+    return `${arr.length}`;
+  }
+  if (!selected) return null;
+  return filter.options.find((o) => o.value === selected)?.label ?? selected;
+}
+
+function isFilterActive(filter, selected) {
+  if (filter.type === "multi") return Array.isArray(selected) && selected.length > 0;
+  return Boolean(selected);
+}
+
+function radioIcon(checked) { return checked ? "radio_button_checked" : "radio_button_unchecked"; }
+function checkIcon(checked) { return checked ? "check_box"            : "check_box_outline_blank"; }
+
+// ── FilterChip (desktop only) ─────────────────────────────────────────────────
+
+function FilterChip({ filter, selected, onSet }) {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+
+  const isMulti  = filter.type === "multi";
+  const arr      = isMulti ? (Array.isArray(selected) ? selected : []) : null;
+  const sublabel = getSublabel(filter, selected);
+  const isActive = isFilterActive(filter, selected);
+
+  function handleOption(optValue) {
+    if (isMulti) {
+      const next = arr.includes(optValue)
+        ? arr.filter((v) => v !== optValue)
+        : [...arr, optValue];
+      onSet(next);
+      // keep open so user can pick multiple
+    } else {
+      onSet(selected === optValue ? "" : optValue);
+      setOpen(false); // close after single pick
+    }
+  }
+
+  return (
+    <div className="a1-dt-filters__chip-wrap">
+      <button
+        ref={anchorRef}
+        type="button"
+        className={[
+          "a1-dt-filters__chip",
+          isActive && "a1-dt-filters__chip--active",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+      >
+        <span>{filter.label}</span>
+        {sublabel && (
+          <>
+            <span className="a1-dt-filters__chip-sep" aria-hidden="true">:</span>
+            <span className="a1-dt-filters__chip-value">{sublabel}</span>
+          </>
+        )}
+        <Icon
+          name={open ? "expand_less" : "expand_more"}
+          className="a1-dt-filters__chip-icon"
+        />
+      </button>
+
+      <Menu
+        open={open}
+        anchorRef={anchorRef}
+        onClose={() => setOpen(false)}
+        aria-label={filter.label}
+      >
+        {!isMulti && (
+          <MenuItem
+            key="__all__"
+            icon={radioIcon(!selected)}
+            className={!selected ? "a1-dt-filters__item--on" : ""}
+            onClick={() => { onSet(""); setOpen(false); }}
+          >
+            All
+          </MenuItem>
+        )}
+        {filter.options.map((opt) => {
+          const checked = isMulti ? arr.includes(opt.value) : selected === opt.value;
+          const icon    = isMulti ? checkIcon(checked) : radioIcon(checked);
+          return (
+            <MenuItem
+              key={opt.value}
+              icon={icon}
+              className={checked ? "a1-dt-filters__item--on" : ""}
+              onClick={() => handleOption(opt.value)}
+            >
+              {opt.label}
+            </MenuItem>
+          );
+        })}
+        {isMulti && isActive && (
+          <div className="a1-dt-filters__menu-clear">
+            <Button
+              variant="tertiary"
+              size="sm"
+              icon="close"
+              onClick={() => { onSet([]); setOpen(false); }}
+            >
+              Clear
+            </Button>
+          </div>
+        )}
+      </Menu>
+    </div>
+  );
+}
+
+// ── DataTableFilters ──────────────────────────────────────────────────────────
+
+export function DataTableFilters({
+  filters = [],
+  value = {},
+  onChange,
+  searchValue = "",
+  onSearchChange,
+  searchColumn = "",
+  onSearchColumnChange,
+  searchableColumns,
+  className = "",
+}) {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const mobileTriggerRef = useRef(null);
+
+  const hasSearch = Boolean(onSearchChange);
+
+  const activeCount = filters.filter((f) => isFilterActive(f, value[f.key])).length;
+  const hasActive   = activeCount > 0 || Boolean(searchValue);
+
+  function set(key, val) {
+    onChange?.({ ...value, [key]: val });
+  }
+
+  function clearAll() {
+    const cleared = {};
+    filters.forEach((f) => { cleared[f.key] = f.type === "multi" ? [] : ""; });
+    onChange?.(cleared);
+    onSearchChange?.("");
+  }
+
+  // ── Search field (shared between desktop and mobile) ──────────────────────
+
+  const searchField = hasSearch && (
+    <div className="a1-dt-filters__search-wrap">
+      <Icon name="search" className="a1-dt-filters__search-icon" />
+      <input
+        type="search"
+        className="a1-dt-filters__search-input"
+        value={searchValue}
+        onChange={(e) => onSearchChange(e.target.value)}
+        placeholder="Search…"
+        aria-label={searchColumn
+          ? `Search in ${searchableColumns?.find((c) => c.key === searchColumn)?.label ?? searchColumn}`
+          : "Search all fields"}
+      />
+      {searchableColumns?.length > 0 && (
+        <div className="a1-dt-filters__scope-wrap">
+          <select
+            className="a1-dt-filters__scope-select"
+            value={searchColumn}
+            onChange={(e) => onSearchColumnChange?.(e.target.value)}
+            aria-label="Search in field"
+          >
+            <option value="">All fields</option>
+            {searchableColumns.map((col) => (
+              <option key={col.key} value={col.key}>{col.label}</option>
+            ))}
+          </select>
+          <Icon name="expand_more" className="a1-dt-filters__scope-icon" />
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <div className={["a1-dt-filters", className].filter(Boolean).join(" ")}>
+
+      {/* ── Desktop: search + chip row (hidden at xs) ──────────────────── */}
+      <div className="a1-dt-filters__desktop">
+        {searchField}
+
+        {filters.length > 0 && (
+          <>
+            <span className="a1-dt-filters__label">Filters</span>
+            <div className="a1-dt-filters__chips">
+              {filters.map((f) => (
+                <FilterChip
+                  key={f.key}
+                  filter={f}
+                  selected={value[f.key] ?? (f.type === "multi" ? [] : "")}
+                  onSet={(v) => set(f.key, v)}
+                />
+              ))}
+            </div>
+          </>
+        )}
+
+        {hasActive && (
+          <Button variant="secondary" size="sm" onClick={clearAll} className="a1-dt-filters__clear-all">
+            Clear all
+          </Button>
+        )}
+      </div>
+
+      {/* ── Mobile / xs: search always visible + menu button ───────────── */}
+      <div className="a1-dt-filters__mobile">
+        {searchField}
+
+        {filters.length > 0 && (
+          <div ref={mobileTriggerRef} className="a1-dt-filters__mobile-trigger">
+            <Button
+              variant="secondary"
+              size="sm"
+              icon="filter_list"
+              onClick={() => setMobileOpen(true)}
+            >
+              Filters
+              {activeCount > 0 && (
+                <span
+                  className="a1-dt-filters__mobile-count"
+                  aria-label={`${activeCount} active`}
+                >
+                  {activeCount}
+                </span>
+              )}
+            </Button>
+          </div>
+        )}
+
+        {hasActive && (
+          <Button variant="secondary" size="sm" onClick={clearAll}>
+            Clear all
+          </Button>
+        )}
+
+        {filters.length > 0 && (
+          <Menu
+            open={mobileOpen}
+            anchorRef={mobileTriggerRef}
+            onClose={() => setMobileOpen(false)}
+            aria-label="Filters"
+          >
+            {filters.map((f) => {
+              const isMulti = f.type === "multi";
+              const val     = value[f.key];
+              const arr     = isMulti ? (Array.isArray(val) ? val : []) : null;
+
+              return (
+                <MenuSection key={f.key} label={f.label}>
+                  {!isMulti && (
+                    <MenuItem
+                      key="__all__"
+                      icon={radioIcon(!val)}
+                      className={!val ? "a1-dt-filters__item--on" : ""}
+                      onClick={() => set(f.key, "")}
+                    >
+                      All
+                    </MenuItem>
+                  )}
+                  {f.options.map((opt) => {
+                    const checked = isMulti ? arr.includes(opt.value) : val === opt.value;
+                    const icon    = isMulti ? checkIcon(checked) : radioIcon(checked);
+                    return (
+                      <MenuItem
+                        key={opt.value}
+                        icon={icon}
+                        className={checked ? "a1-dt-filters__item--on" : ""}
+                        onClick={() => {
+                          if (isMulti) {
+                            const next = arr.includes(opt.value)
+                              ? arr.filter((v) => v !== opt.value)
+                              : [...arr, opt.value];
+                            set(f.key, next);
+                          } else {
+                            set(f.key, val === opt.value ? "" : opt.value);
+                          }
+                        }}
+                      >
+                        {opt.label}
+                      </MenuItem>
+                    );
+                  })}
+                </MenuSection>
+              );
+            })}
+
+            {hasActive && (
+              <div className="a1-dt-filters__menu-clear">
+                <Button
+                  variant="tertiary"
+                  size="sm"
+                  onClick={() => { clearAll(); setMobileOpen(false); }}
+                >
+                  Clear all filters
+                </Button>
+              </div>
+            )}
+          </Menu>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/data-table/data-table-filters.css

@@ -0,0 +1,259 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   DataTableFilters
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.a1-dt-filters {
+  min-height: 32px;
+}
+
+/* ── Desktop chip row (hidden at xs ≤480px) ──────────────────────────────── */
+
+.a1-dt-filters__desktop {
+  display: flex;
+  align-items: center;
+  gap: var(--base-spacing-10);
+  flex-wrap: wrap;
+}
+
+/* ── Mobile layout (shown only at xs ≤480px) ─────────────────────────────── */
+
+.a1-dt-filters__mobile {
+  display: none;
+  align-items: center;
+  gap: var(--base-spacing-8);
+  flex-wrap: wrap;
+}
+
+.a1-dt-filters__mobile-trigger {
+  display: contents;
+}
+
+@media (max-width: 480px) {
+  .a1-dt-filters__desktop { display: none; }
+  .a1-dt-filters__mobile  { display: flex; }
+}
+
+/* ── "Filters" label ─────────────────────────────────────────────────────── */
+
+.a1-dt-filters__label {
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-sm);
+  font-weight: 500;
+  color: var(--semantic-color-text-muted);
+  white-space: nowrap;
+  user-select: none;
+  margin-inline-start: var(--base-spacing-16);
+}
+
+/* ── Chip row ────────────────────────────────────────────────────────────── */
+
+.a1-dt-filters__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--base-spacing-6);
+  margin-inline-start: var(--base-spacing-6);
+}
+
+/* ── Chip + clear button wrapper ─────────────────────────────────────────── */
+
+.a1-dt-filters__chip-wrap {
+  display: flex;
+  align-items: stretch;
+}
+
+/* ── Filter chip button ──────────────────────────────────────────────────── */
+
+.a1-dt-filters__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-spacing-4);
+  padding: var(--base-spacing-6) var(--base-spacing-12);
+  border: 1px solid var(--semantic-color-border-default);
+  border-radius: 9999px;
+  background: transparent;
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-sm);
+  color: var(--semantic-color-text-default);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 100ms ease, border-color 100ms ease;
+}
+
+.a1-dt-filters__chip:hover {
+  background: var(--semantic-color-surface-raised);
+}
+
+.a1-dt-filters__chip:focus-visible {
+  outline: 2px solid var(--semantic-color-action-background);
+  outline-offset: 2px;
+}
+
+/* Active state — a value is selected */
+.a1-dt-filters__chip--active {
+  border-color: var(--semantic-color-action-background);
+  color: var(--semantic-color-action-background);
+}
+
+.a1-dt-filters__chip-sep {
+  color: var(--semantic-color-text-muted);
+  font-weight: 400;
+}
+
+.a1-dt-filters__chip-value {
+  font-weight: 500;
+}
+
+.a1-dt-filters__chip-icon {
+  font-size: 18px;
+  flex-shrink: 0;
+  margin-inline-start: -2px;
+}
+
+/* ── Radio / checkbox icon color in open menu ────────────────────────────── */
+
+.a1-dt-filters__item--on .a1-menu-item__icon {
+  color: var(--semantic-color-action-background);
+}
+
+
+/* ── Clear all button (desktop) ─────────────────────────────────────────── */
+
+.a1-dt-filters__clear-all {
+  margin-inline-start: var(--base-spacing-16);
+}
+
+/* ── Mobile active-filter count badge ───────────────────────────────────── */
+
+.a1-dt-filters__mobile-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding-inline: var(--base-spacing-4);
+  border-radius: 9999px;
+  background: var(--semantic-color-action-background);
+  color: var(--semantic-color-action-foreground);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  margin-inline-start: var(--base-spacing-4);
+}
+
+/* ── Mobile menu clear section ───────────────────────────────────────────── */
+
+.a1-dt-filters__menu-clear {
+  padding: var(--base-spacing-8) var(--base-spacing-16) var(--base-spacing-16);
+}
+
+/* ── Search field — matches compact TextField exactly ────────────────────── */
+
+.a1-dt-filters__search-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  /* Compact field geometry */
+  height: var(--component-field-compact-height);
+  border: var(--component-field-border-width) solid var(--semantic-color-border-strong);
+  border-radius: var(--component-field-compact-border-radius);
+  background: var(--semantic-color-surface-page);
+  min-width: 200px;
+  overflow: hidden;
+  transition:
+    border-color var(--semantic-motion-duration-fast),
+    background var(--semantic-motion-duration-fast);
+}
+
+.a1-dt-filters__search-wrap:hover:not(:focus-within) {
+  background: var(--a1-field-hover-background);
+  border-color: var(--a1-field-hover-border-color);
+}
+
+.a1-dt-filters__search-wrap:focus-within {
+  border-color: var(--semantic-color-action-background);
+  outline: var(--component-field-focus-ring-width) solid var(--component-field-focus-ring-color);
+  outline-offset: var(--component-field-focus-ring-offset);
+}
+
+/* Search icon — 16px matches chevron-size-compact */
+.a1-dt-filters__search-icon {
+  position: absolute;
+  left: var(--component-field-compact-padding-inline);
+  font-size: var(--component-field-chevron-size-compact);
+  color: var(--semantic-color-text-muted);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+/* Input — fills remaining space; no individual border/outline */
+.a1-dt-filters__search-input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  background: transparent;
+  /* Left padding = field padding-inline + icon + gap (4px) */
+  padding-inline-start: calc(
+    var(--component-field-compact-padding-inline) +
+    var(--component-field-chevron-size-compact) +
+    var(--component-field-compact-gap)
+  );
+  padding-inline-end: var(--component-field-compact-padding-inline);
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-sm);
+  font-weight: var(--base-font-weight-regular);
+  color: var(--semantic-color-text-default);
+  outline: none;
+}
+
+.a1-dt-filters__search-input::-webkit-search-cancel-button { display: none; }
+
+.a1-dt-filters__search-input::placeholder {
+  color: var(--semantic-color-text-muted);
+  font-weight: var(--base-font-weight-regular);
+}
+
+/* ── Scope selector (right side of search) ───────────────────────────────── */
+
+.a1-dt-filters__scope-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  border-inline-start: var(--component-field-border-width) solid var(--semantic-color-border-subtle);
+}
+
+.a1-dt-filters__scope-select {
+  appearance: none;
+  -webkit-appearance: none;
+  height: 100%;
+  border: none;
+  background: var(--semantic-color-surface-panel);
+  /* Right padding accommodates the chevron icon */
+  padding-inline-start: var(--component-field-compact-padding-inline);
+  padding-inline-end: calc(var(--component-field-chevron-size-compact) + var(--component-field-compact-padding-inline));
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-xs);
+  color: var(--semantic-color-text-muted);
+  cursor: pointer;
+  max-width: 120px;
+  outline: none;
+}
+
+/* Chevron for scope select */
+.a1-dt-filters__scope-icon {
+  position: absolute;
+  right: var(--component-field-compact-padding-inline);
+  font-size: var(--component-field-chevron-size-compact);
+  color: var(--semantic-color-text-muted);
+  pointer-events: none;
+}
+
+/* Mobile: search stretches to fill the row */
+@media (max-width: 480px) {
+  .a1-dt-filters__search-wrap {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+}