@eifi1/ui-kit 0.22.0 → 0.24.0

package/dist/wizard.d.ts

@@ -6,7 +6,10 @@ export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
-import './kit-labels-R8mIAc9N.js';
+import './feedback-DOwPu-Il.js';
+import './components/tooltip.js';
+import './hooks/use-anchored-rect.js';
+import './lib/clipping.js';
 import './data-table-labels-B7OdnM0S.js';
 import './components/data-table-sort.js';
 import './components/swipeable-row.js';
@@ -16,9 +19,6 @@ import './components/popover.js';
 import './components/chip.js';
 import 'lucide-react';
 import './components/field-sync.js';
-import './components/tooltip.js';
-import './hooks/use-anchored-rect.js';
-import './lib/clipping.js';
 import './tour/tour.js';
 import './search/command-palette.js';
 import './search/global-search.js';
@@ -38,9 +38,6 @@ import './components/dialog-frame.js';
 import './components/modal.js';
 import './hooks/use-search-param-state.js';
 import './components/measured-grid.js';
-import './feedback-attachment-NhUm7Zga.js';
-import './feedback/feedback-thread.js';
-import './feedback/feedback-inbox.js';
 import './components/account-settings-labels.js';
 import './components/floating-panel.js';
 import './components/bulk-action-bar.js';
@@ -70,3 +67,7 @@ import './components/inline-edit-field.js';
 import './lib/iban.js';
 import './lib/phone.js';
 import './components/sign-chip.js';
+import './components/column-mapper.js';
+import './lib/column-mapping.js';
+import './lib/table-text.js';
+import './components/field-parts.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/components/amount-input.tsx

