@ostack.tech/ui-kform 0.12.5 → 0.13.0

package/dist/ostack-ui-kform.css

@@ -591,6 +591,12 @@
   opacity: 0.9;
 }
 
+.o-ui-kform-issues-alert .o-ui-feedback {
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .o-ui-kform-issues-panel {
   border-radius: var(--o-ui-border-radius-sm) var(--o-ui-border-radius-sm) 0 0;
   pointer-events: auto;

package/dist/ostack-ui-kform.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { usePrefix as usePrefix$1, useControllableState, useLatestValues, LocalizationProvider as LocalizationProvider$1, combineEventHandlers, usePrinting, useConstant, useSpacing, useCssVars, NATIVE_CONTROLS, useResponsiveValues, useCombinedRef, cx, useIsInRoot, warnOnce, usePrintInProgress, PrefixProvider, Root, computed, TabContent, ErrorBoundary, DocumentTitle, Spinner, useToastManager, useStartPrintingTask, Tabs, useErrorReporter, EMPTY_STORE, Field, VisuallyHidden, Feedback, FeedbackList, FeedbackPopover, usePrintClassNames, useMeasure, Layer, Stack, useMediaBreakpointUp, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, useAlertDialog, DropdownMenuRadioItem, IconButton, controlStatusToAccent, Tab, boolDataAttr, TabList, combineAriaIds, useIsInTableCell, useDataTableColumnLabel, useOnFieldLabelChange, Checkbox, OptionsGroup, Option, CheckboxGroup, useDateTransformer, DateInput, DateRangeInput, Input, Dialog, Tooltip, DialogTrigger, ControlAddon, Icon, DialogContent, DialogHeader, DialogTitle, DialogBody, Alert, Popover, PopoverTrigger, PopoverContent, Container, Select, MenuListItem, MenuList, StepContent, Step, StepList, Stepper, StepperFinishTrigger, StepperNextTrigger, StepperPreviousTrigger, useKeyboardShortcut, CloseButton, useScrollPosition, setBoolDataAttr, Card, CardHeader, CardTitle, CardBody, useIntersectionObserver, NumericInput, Link, usePrint, usePrinterDocumentTitle, PrinterTrigger, RadioGroup, Radio, ButtonGroup, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogBody, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, DataTableCell, DataTableRow, useDataTableApiRef, DataTable, Slot, DataTableContent, DataTablePagination, DataTableRowsPerPage, TextArea } from "@ostack.tech/ui";
+import { usePrefix as usePrefix$1, useControllableState, useLatestValues, LocalizationProvider as LocalizationProvider$1, combineEventHandlers, usePrinting, useConstant, VisuallyHidden, useSpacing, useCssVars, NATIVE_CONTROLS, useResponsiveValues, useCombinedRef, cx, useIsInRoot, warnOnce, usePrintInProgress, PrefixProvider, Root, computed, TabContent, ErrorBoundary, DocumentTitle, Spinner, useToastManager, useStartPrintingTask, Tabs, useErrorReporter, EMPTY_STORE, Field, Feedback, FeedbackList, FeedbackPopover, usePrintClassNames, useMeasure, Layer, Stack, useMediaBreakpointUp, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, useAlertDialog, DropdownMenuRadioItem, IconButton, controlStatusToAccent, Tab, boolDataAttr, TabList, combineAriaIds, useIsInTableCell, useDataTableColumnLabel, useOnFieldLabelChange, Checkbox, OptionsGroup, Option, CheckboxGroup, useDateTransformer, DateInput, DateRangeInput, Input, Dialog, Tooltip, DialogTrigger, ControlAddon, Icon, DialogContent, DialogHeader, DialogTitle, DialogBody, Alert, Popover, PopoverTrigger, PopoverContent, Container, Select, MenuListItem, MenuList, StepContent, Step, StepList, Stepper, StepperFinishTrigger, StepperNextTrigger, StepperPreviousTrigger, useKeyboardShortcut, CloseButton, useScrollPosition, setBoolDataAttr, Card, CardHeader, CardTitle, CardBody, useIntersectionObserver, NumericInput, Link, usePrint, usePrinterDocumentTitle, PrinterTrigger, RadioGroup, Radio, ButtonGroup, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogBody, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, DataTableCell, DataTableRow, useDataTableApiRef, DataTable, Slot, DataTableContent, DataTablePagination, DataTableRowsPerPage, TextArea } from "@ostack.tech/ui";
 import { AbsolutePath, AbsolutePathFragment, PathMultimap, sliceTable, listableSize, Path, ValidationFailure, nullableSchemaInnerSchema, compareSchemaPaths, PromiseCancellationException, arrayToTable, indexOfTableRowId, isComputedSchema } from "@ostack.tech/kform";
-import { useResolvedPath, equals, useFormController, useForm, FormContext, CurrentPath, useCurrentPath, useFormManager, useFormattedValue, InvalidPathError, AtPathError, useIssuesTracker, useFormContext, useInput, useListableInput, formatTemporalAsString, useTemporalInput, useFileInput, toFileList, useController, useNumericInput, formatNumericAsString, useFormatter } from "@ostack.tech/kform-react";
-import { createContext, useContext, useCallback, useMemo, useRef, useEffect, forwardRef, useState, useImperativeHandle, startTransition, Suspense, useDeferredValue, Children, isValidElement, useId, createElement, memo } from "react";
+import { useResolvedPath, equals, CurrentPath, useFormController, useForm, FormContext, useCurrentPath, useFormManager, useFormattedValue, InvalidPathError, AtPathError, useIssuesTracker, useFormContext, useInput, useListableInput, formatTemporalAsString, useTemporalInput, useFileInput, toFileList, useController, useNumericInput, formatNumericAsString, useFormatter } from "@ostack.tech/kform-react";
+import { createContext, useContext, useCallback, useMemo, useRef, useEffect, forwardRef, useState, useImperativeHandle, startTransition, Suspense, useDeferredValue, Children, isValidElement, useId, memo } from "react";
 import { createStore, useStore } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
@@ -166,6 +166,7 @@ function useCreateFormAppContext({
   readOnly,
   issuesDisplayMode,
   displayIssueCodes,
+  issueMessagesDataKey,
   formAppElement,
   onPathFocus
 }) {
@@ -382,6 +383,7 @@ function useCreateFormAppContext({
       readOnly,
       issuesDisplayMode,
       displayIssueCodes,
+      issueMessagesDataKey,
       formAppElement,
       store
     }),
@@ -390,6 +392,7 @@ function useCreateFormAppContext({
       displayIssueCodes,
       formAppElement,
       formTitle,
+      issueMessagesDataKey,
       issuesDisplayMode,
       readOnly,
       store
@@ -562,6 +565,51 @@ function useSetStartIssuesNavigation(fn) {
     }
   }, [fn, printing, store]);
 }
+const DEFAULT_ISSUE_MESSAGE_DATA_KEY = "message";
+function IssueMessage({
+  path,
+  issue,
+  schema,
+  displayIssueCode,
+  messageDataKey,
+  visuallyHiddenErrorCodePrefix,
+  visuallyHiddenWarningCodePrefix,
+  unknownErrorMessage,
+  unknownWarningMessage,
+  issueCodeProps
+}) {
+  const { issueMessagesDataKey } = useFormAppContext();
+  messageDataKey ??= issueMessagesDataKey;
+  const [locale7] = useLocale();
+  visuallyHiddenErrorCodePrefix ??= locale7.IssueMessages.visuallyHiddenErrorCodePrefix;
+  visuallyHiddenWarningCodePrefix ??= locale7.IssueMessages.visuallyHiddenWarningCodePrefix;
+  unknownErrorMessage ??= locale7.IssueMessages.unknownErrorMessage;
+  unknownWarningMessage ??= locale7.IssueMessages.unknownWarningMessage;
+  let message = useRegisteredIssueMessage(path, issue.code) ?? issue.data[messageDataKey];
+  const unknownMessage = message == null;
+  if (unknownMessage) {
+    message = issue.severity === "error" ? unknownErrorMessage : unknownWarningMessage;
+  }
+  const globalDisplayIssueCodes = useDisplayIssueCodesInIssueMessages();
+  displayIssueCode ??= globalDisplayIssueCodes;
+  return /* @__PURE__ */ jsxs(CurrentPath, { path, children: [
+    typeof message === "function" ? message(issue.data ?? {}, schema, path) : message,
+    (displayIssueCode || unknownMessage) && /* @__PURE__ */ jsxs("span", { ...issueCodeProps, children: [
+      " ",
+      "(",
+      issue.severity === "error" && visuallyHiddenErrorCodePrefix && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+        visuallyHiddenErrorCodePrefix,
+        " "
+      ] }),
+      issue.severity === "warning" && visuallyHiddenWarningCodePrefix && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+        visuallyHiddenWarningCodePrefix,
+        " "
+      ] }),
+      issue.code,
+      ")"
+    ] })
+  ] });
+}
 const FOCUSABLE_ELEMENTS = ["INPUT", "SELECT", "TEXTAREA"];
 function useControlAutofocus({ usePath, useExists }, enabled = true) {
   const controlRef = useRef(null);
@@ -784,6 +832,7 @@ const FormApp = forwardRef(function FormApp2({
   issueMessages,
   issuesDisplayMode = "inline",
   displayIssueCodes = false,
+  issueMessagesDataKey = DEFAULT_ISSUE_MESSAGE_DATA_KEY,
   defaultActivePath,
   activePath,
   onActivePathChange,
@@ -899,6 +948,7 @@ const FormApp = forwardRef(function FormApp2({
     readOnly,
     issuesDisplayMode,
     displayIssueCodes,
+    issueMessagesDataKey,
     controller,
     onPathFocus,
     formAppElement
@@ -1896,52 +1946,12 @@ const ControlField = forwardRef(function ControlField2({
   ]);
   return shown && /* @__PURE__ */ jsx(CurrentPath, { path, children: /* @__PURE__ */ jsx(ControlFieldContext.Provider, { value: store, children: /* @__PURE__ */ jsx(Field, { ...otherProps, ref: forwardedRef }) }) });
 });
-function IssueMessage({
-  path,
-  issue,
-  schema,
-  displayIssueCode,
-  visuallyHiddenErrorCodePrefix,
-  visuallyHiddenWarningCodePrefix,
-  unknownErrorMessage,
-  unknownWarningMessage,
-  issueCodeProps
-}) {
-  const [locale7] = useLocale();
-  visuallyHiddenErrorCodePrefix ??= locale7.IssueMessages.visuallyHiddenErrorCodePrefix;
-  visuallyHiddenWarningCodePrefix ??= locale7.IssueMessages.visuallyHiddenWarningCodePrefix;
-  unknownErrorMessage ??= locale7.IssueMessages.unknownErrorMessage;
-  unknownWarningMessage ??= locale7.IssueMessages.unknownWarningMessage;
-  let message = useRegisteredIssueMessage(path, issue.code);
-  const unknownIssue = message == null;
-  if (unknownIssue) {
-    message = issue.severity === "error" ? unknownErrorMessage : unknownWarningMessage;
-  }
-  const globalDisplayIssueCodes = useDisplayIssueCodesInIssueMessages();
-  displayIssueCode ??= globalDisplayIssueCodes;
-  return /* @__PURE__ */ jsxs(CurrentPath, { path, children: [
-    typeof message === "function" ? message(issue.data ?? {}, schema, path) : message,
-    (displayIssueCode || unknownIssue) && /* @__PURE__ */ jsxs("span", { ...issueCodeProps, children: [
-      " ",
-      "(",
-      issue.severity === "error" && visuallyHiddenErrorCodePrefix && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
-        visuallyHiddenErrorCodePrefix,
-        " "
-      ] }),
-      issue.severity === "warning" && visuallyHiddenWarningCodePrefix && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
-        visuallyHiddenWarningCodePrefix,
-        " "
-      ] }),
-      issue.code,
-      ")"
-    ] })
-  ] });
-}
 const IssueMessages = forwardRef(function IssueMessages2({
   path,
   issues,
   messages,
   displayIssueCodes,
+  messagesDataKey,
   visuallyHiddenErrorCodePrefix,
   visuallyHiddenWarningCodePrefix,
   unknownErrorMessage,
@@ -1993,6 +2003,7 @@ const IssueMessages = forwardRef(function IssueMessages2({
         issue,
         schema,
         displayIssueCode: displayIssueCodes,
+        messageDataKey: messagesDataKey,
         visuallyHiddenErrorCodePrefix,
         visuallyHiddenWarningCodePrefix,
         unknownErrorMessage,
@@ -2005,6 +2016,7 @@ const IssueMessages = forwardRef(function IssueMessages2({
       absolutePath,
       schema,
       displayIssueCodes,
+      messagesDataKey,
       visuallyHiddenErrorCodePrefix,
       visuallyHiddenWarningCodePrefix,
       unknownErrorMessage,
@@ -2099,9 +2111,10 @@ const TopBar = forwardRef(
     ) }) });
   }
 );
-const TopBarActions = forwardRef(function TopBarActions2({ className, ...otherProps }, forwardedRef) {
+const TopBarActions = forwardRef(function TopBarActions2({ className, children, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
-  return /* @__PURE__ */ jsx(
+  const issuesDisplayMode = useIssuesDisplayMode();
+  return /* @__PURE__ */ jsxs(
     Stack,
     {
       className: cx(prefix("top-bar__actions"), className),
@@ -2109,7 +2122,11 @@ const TopBarActions = forwardRef(function TopBarActions2({ className, ...otherPr
       gap: 2,
       justifyContent: "flex-end",
       ...otherProps,
-      ref: forwardedRef
+      ref: forwardedRef,
+      children: [
+        issuesDisplayMode === "inline" && /* @__PURE__ */ jsx(IssuesPopover, { children: /* @__PURE__ */ jsx(IssueMessages, {}) }),
+        children
+      ]
     }
   );
 });
@@ -5060,21 +5077,81 @@ const FormStepper = forwardRef(function FormStepper2({
 const FormStepperFinishTrigger = StepperFinishTrigger;
 const FormStepperNextTrigger = StepperNextTrigger;
 const FormStepperPreviousTrigger = StepperPreviousTrigger;
-const IssueAlert = forwardRef(function IssueMessage2({ path, code, children, ...otherProps }, forwardedRef) {
-  const { info } = useIssuesTracker(path);
-  const relevantIssues = (info?.flatMap((info2) => info2.issues) ?? []).filter(
-    (issue) => issue.code === code
+const IssuesAlert = forwardRef(function IssuesAlert2({
+  variant = "solid",
+  path,
+  issues,
+  messages,
+  displayIssueCodes,
+  messagesDataKey,
+  visuallyHiddenErrorCodePrefix,
+  visuallyHiddenWarningCodePrefix,
+  unknownErrorMessage,
+  unknownWarningMessage,
+  className,
+  ...otherProps
+}, forwardedRef) {
+  const prefix = usePrefix();
+  const formManager = useFormManager();
+  const absolutePath = useResolvedPath(path);
+  const { info } = useIssuesTracker(absolutePath, {
+    enabled: !issues
+  });
+  const messagesToRegister = useMemo(
+    () => messages && { [absolutePath.toString()]: messages },
+    [absolutePath, messages]
+  );
+  const deferredTrackedIssues = useDeferredValue(
+    useMemo(() => info?.flatMap((info2) => info2.issues) ?? [], [info])
+  );
+  const deferredIssuesToDisplay = issues ?? deferredTrackedIssues;
+  useReportValidationFailures(
+    useMemo(
+      () => [{ path: absolutePath, issues: deferredIssuesToDisplay }],
+      [absolutePath, deferredIssuesToDisplay]
+    )
   );
-  return /* @__PURE__ */ jsx(Fragment, { children: relevantIssues.map((issue, i) => /* @__PURE__ */ createElement(
+  const severity = useMemo(
+    () => deferredIssuesToDisplay.length === 0 ? void 0 : deferredIssuesToDisplay.every((issue) => issue.severity === "warning") ? "warning" : "danger",
+    [deferredIssuesToDisplay]
+  );
+  const prevSeverityRef = useRef(severity);
+  useEffect(() => {
+    prevSeverityRef.current = severity;
+  }, [severity]);
+  const prevSeverity = prevSeverityRef.current;
+  const schema = useMemo(
+    () => formManager.schema(absolutePath),
+    [absolutePath, formManager]
+  );
+  return /* @__PURE__ */ jsx(
     Alert,
     {
+      className: cx(prefix("issues-alert"), className),
+      open: deferredIssuesToDisplay.length > 0,
+      variant,
       ...otherProps,
-      severity: issue.severity === "error" ? "danger" : "warning",
+      severity: severity ?? prevSeverity,
       ref: forwardedRef,
-      key: i
-    },
-    typeof children === "function" ? children(issue.data ?? {}) : children
-  )) });
+      children: /* @__PURE__ */ jsx(FormAppIssueMessages, { issueMessages: messagesToRegister, children: /* @__PURE__ */ jsx(FeedbackList, { children: deferredIssuesToDisplay.map((issue, i) => /* @__PURE__ */ jsx(Feedback, { type: issue.severity, children: /* @__PURE__ */ jsx(
+        IssueMessage,
+        {
+          path: absolutePath,
+          issue,
+          schema,
+          displayIssueCode: displayIssueCodes,
+          messageDataKey: messagesDataKey,
+          visuallyHiddenErrorCodePrefix,
+          visuallyHiddenWarningCodePrefix,
+          unknownErrorMessage,
+          unknownWarningMessage,
+          issueCodeProps: {
+            className: prefix("issue-messages__issue-code")
+          }
+        }
+      ) }, i)) }) })
+    }
+  );
 });
 function useFormValidator() {
   const startIssuesNavigation = useStartIssuesNavigation();
@@ -7869,7 +7946,7 @@ function useResetOnChange(toReset, {
   const formManager = useFormManager();
   const currentPath = useCurrentPath();
   const resettingValue = useRef(false);
-  return async function handleValueChange(event) {
+  const handleValueChange = async (event) => {
     if (!resettingValue.current && when(event)) {
       let resolvedToReset = (Array.isArray(toReset) ? toReset : [toReset]).map(
         (path) => currentPath.resolve(path)
@@ -7886,15 +7963,14 @@ function useResetOnChange(toReset, {
         const { message, ...confirmOptions } = confirmation;
         if (await someIsDirty(formManager, resolvedToReset) && !await confirm(message, { color: "warning", ...confirmOptions })) {
           resettingValue.current = true;
-          setTimeout(
-            () => formManager.set(event.path, event.oldValue).finally(() => resettingValue.current = false)
-          );
+          formManager.set(event.path, event.oldValue).finally(() => resettingValue.current = false);
           return;
         }
       }
-      void resetAll(formManager, resolvedToReset, setUntouched, setPristine);
+      await resetAll(formManager, resolvedToReset, setUntouched, setPristine);
     }
   };
+  return (event) => void handleValueChange(event);
 }
 function excludePaths(formManager, paths, exclude) {
   return paths.flatMap(
@@ -7956,8 +8032,8 @@ export {
   FormStepperFinishTrigger,
   FormStepperNextTrigger,
   FormStepperPreviousTrigger,
-  IssueAlert,
   IssueMessages,
+  IssuesAlert,
   IssuesPanel,
   IssuesPopover,
   LoadAction,