@jsenv/navi 0.7.0 → 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);
   };
@@ -18510,89 +18580,27 @@ 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 };
-};
-
-/**
- * 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 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;
-      }
-    }
-  }
-
-  return style;
+  return mergeStyles(baseStyle, styleFromProps, "css");
 };
 
 const consumeSpacingProps = props => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.7.0",
+  "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/props_composition/with_props_style.js

@@ -1,86 +1,26 @@
+import { mergeStyles } from "@jsenv/dom";
+
 /**
  * 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
  */
 export 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 };
-};
-
-/**
- * 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 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;
-      }
-    }
-  }
-
-  return style;
+  return mergeStyles(baseStyle, styleFromProps, "css");
 };