@lablup/ui-common 0.1.0-alpha.9 → 0.2.0-alpha.15

package/dist/components/Form/FormItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormItem.js","names":[],"sources":["../../../src/components/Form/FormItem.tsx"],"sourcesContent":["/**\n * `Form.Item`: the visual shell (`FormItemVisual`) bound to a `Field`.\n *\n * Four behaviours are load-bearing:\n *\n * 1. `required` is not derived from `rules` naively. Function rules\n *    (`({ getFieldValue }) => ({ required: … })`) are evaluated against the\n *    live form to decide whether the marker shows; a `warningOnly` required\n *    rule does not show it.\n * 2. Layout-only items aggregate their children's errors. An item with no\n *    `name` wrapping `noStyle` children collects their metas through\n *    `NoStyleItemContext`; without it their messages disappear.\n * 3. `help={false}` opts out of bubbling, so a nested item that renders its\n *    own help does not report into an ancestor as well.\n * 4. `noStyle` is a pure passthrough: state only, no shell.\n */\nimport Field, { type FieldProps } from \"./Field\";\nimport FormItemVisual from \"./FormItemVisual\";\nimport {\n  FieldContext,\n  FormConfigContext,\n  FormItemInputContext,\n  FormItemLayoutContext,\n  ListContext,\n  NoStyleItemContext,\n  type FormItemCol,\n  type FormItemStatusContextValue,\n  type FormLayout,\n  type RequiredMark,\n} from \"./context\";\nimport type {\n  InternalFormInstance,\n  Meta,\n  Rule,\n  RuleObject,\n  StoreValue,\n} from \"./interface\";\nimport { toArray, type InternalNamePath, type NamePath } from \"./namePath\";\nimport * as React from \"react\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\n\nconst NAME_SPLIT = \"__SPLIT__\";\n\n/** antd's id scheme: `formName_a_b`, with a guard for a reserved DOM name. */\nconst ID_BLACKLIST = [\"parentNode\"];\nfunction getFieldId(namePath: InternalNamePath, formName?: string): string | undefined {\n  if (!namePath.length) return undefined;\n  const mergedId = namePath.join(\"_\");\n  if (formName) return `${formName}_${mergedId}`;\n  return ID_BLACKLIST.includes(mergedId) ? `form_item_${mergedId}` : mergedId;\n}\n\nfunction genEmptyMeta(): Meta {\n  return {\n    errors: [],\n    warnings: [],\n    touched: false,\n    validating: false,\n    name: [],\n    validated: false,\n  };\n}\n\nfunction getStatus(\n  errors: React.ReactNode[],\n  warnings: React.ReactNode[],\n  meta: Meta,\n  hasFeedback?: boolean,\n  validateStatus?: FormItemStatusContextValue[\"status\"],\n): FormItemStatusContextValue[\"status\"] {\n  if (validateStatus !== undefined) return validateStatus;\n  if (meta.validating) return \"validating\";\n  if (errors.length) return \"error\";\n  if (warnings.length) return \"warning\";\n  if (meta.touched || (hasFeedback && meta.validated)) return \"success\";\n  return \"\";\n}\n\nexport interface FormItemProps<Values = any> extends Omit<\n  FieldProps,\n  \"children\" | \"name\" | \"onMetaChange\" | \"isList\"\n> {\n  name?: NamePath;\n  label?: React.ReactNode;\n  /**\n   * A node, or antd's `{ title, icon, placement, ... }` object form. `title`\n   * becomes the tooltip body and `icon` the trigger glyph, rendered behind a\n   * hover/focus target after the label. The other keys describe antd's\n   * overlay and are ignored.\n   */\n  tooltip?: React.ReactNode | FormItemTooltipConfig;\n  extra?: React.ReactNode;\n  /** `false` also suppresses meta bubbling to an ancestor item. */\n  help?: React.ReactNode;\n  /** Overrides the asterisk derived from `rules`. */\n  required?: boolean;\n  /** Render no wrapper; bubble this field's meta to the nearest ancestor item. */\n  noStyle?: boolean;\n  hidden?: boolean;\n  layout?: FormLayout;\n  className?: string;\n  style?: React.CSSProperties;\n  hasFeedback?: boolean;\n  validateStatus?: FormItemStatusContextValue[\"status\"];\n  colon?: boolean;\n  labelAlign?: \"left\" | \"right\";\n  labelCol?: FormItemCol;\n  wrapperCol?: FormItemCol;\n  labelWrap?: boolean;\n  htmlFor?: string;\n  id?: string;\n  fieldKey?: React.Key | React.Key[];\n  children?: React.ReactNode | ((form: InternalFormInstance) => React.ReactNode);\n  __values?: Values;\n}\n\nexport interface FormItemTooltipConfig {\n  title?: React.ReactNode;\n  icon?: React.ReactNode;\n  placement?: string;\n  [key: string]: unknown;\n}\n\nconst isTooltipConfig = (\n  tooltip: FormItemProps[\"tooltip\"],\n): tooltip is FormItemTooltipConfig =>\n  !!tooltip &&\n  typeof tooltip === \"object\" &&\n  !React.isValidElement(tooltip) &&\n  \"title\" in tooltip;\n\n/** The tooltip BODY — antd's `tooltip` node, or the config object's `title`. */\nfunction normalizeTooltip(tooltip: FormItemProps[\"tooltip\"]): React.ReactNode {\n  return isTooltipConfig(tooltip) ? tooltip.title : (tooltip as React.ReactNode);\n}\n\n/** The tooltip TRIGGER glyph — antd's `tooltip.icon`, when supplied. */\nfunction tooltipIcon(tooltip: FormItemProps[\"tooltip\"]): React.ReactNode {\n  return isTooltipConfig(tooltip) ? tooltip.icon : undefined;\n}\n\ntype SubMetaMap = Record<\n  string,\n  {\n    errors?: React.ReactNode[];\n    warnings?: React.ReactNode[];\n    name?: InternalNamePath;\n  }\n>;\n\nconst FormItem = <Values,>(props: FormItemProps<Values>) => {\n  const {\n    name,\n    label,\n    tooltip,\n    extra,\n    help,\n    required,\n    noStyle,\n    hidden,\n    layout: propsLayout,\n    className,\n    style,\n    hasFeedback,\n    validateStatus,\n    children,\n    rules,\n    dependencies,\n    shouldUpdate,\n    messageVariables,\n    trigger = \"onChange\",\n    validateTrigger,\n    colon,\n    labelAlign,\n    labelCol,\n    wrapperCol,\n    labelWrap,\n    htmlFor,\n    fieldKey: _fieldKey,\n    id: _id,\n    __values: _values,\n    ...restFieldProps\n  } = props;\n\n  const fieldContext = React.useContext(FieldContext);\n  const { optionalLabel } = React.useContext(FormConfigContext);\n  const t = useUicTranslator();\n  const {\n    layout: formLayout,\n    requiredMark,\n    name: formName,\n    disabled: formDisabled,\n    size: formSize,\n    colon: formColon,\n    labelAlign: formLabelAlign,\n    labelCol: formLabelCol,\n    wrapperCol: formWrapperCol,\n    labelWrap: formLabelWrap,\n  } = React.useContext(FormItemLayoutContext);\n  const notifyParentMetaChange = React.useContext(NoStyleItemContext);\n  const listContext = React.useContext(ListContext);\n\n  const layout = propsLayout || formLayout;\n  const mergedLabelCol = labelCol ?? formLabelCol;\n  const mergedWrapperColProp = wrapperCol ?? formWrapperCol;\n  /**\n   * antd's `FormItemInput`: a LABEL-LESS item in a form that declares a\n   * `labelCol` gets that span as a wrapper OFFSET, so its control still lines\n   * up with the labelled rows above it.\n   */\n  const mergedWrapperCol =\n    label === null &&\n    !labelCol &&\n    !wrapperCol &&\n    formLabelCol?.span !== undefined &&\n    formLabelCol.span < 24\n      ? { ...mergedWrapperColProp, offset: formLabelCol.span }\n      : mergedWrapperColProp;\n  const mergedValidateTrigger =\n    validateTrigger !== undefined ? validateTrigger : fieldContext.validateTrigger;\n\n  const [meta, setMeta] = React.useState<Meta>(genEmptyMeta);\n  const [subFieldErrors, setSubFieldErrors] = React.useState<SubMetaMap>({});\n  // A removed list row no longer resolves through the key manager, so the\n  // path used to unpublish it has to be the one we published under.\n  const fieldKeyPathRef = React.useRef<InternalNamePath | null>(null);\n\n  const onMetaChange = (nextMeta: Meta & { destroy?: boolean }) => {\n    const keyInfo = listContext?.getKey(nextMeta.name);\n    setMeta(nextMeta.destroy ? genEmptyMeta() : nextMeta);\n\n    if (noStyle && help !== false && notifyParentMetaChange) {\n      let namePath: InternalNamePath = nextMeta.name;\n      if (!nextMeta.destroy) {\n        if (keyInfo !== undefined) {\n          const [fieldKey, restPath] = keyInfo;\n          namePath = [fieldKey as string | number, ...restPath];\n          fieldKeyPathRef.current = namePath;\n        }\n      } else {\n        namePath = fieldKeyPathRef.current || namePath;\n      }\n      notifyParentMetaChange(nextMeta, namePath as React.Key[]);\n    }\n  };\n\n  const onSubItemMetaChange = (\n    subMeta: SubMetaMap[string] & { name: InternalNamePath; destroy?: boolean },\n    uniqueKeys: React.Key[],\n  ) => {\n    setSubFieldErrors((prev) => {\n      const clone = { ...prev };\n      // name: ['user', 1] + key: [4] => 'user__SPLIT__4' — keyed by ROW\n      // IDENTITY, so removing a list row drops the right entry.\n      const mergedNameKey = [...subMeta.name.slice(0, -1), ...uniqueKeys].join(\n        NAME_SPLIT,\n      );\n      if (subMeta.destroy) {\n        delete clone[mergedNameKey];\n      } else {\n        clone[mergedNameKey] = subMeta;\n      }\n      return clone;\n    });\n  };\n\n  const mergedErrors: React.ReactNode[] = [\n    ...meta.errors,\n    ...Object.values(subFieldErrors).flatMap((sub) => sub.errors ?? []),\n  ];\n  const mergedWarnings: React.ReactNode[] = [\n    ...meta.warnings,\n    ...Object.values(subFieldErrors).flatMap((sub) => sub.warnings ?? []),\n  ];\n\n  const renderLayout = (\n    baseChildren: React.ReactNode,\n    fieldId?: string,\n    isRequired?: boolean,\n    fieldHandle?: string,\n  ) => {\n    const status: FormItemStatusContextValue = {\n      status: getStatus(\n        mergedErrors,\n        mergedWarnings,\n        meta,\n        hasFeedback,\n        validateStatus,\n      ),\n      errors: mergedErrors,\n      warnings: mergedWarnings,\n      hasFeedback,\n      isFormItemInput: true,\n    };\n\n    // A `noStyle` item contributes state only. Its errors were already sent\n    // upward through `notifyParentMetaChange`.\n    if (noStyle && !hidden) {\n      return (\n        <FormItemInputContext.Provider value={status}>\n          {baseChildren}\n        </FormItemInputContext.Provider>\n      );\n    }\n\n    // antd keeps `-required` on the label in every case and hides the GLYPH\n    // for `false` / `'optional'` / a function mark, because the label itself\n    // then carries the hint. Mirrored so `.uic-form-item__label--required`\n    // stays a stable anchor while the asterisk obeys the same rule.\n    const requiredMarkType =\n      requiredMark === false\n        ? (\"hidden\" as const)\n        : requiredMark === \"optional\" || typeof requiredMark === \"function\"\n          ? (\"optional\" as const)\n          : undefined;\n    // An explicit `required` wins over the rules-derived value, and it is the\n    // ONLY source on a layout-only item (no `name`, so no rules to derive\n    // from). `BulkEditFormItem` renders exactly that shape — it drops\n    // `name` from the item and drives the marker by hand.\n    const mergedRequired = required !== undefined ? required : !!isRequired;\n    const mergedLabel = applyRequiredMark(\n      label,\n      mergedRequired,\n      requiredMark,\n      optionalLabel ?? t(\"uic.Form.optional\"),\n    );\n\n    return (\n      <FormItemInputContext.Provider value={status}>\n        <FormItemVisual\n          label={mergedLabel}\n          labelTitle={typeof label === \"string\" ? label : undefined}\n          tooltip={normalizeTooltip(tooltip)}\n          tooltipIcon={tooltipIcon(tooltip)}\n          extra={extra}\n          help={help}\n          required={mergedRequired}\n          requiredMarkType={requiredMarkType}\n          layout={layout}\n          size={formSize}\n          colon={colon ?? formColon}\n          labelAlign={labelAlign ?? formLabelAlign}\n          labelCol={mergedLabelCol}\n          wrapperCol={mergedWrapperCol}\n          labelWrap={labelWrap ?? formLabelWrap}\n          status={status.status}\n          hasFeedback={hasFeedback}\n          className={className}\n          style={style}\n          hidden={hidden}\n          fieldId={fieldId}\n          fieldHandle={fieldHandle}\n          htmlFor={htmlFor}\n          errors={mergedErrors}\n          warnings={mergedWarnings}\n        >\n          <NoStyleItemContext.Provider value={onSubItemMetaChange}>\n            {baseChildren}\n          </NoStyleItemContext.Provider>\n        </FormItemVisual>\n      </FormItemInputContext.Provider>\n    );\n  };\n\n  const hasName = name !== undefined && name !== null;\n  const isRenderProps = typeof children === \"function\";\n\n  // Pure layout item: no field is registered, but the shell still renders and\n  // still aggregates the `noStyle` children nested inside it.\n  if (!hasName && !isRenderProps && !dependencies) {\n    return renderLayout(children as React.ReactNode);\n  }\n\n  // `${label}` in a validate message resolves to the item's label when it is\n  // a plain string, else to its name — matching antd's `messageVariables`.\n  let variables: Record<string, string> = {};\n  if (typeof label === \"string\") {\n    variables.label = label;\n  } else if (name) {\n    variables.label = String(name);\n  }\n  if (messageVariables) {\n    variables = { ...variables, ...messageVariables };\n  }\n\n  return (\n    <Field\n      {...restFieldProps}\n      name={name}\n      rules={rules}\n      dependencies={dependencies}\n      shouldUpdate={shouldUpdate}\n      messageVariables={variables}\n      trigger={trigger}\n      validateTrigger={mergedValidateTrigger}\n      onMetaChange={onMetaChange}\n    >\n      {(control, renderMeta, context) => {\n        const mergedName = toArray(name as any).length ? renderMeta.name : [];\n        const fieldId = getFieldId(mergedName, formName);\n        const isRequired =\n          required !== undefined ? required : isRuleRequired(rules, context);\n\n        let childNode: React.ReactNode = null;\n\n        if (isRenderProps && (shouldUpdate || dependencies) && !hasName) {\n          childNode = (children as (form: InternalFormInstance) => React.ReactNode)(\n            context,\n          );\n        } else if (React.isValidElement(children)) {\n          const element = children as React.ReactElement<Record<string, any>>;\n          const childProps: Record<string, any> = {\n            ...element.props,\n            ...control,\n          };\n          if (!childProps.id) {\n            childProps.id = fieldId;\n          }\n          // Astryx controls replace `id` with their own `useId()` but pass\n          // `data-*` through; this is what `FormStore.getFieldDOMNode` finds.\n          if (mergedName.length) {\n            childProps[\"data-uic-field-id\"] = mergedName.join(\"_\");\n          }\n          if (formDisabled && childProps.disabled === undefined) {\n            childProps.disabled = true;\n          }\n\n          const describedbyArr: string[] = [];\n          if (help || mergedErrors.length > 0) {\n            describedbyArr.push(`${fieldId}_help`);\n          }\n          if (extra) {\n            describedbyArr.push(`${fieldId}_extra`);\n          }\n          if (describedbyArr.length) {\n            childProps[\"aria-describedby\"] = describedbyArr.join(\" \");\n          }\n          if (mergedErrors.length > 0) {\n            childProps[\"aria-invalid\"] = \"true\";\n          }\n          if (isRequired) {\n            childProps[\"aria-required\"] = \"true\";\n          }\n\n          // Keep the child's own handlers: `control[trigger]` writes to the\n          // store, then the author's handler runs.\n          const triggers = new Set<string>([\n            ...toArray(trigger),\n            ...toArray(mergedValidateTrigger as string | string[]),\n          ]);\n          triggers.forEach((eventName) => {\n            childProps[eventName] = (...args: any[]) => {\n              control[eventName]?.(...args);\n              (element.props as any)[eventName]?.(...args);\n            };\n          });\n\n          childNode = React.cloneElement(element, childProps);\n        } else {\n          childNode = children as React.ReactNode;\n        }\n\n        return renderLayout(\n          childNode,\n          fieldId,\n          isRequired,\n          mergedName.length ? mergedName.join(\"_\") : undefined,\n        );\n      }}\n    </Field>\n  );\n};\n\n/**\n * Evaluate `rules` — INCLUDING function rules, against the live form — to\n * decide whether the required marker shows. A `warningOnly` required rule\n * does not count: it is advice, not a requirement.\n */\nfunction isRuleRequired(\n  rules: Rule[] | undefined,\n  form: InternalFormInstance,\n): boolean {\n  return !!rules?.some((rule) => {\n    if (typeof rule === \"function\") {\n      const resolved = rule(form) as RuleObject | undefined;\n      return !!resolved?.required && !resolved?.warningOnly;\n    }\n    return !!rule?.required && !rule?.warningOnly;\n  });\n}\n\n/**\n * `requiredMark` decorates the LABEL. A function or `'optional'` mark replaces\n * the asterisk entirely, as in antd: the label itself then carries the hint.\n */\nfunction applyRequiredMark(\n  label: React.ReactNode,\n  required: boolean,\n  requiredMark: RequiredMark | undefined,\n  optionalLabel: React.ReactNode,\n): React.ReactNode {\n  if (label === undefined || label === null) return label;\n  if (typeof requiredMark === \"function\") {\n    return requiredMark(label, { required });\n  }\n  if (requiredMark === \"optional\" && !required) {\n    // antd renders the bare locale string and spaces it with\n    // `margin-inline-start: marginXXS`, so the gap survives text selection and\n    // copy. The engine had baked a literal leading space into the string,\n    // which put \" (optional)\" in `label.textContent` where antd has\n    // \"(optional)\".\n    return (\n      <>\n        {label}\n        <span className=\"uic-form-item__optional\">{optionalLabel}</span>\n      </>\n    );\n  }\n  return label;\n}\n\n/** Errors/warnings of the nearest enclosing `Form.Item`. */\nexport const useFormItemStatus = () => {\n  const { status, errors = [], warnings = [] } = React.useContext(FormItemInputContext);\n  return { status, errors, warnings };\n};\n\nexport { getFieldId };\nexport default FormItem;\nexport type { StoreValue };\n"],"mappings":"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"}

