@tensor_1/react 2.22.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

@@ -30,6 +30,8 @@ declare const PATHS: {
     readonly 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";
     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

@@ -27,7 +27,9 @@ const PATHS = {
   redo: "m15 14 5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13",
   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"
+  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",
+  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;
@@ -55,14 +94,26 @@ interface SavedViewItem {
     active?: boolean;
     pinned?: boolean;
 }
-interface SavedViewMenuBaseProps {
+/** A titled group of saved views, e.g. the user's custom views above the built-in presets. */
+interface SavedViewSection {
+    id: string;
+    label: ReactNode;
     items: readonly SavedViewItem[];
+}
+interface SavedViewMenuBaseProps {
     onSelect: (id: string) => void;
     emptyLabel?: ReactNode;
+    /** The row's overflow slot (e.g. a ⋯ menu trigger). It stays quiet until the row is hovered or focused, or its menu is open. */
     actions?: (item: SavedViewItem) => ReactNode;
     footer?: ReactNode;
 }
 type SavedViewMenuProps = SavedViewMenuBaseProps & ({
+    items: readonly SavedViewItem[];
+    sections?: never;
+} | {
+    sections: readonly SavedViewSection[];
+    items?: never;
+}) & ({
     onPinChange: (id: string, pinned: boolean) => void;
     pinLabel: string;
     unpinLabel: string;
@@ -70,8 +121,24 @@ type SavedViewMenuProps = SavedViewMenuBaseProps & ({
     onPinChange?: undefined;
     pinLabel?: never;
     unpinLabel?: never;
+}) & ({
+    /**
+     * Adds a drag grip to every row. Rows move only within their own section; the
+     * callback receives that section's full id order (and its id when `sections` is used).
+     * The grip also moves its row with ArrowUp / ArrowDown.
+     */
+    onReorder: (orderedIds: string[], sectionId: string | undefined) => void;
+    /** Accessible name of the grip; the row's name is attached as its description. */
+    reorderLabel: string;
+} | {
+    onReorder?: undefined;
+    reorderLabel?: never;
 });
-/** Generic saved-view selector. Persistence, ownership and authorization remain application concerns. */
-declare function SavedViewMenu({ items, onSelect, onPinChange, pinLabel, unpinLabel, emptyLabel, actions, footer }: SavedViewMenuProps): react.JSX.Element;
+/**
+ * Generic saved-view selector: optional titled sections inside one `.uix-menu`, rows of
+ * grip · name · overflow. The selected row is tinted as a whole (no check glyph). Persistence,
+ * ownership, permissions and labels remain application concerns.
+ */
+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, 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 };