@ostack.tech/ui-kform 0.10.5 → 0.11.1

package/dist/ostack-ui-kform.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { usePrefix as usePrefix$1, useControllableState, useLatestValues, combineEventHandlers, LocalizationProvider as LocalizationProvider$1, 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, useMediaBreakpointUp, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, useAlertDialog, DropdownMenuRadioItem, controlStatusToAccent, IconButton, Tab, boolDataAttr, TabList, combineAriaIds, useIsInTableCell, useDataTableColumnLabel, useOnFieldLabelChange, Checkbox, OptionsGroup, Option, CheckboxGroup, useDateTransformer, DateInput, DateRangeInput, usePrintClassNames, Input, Dialog, Tooltip, DialogTrigger, ControlAddon, Icon, DialogContent, DialogHeader, DialogTitle, DialogBody, Alert, Stack, Popover, PopoverTrigger, PopoverContent, useMeasure, Container, Select, MenuListItem, MenuList, StepContent, Step, StepList, Stepper, 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, PortalContext } from "@ostack.tech/ui";
+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, 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, usePrintClassNames, Input, Dialog, Tooltip, DialogTrigger, ControlAddon, Icon, DialogContent, DialogHeader, DialogTitle, DialogBody, Alert, Stack, Popover, PopoverTrigger, PopoverContent, useMeasure, 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, PortalContext } 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";
@@ -9,12 +9,12 @@ import { useShallow } from "zustand/react/shallow";
 import { shallow } from "zustand/shallow";
 import { supported, fileOpen, fileSave } from "browser-fs-access";
 import { addDays, min, max, parseISO, format } from "date-fns";
+import { faChevronUp, faChevronDown, faTrash, faFileLines, faDownload, faCircleQuestion, faArrowsToDot, faAnglesLeft, faAngleLeft, faAngleRight, faAnglesRight, faCircleCheck, faCircleExclamation, faTriangleExclamation, faFolderOpen, faPrint, faFloppyDisk, faCaretDown, faArrowRight, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faCircleCheck as faCircleCheck$1 } from "@fortawesome/free-regular-svg-icons";
 import { locale } from "./locales/en-GB.js";
 import { locale as locale2 } from "./locales/en-US.js";
 import { locale as locale3, locale as locale4 } from "./locales/fr-FR.js";
 import { locale as locale5, locale as locale6 } from "./locales/pt-PT.js";