package/dist/components/Form/FormItemVisual.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+export type FormItemLayout = "vertical" | "horizontal" | "inline";
+export type FormItemSize = "small" | "middle" | "large";
+export type FormItemStatus = "success" | "warning" | "error" | "validating" | "";
+/** antd's `Col` props, reduced to `span`, `offset`, `flex`, `className` and `style`. */
+export interface FormItemCol {
+    span?: number;
+    offset?: number;
+    flex?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface FormItemVisualProps {
+    label?: React.ReactNode;
+    /**
+     * `<label title>`. Separate from `label` because it is taken from the
+     * original prop, before `requiredMark` wraps it: a function mark turns the
+     * label into an element and the title would disappear.
+     */
+    labelTitle?: string;
+    /** The tooltip body, rendered behind a help glyph after the label. */
+    tooltip?: React.ReactNode;
+    /** The tooltip trigger glyph. Defaults to a question mark in a circle. */
+    tooltipIcon?: React.ReactNode;
+    extra?: React.ReactNode;
+    help?: React.ReactNode;
+    /** Renders the required marker. Independent of the `required` rule. */
+    required?: boolean;
+    /**
+     * How the marker is drawn: `'optional'` and `'hidden'` hide the asterisk (a
+     * function or `'optional'` `requiredMark` puts the hint in the label).
+     */
+    requiredMarkType?: "optional" | "hidden";
+    layout?: FormItemLayout;
+    size?: FormItemSize;
+    colon?: boolean;
+    labelAlign?: "left" | "right";
+    labelCol?: FormItemCol;
+    wrapperCol?: FormItemCol;
+    labelWrap?: boolean;
+    errors?: React.ReactNode[];
+    warnings?: React.ReactNode[];
+    /** Merged validation status; drives colours, the feedback icon and controls. */
+    status?: FormItemStatus;
+    hasFeedback?: boolean;
+    fieldId?: string;
+    /** Same handle as the control's `data-uic-field-id`, for a child that forwards nothing to the DOM. */
+    fieldHandle?: string;
+    htmlFor?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    hidden?: boolean;
+    children?: React.ReactNode;
+}
+export declare const FormItemVisual: React.FC<FormItemVisualProps>;
+export default FormItemVisual;

package/dist/components/Form/FormItemVisual2.js

@@ -0,0 +1,117 @@
+/* empty css               */
+import e from "./feedbackIcons.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Tooltip as i } from "@astryxdesign/core/Tooltip";
+import { CircleHelp as a } from "lucide-react";
+//#region src/components/Form/FormItemVisual.tsx
+var o = (...e) => e.filter(Boolean).join(" "), s = 24, c = (e, t) => {
+	if (!e) return;
+	let n = { ...e.style };
+	if (e.span !== void 0) {
+		let r = `${e.span / s * 100}%`;
+		n.maxWidth = r, t === "label" && (n.flex = `0 0 ${r}`);
+	}
+	return e.flex !== void 0 && (n.flex = typeof e.flex == "number" ? `${e.flex} ${e.flex} auto` : e.flex), e.offset !== void 0 && (n.marginInlineStart = `${e.offset / s * 100}%`), n;
+}, l = ({ label: s, labelTitle: l, tooltip: u, tooltipIcon: d, extra: f, help: p, required: m, requiredMarkType: h, layout: g = "vertical", size: _, colon: v, labelAlign: y, labelCol: b, wrapperCol: x, labelWrap: S, errors: C = [], warnings: w = [], status: T, hasFeedback: E, fieldId: D, fieldHandle: O, htmlFor: k, className: A, style: j, hidden: M, children: N }) => {
+	let P = p != null && p !== !1, F = P || C.length > 0 || w.length > 0, I = t.useRef(null), L = t.useRef(null), [R, z] = t.useState(null), [B, V] = t.useState(0);
+	t.useLayoutEffect(() => {
+		F && I.current ? z(Number.parseInt(getComputedStyle(I.current).marginBottom, 10) || 0) : z(null);
+	}, [F]), t.useLayoutEffect(() => {
+		V(f && L.current ? L.current.clientHeight : 0);
+	}, [f]);
+	let H = s == null ? null : /* @__PURE__ */ n("div", {
+		className: o("uic-form-item__label-col", b?.className),
+		"data-align": y === "left" ? "left" : void 0,
+		"data-wrap": S ? "" : void 0,
+		style: c(b, "label"),
+		children: /* @__PURE__ */ r("label", {
+			htmlFor: k ?? D,
+			className: o("uic-form-item__label", m && "uic-form-item__label--required"),
+			"data-required-mark": h,
+			"data-no-colon": v === !1 ? "" : void 0,
+			title: l ?? (typeof s == "string" ? s : void 0),
+			children: [s, u ? /* @__PURE__ */ n(i, {
+				content: u,
+				children: /* @__PURE__ */ n("span", {
+					className: "uic-form-item__tooltip",
+					role: "button",
+					tabIndex: 0,
+					"aria-label": typeof s == "string" ? `${s} — info` : "info",
+					onClick: (e) => e.preventDefault(),
+					children: d ?? /* @__PURE__ */ n(a, { size: "1em" })
+				})
+			}) : null]
+		})
+	}), U = P ? [{
+		key: "help",
+		node: p,
+		kind: T === "error" ? "error" : T === "warning" ? "warning" : null
+	}] : [...C.map((e, t) => ({
+		key: `e-${t}`,
+		node: e,
+		kind: "error"
+	})), ...w.map((e, t) => ({
+		key: `w-${t}`,
+		node: e,
+		kind: "warning"
+	}))], W = U.length ? /* @__PURE__ */ n("div", {
+		id: D ? `${D}_help` : void 0,
+		className: "uic-form-item__explain",
+		children: U.map((e) => /* @__PURE__ */ n("div", {
+			className: e.kind ? `uic-form-item__explain-${e.kind}` : void 0,
+			children: e.node
+		}, e.key))
+	}) : null, G = f ? /* @__PURE__ */ n("div", {
+		ref: L,
+		id: D ? `${D}_extra` : void 0,
+		className: "uic-form-item__extra",
+		children: f
+	}) : null, K = E && T ? /* @__PURE__ */ n("span", {
+		className: "uic-form-item__feedback-icon",
+		"data-status": T,
+		children: e(T)
+	}) : null, q = /* @__PURE__ */ r("div", {
+		className: o("uic-form-item__control", x?.className),
+		"data-span": x?.span === void 0 ? void 0 : "",
+		style: c(x, "control"),
+		children: [/* @__PURE__ */ r("div", {
+			className: "uic-form-item__control-input",
+			children: [/* @__PURE__ */ n("div", {
+				className: "uic-form-item__control-input-content",
+				children: N
+			}), K]
+		}), W || G ? /* @__PURE__ */ r("div", {
+			className: "uic-form-item__additional",
+			style: R ? { minHeight: R + B } : void 0,
+			children: [W, G]
+		}) : null]
+	});
+	return /* @__PURE__ */ r("div", {
+		ref: I,
+		className: o("uic-form-item", A),
+		"data-uic-field-item": O,
+		"data-layout": g,
+		"data-size": _,
+		"data-status": T || void 0,
+		"data-feedback": K ? "" : void 0,
+		"data-hidden": M ? "" : void 0,
+		style: M ? {
+			display: "none",
+			...j
+		} : j,
+		children: [/* @__PURE__ */ r("div", {
+			className: "uic-form-item__row",
+			children: [H, q]
+		}), R ? /* @__PURE__ */ n("div", {
+			"aria-hidden": !0,
+			className: "uic-form-item__margin-offset",
+			style: { marginBottom: -R }
+		}) : null]
+	});
+};
+//#endregion
+export { l as FormItemVisual, l as default };
+
+//# sourceMappingURL=FormItemVisual2.js.map
+import "../../assets/components/Form/FormItemVisual.css";

package/dist/components/Form/FormItemVisual2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormItemVisual2.js","names":[],"sources":["../../../src/components/Form/FormItemVisual.tsx"],"sourcesContent":["/**\n * The presentational shell of a form item: label, control, explain and extra,\n * laid out the way antd lays out `Form.Item` (`layout`, `labelCol` /\n * `wrapperCol` spans, `colon`, `labelAlign`, `labelWrap`, `size`,\n * `hasFeedback`, `validateStatus`), so a form moved onto the engine keeps its\n * geometry. Styles are in `FormItemVisual.css`.\n *\n *   .uic-form-item\n *     .uic-form-item__row\n *       .uic-form-item__label-col\n *         label.uic-form-item__label        (+ .uic-form-item__tooltip)\n *       .uic-form-item__control\n *         .uic-form-item__control-input\n *           .uic-form-item__control-input-content\n *           .uic-form-item__feedback-icon\n *         .uic-form-item__additional\n *           .uic-form-item__explain         (.uic-form-item__explain-error / -warning rows)\n *           .uic-form-item__extra\n *     .uic-form-item__margin-offset\n */\nimport { CircleHelp } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Tooltip } from \"@astryxdesign/core/Tooltip\";\n\nimport getFeedbackIcon from \"./feedbackIcons\";\nimport \"./FormItemVisual.css\";\n\nexport type FormItemLayout = \"vertical\" | \"horizontal\" | \"inline\";\nexport type FormItemSize = \"small\" | \"middle\" | \"large\";\nexport type FormItemStatus = \"success\" | \"warning\" | \"error\" | \"validating\" | \"\";\n\n/** antd's `Col` props, reduced to `span`, `offset`, `flex`, `className` and `style`. */\nexport interface FormItemCol {\n  span?: number;\n  offset?: number;\n  flex?: string | number;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport interface FormItemVisualProps {\n  label?: React.ReactNode;\n  /**\n   * `<label title>`. Separate from `label` because it is taken from the\n   * original prop, before `requiredMark` wraps it: a function mark turns the\n   * label into an element and the title would disappear.\n   */\n  labelTitle?: string;\n  /** The tooltip body, rendered behind a help glyph after the label. */\n  tooltip?: React.ReactNode;\n  /** The tooltip trigger glyph. Defaults to a question mark in a circle. */\n  tooltipIcon?: React.ReactNode;\n  extra?: React.ReactNode;\n  help?: React.ReactNode;\n  /** Renders the required marker. Independent of the `required` rule. */\n  required?: boolean;\n  /**\n   * How the marker is drawn: `'optional'` and `'hidden'` hide the asterisk (a\n   * function or `'optional'` `requiredMark` puts the hint in the label).\n   */\n  requiredMarkType?: \"optional\" | \"hidden\";\n  layout?: FormItemLayout;\n  size?: FormItemSize;\n  colon?: boolean;\n  labelAlign?: \"left\" | \"right\";\n  labelCol?: FormItemCol;\n  wrapperCol?: FormItemCol;\n  labelWrap?: boolean;\n  errors?: React.ReactNode[];\n  warnings?: React.ReactNode[];\n  /** Merged validation status; drives colours, the feedback icon and controls. */\n  status?: FormItemStatus;\n  hasFeedback?: boolean;\n  fieldId?: string;\n  /** Same handle as the control's `data-uic-field-id`, for a child that forwards nothing to the DOM. */\n  fieldHandle?: string;\n  htmlFor?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  hidden?: boolean;\n  children?: React.ReactNode;\n}\n\nconst cx = (...names: (string | false | undefined)[]) =>\n  names.filter(Boolean).join(\" \");\n\n/**\n * antd grid: `span` / `offset` are 24ths. On the label a span is a fixed\n * basis; on the control it is only a max-width, because antd's horizontal\n * control rule (`flex: 1 1 0`) outranks the column's basis.\n */\nconst GRID_MAX = 24;\nconst colStyle = (\n  col: FormItemCol | undefined,\n  role: \"label\" | \"control\",\n): React.CSSProperties | undefined => {\n  if (!col) return undefined;\n  const style: React.CSSProperties = { ...col.style };\n  if (col.span !== undefined) {\n    const pct = `${(col.span / GRID_MAX) * 100}%`;\n    style.maxWidth = pct;\n    if (role === \"label\") style.flex = `0 0 ${pct}`;\n  }\n  if (col.flex !== undefined) {\n    style.flex =\n      typeof col.flex === \"number\" ? `${col.flex} ${col.flex} auto` : col.flex;\n  }\n  if (col.offset !== undefined) {\n    style.marginInlineStart = `${(col.offset / GRID_MAX) * 100}%`;\n  }\n  return style;\n};\n\nexport const FormItemVisual: React.FC<FormItemVisualProps> = ({\n  label,\n  labelTitle,\n  tooltip,\n  tooltipIcon,\n  extra,\n  help,\n  required,\n  requiredMarkType,\n  layout = \"vertical\",\n  size,\n  colon,\n  labelAlign,\n  labelCol,\n  wrapperCol,\n  labelWrap,\n  errors = [],\n  warnings = [],\n  status,\n  hasFeedback,\n  fieldId,\n  fieldHandle,\n  htmlFor,\n  className,\n  style,\n  hidden,\n  children,\n}) => {\n  const hasHelp = help !== undefined && help !== null && help !== false;\n  // antd's trigger for the reserved-space / margin-offset pair.\n  const hasExplain = hasHelp || errors.length > 0 || warnings.length > 0;\n\n  /**\n   * antd reserves the item's own computed `margin-bottom` inside the\n   * additional block while an explain block shows, and cancels it with a\n   * negative-margin spacer, so one line of error causes no layout jump. The\n   * computed value is read, so a `style.marginBottom` override still nets out.\n   */\n  const itemRef = React.useRef<HTMLDivElement>(null);\n  const extraRef = React.useRef<HTMLDivElement>(null);\n  const [marginBottom, setMarginBottom] = React.useState<number | null>(null);\n  const [extraHeight, setExtraHeight] = React.useState(0);\n\n  React.useLayoutEffect(() => {\n    if (hasExplain && itemRef.current) {\n      setMarginBottom(\n        Number.parseInt(getComputedStyle(itemRef.current).marginBottom, 10) || 0,\n      );\n    } else {\n      setMarginBottom(null);\n    }\n  }, [hasExplain]);\n\n  React.useLayoutEffect(() => {\n    setExtraHeight(extra && extraRef.current ? extraRef.current.clientHeight : 0);\n  }, [extra]);\n\n  const labelNode =\n    label === undefined || label === null ? null : (\n      <div\n        className={cx(\"uic-form-item__label-col\", labelCol?.className)}\n        data-align={labelAlign === \"left\" ? \"left\" : undefined}\n        data-wrap={labelWrap ? \"\" : undefined}\n        style={colStyle(labelCol, \"label\")}\n      >\n        <label\n          htmlFor={htmlFor ?? fieldId}\n          className={cx(\n            \"uic-form-item__label\",\n            required && \"uic-form-item__label--required\",\n          )}\n          data-required-mark={requiredMarkType}\n          // The colon is drawn in every layout and hidden in vertical, as in\n          // antd, so a vertical label measures the same.\n          data-no-colon={colon === false ? \"\" : undefined}\n          title={labelTitle ?? (typeof label === \"string\" ? label : undefined)}\n        >\n          {label}\n          {tooltip ? (\n            <Tooltip content={tooltip}>\n              <span\n                className=\"uic-form-item__tooltip\"\n                role=\"button\"\n                tabIndex={0}\n                aria-label={typeof label === \"string\" ? `${label} — info` : \"info\"}\n                // The label is a `<label htmlFor>`: a click inside it would\n                // move focus to the control the moment the hint is tapped.\n                onClick={(e) => e.preventDefault()}\n              >\n                {tooltipIcon ?? <CircleHelp size=\"1em\" />}\n              </span>\n            </Tooltip>\n          ) : null}\n        </label>\n      </div>\n    );\n\n  // antd's `ErrorList`: `help` replaces the error/warning list and takes the\n  // item's status, so `validateStatus=\"error\" help=\"…\"` paints the help red.\n  const helpKind =\n    status === \"error\" ? \"error\" : status === \"warning\" ? \"warning\" : null;\n  const explainRows: Array<{\n    key: string;\n    node: React.ReactNode;\n    kind: \"error\" | \"warning\" | null;\n  }> = hasHelp\n    ? [{ key: \"help\", node: help, kind: helpKind }]\n    : [\n        ...errors.map((e, i) => ({ key: `e-${i}`, node: e, kind: \"error\" as const })),\n        ...warnings.map((w, i) => ({\n          key: `w-${i}`,\n          node: w,\n          kind: \"warning\" as const,\n        })),\n      ];\n\n  const explainNode = explainRows.length ? (\n    <div\n      id={fieldId ? `${fieldId}_help` : undefined}\n      className=\"uic-form-item__explain\"\n    >\n      {explainRows.map((row) => (\n        <div\n          key={row.key}\n          className={row.kind ? `uic-form-item__explain-${row.kind}` : undefined}\n        >\n          {row.node}\n        </div>\n      ))}\n    </div>\n  ) : null;\n\n  const extraNode = extra ? (\n    <div\n      ref={extraRef}\n      id={fieldId ? `${fieldId}_extra` : undefined}\n      className=\"uic-form-item__extra\"\n    >\n      {extra}\n    </div>\n  ) : null;\n\n  const feedbackNode =\n    hasFeedback && status ? (\n      <span className=\"uic-form-item__feedback-icon\" data-status={status}>\n        {getFeedbackIcon(status)}\n      </span>\n    ) : null;\n\n  const control = (\n    <div\n      className={cx(\"uic-form-item__control\", wrapperCol?.className)}\n      data-span={wrapperCol?.span !== undefined ? \"\" : undefined}\n      style={colStyle(wrapperCol, \"control\")}\n    >\n      <div className=\"uic-form-item__control-input\">\n        <div className=\"uic-form-item__control-input-content\">{children}</div>\n        {feedbackNode}\n      </div>\n      {explainNode || extraNode ? (\n        <div\n          className=\"uic-form-item__additional\"\n          style={marginBottom ? { minHeight: marginBottom + extraHeight } : undefined}\n        >\n          {explainNode}\n          {extraNode}\n        </div>\n      ) : null}\n    </div>\n  );\n\n  return (\n    <div\n      ref={itemRef}\n      className={cx(\"uic-form-item\", className)}\n      data-uic-field-item={fieldHandle}\n      data-layout={layout}\n      data-size={size}\n      data-status={status || undefined}\n      data-feedback={feedbackNode ? \"\" : undefined}\n      data-hidden={hidden ? \"\" : undefined}\n      // `display: none` inline too: hiding a field is a correctness property\n      // and must hold even without the stylesheet.\n      style={hidden ? { display: \"none\", ...style } : style}\n    >\n      <div className=\"uic-form-item__row\">\n        {labelNode}\n        {control}\n      </div>\n      {marginBottom ? (\n        <div\n          aria-hidden\n          className=\"uic-form-item__margin-offset\"\n          style={{ marginBottom: -marginBottom }}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default FormItemVisual;\n"],"mappings":"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"}

