@jsenv/navi 0.6.0 → 0.6.2

package/dist/jsenv_navi.js

@@ -18593,60 +18593,75 @@ const parseStyleString = (styleString) => {
   return style;
 };
 
-const getStyleForSpacingProps = ({
-  margin,
-  marginX,
-  marginY,
-  marginLeft,
-  marginTop,
-  marginBottom,
-  marginRight,
-  padding,
-  paddingX,
-  paddingY,
-  paddingLeft,
-  paddingTop,
-  paddingBottom,
-  paddingRight
-}) => {
+const consumeSpacingProps = props => {
+  const consume = name => {
+    if (Object.hasOwn(props, name)) {
+      const value = props[name];
+      delete props[name];
+      return value;
+    }
+    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;
   }
-  const effectiveMarginLeft = marginLeft ?? marginX;
-  const effectiveMarginRight = marginRight ?? marginX;
-  const effectiveMarginTop = marginTop ?? marginY;
-  const effectiveMarginBottom = marginBottom ?? marginY;
-  if (effectiveMarginLeft !== undefined) {
-    style.marginLeft = effectiveMarginLeft;
-  }
-  if (effectiveMarginRight !== undefined) {
-    style.marginRight = effectiveMarginRight;
-  }
-  if (effectiveMarginTop !== undefined) {
-    style.marginTop = effectiveMarginTop;
-  }
-  if (effectiveMarginBottom !== undefined) {
-    style.marginBottom = effectiveMarginBottom;
-  }
+  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;
   }
-  const effectivePaddingLeft = paddingLeft ?? paddingX;
-  const effectivePaddingRight = paddingRight ?? paddingX;
-  const effectivePaddingTop = paddingTop ?? paddingY;
-  const effectivePaddingBottom = paddingBottom ?? paddingY;
-  if (effectivePaddingLeft !== undefined) {
-    style.paddingLeft = effectivePaddingLeft;
+  if (paddingLeft !== undefined) {
+    style.paddingLeft = paddingLeft;
+  } else if (paddingX !== undefined) {
+    style.paddingLeft = paddingX;
   }
-  if (effectivePaddingRight !== undefined) {
-    style.paddingRight = effectivePaddingRight;
+  if (paddingRight !== undefined) {
+    style.paddingRight = paddingRight;
+  } else if (paddingX !== undefined) {
+    style.paddingRight = paddingX;
   }
-  if (effectivePaddingTop !== undefined) {
-    style.paddingTop = effectivePaddingTop;
+  if (paddingTop !== undefined) {
+    style.paddingTop = paddingTop;
+  } else if (paddingY !== undefined) {
+    style.paddingTop = paddingY;
   }
-  if (effectivePaddingBottom !== undefined) {
-    style.paddingBottom = effectivePaddingBottom;
+  if (paddingBottom !== undefined) {
+    style.paddingBottom = paddingBottom;
+  } else if (paddingY !== undefined) {
+    style.paddingBottom = paddingY;
   }
   return style;
 };
@@ -18655,8 +18670,9 @@ const Spacing = ({
   children,
   ...rest
 }) => {
-  const styleForSpacing = getStyleForSpacingProps(rest);
+  const styleForSpacing = consumeSpacingProps(rest);
   return jsx("div", {
+    ...rest,
     style: withPropsStyle(styleForSpacing, style),
     children: children
   });
@@ -20217,7 +20233,7 @@ const NaviCheckbox = ({
     ...(accentColor ? {
       "--accent-color": accentColor
     } : {}),
-    ...getStyleForSpacingProps(rest)
+    ...consumeSpacingProps(rest)
   }, style);
   return jsxs("div", {
     ...rest,
@@ -20642,7 +20658,7 @@ const NaviRadio = ({
     ...(accentColor ? {
       "--accent-color": accentColor
     } : {}),
-    ...getStyleForSpacingProps(rest)
+    ...consumeSpacingProps(rest)
   }, style);
   return jsxs("span", {
     ...rest,
@@ -20863,7 +20879,7 @@ const InputTextualBasic = forwardRef((props, ref) => {
   const innerStyle = withPropsStyle({
     width,
     height,
-    ...getStyleForSpacingProps(rest)
+    ...consumeSpacingProps(rest)
   }, style);
   const inputTextual = jsx("input", {
     ...rest,
@@ -21544,11 +21560,6 @@ const Button = forwardRef((props, ref) => {
     WithActionInsideForm: ButtonWithActionInsideForm
   });
 });
-const alignXMapping = {
-  start: undefined,
-  center: "center",
-  end: "flex-end"
-};
 const ButtonBasic = forwardRef((props, ref) => {
   const contextLoading = useContext(LoadingContext);
   const contextLoadingElement = useContext(LoadingElementContext);
@@ -21585,15 +21596,23 @@ const ButtonBasic = forwardRef((props, ref) => {
   } else {
     buttonChildren = children;
   }
-  const innerStyle = {
-    ...getStyleForSpacingProps(rest),
-    "align-self": alignXMapping[alignX]
-  };
+  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"
+    })
+  }, style);
   return jsx("button", {
     ...rest,
     ref: innerRef,
-    className: withPropsClassName(appearance === "navi" ? "navi_button" : undefined, className),
-    style: withPropsStyle(innerStyle, style),
+    className: innerClassName,
+    style: innerStyle,
     disabled: innerDisabled,
     "data-discrete": discrete ? "" : undefined,
     "data-readonly": innerReadOnly ? "" : undefined,
@@ -28034,6 +28053,7 @@ const Text = ({
   italic,
   underline,
   style,
+  alignX,
   ...rest
 }) => {
   const innerStyle = withPropsStyle({
@@ -28041,7 +28061,15 @@ const Text = ({
     fontWeight: bold ? "bold" : undefined,
     fontStyle: italic ? "italic" : undefined,
     textDecoration: underline ? "underline" : undefined,
-    ...getStyleForSpacingProps(rest)
+    ...consumeSpacingProps(rest),
+    ...(alignX === "start" ? {} : alignX === "center" ? {
+      alignSelf: "center",
+      marginLeft: "auto",
+      marginRight: "auto"
+    } : {
+      alignSelf: "end",
+      marginLeft: "auto"
+    })
   }, style);
   return jsx("span", {
     ...rest,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",

package/src/components/field/button.jsx

@@ -14,7 +14,7 @@ import { FormActionContext } from "../action_execution/form_context.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useAction } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { getStyleForSpacingProps } from "../layout/spacing.jsx";
+import { consumeSpacingProps } from "../layout/spacing.jsx";
 import { LoaderBackground } from "../loader/loader_background.jsx";
 import { withPropsClassName } from "../props_composition/with_props_class_name.js";
 import { withPropsStyle } from "../props_composition/with_props_style.js";
@@ -197,11 +197,6 @@ export const Button = forwardRef((props, ref) => {
   });
 });
 
-const alignXMapping = {
-  start: undefined,
-  center: "center",
-  end: "flex-end",
-};
 const ButtonBasic = forwardRef((props, ref) => {
   const contextLoading = useContext(LoadingContext);
   const contextLoadingElement = useContext(LoadingElementContext);
@@ -241,20 +236,35 @@ const ButtonBasic = forwardRef((props, ref) => {
     buttonChildren = children;
   }
 
-  const innerStyle = {
-    ...getStyleForSpacingProps(rest),
-    "align-self": alignXMapping[alignX],
-  };
+  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",
+            }),
+    },
+    style,
+  );
 
   return (
     <button
       {...rest}
       ref={innerRef}
-      className={withPropsClassName(
-        appearance === "navi" ? "navi_button" : undefined,
-        className,
-      )}
-      style={withPropsStyle(innerStyle, style)}
+      className={innerClassName}
+      style={innerStyle}
       disabled={innerDisabled}
       data-discrete={discrete ? "" : undefined}
       data-readonly={innerReadOnly ? "" : undefined}

package/src/components/field/input_checkbox.jsx

@@ -13,7 +13,7 @@ import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { getStyleForSpacingProps } from "../layout/spacing.jsx";
+import { consumeSpacingProps } from "../layout/spacing.jsx";
 import {
   LoadableInlineElement,
   LoaderBackground,
@@ -336,7 +336,7 @@ const NaviCheckbox = ({
   const innerStyle = withPropsStyle(
     {
       ...(accentColor ? { "--accent-color": accentColor } : {}),
-      ...getStyleForSpacingProps(rest),
+      ...consumeSpacingProps(rest),
     },
     style,
   );

package/src/components/field/input_radio.jsx

@@ -8,7 +8,7 @@ import {
 
 import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
-import { getStyleForSpacingProps } from "../layout/spacing.jsx";
+import { consumeSpacingProps } from "../layout/spacing.jsx";
 import {
   LoadableInlineElement,
   LoaderBackground,
@@ -375,7 +375,7 @@ const NaviRadio = ({
   const innerStyle = withPropsStyle(
     {
       ...(accentColor ? { "--accent-color": accentColor } : {}),
-      ...getStyleForSpacingProps(rest),
+      ...consumeSpacingProps(rest),
     },
     style,
   );

package/src/components/field/input_textual.jsx

@@ -31,7 +31,7 @@ import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { getStyleForSpacingProps } from "../layout/spacing.jsx";
+import { consumeSpacingProps } from "../layout/spacing.jsx";
 import { LoadableInlineElement } from "../loader/loader_background.jsx";
 import { withPropsClassName } from "../props_composition/with_props_class_name.js";
 import { withPropsStyle } from "../props_composition/with_props_style.js";
@@ -203,7 +203,7 @@ const InputTextualBasic = forwardRef((props, ref) => {
     {
       width,
       height,
-      ...getStyleForSpacingProps(rest),
+      ...consumeSpacingProps(rest),
     },
     style,
   );

package/src/components/layout/spacing.jsx

@@ -1,68 +1,87 @@
 import { withPropsStyle } from "../props_composition/with_props_style.js";
 
-export const getStyleForSpacingProps = ({
-  margin,
-  marginX,
-  marginY,
-  marginLeft,
-  marginTop,
-  marginBottom,
-  marginRight,
-  padding,
-  paddingX,
-  paddingY,
-  paddingLeft,
-  paddingTop,
-  paddingBottom,
-  paddingRight,
-}) => {
-  const style = {};
+export const consumeSpacingProps = (props) => {
+  const consume = (name) => {
+    if (Object.hasOwn(props, name)) {
+      const value = props[name];
+      delete props[name];
+      return value;
+    }
+    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;
   }
-  const effectiveMarginLeft = marginLeft ?? marginX;
-  const effectiveMarginRight = marginRight ?? marginX;
-  const effectiveMarginTop = marginTop ?? marginY;
-  const effectiveMarginBottom = marginBottom ?? marginY;
-
-  if (effectiveMarginLeft !== undefined) {
-    style.marginLeft = effectiveMarginLeft;
+  if (marginLeft !== undefined) {
+    style.marginLeft = marginLeft;
+  } else if (marginX !== undefined) {
+    style.marginLeft = marginX;
   }
-  if (effectiveMarginRight !== undefined) {
-    style.marginRight = effectiveMarginRight;
+  if (marginRight !== undefined) {
+    style.marginRight = marginRight;
+  } else if (marginX !== undefined) {
+    style.marginRight = marginX;
   }
-  if (effectiveMarginTop !== undefined) {
-    style.marginTop = effectiveMarginTop;
+  if (marginTop !== undefined) {
+    style.marginTop = marginTop;
+  } else if (marginY !== undefined) {
+    style.marginTop = marginY;
   }
-  if (effectiveMarginBottom !== undefined) {
-    style.marginBottom = effectiveMarginBottom;
+  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;
   }
-  const effectivePaddingLeft = paddingLeft ?? paddingX;
-  const effectivePaddingRight = paddingRight ?? paddingX;
-  const effectivePaddingTop = paddingTop ?? paddingY;
-  const effectivePaddingBottom = paddingBottom ?? paddingY;
-  if (effectivePaddingLeft !== undefined) {
-    style.paddingLeft = effectivePaddingLeft;
+  if (paddingLeft !== undefined) {
+    style.paddingLeft = paddingLeft;
+  } else if (paddingX !== undefined) {
+    style.paddingLeft = paddingX;
   }
-  if (effectivePaddingRight !== undefined) {
-    style.paddingRight = effectivePaddingRight;
+  if (paddingRight !== undefined) {
+    style.paddingRight = paddingRight;
+  } else if (paddingX !== undefined) {
+    style.paddingRight = paddingX;
   }
-  if (effectivePaddingTop !== undefined) {
-    style.paddingTop = effectivePaddingTop;
+  if (paddingTop !== undefined) {
+    style.paddingTop = paddingTop;
+  } else if (paddingY !== undefined) {
+    style.paddingTop = paddingY;
   }
-  if (effectivePaddingBottom !== undefined) {
-    style.paddingBottom = effectivePaddingBottom;
+  if (paddingBottom !== undefined) {
+    style.paddingBottom = paddingBottom;
+  } else if (paddingY !== undefined) {
+    style.paddingBottom = paddingY;
   }
 
   return style;
 };
 
 export const Spacing = ({ style, children, ...rest }) => {
-  const styleForSpacing = getStyleForSpacingProps(rest);
-  return <div style={withPropsStyle(styleForSpacing, style)}>{children}</div>;
+  const styleForSpacing = consumeSpacingProps(rest);
+  return (
+    <div {...rest} style={withPropsStyle(styleForSpacing, style)}>
+      {children}
+    </div>
+  );
 };

package/src/components/text/text.jsx

@@ -1,4 +1,4 @@
-import { getStyleForSpacingProps } from "../layout/spacing.jsx";
+import { consumeSpacingProps } from "../layout/spacing.jsx";
 import { withPropsStyle } from "../props_composition/with_props_style.js";
 
 import.meta.css = /* css */ `
@@ -31,6 +31,7 @@ export const Text = ({
   italic,
   underline,
   style,
+  alignX,
   ...rest
 }) => {
   const innerStyle = withPropsStyle(
@@ -39,7 +40,19 @@ export const Text = ({
       fontWeight: bold ? "bold" : undefined,
       fontStyle: italic ? "italic" : undefined,
       textDecoration: underline ? "underline" : undefined,
-      ...getStyleForSpacingProps(rest),
+      ...consumeSpacingProps(rest),
+      ...(alignX === "start"
+        ? {}
+        : alignX === "center"
+          ? {
+              alignSelf: "center",
+              marginLeft: "auto",
+              marginRight: "auto",
+            }
+          : {
+              alignSelf: "end",
+              marginLeft: "auto",
+            }),
     },
     style,
   );