rw-elements-tools 1.3.4 → 1.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rw-elements-tools",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "Build tools for RapidWeaver Elements packs - generates properties.json and hooks.js files",
   "author": "Elements Platform",
   "license": "MIT",

package/shared-hooks/layout/globalActAsGridOrFlexItem.js

@@ -1,13 +1,28 @@
-const getOrderClasses = (orderByBreakpoint = {}, orderCustomByBreakpoint = {}) => {
-  return Object.entries(orderByBreakpoint)
-    .map(([breakpoint, value]) => {
+const getOrderClasses = (orderByBreakpoint = {}, orderCustomByBreakpoint = {}, breakpointNames = []) => {
+  const allBreakpoints = ["base", ...breakpointNames];
+
+  // Find custom value by cascading back through previous breakpoints
+  const getCustomValue = (currentBreakpoint) => {
+    const currentIndex = allBreakpoints.indexOf(currentBreakpoint);
+    for (let i = currentIndex; i >= 0; i--) {
+      const bp = allBreakpoints[i];
+      if (orderCustomByBreakpoint[bp] !== undefined) {
+        return orderCustomByBreakpoint[bp];
+      }
+    }
+    return undefined;
+  };
+
+  return allBreakpoints
+    .filter(bp => orderByBreakpoint[bp] !== undefined)
+    .map((breakpoint) => {
+      const value = orderByBreakpoint[breakpoint];
       const prefix = breakpoint === "base" ? "" : `${breakpoint}:`;
-      const orderValue = value === "order-custom" 
-        ? orderCustomByBreakpoint[breakpoint] 
-        : value;
-      return orderValue ? `${prefix}${orderValue}` : null;
+      const orderValue = value === "custom"
+        ? `order-[${getCustomValue(breakpoint)}]`
+        : `order-${value}`;
+      return `${prefix}${orderValue}`;
     })
-    .filter(Boolean)
     .join(" ");
 };
 
@@ -41,6 +56,8 @@ const globalActAsGridOrFlexItem = (app) => {
     globalGridOrFlexItemOrderCustom: orderCustomByBreakpoint,
   } = app.responsiveProps;
 
+  const { names: breakpointNames } = app.theme.breakpoints;
+
   if (displayAs == "default") {
     return false;
   }
@@ -56,7 +73,7 @@ const globalActAsGridOrFlexItem = (app) => {
         shrink,
         grow,
         basis == "custom" ? basisCustom : basis,
-        getOrderClasses(orderByBreakpoint, orderCustomByBreakpoint)
+        getOrderClasses(orderByBreakpoint, orderCustomByBreakpoint, breakpointNames)
       ] : [])
     );
   }
@@ -72,7 +89,7 @@ const globalActAsGridOrFlexItem = (app) => {
         rowEnd !== "row-end-auto" ? rowEnd : undefined,
         alignSelf,
         justifySelf,
-        getOrderClasses(orderByBreakpoint, orderCustomByBreakpoint)
+        getOrderClasses(orderByBreakpoint, orderCustomByBreakpoint, breakpointNames)
       ] : [])
     );
   }