package/dist/components/Form/FormStore.d.ts

@@ -0,0 +1,109 @@
+import { FieldData, FieldError, InternalHooks, InternalFormInstance, Meta, StoreValue, ScrollOptions } from './interface';
+import { NamePath, Store } from './namePath';
+/**
+ * Wait for the next paint before validating dependency children, so a rule
+ * built from `useWatch` sees the value the dependency just produced instead
+ * of the previous render's.
+ */
+export declare function delayFrame(): Promise<void>;
+export declare class FormStore {
+    private forceRootUpdate;
+    private subscribable;
+    private store;
+    private fieldEntities;
+    private initialValues;
+    private callbacks;
+    private validateMessages;
+    private preserve?;
+    private lastValidatePromise;
+    private watcherCenter;
+    /** Paths of `preserve: false` fields alive at the previous unmount. */
+    private prevWithoutPreserves;
+    constructor(forceRootUpdate: () => void);
+    getForm: () => InternalFormInstance;
+    getInternalHooks: (key: string) => InternalHooks | null;
+    private useSubscribe;
+    private setCallbacks;
+    private setValidateMessages;
+    private setPreserve;
+    /**
+     * `init` is true only on the very first render, so later `initialValues`
+     * prop changes update what `resetFields()` will restore WITHOUT stomping
+     * the values the user already typed.
+     */
+    private setInitialValues;
+    private destroyForm;
+    private getInitialValue;
+    private registerWatch;
+    private notifyWatch;
+    private updateStore;
+    private getFieldEntities;
+    private getFieldsMap;
+    private getFieldEntitiesForNamePathList;
+    /**
+     * `getFieldsValue()`         — only REGISTERED fields.
+     * `getFieldsValue(true)`     — the raw store, including values with no
+     *                              mounted field.
+     * `getFieldsValue(['a','b'])`— those paths and everything beneath them.
+     */
+    getFieldsValue: (nameList?: NamePath[] | true | {
+        strict?: boolean;
+        filter?: (meta: Meta) => boolean;
+    }, filterFunc?: (meta: Meta) => boolean) => Store;
+    getFieldValue: (name: NamePath) => StoreValue;
+    getFieldsError: (nameList?: NamePath[]) => FieldError[];
+    getFieldError: (name: NamePath) => string[];
+    getFieldWarning: (name: NamePath) => string[];
+    isFieldsTouched: (...args: any[]) => boolean;
+    isFieldTouched: (name: NamePath) => boolean;
+    isFieldsValidating: (nameList?: NamePath[]) => boolean;
+    isFieldValidating: (name: NamePath) => boolean;
+    /**
+     * Apply per-field `initialValue` props. Form-level `initialValues` wins;
+     * two fields declaring `initialValue` for the same path is ambiguous and
+     * neither is applied.
+     */
+    private resetWithFieldInitialValue;
+    resetFields: (nameList?: NamePath[]) => void;
+    setFields: (fields: FieldData[]) => void;
+    private getFields;
+    private initEntityValue;
+    private isMergedPreserve;
+    private registerField;
+    private dispatch;
+    private notifyObservers;
+    /**
+     * Re-validate and re-render the fields that declare `namePath` in their
+     * `dependencies`, transitively. Only DIRTY dependents are re-validated —
+     * that is why a pristine field does not flash an error the moment an
+     * unrelated field changes.
+     */
+    private triggerDependenciesUpdate;
+    private updateValue;
+    setFieldsValue: (store: Store) => void;
+    setFieldValue: (name: NamePath, value: StoreValue) => void;
+    private getDependencyChildrenFields;
+    private triggerOnFieldsChange;
+    validateFields: (arg1?: any, arg2?: any) => Promise<Store>;
+    submit: () => void;
+    getFieldInstance: (name: NamePath) => HTMLElement | undefined;
+    scrollToField: (name: NamePath, options?: ScrollOptions) => void;
+    focusField: (name: NamePath) => void;
+    /**
+     * The control carrying `data-uic-field-id` (Astryx inputs drop the `id`
+     * `FormItem` gives them but keep `data-*`), else the item wrapper carrying
+     * `data-uic-field-item` (a child that forwards nothing to the DOM).
+     */
+    private getFieldDOMNode;
+}
+/**
+ * Create (or adopt) a form instance.
+ *
+ * The instance lives in `useState`'s lazy initialiser rather than a ref: both
+ * give "construct exactly once", but a ref would have to be read AND written
+ * during render, which React's rules-of-refs lint rightly rejects. The
+ * `forceUpdate` handed to the store is the escape hatch for the one case
+ * field subscriptions cannot express — a `<Form>` whose children read values
+ * without registering a field.
+ */
+export default function useForm<Values = any>(form?: InternalFormInstance): [InternalFormInstance];