@eifi1/ui-kit 0.21.0 → 0.23.0

package/src/components/line-items.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, Key, ReactNode } from "react";
+import type { ComponentPropsWithoutRef, CSSProperties, HTMLAttributes, KeyboardEvent, Key, ReactNode } from "react";
 import { Plus, Trash2 } from "lucide-react";
 import { cn } from "../lib/cn";
 import { useKitLabels } from "../i18n/kit-labels";
@@ -112,6 +112,15 @@ export interface LineItemsColumn<T> {
   render: (ctx: LineItemCellContext<T>) => ReactNode;
 }
 
+/**
+ * What {@link LineItemsProps.rowProps} returns for one row: `data-*` hooks, an `id`, a
+ * class, handlers. A `data-*` attribute is typed so `{ "data-tour": "rule-condition" }`
+ * needs no cast.
+ */
+export type LineItemsRowProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML" | "role"> & {
+  [key: `data-${string}`]: string | number | boolean | undefined;
+};
+
 export interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
   items: readonly T[];
   columns: readonly LineItemsColumn<T>[];
@@ -170,6 +179,20 @@ export interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<"div">,
   removeAlign?: LineItemsRemoveAlign;
   /** Disables add and remove (the fields are the caller's to disable). */
   disabled?: boolean;
+  /**
+   * Extra attributes for one row's element (the `role="group"` that holds its fields) —
+   * keksdose K20: its rule editor's tour points at the first condition row with
+   * `[data-tour="rule-condition"]` (dev#495), and with nowhere to put the anchor on the
+   * row it wrapped a cell's field in a `span` instead, which the spotlight then drew
+   * around one field rather than the row. Test ids the same way.
+   *
+   * MERGED under the list's own, which win: `role`, the group's `aria-label` (that is
+   * {@link rowLabel}'s) and `data-line-items-row` stay the list's — the row's name and
+   * the hook its focus handling finds rows by. `className` is added after the row's
+   * own classes, `style` is passed through, and an `onKeyDown` runs BEFORE the row's
+   * Ctrl/⌘+Enter "add a row" (call `preventDefault()` to keep that from happening).
+   */
+  rowProps?: (item: T, index: number) => LineItemsRowProps | undefined;
   labels?: Partial<LineItemsLabels>;
 }
 
