@ostack.tech/ui-kform 0.11.3 → 0.12.0

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

@@ -8,7 +8,7 @@ import { IssueMessagesByCode } from '../IssueMessages';
 /** Mode of displaying issue messages. */
 export type IssuesDisplayMode = "inline" | "panel";
 /** Properties of the form app component. */
-export type FormAppProps<T = any> = Pick<ComponentPropsWithoutRef<typeof Root>, "enableErrorReporting" | "reportError" | "errorReportingUrl" | "errorReportingMethod" | "encodeErrorReport" | "encodedErrorReportMimeType" | "errorReportingOptions" | "baseDocumentTitle" | "documentTitleBaseSeparator" | "documentTitleBreadcrumbsSeparator" | "portalsContainer" | "tooltipsDelayDuration" | "tooltipsSkipDelayDuration" | "disableTooltipsHoverableContent" | "toastsLabel" | "toastsDuration" | "toastsSwipeDirection" | "toastsSwipeThreshold" | "toastViewportHotkey" | "toastViewportLabel" | "toastViewportProps" | "errorBoundaryProps"> & FormOptions<T> & Omit<ComponentPropsWithoutRef<"form">, "onSubmit" | "onReset"> & {
+export type FormAppProps<T = any> = Pick<ComponentPropsWithoutRef<typeof Root>, "enableErrorReporting" | "reportError" | "errorReportingUrl" | "errorReportingMethod" | "encodeErrorReport" | "encodedErrorReportMimeType" | "errorReportingOptions" | "baseDocumentTitle" | "documentTitleBaseSeparator" | "documentTitleBreadcrumbsSeparator" | "portalsContainer" | "tooltipsDelayDuration" | "tooltipsSkipDelayDuration" | "disableTooltipsHoverableContent" | "toastsLabel" | "toastsDuration" | "toastsSwipeDirection" | "toastsSwipeThreshold" | "toastViewportPosition" | "toastViewportHotkey" | "toastViewportLabel" | "toastViewportProps" | "errorBoundaryProps"> & FormOptions<T> & Omit<ComponentPropsWithoutRef<"form">, "onSubmit" | "onReset"> & {
     /** Schema of the form. */
     schema: Schema<T> | SchemaKt;
     /** Title of the form. */
@@ -145,7 +145,7 @@ export type FormAppApi<T = unknown> = Controller<T> & {
  * ostack/UI's `locale` is automatically provided to the ostack/UI `Root`
  * component from the provided `FormApp` `locale`.
  */
-export declare const FormApp: import('react').ForwardRefExoticComponent<Pick<Omit<import('@ostack.tech/ui').RootProps & import('react').RefAttributes<HTMLDivElement>, "ref">, "reportError" | "errorReportingUrl" | "errorReportingMethod" | "encodeErrorReport" | "encodedErrorReportMimeType" | "errorReportingOptions" | "baseDocumentTitle" | "enableErrorReporting" | "documentTitleBaseSeparator" | "documentTitleBreadcrumbsSeparator" | "portalsContainer" | "tooltipsDelayDuration" | "tooltipsSkipDelayDuration" | "disableTooltipsHoverableContent" | "toastsLabel" | "toastsDuration" | "toastsSwipeDirection" | "toastsSwipeThreshold" | "toastViewportHotkey" | "toastViewportLabel" | "toastViewportProps" | "errorBoundaryProps"> & Omit<import('@ostack.tech/kform-react').ControllerOptions<any, import('@ostack.tech/kform-react').FormControllerState<any>>, "formManager"> & import('@ostack.tech/kform-react').FormOwnOptions<any, unknown> & Omit<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">, "onReset" | "onSubmit"> & {
+export declare const FormApp: import('react').ForwardRefExoticComponent<Pick<Omit<import('@ostack.tech/ui').RootProps & import('react').RefAttributes<HTMLDivElement>, "ref">, "reportError" | "errorReportingUrl" | "errorReportingMethod" | "encodeErrorReport" | "encodedErrorReportMimeType" | "errorReportingOptions" | "baseDocumentTitle" | "enableErrorReporting" | "documentTitleBaseSeparator" | "documentTitleBreadcrumbsSeparator" | "portalsContainer" | "tooltipsDelayDuration" | "tooltipsSkipDelayDuration" | "disableTooltipsHoverableContent" | "toastsLabel" | "toastsDuration" | "toastsSwipeDirection" | "toastsSwipeThreshold" | "toastViewportPosition" | "toastViewportHotkey" | "toastViewportLabel" | "toastViewportProps" | "errorBoundaryProps"> & Omit<import('@ostack.tech/kform-react').ControllerOptions<any, import('@ostack.tech/kform-react').FormControllerState<any>>, "formManager"> & import('@ostack.tech/kform-react').FormOwnOptions<any, unknown> & Omit<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">, "onReset" | "onSubmit"> & {
     /** Schema of the form. */
     schema: SchemaKt | Schema<any>;
     /** Title of the form. */

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

@@ -19,11 +19,13 @@ export type TableControlRowController<T = unknown> = Controller<T> & {
     index: number;
 };
 /** Column of a table control. */
-export interface TableControlColumn<T = unknown, TValue = any> extends Omit<DataTableColumn<T, TValue>, "subColumns" | "getValue" | "format" | "render" | "compare" | "filterable" | "sortable"> {
+export interface TableControlColumn<T = unknown, TValue = any> extends Omit<DataTableColumn<T, TValue>, "subColumns" | "getValue" | "format" | "render" | "compare" | "filterable" | "sortable" | "footer"> {
     /** Sub columns of this column. */
     subColumns?: TableControlColumns<T>;
     /** Function used to render the cell's content. */
     render?: (rowController: TableControlRowController<T>) => ReactNode;
+    /** Optional footer content to be rendered in the column footer. */
+    footer?: ReactNode;
 }
 /**
  * Pre-configured column used to display the index of each row. By default, it
@@ -37,7 +39,7 @@ export declare function tableControlIndexColumn<T = unknown, TValue = any>(overr
  * Pre-configured column used to display row actions. By default, it sticks to
  * the right of the table and renders the `TableControlRemoveRow` component.
  *
- * Its configuration can be overriden to show other actions, for example, an
+ * Its configuration can be overridden to show other actions, for example, an
  * edit button:
  *
  * ```tsx

package/dist/types/components/TopBar/TopBarContext.d.ts

@@ -0,0 +1,8 @@
+/** Value of the top bar context. */
+export interface TopBarContextValue {
+    topBarEl: HTMLElement | null;
+}
+/** Context of the top bar component. */
+export declare const TopBarContext: import('react').Context<TopBarContextValue | null>;
+/** Provides access to the top bar element within the context. */
+export declare function useTopBarElement(): HTMLElement | null;

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

@@ -1,2 +1,3 @@
 export * from './TopBar.tsx';
 export * from './TopBarActions.tsx';
+export { useTopBarElement } from './TopBarContext.tsx';

package/dist/types/index.d.ts

@@ -36,3 +36,4 @@ export * from './utils/useFormLoader.tsx';
 export * from './utils/useFormSaver.tsx';
 export * from './utils/useFormValidator.ts';
 export * from './utils/useRegisterControl.tsx';
+export * from './utils/useResetOnChange.tsx';

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

@@ -0,0 +1,98 @@
+import { Path, SealedValueEvent } from '@ostack.tech/kform';
+import { AlertDialogContentColor, ConfirmDialogOptions } from '@ostack.tech/ui';
+import { ReactNode } from 'react';
+/** Options of the reset confirmation dialog. */
+export interface ResetConfirmDialogOption extends ConfirmDialogOptions {
+    /** Message of the confirmation dialog. */
+    message: ReactNode;
+    /**
+     * Confirmation dialog content color.
+     *
+     * @default "warning"
+     */
+    color?: AlertDialogContentColor;
+}
+/** Options of the `useResetOnChange` hook. */
+export interface UseResetOnChangeOptions<T = unknown> {
+    /**
+     * Function which determines whether to reset the fields when the value
+     * changes. By default, fields are reset whenever the value changes.
+     *
+     * @param event Value event.
+     */
+    when?: (event: SealedValueEvent<T>) => boolean;
+    /**
+     * Fields in `toReset` that should be excluded from being reset (relative to
+     * the current path). This is useful when using wildcards in `toReset` and you
+     * want to exclude some of the fields that match the wildcard.
+     *
+     * E.g. `{ toReset: ["/a/*"], excludeFromReset: ["/a/b"] }` will reset all
+     * children of `/a` except `/a/b`.
+     */
+    exclude?: string | Path | (string | Path)[];
+    /**
+     * Confirmation dialog options. When provided, a confirmation dialog will be
+     * presented to the user before resetting the fields.
+     *
+     * If this option is **not** provided, the fields will be reset without
+     * confirmation.
+     */
+    confirmation?: ResetConfirmDialogOption;
+    /**
+     * Whether to set the fields as untouched when resetting.
+     *
+     * @default true
+     */
+    setUntouched?: boolean;
+    /**
+     * Whether to set the fields as pristine when resetting.
+     *
+     * @default true
+     */
+    setPristine?: boolean;
+}
+/** Event handler returned by the `useResetOnChange` hook. */
+export type UseResetOnChangeResult = (event: SealedValueEvent<any>) => Promise<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
+ * (according to the `when` function).
+ *
+ * Optionally requests user-confirmation via dialog if `confirmation` is
+ * provided.
+ *
+ * When using wildcards in `toReset`, certain fields may be excluded via
+ * `exclude`.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * function NoTransactionsControl() {
+ *   const handleOnChange = useResetOnChange("/transactions/*", {
+ *     when: ({ value }) => value,
+ *     confirmation: {
+ *       title: "Confirm no transactions",
+ *       message: (
+ *         <>
+ *           By checking this box, all fields in section “Transactions” will
+ *           be cleared. Are you sure you want to continue?
+ *         </>
+ *       ),
+ *       okText: "Confirm",
+ *     },
+ *   });
+ *
+ *   return (
+ *     <CheckboxControl
+ *       path="noTransactions"
+ *       onValueChange={handleOnChange}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param toReset Paths to reset up when the value changes (relative to the
+ *   current path). Wildcards in paths (`*` or `**`) are supported.
+ * @param options Hook options. See {@link UseResetOnChangeOptions}.
+ */
+export declare function useResetOnChange<T = unknown>(toReset: string | Path | (string | Path)[], { when, exclude, confirmation, setUntouched, setPristine, }?: UseResetOnChangeOptions<T>): UseResetOnChangeResult;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui-kform",
   "description": "Integration of ostack/UI with ostack/KForm.",
-  "version": "0.11.3",
+  "version": "0.12.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.11.3",
+    "@ostack.tech/ui": "~0.12.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/_utils.scss

@@ -5,3 +5,4 @@
 @forward "components/FormApp/FormApp-variables";
 @forward "components/FormPages/FormPages-variables";
 @forward "components/IssuesPanel/IssuesPanel-variables";
+@forward "components/TopBar/TopBar-variables";

package/scss/components/Annexes/_Annexes-variables.scss

@@ -3,6 +3,13 @@
 // Manager
 $annexes-manager-min-width: 200px !default;
 
+// Menu trigger
+$annexes-menu-trigger-height: 44px !default;
+$annexes-menu-trigger-open-z-index: calc(
+  var(--#{o-ui.$prefix}layer-z-index, 0) +
+    var(--#{o-ui.$prefix}z-index-dropdown) + 1
+) !default;
+
 // Tab issues
 $annexes-tab-issues-popover-button-icon-border-width: 1px !default;
 $annexes-tab-issues-popover-button-padding: calc(

package/scss/components/Annexes/_Annexes.scss

@@ -4,8 +4,6 @@
 @use "../../scss/base-variables" as *;
 
 .#{$prefix}annexes {
-  $tab-height: 44px;
-
   display: flex;
   flex-direction: column;
 
@@ -38,7 +36,7 @@
     margin-left: o-ui.spacing(-4);
     margin-right: o-ui.spacing(7);
     padding-top: o-ui.spacing(0.5);
-    height: $tab-height;
+    height: $annexes-menu-trigger-height;
   }
 
   &__tab-list-container {
@@ -47,7 +45,7 @@
   }
 
   &__menu-trigger {
-    height: $tab-height;
+    height: $annexes-menu-trigger-height;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     color: var(--#{o-ui.$prefix}primary-9) !important;
@@ -57,7 +55,7 @@
       border-bottom-color: transparent;
       background-color: var(--#{o-ui.$prefix}background-color) !important;
       position: relative;
-      z-index: o-ui.$z-index-dropdown + 1;
+      z-index: $annexes-menu-trigger-open-z-index;
     }
   }
 
@@ -158,7 +156,7 @@
   }
 
   &__tab-inner {
-    min-height: $tab-height;
+    min-height: $annexes-menu-trigger-height;
   }
 
   &__tab-text {

package/scss/components/FormPages/_FormPages-variables.scss

@@ -7,9 +7,6 @@ $form-pages-sidebar-border-radius: null !default;
 $form-pages-sidebar-background-color: var(--#{o-ui.$prefix}primary-a3) !default;
 $form-pages-sidebar-border-width: 1px !default;
 $form-pages-sidebar-border-color: var(--#{o-ui.$prefix}primary-4) !default;
-$form-pages-sidebar-z-index: calc(
-  var(--#{o-ui.$prefix}z-index-sticky) + 1
-) !default;
 
 // Sidebar item code
 $form-pages-sidebar-item-code-min-size: 20px;
@@ -49,9 +46,6 @@ $form-pages-sidebar-item-code-status-color: var(
 ) !default;
 
 // Select
-$form-pages-select-z-index: calc(
-  var(--#{o-ui.$prefix}z-index-sticky) + 2
-) !default;
 $form-pages-select-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !default;
 $form-pages-select-menu-background-color: var(
   --#{o-ui.$prefix}primary-2

package/scss/components/FormPages/_FormPages.scss

@@ -38,7 +38,6 @@
       var(--#{$prefix}form-app-base-sticky-top, 0px) +
         var(--#{$prefix}top-bar-height)
     );
-    z-index: $form-pages-sidebar-z-index;
 
     max-height: calc(100dvh - var(--#{$prefix}top-bar-height));
     overflow: auto;
@@ -90,7 +89,6 @@
       var(--#{$prefix}form-app-base-sticky-top, 0px) +
         var(--#{$prefix}top-bar-height)
     );
-    z-index: $form-pages-select-z-index;
     box-shadow: $form-pages-select-box-shadow;
   }
 
@@ -188,7 +186,6 @@
       var(--#{$prefix}form-app-base-sticky-top, 0px) +
         var(--#{$prefix}top-bar-height)
     );
-    z-index: o-ui.$z-index-sticky + 1;
 
     display: flex;
     align-items: center;
@@ -286,14 +283,6 @@
   }
 
   &__page-content {
-    position: sticky;
-    top: calc(
-      var(--#{$prefix}form-app-base-sticky-top, 0px) +
-        var(--#{$prefix}top-bar-height) +
-        var(--#{$prefix}form-pages-page-header-height)
-    );
-    z-index: o-ui.$z-index-sticky;
-
     padding: o-ui.spacing(4);
 
     @include o-ui.media-breakpoint-up(sm) {

package/scss/components/IssuesPanel/_IssuesPanel-variables.scss

@@ -3,7 +3,6 @@
 $issues-panel-margin-x: o-ui.spacing(4) !default;
 $issues-panel-padding-y: o-ui.spacing(3) !default;
 $issues-panel-padding-x: o-ui.spacing(4) !default;
-$issues-panel-z-index: o-ui.$z-index-sticky + 1 !default;
 
 $issues-panel-border-radius: o-ui.$card-border-radius o-ui.$card-border-radius 0
   0 !default;
@@ -19,7 +18,6 @@ $issues-panel-stuck-border-width-sm: null !default;
 // Issues panel header
 $issues-panel-header-padding-x: $issues-panel-padding-x !default;
 $issues-panel-header-padding-bottom: o-ui.spacing(2) !default;
-$issues-panel-header-z-index: o-ui.$z-index-sticky !default;
 $issues-panel-header-stuck-shadow-size: 8px !default;
 $issues-panel-header-stuck-shadow-color: rgba(0, 0, 0, 0.1) !default;
 $issues-panel-header-stuck-shadow-gradient:

package/scss/components/IssuesPanel/_IssuesPanel.scss

@@ -28,7 +28,6 @@
   &__container {
     position: sticky;
     bottom: 0;
-    z-index: $issues-panel-z-index;
     display: flex;
     justify-content: center;
     pointer-events: none;
@@ -77,7 +76,6 @@
     // Sticky
     position: sticky;
     top: 0;
-    z-index: $issues-panel-header-z-index;
 
     &[data-stuck]::before {
       content: "";

package/scss/components/TopBar/_TopBar-variables.scss

@@ -0,0 +1,13 @@
+@use "@ostack.tech/ui/scss/utils" as o-ui;
+@use "../../scss/base-variables" as *;
+
+$top-bar-top: var(--#{$prefix}form-app-base-sticky-top, 0px) !default;
+
+$top-bar-padding-top: o-ui.spacing(1) !default;
+$top-bar-padding-x: o-ui.spacing(1) !default;
+$top-bar-border-bottom-width: 2px !default;
+$top-bar-border-bottom-color: var(--#{o-ui.$prefix}primary-9) !default;
+$top-bar-background-color: var(--#{o-ui.$prefix}background-color) !default;
+
+// Actions
+$top-bar-actions-margin: 0 0 $top-bar-padding-top auto !default;

package/scss/components/TopBar/_TopBar.scss

@@ -1,23 +1,18 @@
 @use "@ostack.tech/ui/scss/utils" as o-ui;
+@use "TopBar-variables" as *;
 @use "../../scss/base-variables" as *;
 
 .#{$prefix}top-bar {
-  $annexes-menu-container: ".#{$prefix}annexes__menu-container";
-  $annexes-tab-list-root: ".#{$prefix}annexes__tab-list-root";
-  $annexes-tab: ".#{$prefix}annexes__tab";
-
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
 
   position: sticky;
-  top: var(--#{$prefix}form-app-base-sticky-top, 0px);
-  z-index: o-ui.$z-index-sticky + 3;
-
-  padding: o-ui.spacing(1) o-ui.spacing(1) 0;
-  border-bottom: 2px solid o-ui.$primary-9;
+  top: $top-bar-top;
 
-  background-color: var(--#{o-ui.$prefix}background-color);
+  padding: $top-bar-padding-top $top-bar-padding-x 0;
+  border-bottom: $top-bar-border-bottom-width solid $top-bar-border-bottom-color;
+  background-color: $top-bar-background-color;
 
   // TODO: Simplify this
   // Deal with double border (since the annex manager already comes with a
@@ -26,13 +21,13 @@
   // screens (e.g. 125% browser zoom, or 125% screen scaling in Windows), so we
   // instead remove the border completely from the manager, which forces us to
   // override the focus styles of the tabs to show a bottom border.
-  & #{$annexes-menu-container},
-  & #{$annexes-tab-list-root} {
+  & .#{$prefix}annexes__menu-container,
+  & .#{$prefix}annexes__tab-list-root {
     box-shadow: none;
     margin-bottom: 0;
   }
 
-  & #{$annexes-tab}:focus-visible:not(:disabled):not([data-disabled]) {
+  & .#{$prefix}annexes__tab:focus-visible:not(:disabled):not([data-disabled]) {
     box-shadow:
       inset -1px 0 0 0 o-ui.$neutral-12,
       inset 0 1px 0 0 o-ui.$neutral-12,
@@ -48,6 +43,6 @@
   }
 
   &__actions {
-    margin: 0 0 o-ui.spacing(1) auto;
+    margin: $top-bar-actions-margin;
   }
 }