@ui-organized/svelte-table 0.0.0-stage → 6.0.0

package/dist/components/TableFilters/TableFilterChip.svelte

@@ -0,0 +1,164 @@
+<!--
+  One condition, as a segmented chip (Figma 2462:2636): "Name | is greater than
+  | 30". Each segment opens the control for the one parameter it shows — the
+  field menu, the operator menu, the value editor — so changing a filter is one
+  click on the part you mean rather than a trip through a form.
+
+  Removal lives in the field menu and at the foot of the value editor, not in a
+  dismiss button: a fourth 24px target in a row of segments is a coin-flip on
+  touch, and an operator that takes no value ("is empty") has no value editor to
+  put it in.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import {
+    Chip,
+    ChipSegment,
+    Menu,
+    MenuContent,
+    MenuItem,
+    MenuRadioGroup,
+    MenuRadioItem,
+    MenuSeparator,
+    MenuTrigger,
+    Popover,
+    PopoverContent,
+    PopoverTitle,
+    PopoverTrigger,
+  } from "@ui-organized/svelte";
+  import { afterRowEntrance, type TableFilterCondition } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import { autoFocusField, focusAfterRemoval } from "./useAutoFocusField.js";
+  import TableFilterEditor from "./TableFilterEditor.svelte";
+  import { internalGlyph as glyph } from "@ui-organized/svelte";
+
+  let { condition, class: className }: { condition: TableFilterCondition; class?: string } =
+    $props();
+  const table = getTable();
+
+  // Which chip's editor is open is filter state, not chip state: the chip that
+  // opens is often the one the *header* just created, and removing an open
+  // condition has to close its editor rather than leave a dangling id behind.
+  const editing = $derived(table.filters.editing === condition.id);
+  const setOpen = (next: boolean) => table.filters.setEditing(next ? condition.id : null);
+  // The first chip arrives inside a row that is still animating open, so the
+  // editor waits for the row to settle rather than open against a moving
+  // anchor and jump. An existing chip settles at once.
+  let settled = $state(false);
+  $effect(() => {
+    if (!editing) {
+      settled = false;
+      return;
+    }
+    const chip = document.querySelector(`[data-filter-id="${CSS.escape(condition.id)}"]`);
+    return afterRowEntrance(chip, () => {
+      settled = true;
+    });
+  });
+  const open = $derived(editing && settled);
+  // The two menus are this chip's alone, so they are local.
+  let menu = $state<"field" | "operator" | null>(null);
+  const setMenu = (name: "field" | "operator") => (next: boolean) => {
+    menu = next ? name : null;
+  };
+
+  // The condition as it was when the editor opened, so Escape can revert it.
+  let snapshot = $state<TableFilterCondition | null>(null);
+  let editorEl = $state<HTMLElement | null>(null);
+
+  $effect(() => autoFocusField(editorEl, open));
+
+  $effect(() => {
+    // Only when the editor opens — capturing on every change would defeat it.
+    if (open) snapshot = condition;
+  });
+
+  const description = $derived(table.filters.describe(condition));
+  const takesValue = $derived(table.filters.arityOf(condition) !== "none");
+
+  const remove = () => {
+    table.filters.remove(condition.id);
+    focusAfterRemoval(condition.id);
+  };
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== "Escape" || !snapshot) return;
+    // Ark closes on Escape anyway; this puts the value back first, so Escape
+    // abandons the edit rather than committing it.
+    table.filters.restore(snapshot);
+  };
+</script>
+
+<!--
+  The group's name is the whole sentence, so a screen reader moving into any one
+  segment hears what the filter *is* before what the button does.
+-->
+<Chip
+  class={clsx("data-table__filter-chip", className)}
+  aria-label={`Filter: ${description.text}`}
+  selected={editing || menu !== null}
+  incomplete={!description.complete}
+  data-column-id={condition.columnId}
+  data-filter-id={condition.id}
+>
+  <Menu open={menu === "field"} onOpenChange={setMenu("field")}>
+    <MenuTrigger>
+      {#snippet asChild(props)}
+        <ChipSegment {...(props() as Record<string, never>)} part="label">{description.field}</ChipSegment>
+      {/snippet}
+    </MenuTrigger>
+    <MenuContent class="data-table__filter-picker">
+      <MenuRadioGroup
+        value={condition.columnId}
+        onValueChange={(columnId) => table.filters.changeField(condition.id, columnId)}
+      >
+        {#each table.filters.fields as field (field.columnId)}
+          <MenuRadioItem value={field.columnId}>{field.label}</MenuRadioItem>
+        {/each}
+      </MenuRadioGroup>
+      <MenuSeparator />
+      <MenuItem value="remove" icon={glyph("trash")} onSelect={remove}>Remove filter</MenuItem>
+    </MenuContent>
+  </Menu>
+
+  <Menu open={menu === "operator"} onOpenChange={setMenu("operator")}>
+    <MenuTrigger>
+      {#snippet asChild(props)}
+        <ChipSegment {...(props() as Record<string, never>)} part="operator">{description.relative}</ChipSegment>
+      {/snippet}
+    </MenuTrigger>
+    <MenuContent class="data-table__filter-picker">
+      <MenuRadioGroup
+        value={condition.operator}
+        onValueChange={(operator) => table.filters.update(condition.id, { operator })}
+      >
+        {#each table.filters.operatorsFor(condition) as operator (operator.id)}
+          <MenuRadioItem value={operator.id}>{operator.label}</MenuRadioItem>
+        {/each}
+      </MenuRadioGroup>
+    </MenuContent>
+  </Menu>
+
+  {#if takesValue}
+    <Popover {open} onOpenChange={setOpen}>
+      <PopoverTrigger>
+        {#snippet asChild(props)}
+          <ChipSegment {...(props() as Record<string, never>)} part="value">{description.value}</ChipSegment>
+        {/snippet}
+      </PopoverTrigger>
+      <PopoverContent
+        class="data-table__filter-editor-popup"
+        side="bottom"
+        align="start"
+        onkeydown={onKeyDown}
+      >
+        <div bind:this={editorEl} class="data-table__filter-editor">
+          <PopoverTitle class="data-table__filter-editor-title"
+            >{description.field} {description.relative}</PopoverTitle
+          >
+          <TableFilterEditor {condition} portalContainer={editorEl} />
+        </div>
+      </PopoverContent>
+    </Popover>
+  {/if}
+</Chip>

package/dist/components/TableFilters/TableFilterChip.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type TableFilterCondition } from "@ui-organized/table-core";
+type $$ComponentProps = {
+    condition: TableFilterCondition;
+    class?: string;
+};
+declare const TableFilterChip: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableFilterChip = ReturnType<typeof TableFilterChip>;
+export default TableFilterChip;
+//# sourceMappingURL=TableFilterChip.svelte.d.ts.map

package/dist/components/TableFilters/TableFilterChip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilterChip.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableFilters/TableFilterChip.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAMtF,KAAK,gBAAgB,GAAI;IAAE,SAAS,EAAE,oBAAoB,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAyH9E,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/TableFilters/TableFilterEditor.svelte

@@ -0,0 +1,40 @@
+<!--
+  One condition's value editor (Figma 2298:726): the value, then a rule and a
+  remove. The field and the operator have segments of their own on the chip, so
+  the editor carries only what the value segment opens.
+-->
+<script lang="ts">
+  import { Button, Divider } from "@ui-organized/svelte";
+  import type { TableFilterCondition } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import { focusAfterRemoval } from "./useAutoFocusField.js";
+  import TableFilterValueEditor from "./TableFilterValueEditor.svelte";
+  import { internalGlyph as glyph } from "@ui-organized/svelte";
+
+  let {
+    condition,
+    portalContainer,
+  }: { condition: TableFilterCondition; portalContainer?: HTMLElement | null } = $props();
+
+  const table = getTable();
+  const arity = $derived(table.filters.arityOf(condition));
+
+  const remove = () => {
+    table.filters.remove(condition.id);
+    focusAfterRemoval(condition.id);
+  };
+</script>
+
+<TableFilterValueEditor {condition} {arity} {portalContainer} />
+
+<Divider class="data-table__filter-editor-rule" />
+
+<Button
+  intent="ghost"
+  size={table.size}
+  icon={glyph("trash")}
+  class="data-table__filter-editor-remove"
+  onclick={remove}
+>
+  Remove
+</Button>

package/dist/components/TableFilters/TableFilterEditor.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TableFilterCondition } from "@ui-organized/table-core";
+type $$ComponentProps = {
+    condition: TableFilterCondition;
+    portalContainer?: HTMLElement | null;
+};
+declare const TableFilterEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableFilterEditor = ReturnType<typeof TableFilterEditor>;
+export default TableFilterEditor;
+//# sourceMappingURL=TableFilterEditor.svelte.d.ts.map

package/dist/components/TableFilters/TableFilterEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilterEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableFilters/TableFilterEditor.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAMpE,KAAK,gBAAgB,GAAI;IAAE,SAAS,EAAE,oBAAoB,CAAC;IAAC,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAkCpG,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/TableFilters/TableFilterValueEditor.svelte

@@ -0,0 +1,209 @@
+<!--
+  The value half of a condition editor.
+
+  Which control appears follows from **type and operator together**, never from
+  the type alone — that is the whole point of separating the two. A date column
+  shows one date field for "is before", two for "is between", and a number plus a
+  unit for "is in the last".
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import {
+    DateInput,
+    Input,
+    Listbox,
+    NumberField,
+    SearchInput,
+    SegmentedControl,
+    Select,
+  } from "@ui-organized/svelte";
+  import {
+    searchOptions,
+    type FilterOperatorArity,
+    type TableFilterCondition,
+    type TableFilterValue,
+  } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+
+  /** Options above this many get a search box — the article's "search in the panel". */
+  const SEARCHABLE_ABOVE = 8;
+
+  let {
+    condition,
+    arity,
+    portalContainer,
+  }: {
+    condition: TableFilterCondition;
+    arity: FilterOperatorArity;
+    portalContainer?: HTMLElement | null;
+  } = $props();
+
+  const table = getTable();
+  let query = $state("");
+  const type = $derived(table.filters.typeOf(condition));
+  const size = $derived(table.size);
+
+  const set = (values: TableFilterValue[]) => table.filters.update(condition.id, { values });
+  const setAt = (index: number, value: TableFilterValue) => {
+    const values = [...condition.values];
+    while (values.length <= index) values.push(null);
+    values[index] = value;
+    set(values);
+  };
+
+  const booleanValue = $derived.by(() => {
+    const first = condition.values[0];
+    return first === null || first === undefined ? undefined : String(first);
+  });
+
+  const options = $derived(table.filters.optionsFor(condition));
+  const searchable = $derived(options.length > SEARCHABLE_ABOVE);
+  const visible = $derived(searchOptions(options, query));
+  const selected = $derived(condition.values.map(String));
+
+  const numberAt = (index: number) =>
+    typeof condition.values[index] === "number" ? (condition.values[index] as number) : null;
+  const stringAt = (index: number) => String(condition.values[index] ?? "");
+
+  const UNITS = [
+    { value: "day", label: "days" },
+    { value: "week", label: "weeks" },
+    { value: "month", label: "months" },
+    { value: "year", label: "years" },
+  ];
+  const relative = $derived(
+    condition.operator === "in-last" || condition.operator === "in-next",
+  );
+</script>
+
+<!-- `is empty` and `is today` take nothing, so there is nothing to render. -->
+{#if arity === "none"}
+  <!-- nothing -->
+{:else if type === "boolean"}
+  <SegmentedControl
+    {size}
+    aria-label="Value"
+    items={[
+      { value: "true", label: "Yes" },
+      { value: "false", label: "No" },
+    ]}
+    value={booleanValue}
+    onValueChange={(value) => set([value === "true"])}
+  />
+{:else if type === "enum"}
+  {#if searchable}
+    <SearchInput
+      {size}
+      aria-label="Search values"
+      value={query}
+      oninput={(event) => (query = event.currentTarget.value)}
+      onClear={() => (query = "")}
+    />
+  {/if}
+  <!--
+    `label`, not `aria-label`: Listbox has a closed prop API, so an `aria-label`
+    is silently dropped and the listbox ships unnamed — an
+    `aria-input-field-name` violation that only shows up with the popover open,
+    which the story-level axe gate never sees.
+
+    The count rides in the label because `ListboxOption.label` is a string —
+    which is also exactly what a screen reader reads out. A zero-count option
+    would filter to nothing, and is never disabled while selected or the user
+    could not untick it.
+  -->
+  <Listbox
+    {size}
+    class="data-table__filter-field data-table__filter-field--unlabelled"
+    selectionMode={arity === "many" ? "multiple" : "single"}
+    label="Value"
+    options={visible.map((option) => ({
+      value: option.value,
+      label: option.count > 0 ? `${option.label} · ${option.count}` : option.label,
+      disabled: option.disabled,
+    }))}
+    value={selected}
+    emptyMessage="No matching values"
+    onValueChange={(values) => set(arity === "many" ? values : values.slice(0, 1))}
+  />
+{:else if type === "date"}
+  <!-- "in the last 7 days" — a count and a unit, not a date. -->
+  {#if relative}
+    <div class="data-table__filter-editor-value">
+      <NumberField
+        {size}
+        label="Amount"
+        min={1}
+        value={numberAt(0)}
+        onValueChange={(value) => setAt(0, value)}
+      />
+      <Select
+        {size}
+        label="Unit"
+        {portalContainer}
+        value={condition.unit ?? "day"}
+        options={UNITS}
+        onValueChange={(unit) =>
+          table.filters.update(condition.id, {
+            unit: unit as "day" | "week" | "month" | "year",
+          })}
+      />
+    </div>
+  {:else}
+    <div class="data-table__filter-editor-value">
+      <!-- Into the editor, like the Select above: the calendar portalled to
+           <body> sits on the same popover tier as this editor, and the editor,
+           mounted later, painted over it. -->
+      <DateInput
+        {size}
+        label={arity === "two" ? "From" : "Date"}
+        {portalContainer}
+        class={clsx(
+          "data-table__filter-field",
+          arity !== "two" && "data-table__filter-field--unlabelled",
+        )}
+        value={stringAt(0)}
+        oninput={(event) => setAt(0, event.currentTarget.value || null)}
+      />
+      {#if arity === "two"}
+        <DateInput
+          {size}
+          label="To"
+          {portalContainer}
+          value={stringAt(1)}
+          oninput={(event) => setAt(1, event.currentTarget.value || null)}
+        />
+      {/if}
+    </div>
+  {/if}
+{:else if type === "number"}
+  <div class="data-table__filter-editor-value">
+    <NumberField
+      {size}
+      label={arity === "two" ? "Minimum" : "Value"}
+      class={clsx(
+        "data-table__filter-field",
+        arity !== "two" && "data-table__filter-field--unlabelled",
+      )}
+      placeholder={arity === "two" ? undefined : "Data"}
+      value={numberAt(0)}
+      onValueChange={(value) => setAt(0, value)}
+    />
+    {#if arity === "two"}
+      <NumberField
+        {size}
+        label="Maximum"
+        value={numberAt(1)}
+        onValueChange={(value) => setAt(1, value)}
+      />
+    {/if}
+  </div>
+{:else}
+  <Input
+    {size}
+    label="Value"
+    class="data-table__filter-field data-table__filter-field--unlabelled"
+    placeholder="Data"
+    value={stringAt(0)}
+    oninput={(event) => setAt(0, event.currentTarget.value)}
+  />
+{/if}

package/dist/components/TableFilters/TableFilterValueEditor.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type FilterOperatorArity, type TableFilterCondition } from "@ui-organized/table-core";
+type $$ComponentProps = {
+    condition: TableFilterCondition;
+    arity: FilterOperatorArity;
+    portalContainer?: HTMLElement | null;
+};
+declare const TableFilterValueEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableFilterValueEditor = ReturnType<typeof TableFilterValueEditor>;
+export default TableFilterValueEditor;
+//# sourceMappingURL=TableFilterValueEditor.svelte.d.ts.map

package/dist/components/TableFilters/TableFilterValueEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilterValueEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableFilters/TableFilterValueEditor.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,EAEH,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EAE1B,MAAM,0BAA0B,CAAC;AAGnC,KAAK,gBAAgB,GAAI;IACtB,SAAS,EAAE,oBAAoB,CAAC;IAChC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACtC,CAAC;AA+GJ,QAAA,MAAM,sBAAsB,sDAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/components/TableFilters/TableFilters.svelte

@@ -0,0 +1,51 @@
+<!--
+  The applied filters, on their own line under the header (Figma 2298:362).
+
+  A *summary*, not a control panel: the filter button lives in the header above,
+  and this line does not exist until the user has actually filtered something. A
+  bar that is always present and usually empty is chrome that teaches people to
+  stop looking at it.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { Button } from "@ui-organized/svelte";
+  import { getTable } from "../../core/tableContext.js";
+  import TableFilterAdd from "./TableFilterAdd.svelte";
+  import TableFilterChip from "./TableFilterChip.svelte";
+  import { internalGlyph as glyph } from "@ui-organized/svelte";
+
+  let { class: className }: { class?: string } = $props();
+  const table = getTable();
+  const conditions = $derived(table.filters.conditions);
+  const render = $derived(table.options.filterable !== false && conditions.length > 0);
+</script>
+
+<!--
+  `role="group"`, not `role="toolbar"`: toolbar promises arrow-key navigation
+  between its controls, and until that lands the promise would be a lie to
+  assistive tech.
+-->
+{#if render}
+  <div class={clsx("data-table__filters", className)} role="group" aria-label="Filters">
+    <span class="data-table__filters-label">Filters</span>
+
+    {#each conditions as condition (condition.id)}
+      <TableFilterChip {condition} />
+    {/each}
+
+    <TableFilterAdd label="Add" />
+
+    <Button intent="ghost" size="sm" icon={glyph("rotate-ccw")} onclick={() => table.filters.clear()}>
+      Reset
+    </Button>
+
+    <!--
+      One polite region for add / remove / change / clear. Deliberately not a
+      visible count: that changes on every keystroke elsewhere, and a live region
+      that re-announces per keystroke is a firehose.
+    -->
+    <span class="data-table__sr-only" role="status" aria-live="polite">
+      {table.filters.announcement}
+    </span>
+  </div>
+{/if}

package/dist/components/TableFilters/TableFilters.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const TableFilters: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableFilters = ReturnType<typeof TableFilters>;
+export default TableFilters;
+//# sourceMappingURL=TableFilters.svelte.d.ts.map

package/dist/components/TableFilters/TableFilters.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilters.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableFilters/TableFilters.svelte.ts"],"names":[],"mappings":"AAUC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAwC7C,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/TableFilters/index.d.ts

@@ -0,0 +1,7 @@
+export { default as TableFilters } from "./TableFilters.svelte";
+export { default as TableFilterAdd } from "./TableFilterAdd.svelte";
+export { default as TableFilterChip } from "./TableFilterChip.svelte";
+export { default as TableFilterEditor } from "./TableFilterEditor.svelte";
+export { default as TableFilterValueEditor } from "./TableFilterValueEditor.svelte";
+export { autoFocusField, focusAfterRemoval } from "./useAutoFocusField.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TableFilters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableFilters/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/TableFilters/index.js

@@ -0,0 +1,6 @@
+export { default as TableFilters } from "./TableFilters.svelte";
+export { default as TableFilterAdd } from "./TableFilterAdd.svelte";
+export { default as TableFilterChip } from "./TableFilterChip.svelte";
+export { default as TableFilterEditor } from "./TableFilterEditor.svelte";
+export { default as TableFilterValueEditor } from "./TableFilterValueEditor.svelte";
+export { autoFocusField, focusAfterRemoval } from "./useAutoFocusField.js";

package/dist/components/TableFilters/useAutoFocusField.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Put focus in the first typeable field of a popover once it opens.
+ *
+ * The pattern analysis is explicit about this — "enable autofocus … it's
+ * possible for the user to start typing right away" — and the obvious spelling,
+ * an `autofocus` attribute, does not work here: Ark moves focus into the popover
+ * content *after* mount, so the attribute is overwritten and focus lands on a
+ * button.
+ *
+ * **Two** frames, not one. A single frame is not enough: a focus trace in the
+ * React adapter showed this landing correctly and then Ark's `Select` trigger
+ * taking focus one millisecond later, because the operator picker is the first
+ * focusable child. Waiting a second frame puts this last, which is the only
+ * thing that sticks — and it is Ark's behaviour, not React's, so it is the same
+ * here.
+ *
+ * Deliberately only an `<input>`: a text, number, date or search field is
+ * something you type into immediately. An enum list without a search box has
+ * nothing to type into, so its focus is left exactly where Ark put it.
+ *
+ * A plain function rather than a rune-bearing helper, so the caller decides
+ * which `$effect` it runs in — the chip owns both the element and the open flag.
+ */
+export declare function autoFocusField(container: HTMLElement | null, open: boolean): (() => void) | void;
+/**
+ * Focus has to land somewhere deliberate when a chip disappears, or it falls to
+ * `<body>` and a keyboard user loses their place entirely.
+ */
+export declare function focusAfterRemoval(removedId: string): void;
+//# sourceMappingURL=useAutoFocusField.d.ts.map

package/dist/components/TableFilters/useAutoFocusField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoFocusField.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableFilters/useAutoFocusField.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAmBhG;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CASzD"}

package/dist/components/TableFilters/useAutoFocusField.js

@@ -0,0 +1,59 @@
+/**
+ * Put focus in the first typeable field of a popover once it opens.
+ *
+ * The pattern analysis is explicit about this — "enable autofocus … it's
+ * possible for the user to start typing right away" — and the obvious spelling,
+ * an `autofocus` attribute, does not work here: Ark moves focus into the popover
+ * content *after* mount, so the attribute is overwritten and focus lands on a
+ * button.
+ *
+ * **Two** frames, not one. A single frame is not enough: a focus trace in the
+ * React adapter showed this landing correctly and then Ark's `Select` trigger
+ * taking focus one millisecond later, because the operator picker is the first
+ * focusable child. Waiting a second frame puts this last, which is the only
+ * thing that sticks — and it is Ark's behaviour, not React's, so it is the same
+ * here.
+ *
+ * Deliberately only an `<input>`: a text, number, date or search field is
+ * something you type into immediately. An enum list without a search box has
+ * nothing to type into, so its focus is left exactly where Ark put it.
+ *
+ * A plain function rather than a rune-bearing helper, so the caller decides
+ * which `$effect` it runs in — the chip owns both the element and the open flag.
+ */
+export function autoFocusField(container, open) {
+    if (!open || !container || typeof requestAnimationFrame !== "function")
+        return;
+    let inner = 0;
+    const outer = requestAnimationFrame(() => {
+        inner = requestAnimationFrame(() => {
+            const field = container.querySelector('input:not([type="hidden"]):not([disabled])');
+            // Already there — Ark's own initial focus can land on the field, and
+            // the user may be typing by now. Selecting would eat what they typed.
+            if (!field || field === document.activeElement)
+                return;
+            field.focus();
+            field.select();
+        });
+    });
+    return () => {
+        cancelAnimationFrame(outer);
+        cancelAnimationFrame(inner);
+    };
+}
+/**
+ * Focus has to land somewhere deliberate when a chip disappears, or it falls to
+ * `<body>` and a keyboard user loses their place entirely.
+ */
+export function focusAfterRemoval(removedId) {
+    if (typeof requestAnimationFrame !== "function")
+        return;
+    requestAnimationFrame(() => {
+        const bar = document.querySelector(".data-table__filters");
+        if (!bar)
+            return;
+        const chips = [...bar.querySelectorAll("[data-filter-id]")];
+        const next = chips.find((element) => element.dataset.filterId !== removedId);
+        (next?.querySelector("button") ?? bar.querySelector("button"))?.focus();
+    });
+}