@ostack.tech/ui-kform 0.10.4 → 0.11.0

package/dist/types/components/Annexes/Annex.d.ts

@@ -17,9 +17,9 @@ export interface AnnexProps extends AnnexObject, Omit<ComponentPropsWithoutRef<t
      *
      * These messages are used by the `IssueMessages` component.
      *
-     * **Note:** Changes to `issueMessages` are handled correctly, but are not
-     * efficient. Please make sure that the identity of the provided value doesn't
-     * change at every render.
+     * > **Note:** Changes to `issueMessages` are handled correctly, but are not
+     * > efficient. Please make sure that the identity of the provided value doesn't
+     * > change at every render.
      *
      * Example value:
      *

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

@@ -49,9 +49,9 @@ export type FormAppProps<T = any> = Pick<ComponentPropsWithoutRef<typeof Root>,
      *
      * These messages are used by the `IssueMessages` component.
      *
-     * **Note:** Changes to `issueMessages` are handled correctly, but are not
-     * efficient. Please make sure that the identity of the provided value
-     * doesn't change at every render.
+     * > **Note:** Changes to `issueMessages` are handled correctly, but are not
+     * > efficient. Please make sure that the identity of the provided value
+     * > doesn't change at every render.
      *
      * Example value:
      *
@@ -76,7 +76,7 @@ export type FormAppProps<T = any> = Pick<ComponentPropsWithoutRef<typeof Root>,
      *   for navigating issues.
      * - `panel` mode displays issue messages within the bottom issues panel.
      *
-     * @default inline
+     * @default "inline"
      */
     issuesDisplayMode?: IssuesDisplayMode;
     /**
@@ -186,9 +186,9 @@ export declare const FormApp: import('react').ForwardRefExoticComponent<Pick<Omi
      *
      * These messages are used by the `IssueMessages` component.
      *
-     * **Note:** Changes to `issueMessages` are handled correctly, but are not
-     * efficient. Please make sure that the identity of the provided value
-     * doesn't change at every render.
+     * > **Note:** Changes to `issueMessages` are handled correctly, but are not
+     * > efficient. Please make sure that the identity of the provided value
+     * > doesn't change at every render.
      *
      * Example value:
      *
@@ -213,7 +213,7 @@ export declare const FormApp: import('react').ForwardRefExoticComponent<Pick<Omi
      *   for navigating issues.
      * - `panel` mode displays issue messages within the bottom issues panel.
      *
-     * @default inline
+     * @default "inline"
      */
     issuesDisplayMode?: IssuesDisplayMode;
     /**

package/dist/types/components/FormPages/FormPage.d.ts

@@ -20,9 +20,9 @@ export interface FormPageProps extends FormPageObject, Omit<ComponentPropsWithou
      *
      * These messages are used by the `IssueMessages` component.
      *
-     * **Note:** Changes to `issueMessages` are handled correctly, but are not
-     * efficient. Please make sure that the identity of the provided value doesn't
-     * change at every render.
+     * > **Note:** Changes to `issueMessages` are handled correctly, but are not
+     * > efficient. Please make sure that the identity of the provided value doesn't
+     * > change at every render.
      *
      * Example value:
      *

package/dist/types/components/FormStepper/FormStep.d.ts

@@ -1,8 +1,45 @@
-import { AbsolutePath } from '@ostack.tech/kform';
+import { ErrorBoundary, StepContent } from '@ostack.tech/ui';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
+import { IssueMessagesByCode } from '../IssueMessages';
+import { FormStepObject } from './FormStepper.tsx';
 /** Properties of the form step component. */