@@ -253,6 +276,7 @@ export function LineItems<T>({
   removePlacement = "row",
   removeAlign: removeAlignProp,
   disabled = false,
+  rowProps,
   labels: labelsProp,
   className,
   style,
@@ -405,11 +429,13 @@ export function LineItems<T>({
       {items.map((item, index) => {
         const row = index + 1;
         const isConfirming = confirming === index;
+        const extra = rowProps?.(item, index);
         return (
           // The row's Ctrl/⌘+Enter is a shortcut for the add button, which is itself
           // reachable by Tab; the group only listens for it bubbling from its fields.
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
           <div
+            {...extra}
             key={getKey(item, index)}
             ref={(el) => {
               rowRefs.current[index] = el;
@@ -417,7 +443,13 @@ export function LineItems<T>({
             role="group"
             aria-label={rowLabel ? rowLabel(index, item) : labels.row(row)}
             data-line-items-row=""
-            onKeyDown={onRowKeyDown}
+            onKeyDown={(e) => {
+              if (extra?.onKeyDown) {
+                extra.onKeyDown(e);
+                if (e.defaultPrevented) return;
+              }
+              onRowKeyDown(e);
+            }}
             className={cn(
               "grid grid-cols-1 gap-2 @lg:grid-cols-[var(--line-items-cols)] @lg:items-start",
               // Two short fields to a row of the card — from 18rem, where two fields
@@ -425,6 +457,7 @@ export function LineItems<T>({
               pairs && "@2xs:grid-cols-2",
               // Stacked, each row is a card of its own so the rows stay apart.
               "@max-lg:rounded-md @max-lg:border @max-lg:border-[var(--border)] @max-lg:p-3",
+              extra?.className,
             )}
           >
             {columns.map((column) => {

package/src/components/list.tsx

@@ -10,6 +10,8 @@ import { toneTextClass } from "./signed-amount";
 import type { TextTone } from "./signed-amount";
 import { useKitLabels, useKitLink } from "../i18n/kit-labels";
 import { pickLinkRenderer } from "./text-link";
+import { mergeDescribedBy } from "./choice-parts";
+import { LockedReason, useLockReason } from "./field-parts";
 
 /* ── Labels ───────────────────────────────────────────────────────────────── */
 
@@ -309,6 +311,25 @@ export type ListItemProps = ListItemBaseProps &
     | ({
         /** Makes the row a button — select, open, mark read. */
         onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+        /**
+         * Why the row's click is not available — {@link Button}'s `disabledReason`, for
+         * a row whose click WRITES (mark read, assign, toggle a grant). keksdose K3: such
+         * rows sat behind a `SaveGuard` that forced a native `disabled`, out of the tab
+         * order, so the reason never reached a keyboard; `renderRow` with a Tooltip could
+         * explain it but not keep the row reachable.
+         *
+         * With a reason the row's button is `aria-disabled` instead: still focusable, a
+         * click does nothing, the reason is in the kit {@link Tooltip} over the row and on
+         * its `aria-describedby`, and the row wears the disabled look. It wins over
+         * `disabled`. The row's `actions` are untouched — each control there is its own.
+         */
+        disabledReason?: ReactNode;
+        /**
+         * The row's click COMMITS. Under a locked {@link WriteLockProvider} it is locked
+         * the `disabledReason` way with the lock's reason (which wins over its own). No
+         * provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3.
+         */
+        commit?: boolean;
         href?: never;
         renderLink?: never;
         external?: never;
@@ -337,6 +358,8 @@ export type ListItemProps = ListItemBaseProps &
          *  notification read here too, so a row opened into a background tab does not
          *  stay unread. */
         onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+        disabledReason?: never;
+        commit?: never;
       } & NotExpandable)
     | ({
         onClick?: never;
@@ -344,6 +367,8 @@ export type ListItemProps = ListItemBaseProps &
         renderLink?: never;
         external?: never;
         onAuxClick?: never;
+        disabledReason?: never;
+        commit?: never;
       } & NotExpandable)
     | {
         /**
@@ -369,6 +394,8 @@ export type ListItemProps = ListItemBaseProps &
         renderLink?: never;
         external?: never;
         onAuxClick?: never;
+        disabledReason?: never;
+        commit?: never;
       }
   );
 
@@ -427,6 +454,8 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
     external = false,
     onClick,
     onAuxClick,
+    disabledReason,
+    commit,
     expandedContent,
     expanded: expandedProp,
     defaultExpanded = false,
@@ -446,7 +475,11 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
   const isLink = href !== undefined && !disabled;
   const isButton = !isLink && (onClick !== undefined || expandable) && href === undefined;
   const interactive = isLink || isButton;
-  const inert = disabled || loading;
+  // Only an onClick row takes a reason (the types allow no other); the hook runs on
+  // every row so the hook order never depends on which kind of row this is.
+  const lock = useLockReason(commit, disabledReason);
+  const locked = lock.locked && isButton && !expandable;
+  const inert = disabled || loading || locked;
   const hasBody = children !== undefined && children !== null && children !== false;
   // Anything under the row's own line: the box turns into a column, and the target
   // takes its own corners and hover fill (see `children`).
@@ -558,6 +591,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
     interactive && TARGET_RING,
     interactive && !inert && "cursor-pointer",
     loading && "cursor-progress",
+    locked && !loading && "cursor-not-allowed",
     targetClassName,
   );
 
@@ -598,15 +632,21 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
         ref={ref as Ref<HTMLButtonElement>}
         type="button"
         // A disabled row is `disabled`: nothing to do there, and nothing to reach. A
-        // loading row is only `aria-disabled` — see `loading`.
-        disabled={disabled}
-        aria-disabled={loading || undefined}
+        // loading row is only `aria-disabled` — see `loading` — and so is a locked one:
+        // a reason wins over `disabled`, so the row stays reachable to say it.
+        disabled={locked ? undefined : disabled}
+        aria-disabled={loading || locked || undefined}
         aria-busy={loading || undefined}
         aria-current={selected ? "true" : undefined}
         aria-expanded={expandable ? expanded : undefined}
         aria-controls={expandable ? expandedId : undefined}
+        aria-describedby={
+          locked
+            ? mergeDescribedBy(rest["aria-describedby"] as string | undefined, lock.reasonId)
+            : (rest["aria-describedby"] as string | undefined)
+        }
         onClick={
-          loading
+          loading || locked
             ? undefined
             : expandable
               ? toggle
@@ -617,6 +657,15 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
         {body}
       </button>
     );
+    if (locked) {
+      // The Tooltip takes the target's place in the row, so it takes its flex sizing
+      // too; the button fills it.
+      main = (
+        <LockedReason lock={lock} className="flex min-w-0 flex-1">
+          {main}
+        </LockedReason>
+      );
+    }
   } else {
     main = (
       <div
@@ -652,7 +701,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
             ? "border-[var(--border)]"
             : "border-transparent",
         !stacked && interactive && !inert && !selected && "hover:bg-[var(--bg-hover)]",
-        disabled && "opacity-50",
+        (disabled || locked) && "opacity-50",
         className,
       )}
     >

package/src/components/money-field.tsx

@@ -39,6 +39,19 @@ function parseSettled(text: string): number | null | undefined {
  * rounding to the currency's minor unit and `min` / `max` are AmountInput's. A caller-
  * owned sign (`negative`) is not offered: the figure here carries its own minus.
  *
+ * So are two props a table cell needs (keksdose K4, K6): `error`, the message under the
+ * field that paints and describes it like {@link Input}'s, and `calculator={false}`,
+ * for an amount in a close-on-blur inline editor, where a click on the calculator icon
+ * blurs the field and tears the editor down before the popover can open (typed
+ * calculations still evaluate).
+ *
+ * `inputClassName` (0.23, keksdose G7) styles the `<input>` itself — `text-end` for a
+ * money column — where `className` sizes the wrapper; see {@link AmountInput}'s.
+ *
+ * This, not a `NumberField` with `digits={2}`, is the number-valued field for money:
+ * it settles to the CURRENCY's minor unit (JPY 0, CHF 2) and `digits` takes a unit
+ * price's finer scale (kastlan 5).
+ *
  * ```tsx
  * <MoneyField ariaLabel="Amount" currency="CHF" value={row.amount}
  *   onCommit={(amount) => updateRow(row.id, { amount })} />