@tensor_1/react 2.23.0 → 2.24.0

package/README.md

@@ -205,4 +205,24 @@ Radial mode still shortens long labels to fit its ring, but every node carries i
 <CopyButton value={email} label={t('copyEmail')} copiedLabel={t('copied')} failedLabel={t('copyFailed')} />
 ```
 
+### DiffViewer words and control size
+
+- **Every word is a label.** `labels` (a `Partial<DiffViewerLabels>`, English defaults in `DEFAULT_DIFF_VIEWER_LABELS`) covers the version names, group titles, the summary, the live progress text, and the action buttons.
+- **Each action is named for its entry.** The visible words come from `acceptIncoming` / `keepCurrent` / `markPending`. The accessible names come from `acceptIncomingFor` / `keepCurrentFor` / `markPendingFor`, e.g. "Accept incoming for $.limit". Each entry's three buttons sit in a group named by `resolve`. When you translate a name, keep the visible word inside it, so people using speech input can say what they see (WCAG 2.5.3).
+- **`controlSize`** sets the height of the action buttons and the entry rows. `sm` (the default) is the compact 28px kit size. `md` follows `--uix-control-h`, so a theme with 60px controls gets 60px actions. `lg` is 44px.
+
+```tsx
+<DiffViewer
+  base={published} current={draft} incoming={remote}
+  controlSize="md"
+  labels={{
+    acceptIncoming: t('acceptIncoming'), acceptIncomingFor: t('acceptIncomingFor'), // 'Prihvati dolazno za {path}'
+    keepCurrent: t('keepCurrent'), keepCurrentFor: t('keepCurrentFor'),
+    markPending: t('markPending'), markPendingFor: t('markPendingFor'),
+    resolve: t('resolve'), /* …the rest of DiffViewerLabels */
+  }}
+  onResolutionChange={record}
+/>
+```
+
 Ships **ESM + CJS + types**, with per-file `"use client"` so it's safe under React Server Components. Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.

package/dist/components/DiffViewer.d.ts

@@ -6,6 +6,11 @@ import { DiffEntry, DiffResolution } from '../diff-model.js';
  * Every word the diff viewer renders (TENSOR RX-125, UIX-12). `base` / `current` /
  * `incoming` keep their meaning from before; `{path}`, `{version}`, `{resolved}` and
  * `{total}` are placeholders.
+ *
+ * `acceptIncomingFor` / `keepCurrentFor` / `markPendingFor` are the accessible names of
+ * the three action buttons, so a screen reader hears which entry each one resolves. Keep
+ * the visible word inside the translated name (WCAG 2.5.3 Label in Name): speech-input
+ * users say what they see.
  */
 interface DiffViewerLabels {
     base: string;
@@ -26,6 +31,9 @@ interface DiffViewerLabels {
     acceptIncoming: string;
     keepCurrent: string;
     markPending: string;
+    acceptIncomingFor: string;
+    keepCurrentFor: string;
+    markPendingFor: string;
     resolutionAccept: string;
     resolutionSkip: string;
     resolutionPending: string;
@@ -41,9 +49,15 @@ interface DiffViewerProps {
     resolutions?: Record<string, DiffResolution>;
     onResolutionChange?: (path: string, resolution: DiffResolution) => void;
     labels?: Partial<DiffViewerLabels>;
+    /**
+     * Height of the resolution buttons and the entry disclosure rows. `sm` (the default) is
+     * the compact 28px kit size; `md` follows `--uix-control-h`, so a theme that sets its
+     * own control height (for example 60px touch targets) gets it here too; `lg` is 44px.
+     */
+    controlSize?: 'sm' | 'md' | 'lg';
     className?: string;
 }
 /** Three-way configuration diff with per-entry keyboard-operable resolution. */
-declare function DiffViewer({ base, current, incoming, entries: providedEntries, resolutions: controlledResolutions, onResolutionChange, labels: labelOverrides, className, }: DiffViewerProps): react.JSX.Element;
+declare function DiffViewer({ base, current, incoming, entries: providedEntries, resolutions: controlledResolutions, onResolutionChange, labels: labelOverrides, controlSize, className, }: DiffViewerProps): react.JSX.Element;
 
 export { DEFAULT_DIFF_VIEWER_LABELS, DiffViewer, type DiffViewerLabels, type DiffViewerProps };

package/dist/components/DiffViewer.js

@@ -24,6 +24,9 @@ const DEFAULT_DIFF_VIEWER_LABELS = {
   acceptIncoming: "Accept incoming",
   keepCurrent: "Keep current",
   markPending: "Mark pending",
+  acceptIncomingFor: "Accept incoming for {path}",
+  keepCurrentFor: "Keep current for {path}",
+  markPendingFor: "Mark pending for {path}",
   resolutionAccept: "accepted",
   resolutionSkip: "kept",
   resolutionPending: "pending",
@@ -40,10 +43,12 @@ function DiffViewer({
   resolutions: controlledResolutions,
   onResolutionChange,
   labels: labelOverrides,
+  controlSize = "sm",
   className
 }) {
   const labels = { ...DEFAULT_DIFF_VIEWER_LABELS, ...labelOverrides };
   const resolutionLabel = { accept: labels.resolutionAccept, skip: labels.resolutionSkip, pending: labels.resolutionPending };
+  const buttonSize = controlSize === "md" ? void 0 : `uix-btn--${controlSize}`;
   const id = useId();
   const entries = useMemo(() => providedEntries ?? buildThreeWayDiff(base, current, incoming), [providedEntries, base, current, incoming]);
   const [internalResolutions, setInternalResolutions] = useState({});
@@ -57,8 +62,8 @@ function DiffViewer({
     /* @__PURE__ */ jsx("h3", { children: labels.noDifferences }),
     /* @__PURE__ */ jsx("p", { children: labels.noDifferencesDetail })
   ] });
-  return /* @__PURE__ */ jsxs("section", { className: cx("uix-diff-viewer", className), "aria-label": labels.region, children: [
-    /* @__PURE__ */ jsxs("div", { className: "uix-diff-viewer__summary", "aria-label": labels.summary, children: [
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-diff-viewer", className), "aria-label": labels.region, "data-control-size": controlSize, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-diff-viewer__summary", role: "group", "aria-label": labels.summary, children: [
       GROUPS.map((kind) => /* @__PURE__ */ jsxs("span", { children: [
         /* @__PURE__ */ jsx("b", { children: summary[kind] }),
         " ",
@@ -95,10 +100,10 @@ function DiffViewer({
               /* @__PURE__ */ jsx("strong", { children: labels[version] }),
               /* @__PURE__ */ jsx("pre", { children: renderValue(entry[version], labels.notPresent) })
             ] }, version)) }),
-            /* @__PURE__ */ jsxs("div", { className: "uix-diff-viewer__actions", "aria-label": fillLabel(labels.resolve, { path: entry.path }), children: [
-              /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", "aria-pressed": resolution === "accept", onClick: () => resolve(entry.path, "accept"), children: labels.acceptIncoming }),
-              /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", "aria-pressed": resolution === "skip", onClick: () => resolve(entry.path, "skip"), children: labels.keepCurrent }),
-              /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", "aria-pressed": resolution === "pending", onClick: () => resolve(entry.path, "pending"), children: labels.markPending })
+            /* @__PURE__ */ jsxs("div", { className: "uix-diff-viewer__actions", role: "group", "aria-label": fillLabel(labels.resolve, { path: entry.path }), children: [
+              /* @__PURE__ */ jsx("button", { type: "button", className: cx("uix-btn uix-btn--primary", buttonSize), "aria-label": fillLabel(labels.acceptIncomingFor, { path: entry.path }), "aria-pressed": resolution === "accept", onClick: () => resolve(entry.path, "accept"), children: labels.acceptIncoming }),
+              /* @__PURE__ */ jsx("button", { type: "button", className: cx("uix-btn uix-btn--secondary", buttonSize), "aria-label": fillLabel(labels.keepCurrentFor, { path: entry.path }), "aria-pressed": resolution === "skip", onClick: () => resolve(entry.path, "skip"), children: labels.keepCurrent }),
+              /* @__PURE__ */ jsx("button", { type: "button", className: cx("uix-btn uix-btn--ghost", buttonSize), "aria-label": fillLabel(labels.markPendingFor, { path: entry.path }), "aria-pressed": resolution === "pending", onClick: () => resolve(entry.path, "pending"), children: labels.markPending })
             ] })
           ] }, entry.path);
         })

package/dist/components/EditorIcons.d.ts

@@ -31,6 +31,7 @@ declare const PATHS: {
     readonly richMode: "M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7ZM8 13h8M8 17h5";
     readonly clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6v6l4 2";
     readonly grip: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01";
+    readonly more: "M5 12h.01M12 12h.01M19 12h.01";
 };
 type EditorIconName = keyof typeof PATHS;
 declare function EditorIcon({ name, ...props }: {

package/dist/components/EditorIcons.js

@@ -28,7 +28,8 @@ const PATHS = {
   sourceMode: "M10 12.5 8 15l2 2.5M14 12.5l2 2.5-2 2.5M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
   richMode: "M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7ZM8 13h8M8 17h5",
   clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6v6l4 2",
-  grip: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01"
+  grip: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01",
+  more: "M5 12h.01M12 12h.01M19 12h.01"
 };
 function EditorIcon({ name, ...props }) {
   return /* @__PURE__ */ jsx(

package/dist/components/TableControls.d.ts

@@ -6,15 +6,40 @@ interface ViewMenuColumn {
     label: ReactNode;
     visible: boolean;
     disabled?: boolean;
+    /** Always shown (e.g. the record id): the row has no checkbox and no Hide / Show, its name sits in the checkbox's slot. */
+    required?: boolean;
+    /** Plain-text name for the `{label}` templates in `columnLabels` when `label` is not a string. */
+    textLabel?: string;
+}
+/**
+ * Words for the column rows. `{label}` is replaced by the column name; `moved` also gets
+ * `{position}` and `{count}`. Every key has an English default.
+ */
+interface ViewMenuColumnLabels {
+    /** Name of a row's ⋯ menu button and of the menu. Default `Column actions: {label}`. */
+    rowActions: string;
+    /** Name of a row's drag grip. Default `Drag to reorder: {label}`. */
+    reorder: string;
+    moveUp: string;
+    moveDown: string;
+    hide: string;
+    show: string;
+    /** Tooltip on a required column's name. Default `Always shown`. */
+    required: string;
+    /** Polite announcement after a move. Default `{label} moved to position {position} of {count}`. */
+    moved: string;
 }
 interface ViewMenuProps {
-    density: string;
-    densityLabel: ReactNode;
-    densityOptions: readonly {
+    /** The density section renders when `densityOptions` and `onDensityChange` are given. */
+    density?: string;
+    densityLabel?: ReactNode;
+    densityOptions?: readonly {
         value: string;
         label: ReactNode;
     }[];
-    onDensityChange: (value: string) => void;
+    onDensityChange?: (value: string) => void;
+    /** Optional title over the zebra / freeze switches. */
+    displayLabel?: ReactNode;
     zebra?: {
         checked: boolean;
         label: ReactNode;
@@ -28,9 +53,23 @@ interface ViewMenuProps {
     columns?: readonly ViewMenuColumn[];
     columnsLabel?: ReactNode;
     onColumnVisibilityChange?: (id: string, visible: boolean) => void;
+    /**
+     * Turns on reordering: every column row gets a drag grip (pointer; ArrowUp / ArrowDown once
+     * focused) and a ⋯ menu with Move up · Move down · Hide / Show, which is the keyboard path.
+     * Receives every column id, first to last. The order is the application's to persist.
+     */
+    onReorder?: (orderedIds: string[]) => void;
+    columnLabels?: Partial<ViewMenuColumnLabels>;
+    /** Pinned under the columns, e.g. a Reset sort `.uix-menu__item` button. */
+    footer?: ReactNode;
+    className?: string;
 }
-/** Controlled table presentation menu; wrap it with Popover when trigger behavior is needed. */
-declare function ViewMenu({ density, densityLabel, densityOptions, onDensityChange, zebra, freeze, columns, columnsLabel, onColumnVisibilityChange }: ViewMenuProps): react.JSX.Element;
+/**
+ * Controlled table presentation panel with its own surface: density, zebra / freeze and a column
+ * list under sticky section titles. A column row is grip · checkbox · name · ⋯ (grip and ⋯ with
+ * `onReorder`). Usable inside a Popover or any overlay shell, including one that adds no chrome.
+ */
+declare function ViewMenu({ density, densityLabel, densityOptions, onDensityChange, displayLabel, zebra, freeze, columns, columnsLabel, onColumnVisibilityChange, onReorder, columnLabels, footer, className, }: ViewMenuProps): react.JSX.Element;
 interface FilterOption {
     value: string;
     label: string;
@@ -102,4 +141,4 @@ type SavedViewMenuProps = SavedViewMenuBaseProps & ({
  */
 declare function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpinLabel, onReorder, reorderLabel, emptyLabel, actions, footer }: SavedViewMenuProps): react.JSX.Element;
 
-export { type FilterOption, FilterPopover, type FilterPopoverProps, type SavedViewItem, SavedViewMenu, type SavedViewMenuProps, type SavedViewSection, ViewMenu, type ViewMenuColumn, type ViewMenuProps };
+export { type FilterOption, FilterPopover, type FilterPopoverProps, type SavedViewItem, SavedViewMenu, type SavedViewMenuProps, type SavedViewSection, ViewMenu, type ViewMenuColumn, type ViewMenuColumnLabels, type ViewMenuProps };

package/dist/components/TableControls.js

@@ -1,22 +1,210 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
 import { Button } from "./Button.js";
 import { Checkbox } from "./Checkbox.js";
 import { EditorIcon } from "./EditorIcons.js";
 import { Input } from "./Input.js";
+import { Popover } from "./Popover.js";
 import { Segmented, SegmentedOption } from "./Segmented.js";
 import { Switch } from "./Switch.js";
-function ViewMenu({ density, densityLabel, densityOptions, onDensityChange, zebra, freeze, columns, columnsLabel, onColumnVisibilityChange }) {
-  const densityLabelId = useId();
-  const zebraLabelId = useId();
-  const freezeLabelId = useId();
-  return /* @__PURE__ */ jsxs("div", { className: "uix-view-menu", children: [
-    /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
+const VIEW_MENU_COLUMN_LABELS = {
+  rowActions: "Column actions: {label}",
+  reorder: "Drag to reorder: {label}",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  hide: "Hide",
+  show: "Show",
+  required: "Always shown",
+  moved: "{label} moved to position {position} of {count}"
+};
+const fill = (template, values) => template.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
+const columnText = (column) => column.textLabel ?? (typeof column.label === "string" ? column.label : column.id);
+const isPopoverOpen = (el) => {
+  try {
+    return !!el?.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+function ColumnRowMenu({ label, actions, triggerRef }) {
+  const [open, setOpen] = useState(false);
+  const menuId = useId();
+  const button = useRef(null);
+  const items = useRef([]);
+  const wasOpenAtPress = useRef(false);
+  const enabled = () => items.current.filter((el) => !!el && !el.disabled);
+  const close = (returnFocus) => {
+    const el = document.getElementById(menuId);
+    if (isPopoverOpen(el)) el.hidePopover();
+    setOpen(false);
+    if (returnFocus) button.current?.focus();
+  };
+  useEffect(() => {
+    if (!open) return;
+    const el = document.getElementById(menuId);
+    if (el && typeof el.showPopover === "function" && !isPopoverOpen(el)) {
+      try {
+        el.showPopover();
+      } catch {
+      }
+    }
+    enabled()[0]?.focus();
+    const onToggle = (event) => {
+      if (event.newState === "closed") setOpen(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      close(true);
+    };
+    el?.addEventListener("toggle", onToggle);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      el?.removeEventListener("toggle", onToggle);
+      document.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [open, menuId]);
+  const onMenuKeyDown = (event) => {
+    const list = enabled();
+    const at = list.indexOf(document.activeElement);
+    const focus = (index) => {
+      event.preventDefault();
+      list[(index + list.length) % list.length]?.focus();
+    };
+    if (event.key === "ArrowDown") focus(at + 1);
+    else if (event.key === "ArrowUp") focus(at - 1);
+    else if (event.key === "Home") focus(0);
+    else if (event.key === "End") focus(list.length - 1);
+    else if (event.key === "Tab") close(false);
+  };
+  return /* @__PURE__ */ jsxs("span", { className: "uix-view-menu__actions", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: (el) => {
+          button.current = el;
+          triggerRef(el);
+        },
+        type: "button",
+        className: "uix-btn uix-btn--ghost uix-btn--sm uix-btn--icon",
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        onPointerDown: () => {
+          wasOpenAtPress.current = isPopoverOpen(document.getElementById(menuId));
+        },
+        onClick: () => {
+          const wasOpen = wasOpenAtPress.current;
+          wasOpenAtPress.current = false;
+          if (wasOpen) return;
+          if (open) close(false);
+          else setOpen(true);
+        },
+        children: /* @__PURE__ */ jsx(EditorIcon, { name: "more" })
+      }
+    ),
+    open && /* @__PURE__ */ jsx(Popover, { id: menuId, anchor: button, placement: "bottom-end", offset: 4, role: "menu", "aria-label": label, className: "uix-view-menu__row-menu", onKeyDown: onMenuKeyDown, children: actions.map((action, index) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: (el) => {
+          items.current[index] = el;
+        },
+        type: "button",
+        role: "menuitem",
+        tabIndex: -1,
+        className: "uix-menu__item",
+        disabled: action.disabled,
+        onClick: () => {
+          close(true);
+          action.onSelect();
+        },
+        children: action.label
+      },
+      action.id
+    )) })
+  ] });
+}
+function ViewMenu({
+  density,
+  densityLabel,
+  densityOptions,
+  onDensityChange,
+  displayLabel,
+  zebra,
+  freeze,
+  columns,
+  columnsLabel,
+  onColumnVisibilityChange,
+  onReorder,
+  columnLabels,
+  footer,
+  className
+}) {
+  const baseId = useId();
+  const densityLabelId = `${baseId}-density`;
+  const zebraLabelId = `${baseId}-zebra`;
+  const freezeLabelId = `${baseId}-freeze`;
+  const columnsLabelId = `${baseId}-columns`;
+  const labels = { ...VIEW_MENU_COLUMN_LABELS, ...columnLabels };
+  const list = columns ?? [];
+  const [draft, setDraft] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const dragStart = useRef(null);
+  const listRef = useRef(null);
+  const triggers = useRef(/* @__PURE__ */ new Map());
+  const refocus = useRef(null);
+  const orderKey = JSON.stringify(list.map((column) => column.id));
+  useEffect(() => setDraft(null), [orderKey]);
+  const order = draft ?? list.map((column) => column.id);
+  const byId = new Map(list.map((column) => [column.id, column]));
+  const ordered = order.map((id) => byId.get(id)).filter((column) => !!column);
+  useEffect(() => {
+    const target = refocus.current;
+    refocus.current = null;
+    if (!target) return;
+    const el = target.part === "actions" ? triggers.current.get(target.id) : Array.from(listRef.current?.children ?? []).find((row) => row.dataset.columnId === target.id)?.querySelector(".uix-view-menu__grip");
+    if (el && document.activeElement !== el) el.focus();
+  });
+  const commit = (next, id) => {
+    setDraft(next);
+    onReorder?.([...next]);
+    const column = byId.get(id);
+    if (column) setAnnouncement(fill(labels.moved, { label: columnText(column), position: next.indexOf(id) + 1, count: next.length }));
+  };
+  const move = (id, delta, part) => {
+    const next = placeId(order, id, order.indexOf(id) + delta);
+    if (next === order) return;
+    refocus.current = { id, part };
+    commit(next, id);
+  };
+  const { dragging, start: startDrag } = useRowDrag(".uix-view-menu__col", {
+    over: (id, index) => {
+      const next = placeId(order, id, index);
+      if (next !== order) setDraft(next);
+    },
+    drop: (id) => {
+      const start = dragStart.current;
+      dragStart.current = null;
+      if (start && !sameOrder(start, order)) commit(order, id);
+    }
+  });
+  const rowActions = (column, index) => [
+    { id: "up", label: labels.moveUp, disabled: index === 0, onSelect: () => move(column.id, -1, "actions") },
+    { id: "down", label: labels.moveDown, disabled: index === ordered.length - 1, onSelect: () => move(column.id, 1, "actions") },
+    ...column.required || column.disabled ? [] : [column.visible ? { id: "hide", label: labels.hide, onSelect: () => onColumnVisibilityChange?.(column.id, false) } : { id: "show", label: labels.show, onSelect: () => onColumnVisibilityChange?.(column.id, true) }]
+  ];
+  const showDensity = !!densityOptions?.length && !!onDensityChange;
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-view-menu", className), "data-dragging": dragging ? "" : void 0, children: [
+    showDensity && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
       /* @__PURE__ */ jsx("div", { id: densityLabelId, className: "uix-view-menu__label", children: densityLabel }),
-      /* @__PURE__ */ jsx(Segmented, { value: density, onChange: onDensityChange, "aria-labelledby": densityLabelId, children: densityOptions.map((option) => /* @__PURE__ */ jsx(SegmentedOption, { value: option.value, children: option.label }, option.value)) })
+      /* @__PURE__ */ jsx(Segmented, { value: density ?? "", onChange: onDensityChange, "aria-labelledby": densityLabelId, children: densityOptions.map((option) => /* @__PURE__ */ jsx(SegmentedOption, { value: option.value, children: option.label }, option.value)) })
     ] }),
     (zebra || freeze) && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
+      displayLabel != null && /* @__PURE__ */ jsx("div", { className: "uix-view-menu__label", children: displayLabel }),
       zebra && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__row", children: [
         /* @__PURE__ */ jsx("span", { id: zebraLabelId, children: zebra.label }),
         /* @__PURE__ */ jsx(Switch, { checked: zebra.checked, "aria-labelledby": zebraLabelId, onChange: (event) => zebra.onChange(event.currentTarget.checked) })
@@ -26,10 +214,73 @@ function ViewMenu({ density, densityLabel, densityOptions, onDensityChange, zebr
         /* @__PURE__ */ jsx(Switch, { checked: freeze.checked, "aria-labelledby": freezeLabelId, onChange: (event) => freeze.onChange(event.currentTarget.checked) })
       ] })
     ] }),
-    columns && columns.length > 0 && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
-      columnsLabel != null && /* @__PURE__ */ jsx("div", { className: "uix-view-menu__label", children: columnsLabel }),
-      /* @__PURE__ */ jsx("div", { className: "uix-view-menu__cols", children: columns.map((column) => /* @__PURE__ */ jsx(Checkbox, { label: column.label, checked: column.visible, disabled: column.disabled, onChange: (event) => onColumnVisibilityChange?.(column.id, event.currentTarget.checked) }, column.id)) })
-    ] })
+    ordered.length > 0 && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
+      columnsLabel != null && /* @__PURE__ */ jsx("div", { id: columnsLabelId, className: "uix-view-menu__label", children: columnsLabel }),
+      /* @__PURE__ */ jsx("ul", { ref: listRef, className: "uix-view-menu__cols", "aria-labelledby": columnsLabel != null ? columnsLabelId : void 0, children: ordered.map((column, index) => {
+        const text = columnText(column);
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "uix-view-menu__col",
+            "data-column-id": column.id,
+            "data-visible": String(column.visible),
+            "data-required": column.required ? "true" : void 0,
+            "data-dragging": dragging === column.id || void 0,
+            children: [
+              onReorder && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "uix-view-menu__grip",
+                  tabIndex: -1,
+                  "aria-label": fill(labels.reorder, { label: text }),
+                  onPointerDown: (event) => {
+                    if (event.button !== 0) return;
+                    event.preventDefault();
+                    event.currentTarget.focus({ preventScroll: true });
+                    dragStart.current = order;
+                    startDrag(event, column.id);
+                  },
+                  onKeyDown: (event) => {
+                    if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+                    event.preventDefault();
+                    move(column.id, event.key === "ArrowUp" ? -1 : 1, "grip");
+                  },
+                  children: /* @__PURE__ */ jsx(EditorIcon, { name: "grip" })
+                }
+              ),
+              column.required ? /* @__PURE__ */ jsxs("span", { className: "uix-view-menu__col-toggle", title: labels.required, children: [
+                /* @__PURE__ */ jsx("span", { className: "uix-view-menu__col-box", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "uix-view-menu__col-name", children: column.label })
+              ] }) : /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  className: "uix-view-menu__col-toggle",
+                  label: /* @__PURE__ */ jsx("span", { className: "uix-view-menu__col-name", children: column.label }),
+                  checked: column.visible,
+                  disabled: column.disabled,
+                  onChange: (event) => onColumnVisibilityChange?.(column.id, event.currentTarget.checked)
+                }
+              ),
+              onReorder && /* @__PURE__ */ jsx(
+                ColumnRowMenu,
+                {
+                  label: fill(labels.rowActions, { label: text }),
+                  actions: rowActions(column, index),
+                  triggerRef: (el) => {
+                    if (el) triggers.current.set(column.id, el);
+                    else triggers.current.delete(column.id);
+                  }
+                }
+              )
+            ]
+          },
+          column.id
+        );
+      }) })
+    ] }),
+    footer != null && /* @__PURE__ */ jsx("div", { className: "uix-view-menu__footer", children: footer }),
+    onReorder && /* @__PURE__ */ jsx("div", { role: "status", className: "uix-visually-hidden", children: announcement })
   ] });
 }
 function FilterPopover({ label, type = "text", value, onValueChange, options, applyLabel, clearLabel, onApply, onClear, placeholder }) {
@@ -45,6 +296,51 @@ function FilterPopover({ label, type = "text", value, onValueChange, options, ap
   ] });
 }
 const sameOrder = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+function dropIndex(rows, dragged, clientY) {
+  let index = 0;
+  for (const row of rows) {
+    if (row === dragged) continue;
+    const box = row.getBoundingClientRect();
+    if (clientY > box.top + box.height / 2) index++;
+  }
+  return index;
+}
+function useRowDrag(rowSelector, handlers) {
+  const [dragging, setDragging] = useState(null);
+  const drag = useRef(null);
+  const latest = useRef(handlers);
+  latest.current = handlers;
+  useEffect(() => {
+    if (!dragging) return;
+    const move = (event) => {
+      const current = drag.current;
+      if (!current) return;
+      latest.current.over(current.id, dropIndex(Array.from(current.list.querySelectorAll(`:scope > ${rowSelector}`)), current.row, event.clientY));
+    };
+    const end = () => {
+      const current = drag.current;
+      drag.current = null;
+      setDragging(null);
+      if (current) latest.current.drop(current.id);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", end);
+    window.addEventListener("pointercancel", end);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", end);
+      window.removeEventListener("pointercancel", end);
+    };
+  }, [dragging, rowSelector]);
+  const start = (event, id) => {
+    const row = event.currentTarget.closest("li");
+    if (!row?.parentElement) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    drag.current = { id, list: row.parentElement, row };
+    setDragging(id);
+  };
+  return { dragging, start };
+}
 function placeId(ids, id, index) {
   const from = ids.indexOf(id);
   const to = Math.max(0, Math.min(index, ids.length - 1));
@@ -57,8 +353,8 @@ function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpin
   const baseId = useId();
   const groups = sections ?? [{ id: void 0, items: items ?? [] }];
   const [draft, setDraft] = useState(null);
-  const [dragging, setDragging] = useState(null);
   const dragStart = useRef(null);
+  const dragGroup = useRef(void 0);
   const orderKey = JSON.stringify(groups.map((group) => [group.id, group.items.map((item) => item.id)]));
   useEffect(() => setDraft(null), [orderKey]);
   const orderOf = (group) => draft && draft.group === group.id ? draft.ids : group.items.map((item) => item.id);
@@ -69,29 +365,23 @@ function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpin
     setDraft({ group: group.id, ids: next });
     onReorder?.([...next], group.id);
   };
-  const dragOver = (event, group, id) => {
-    if (dragging !== id) return;
-    const rows = Array.from(event.currentTarget.closest("ul")?.querySelectorAll(":scope > .uix-saved-views__row") ?? []);
-    let index = rows.length - 1;
-    for (let i = 0; i < rows.length; i++) {
-      const box = rows[i].getBoundingClientRect();
-      if (event.clientY < box.top + box.height / 2) {
-        index = i;
-        break;
-      }
+  const { dragging, start: startDrag } = useRowDrag(".uix-saved-views__row", {
+    over: (id, index) => {
+      const group = groups.find((candidate) => candidate.id === dragGroup.current);
+      if (!group) return;
+      const current = orderOf(group);
+      const next = placeId(current, id, index);
+      if (next !== current) setDraft({ group: group.id, ids: next });
+    },
+    drop: () => {
+      const group = groups.find((candidate) => candidate.id === dragGroup.current);
+      const start = dragStart.current;
+      dragStart.current = null;
+      if (!group) return;
+      const end = orderOf(group);
+      if (start && !sameOrder(start, end)) onReorder?.([...end], group.id);
     }
-    const current = orderOf(group);
-    const next = placeId(current, id, index);
-    if (next !== current) setDraft({ group: group.id, ids: next });
-  };
-  const drop = (group, id) => {
-    if (dragging !== id) return;
-    setDragging(null);
-    const start = dragStart.current;
-    dragStart.current = null;
-    const end = orderOf(group);
-    if (start && !sameOrder(start, end)) onReorder?.([...end], group.id);
-  };
+  });
   const visible = groups.filter((group) => group.items.length > 0);
   const renderRows = (group, groupIndex) => {
     const byId = new Map(group.items.map((item) => [item.id, item]));
@@ -111,13 +401,10 @@ function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpin
             onPointerDown: (event) => {
               if (event.button !== 0) return;
               event.preventDefault();
-              event.currentTarget.setPointerCapture?.(event.pointerId);
               dragStart.current = orderOf(group);
-              setDragging(item.id);
+              dragGroup.current = group.id;
+              startDrag(event, item.id);
             },
-            onPointerMove: (event) => dragOver(event, group, item.id),
-            onPointerUp: () => drop(group, item.id),
-            onPointerCancel: () => drop(group, item.id),
             onKeyDown: (event) => {
               if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
               event.preventDefault();

package/dist/emoji.cjs

@@ -665,7 +665,8 @@ var PATHS = {
   sourceMode: "M10 12.5 8 15l2 2.5M14 12.5l2 2.5-2 2.5M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
   richMode: "M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7ZM8 13h8M8 17h5",
   clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6v6l4 2",
-  grip: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01"
+  grip: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01",
+  more: "M5 12h.01M12 12h.01M19 12h.01"
 };
 function EditorIcon({ name, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(