-export interface FormStepProps {
-    path: AbsolutePath;
-    index: number;
+export interface FormStepProps extends FormStepObject, Omit<ComponentPropsWithoutRef<typeof StepContent>, "index" | "title"> {
+    /** Sets the step as disabled. */
+    disabled?: boolean;
+    /** Sets the step as read-only. */
+    readOnly?: boolean;
+    /**
+     * Mapping of issue messages from the path of the field with issues to the
+     * issue messages of said field (which are themselves grouped by their code).
+     *
+     * Provided paths are relative to the form step's path and may contain
+     * wildcards, which will have a lower priority when matched against.
+     *
+     * These messages are used by the `IssueMessages` component.
+     *
+     * > **Note:** Changes to `issueMessages` are handled correctly, but are not
+     * > efficient. Please make sure that the identity of the provided value doesn't
+     * > change at every render.
+     *
+     * Example value:
+     *
+     * ```tsx
+     * {
+     *   "**": {
+     *     "valueMissing": "Field is required."
+     *   },
+     *   "field": {
+     *     "valueMissing": "My field cannot be left empty!",
+     *     "someOtherError": "Text of the other error."
+     *   }
+     * }
+     * ```
+     */
+    issueMessages?: Record<string, IssueMessagesByCode>;
+    /** Properties to pass to the `ErrorBoundary` component. */
+    errorBoundaryProps?: ComponentPropsWithRef<typeof ErrorBoundary>;
 }
-/** Form step. */
-export declare function FormStep({ path, index }: FormStepProps): import("react/jsx-runtime").JSX.Element;
+/** Single form step. */
+export declare const FormStep: import('react').ForwardRefExoticComponent<FormStepProps & import('react').RefAttributes<HTMLDivElement>>;
+/** @deprecated Use `FormStep` instead. */
+export declare const FormStepContent: import('react').ForwardRefExoticComponent<FormStepProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/FormStepper/FormStepButton.d.ts

@@ -0,0 +1,8 @@
+import { AbsolutePath } from '@ostack.tech/kform';
+/** Properties of the form step button component. */
+export interface FormStepButtonProps {
+    path: AbsolutePath;
+    index: number;
+}
+/** Form step button. */
+export declare function FormStepButton({ path, index }: FormStepButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/FormStepper/FormStepList.d.ts

@@ -4,4 +4,4 @@ import { ComponentPropsWithoutRef } from 'react';
 export interface FormStepListProps extends ComponentPropsWithoutRef<typeof StepList> {
 }
 /** Component displaying all form steps in a list. */
-export declare const FormStepList: import('react').ForwardRefExoticComponent<FormStepListProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const FormStepList: import('react').ForwardRefExoticComponent<FormStepListProps & import('react').RefAttributes<HTMLOListElement>>;

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

@@ -6,7 +6,7 @@ export interface FormStepperProps extends Omit<ComponentPropsWithoutRef<typeof S
     /** Base path for all declared form steps. */
     path?: string | Path;
     /** List of all form steps. */
-    steps: FormStepObject[];
+    steps?: FormStepObject[];
     /** Default active form step. */
     defaultActiveStep?: string | Path;
     /** Controlled active form step. */

package/dist/types/components/FormStepper/FormStepperFinishTrigger.d.ts

@@ -0,0 +1,2 @@
+/** Trigger used to conclude the form stepper. */
+export declare const FormStepperFinishTrigger: import('react').ForwardRefExoticComponent<import('@ostack.tech/ui').StepperFinishTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/FormStepper/FormStepperNextTrigger.d.ts

@@ -0,0 +1,2 @@
+/** Trigger used to go to the next step of the form stepper. */
+export declare const FormStepperNextTrigger: import('react').ForwardRefExoticComponent<import('@ostack.tech/ui').StepperNextTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/FormStepper/FormStepperPreviousTrigger.d.ts

@@ -0,0 +1,2 @@
+/** Trigger used to go to the previous step of the form stepper. */
+export declare const FormStepperPreviousTrigger: import('react').ForwardRefExoticComponent<import('@ostack.tech/ui').StepperPreviousTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/FormStepper/FormStepperState.d.ts

@@ -0,0 +1,3 @@
+import { StepperState } from '@ostack.tech/ui';
+/** Component used to access the state of the form stepper and act on its API. */
+export declare const FormStepperState: typeof StepperState;

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

@@ -1,4 +1,7 @@
-export * from './FormStepContent.tsx';
+export * from './FormStep.tsx';
 export * from './FormStepList.tsx';
 export * from './FormStepper.tsx';
+export * from './FormStepperFinishTrigger.tsx';
+export * from './FormStepperNextTrigger.tsx';
+export * from './FormStepperPreviousTrigger.tsx';
 export { FormStepRegistrar } from './FormStepRegistrar.tsx';

package/dist/types/components/TableControl/TableControlAddRowTrigger.d.ts

@@ -1,12 +1,9 @@
 import { Button } from '@ostack.tech/ui';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 /** Properties of the table control add row trigger component. */
-export interface TableControlAddRowTriggerProps extends ComponentPropsWithoutRef<typeof Button<"button">> {
-    /**
-     * Text displayed on the button rendered by default when no `children` are
-     * provided. If `children` are provided, this property has no effect.
-     */
-    defaultButtonText?: ReactNode;
+export type TableControlAddRowTriggerProps = TableControlAddRowTriggerChildlessProps | TableControlAddRowTriggerChildrenProps;
+/** Base properties of the table control add row trigger component. */
+export interface TableControlAddRowTriggerPropsBase {
     /** Function called after the row has been added. */
     onRowAdded?: () => void;
     /**
@@ -30,9 +27,26 @@ export interface TableControlAddRowTriggerProps extends ComponentPropsWithoutRef
     showWhilePrinting?: boolean;
 }
 /**
- * Trigger used to add a new row to a table control.
- *
- * By default, it renders a button with text `defaultButtonText`, however, this
- * can be overriden by providing `children`.
+ * Properties of the table control add row trigger component when rendered
+ * without children.
  */
+export interface TableControlAddRowTriggerChildlessProps extends TableControlAddRowTriggerPropsBase, Omit<ComponentPropsWithoutRef<typeof Button<"button">>, "asChild" | "children"> {
+    /** Label displayed on the button. */
+    label?: ReactNode;
+    /**
+     * Label displayed on the button.
+     *
+     * @deprecated Use `label` instead.
+     */
+    defaultButtonText?: ReactNode;
+    children?: never;
+}
+/**
+ * Properties of the table control add row trigger component when rendered with
+ * children.
+ */
+export interface TableControlAddRowTriggerChildrenProps extends TableControlAddRowTriggerPropsBase, ComponentPropsWithoutRef<"button"> {
+    children: ReactNode;
+}
+/** Trigger used to add a new row to a table control. */
 export declare const TableControlAddRowTrigger: import('react').ForwardRefExoticComponent<TableControlAddRowTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/TableControl/TableControlRemoveRowTrigger.d.ts

@@ -1,7 +1,9 @@
 import { IconButton } from '@ostack.tech/ui';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 /** Properties of the table control remove row trigger component. */
-export interface TableControlRemoveRowTriggerProps extends Omit<Partial<ComponentPropsWithoutRef<typeof IconButton<"button">>>, "children"> {
+export type TableControlRemoveRowTriggerProps = TableControlRemoveRowTriggerChildlessProps | TableControlRemoveRowTriggerChildrenProps;
+/** Base properties of the table control remove row trigger component. */
+export interface TableControlRemoveRowTriggerChildlessPropsBase {
     /**
      * Whether to show a confirmation message when removing a row.
      *
@@ -15,11 +17,6 @@ export interface TableControlRemoveRowTriggerProps extends Omit<Partial<Componen
     onConfirmRowRemoval?: () => void;
     /** Function called after the row has been removed. */
     onRowRemoved?: () => void;
-    /**
-     * Label displayed on the icon button rendered by default when no `children`
-     * are provided. If `children` are provided, this property has no effect.
-     */
-    defaultButtonLabel?: ReactNode;
     /** Title of the confirmation dialog when `showConfirmation` is `true`. */
     confirmDialogTitle?: ReactNode;
     /**
@@ -44,13 +41,26 @@ export interface TableControlRemoveRowTriggerProps extends Omit<Partial<Componen
      * @default false
      */
     showWhenReadOnly?: boolean;
+}
+/**
+ * Base properties of the table control remove row trigger component when
+ * rendered without children.
+ */
+export interface TableControlRemoveRowTriggerChildlessProps extends TableControlRemoveRowTriggerChildlessPropsBase, Omit<Partial<ComponentPropsWithoutRef<typeof IconButton<"button">>>, "asChild" | "children"> {
     /**
-     * Children of the remove row trigger component. By default, it is an
-     * `IconButton` with label `defaultButtonLabel`. A function can be optionally
-     * passed as children which will receive an argument with whether the row is
-     * currently being removed.
+     * Label of the icon button.
+     *
+     * @deprecated Use `label` instead.
      */
-    children?: ReactNode;
+    defaultButtonLabel?: ReactNode;
+    children?: never;
+}
+/**
+ * Base properties of the table control remove row trigger component when
+ * rendered with children.
+ */
+export interface TableControlRemoveRowTriggerChildrenProps extends TableControlRemoveRowTriggerChildlessPropsBase, Partial<ComponentPropsWithoutRef<"button">> {
+    children: ReactNode;
 }
 /**
  * Trigger used to remove a row of a table controlled by a table control.

package/dist/types/providers/LocalizationProvider/LocalizationObject.d.ts

@@ -11,7 +11,7 @@ import { LoadActionProps } from '../../components/LoadAction';
 import { PrintActionProps } from '../../components/PrintAction';
 import { SaveActionProps } from '../../components/SaveAction';
 import { SubmitActionProps } from '../../components/SubmitAction';
-import { TableControlAddRowTriggerProps, TableControlRemoveRowTriggerProps } from '../../components/TableControl';
+import { TableControlAddRowTriggerChildlessProps, TableControlRemoveRowTriggerChildlessProps } from '../../components/TableControl';
 import { ValidateActionProps } from '../../components/ValidateAction';
 /** Localization object representation. */
 export interface LocalizationObject {
@@ -29,7 +29,7 @@ export interface LocalizationObject {
     SaveAction: Pick<SaveActionProps, "label" | "keybinds" | "saveOptionsLabel" | "saveAsLabel" | "saveAsKeybinds" | "successMessage" | "errorMessage">;
     PrintAction: Pick<PrintActionProps, "label" | "keybinds">;
     SubmitAction: Pick<SubmitActionProps, "label" | "keybinds" | "dialogTitle" | "dialogDescription" | "dialogBody" | "dialogOkText" | "dialogCancelText" | "confirmWarningsCheckboxLabel" | "successMessage" | "errorMessage">;
-    TableControlAddRowTrigger: Pick<TableControlAddRowTriggerProps, "defaultButtonText">;
-    TableControlRemoveRowTrigger: Pick<TableControlRemoveRowTriggerProps, "defaultButtonLabel" | "confirmDialogTitle" | "confirmDialogMessage" | "confirmDialogOkText" | "confirmDialogCancelText">;
+    TableControlAddRowTrigger: Pick<TableControlAddRowTriggerChildlessProps, "label">;
+    TableControlRemoveRowTrigger: Pick<TableControlRemoveRowTriggerChildlessProps, "label" | "confirmDialogTitle" | "confirmDialogMessage" | "confirmDialogOkText" | "confirmDialogCancelText">;
     ValidateAction: Pick<ValidateActionProps, "label" | "keybinds">;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui-kform",
   "description": "Integration of ostack/UI with ostack/KForm.",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "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.10.4",
+    "@ostack.tech/ui": "~0.11.0",
     "@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/Annexes/_Annexes.scss

@@ -160,9 +160,13 @@
   }
 
   &__tab-inner {
+    min-height: $tab-height;
+  }
+
+  &__tab-text {
+    display: flex;
     flex-direction: column;
     height: 100%;
-    min-height: $tab-height;
   }
 
   &__tab-title,

package/scss/components/FormPages/_FormPages.scss

@@ -272,7 +272,8 @@
       var(--radix-popover-content-available-width)
     );
     max-height: min(600px, var(--radix-popover-content-available-height));
-    padding: ostack-ui.spacing(1) ostack-ui.spacing(2);
+    padding: ostack-ui.$label-helper-popover-padding-y
+      ostack-ui.$label-helper-popover-padding-x;
   }
 
   &__page-content {

package/dist/types/components/FormStepper/FormStepContent.d.ts

@@ -1,20 +0,0 @@
-import { Path } from '@ostack.tech/kform';
-import { ErrorBoundary, StepContent } from '@ostack.tech/ui';
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from 'react';
-/** Properties of the form step content component. */
-export interface FormStepContentProps extends Omit<ComponentPropsWithoutRef<typeof StepContent>, "index" | "children"> {
-    /**
-     * Step path. This should match the path of the step provided to
-     * `FormStepper`.
-     */
-    path?: string | Path;
-    /** Sets the step as disabled. */
-    disabled?: boolean;
-    /** Sets the step as read-only. */
-    readOnly?: boolean;
-    /** Properties to pass to the `ErrorBoundary` component. */
-    errorBoundaryProps?: ComponentPropsWithRef<typeof ErrorBoundary>;
-    children?: ReactNode;
-}
-/** Component containing the content of a form step. */
-export declare const FormStepContent: import('react').ForwardRefExoticComponent<FormStepContentProps & import('react').RefAttributes<HTMLDivElement>>;