Filter panel

function FilterPanelDemo() {
  type Severity = "critical" | "high" | "medium" | "low"
  type Indicator = {
    id: string
    value: string
    type: "domain" | "ip" | "url" | "hash"
    severity: Severity
    compromised: boolean
    tags: string[]
    firstSeen: string
  }

  const indicators = React.useMemo<Indicator[]>(() => {
    const domains = ["login-verify", "secure-docs", "cdn-update", "invoice-pay"]
    const tags = ["phishing", "botnet", "c2", "stealer", "ransomware", "loader"]
    const severities: Severity[] = ["critical", "high", "high", "medium", "low"]
    const types: Indicator["type"][] = ["domain", "ip", "domain", "url", "hash"]
    return Array.from({ length: 48 }, (_, index) => {
      const type = types[index % types.length]!
      const value =
        type === "ip"
          ? `203.0.113.${(index * 7) % 250}:443`
          : type === "hash"
            ? `9f2c${(index * 2654435761).toString(16).slice(0, 12)}`
            : type === "url"
              ? `https://${domains[index % 4]}.net/a/${index}`
              : `${domains[index % 4]}-${index}.com`
      return {
        id: `ioc-${index + 1}`,
        value,
        type,
        severity: severities[index % severities.length]!,
        compromised: index % 3 === 0,
        tags: [tags[index % tags.length]!, tags[(index + 2) % tags.length]!],
        firstSeen: `2026-10-${String(24 - (index % 20)).padStart(2, "0")} ${String(
          (index * 5) % 24
        ).padStart(2, "0")}:14:07`,
      }
    })
  }, [])

  const fields = React.useMemo(
    () =>
      defineFilterFields([
        {
          id: "severity",
          label: "Severity",
          kind: "multi",
          options: (["critical", "high", "medium", "low"] as const).map(
            (level) => ({
              value: level,
              label: level[0]!.toUpperCase() + level.slice(1),
              icon: (
                <span
                  className={`size-2 rounded-full ${severityBgClass[level]}`}
                />
              ),
            })
          ),
        },
        {
          id: "type",
          label: "Indicator type",
          kind: "single",
          options: [
            { value: "domain", label: "Domain" },
            { value: "ip", label: "IP:Port" },
            { value: "url", label: "URL" },
            { value: "hash", label: "SHA-256" },
          ],
        },
        { id: "compromised", label: "Compromised", kind: "boolean" },
        {
          id: "firstSeen",
          label: "First seen",
          kind: "date",
          presets: [
            { value: "today", label: "Today", days: 1 },
            { value: "7d", label: "Last 7 days", days: 7 },
            { value: "30d", label: "Last 30 days", days: 30 },
          ],
        },
        {
          id: "tags",
          label: "Tags",
          kind: "multi",
          options: [
            "phishing",
            "botnet",
            "c2",
            "stealer",
            "ransomware",
            "loader",
          ].map((tag) => ({ value: tag, label: tag })),
        },
      ]),
    []
  )

  // In an app, the value lives in the URL: filtersFromSearchParams and
  // filtersToSearchParams read and write it.
  const [value, setValue] = React.useState<FilterValues<typeof fields>>({
    severity: ["critical", "high"],
  })
  const [search, setSearch] = React.useState("")
  const filters = useFilters({ fields, value, onValueChange: setValue })

  // Presets stay relative in the value; resolve them with today's date in
  // the profile's time zone (filterDateToday), fixed here for the example.
  const seen = resolveFilterDate(value.firstSeen, {
    presets: fields[3].presets,
    today: "2026-10-24",
  })
  const seenFrom = seen?.from
  const seenTo = seen?.to

  // A row passes every field except `skip`: counts are disjunctive, so a
  // facet's counts ignore its own selection.
  const matches = React.useCallback(
    (row: Indicator, skip?: string) =>
      (!seenFrom || row.firstSeen.slice(0, 10) >= seenFrom) &&
      (!seenTo || row.firstSeen.slice(0, 10) <= seenTo) &&
      (skip === "severity" ||
        !value.severity ||
        value.severity.includes(row.severity)) &&
      (skip === "type" || !value.type || row.type === value.type) &&
      (skip === "compromised" ||
        value.compromised === undefined ||
        row.compromised === value.compromised) &&
      (skip === "tags" ||
        !value.tags ||
        value.tags.some((tag) => row.tags.includes(tag))) &&
      row.value.toLowerCase().includes(search.trim().toLowerCase()),
    [value, search, seenFrom, seenTo]
  )
  const countsFor = (field: "severity" | "type") => {
    const counts: Record<string, number> = {}
    for (const row of indicators) {
      if (matches(row, field))
        counts[row[field]] = (counts[row[field]] ?? 0) + 1
    }
    return counts
  }
  const rows = React.useMemo(
    () => indicators.filter((row) => matches(row)),
    [indicators, matches]
  )

  const columns = React.useMemo(() => {
    const column = createColumnHelper<Indicator>()
    return [
      column.accessor("value", {
        header: "Indicator",
        meta: { fluid: true, minWidth: 160 },
        cell: (info) => (
          <DataTableText mono strong>
            {info.getValue()}
          </DataTableText>
        ),
      }),
      column.accessor("severity", {
        header: "Severity",
        size: 100,
        cell: (info) => <SeverityBadge level={info.getValue()} />,
      }),
      column.accessor("firstSeen", {
        header: "First seen",
        size: 170,
        sortDescFirst: true,
        cell: (info) => (
          <DataTableText numeric>{info.getValue()}</DataTableText>
        ),
      }),
    ]
  }, [])
  const table = useDataTable({
    data: rows,
    columns,
    getRowId: (row) => row.id,
    defaultSorting: [{ id: "firstSeen", desc: true }],
  })

  return (
    <div className="flex h-[520px] w-full">
      {/* The docs column is narrow, so the sheet starts below 40rem here; an
          app keeps the default 60rem. */}
      <FilterPanelProvider
        filters={filters}
        total={rows.length}
        sheetBelow={40}
      >
        <FilterPanel>
          <FilterSection field="severity">
            <FilterCheckboxList
              field="severity"
              counts={countsFor("severity")}
            />
          </FilterSection>
          <FilterSection field="type">
            <FilterRadioList
              field="type"
              allLabel="All types"
              counts={countsFor("type")}
            />
          </FilterSection>
          <FilterSection field="compromised">
            <FilterRadioList field="compromised" />
          </FilterSection>
          <FilterSection field="firstSeen">
            <FilterDate field="firstSeen" />
          </FilterSection>
          <FilterSection field="tags">
            <FilterMultiSelect field="tags" placeholder="Search tags" />
          </FilterSection>
        </FilterPanel>
        <FilterPanelInset>
          <FilterPanelToolbar>
            <FilterPanelTrigger />
            <InputGroup size="sm" className="max-w-64">
              <InputGroupAddon>
                <SearchIcon />
              </InputGroupAddon>
              <InputGroupInput
                type="search"
                value={search}
                onChange={(event) => setSearch(event.target.value)}
                placeholder="Search indicators"
                aria-label="Search indicators"
              />
            </InputGroup>
            <span className="ms-auto text-sm text-text-secondary tabular-nums">
              {rows.length} indicators
            </span>
          </FilterPanelToolbar>
          <FilterChips />
          <DataTable
            table={table}
            label="Indicators of compromise"
            height="fill"
            total={rows.length}
            resultKey={JSON.stringify({ value, search })}
          />
        </FilterPanelInset>
      </FilterPanelProvider>
    </div>
  )
}

