@gemboss/ui 0.12.0 → 0.21.0

package/src/selection.tsx

@@ -0,0 +1,78 @@
+/**
+ * Selection for the collections (0.16.0), and the bulk bar that acts on it: the rules IndexTable and SelectableResourceList share, in one place (README
+ * "Collections"): own or controlled ids; Shift+click takes the range from the last box clicked (the anchor is an id, so
+ * a re-sort cannot move it; an anchor that left the rows starts over); select-all; Escape clears while focus is in the
+ * root, unless an open ⋯ menu or dialog inside it takes that Escape first. The ids handed out are in the rows' order and
+ * only the ones shown (a filtered-away id does not count).
+ *
+ * No "use client" of its own: only the two client modules import it (a server graph never reaches its hooks).
+ */
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+export type BulkAction = { content: React.ReactNode; onAction: (ids: string[]) => void; tone?: "critical" };
+
+/** Escape belongs to these first, when they are OPEN and shown (a closed `<dialog>` or a hidden menu in a row does not take it). */
+export const ESCAPE_OWNERS = 'details[open], dialog[open], [role="dialog"], [role="menu"]';
+
+/** Is this Escape for a menu or a dialog in `root` rather than for the selection? */
+export function escapeTaken(root: Element, target: EventTarget | null): boolean {
+  const t = target as Element | null;
+  if (t && typeof t.closest === "function" && t.closest(ESCAPE_OWNERS)) return true;
+  return Array.from(root.querySelectorAll(ESCAPE_OWNERS)).some((e) => e.getClientRects().length > 0);
+}
+
+export function useSelection<R extends HTMLElement>(ids: string[], selectedProp: string[] | undefined, onSelectionChange: ((ids: string[]) => void) | undefined, enabled: boolean) {
+  const [own, setOwn] = useState<string[]>([]);
+  const selected = selectedProp ?? own;
+  const setSelected = useCallback((next: string[]) => { if (!selectedProp) setOwn(next); onSelectionChange?.(next); }, [selectedProp, onSelectionChange]);
+  const rootRef = useRef<R>(null);
+  const anchorRef = useRef<string | null>(null);
+  const selSet = new Set(selected);
+  const chosen = ids.filter((id) => selSet.has(id));
+  const n = chosen.length;
+  const all = n > 0 && n === ids.length, some = n > 0 && !all;
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || !enabled) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" || e.defaultPrevented || n === 0 || escapeTaken(root, e.target)) return;
+      setSelected([]);
+    };
+    root.addEventListener("keydown", onKey);
+    return () => root.removeEventListener("keydown", onKey);
+  }, [n, enabled, setSelected]);
+  const toggle = (i: number, on: boolean, shift: boolean) => {
+    const next = new Set(selected);
+    const from = anchorRef.current ? ids.indexOf(anchorRef.current) : -1;
+    if (shift && from > -1) {
+      for (let k = Math.min(from, i); k <= Math.max(from, i); k++) { if (on) next.add(ids[k]); else next.delete(ids[k]); }
+    } else if (on) next.add(ids[i]); else next.delete(ids[i]);
+    anchorRef.current = ids[i];
+    setSelected(ids.filter((x) => next.has(x)));
+  };
+  const toggleAll = (on: boolean) => { anchorRef.current = null; setSelected(on ? ids : []); };
+  return { rootRef, selSet, chosen, n, all, some, toggle, toggleAll };
+}
+
+/** The bulk bar: its own select-all box, "n selected", the actions (they get the chosen ids). `idle` says what it does
+ *  with nothing selected: "hide" (a table: it covers the header only while rows are selected) or "disable" (a list: it
+ *  is the list's header, there from the start, its actions off). */
+export function BulkBar({ actions, chosen, all, some, onToggleAll, selectedLabel, selectAllLabel, idle, boxDisabled }: {
+  actions: BulkAction[]; chosen: string[]; all: boolean; some: boolean; onToggleAll: (on: boolean) => void;
+  selectedLabel: (n: number) => React.ReactNode; selectAllLabel: string; idle: "hide" | "disable"; boxDisabled?: boolean }) {
+  const box = useRef<HTMLInputElement>(null);
+  useEffect(() => { if (box.current) box.current.indeterminate = some; }, [some]);
+  const n = chosen.length;
+  return (
+    <div className="ui-bulkbar" hidden={idle === "hide" && n === 0}>
+      <label className="ui-table__checkbox"><input ref={box} type="checkbox" checked={all} aria-label={selectAllLabel} disabled={boxDisabled} onChange={(e) => onToggleAll(e.target.checked)} /></label>
+      <span className="ui-bulkbar__count" aria-live="polite">{selectedLabel(n)}</span>
+      <span className="ui-bulkbar__actions">
+        {actions.map((b, i) => (
+          <button key={i} type="button" className={b.tone === "critical" ? "ui-btn ui-btn--sm ui-btn--critical" : "ui-btn ui-btn--sm"}
+            disabled={idle === "disable" && n === 0} onClick={() => b.onAction(chosen)}>{b.content}</button>
+        ))}
+      </span>
+    </div>
+  );
+}