@@ -55,7 +55,33 @@ interface AmountInputProps {
    * a phone keeps its numpad, exactly as {@link NumberInput}'s `calculator={false}`.
    */
   calculator?: boolean;
+  /** The field's WRAPPER — width, a margin, a flex share. The `<input>` is
+   *  `inputClassName`'s. */
   className?: string;
+  /**
+   * Classes for the `<input>` itself — {@link NumberInput}'s and {@link Input}'s prop of
+   * the same name, merged the same way: after everything the field sets for LOOKS — the
+   * base classes, the plain end padding, the display shape's centring and the `tone`
+   * colour — so it can restyle the figure (`text-end` for a money column whose decimal
+   * points line up, `font-medium`, a tighter `py-1` or a symmetric `px-2` in a table
+   * cell, `text-transparent` while a figure is being re-fetched), and before what the
+   * field needs to WORK: the end padding the calculator and the currency chip reserve,
+   * and the invalid border. Neither of those can be taken away by accident — a caller's
+   * `px-2` keeps its start edge and the digits still stop short of the chip, and a
+   * borderless cell's `border-transparent` still turns red when the value is wrong.
+   *
+   * keksdose G7: the invoice's VAT cell right-aligns its figure, and with only
+   * `className` (the wrapper) it reached the element through `[&_input]:text-end` — a
+   * descendant selector that depends on the field's inner markup, which the kit is free
+   * to change, and that a reader of the call site has to decode. {@link MoneyField}
+   * passes it through, and `RhfMoneyField` takes it too.
+   *
+   * keksdose 0.24: until then it sat BEFORE the plain end padding (`pe-3`) and the tone,
+   * so the budget's assigned cell could not make its padding symmetric (`px-2` came out
+   * `px-2 pe-3`) and the holdings price could not hide an outflow-toned figure while
+   * re-fetching — both were back on `[&_input]:` selectors on the wrapper.
+   */
+  inputClassName?: string;
   id?: string;
   ariaLabel?: string;
   /**
@@ -291,7 +317,7 @@ function isResultOf(previous: string, text: string, settle: (text: string) => st
 }
 
 export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
-  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, error, calculator = true, className, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, hint, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {
+  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, error, calculator = true, className, inputClassName, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, hint, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {
     const generatedId = useId();
     const fieldId = id ?? generatedId;
     const hintId = useId();
@@ -320,6 +346,17 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     // fighting itself through responsive overrides. `useMediaQuery` reads
     // synchronously on mount, so there is no field→figure flash.
     const asDisplay = variant === "display" && isMobile;
+    // Room for the trailing controls — the calculator and the currency chip — or
+    // nothing when neither trails. showCalc is always false on a phone, so the display
+    // shape only ever has to clear the currency chip — and it clears it by the chip's
+    // actual width (a text-sm code plus a chevron, ~58px) rather than the 5rem the
+    // boxed shape reserves. On a 375px screen those 16px are the difference between a
+    // readable figure and a clipped one (feedback #430 rework).
+    const trailingRoom = asDisplay
+      ? currency ? (editable ? "pe-16" : "pe-12") : undefined
+      : showCalc
+        ? currency ? (editable ? "pe-24" : "pe-16") : "pe-10"
+        : currency ? (editable ? "pe-20" : "pe-14") : undefined;
     const innerRef = useRef<HTMLInputElement>(null);
     const setRefs = useCallback(
       (el: HTMLInputElement | null) => {
@@ -504,25 +541,24 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
             // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +
             // transparent-placeholder bits.
             asDisplay ? DISPLAY_INPUT_CLASS : label !== undefined ? FLOATING_INPUT_CLASS : FIELD_BASE,
-            // Room for the trailing controls. showCalc is always false on a phone,
-            // so the display shape only ever has to clear the currency chip — and
-            // it clears it by the chip's actual width (a text-sm code plus a
-            // chevron, ~58px) rather than the 5rem the boxed shape reserves. On a
-            // 375px screen those 16px are the difference between a readable figure
-            // and a clipped one (feedback #430 rework).
-            asDisplay
-              ? currency ? (editable ? "pe-16" : "pe-12") : "pe-0"
-              : showCalc
-                ? currency ? (editable ? "pe-24" : "pe-16") : "pe-10"
-                : currency ? (editable ? "pe-20" : "pe-14") : "pe-3",
+            // The plain end padding, with nothing trailing: cosmetic, so the caller's
+            // to change (keksdose 0.24 — a symmetric `px-2` in a budget cell).
+            !trailingRoom && (asDisplay ? "pe-0" : "pe-3"),
             // Centred display shape: centre in what is LEFT of the currency chip.
             // `text-center` alone would centre the figure in the whole box, i.e.
-            // partly underneath the chip; the padding above is what takes the chip
+            // partly underneath the chip; the padding below is what takes the chip
             // out of the centring, and nothing is added at the start because a
             // mirrored reservation would spend the width twice (see `align`).
             asDisplay && align === "center" && "text-center",
-            // Last, so it wins over the base class's own text colour.
+            // Over the base class's own text colour.
             TONE_CLASS[tone],
+            // The caller's, over all of the above — base, plain padding, alignment and
+            // tone — and under only what the field needs to work (see `inputClassName`).
+            inputClassName,
+            // Room for the trailing controls, after the caller's so a `px-2` cannot run
+            // the digits under the chip (NumberInput's order, which reserves its unit
+            // and calculator the same way).
+            trailingRoom,
             invalid && FIELD_INVALID,
           )}
           aria-invalid={invalid || undefined}

package/src/components/autocomplete.tsx

@@ -14,6 +14,7 @@ import { useAnchorDir } from "./use-anchor-dir";
 import {
   ComboboxFieldLabel,
   DISABLED_ROW_CLASS,
+  endHintRowProps,
   isOptionEnabled,
   stepEnabled,
   useActiveOptionScroll,
@@ -22,7 +23,16 @@ import {
   type ComboOption,
 } from "./combobox-core";
 import { DEFAULT_COMBOBOX_LABELS, useKitLabels } from "../i18n/kit-labels";
-import { EndHintRow, FieldCaption, LABEL_IN_ROW, StaticLabelRow, useFieldHint } from "./field-parts";
+import {
+  EndHintRow,
+  FieldCaption,
+  LABEL_IN_ROW,
+  LockedReason,
+  StaticLabelRow,
+  useFieldHint,
+  useLockReason,
+} from "./field-parts";
+import { mergeDescribedBy } from "./choice-parts";
 
 /**
  * `value`/`onChange` are the TEXT's, and `onSelect` is "a suggestion was taken" —
@@ -111,6 +121,11 @@ export interface AutocompleteProps<V extends string | number = string>
    * `aria-describedby`, before any error; a {@link FieldHint} "?" rides the label line,
    * or with no label sits at the field's end edge, outside the box. Not the list's
    * `status` line, which talks about the lookup, not the field.
+   *
+   * Pass it — even as `undefined` — on a field whose hint comes and goes (0.24): the
+   * unlabelled field then keeps its end-hint row whether or not a "?" is in it, so the
+   * `<input>` is never re-parented, and focus and caret survive the toggle. The rule
+   * the rest of the family has had since 0.23 (and the fields since 0.22).
    */
   hint?: ReactNode;
   /**
@@ -126,10 +141,34 @@ export interface AutocompleteProps<V extends string | number = string>
   loadErrorLabel?: string;
   /** Classes for the `<input>` itself; `className` styles the wrapper. */
   inputClassName?: string;
+  /**
+   * Why the field cannot be changed — {@link Button}'s `disabledReason`, the Combobox
+   * family's write lock (keksdose G2, 0.23), for a field whose pick SAVES: an address
+   * search whose taken row writes the address, a lookup that links a record.
+   *
+   * With a reason the input stays focusable and `aria-disabled`, is `readOnly` (the
+   * settled grey FIELD_BASE gives a `[readonly]` field), opens no list and asks no
+   * `loadOptions` — whatever `open` says — and nothing reaches `onChange`, `onSelect` or
+   * `onOpenChange(true)`. Enter is swallowed, so a locked field does not submit the form
+   * around it, and a caller's `onKeyDown` does not hear it; every other key still
+   * reaches the caller (an Escape that closes its panel) and the caret. The reason is in
+   * the kit {@link Tooltip} and on the input's `aria-describedby`. Wins over `disabled`.
+   */
+  disabledReason?: ReactNode;
+  /**
+   * This field COMMITS. Under a locked {@link WriteLockProvider} it is locked the
+   * `disabledReason` way with the lock's reason (which wins over its own). A search
+   * whose result is only draft state — the form's Save writes it — leaves this off and
+   * stays live under the lock. No provider, or an unlocked one: no effect.
+   */
+  commit?: boolean;
 }
 
 function AutocompleteInner<V extends string | number = string>(
-  {
+  props: AutocompleteProps<V>,
+  ref: ForwardedRef<HTMLInputElement>,
+) {
+  const {
     value,
     onChange,
     options,
@@ -155,6 +194,8 @@ function AutocompleteInner<V extends string | number = string>(
     inputClassName,
     id,
     disabled,
+    disabledReason,
+    commit,
     onKeyDown,
     onFocus,
     onBlur,
@@ -162,9 +203,7 @@ function AutocompleteInner<V extends string | number = string>(
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
     ...rest
-  }: AutocompleteProps<V>,
-  ref: ForwardedRef<HTMLInputElement>,
-) {
+  } = props;
   const generated = useId();
   const fieldId = id ?? generated;
   // Off the GENERATED id: a caller's `id` is theirs to collide with.
@@ -191,7 +230,11 @@ function AutocompleteInner<V extends string | number = string>(
     if (next !== open) onOpenChange?.(next);
   };
   const [active, setActive] = useState(-1);
-  const live = open && !disabled;
+  // The lock: focusable, `readOnly`, no list — see `disabledReason`. Folded into `live`,
+  // so a locked field asks nothing and shows nothing even with `open` held true.
+  const lock = useLockReason(commit, disabledReason);
+  const locked = lock.locked;
+  const live = open && !disabled && !locked;
   const { results, busy, failed, tooShort } = useOptionSource<V>({
     options,
     loadOptions,
@@ -230,7 +273,7 @@ function AutocompleteInner<V extends string | number = string>(
     setActive(-1);
   };
   const take = (o: ComboOption<V>) => {
-    if (o.disabled) return;
+    if (o.disabled || locked) return;
     if (fillOnSelect) onChange(o.label);
     onSelect?.(o);
     close();
@@ -245,6 +288,16 @@ function AutocompleteInner<V extends string | number = string>(
   // label still names the field.
   const labelledBy =
     ariaLabel === undefined ? (ariaLabelledBy ?? (hasLabel ? labelId : undefined)) : undefined;
+  // While locked the field sits in the reason's Tooltip — in a fragment with a hidden
+  // copy of the reason, Button's anatomy; `block` so a full-width field stays full width.
+  const withLock = (box: ReactNode) =>
+    locked ? (
+      <LockedReason lock={lock} className="block">
+        {box}
+      </LockedReason>
+    ) : (
+      box
+    );
 
   return (
     // `relative`: the floating label and the live region's `sr-only` both need a
@@ -257,120 +310,139 @@ function AutocompleteInner<V extends string | number = string>(
           {label}
         </ComboboxFieldLabel>
       )}
-      <EndHintRow hint={hasLabel ? undefined : hintParts.labelHint}>
-        <div ref={fieldRef} className="relative">
-          {icon && (
-            <span
-              aria-hidden
-              className={cn(
-                "pointer-events-none absolute flex text-[var(--text-muted)]",
-                small ? "start-2 [&>svg]:size-3.5" : "start-2.5 [&>svg]:size-4",
-                // Labelled, the icon sits on the VALUE's line — the one line box below
-                // FIELD_FLOATING_PAD's `pt-4` and the 1px border — not on the middle of
-                // the box. Centred on the box it rose into the top strip and sat on the
-                // label's first letters, which float at the same start inset. On the
-                // value line it is beside what it describes, and the label keeps the
-                // start edge every other label in the form's column shares.
-                hasLabel
-                  ? "top-[calc(1rem+1px)] h-5 items-center"
-                  : "top-1/2 -translate-y-1/2",
-              )}
-            >
-              {icon}
-            </span>
-          )}
-          <input
-            {...rest}
-            ref={ref}
-            id={fieldId}
-            size={nativeSize}
-            type="text"
-            value={value}
-            disabled={disabled}
-            role="combobox"
-            aria-autocomplete="list"
-            aria-expanded={expanded}
-            // Required by the role, and set while closed too, as on the siblings.
-            aria-controls={listboxId}
-            aria-activedescendant={activeId}
-            aria-label={ariaLabel}
-            aria-labelledby={labelledBy}
-            aria-invalid={field.isInvalid || rest["aria-invalid"] || undefined}
-            aria-describedby={field.describedBy}
-            autoComplete="off"
-            onFocus={(e) => {
-              onFocus?.(e);
-              // A seeded field (keksdose's `initialQuery`) is looked up as it is
-              // focused; an empty one asks nothing, because of `minChars`.
-              setOpen(true);
-            }}
-            onBlur={(e) => {
-              onBlur?.(e);
-              close();
-            }}
-            onChange={(e) => {
-              onChange(e.target.value);
-              setOpen(true);
-              setActive(-1);
-            }}
-            onKeyDown={(e) => {
-              // An Escape that closes the OPEN list is the list's, and is consumed before
-              // the caller sees it. A caller whose Escape means "close the panel" (keksdose's
-              // address search) otherwise closed the whole panel when the user only meant
-              // to dismiss the suggestions — the opposite of what the docs promised.
-              if (e.key === "Escape" && expanded) {
-                e.preventDefault();
-                e.stopPropagation();
+      {/* `"hint" in props`: the family's 0.22 rule (see `endHintRowProps`) — passed at
+          all, even as `undefined`, a hint keeps the unlabelled field's end-hint row, so
+          a "?" coming and going never re-parents the <input> under the caret (0.24, the
+          last of the family to get it; the siblings had it in 0.23). */}
+      <EndHintRow {...endHintRowProps("hint" in props, hasLabel, hintParts.labelHint)}>
+        {withLock(
+          <div ref={fieldRef} className={cn("relative", locked && "cursor-not-allowed")}>
+            {icon && (
+              <span
+                aria-hidden
+                className={cn(
+                  "pointer-events-none absolute flex text-[var(--text-muted)]",
+                  small ? "start-2 [&>svg]:size-3.5" : "start-2.5 [&>svg]:size-4",
+                  // Labelled, the icon sits on the VALUE's line — the one line box below
+                  // FIELD_FLOATING_PAD's `pt-4` and the 1px border — not on the middle of
+                  // the box. Centred on the box it rose into the top strip and sat on the
+                  // label's first letters, which float at the same start inset. On the
+                  // value line it is beside what it describes, and the label keeps the
+                  // start edge every other label in the form's column shares.
+                  hasLabel
+                    ? "top-[calc(1rem+1px)] h-5 items-center"
+                    : "top-1/2 -translate-y-1/2",
+                )}
+              >
+                {icon}
+              </span>
+            )}
+            <input
+              {...rest}
+              ref={ref}
+              id={fieldId}
+              size={nativeSize}
+              type="text"
+              value={value}
+              // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.
+              disabled={locked ? undefined : disabled}
+              readOnly={locked || rest.readOnly}
+              aria-disabled={locked || rest["aria-disabled"]}
+              role="combobox"
+              aria-autocomplete="list"
+              aria-expanded={expanded}
+              // Required by the role, and set while closed too, as on the siblings.
+              aria-controls={listboxId}
+              aria-activedescendant={activeId}
+              aria-label={ariaLabel}
+              aria-labelledby={labelledBy}
+              aria-invalid={field.isInvalid || rest["aria-invalid"] || undefined}
+              aria-describedby={mergeDescribedBy(field.describedBy, locked && lock.reasonId)}
+              autoComplete="off"
+              onFocus={(e) => {
+                onFocus?.(e);
+                // A locked field takes focus to say why, and opens nothing.
+                if (locked) return;
+                // A seeded field (keksdose's `initialQuery`) is looked up as it is
+                // focused; an empty one asks nothing, because of `minChars`.
+                setOpen(true);
+              }}
+              onBlur={(e) => {
+                onBlur?.(e);
                 close();
-                return;
-              }
-              onKeyDown?.(e);
-              if (e.defaultPrevented) return;
-              // Disabled rows are passed over; at either end the highlight stays put.
-              if (e.key === "ArrowDown") {
-                e.preventDefault();
-                if (!open) setOpen(true);
-                else setActive((i) => stepEnabled(results, i, 1));
-              } else if (e.key === "ArrowUp") {
-                e.preventDefault();
-                if (!open) setOpen(true);
-                // From "nothing highlighted", Up goes to the bottom, as the APG has it.
-                else setActive((i) => stepEnabled(results, i < 0 ? results.length : i, -1));
-              } else if (e.key === "Enter") {
-                // No row highlighted: the text is the answer, and a form's own submit
-                // is left alone.
-                if (expanded && activeId) {
+              }}
+              onChange={(e) => {
+                if (locked) return;
+                onChange(e.target.value);
+                setOpen(true);
+                setActive(-1);
+              }}
+              onKeyDown={(e) => {
+                // Locked: Enter is swallowed (no form submit, no caller's "search now");
+                // every other key is the caller's and the caret's. No list to drive.
+                if (locked) {
+                  if (e.key === "Enter") e.preventDefault();
+                  else onKeyDown?.(e);
+                  return;
+                }
+                // An Escape that closes the OPEN list is the list's, and is consumed before
+                // the caller sees it. A caller whose Escape means "close the panel" (keksdose's
+                // address search) otherwise closed the whole panel when the user only meant
+                // to dismiss the suggestions — the opposite of what the docs promised.
+                if (e.key === "Escape" && expanded) {
                   e.preventDefault();
-                  take(results[active]);
+                  e.stopPropagation();
+                  close();
+                  return;
                 }
-              } else if (e.key === "Tab") {
-                close();
-              }
-            }}
-            className={cn(
-              FIELD_BASE,
-              hasLabel && FIELD_FLOATING_PAD,
-              // Select's `SELECT_SM` box: a fixed 28px, so the caller's line height
-              // cannot grow it.
-              small && "h-7 py-0 pe-2 ps-2 text-xs",
-              icon ? (small ? "ps-7" : "ps-8") : undefined,
-              busy && (small ? "pe-7" : "pe-9"),
-              field.isInvalid && FIELD_INVALID,
-              inputClassName,
-            )}
-          />
-          {busy && live && (
-            // Decorative: the live region below already says "Loading…".
-            <span
+                onKeyDown?.(e);
+                if (e.defaultPrevented) return;
+                // Disabled rows are passed over; at either end the highlight stays put.
+                if (e.key === "ArrowDown") {
+                  e.preventDefault();
+                  if (!open) setOpen(true);
+                  else setActive((i) => stepEnabled(results, i, 1));
+                } else if (e.key === "ArrowUp") {
+                  e.preventDefault();
+                  if (!open) setOpen(true);
+                  // From "nothing highlighted", Up goes to the bottom, as the APG has it.
+                  else setActive((i) => stepEnabled(results, i < 0 ? results.length : i, -1));
+                } else if (e.key === "Enter") {
+                  // No row highlighted: the text is the answer, and a form's own submit
+                  // is left alone.
+                  if (expanded && activeId) {
+                    e.preventDefault();
+                    take(results[active]);
+                  }
+                } else if (e.key === "Tab") {
+                  close();
+                }
+              }}
               className={cn(
-                "pointer-events-none absolute top-1/2 flex -translate-y-1/2",
-                small ? "end-2" : "end-2.5",
+                FIELD_BASE,
+                hasLabel && FIELD_FLOATING_PAD,
+                // Select's `SELECT_SM` box: a fixed 28px, so the caller's line height
+                // cannot grow it.
+                small && "h-7 py-0 pe-2 ps-2 text-xs",
+                icon ? (small ? "ps-7" : "ps-8") : undefined,
+                busy && (small ? "pe-7" : "pe-9"),
+                field.isInvalid && FIELD_INVALID,
+                inputClassName,
               )}
-            >
-              <Spinner label={null} className={small ? "h-3.5 w-3.5" : "h-4 w-4"} />
-            </span>
-          )}
-        </div>
+            />
+            {busy && live && (
+              // Decorative: the live region below already says "Loading…".
+              <span
+                className={cn(
+                  "pointer-events-none absolute top-1/2 flex -translate-y-1/2",
+                  small ? "end-2" : "end-2.5",
+                )}
+              >
+                <Spinner label={null} className={small ? "h-3.5 w-3.5" : "h-4 w-4"} />
+              </span>
+            )}
+          </div>,
+        )}
       </EndHintRow>
       {/* With a "?" the label shares the top strip with it, after the field so the "?"
           follows the control in the tab order (as on Input and Select). */}