function FilterPanelMoreControls() {
  const fields = React.useMemo(
    () =>
      defineFilterFields([
        {
          id: "cvss",
          label: "CVSS",
          kind: "range",
          min: 0,
          max: 10,
          step: 0.1,
        },
        {
          id: "published",
          label: "Published",
          kind: "date",
          presets: [
            { value: "7d", label: "Last 7 days", days: 7 },
            { value: "30d", label: "Last 30 days", days: 30 },
          ],
        },
        {
          id: "country",
          label: "Country",
          kind: "text",
          normalize: (country) => country.trim().toUpperCase(),
        },
        {
          id: "kev",
          label: "Known exploited",
          kind: "boolean",
          trueOnly: true,
        },
        {
          id: "internet",
          label: "Internet-facing only",
          kind: "boolean",
          trueOnly: true,
        },
      ]),
    []
  )
  const [value, setValue] = React.useState<FilterValues<typeof fields>>({
    cvss: { min: 7 },
    country: ["BR"],
  })
  const filters = useFilters({ fields, value, onValueChange: setValue })
  const params = filtersToSearchParams(fields, value).toString()

  return (
    <div className="flex w-full flex-col gap-3">
      <div className="flex h-[540px] w-72">
        <FilterPanelProvider filters={filters} collapsible="none">
          <FilterPanel>
            <FilterSection field="cvss" description="Base score, 0 to 10.">
              <FilterNumberRange field="cvss" />
            </FilterSection>
            <FilterSection field="published">
              <FilterDate field="published" />
            </FilterSection>
            <FilterSection field="country">
              <FilterTokenInput field="country" placeholder="Add a code" />
            </FilterSection>
            <FilterSection fields={["kev", "internet"]} title="Exposure">
              <FilterSwitch
                field="kev"
                description="In the CISA catalog of exploited vulnerabilities."
              />
              <FilterSwitch field="internet" />
            </FilterSection>
          </FilterPanel>
        </FilterPanelProvider>
      </div>
      <p className="text-sm text-text-secondary">
        URL:{" "}
        <code className="font-mono">{params ? `?${params}` : "(none)"}</code>
      </p>
    </div>
  )
}

