@jsenv/navi 0.6.2 → 0.7.1

package/dist/jsenv_navi.js

@@ -721,6 +721,9 @@ const pxProperties = [
   "borderTopRightRadius",
   "borderBottomLeftRadius",
   "borderBottomRightRadius",
+  "gap",
+  "rowGap",
+  "columnGap",
 ];
 
 // Properties that need deg units
@@ -840,13 +843,67 @@ const normalizeNumber = (value, context, unit, propertyName) => {
 
 // Normalize styles for DOM application
 const normalizeStyles = (styles, context = "js") => {
+  if (typeof styles === "string") {
+    styles = parseStyleString(styles);
+    return styles;
+  }
   const normalized = {};
-  for (const [key, value] of Object.entries(styles)) {
+  for (const key of Object.keys(styles)) {
+    const value = styles[key];
     normalized[key] = normalizeStyle(value, key, context);
   }
   return normalized;
 };
 
+/**
+ * Parses a CSS style string into a style object.
+ * Handles CSS properties with proper camelCase conversion.
+ *
+ * @param {string} styleString - CSS style string like "color: red; font-size: 14px;"
+ * @returns {object} Style object with camelCase properties
+ */
+const parseStyleString = (styleString, context = "js") => {
+  const style = {};
+
+  if (!styleString || typeof styleString !== "string") {
+    return style;
+  }
+
+  // Split by semicolon and process each declaration
+  const declarations = styleString.split(";");
+
+  for (let declaration of declarations) {
+    declaration = declaration.trim();
+    if (!declaration) continue;
+
+    const colonIndex = declaration.indexOf(":");
+    if (colonIndex === -1) continue;
+
+    const property = declaration.slice(0, colonIndex).trim();
+    const value = declaration.slice(colonIndex + 1).trim();
+
+    if (property && value) {
+      // CSS custom properties (starting with --) should NOT be converted to camelCase
+      if (property.startsWith("--")) {
+        style[property] = normalizeStyle(value, property, context);
+      } else {
+        // Convert kebab-case to camelCase (e.g., "font-size" -> "fontSize")
+        const camelCaseProperty = property.replace(
+          /-([a-z])/g,
+          (match, letter) => letter.toUpperCase(),
+        );
+        style[camelCaseProperty] = normalizeStyle(
+          value,
+          camelCaseProperty,
+          context,
+        );
+      }
+    }
+  }
+
+  return style;
+};
+
 // Convert transform object to CSS string
 const stringifyCSSTransform = (transformObj) => {
   const transforms = [];
@@ -1007,15 +1064,28 @@ const parseSimple2DMatrix = (a, b, c, d, e, f) => {
 };
 
 // Merge two style objects, handling special cases like transform
-const mergeStyles = (stylesA, stylesB) => {
-  const result = { ...stylesA };
-  for (const key of Object.keys(stylesB)) {
-    if (key === "transform") {
-      result[key] = mergeOneStyle(stylesA[key], stylesB[key], key);
+const mergeStyles = (stylesA, stylesB, context = "js") => {
+  if (!stylesA) {
+    return normalizeStyles(stylesB, context);
+  }
+  if (!stylesB) {
+    return normalizeStyles(stylesA, context);
+  }
+  const result = {};
+  const aKeys = Object.keys(stylesA);
+  const bKeyToVisitSet = new Set(Object.keys(stylesB));
+  for (const aKey of aKeys) {
+    const bHasKey = bKeyToVisitSet.has(aKey);
+    if (bHasKey) {
+      bKeyToVisitSet.delete(aKey);
+      result[aKey] = mergeOneStyle(stylesA[aKey], stylesB[aKey], aKey, context);
     } else {
-      result[key] = stylesB[key];
+      result[aKey] = normalizeStyle(stylesA[aKey], aKey, context);
     }
   }
+  for (const bKey of bKeyToVisitSet) {
+    result[bKey] = normalizeStyle(stylesB[bKey], bKey, context);
+  }
   return result;
 };
 
@@ -1177,9 +1247,9 @@ const createStyleController = (name = "anonymous") => {
       throw new Error("styles must be an object");
     }
 
-    const normalizedStylesToSet = normalizeStyles(stylesToSet, "js");
     const elementData = elementWeakMap.get(element);
     if (!elementData) {
+      const normalizedStylesToSet = normalizeStyles(stylesToSet, "js");
       const animation = createAnimationForStyles(
         element,
         normalizedStylesToSet,
@@ -1194,7 +1264,7 @@ const createStyleController = (name = "anonymous") => {
     }
 
     const { styles, animation } = elementData;
-    const mergedStyles = mergeStyles(styles, normalizedStylesToSet);
+    const mergedStyles = mergeStyles(styles, stylesToSet);
     elementData.styles = mergedStyles;
     updateAnimationStyles(animation, mergedStyles);
   };
@@ -11735,7 +11805,7 @@ const openCallout = (
     level = "warning",
     onClose,
     closeOnClickOutside = level === "info",
-    hideErrorStack,
+    showErrorStack,
     debug = false,
   } = {},
 ) => {
@@ -11803,7 +11873,7 @@ const openCallout = (
     if (Error.isError(newMessage)) {
       const error = newMessage;
       newMessage = error.message;
-      if (!hideErrorStack && error.stack) {
+      if (showErrorStack && error.stack) {
         newMessage += `<pre class="navi_callout_error_stack">${escapeHtml(String(error.stack))}</pre>`;
       }
     }
@@ -13766,6 +13836,7 @@ const useExecuteAction = (
   elementRef,
   {
     errorEffect = "show_validation_message", // "show_validation_message" or "throw"
+    errorMapping,
   } = {},
 ) => {
   // see https://medium.com/trabe/catching-asynchronous-errors-in-react-using-error-boundaries-5e8a5fd7b971
@@ -13783,7 +13854,8 @@ const useExecuteAction = (
   const validationMessageTargetRef = useRef(null);
   const addErrorMessage = (error) => {
     const validationMessageTarget = validationMessageTargetRef.current;
-    addCustomMessage(validationMessageTarget, "action_error", error, {
+    const errorMapped = errorMapping ? errorMapping(error) : error;
+    addCustomMessage(validationMessageTarget, "action_error", errorMapped, {
       // This error should not prevent <form> submission
       // so whenever user tries to submit the form the error is cleared
       // (Hitting enter key, clicking on submit button, etc. would allow to re-submit the form in error state)
@@ -18508,160 +18580,108 @@ const useConstraints = (elementRef, constraints, targetSelector) => {
 
 /**
  * Merges a component's base style with style received from props.
+ * Automatically normalizes style values (e.g., adds "px" units where needed).
  *
  * ```jsx
  * const MyButton = ({ style, children }) => (
- *   <button style={withPropsStyle({ padding: '10px' }, style)}>
+ *   <button style={withPropsStyle({ padding: 10 }, style)}>
  *     {children}
  *   </button>
  * );
  *
  * // Usage:
- * <MyButton style={{ color: 'red', fontSize: '14px' }} />
+ * <MyButton style={{ color: 'red', fontSize: 14 }} />
  * <MyButton style="color: blue; margin: 5px;" />
  * <MyButton /> // Just base styles
  * ```
  *
  * @param {string|object} baseStyle - The component's base style (string or object)
  * @param {string|object} [styleFromProps] - Additional style from props (optional)
- * @returns {object} The merged style object
+ * @returns {object} The merged and normalized style object
  */
 const withPropsStyle = (baseStyle, styleFromProps) => {
-  if (!styleFromProps) {
-    return baseStyle;
-  }
-  if (!baseStyle) {
-    return styleFromProps;
-  }
-
-  // Parse base style to object if it's a string
-  const parsedBaseStyle =
-    typeof baseStyle === "string"
-      ? parseStyleString(baseStyle)
-      : baseStyle || {};
-  // Parse props style to object if it's a string
-  const parsedPropsStyle =
-    typeof styleFromProps === "string"
-      ? parseStyleString(styleFromProps)
-      : styleFromProps;
-  // Merge styles with props taking priority
-  return { ...parsedBaseStyle, ...parsedPropsStyle };
+  return mergeStyles(baseStyle, styleFromProps, "css");
 };
 
-/**
- * Parses a CSS style string into a style object.
- * Handles CSS properties with proper camelCase conversion.
- *
- * @param {string} styleString - CSS style string like "color: red; font-size: 14px;"
- * @returns {object} Style object with camelCase properties
- */
-const parseStyleString = (styleString) => {
+const consumeSpacingProps = props => {
   const style = {};
-
-  if (!styleString || typeof styleString !== "string") {
-    return style;
-  }
-
-  // Split by semicolon and process each declaration
-  const declarations = styleString.split(";");
-
-  for (let declaration of declarations) {
-    declaration = declaration.trim();
-    if (!declaration) continue;
-
-    const colonIndex = declaration.indexOf(":");
-    if (colonIndex === -1) continue;
-
-    const property = declaration.slice(0, colonIndex).trim();
-    const value = declaration.slice(colonIndex + 1).trim();
-
-    if (property && value) {
-      // CSS custom properties (starting with --) should NOT be converted to camelCase
-      if (property.startsWith("--")) {
-        style[property] = value;
-      } else {
-        // Convert kebab-case to camelCase (e.g., "font-size" -> "fontSize")
-        const camelCaseProperty = property.replace(
-          /-([a-z])/g,
-          (match, letter) => letter.toUpperCase(),
-        );
-        style[camelCaseProperty] = value;
-      }
+  {
+    const margin = props.margin;
+    const marginX = props.marginX;
+    const marginY = props.marginY;
+    const marginLeft = props.marginLeft;
+    const marginRight = props.marginRight;
+    const marginTop = props.marginTop;
+    const marginBottom = props.marginBottom;
+    delete props.margin;
+    delete props.marginX;
+    delete props.marginY;
+    delete props.marginLeft;
+    delete props.marginRight;
+    delete props.marginTop;
+    delete props.marginBottom;
+    if (margin !== undefined) {
+      style.margin = margin;
+    }
+    if (marginLeft !== undefined) {
+      style.marginLeft = marginLeft;
+    } else if (marginX !== undefined) {
+      style.marginLeft = marginX;
+    }
+    if (marginRight !== undefined) {
+      style.marginRight = marginRight;
+    } else if (marginX !== undefined) {
+      style.marginRight = marginX;
+    }
+    if (marginTop !== undefined) {
+      style.marginTop = marginTop;
+    } else if (marginY !== undefined) {
+      style.marginTop = marginY;
+    }
+    if (marginBottom !== undefined) {
+      style.marginBottom = marginBottom;
+    } else if (marginY !== undefined) {
+      style.marginBottom = marginY;
     }
   }
-
-  return style;
-};
-
-const consumeSpacingProps = props => {
-  const consume = name => {
-    if (Object.hasOwn(props, name)) {
-      const value = props[name];
-      delete props[name];
-      return value;
+  {
+    const padding = props.padding;
+    const paddingX = props.paddingX;
+    const paddingY = props.paddingY;
+    const paddingLeft = props.paddingLeft;
+    const paddingRight = props.paddingRight;
+    const paddingTop = props.paddingTop;
+    const paddingBottom = props.paddingBottom;
+    delete props.padding;
+    delete props.paddingX;
+    delete props.paddingY;
+    delete props.paddingLeft;
+    delete props.paddingRight;
+    delete props.paddingTop;
+    delete props.paddingBottom;
+    if (padding !== undefined) {
+      style.padding = padding;
+    }
+    if (paddingLeft !== undefined) {
+      style.paddingLeft = paddingLeft;
+    } else if (paddingX !== undefined) {
+      style.paddingLeft = paddingX;
+    }
+    if (paddingRight !== undefined) {
+      style.paddingRight = paddingRight;
+    } else if (paddingX !== undefined) {
+      style.paddingRight = paddingX;
+    }
+    if (paddingTop !== undefined) {
+      style.paddingTop = paddingTop;
+    } else if (paddingY !== undefined) {
+      style.paddingTop = paddingY;
+    }
+    if (paddingBottom !== undefined) {
+      style.paddingBottom = paddingBottom;
+    } else if (paddingY !== undefined) {
+      style.paddingBottom = paddingY;
     }
-    return undefined;
-  };
-  const margin = consume("margin");
-  const marginX = consume("marginX");
-  const marginY = consume("marginY");
-  const marginLeft = consume("marginLeft");
-  const marginRight = consume("marginRight");
-  const marginTop = consume("marginTop");
-  const marginBottom = consume("marginBottom");
-  const style = {};
-  if (margin !== undefined) {
-    style.margin = margin;
-  }
-  if (marginLeft !== undefined) {
-    style.marginLeft = marginLeft;
-  } else if (marginX !== undefined) {
-    style.marginLeft = marginX;
-  }
-  if (marginRight !== undefined) {
-    style.marginRight = marginRight;
-  } else if (marginX !== undefined) {
-    style.marginRight = marginX;
-  }
-  if (marginTop !== undefined) {
-    style.marginTop = marginTop;
-  } else if (marginY !== undefined) {
-    style.marginTop = marginY;
-  }
-  if (marginBottom !== undefined) {
-    style.marginBottom = marginBottom;
-  } else if (marginY !== undefined) {
-    style.marginBottom = marginY;
-  }
-  const padding = consume("padding");
-  const paddingX = consume("paddingX");
-  const paddingY = consume("paddingY");
-  const paddingLeft = consume("paddingLeft");
-  const paddingRight = consume("paddingRight");
-  const paddingTop = consume("paddingTop");
-  const paddingBottom = consume("paddingBottom");
-  if (padding !== undefined) {
-    style.padding = padding;
-  }
-  if (paddingLeft !== undefined) {
-    style.paddingLeft = paddingLeft;
-  } else if (paddingX !== undefined) {
-    style.paddingLeft = paddingX;
-  }
-  if (paddingRight !== undefined) {
-    style.paddingRight = paddingRight;
-  } else if (paddingX !== undefined) {
-    style.paddingRight = paddingX;
-  }
-  if (paddingTop !== undefined) {
-    style.paddingTop = paddingTop;
-  } else if (paddingY !== undefined) {
-    style.paddingTop = paddingY;
-  }
-  if (paddingBottom !== undefined) {
-    style.paddingBottom = paddingBottom;
-  } else if (paddingY !== undefined) {
-    style.paddingBottom = paddingY;
   }
   return style;
 };
@@ -21352,6 +21372,153 @@ const Editable = forwardRef((props, ref) => {
   });
 });
 
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  .navi_flex_row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0;
+  }
+
+  .navi_flex_column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+  }
+
+  .navi_flex_item {
+    flex-shrink: 0;
+  }
+`;
+const FlexDirectionContext = createContext();
+const FlexRow = ({
+  alignY,
+  gap,
+  style,
+  children,
+  ...rest
+}) => {
+  const innerStyle = withPropsStyle({
+    alignItems: alignY,
+    gap,
+    ...consumeSpacingProps(rest)
+  }, style);
+  return jsx("div", {
+    ...rest,
+    className: "navi_flex_row",
+    style: innerStyle,
+    children: jsx(FlexDirectionContext.Provider, {
+      value: "row",
+      children: children
+    })
+  });
+};
+const FlexColumn = ({
+  alignX,
+  gap,
+  style,
+  children,
+  ...rest
+}) => {
+  const innerStyle = withPropsStyle({
+    alignItems: alignX,
+    gap,
+    ...consumeSpacingProps(rest)
+  }, style);
+  return jsx("div", {
+    ...rest,
+    className: "navi_flex_column",
+    style: innerStyle,
+    children: jsx(FlexDirectionContext.Provider, {
+      value: "column",
+      children: children
+    })
+  });
+};
+const useConsumAlignProps = props => {
+  const flexDirection = useContext(FlexDirectionContext);
+  const alignX = props.alignX;
+  const alignY = props.alignY;
+  delete props.alignX;
+  delete props.alignY;
+  const style = {};
+  if (flexDirection === "row") {
+    // In row direction: alignX controls justify-content, alignY controls align-self
+    // Default alignY is "center" from CSS, so only set alignSelf when different
+    if (alignY !== undefined && alignY !== "center") {
+      style.alignSelf = alignY;
+    }
+    // For row, alignX uses auto margins for positioning
+    // NOTE: Auto margins only work effectively for positioning individual items.
+    // When multiple adjacent items have the same auto margin alignment (e.g., alignX="end"),
+    // only the first item will be positioned as expected because subsequent items
+    // will be positioned relative to the previous item's margins, not the container edge.
+    if (alignX !== undefined) {
+      if (alignX === "start") {
+        style.marginRight = "auto";
+      } else if (alignX === "end") {
+        style.marginLeft = "auto";
+      } else if (alignX === "center") {
+        style.marginLeft = "auto";
+        style.marginRight = "auto";
+      }
+    }
+  } else if (flexDirection === "column") {
+    // In column direction: alignX controls align-self, alignY uses auto margins
+    // Default alignX is "center" from CSS, so only set alignSelf when different
+    if (alignX !== undefined && alignX !== "center") {
+      style.alignSelf = alignX;
+    }
+    // For column, alignY uses auto margins for positioning
+    // NOTE: Same auto margin limitation applies - multiple adjacent items with
+    // the same alignY won't all position relative to container edges.
+    if (alignY !== undefined) {
+      if (alignY === "start") {
+        style.marginBottom = "auto";
+      } else if (alignY === "end") {
+        style.marginTop = "auto";
+      } else if (alignY === "center") {
+        style.marginTop = "auto";
+        style.marginBottom = "auto";
+      }
+    }
+  }
+  return style;
+};
+const FlexItem = ({
+  alignX,
+  alignY,
+  grow,
+  shrink,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const flexDirection = useContext(FlexDirectionContext);
+  if (!flexDirection) {
+    console.warn("FlexItem must be used within a FlexRow or FlexColumn component.");
+  }
+  const innerClassName = withPropsClassName("navi_flex_item", className);
+  const alignStyle = useConsumAlignProps({
+    alignX,
+    alignY
+  });
+  const innerStyle = withPropsStyle({
+    flexGrow: grow ? 1 : undefined,
+    flexShrink: shrink ? 1 : undefined,
+    ...consumeSpacingProps(rest),
+    ...alignStyle
+  }, style);
+  return jsx("div", {
+    ...rest,
+    className: innerClassName,
+    style: innerStyle,
+    children: children
+  });
+};
+
 const useFormEvents = (
   elementRef,
   {
@@ -21573,7 +21740,8 @@ const ButtonBasic = forwardRef((props, ref) => {
     autoFocus,
     // visual
     appearance = "navi",
-    alignX = "start",
+    alignX,
+    alignY,
     discrete,
     className,
     style,
@@ -21599,13 +21767,9 @@ const ButtonBasic = forwardRef((props, ref) => {
   const innerClassName = withPropsClassName(appearance === "navi" ? "navi_button" : undefined, className);
   const innerStyle = withPropsStyle({
     ...consumeSpacingProps(rest),
-    ...(alignX === "start" ? {} : alignX === "center" ? {
-      alignSelf: "center",
-      marginLeft: "auto",
-      marginRight: "auto"
-    } : {
-      alignSelf: "end",
-      marginLeft: "auto"
+    ...useConsumAlignProps({
+      alignX,
+      alignY
     })
   }, style);
   return jsx("button", {
@@ -22171,6 +22335,7 @@ const FormWithAction = forwardRef((props, ref) => {
     method,
     actionErrorEffect = "show_validation_message",
     // "show_validation_message" or "throw"
+    errorMapping,
     onActionPrevented,
     onActionStart,
     onActionAbort,
@@ -22184,7 +22349,8 @@ const FormWithAction = forwardRef((props, ref) => {
   useImperativeHandle(ref, () => innerRef.current);
   const [actionBoundToUIState] = useActionBoundToOneParam(action, uiState);
   const executeAction = useExecuteAction(innerRef, {
-    errorEffect: actionErrorEffect
+    errorEffect: actionErrorEffect,
+    errorMapping
   });
   const {
     actionPending,
@@ -28212,4 +28378,4 @@ const useDependenciesDiff = (inputs) => {
   return diffRef.current;
 };
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Button, Checkbox, CheckboxList, Col, Colgroup, Details, Editable, ErrorBoundaryContext, FontSizedSvg, Form, Icon, IconAndText, Input, Label, Link, LinkWithIcon, Overflow, Radio, RadioList, Route, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, Select, SelectionContext, Spacing, SummaryMarker, Tab, TabList, Table, TableCell, Tbody, Text, TextAndCount, Thead, Tr, UITransition, actionIntegratedVia, addCustomMessage, createAction, createSelectionKeyboardShortcuts, createUniqueValueConstraint, defineRoutes, enableDebugActions, enableDebugOnDocumentLoading, goBack, goForward, goTo, isCellSelected, isColumnSelected, isRowSelected, openCallout, rawUrlPart, reload, removeCustomMessage, rerunActions, resource, setBaseUrl, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useCellsAndColumns, useDependenciesDiff, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, valueInLocalStorage };
+export { ActionRenderer, ActiveKeyboardShortcuts, Button, Checkbox, CheckboxList, Col, Colgroup, Details, Editable, ErrorBoundaryContext, FlexColumn, FlexItem, FlexRow, FontSizedSvg, Form, Icon, IconAndText, Input, Label, Link, LinkWithIcon, Overflow, Radio, RadioList, Route, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, Select, SelectionContext, Spacing, SummaryMarker, Tab, TabList, Table, TableCell, Tbody, Text, TextAndCount, Thead, Tr, UITransition, actionIntegratedVia, addCustomMessage, createAction, createSelectionKeyboardShortcuts, createUniqueValueConstraint, defineRoutes, enableDebugActions, enableDebugOnDocumentLoading, goBack, goForward, goTo, isCellSelected, isColumnSelected, isRowSelected, openCallout, rawUrlPart, reload, removeCustomMessage, rerunActions, resource, setBaseUrl, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useCellsAndColumns, useDependenciesDiff, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, valueInLocalStorage };

package/index.js

@@ -93,6 +93,11 @@ export { TextAndCount } from "./src/components/text/text_and_count.jsx";
 // Callout, dialogs, ...
 export { openCallout } from "./src/components/callout/callout.js";
 // Layout
+export {
+  FlexColumn,
+  FlexItem,
+  FlexRow,
+} from "./src/components/layout/flex.jsx";
 export { Spacing } from "./src/components/layout/spacing.jsx";
 
 // Validation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@jsenv/dom": "0.5.0",
+    "@jsenv/dom": "0.5.1",
     "@jsenv/humanize": "1.6.0"
   },
   "devDependencies": {

package/src/components/action_execution/use_execute_action.js

@@ -11,6 +11,7 @@ export const useExecuteAction = (
   elementRef,
   {
     errorEffect = "show_validation_message", // "show_validation_message" or "throw"
+    errorMapping,
   } = {},
 ) => {
   // see https://medium.com/trabe/catching-asynchronous-errors-in-react-using-error-boundaries-5e8a5fd7b971
@@ -28,7 +29,8 @@ export const useExecuteAction = (
   const validationMessageTargetRef = useRef(null);
   const addErrorMessage = (error) => {
     const validationMessageTarget = validationMessageTargetRef.current;
-    addCustomMessage(validationMessageTarget, "action_error", error, {
+    const errorMapped = errorMapping ? errorMapping(error) : error;
+    addCustomMessage(validationMessageTarget, "action_error", errorMapped, {
       // This error should not prevent <form> submission
       // so whenever user tries to submit the form the error is cleared
       // (Hitting enter key, clicking on submit button, etc. would allow to re-submit the form in error state)

package/src/components/callout/callout.js

@@ -48,7 +48,7 @@ export const openCallout = (
     level = "warning",
     onClose,
     closeOnClickOutside = level === "info",
-    hideErrorStack,
+    showErrorStack,
     debug = false,
   } = {},
 ) => {
@@ -116,7 +116,7 @@ export const openCallout = (
     if (Error.isError(newMessage)) {
       const error = newMessage;
       newMessage = error.message;
-      if (!hideErrorStack && error.stack) {
+      if (showErrorStack && error.stack) {
         newMessage += `<pre class="navi_callout_error_stack">${escapeHtml(String(error.stack))}</pre>`;
       }
     }