@elementor/editor-canvas 4.4.0-1073 → 4.4.0-1074

package/dist/index.js

@@ -2516,6 +2516,10 @@ var mapToFilterFunctionString = (value) => {
 };
 
 // src/transformers/styles/flex-transformer.ts
+var DEFAULT_FLEX_GROW = 0;
+var DEFAULT_FLEX_SHRINK = 1;
+var DEFAULT_FLEX_BASIS = "auto";
+var formatBasis = (basis) => typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis;
 var flexTransformer = createTransformer((value) => {
   const grow = value.flexGrow;
   const shrink = value.flexShrink;
@@ -2526,28 +2530,10 @@ var flexTransformer = createTransformer((value) => {
   if (!hasGrow && !hasShrink && !hasBasis) {
     return null;
   }
-  if (hasGrow && hasShrink && hasBasis) {
-    return `${grow} ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (hasGrow && hasShrink && !hasBasis) {
-    return `${grow} ${shrink}`;
-  }
-  if (hasGrow && !hasShrink && hasBasis) {
-    return `${grow} 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (!hasGrow && hasShrink && hasBasis) {
-    return `0 ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (hasGrow && !hasShrink && !hasBasis) {
-    return `${grow}`;
-  }
-  if (!hasGrow && hasShrink && !hasBasis) {
-    return `0 ${shrink}`;
-  }
-  if (!hasGrow && !hasShrink && hasBasis) {
-    return `0 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  return null;
+  const growOut = hasGrow ? grow : DEFAULT_FLEX_GROW;
+  const shrinkOut = hasShrink ? shrink : DEFAULT_FLEX_SHRINK;
+  const basisOut = hasBasis ? formatBasis(basis) : DEFAULT_FLEX_BASIS;
+  return `${growOut} ${shrinkOut} ${basisOut}`;
 });
 
 // src/transformers/styles/font-family-transformer.ts

package/dist/index.mjs

@@ -2468,6 +2468,10 @@ var mapToFilterFunctionString = (value) => {
 };
 
 // src/transformers/styles/flex-transformer.ts
+var DEFAULT_FLEX_GROW = 0;
+var DEFAULT_FLEX_SHRINK = 1;
+var DEFAULT_FLEX_BASIS = "auto";
+var formatBasis = (basis) => typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis;
 var flexTransformer = createTransformer((value) => {
   const grow = value.flexGrow;
   const shrink = value.flexShrink;
@@ -2478,28 +2482,10 @@ var flexTransformer = createTransformer((value) => {
   if (!hasGrow && !hasShrink && !hasBasis) {
     return null;
   }
-  if (hasGrow && hasShrink && hasBasis) {
-    return `${grow} ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (hasGrow && hasShrink && !hasBasis) {
-    return `${grow} ${shrink}`;
-  }
-  if (hasGrow && !hasShrink && hasBasis) {
-    return `${grow} 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (!hasGrow && hasShrink && hasBasis) {
-    return `0 ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (hasGrow && !hasShrink && !hasBasis) {
-    return `${grow}`;
-  }
-  if (!hasGrow && hasShrink && !hasBasis) {
-    return `0 ${shrink}`;
-  }
-  if (!hasGrow && !hasShrink && hasBasis) {
-    return `0 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  return null;
+  const growOut = hasGrow ? grow : DEFAULT_FLEX_GROW;
+  const shrinkOut = hasShrink ? shrink : DEFAULT_FLEX_SHRINK;
+  const basisOut = hasBasis ? formatBasis(basis) : DEFAULT_FLEX_BASIS;
+  return `${growOut} ${shrinkOut} ${basisOut}`;
 });
 
 // src/transformers/styles/font-family-transformer.ts

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.4.0-1073",
+  "version": "4.4.0-1074",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,26 +37,26 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.4.0-1073",
-    "@elementor/editor-controls": "4.4.0-1073",
-    "@elementor/editor-documents": "4.4.0-1073",
-    "@elementor/editor-elements": "4.4.0-1073",
-    "@elementor/editor-interactions": "4.4.0-1073",
-    "@elementor/editor-mcp": "4.4.0-1073",
-    "@elementor/editor-notifications": "4.4.0-1073",
-    "@elementor/editor-props": "4.4.0-1073",
-    "@elementor/editor-responsive": "4.4.0-1073",
-    "@elementor/editor-styles": "4.4.0-1073",
-    "@elementor/editor-styles-repository": "4.4.0-1073",
-    "@elementor/editor-ui": "4.4.0-1073",
-    "@elementor/editor-v1-adapters": "4.4.0-1073",
-    "@elementor/events": "4.4.0-1073",
-    "@elementor/http-client": "4.4.0-1073",
-    "@elementor/schema": "4.4.0-1073",
-    "@elementor/twing": "4.4.0-1073",
+    "@elementor/editor": "4.4.0-1074",
+    "@elementor/editor-controls": "4.4.0-1074",
+    "@elementor/editor-documents": "4.4.0-1074",
+    "@elementor/editor-elements": "4.4.0-1074",
+    "@elementor/editor-interactions": "4.4.0-1074",
+    "@elementor/editor-mcp": "4.4.0-1074",
+    "@elementor/editor-notifications": "4.4.0-1074",
+    "@elementor/editor-props": "4.4.0-1074",
+    "@elementor/editor-responsive": "4.4.0-1074",
+    "@elementor/editor-styles": "4.4.0-1074",
+    "@elementor/editor-styles-repository": "4.4.0-1074",
+    "@elementor/editor-ui": "4.4.0-1074",
+    "@elementor/editor-v1-adapters": "4.4.0-1074",
+    "@elementor/events": "4.4.0-1074",
+    "@elementor/http-client": "4.4.0-1074",
+    "@elementor/schema": "4.4.0-1074",
+    "@elementor/twing": "4.4.0-1074",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.4.0-1073",
-    "@elementor/wp-media": "4.4.0-1073",
+    "@elementor/utils": "4.4.0-1074",
+    "@elementor/wp-media": "4.4.0-1074",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0",
     "dompurify": "^3.2.6"

package/src/__tests__/flex-transformer.test.ts

@@ -68,7 +68,7 @@ describe( 'flexTransformer', () => {
 	} );
 
 	describe( 'when only two values are provided', () => {
-		it( 'should return "grow shrink" when grow and shrink are set', () => {
+		it( 'should return "grow shrink auto" when grow and shrink are set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 1,
@@ -80,7 +80,7 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '1 2' );
+			expect( result ).toBe( '1 2 auto' );
 		} );
 
 		it( 'should return "grow 1 basis" when grow and basis are set', () => {
@@ -115,7 +115,7 @@ describe( 'flexTransformer', () => {
 	} );
 
 	describe( 'when only one value is provided', () => {
-		it( 'should return "grow" when only grow is set', () => {
+		it( 'should return "grow 1 auto" when only grow is set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 1,
@@ -127,10 +127,10 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '1' );
+			expect( result ).toBe( '1 1 auto' );
 		} );
 
-		it( 'should return "0 shrink" when only shrink is set', () => {
+		it( 'should return "0 shrink auto" when only shrink is set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: null,
@@ -142,7 +142,7 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '0 2' );
+			expect( result ).toBe( '0 2 auto' );
 		} );
 
 		it( 'should return "0 1 basis" when only basis is set', () => {
@@ -238,8 +238,8 @@ describe( 'flexTransformer', () => {
 		} );
 	} );
 
-	describe( 'CSS shorthand behavior', () => {
-		it( 'should follow CSS flex shorthand rules for single value', () => {
+	describe( 'CSS initial values for omitted longhands', () => {
+		it( 'should default shrink and basis when only grow is set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 2,
@@ -251,10 +251,10 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '2' );
+			expect( result ).toBe( '2 1 auto' );
 		} );
 
-		it( 'should follow CSS flex shorthand rules for two values', () => {
+		it( 'should default basis when grow and shrink are set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 1,
@@ -266,7 +266,7 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '1 2' );
+			expect( result ).toBe( '1 2 auto' );
 		} );
 	} );
 } );

package/src/transformers/styles/flex-transformer.ts

@@ -6,6 +6,13 @@ type Flex = {
 	flexBasis?: { size: number; unit: string } | string | null;
 };
 
+const DEFAULT_FLEX_GROW = 0;
+const DEFAULT_FLEX_SHRINK = 1;
+const DEFAULT_FLEX_BASIS = 'auto';
+
+const formatBasis = ( basis: NonNullable< Flex[ 'flexBasis' ] > ) =>
+	typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis;
+
 export const flexTransformer = createTransformer( ( value: Flex ) => {
 	const grow = value.flexGrow;
 	const shrink = value.flexShrink;
@@ -19,37 +26,9 @@ export const flexTransformer = createTransformer( ( value: Flex ) => {
 		return null;
 	}
 
-	if ( hasGrow && hasShrink && hasBasis ) {
-		return `${ grow } ${ shrink } ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
-
-	if ( hasGrow && hasShrink && ! hasBasis ) {
-		return `${ grow } ${ shrink }`;
-	}
-	if ( hasGrow && ! hasShrink && hasBasis ) {
-		return `${ grow } 1 ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
-	if ( ! hasGrow && hasShrink && hasBasis ) {
-		return `0 ${ shrink } ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
-
-	if ( hasGrow && ! hasShrink && ! hasBasis ) {
-		return `${ grow }`;
-	}
-	if ( ! hasGrow && hasShrink && ! hasBasis ) {
-		return `0 ${ shrink }`;
-	}
-	if ( ! hasGrow && ! hasShrink && hasBasis ) {
-		return `0 1 ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
+	const growOut = hasGrow ? grow : DEFAULT_FLEX_GROW;
+	const shrinkOut = hasShrink ? shrink : DEFAULT_FLEX_SHRINK;
+	const basisOut = hasBasis ? formatBasis( basis ) : DEFAULT_FLEX_BASIS;
 
-	return null;
+	return `${ growOut } ${ shrinkOut } ${ basisOut }`;
 } );