function FilterPanelNarrow() {
  const fields = React.useMemo(
    () =>
      defineFilterFields([
        {
          id: "status",
          label: "Status",
          kind: "multi",
          options: [
            { value: "open", label: "Open" },
            { value: "investigating", label: "Investigating" },
            { value: "resolved", label: "Resolved" },
          ],
        },
        {
          id: "assigned",
          label: "Assigned to me",
          kind: "boolean",
          trueOnly: true,
        },
      ]),
    []
  )
  const [value, setValue] = React.useState<FilterValues<typeof fields>>({
    status: ["open", "investigating"],
  })
  const filters = useFilters({ fields, value, onValueChange: setValue })
  const alerts = [
    {
      id: "ALR-1043",
      title: "Credential stuffing on vpn.acme.com",
      status: "open",
    },
    {
      id: "ALR-1042",
      title: "Beacon to 185.220.101.47",
      status: "investigating",
    },
    {
      id: "ALR-1039",
      title: "Phishing kit on login-verify-acme.com",
      status: "resolved",
    },
  ].filter((alert) => !value.status || value.status.includes(alert.status))

  return (
    <div className="flex h-64 w-full max-w-xl">
      <FilterPanelProvider filters={filters} total={alerts.length}>
        <FilterPanel>
          <FilterSection field="status">
            <FilterCheckboxList field="status" />
          </FilterSection>
          <FilterSection fields={["assigned"]} title="Assignment">
            <FilterSwitch field="assigned" />
          </FilterSection>
        </FilterPanel>
        <FilterPanelInset>
          <FilterPanelToolbar>
            <FilterPanelTrigger />
          </FilterPanelToolbar>
          <FilterChips />
          <ul className="divide-y divide-border text-sm">
            {alerts.map((alert) => (
              <li key={alert.id} className="flex gap-3 px-3 py-2">
                <span className="font-mono text-text-secondary">
                  {alert.id}
                </span>
                <span className="truncate">{alert.title}</span>
              </li>
            ))}
          </ul>
        </FilterPanelInset>
      </FilterPanelProvider>
    </div>
  )
}

function FilterPanelAlwaysOpen() {
  const fields = React.useMemo(
    () =>
      defineFilterFields([
        {
          id: "relation",
          label: "Relation",
          kind: "single",
          options: [
            { value: "resolves", label: "Resolves to" },
            { value: "downloads", label: "Downloads" },
            { value: "contacts", label: "Contacts" },
          ],
        },
      ]),
    []
  )
  const [value, setValue] = React.useState<FilterValues<typeof fields>>({})
  const filters = useFilters({ fields, value, onValueChange: setValue })
  const related = [
    { value: "185.220.101.47:443", relation: "resolves" },
    { value: "update-check.net/payload.bin", relation: "downloads" },
    { value: "91.92.240.18:8080", relation: "contacts" },
    { value: "45.137.21.9:4444", relation: "contacts" },
  ].filter((item) => !value.relation || item.relation === value.relation)

  return (
    <div className="flex h-72 w-full max-w-2xl">
      <FilterPanelProvider filters={filters} collapsible="none">
        <FilterPanel title="Related">
          <FilterSection field="relation">
            <FilterRadioList
              field="relation"
              counts={{ resolves: 1, downloads: 1, contacts: 2 }}
            />
          </FilterSection>
        </FilterPanel>
        <FilterPanelInset>
          <ul className="divide-y divide-border text-sm">
            {related.map((item) => (
              <li key={item.value} className="px-3 py-2 font-mono">
                {item.value}
              </li>
            ))}
          </ul>
        </FilterPanelInset>
      </FilterPanelProvider>
    </div>
  )
}

