@godxjp/ui 19.6.0 → 20.1.0

package/dist/form/form-root.js

@@ -1,46 +1,165 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { FormProvider } from "react-hook-form";
+import { Alert, AlertDescription } from "../components/feedback/alert.js";
+import { ResponsiveGrid } from "../components/layout/responsive-grid.js";
+import { useTranslation } from "../i18n/use-translation.js";
 import { cn } from "../lib/utils.js";
-import { FormAdapterContext } from "./form-context.js";
+import { Form } from "../components/data-entry/form.js";
+import { FormAdapterContext, FormOptionsContext } from "./form-context.js";
+function collectErrorNames(errors, prefix = "", out = []) {
+  if (!errors || typeof errors !== "object") return out;
+  for (const [key, value] of Object.entries(errors)) {
+    if (!value || typeof value !== "object") continue;
+    const path = prefix ? `${prefix}.${key}` : key;
+    if ("message" in value || "type" in value) out.push(path);
+    else collectErrorNames(value, path, out);
+  }
+  return out;
+}
+function scrollFirstErrorIntoView(formEl, errors) {
+  if (!formEl) return;
+  const names = new Set(collectErrorNames(errors));
+  if (names.size === 0) return;
+  const control = Array.from(formEl.querySelectorAll("[data-field]")).find(
+    (el) => names.has(el.dataset.field ?? "")
+  );
+  if (!control) return;
+  const focusTarget = control.matches("input, select, textarea, button, [tabindex]") ? control : control.querySelector("input, select, textarea, button, [tabindex]");
+  focusTarget?.focus({ preventScroll: true });
+  const target = control.closest('[data-slot="form-field"]') ?? control;
+  if (typeof target.scrollIntoView !== "function") return;
+  const reduceMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  target.scrollIntoView({ block: "center", behavior: reduceMotion ? "auto" : "smooth" });
+}
+function afterPaint(run) {
+  if (typeof requestAnimationFrame === "function") requestAnimationFrame(() => run());
+  else setTimeout(run, 0);
+}
 function FormRoot({
   form,
   adapter,
   onSubmit,
+  onSubmitFailed,
+  onSubmitError,
+  onReset,
+  scrollToFirstError = true,
+  disabled = false,
+  layout,
+  labelWidth,
+  controlWidth,
+  labelAlign,
+  collapseBelow,
+  density,
+  columns,
+  requiredMark,
+  errors,
   children,
   className,
   id
 }) {
+  const formRef = React.useRef(null);
+  const { t } = useTranslation();
+  const pending = React.useRef(false);
+  const [submitting, setSubmitting] = React.useState(false);
+  const [submitFailed, setSubmitFailed] = React.useState(false);
+  const options = React.useMemo(() => ({ disabled, submitting }), [disabled, submitting]);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    submitFailed && /* @__PURE__ */ jsx(Alert, { tone: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: t("dataEntry.form.submitFailed") }) }),
+    columns ? /* @__PURE__ */ jsx(ResponsiveGrid, { columns, children }) : children
+  ] });
+  const submit = async (work) => {
+    if (disabled || pending.current || adapter?.isSubmitting) return;
+    pending.current = true;
+    setSubmitting(true);
+    setSubmitFailed(false);
+    try {
+      await work();
+    } catch (error) {
+      setSubmitFailed(true);
+      onSubmitError?.(error);
+    } finally {
+      pending.current = false;
+      setSubmitting(false);
+    }
+  };
+  const layoutShell = layout !== void 0 || labelWidth !== void 0 || controlWidth !== void 0 || labelAlign !== void 0 || collapseBelow !== void 0 || density !== void 0 || requiredMark !== void 0 || errors !== void 0;
+  const formClassName = layoutShell ? className : cn("ui-stack-md", className);
+  const withLayout = (node) => layoutShell ? /* @__PURE__ */ jsx(
+    Form,
+    {
+      asChild: true,
+      layout,
+      labelWidth,
+      controlWidth,
+      labelAlign,
+      collapseBelow,
+      density,
+      requiredMark,
+      disabled,
+      errors,
+      children: node
+    }
+  ) : node;
   if (adapter) {
-    return /* @__PURE__ */ jsx(FormAdapterContext.Provider, { value: adapter, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(FormAdapterContext.Provider, { value: adapter, children: /* @__PURE__ */ jsx(FormOptionsContext.Provider, { value: options, children: withLayout(
+      /* @__PURE__ */ jsx(
+        "form",
+        {
+          ref: formRef,
+          id,
+          className: formClassName,
+          onSubmit: (event) => {
+            event.preventDefault();
+            void submit(() => onSubmit(adapter.getValues?.() ?? {}));
+          },
+          onReset: (event) => {
+            event.preventDefault();
+            if (pending.current) return;
+            setSubmitFailed(false);
+            adapter.reset?.();
+            onReset?.();
+          },
+          noValidate: true,
+          children: content
+        }
+      )
+    ) }) });
+  }
+  if (!form) {
+    throw new Error("FormRoot requires either a `form` (react-hook-form) or an `adapter` prop.");
+  }
+  const handleInvalid = (fieldErrors) => {
+    onSubmitFailed?.(fieldErrors);
+    if (scrollToFirstError)
+      afterPaint(() => scrollFirstErrorIntoView(formRef.current, fieldErrors));
+  };
+  return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx(FormOptionsContext.Provider, { value: options, children: withLayout(
+    /* @__PURE__ */ jsx(
       "form",
       {
+        ref: formRef,
         id,
-        className: cn("ui-stack-md", className),
+        className: formClassName,
         onSubmit: (event) => {
           event.preventDefault();
-          void onSubmit(adapter.getValues?.() ?? {});
+          void submit(
+            () => form.handleSubmit((values) => onSubmit(values), handleInvalid)(event)
+          );
+        },
+        onReset: (event) => {
+          event.preventDefault();
+          if (pending.current) return;
+          setSubmitFailed(false);
+          form.reset();
+          onReset?.();
         },
         noValidate: true,
-        children
+        children: content
       }
-    ) });
-  }
-  if (!form) {
-    throw new Error("FormRoot requires either a `form` (react-hook-form) or an `adapter` prop.");
-  }
-  return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx(
-    "form",
-    {
-      id,
-      className: cn("ui-stack-md", className),
-      onSubmit: (event) => {
-        void form.handleSubmit((values) => onSubmit(values))(event);
-      },
-      noValidate: true,
-      children
-    }
-  ) });
+    )
+  ) }) });
 }
 export {
   FormRoot

package/dist/form/index.d.ts

@@ -4,5 +4,7 @@ export { FormRoot } from "./form-root.js";
 export type { FormRootProp } from "./form-root.js";
 export { FormFieldControl } from "./form-field-control.js";
 export type { FormFieldControlProp } from "./form-field-control.js";
-export { useFormSubmitting, useFormAdapter } from "./form-context.js";
+export { FormFieldArray } from "./form-field-array.js";
+export type { FormFieldArrayProp } from "./form-field-array.js";
+export { useFormSubmitting, useFormAdapter, useFormDisabled, useFormInstance, useFormWatch, } from "./form-context.js";
 export type { ZodSchemaProp, FieldErrorMessageProp, FormStateAdapter, } from "../props/components/form.prop.js";

package/dist/form/index.js

@@ -1,11 +1,22 @@
 import { useZodForm } from "./use-zod-form.js";
 import { FormRoot } from "./form-root.js";
 import { FormFieldControl } from "./form-field-control.js";
-import { useFormSubmitting, useFormAdapter } from "./form-context.js";
+import { FormFieldArray } from "./form-field-array.js";
+import {
+  useFormSubmitting,
+  useFormAdapter,
+  useFormDisabled,
+  useFormInstance,
+  useFormWatch
+} from "./form-context.js";
 export {
+  FormFieldArray,
   FormFieldControl,
   FormRoot,
   useFormAdapter,
+  useFormDisabled,
+  useFormInstance,
   useFormSubmitting,
+  useFormWatch,
   useZodForm
 };

package/dist/i18n/messages/en.json

@@ -23,7 +23,8 @@
     },
     "datePicker": {
       "placeholder": "Select date",
-      "openCalendar": "Open calendar"
+      "openCalendar": "Open calendar",
+      "quarter": "Q{quarter}"
     },
     "dateRangePicker": {
       "placeholder": "Select date range",
@@ -39,7 +40,10 @@
       "openPicker": "Open time picker",
       "meridiem": "AM/PM",
       "am": "AM",
-      "pm": "PM"
+      "pm": "PM",
+      "now": "Now",
+      "confirm": "OK",
+      "second": "Second"
     },
     "searchInput": {
       "placeholder": "Search…"
@@ -55,7 +59,7 @@
     "upload": {
       "dropzoneLabel": "Upload files",
       "dropzoneHint": "Drag and drop files here, or click to browse",
-      "dropzoneMeta": "Uploads go to temp storage — promote on form save",
+      "dropzoneMeta": "Selected files appear here.",
       "buttonLabel": "Choose file",
       "addImage": "Add image",
       "uploading": "Uploading…",
@@ -75,7 +79,17 @@
       "statusFailed": "{count} upload(s) failed",
       "removeImage": "Remove image",
       "removeFile": "Remove {name}",
-      "cropDescription": "Drag the zoom slider, then save to crop your photo to a square."
+      "cropDescription": "Drag the zoom slider, then save to crop your photo to a square.",
+      "preview": "Preview",
+      "download": "Download",
+      "retry": "Retry",
+      "start": "Upload",
+      "cancel": "Cancel",
+      "rejectAccept": "{name}: file type is not allowed.",
+      "rejectSize": "{name}: file is too large.",
+      "rejectCount": "{name}: file limit reached.",
+      "rejectBeforeUpload": "{name}: file validation failed.",
+      "readFailed": "Could not read the selected folder."
     },
     "cascader": {
       "placeholder": "Select…",
@@ -109,6 +123,9 @@
       "empty": "No results",
       "error": "Couldn’t load options"
     },
+    "selection": {
+      "overflow": "+{count}"
+    },
     "monthPicker": {
       "openGrid": "Open month grid",
       "previousYear": "Previous year",
@@ -135,6 +152,14 @@
     },
     "formErrors": {
       "title": "Please review the following errors"
+    },
+    "form": {
+      "optional": "(optional)",
+      "success": "Valid",
+      "warning": "Please review",
+      "error": "Invalid",
+      "validating": "Validating",
+      "submitFailed": "Could not submit the form. Please try again."
     }
   },
   "feedback": {
@@ -157,6 +182,7 @@
     },
     "appShell": {
       "sidebarLabel": "Sidebar",
+      "navRailLabel": "Workspaces",
       "headerLabel": "Header",
       "mainLabel": "Main content",
       "footerLabel": "Footer",
@@ -252,6 +278,10 @@
       "denied": "You do not have permission to view this matrix",
       "deniedDescription": "Ask an administrator to grant you access.",
       "loading": "Loading permissions…"
+    },
+    "progress": {
+      "ariaLabel": "Progress",
+      "breakdownSeparator": ", "
     }
   },
   "ui": {
@@ -285,8 +315,13 @@
     }
   },
   "navigation": {
+    "tabs": {
+      "addTab": "Add tab",
+      "removeTab": "Close tab"
+    },
     "steps": {
       "ariaLabel": "Progress",
+      "percentLabel": "Current step progress",
       "status": {
         "wait": "Waiting",
         "process": "Current step",
@@ -327,6 +362,7 @@
       "page": "Page {page}",
       "pageSize": "Page size",
       "pageSizeTrigger": "{size} / page",
+      "jumpTo": "Go to page",
       "pageSizeOption": "{size} / page",
       "total": {
         "one": "Total {total} item",
@@ -359,6 +395,9 @@
       "logistics": "Logistics Teal",
       "partner": "Partner Orange",
       "slate": "HQ Slate"
+    },
+    "settingToggle": {
+      "label": "{setting}: {value}"
     }
   },
   "locale": {
@@ -402,7 +441,19 @@
     "error": "Couldn't load this list",
     "errorDescription": "The data could not be retrieved. Try again in a moment.",
     "denied": "You don't have access to this list",
-    "deniedDescription": "Ask an administrator to grant you permission to view these records."
+    "deniedDescription": "Ask an administrator to grant you permission to view these records.",
+    "selectInvert": "Invert selection",
+    "selectNone": "Clear selection",
+    "selectionMenu": "Selection options",
+    "filterColumn": "Filter",
+    "filterReset": "Reset filter",
+    "expandColumn": "Expand",
+    "expandRow": "Expand row",
+    "collapseRow": "Collapse row",
+    "sortAscending": "Sort ascending",
+    "sortDescending": "Sort descending",
+    "sortCancel": "Cancel sort",
+    "selectColumn": "Select"
   },
   "dataGrid": {
     "search": "Search",
@@ -470,5 +521,13 @@
     "summaryPie": "Pie chart with {slices} slices",
     "summaryTrend": "Bar trend with {points} data points",
     "trendCurrent": "current"
+  },
+  "rangeTimeline": {
+    "outsideRange": "Outside the visible range",
+    "schedule": "Schedule"
+  },
+  "textExamples": {
+    "preservedText": "Plain text",
+    "sampleText": "First line\n  Indented line\n\nLast line"
   }
 }

package/dist/i18n/messages/ja.json

@@ -23,7 +23,8 @@
     },
     "datePicker": {
       "placeholder": "日付を選択",
-      "openCalendar": "カレンダーを開く"
+      "openCalendar": "カレンダーを開く",
+      "quarter": "第{quarter}四半期"
     },
     "dateRangePicker": {
       "placeholder": "期間を選択",
@@ -39,7 +40,10 @@
       "openPicker": "時刻を選択",
       "meridiem": "午前/午後",
       "am": "午前",
-      "pm": "午後"
+      "pm": "午後",
+      "now": "現在時刻",
+      "confirm": "確定",
+      "second": "秒"
     },
     "searchInput": {
       "placeholder": "検索…"
@@ -55,7 +59,7 @@
     "upload": {
       "dropzoneLabel": "ファイルをアップロード",
       "dropzoneHint": "ここにドラッグ＆ドロップ、またはクリックして選択",
-      "dropzoneMeta": "一時ストレージに保存 — フォーム保存時に promote",
+      "dropzoneMeta": "選択したファイルはここに表示されます。",
       "buttonLabel": "ファイルを選択",
       "addImage": "画像を追加",
       "uploading": "アップロード中…",
@@ -75,7 +79,17 @@
       "statusFailed": "{count} 件のアップロードに失敗",
       "removeImage": "画像を削除",
       "removeFile": "{name} を削除",
-      "cropDescription": "ズームスライダーを調整し、保存すると写真を正方形に切り抜きます。"
+      "cropDescription": "ズームスライダーを調整し、保存すると写真を正方形に切り抜きます。",
+      "preview": "プレビュー",
+      "download": "ダウンロード",
+      "retry": "再試行",
+      "start": "アップロード",
+      "cancel": "キャンセル",
+      "rejectAccept": "{name}: 許可されていない形式です。",
+      "rejectSize": "{name}: ファイルが大きすぎます。",
+      "rejectCount": "{name}: ファイル数の上限です。",
+      "rejectBeforeUpload": "{name}: ファイルの検証に失敗しました。",
+      "readFailed": "選択したフォルダーを読み取れませんでした。"
     },
     "cascader": {
       "placeholder": "選択…",
@@ -109,6 +123,9 @@
       "empty": "該当なし",
       "error": "選択肢を読み込めませんでした"
     },
+    "selection": {
+      "overflow": "他{count}件"
+    },
     "monthPicker": {
       "openGrid": "月選択を開く",
       "previousYear": "前年へ",
@@ -132,6 +149,14 @@
     },
     "formErrors": {
       "title": "入力内容にエラーがあります"
+    },
+    "form": {
+      "optional": "（任意）",
+      "success": "確認済み",
+      "warning": "確認してください",
+      "error": "入力エラー",
+      "validating": "確認中",
+      "submitFailed": "フォームを送信できませんでした。再試行してください。"
     }
   },
   "feedback": {
@@ -154,6 +179,7 @@
     },
     "appShell": {
       "sidebarLabel": "サイドバー",
+      "navRailLabel": "ワークスペース",
       "headerLabel": "ヘッダー",
       "mainLabel": "メインコンテンツ",
       "footerLabel": "フッター",
@@ -246,6 +272,10 @@
       "denied": "このマトリクスを表示する権限がありません",
       "deniedDescription": "閲覧するには管理者に権限の付与を依頼してください。",
       "loading": "権限を読み込み中…"
+    },
+    "progress": {
+      "ariaLabel": "進捗",
+      "breakdownSeparator": "、"
     }
   },
   "ui": {
@@ -279,8 +309,13 @@
     }
   },
   "navigation": {
+    "tabs": {
+      "addTab": "タブを追加",
+      "removeTab": "タブを閉じる"
+    },
     "steps": {
       "ariaLabel": "進行状況",
+      "percentLabel": "現在のステップの進捗",
       "status": {
         "wait": "未完了",
         "process": "現在のステップ",
@@ -318,6 +353,7 @@
       "page": "ページ {page}",
       "pageSize": "ページサイズ",
       "pageSizeTrigger": "{size}件",
+      "jumpTo": "ページへ移動",
       "pageSizeOption": "{size} 件/ページ",
       "total": "全 {total} 件"
     },
@@ -347,6 +383,9 @@
       "logistics": "Logistics Teal",
       "partner": "Partner Orange",
       "slate": "HQ Slate"
+    },
+    "settingToggle": {
+      "label": "{setting}：{value}"
     }
   },
   "locale": {
@@ -390,7 +429,19 @@
     "error": "一覧を取得できませんでした",
     "errorDescription": "データを取得できませんでした。時間をおいて再試行してください。",
     "denied": "この一覧を表示する権限がありません",
-    "deniedDescription": "閲覧するには管理者に権限の付与を依頼してください。"
+    "deniedDescription": "閲覧するには管理者に権限の付与を依頼してください。",
+    "selectInvert": "選択を反転",
+    "selectNone": "選択を解除",
+    "selectionMenu": "選択オプション",
+    "filterColumn": "絞り込み",
+    "filterReset": "絞り込みを解除",
+    "expandColumn": "展開",
+    "expandRow": "行を展開",
+    "collapseRow": "行を折りたたむ",
+    "sortAscending": "昇順に並べ替え",
+    "sortDescending": "降順に並べ替え",
+    "sortCancel": "並べ替えを解除",
+    "selectColumn": "選択"
   },
   "dataGrid": {
     "search": "検索",
@@ -458,5 +509,13 @@
     "summaryPie": "{slices}区分の円グラフ",
     "summaryTrend": "{points}データ点の推移棒グラフ",
     "trendCurrent": "現在"
+  },
+  "rangeTimeline": {
+    "outsideRange": "表示範囲外",
+    "schedule": "スケジュール"
+  },
+  "textExamples": {
+    "preservedText": "プレーンテキスト",
+    "sampleText": "最初の行\n  字下げした行\n\n最後の行"
   }
 }