@contentful/experiences-core 1.34.0 → 1.34.1-beta.0

package/dist/utils/breakpoints.d.ts

@@ -7,7 +7,7 @@ declare const mediaQueryMatcher: (breakpoints: Breakpoint[]) => [{
 }[], Record<string, boolean>];
 declare const getActiveBreakpointIndex: (breakpoints: Breakpoint[], mediaQueryMatches: Record<string, boolean>, fallbackBreakpointIndex: number) => number;
 declare const getFallbackBreakpointIndex: (breakpoints: Breakpoint[]) => number;
-declare const isValidBreakpointValue: (value: PrimitiveValue) => boolean;
+declare const isValidBreakpointValue: (value: PrimitiveValue) => value is Exclude<PrimitiveValue, undefined>;
 declare const getValueForBreakpoint: (valuesByBreakpoint: ValuesByBreakpoint | undefined, breakpoints: Breakpoint[], activeBreakpointIndex: number, fallbackBreakpointIndex: number, variableName: string, resolveDesignTokens?: boolean) => string | number | boolean | Record<any, any> | undefined;
 
 export { MEDIA_QUERY_REGEXP, getActiveBreakpointIndex, getFallbackBreakpointIndex, getValueForBreakpoint, isValidBreakpointValue, mediaQueryMatcher };

package/dist/utils/styleUtils/ssrStyles.d.ts

@@ -18,6 +18,41 @@ declare const resolveBackgroundImageBinding: ({ variableData, getBoundEntityById
     componentSettings?: ExperienceComponentSettings;
     componentVariablesOverwrites?: Record<string, ComponentPropertyValue>;
 }) => string | undefined;
+/**
+ * Takes the initial set of properties, filters only design properties that will be mapped to CSS and
+ * re-organizes them to be indexed by breakpoint ID ("breakpoint > variable > value"). It will
+ * also resolve the design/ component values to plain values.
+ *
+ * **Example Input**
+ * ```
+ * variables = {
+ *   cfMargin: { type: 'DesignValue', valuesByBreakpoint: { desktop: '1px', tablet: '2px' } },
+ *   cfPadding: { type: 'DesignValue', valuesByBreakpoint: { desktop: '3px', mobile: '4px' } }
+ * }
+ * ```
+ *
+ * **Example Output**
+ * ```
+ * variableValuesByBreakpoints = {
+ *   desktop: {
+ *     cfMargin: '1px',
+ *     cfPadding: '3px'
+ *   },
+ *   tablet: {
+ *     cfMargin: '2px'
+ *   },
+ *   mobile: {
+ *    cfPadding: '4px'
+ *   }
+ * }
+ * ```
+ *
+ * **Note**
+ * - The property cfBackgroundImageUrl is the only content property that gets mapped to CSS as well.
+ *   It will be solely stored on the default breakpoint.
+ * - For ComponentValues, it will either take the override from the pattern instance or fallback to
+ *   the defaultValue defined in variableDefinitions.
+ */
 declare const indexByBreakpoint: ({ variables, breakpointIds, getBoundEntityById, unboundValues, dataSource, componentVariablesOverwrites, componentSettings, }: {
     variables: Record<string, ComponentPropertyValue>;
     breakpointIds: string[];
@@ -26,26 +61,25 @@ declare const indexByBreakpoint: ({ variables, breakpointIds, getBoundEntityById
     dataSource?: ExperienceDataSource;
     componentVariablesOverwrites?: Record<string, ComponentPropertyValue>;
     componentSettings?: ExperienceComponentSettings;
-}) => Record<string, Record<string, unknown>>;
+}) => Record<string, Record<string, string | number | boolean | Record<any, any>>>;
 /**
  * Flattens the object from
- * {
- *   color: {
- *      [key]: [value]
- *   }
- * }
- *
+ * `{ color: { [key]: [value] } }`
  * to
- *
- * {
- *  'color.key': [value]
- * }
+ * `{ 'color.key': [value] }`
  */
 declare const flattenDesignTokenRegistry: (designTokenRegistry: DesignTokensDefinition) => FlattenedDesignTokens;
