@keboola/design 11.0.0 → 11.2.0

package/dist/FieldItem-D-h1NeBo.js

@@ -0,0 +1,108 @@
+import { Tooltip } from "./utils-D0c5VAyF.js";
+import { Info } from "./icons-Cek151jC.js";
+import { Label } from "./internal/components/Label.js";
+import { FormGroup } from "./FormGroup-C41n65cE.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createFormHookContexts, useStore } from "@tanstack/react-form";
+//#region src/blocks/Form/contexts.ts
+const { fieldContext, useFieldContext, formContext, useFormContext } = createFormHookContexts();
+//#endregion
+//#region src/blocks/Form/connectors/FieldItem.tsx
+/**
+* Shared frame for a form field: label (+ required marker + tooltip), the control, and help/error
+* text. It reads the field from context and owns everything derivable — validity, the error/help
+* ids, and the control's `aria-*` wiring — so a connector only picks a control and binds its value.
+*/
+const FieldItem = ({ label, action, required, requiredMark = "required", labelling = "for", help, tooltip, className, "aria-describedby": ariaDescribedBy, children }) => {
+	const field = useFieldContext();
+	const form = useFormContext();
+	const { errors, isBlurred } = field.state.meta;
+	const submissionAttempts = useStore(form.store, (state) => state.submissionAttempts);
+	/**
+	* The submit count as of this field's first render.
+	*
+	* - `submissionAttempts` never goes down, so a bare `> 0` would reveal errors on a field that mounted
+	*   *after* a failed submit — switch a type on a form that already failed Save and every freshly
+	*   revealed control says "Required" before the user reaches it.
+	* - Comparing against the mount value asks the question that matters: has a submit happened while this
+	*   field was on screen?
+	* - `form.reset()` puts the counter back to 0 without unmounting anything, so the baseline has to
+	*   follow it down. Left alone it outruns the counter and the next submit compares `1 > 1` — the
+	*   error stays hidden until a second one.
+	*/
+	const attemptsAtMountRef = useRef(submissionAttempts);
+	if (submissionAttempts < attemptsAtMountRef.current) attemptsAtMountRef.current = submissionAttempts;
+	/**
+	* ⚠️ **Blurred, not touched.**
+	*
+	* `isTouched` looks like the right gate and is not: `FormApi.setFieldValue` sets it, so filling a field
+	* *for* the user — an id derived from a name, a default written when a type is picked — reads as the
+	* user having been there (`validateField` and `validateAllFields` set it too). The visible result is
+	* "Required" under a control the user has never been near.
+	*
+	* `isBlurred` is per-field and only a real blur sets it: the user was in this control and left it.
+	* A submit attempt reveals everything that was on screen for it, because a field nobody visited still
+	* has to explain itself once the button is pressed. `setServerFieldErrors` marks `isBlurred` for the
+	* same reason — a mutation that fails outside a submit has neither signal otherwise.
+	*/
+	const isInvalid = (isBlurred || submissionAttempts > attemptsAtMountRef.current) && errors.length > 0;
+	const errorId = `${field.name}-error`;
+	const descriptionId = `${field.name}-description`;
+	const labelId = `${field.name}-label`;
+	const namesByAria = labelling === "aria-labelledby";
+	const describedBy = [
+		ariaDescribedBy,
+		!!help && descriptionId,
+		isInvalid && errorId
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs(FormGroup, {
+		className,
+		children: [
+			(label || action) && /* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:items-center tw:justify-between tw:gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "tw:flex tw:items-center tw:gap-1",
+					children: [label && /* @__PURE__ */ jsxs(Label, {
+						htmlFor: namesByAria ? void 0 : field.name,
+						id: namesByAria ? labelId : void 0,
+						children: [
+							label,
+							requiredMark === "required" && required && /* @__PURE__ */ jsx(Label.Required, {}),
+							requiredMark === "optional" && !required && /* @__PURE__ */ jsx(Label.Optional, {})
+						]
+					}), tooltip && /* @__PURE__ */ jsx(Tooltip, {
+						tooltip,
+						placement: "top",
+						triggerAsChild: true,
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": typeof label === "string" ? `More information about ${label}` : "More information",
+							className: "tw:text-muted-foreground tw:focus:outline-hidden tw:focus-visible:text-primary tailwindcss-preflight",
+							children: /* @__PURE__ */ jsx(Info, { className: "tw:size-3" })
+						})
+					})]
+				}), action]
+			}),
+			children({
+				id: field.name,
+				name: field.name,
+				"aria-required": required || void 0,
+				"aria-invalid": isInvalid || void 0,
+				"aria-describedby": describedBy,
+				"aria-labelledby": namesByAria && label ? labelId : void 0
+			}),
+			(help || isInvalid) && /* @__PURE__ */ jsxs("div", { children: [help && /* @__PURE__ */ jsx(FormGroup.Help, {
+				id: descriptionId,
+				children: help
+			}), isInvalid && /* @__PURE__ */ jsx(FormGroup.Error, {
+				id: errorId,
+				errors
+			})] })
+		]
+	});
+};
+//#endregion
+export { FieldItem, fieldContext, formContext, useFieldContext, useFormContext };
+
+//# sourceMappingURL=FieldItem-D-h1NeBo.js.map

