torch-glare 2.4.4 → 2.5.0

package/apps/lib/components/DataViews/filters/labelled.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import React from "react";
+
+/** A label above a bare control, since `FieldSection` is exactly what "bare" removes. */
+export function Labelled({ label, children }: { label?: React.ReactNode; children: React.ReactNode }) {
+  return (
+    // `flex-1` is what makes a control fill the width it was given rather than sitting at its
+    // minimum with dead space beside it — one per line in the 260px rail, sharing the line evenly
+    // in anything wider. `min-w` stays as the floor that decides where the parent wraps.
+    <div className="flex min-w-[180px] flex-1 flex-col gap-1">
+      {label && (
+        <span className="typography-body-small-regular text-content-presentation-global-secondary">
+          {label}
+        </span>
+      )}
+      {children}
+    </div>
+  );
+}

package/apps/lib/components/DataViews/filters/presets.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useFormContext } from "react-hook-form";
+import { cn } from "../../../utils/cn";
+import type { FilterFieldDescriptor, NumberPreset } from "../../../utils/dataViews/types";
+import { useDataViewsFilters } from "../context";
+import { datePresets, numberPresets, toName } from "./values";
+import type { FilterPresetsProps } from "../types";
+
+/** Look up what `Filters` learned about a path, so a sibling control can target it. */
+function useDescriptor(path: string): FilterFieldDescriptor | undefined {
+  const { filterFields } = useDataViewsFilters();
+  return filterFields.find((f) => f.path === path);
+}
+
+
+/**
+ * `DataViews.Filters.Presets` — named shortcuts for the field named in `for`.
+ *
+ * FormBuilder has no field for this, and it is not a filter of its own: it writes into a sibling's
+ * value. Numeric presets fill the side they do not name from that slider's bounds, so
+ * `{ label: "$5k+", min: 5000 }` means "5,000 to the top" rather than "5,000 to 100".
+ */
+export function Presets({ for: path, items, className }: FilterPresetsProps) {
+  const form = useFormContext();
+  const field = useDescriptor(path);
+  const name = toName(path);
+
+  if (!field) return null;
+
+  const shortcuts =
+    field.kind === "date"
+      ? datePresets(items).map((preset) => ({
+          label: preset.label,
+          apply: () =>
+            form.setValue(name, {
+              from: preset.from ? new Date(preset.from) : undefined,
+              to: preset.to ? new Date(preset.to) : undefined,
+            }),
+        }))
+      : numberPresets(items).map((preset: NumberPreset) => ({
+          label: preset.label,
+          apply: () => form.setValue(name, [preset.min ?? field.min ?? 0, preset.max ?? field.max ?? 100]),
+        }));
+
+  if (shortcuts.length === 0) return null;
+
+  return (
+    <div className={cn("flex flex-wrap gap-1", className)}>
+      {shortcuts.map((preset) => (
+        <button
+          key={preset.label}
+          type="button"
+          onClick={preset.apply}
+          className={cn(
+            "typography-body-small-regular rounded-[4px] px-2 py-[2px] transition-colors",
+            "text-content-presentation-global-secondary hover:bg-background-presentation-action-hover",
+          )}
+        >
+          {preset.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/apps/lib/components/DataViews/filters/summary.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { cn } from "../../../utils/cn";
+import { formatPathLabel } from "../../../utils/dataViews/path";
+import type { FilterValue } from "../../../utils/dataViews/types";
+import { useDataViewsFilters, useDataViewsView } from "../context";
+
+/**
+ * `DataViews.Filters.Summary` — the active filters as removable chips. Useful when the controls
+ * themselves live in the panel and you still want the current query visible above the rows.
+ *
+ * Its labels come from the same descriptors `Filters` reads off its children — the **root** collects
+ * those as well, so this works wherever it is rendered, including as `Filters`' sibling. A path no
+ * control covers falls back to a label derived from the path.
+ */
+export function Summary({ className }: { className?: string }) {
+  const { filters, setFilters, filterFields } = useDataViewsFilters();
+  const { search, setSearch } = useDataViewsView();
+  const entries = Object.entries(filters);
+
+  if (entries.length === 0 && !search) return null;
+
+  const chip = cn(
+    "typography-body-small-regular flex items-center gap-1 rounded-[6px] px-2 py-[2px]",
+    "bg-background-presentation-action-selected text-content-presentation-global-primary",
+  );
+
+  const describe = (path: string, value: FilterValue) => {
+    const label = filterFields.find((f) => f.path === path)?.label ?? formatPathLabel(path);
+    if (Array.isArray(value)) return `${label}: ${value.join(", ")}`;
+    if (value.kind === "number") return `${label}: ${value.min ?? "…"}–${value.max ?? "…"}`;
+    return `${label}: ${value.from ?? "…"} → ${value.to ?? "…"}`;
+  };
+
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2", className)}>
+      {/* The search term narrows the result set exactly as a filter does, so it belongs in the
+          summary of what is currently narrowing it — and it has to be clearable from here too. */}
+      {search && (
+        <span className={chip}>
+          {`Search: ${search}`}
+          <button type="button" aria-label="Clear search" onClick={() => setSearch("")}>
+            <i className="ri-close-line text-[12px]" />
+          </button>
+        </span>
+      )}
+      {entries.map(([path, value]) => (
+        <span key={path} className={chip}>
+          {describe(path, value)}
+          <button
+            type="button"
+            aria-label={`Remove ${path} filter`}
+            onClick={() => {
+              const copy = { ...filters };
+              delete copy[path];
+              setFilters(copy);
+            }}
+          >
+            <i className="ri-close-line text-[12px]" />
+          </button>
+        </span>
+      ))}
+    </div>
+  );
+}

package/apps/lib/components/DataViews/filters/sync.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useWatch } from "react-hook-form";
+import type { FilterFieldDescriptor } from "../../../utils/dataViews/types";
+import { useDataViewsFilters } from "../context";
+import { sameFilters, toFilterState } from "./values";
+
+/**
+ * Pushes what the user typed back out as `onValueChange`.
+ *
+ * Debounced, and guarded by an equality check: without both, `watch` → emit → new `values` →
+ * re-render is a loop that swallows keystrokes mid-type.
+ */
+export function Sync({ fields }: { fields: readonly FilterFieldDescriptor[] }) {
+  const { setFilters, filters } = useDataViewsFilters();
+  const watched = useWatch();
+
+  // Read the current filters through a ref so the effect does not re-run just because the parent
+  // handed back a new (equal) object.
+  const latest = useRef(filters);
+  latest.current = filters;
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // Merged onto the current state, not derived from scratch — these controls own only their
+      // own paths. Anything else (a `Filters.Custom` value, a key the caller supplied) survives.
+      const next = toFilterState(watched as Record<string, unknown>, fields, latest.current);
+      if (!sameFilters(next, latest.current)) setFilters(next);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [watched, fields, setFilters]);
+
+  return null;
+}

package/apps/lib/components/DataViews/filters/values.ts

@@ -0,0 +1,173 @@
+import type {
+  DatePreset,
+  FilterFieldDescriptor,
+  FilterState,
+  FilterValue,
+  NumberPreset,
+  Preset,
+} from "../../../utils/dataViews/types";
+
+/**
+ * Translating between `FilterState` (what you receive) and react-hook-form values (what the
+ * inputs speak). Pure functions, no React — the fiddly half of `Filters` is here so the component
+ * itself stays readable, and so this is testable without rendering anything.
+ */
+
+/**
+ * RHF reads `.` in a field name as object nesting, so a filter on `customer.name` would arrive as
+ * `{ customer: { name: … } }`. Names are escaped on the way in and unescaped on the way out.
+ */
+export const toName = (path: string) => path.replace(/\./g, "__");
+
+const isRange = (v: FilterValue | undefined): v is Exclude<FilterValue, string[]> =>
+  !!v && !Array.isArray(v);
+
+/** `FilterState` → the values the inputs want. */
+export function toFormValues(
+  filters: FilterState,
+  fields: readonly FilterFieldDescriptor[],
+): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+
+  for (const field of fields) {
+    const value = filters[field.path];
+    const name = toName(field.path);
+
+    switch (field.kind) {
+      case "choice": {
+        const selected = Array.isArray(value) ? value : [];
+        out[name] = field.single ? (selected[0] ?? "") : selected;
+        break;
+      }
+      case "number": {
+        const lo = field.min ?? 0;
+        const hi = field.max ?? 100;
+        const range = isRange(value) && value.kind === "number" ? value : undefined;
+        out[name] = [range?.min ?? lo, range?.max ?? hi];
+        break;
+      }
+      case "date": {
+        const range = isRange(value) && value.kind === "date" ? value : undefined;
+        out[name] = {
+          from: range?.from ? new Date(range.from) : undefined,
+          to: range?.to ? new Date(range.to) : undefined,
+        };
+        break;
+      }
+      case "text":
+        out[name] = Array.isArray(value) ? (value[0] ?? "") : "";
+        break;
+    }
+  }
+
+  return out;
+}
+
+/**
+ * `YYYY-MM-DD` in the **user's** timezone.
+ *
+ * `toISOString()` converts to UTC first, so someone east of UTC picking "today" in the calendar
+ * would emit yesterday's date — an off-by-one-day filter that only reproduces in some timezones.
+ */
+const iso = (d: unknown) => {
+  const date = d instanceof Date ? d : d ? new Date(String(d)) : null;
+  if (!date || Number.isNaN(date.getTime())) return undefined;
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+};
+
+/**
+ * The inputs' values → `FilterState`.
+ *
+ * A control at its neutral position produces **no key at all** rather than an empty one. That
+ * matters: the emitted query is a request to go and fetch, and `{ total: { min: 0, max: 100 } }`
+ * when the slider has never been touched would narrow a query that the user never narrowed.
+ *
+ * `previous` is merged rather than replaced, and this is load-bearing: these `fields` own only
+ * their own paths. `Filters.Custom` writes straight into `FilterState`, and a caller's initial
+ * `filters` may carry keys no control was declared for. Rebuilding the state from `fields` alone
+ * would silently drop both the moment any control changed.
+ */
+export function toFilterState(
+  values: Record<string, unknown>,
+  fields: readonly FilterFieldDescriptor[],
+  previous: FilterState = {},
+): FilterState {
+  const owned = new Set(fields.map((f) => f.path));
+  const out: FilterState = {};
+  for (const [path, value] of Object.entries(previous)) {
+    if (!owned.has(path)) out[path] = value;
+  }
+
+  for (const field of fields) {
+    const raw = values[toName(field.path)];
+
+    switch (field.kind) {
+      case "choice": {
+        const selected =
+          field.single
+            ? raw
+              ? [String(raw)]
+              : []
+            : Array.isArray(raw)
+              ? raw.map(String)
+              : [];
+        if (selected.length > 0) out[field.path] = selected;
+        break;
+      }
+      case "number": {
+        if (!Array.isArray(raw)) break;
+        const lo = field.min ?? 0;
+        const hi = field.max ?? 100;
+        const [min, max] = raw as number[];
+        // Untouched means "no constraint", not "everything".
+        if (min === lo && max === hi) break;
+        out[field.path] = { kind: "number", min, max };
+        break;
+      }
+      case "date": {
+        const range = (raw ?? {}) as { from?: unknown; to?: unknown };
+        const from = iso(range.from);
+        const to = iso(range.to);
+        if (from || to) out[field.path] = { kind: "date", from, to };
+        break;
+      }
+      case "text": {
+        const text = typeof raw === "string" ? raw.trim() : "";
+        if (text) out[field.path] = [text];
+        break;
+      }
+    }
+  }
+
+  return out;
+}
+
+/**
+ * Whether two filter states are the same. Used to break the `watch` → `onChange` → new `values`
+ * → re-render loop that otherwise eats keystrokes: if nothing actually changed, nothing is
+ * emitted.
+ */
+export function sameFilters(a: FilterState, b: FilterState): boolean {
+  const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const key of keys) {
+    const x = a[key];
+    const y = b[key];
+    if (x === undefined || y === undefined) return false;
+    if (Array.isArray(x) !== Array.isArray(y)) return false;
+    if (Array.isArray(x) && Array.isArray(y)) {
+      if (x.length !== y.length || x.some((v, i) => v !== y[i])) return false;
+    } else if (JSON.stringify(x) !== JSON.stringify(y)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/** The numeric shortcuts out of a mixed `presets` list. */
+export const numberPresets = (presets?: readonly Preset[]): NumberPreset[] =>
+  (presets ?? []).filter((p): p is NumberPreset => "min" in p || "max" in p);
+
+/** The date shortcuts out of a mixed `presets` list. */
+export const datePresets = (presets?: readonly Preset[]): DatePreset[] =>
+  (presets ?? []).filter((p): p is DatePreset => "from" in p || "to" in p);

package/apps/lib/components/DataViews/header.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { Search as SearchIcon, Settings } from "lucide-react";
+import { cn } from "../../utils/cn";
+import { Button } from "../Button";
+import { TabSwitch, type TabSwitchOption } from "../TabSwitch";
+import { useDataViewsPanel, useDataViewsView } from "./context";
+import { markHeader } from "./slots";
+import type {
+  ActionsProps,
+  HeaderProps,
+  PanelToggleProps,
+  SearchProps,
+  ViewSwitchProps,
+} from "./types";
+
+/**
+ * The bar above the views — 52px, black, always dark.
+ *
+ * `data-theme="dark"` is deliberate and scoped to the bar: it makes the child Buttons and the
+ * view switcher resolve dark tokens so they read correctly against the black, even when the host
+ * app runs light. It must not wrap the content below, which stays in the host theme.
+ *
+ * ```tsx
+ * <DataViews.Header title="Orders">
+ *   <DataViews.ViewSwitch />
+ *   <DataViews.Search />
+ *   <DataViews.Actions><Button>New</Button></DataViews.Actions>
+ *   <DataViews.PanelToggle />
+ * </DataViews.Header>
+ * ```
+ */
+export function Header({ title, children, className }: HeaderProps) {
+  return (
+    <div
+      data-theme="dark"
+      className={cn(
+        // 40px and no background of its own, per Figma's `Body-HeaderBar-1.0`. The bar has never
+        // needed one: the root shell already paints black behind it.
+        "flex h-[40px] w-full shrink-0 items-center gap-2 rounded-[12px]",
+        className,
+      )}
+    >
+      {title !== undefined && (
+        <>
+          <div className="flex h-9 shrink-0 items-center gap-2 rounded-[12px] border border-[#434446] bg-[#252729] px-[10px]">
+            <span className="text-[28px] font-[510] uppercase leading-[1.19] text-white">
+              {title}
+            </span>
+          </div>
+          {/* `border/presentation/global/primary`, not the pill's `#434446` — the design uses two
+              different greys here, and the divider is the darker one. */}
+          <div className="h-5 w-px shrink-0 rounded-[4px] bg-[#2c2d2e]" />
+        </>
+      )}
+      {children}
+    </div>
+  );
+}
+
+markHeader(Header);
+
+/**
+ * Switches between the views you rendered. The options come from the view registry, so this stays
+ * in sync by construction — there is no list to keep updated.
+ *
+ * It takes the remaining width, which is what pushes `Actions` and the panel toggle to the end of
+ * the bar. Renders nothing when fewer than two views are registered: a switcher with one option
+ * is noise.
+ *
+ */
+export function ViewSwitch({ className }: ViewSwitchProps) {
+  const { views, view, setView } = useDataViewsView();
+
+  if (views.length < 2) return <div className="flex-1" />;
+
+  const options: TabSwitchOption[] = views.map((v) => ({
+    value: v.id,
+    label: v.label,
+    icon: v.icon,
+  }));
+
+  return (
+    <div className={cn("flex flex-1 items-center gap-2", className)}>
+      <TabSwitch theme="dark" options={options} value={view} onValueChange={setView} />
+    </div>
+  );
+}
+
+/**
+ * The search box — an icon button that expands into a field.
+ *
+ * It only reports what was typed: typing puts a `search` in the query and `onQueryChange` is
+ * where you go and fetch. DataViews never matches rows against this string.
+ */
+export function Search({ placeholder = "Search...", className }: SearchProps) {
+  const { search, setSearch } = useDataViewsView();
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const wrapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (open) inputRef.current?.focus();
+  }, [open]);
+
+  const clearAndCollapse = () => {
+    setSearch("");
+    setOpen(false);
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (wrapRef.current?.contains(e.target as Node)) return;
+      // Collapsing on an outside click would throw away an active query — only close when the
+      // field is empty.
+      if (!search) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [open, search]);
+
+  if (!open) {
+    return (
+      <Button
+        variant="BluContStyle"
+        size="M"
+        buttonType="icon"
+        aria-label="Open search"
+        onClick={() => setOpen(true)}
+        className={cn(
+          "border-border-presentation-global-primary shrink-0 rounded-[6px] border",
+          className,
+        )}
+      >
+        <SearchIcon className="h-[18px] w-[18px]" />
+      </Button>
+    );
+  }
+
+  return (
+    <div
+      ref={wrapRef}
+      className={cn(
+        "relative flex h-[28px] w-[260px] shrink-0 items-center justify-center rounded-[6px]",
+        "border-border-presentation-state-focus bg-background-presentation-form-field-primary border px-1",
+        "shadow-[0_1px_6px_0_rgba(0,0,0,0.30)] transition-all duration-150 ease-in-out",
+        className,
+      )}
+    >
+      <input
+        ref={inputRef}
+        type="text"
+        size={1}
+        value={search}
+        placeholder={placeholder}
+        onChange={(e) => setSearch(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") clearAndCollapse();
+        }}
+        className="placeholder:text-content-presentation-global-tertiary min-w-0 flex-1 bg-transparent text-[14px] leading-none text-white caret-[#1E7AFE] focus:outline-none"
+      />
+      <button
+        type="button"
+        aria-label="Clear search"
+        onClick={clearAndCollapse}
+        className="flex shrink-0 items-center justify-center self-stretch px-1"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path
+            d="M7.99992 14.6666C4.31802 14.6666 1.33325 11.6818 1.33325 7.99992C1.33325 4.31802 4.31802 1.33325 7.99992 1.33325C11.6818 1.33325 14.6666 4.31802 14.6666 7.99992C14.6666 11.6818 11.6818 14.6666 7.99992 14.6666ZM7.99992 7.05712L6.1143 5.17149L5.17149 6.1143L7.05712 7.99992L5.17149 9.88552L6.1143 10.8283L7.99992 8.94272L9.88552 10.8283L10.8283 9.88552L8.94272 7.99992L10.8283 6.1143L9.88552 5.17149L7.99992 7.05712Z"
+            fill="white"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+/**
+ * A slot for your own buttons, so they line up with the rest of the header.
+ *
+ * The convention is `<Button variant="BluColStyle" size="M">` — the solid `#005ecc` Figma uses
+ * for the bar's action. `Search` and `PanelToggle` beside it stay ghost on purpose: they are
+ * toggles, and three solid pills on black would stop them reading as such. A toggle of your own
+ * belongs here too, with `BluColStyle` for its on state.
+ *
+ * Not enforced. Cloning the children to force a variant would override a caller who deliberately
+ * wants a destructive button here, and would fight their `className`.
+ */
+export function Actions({ children, className }: ActionsProps) {
+  return <div className={cn("flex shrink-0 items-center gap-2", className)}>{children}</div>;
+}
+
+/**
+ * Opens `DataViews.Panel`. It hides itself while the panel is open — the panel has its own close
+ * control, so keeping this one visible would be a second way to do the same thing.
+ */
+export function PanelToggle({ children, className }: PanelToggleProps) {
+  const { open, setOpen } = useDataViewsPanel();
+
+  if (open) return null;
+
+  return (
+    <Button
+      variant="BluContStyle"
+      size="M"
+      onClick={() => setOpen(true)}
+      aria-expanded={open}
+      className={cn("gap-[6px] rounded-[6px] px-[14px] text-[16px] font-[510]", className)}
+    >
+      <Settings className="h-[18px] w-[18px]" />
+      {children ?? "Filter & Config."}
+    </Button>
+  );
+}

package/apps/lib/components/DataViews/hooks/index.ts

@@ -0,0 +1,5 @@
+// DataViews' own hooks. The drag hook is not here: `TreeFolder` needs it too, and a shared
+// component cannot import from inside DataViews without inverting the dependency — it lives in
+// `lib/hooks/useDragDrop.tsx`.
+export { useActiveRow } from "./useActiveRow";
+export { useControllable } from "./useControllable";

package/apps/lib/components/DataViews/hooks/useActiveRow.ts

@@ -0,0 +1,22 @@
+"use client";
+
+import type { Row } from "../../../utils/dataViews/types";
+import { useDataViewsData, useDataViewsView } from "../context";
+
+/**
+ * The row the inbox (or board, or tree) has open, ready to render in a detail pane. Returns
+ * `null` when nothing is selected.
+ *
+ * ```tsx
+ * function Detail() {
+ *   const row = useActiveRow();
+ *   return row ? <h2>{row.subject}</h2> : null;
+ * }
+ * ```
+ */
+export function useActiveRow(): Row | null {
+  const { rows, getRowId } = useDataViewsData();
+  const { activeId } = useDataViewsView();
+  if (activeId === null) return null;
+  return rows.find((row, i) => getRowId(row, i) === activeId) ?? null;
+}

package/apps/lib/components/DataViews/hooks/useControllable.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+
+/**
+ * One controlled/uncontrolled pair, written once.
+ *
+ * Pass `value` to control it; omit `value` to let the component keep its own. `onChange` fires
+ * either way, so a consumer can observe without taking ownership.
+ *
+ * `set` accepts an updater, because the thing this now holds — the query — is patched rather than
+ * replaced: changing a filter has to read the page it is resetting.
+ */
+export function useControllable<T>(
+  value: T | undefined,
+  onChange: ((next: T) => void) | undefined,
+  fallback: T,
+): [T, (next: T | ((prev: T) => T)) => void] {
+  const [internal, setInternal] = useState<T>(fallback);
+
+  // `value !== undefined` decides the mode. Latch the first answer so a consumer that
+  // accidentally flips between the two gets a warning-free, stable component rather than
+  // React's "changing an uncontrolled input to controlled" class of bug.
+  const controlledRef = useRef(value !== undefined);
+  const isControlled = controlledRef.current;
+
+  const current = isControlled ? (value as T) : internal;
+
+  /**
+   * The value an updater builds on.
+   *
+   * Reset to `current` on every render, and advanced *synchronously* by `set` — so two patches in
+   * one tick chain instead of racing. Without that, restoring a saved view (which puts back the
+   * sort and the filters one after the other) silently drops the first: both would read the value
+   * from the last render, and the second would win.
+   */
+  const pendingRef = useRef(current);
+  pendingRef.current = current;
+
+  const set = useCallback(
+    (next: T | ((prev: T) => T)) => {
+      const resolved =
+        typeof next === "function" ? (next as (prev: T) => T)(pendingRef.current) : next;
+      pendingRef.current = resolved;
+      if (!controlledRef.current) setInternal(resolved);
+      onChange?.(resolved);
+    },
+    [onChange],
+  );
+
+  return [current, set];
+}