-declare const toCSSString: (breakpointStyles: Record<string, string>) => string;
-declare const toMediaQuery: (breakpointPayload: {
+type MediaQueryData = {
     condition: string;
     cssByClassName: Record<string, string>;
-}) => string;
+};
+/**
+ * Create a single CSS string containing all class definitions for a given media query.
+ *
+ * @param condition e.g. "*", "<520px", ">520px"
+ * @param cssByClassName map of class names to CSS strings containing all rules for each class
+ * @returns joined string of all CSS class definitions wrapped into media queries
+ */
+declare const toMediaQuery: ({ condition, cssByClassName }: MediaQueryData) => string;
 
-export { detachExperienceStyles, flattenDesignTokenRegistry, indexByBreakpoint, isCfStyleAttribute, maybePopulateDesignTokenValue, resolveBackgroundImageBinding, toCSSString, toMediaQuery };
+export { detachExperienceStyles, flattenDesignTokenRegistry, indexByBreakpoint, isCfStyleAttribute, maybePopulateDesignTokenValue, resolveBackgroundImageBinding, toMediaQuery };

package/dist/utils/styleUtils/stylesUtils.d.ts

@@ -1,12 +1,55 @@
+import * as react from 'react';
 import { CSSProperties, StyleProps, ExperienceTreeNode } from '../../types.js';
-import { PrimitiveValue } from '@contentful/experiences-validators';
+import { ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-validators';
 
 declare const toCSSAttribute: (key: string) => string;
+/**
+ * Turns a list of CSSProperties into a joined CSS string that can be
+ * used for <style> tags. Per default it creates a minimized version.
+ * For editor mode, use the `useWhitespaces` flag to create a more readable version.
+ *
+ * @param cssProperties list of CSS properties
+ * @param useWhitespaces adds whitespaces and newlines between each rule
+ * @returns a string of CSS rules
+ */
+declare const stringifyCssProperties: (cssProperties: CSSProperties, useWhitespaces?: boolean) => string;
 declare const buildStyleTag: ({ styles, nodeId }: {
     styles: CSSProperties;
     nodeId?: string;
 }) => string[];
-declare const buildCfStyles: ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexReverse, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfBorderRadius, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, cfVisibility, }: Partial<StyleProps>) => CSSProperties;
+/**
+ * Takes plain design values and transforms them into CSS properties. Undefined values will
+ * be filtered out.
+ *
+ * **Example Input**
+ * ```
+ * values = {
+ *   cfVisibility: 'visible',
+ *   cfMargin: '10px',
+ *   cfFlexReverse: true,
+ *   cfImageOptions: { objectFit: 'cover' },
+ *   // ...
+ * }
+ * ```
+ * **Example Output**
+ * ```
+ * cssProperties = {
+ *   margin: '10px',
+ *   flexDirection: 'row-reverse',
+ *   objectFit: 'cover',
+ *   // ...
+ * }
+ * ```
+ */
+declare const buildCfStyles: (values: Partial<StyleProps>) => CSSProperties;
+/**
+ * **Only meant to be used in editor mode!**
+ *
+ * If the node is an empty structure component with a relative height (e.g. '100%'),
+ * it might render with a zero height. In this case, add a min height of 80px to ensure
+ * that child nodes can be added via drag & drop.
+ */
+declare const addMinHeightForEmptyStructures: (cssProperties: CSSProperties, node: ComponentTreeNode) => react.CSSProperties;
 /**
  * Container/section default behavior:
  * Default height => height: EMPTY_CONTAINER_HEIGHT
@@ -18,4 +61,4 @@ declare const calculateNodeDefaultHeight: ({ blockId, children, value, }: {
     value: PrimitiveValue;
 }) => string | number | boolean | Record<any, any> | undefined;
 
-export { buildCfStyles, buildStyleTag, calculateNodeDefaultHeight, toCSSAttribute };
+export { addMinHeightForEmptyStructures, buildCfStyles, buildStyleTag, calculateNodeDefaultHeight, stringifyCssProperties, toCSSAttribute };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-core",
-  "version": "1.34.0",
+  "version": "1.34.1-beta.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -70,11 +70,11 @@
     "vitest": "^2.1.1"
   },
   "dependencies": {
-    "@contentful/experiences-validators": "1.34.0",
+    "@contentful/experiences-validators": "1.34.1-beta.0",
     "@contentful/rich-text-types": "^17.0.0"
   },
   "peerDependencies": {
     "contentful": ">=10.6.0"
   },
-  "gitHead": "3c9d767b7c29c4b3bf47c43078f981b370cf7410"
+  "gitHead": "088467fe76fcebd165d903026b822fa9f98c4b84"
 }