@ostack.tech/ui-kform 0.12.5 → 0.13.1

package/dist/types/components/FormApp/FormApp.d.ts

@@ -86,6 +86,14 @@ export type FormAppProps<T = any> = Pick<ComponentPropsWithoutRef<typeof Root>,
      * @default false
      */
     displayIssueCodes?: boolean;
+    /**
+     * Name of the key in the data object of validation issues that possibly
+     * contains the issue message to display. This message is only used if no
+     * matching message is otherwise found.
+     *
+     * @default "message"
+     */
+    issueMessagesDataKey?: string;
     /** Uncontrolled default active path to use. */
     defaultActivePath?: string | Path;
     /** Controlled active path to use. */
@@ -218,6 +226,14 @@ export declare const FormApp: import('react').ForwardRefExoticComponent<Pick<Omi
      * @default false
      */
     displayIssueCodes?: boolean;
+    /**
+     * Name of the key in the data object of validation issues that possibly
+     * contains the issue message to display. This message is only used if no
+     * matching message is otherwise found.
+     *
+     * @default "message"
+     */
+    issueMessagesDataKey?: string;
     /** Uncontrolled default active path to use. */
     defaultActivePath?: string | Path;
     /** Controlled active path to use. */

package/dist/types/components/FormApp/FormAppContext.d.ts

@@ -10,6 +10,7 @@ export interface FormAppContextValue<T = unknown> {
     readOnly: boolean;
     issuesDisplayMode: IssuesDisplayMode;
     displayIssueCodes: boolean;
+    issueMessagesDataKey: string;
     formAppElement: HTMLFormElement | null;
     store: FormAppStore<T>;
 }
@@ -53,7 +54,7 @@ export interface FormAppActions {
     isRegistered: (path: AbsolutePath) => boolean;
     setLatestInteraction: (path: AbsolutePath) => void;
     registerIssueMessages: (basePath: AbsolutePath, issueMessages?: Record<string, IssueMessagesByCode>, priority?: number) => (() => void) | void;
-    getRegisteredIssueMessage: (path: AbsolutePath, code: string) => IssueMessageValue | null;
+    getRegisteredIssueMessage: (path: AbsolutePath, code: string) => IssueMessageValue;
     registerLabel: (path: AbsolutePath, label: ReactNode, priority?: number) => (() => void) | void;
     getRegisteredLabel: (path: AbsolutePath) => ReactNode;
     getActiveIssuesPanelBreadcrumb: () => BreadcrumbItem[] | null;
@@ -72,12 +73,13 @@ export interface UseCreateFormAppContextOptions<T> extends Omit<FormAppContextVa
     onPathFocus?: (path: AbsolutePath) => void;
 }
 /** Hook which creates the form app context. */