-import { faChevronUp, faChevronDown, faTrash, faFileLines, faDownload, faCircleQuestion, faArrowsToDot, faAnglesLeft, faAngleLeft, faAngleRight, faAnglesRight, faCircleCheck, faCircleExclamation, faTriangleExclamation, faFolderOpen, faPrint, faFloppyDisk, faCaretDown, faArrowRight, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { faCircleCheck as faCircleCheck$1 } from "@fortawesome/free-regular-svg-icons";
 const DEFAULT_PREFIX_SUFFIX = "kform-";
 const defaultPrefixSuffixStore = createStore(() => ({
   defaultPrefixSuffix: DEFAULT_PREFIX_SUFFIX
@@ -2477,6 +2477,7 @@ function AnnexTab({ path }) {
           issuesDisplayMode === "inline" && hasIssues
         ),
         tabInnerProps: { className: prefix("annexes__tab-inner") },
+        tabTextProps: { className: prefix("annexes__tab-text") },
         "aria-describedby": hasIssues ? issueMessagesId : void 0,
         ref: tabRef,
         children: /* @__PURE__ */ jsxs(CurrentPath, { path, children: [
@@ -4195,7 +4196,7 @@ const FormPage = forwardRef(
                     prefix("form-pages__page-content"),
                     contentProps?.className
                   ),
-                  children: /* @__PURE__ */ jsx(Container, { fluid: "md", gutter: 0, ...containerProps, children: /* @__PURE__ */ jsx(ErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ jsx(
+                  children: /* @__PURE__ */ jsx(Container, { fluid: "xxl", gutter: 0, ...containerProps, children: /* @__PURE__ */ jsx(ErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ jsx(
                     Suspense,
                     {
                       fallback: /* @__PURE__ */ jsx(Spinner, { size: "xl", color: "primary" }),
@@ -4798,10 +4799,15 @@ function useFormStepState(path, selector) {
     (state) => selector(state.actions.getStepState(path))
   );
 }
-const FormStepContent = forwardRef(function FormStepContent2({
+const FormStep = forwardRef(function FormStepContent2({
   path,
+  // `FormStepObject` props
+  title: _title,
+  documentTitle: _documentTitle,
+  issuesPanelLabel: _issuesPanelLabel,
   disabled = false,
   readOnly = false,
+  issueMessages,
   errorBoundaryProps,
   className,
   children,
@@ -4826,11 +4832,12 @@ const FormStepContent = forwardRef(function FormStepContent2({
       className: cx(prefix("form-stepper__step-content"), className),
       ...otherProps,
       ref: forwardedRef,
-      children: /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? void 0, children: /* @__PURE__ */ jsx(FormAppStatus, { disabled, readOnly, children: /* @__PURE__ */ jsx(ErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Spinner, { size: "xl", color: "primary" }), children }) }) }) })
+      children: /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? void 0, children: /* @__PURE__ */ jsx(FormAppStatus, { disabled, readOnly, children: /* @__PURE__ */ jsx(FormAppIssueMessages, { issueMessages, children: /* @__PURE__ */ jsx(ErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Spinner, { size: "xl", color: "primary" }), children }) }) }) }) })
     }
   ) });
 });
-function FormStep({ path, index }) {
+const FormStepContent = FormStep;
+function FormStepButton({ path, index }) {
   const prefix = usePrefix();
   const deferredDisplayStatus = useFormStepState(
     path,
@@ -4859,7 +4866,7 @@ const FormStepList = forwardRef(function FormStepperSidebar({ className, ...othe
       ...otherProps,
       ref: forwardedRef,
       children: steps.map((step) => /* @__PURE__ */ jsx(
-        FormStep,
+        FormStepButton,
         {
           path: step.path,
           index: step.index
@@ -4927,11 +4934,20 @@ const FormStepper = forwardRef(function FormStepper2({
   allowForwardNavigationOnError,
   preventFocusOnError,
   className,
+  children,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
   const formManager = useFormManager();
   const absolutePath = useResolvedPath(path);
+  steps ??= Children.toArray(children).filter(
+    (child) => isValidElement(child) && child.type === FormStep
+  ).map((annex) => ({
+    path: annex.props.path,
+    title: annex.props.title,
+    documentTitle: annex.props.documentTitle,
+    issuesPanelLabel: annex.props.issuesPanelLabel
+  }));
   const resolvedSteps = useMemo(
     () => steps.map((step, i) => ({
       ...step,
@@ -4981,11 +4997,15 @@ const FormStepper = forwardRef(function FormStepper2({
         activeStep: activeIndex,
         onActiveStepChange: goToStep,
         ...otherProps,
-        ref: forwardedRef
+        ref: forwardedRef,
+        children
       }
     )
   ] }) });
 });
+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(
@@ -7408,7 +7428,6 @@ function TableControlCellRenderer({
   return render(controller);
 }
 const TableControlAddRowTrigger = forwardRef(function TableControlAddRowTrigger2({
-  defaultButtonText,
   onRowAdded,
   preferRightAlignment = true,
   showWhenReadOnly,
@@ -7421,7 +7440,6 @@ const TableControlAddRowTrigger = forwardRef(function TableControlAddRowTrigger2
 }, forwardedRef) {
   const prefix = usePrefix();
   const [locale7] = useLocale();
-  defaultButtonText ??= locale7.TableControlAddRowTrigger.defaultButtonText;
   const { printHidden } = usePrintClassNames();
   const { controller, size, maxRows } = useTableControlContext();
   const controlIsDisabled = useFormIsDisabled();
@@ -7435,25 +7453,40 @@ const TableControlAddRowTrigger = forwardRef(function TableControlAddRowTrigger2
   const shouldDisable = controller.useState(
     ({ initialized, exists }) => !initialized || !exists || controlIsDisabled || disabled || controlIsReadOnly || maxRows != null && size >= maxRows
   );
-  const As = Slot;
-  return (showWhenReadOnly || !controlIsReadOnly) && /* @__PURE__ */ jsx(
-    As,
-    {
-      className: cx(
-        prefix("table-control__add-row-trigger"),
-        showWhilePrinting || printHidden,
-        className
-      ),
-      disabled: shouldDisable,
-      onClick: combineEventHandlers(onClick, handleClick, {
-        checkDefaultPrevented: true
-      }),
-      ...otherProps,
-      "data-prefer-right-alignment": boolDataAttr(preferRightAlignment),
-      ref: forwardedRef,
-      children: children ?? /* @__PURE__ */ jsx(Button, { icon: faPlus, color: "primary", children: defaultButtonText })
-    }
-  );
+  if (!showWhenReadOnly && controlIsReadOnly) {
+    return null;
+  }
+  const commonProps = {
+    className: cx(
+      prefix("table-control__add-row-trigger"),
+      showWhilePrinting || printHidden,
+      className
+    ),
+    disabled: shouldDisable,
+    onClick: combineEventHandlers(onClick, handleClick, {
+      checkDefaultPrevented: true
+    }),
+    "data-prefer-right-alignment": boolDataAttr(preferRightAlignment)
+  };
+  if (children === void 0) {
+    const {
+      defaultButtonText,
+      label = defaultButtonText ?? locale7.TableControlAddRowTrigger.label,
+      ...buttonProps
+    } = otherProps;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: faPlus,
+        color: "primary",
+        ...buttonProps,
+        ...commonProps,
+        ref: forwardedRef,
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Slot, { ...otherProps, ...commonProps, ref: forwardedRef, children });
 });
 function useTableControlApiRef() {
   return useRef(null);
@@ -7462,7 +7495,6 @@ const TableControlRemoveRowTrigger = forwardRef(function TableControlRemoveRowTr
   showConfirmation,
   onConfirmRowRemoval,
   onRowRemoved,
-  defaultButtonLabel,
   confirmDialogTitle,
   confirmDialogMessage,
   confirmDialogOkText,
@@ -7474,7 +7506,6 @@ const TableControlRemoveRowTrigger = forwardRef(function TableControlRemoveRowTr
   ...otherProps
 }, forwardedRef) {
   const [locale7] = useLocale();
-  defaultButtonLabel ??= locale7.TableControlRemoveRowTrigger.defaultButtonLabel;
   confirmDialogTitle ??= locale7.TableControlRemoveRowTrigger.confirmDialogTitle;
   confirmDialogMessage ??= locale7.TableControlRemoveRowTrigger.confirmDialogMessage;
   confirmDialogOkText ??= locale7.TableControlRemoveRowTrigger.confirmDialogOkText;
@@ -7504,28 +7535,36 @@ const TableControlRemoveRowTrigger = forwardRef(function TableControlRemoveRowTr
     setLatestInteraction(controller.getState().path);
     onRowRemoved?.();
   };
-  const As = Slot;
-  return (showWhenReadOnly || !controlIsReadOnly) && /* @__PURE__ */ jsx(
-    As,
-    {
-      ...otherProps,
-      disabled: !initialized || !exists || controlIsDisabled || disabled || controlIsReadOnly || removing,
-      onClick: combineEventHandlers(onClick, handleClick, {
-        checkDefaultPrevented: true
-      }),
-      ref: forwardedRef,
-      children: children ?? /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          icon: faTrash,
-          label: defaultButtonLabel,
-          color: "danger",
-          loading: !initialized || removing,
-          circle: true
-        }
-      )
-    }
-  );
+  if (!showWhenReadOnly && controlIsReadOnly) {
+    return null;
+  }
+  const commonProps = {
+    disabled: !initialized || !exists || controlIsDisabled || disabled || controlIsReadOnly || removing,
+    onClick: combineEventHandlers(onClick, handleClick, {
+      checkDefaultPrevented: true
+    })
+  };
+  if (children === void 0) {
+    const {
+      defaultButtonLabel,
+      label = defaultButtonLabel ?? locale7.TableControlRemoveRowTrigger.label,
+      ...iconButtonProps
+    } = otherProps;
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: faTrash,
+        label,
+        color: "danger",
+        loading: !initialized || removing,
+        circle: true,
+        ...iconButtonProps,
+        ...commonProps,
+        ref: forwardedRef
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Slot, { ...otherProps, ...commonProps, ref: forwardedRef, children });
 });
 function tableControlIndexColumn(overrides) {
   return {
@@ -7826,10 +7865,14 @@ export {
   FormPageRegistrar,
   FormPages,
   FormPagesNavigation,
+  FormStep,
   FormStepContent,
   FormStepList,
   FormStepRegistrar,
   FormStepper,
+  FormStepperFinishTrigger,
+  FormStepperNextTrigger,
+  FormStepperPreviousTrigger,
   IssueAlert,
   IssueMessages,
   IssuesPanel,