package/dist/FieldItem-D-h1NeBo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldItem-D-h1NeBo.js","names":[],"sources":["../src/blocks/Form/contexts.ts","../src/blocks/Form/connectors/FieldItem.tsx"],"sourcesContent":["import { createFormHookContexts } from '@tanstack/react-form';\n\nexport const { fieldContext, useFieldContext, formContext, useFormContext } =\n  createFormHookContexts();\n","import { type ReactNode, useRef } from 'react';\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '../../../components/Label';\nimport { Tooltip } from '../../../components/Tooltip';\nimport { Info } from '../../../icons';\nimport { FormGroup } from '../../FormGroup';\nimport { useFieldContext, useFormContext } from '../contexts';\n\n/**\n * The a11y wiring `FieldItem` derives from the field and hands back to the control — spread it onto\n * whatever element the field renders. Callers never author these attributes themselves.\n */\ntype FieldControlProps = {\n  id: string;\n  name: string;\n  'aria-required'?: true;\n  'aria-invalid'?: true;\n  'aria-describedby'?: string;\n  /** Present only under `labelling: 'aria-labelledby'` — see the prop. */\n  'aria-labelledby'?: string;\n};\n\n/** Which marker sits next to the label. Purely visual — `aria-required` is driven by `required`. */\ntype RequiredMark = 'required' | 'optional' | 'hidden';\n\n/**\n * How the control takes its accessible name from the label.\n *\n * - `'for'` (default) — `<label for>` points at the control's `id`. Correct for the *labelable*\n *   elements: `input`, `textarea`, `select`, `button`, and anything rendering one.\n * - `'aria-labelledby'` — the label gets an id and it comes back in `control['aria-labelledby']`,\n *   with no `for` emitted. For controls that are **not** labelable elements: a CodeMirror or Lexical\n *   editable region, or a composite widget whose focusable node is a `div[role]`. `<label for>`\n *   pointing at one of those is invalid HTML and silently names nothing.\n */\ntype Labelling = 'for' | 'aria-labelledby';\n\ntype Props = {\n  label?: ReactNode;\n  /**\n   * Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a\n   * \"Forgot password?\" link beside a Password label. Presentational placement only; it is a sibling\n   * of the `<Label>`, not part of the field's accessible name. Provide an interactive element\n   * (`ButtonInline` / `Link`).\n   */\n  action?: ReactNode;\n  required?: boolean;\n  /**\n   * Which marker to show beside the label — gated by `required` so it never lies: `'required'`\n   * renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it\n   * is not; `'hidden'` renders neither. Defaults to `'required'`.\n   */\n  requiredMark?: RequiredMark;\n  /** See {@link Labelling}. Defaults to `'for'`. */\n  labelling?: Labelling;\n  help?: ReactNode;\n  tooltip?: ReactNode;\n  className?: string;\n  'aria-describedby'?: string;\n  children: (control: FieldControlProps) => ReactNode;\n};\n\n/**\n * The frame props a connector re-exposes to its own callers.\n *\n * - `labelling` is not among them: which mechanism names the control follows from what the control\n *   *is*, so the connector picks it, not the call site.\n * - Leaving it in would type-check and do nothing — no connector forwards it — and land in the rest\n *   spread instead, which for `TextField` / `TextareaField` reaches the DOM `<input>`.\n */\nexport type FieldItemProps = Omit<Props, 'children' | 'labelling'>;\n\n/**\n * Shared frame for a form field: label (+ required marker + tooltip), the control, and help/error\n * text. It reads the field from context and owns everything derivable — validity, the error/help\n * ids, and the control's `aria-*` wiring — so a connector only picks a control and binds its value.\n */\nexport const FieldItem = ({\n  label,\n  action,\n  required,\n  requiredMark = 'required',\n  labelling = 'for',\n  help,\n  tooltip,\n  className,\n  'aria-describedby': ariaDescribedBy,\n  children,\n}: Props) => {\n  const field = useFieldContext();\n  const form = useFormContext();\n  const { errors, isBlurred } = field.state.meta;\n  const submissionAttempts = useStore(form.store, (state) => state.submissionAttempts);\n\n  /**\n   * The submit count as of this field's first render.\n   *\n   * - `submissionAttempts` never goes down, so a bare `> 0` would reveal errors on a field that mounted\n   *   *after* a failed submit — switch a type on a form that already failed Save and every freshly\n   *   revealed control says \"Required\" before the user reaches it.\n   * - Comparing against the mount value asks the question that matters: has a submit happened while this\n   *   field was on screen?\n   * - `form.reset()` puts the counter back to 0 without unmounting anything, so the baseline has to\n   *   follow it down. Left alone it outruns the counter and the next submit compares `1 > 1` — the\n   *   error stays hidden until a second one.\n   */\n  const attemptsAtMountRef = useRef(submissionAttempts);\n  if (submissionAttempts < attemptsAtMountRef.current)\n    attemptsAtMountRef.current = submissionAttempts;\n\n  /**\n   * ⚠️ **Blurred, not touched.**\n   *\n   * `isTouched` looks like the right gate and is not: `FormApi.setFieldValue` sets it, so filling a field\n   * *for* the user — an id derived from a name, a default written when a type is picked — reads as the\n   * user having been there (`validateField` and `validateAllFields` set it too). The visible result is\n   * \"Required\" under a control the user has never been near.\n   *\n   * `isBlurred` is per-field and only a real blur sets it: the user was in this control and left it.\n   * A submit attempt reveals everything that was on screen for it, because a field nobody visited still\n   * has to explain itself once the button is pressed. `setServerFieldErrors` marks `isBlurred` for the\n   * same reason — a mutation that fails outside a submit has neither signal otherwise.\n   */\n  const isInvalid =\n    (isBlurred || submissionAttempts > attemptsAtMountRef.current) && errors.length > 0;\n\n  const errorId = `${field.name}-error`;\n  const descriptionId = `${field.name}-description`;\n  const labelId = `${field.name}-label`;\n  const namesByAria = labelling === 'aria-labelledby';\n  // Help and error are not exclusive — link the control to whichever are present. Space-delimited\n  // ARIA idref list; falsy entries dropped, and `undefined` when empty so the attr is omitted.\n  const describedBy =\n    [ariaDescribedBy, !!help && descriptionId, isInvalid && errorId].filter(Boolean).join(' ') ||\n    undefined;\n\n  return (\n    <FormGroup className={className}>\n      {(label || action) && (\n        <div className=\"tw:flex tw:items-center tw:justify-between tw:gap-2\">\n          <div className=\"tw:flex tw:items-center tw:gap-1\">\n            {/* Marker binds to the label text; the interactive tooltip button is a sibling. */}\n            {label && (\n              // `htmlFor` only when the control is a labelable element. Under `aria-labelledby` the\n              // label carries an id instead and the control points back at it — a `for` aimed at a\n              // `div[role=textbox]` is invalid HTML and names nothing.\n              <Label\n                htmlFor={namesByAria ? undefined : field.name}\n                id={namesByAria ? labelId : undefined}\n              >\n                {label}\n                {/* Marker follows both flags: `*` only when actually required, `(optional)` only\n                    when not — a mismatched marker would lie. `hidden` shows neither. */}\n                {requiredMark === 'required' && required && <Label.Required />}\n                {requiredMark === 'optional' && !required && <Label.Optional />}\n              </Label>\n            )}\n\n            {tooltip && (\n              <Tooltip tooltip={tooltip} placement=\"top\" triggerAsChild>\n                <button\n                  type=\"button\"\n                  aria-label={\n                    typeof label === 'string'\n                      ? `More information about ${label}`\n                      : 'More information'\n                  }\n                  className=\"tw:text-muted-foreground tw:focus:outline-hidden tw:focus-visible:text-primary tailwindcss-preflight\"\n                >\n                  <Info className=\"tw:size-3\" />\n                </button>\n              </Tooltip>\n            )}\n          </div>\n\n          {action}\n        </div>\n      )}\n\n      {children({\n        id: field.name,\n        name: field.name,\n        'aria-required': required || undefined,\n        'aria-invalid': isInvalid || undefined,\n        'aria-describedby': describedBy,\n        'aria-labelledby': namesByAria && label ? labelId : undefined,\n      })}\n\n      {(help || isInvalid) && (\n        <div>\n          {help && <FormGroup.Help id={descriptionId}>{help}</FormGroup.Help>}\n          {isInvalid && <FormGroup.Error id={errorId} errors={errors} />}\n        </div>\n      )}\n    </FormGroup>\n  );\n};\n"],"mappings":";;;;;;;;AAEA,MAAa,EAAE,cAAc,iBAAiB,aAAa,mBACzD,uBAAuB;;;;;;;;AC2EzB,MAAa,aAAa,EACxB,OACA,QACA,UACA,eAAe,YACf,YAAY,OACZ,MACA,SACA,WACA,oBAAoB,iBACpB,eACW;CACX,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,OAAO,eAAe;CAC5B,MAAM,EAAE,QAAQ,cAAc,MAAM,MAAM;CAC1C,MAAM,qBAAqB,SAAS,KAAK,QAAQ,UAAU,MAAM,kBAAkB;;;;;;;;;;;;;CAcnF,MAAM,qBAAqB,OAAO,kBAAkB;CACpD,IAAI,qBAAqB,mBAAmB,SAC1C,mBAAmB,UAAU;;;;;;;;;;;;;;CAe/B,MAAM,aACH,aAAa,qBAAqB,mBAAmB,YAAY,OAAO,SAAS;CAEpF,MAAM,UAAU,GAAG,MAAM,KAAK;CAC9B,MAAM,gBAAgB,GAAG,MAAM,KAAK;CACpC,MAAM,UAAU,GAAG,MAAM,KAAK;CAC9B,MAAM,cAAc,cAAc;CAGlC,MAAM,cACJ;EAAC;EAAiB,CAAC,CAAC,QAAQ;EAAe,aAAa;CAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KACzF,KAAA;CAEF,OACE,qBAAC,WAAD;EAAsB;EAAtB,UAAA;IACI,SAAS,WACT,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CAEG,SAIC,qBAAC,OAAD;MACE,SAAS,cAAc,KAAA,IAAY,MAAM;MACzC,IAAI,cAAc,UAAU,KAAA;MAF9B,UAAA;OAIG;OAGA,iBAAiB,cAAc,YAAY,oBAAC,MAAM,UAAP,CAAiB,CAAA;OAC5D,iBAAiB,cAAc,CAAC,YAAY,oBAAC,MAAM,UAAP,CAAiB,CAAA;MACzD;KAGR,CAAA,GAAA,WACC,oBAAC,SAAD;MAAkB;MAAS,WAAU;MAAM,gBAAA;MACzC,UAAA,oBAAC,UAAD;OACE,MAAK;OACL,cACE,OAAO,UAAU,WACb,0BAA0B,UAC1B;OAEN,WAAU;OAEV,UAAA,oBAAC,MAAD,EAAM,WAAU,YAAa,CAAA;MACvB,CAAA;KACD,CAAA,CAER;IAEJ,CAAA,GAAA,MACE;;GAGN,SAAS;IACR,IAAI,MAAM;IACV,MAAM,MAAM;IACZ,iBAAiB,YAAY,KAAA;IAC7B,gBAAgB,aAAa,KAAA;IAC7B,oBAAoB;IACpB,mBAAmB,eAAe,QAAQ,UAAU,KAAA;GACtD,CAAC;IAEC,QAAQ,cACR,qBAAC,OAAD,EAAA,UAAA,CACG,QAAQ,oBAAC,UAAU,MAAX;IAAgB,IAAI;IAAgB,UAAA;GAAqB,CAAA,GACjE,aAAa,oBAAC,UAAU,OAAX;IAAiB,IAAI;IAAiB;GAAS,CAAA,CAC1D,EAAA,CAAA;EAEE;;AAEf"}