@gemboss/ui 0.13.0 → 0.21.0

package/src/segmented.tsx

@@ -0,0 +1,98 @@
+import type { CSSProperties, ReactNode } from "react";
+import { segmentedClick } from "./segmented-click";
+
+/**
+ * Shared tool-UI segmented control — token-driven (`.ui-seg`), cross-surface. Two forms:
+ *  - <Segmented> text tabs (options + value)
+ *  - <IconSegmented> icon squares (e.g. a grid/list view toggle)
+ * The selected segment uses the accent-soft state.
+ *
+ * In the package since 0.20.0 (was the admin's components/ui/Segmented.tsx): the editor kit's `Seg` (editor/controls)
+ * draws through it too, so the inspector's field switches and the Studio's mode switch are one component, not two with
+ * one look. Its own module and subpath (`@gemboss/ui/segmented`): a surface that draws a switch does not load the shell.
+ *
+ * THE ONLY ONE (06/10/2026). Every "pick one of these" switch in the admin draws through here: the Studio's
+ * Funnel · Canvas · Page, the funnel lens, the canvas's device, the inspector's field switches, the
+ * post-purchase step and device. Before, the same control had nine looks (a dark pill, a dark joined group,
+ * a grey track with a raised tab, …) and two of them sat side by side in one bar. `no-hand-rolled-switch.test.ts`
+ * (in the admin) fails on a new `role="group"` of `aria-pressed` buttons anywhere else.
+ */
+export type SegmentedOption<T extends string> = {
+  value: T;
+  label: ReactNode;
+  /** Tooltip; also the reason when the option is off ("Pick a step with a page first"). */
+  title?: string;
+  /** The accessible name when the label alone is not the full sentence (a count badge, an icon). */
+  ariaLabel?: string;
+  disabled?: boolean;
+};
+
+export function Segmented<T extends string>({
+  options, value, onChange, ariaLabel, disabled, onClear, fill = false, className, style,
+}: {
+  options: SegmentedOption<T>[];
+  value: T | "";
+  onChange: (v: T) => void;
+  ariaLabel: string;
+  /** Greys the whole group while a write is in flight. */
+  disabled?: boolean;
+  /**
+   * Present ⇒ clicking the ALREADY-ACTIVE option clears the setting instead of re-selecting it.
+   *
+   * A separate callback rather than widening `onChange` to `(v: T | "")`. Widening would break the
+   * four surfaces already passing a `(v: T) => void` handler — under `strictFunctionTypes` that is
+   * not assignable — and the alternative, calling `onChange("" as T)`, is a lie about the type in a
+   * component four other surfaces read. A clearing control is a different verb; it gets its own prop.
+   */
+  onClear?: () => void;
+  /** Stretch to the row and share it equally: a field switch in the inspector's narrow column. */
+  fill?: boolean;
+  /** A hook class beside `ui-seg` (the editor kit's `gemboss-ei-seg`, which editor-plain.js finds). Never a look. */
+  className?: string;
+  /** On the group: the inspector narrows a two-option row with a max-width. */
+  style?: CSSProperties;
+}) {
+  return (
+    <div className={`ui-seg${fill ? " ui-seg--fill" : ""}${className ? ` ${className}` : ""}`} style={style} role="group" aria-label={ariaLabel || undefined}>
+      {options.map((o) => {
+        const active = value === o.value;
+        return (
+          <button
+            key={o.value}
+            type="button"
+            // What a page without React reads back (editor-plain.js): the label can be anything.
+            data-value={o.value}
+            disabled={disabled || o.disabled}
+            title={o.title}
+            aria-label={o.ariaLabel}
+            aria-pressed={active}
+            className={`is-text${active ? " active" : ""}`}
+            onClick={() => segmentedClick(active, o.value, onChange, onClear)}
+          >
+            {o.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export function IconSegmented<T extends string>({
+  options, value, onChange, ariaLabel,
+}: {
+  /** `ariaLabel` is also the tooltip: an icon says nothing to a mouse until it is named. */
+  options: { value: T; icon: ReactNode; ariaLabel: string }[];
+  value: T;
+  onChange: (v: T) => void;
+  ariaLabel: string;
+}) {
+  return (
+    <div className="ui-seg" role="group" aria-label={ariaLabel}>
+      {options.map((o) => (
+        <button key={o.value} type="button" className={value === o.value ? "active" : ""} onClick={() => onChange(o.value)} aria-label={o.ariaLabel} title={o.ariaLabel} aria-pressed={value === o.value}>
+          {o.icon}
+        </button>
+      ))}
+    </div>
+  );
+}

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>
+  );
+}