function FilterPanelToolbarFacet() {
  const fields = React.useMemo(
    () =>
      defineFilterFields([
        {
          id: "status",
          label: "Status",
          kind: "multi",
          options: [
            { value: "open", label: "Open" },
            { value: "investigating", label: "Investigating" },
            { value: "resolved", label: "Resolved" },
          ],
        },
      ]),
    []
  )
  const [value, setValue] = React.useState<FilterValues<typeof fields>>({
    status: ["open"],
  })
  const filters = useFilters({ fields, value, onValueChange: setValue })
  const statusButton = React.useRef<HTMLButtonElement>(null)

  return (
    <div className="flex w-full max-w-xl flex-col overflow-hidden rounded-lg border border-border">
      <div className="flex h-12 items-center gap-2 border-b border-border px-2.5">
        <Popover>
          <PopoverTrigger
            render={
              <Button ref={statusButton} variant="outline" size="sm">
                <ListFilterIcon data-icon="inline-start" />
                Status
              </Button>
            }
          />
          <PopoverContent align="start" className="w-56 p-2">
            <FilterCheckboxList
              field="status"
              filters={filters}
              counts={{ open: 12, investigating: 4, resolved: 31 }}
            />
          </PopoverContent>
        </Popover>
      </div>
      <FilterChips filters={filters} returnFocusRef={statusButton} />
      <p className="px-3 py-6 text-sm text-text-secondary">
        {filters.activeCount > 0
          ? `Alerts with status ${filters.formatValue("status")}`
          : "All alerts"}
      </p>
    </div>
  )
}

function FilterPanelCountStates() {
  const fields = React.useMemo(
    () =>
      defineFilterFields([
        {
          id: "source",
          label: "Source",
          kind: "multi",
          options: [
            { value: "edr", label: "EDR" },
            { value: "email", label: "Email gateway" },
            { value: "firewall", label: "Firewall" },
          ],
        },
      ]),
    []
  )
  const [value, setValue] = React.useState<FilterValues<typeof fields>>({
    source: ["email"],
  })
  const [state, setState] = React.useState("loaded")
  const filters = useFilters({ fields, value, onValueChange: setValue })

  return (
    <div className="flex w-full flex-col gap-3">
      <ToggleGroup
        variant="segmented"
        size="sm"
        value={[state]}
        onValueChange={(next) => {
          if (next[0]) setState(next[0])
        }}
        aria-label="Count state"
      >
        <ToggleGroupItem value="loaded">Loaded</ToggleGroupItem>
        <ToggleGroupItem value="loading">Refreshing</ToggleGroupItem>
        <ToggleGroupItem value="error">Failed</ToggleGroupItem>
      </ToggleGroup>
      <div className="flex h-56 w-72">
        <FilterPanelProvider filters={filters} collapsible="none">
          <FilterPanel>
            <FilterSection field="source">
              <FilterCheckboxList
                field="source"
                counts={{ edr: 1204, email: 318, firewall: 77 }}
                loading={state === "loading"}
                error={state === "error"}
                onRetry={() => setState("loaded")}
              />
            </FilterSection>
          </FilterPanel>
        </FilterPanelProvider>
      </div>
    </div>
  )
}

function FilterPanelAsyncOptions() {
  const analysts = React.useMemo(
    () =>
      [
        "Dana Whitfield",
        "Marcus Oyelaran",
        "Priya Raman",
        "Tomás Lindqvist",
        "Aiko Tanaka",
        "Rafael Souza",
        "Ingrid Haugen",
        "Kwame Mensah",
      ].map((name, index) => ({ value: `u-${index + 1}`, label: name })),
    []
  )
  const fields = React.useMemo(
    () =>
      defineFilterFields([
        {
          id: "assignee",
          label: "Assignee",
          kind: "multi",
          // Names a selected value the current search did not load.
          getLabel: (id) =>
            analysts.find((analyst) => analyst.value === id)?.label,
        },
      ]),
    [analysts]
  )
  const [value, setValue] = React.useState<FilterValues<typeof fields>>({
    assignee: ["u-1"],
  })
  const [options, setOptions] = React.useState(analysts.slice(0, 5))
  const [loading, setLoading] = React.useState(false)
  const filters = useFilters({ fields, value, onValueChange: setValue })

  // Stands in for a request to the users API.
  const search = (query: string) => {
    setLoading(true)
    window.setTimeout(() => {
      const needle = query.trim().toLowerCase()
      setOptions(
        analysts.filter((analyst) =>
          analyst.label.toLowerCase().includes(needle)
        )
      )
      setLoading(false)
    }, 300)
  }

  return (
    <div className="flex h-48 w-72">
      <FilterPanelProvider filters={filters} collapsible="none">
        <FilterPanel>
          <FilterSection field="assignee">
            <FilterMultiSelect
              field="assignee"
              options={options}
              loading={loading}
              onInputValueChange={search}
              placeholder="Search analysts"
            />
          </FilterSection>
        </FilterPanel>
      </FilterPanelProvider>
    </div>
  )
}