-export declare function useCreateFormAppContext<T>({ formTitle, controller, disabled, readOnly, issuesDisplayMode, displayIssueCodes, formAppElement, onPathFocus, }: UseCreateFormAppContextOptions<T>): {
+export declare function useCreateFormAppContext<T>({ formTitle, controller, disabled, readOnly, issuesDisplayMode, displayIssueCodes, issueMessagesDataKey, formAppElement, onPathFocus, }: UseCreateFormAppContextOptions<T>): {
     formTitle: string | undefined;
     disabled: boolean;
     readOnly: boolean;
     issuesDisplayMode: IssuesDisplayMode;
     displayIssueCodes: boolean;
+    issueMessagesDataKey: string;
     formAppElement: HTMLFormElement | null;
     store: Omit<import('zustand').StoreApi<FormAppState<T>>, "subscribe"> & {
         subscribe: {
@@ -147,7 +149,7 @@ export declare function useSetLatestInteraction(): FormAppActions["setLatestInte
 /** Hook used to register issue messages within the form app. */
 export declare function useRegisterIssueMessages(path: AbsolutePath | null | undefined, issueMessages?: Record<string, IssueMessagesByCode>, priority?: number): void;
 /** Hook used to get the issue message value for the provided path and code. */
-export declare function useRegisteredIssueMessage(path: AbsolutePath | null | undefined, code: string): IssueMessageValue | null;
+export declare function useRegisteredIssueMessage(path: AbsolutePath | null | undefined, code: string): IssueMessageValue;
 /** Hook used to register a label within the form app. */
 export declare function useRegisterLabel(path: AbsolutePath | null | undefined, label: ReactNode, priority?: number): void;
 /**

package/dist/types/components/IssueMessage/IssueMessage.d.ts

@@ -1,16 +1,16 @@
 import { AbsolutePath, Schema, SealedValidationIssue } from '@ostack.tech/kform';
-import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentPropsWithRef } from 'react';
+import { IssueMessagesProps } from '../IssueMessages';
+/** Default data key where to check for an issue message. */
+export declare const DEFAULT_ISSUE_MESSAGE_DATA_KEY = "message";
 /** Properties of the issue message component. */
-export interface IssueMessageProps {
+export interface IssueMessageProps extends Pick<IssueMessagesProps, "visuallyHiddenErrorCodePrefix" | "visuallyHiddenWarningCodePrefix" | "unknownErrorMessage" | "unknownWarningMessage"> {
     displayIssueCode?: boolean;
-    visuallyHiddenErrorCodePrefix?: ReactNode;
-    visuallyHiddenWarningCodePrefix?: ReactNode;
-    unknownErrorMessage?: ReactNode;
-    unknownWarningMessage?: ReactNode;
+    messageDataKey?: string;
     path: AbsolutePath;
     issue: SealedValidationIssue;
     schema: Schema;
     issueCodeProps?: ComponentPropsWithRef<"span">;
 }
 /** Single issue message within the issue messages or issues panel components. */
-export declare function IssueMessage({ path, issue, schema, displayIssueCode, visuallyHiddenErrorCodePrefix, visuallyHiddenWarningCodePrefix, unknownErrorMessage, unknownWarningMessage, issueCodeProps, }: IssueMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function IssueMessage({ path, issue, schema, displayIssueCode, messageDataKey, visuallyHiddenErrorCodePrefix, visuallyHiddenWarningCodePrefix, unknownErrorMessage, unknownWarningMessage, issueCodeProps, }: IssueMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/IssueMessages/IssueMessages.d.ts

@@ -23,6 +23,14 @@ export interface IssueMessagesProps extends ComponentPropsWithoutRef<typeof Feed
      * of the `FormApp`.
      */
     displayIssueCodes?: boolean;
+    /**
+     * Name of the key in a validation issue's data object that possibly contains
+     * the issue message. This message is only used if no matching message is
+     * otherwise found.
+     *
+     * @default "message"
+     */
+    messagesDataKey?: string;
     /** Accessible prefix for error codes when `displayIssueCodes` is set. */
     visuallyHiddenErrorCodePrefix?: ReactNode;
     /** Accessible prefix for warning codes when `displayIssueCodes` is set. */

package/dist/types/components/IssuesAlert/IssuesAlert.d.ts

@@ -0,0 +1,8 @@
+import { Alert } from '@ostack.tech/ui';
+import { ComponentPropsWithoutRef } from 'react';
+import { IssueMessages } from '../IssueMessages';
+/** Properties of the issues alert component. */
+export interface IssuesAlertProps extends Omit<ComponentPropsWithoutRef<typeof Alert>, "open" | "defaultOpen" | "severity" | "children">, Pick<ComponentPropsWithoutRef<typeof IssueMessages>, "path" | "issues" | "messages" | "displayIssueCodes" | "messagesDataKey" | "visuallyHiddenErrorCodePrefix" | "visuallyHiddenWarningCodePrefix" | "unknownErrorMessage" | "unknownWarningMessage"> {
+}
+/** Component used to display an issue alert. */
+export declare const IssuesAlert: import('react').ForwardRefExoticComponent<IssuesAlertProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/IssuesAlert/index.d.ts

@@ -0,0 +1 @@
+export * from './IssuesAlert.tsx';

package/dist/types/index.d.ts

@@ -9,8 +9,8 @@ export * from './components/FileControl';
 export * from './components/FormApp';
 export * from './components/FormPages';
 export * from './components/FormStepper';
-export * from './components/IssueAlert';
 export * from './components/IssueMessages';
+export * from './components/IssuesAlert';
 export * from './components/IssuesPanel';
 export * from './components/IssuesPopover';
 export * from './components/LoadAction';

package/dist/types/utils/useResetOnChange.d.ts

@@ -52,7 +52,7 @@ export interface UseResetOnChangeOptions<T = unknown> {
     setPristine?: boolean;
 }
 /** Event handler returned by the `useResetOnChange` hook. */
-export type UseResetOnChangeResult = (event: SealedValueEvent<any>) => Promise<void>;
+export type UseResetOnChangeResult = (event: SealedValueEvent<any>) => void;
 /**
  * Hook which returns an `onValueChange` event handler which resets the fields
  * at the provided `toReset` paths to their initial value when the value changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui-kform",
   "description": "Integration of ostack/UI with ostack/KForm.",
-  "version": "0.12.5",
+  "version": "0.13.1",
   "homepage": "https://ui.ostack.tech/",
   "author": {
     "name": "Opensoft",
@@ -50,7 +50,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.0 || ^7.0.0",
     "@ostack.tech/kform": "~0.32.0",
     "@ostack.tech/kform-react": "~0.32.0",
-    "@ostack.tech/ui": "~0.12.5",
+    "@ostack.tech/ui": "~0.13.1",
     "@types/react": "^18.0.0 || ^19.0.0",
     "@types/react-dom": "^18.0.0 || ^19.0.0",
     "date-fns": "^4.1.0",

package/scss/components/IssuesAlert/_IssuesAlert.scss

@@ -0,0 +1,10 @@
+@use "@ostack.tech/ui/scss/utils" as o-ui;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}issues-alert {
+  .#{o-ui.$prefix}feedback {
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+}

package/scss/index.scss

@@ -6,5 +6,6 @@
 @forward "components/FormApp/FormApp";
 @forward "components/FormPages/FormPages";
 @forward "components/IssueMessages/IssueMessages";
+@forward "components/IssuesAlert/IssuesAlert";
 @forward "components/IssuesPanel/IssuesPanel";
 @forward "components/TopBar/TopBar";

package/dist/types/components/IssueAlert/IssueAlert.d.ts

@@ -1,13 +0,0 @@
-import { Path, ValidationIssueData } from '@ostack.tech/kform';
-import { Alert } from '@ostack.tech/ui';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-/** Properties of the issue alert component. */
-export interface IssueAlertProps extends Omit<ComponentPropsWithoutRef<typeof Alert>, "severity" | "children"> {
-    /** Path of the value with the issue in question. */
-    path?: string | Path;
-    /** Code of the issue in question. */
-    code: string;
-    children?: ReactNode | ((issueData: ValidationIssueData) => ReactNode);
-}
-/** Component used to display an issue alert. */
-export declare const IssueAlert: import('react').ForwardRefExoticComponent<IssueAlertProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/IssueAlert/index.d.ts

@@ -1 +0,0 @@
-export * from './IssueAlert.tsx';