@contentful/experiences-sdk-react 3.3.1-dev-20250821T1304-a31a6e8.0 → 3.3.1-dev-20250825T0713-34ae1b3.0

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import * as _contentful_experiences_core_constants from '@contentful/experiences
 export { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } from '@contentful/experiences-core/constants';
 import { ContentfulClientApi } from 'contentful';
 
-declare const SDK_VERSION = "3.3.1-dev-20250821T1304-a31a6e8.0";
+declare const SDK_VERSION = "3.3.1-dev-20250825T0713-34ae1b3.0";
 
 type ExperienceRootProps = {
     experience?: Experience<EntityStore> | string | null;

package/dist/sdkVersion.js

@@ -1,4 +1,4 @@
-const SDK_VERSION = '3.3.1-dev-20250821T1304-a31a6e8.0';
+const SDK_VERSION = '3.3.1-dev-20250825T0713-34ae1b3.0';
 
 export { SDK_VERSION };
 //# sourceMappingURL=sdkVersion.js.map

package/dist/sdkVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '3.3.1-dev-20250821T1304-a31a6e8.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
+{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '3.3.1-dev-20250825T0713-34ae1b3.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}

package/dist/src/sdkVersion.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.3.1-dev-20250821T1304-a31a6e8.0";
+export declare const SDK_VERSION = "3.3.1-dev-20250825T0713-34ae1b3.0";

package/dist/utils/withComponentWrapper.js

@@ -1,6 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 
+// NOTE: We're use this as a default for `options`. When only one option is explicitly defined,
+// all other default options are dropped as we're not merging the provided options with the default ones.
+// We started merging both options with SDK v3 but many customers wouldn't upgrade as it suddenly added
+// wrappers to their components because they only set the options to `{ wrapContainerWidth: "100%" }`.
+// With v2, it results in `wrapComponent` being undefined but with v3, it resulted in it being `true` and
+// thus causing unexpected layout changes.
+// We rolled back that change to let customers migrate smoothly for now but will adjust this behaviour with
+// v4.
+const DEFAULT_OPTIONS = {
+    wrapComponent: true,
+    wrapContainer: 'div',
+};
 /**
  * Sets up a component to be consumed by Experience Builder. This function can be used to wrap a component with a container component, or to pass props to the component directly.
  * @param Component Component to be used by Experience Builder.
@@ -8,17 +20,11 @@ import React from 'react';
  * @default { wrapComponent: true, wrapContainer: 'div' }
  * @returns A component that can be passed to `defineComponents`.
  */
-function withComponentWrapper(Component, options = {}) {
-    const mergedOptions = {
-        // Merge default values with overwriting options
-        wrapComponent: true,
-        wrapContainer: 'div',
-        ...options,
-    };
+function withComponentWrapper(Component, options = DEFAULT_OPTIONS) {
     const Wrapped = (props) => {
-        const Tag = mergedOptions.wrapContainer;
+        const Tag = options.wrapContainer ?? 'div';
         const { className = '', 'data-cf-node-id': dataCfNodeId, 'data-cf-node-block-id': dataCfNodeBlockId, 'data-cf-node-block-type': dataCfNodeBlockType, ...componentProps } = props;
-        const component = mergedOptions.wrapComponent ? (jsx(Tag, { "data-component-wrapper": true, className: className, "data-cf-node-id": dataCfNodeId, "data-cf-node-block-id": dataCfNodeBlockId, "data-cf-node-block-type": dataCfNodeBlockType, children: jsx(Component, { ...componentProps }) })) : (React.createElement(Component, props));
+        const component = options.wrapComponent ? (jsx(Tag, { "data-component-wrapper": true, className: className, "data-cf-node-id": dataCfNodeId, "data-cf-node-block-id": dataCfNodeBlockId, "data-cf-node-block-type": dataCfNodeBlockType, children: jsx(Component, { ...componentProps }) })) : (React.createElement(Component, props));
         return component;
     };
     return Wrapped;

package/dist/utils/withComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"withComponentWrapper.js","sources":["../../../src/utils/withComponentWrapper.tsx"],"sourcesContent":["import { ComponentRegistration } from '@contentful/experiences-core/types';\nimport React from 'react';\ninterface CFProps extends React.HtmlHTMLAttributes<HTMLElement> {\n  /**\n   * Classes to be applied to the container component if `wrapComponent` is true, or directly to the child component if false.\n   */\n  className?: string;\n  'data-cf-node-id': string;\n  'data-cf-node-block-id': string;\n  'data-cf-node-block-type': string;\n}\n\n/**\n * Sets up a component to be consumed by Experience Builder. This function can be used to wrap a component with a container component, or to pass props to the component directly.\n * @param Component Component to be used by Experience Builder.\n * @param options Options for the `withComponentWrapper` function.\n * @default { wrapComponent: true, wrapContainer: 'div' }\n * @returns A component that can be passed to `defineComponents`.\n */\nexport function withComponentWrapper<T>(\n  Component: React.ElementType,\n  options: ComponentRegistration['options'] = {},\n) {\n  const mergedOptions = {\n    // Merge default values with overwriting options\n    wrapComponent: true,\n    wrapContainer: 'div' as keyof JSX.IntrinsicElements,\n    ...options,\n  };\n  const Wrapped: React.FC<CFProps & T> = (props) => {\n    const Tag = mergedOptions.wrapContainer;\n    const {\n      className = '',\n      'data-cf-node-id': dataCfNodeId,\n      'data-cf-node-block-id': dataCfNodeBlockId,\n      'data-cf-node-block-type': dataCfNodeBlockType,\n      ...componentProps\n    } = props;\n    const component = mergedOptions.wrapComponent ? (\n      <Tag\n        data-component-wrapper\n        className={className}\n        data-cf-node-id={dataCfNodeId}\n        data-cf-node-block-id={dataCfNodeBlockId}\n        data-cf-node-block-type={dataCfNodeBlockType}>\n        <Component {...componentProps} />\n      </Tag>\n    ) : (\n      React.createElement(Component, props)\n    );\n    return component;\n  };\n\n  return Wrapped;\n}\n"],"names":["_jsx"],"mappings":";;;AAYA;;;;;;AAMG;SACa,oBAAoB,CAClC,SAA4B,EAC5B,UAA4C,EAAE,EAAA;AAE9C,IAAA,MAAM,aAAa,GAAG;;AAEpB,QAAA,aAAa,EAAE,IAAI;AACnB,QAAA,aAAa,EAAE,KAAoC;AACnD,QAAA,GAAG,OAAO;KACX,CAAC;AACF,IAAA,MAAM,OAAO,GAA0B,CAAC,KAAK,KAAI;AAC/C,QAAA,MAAM,GAAG,GAAG,aAAa,CAAC,aAAa,CAAC;QACxC,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,iBAAiB,EAAE,YAAY,EAC/B,uBAAuB,EAAE,iBAAiB,EAC1C,yBAAyB,EAAE,mBAAmB,EAC9C,GAAG,cAAc,EAClB,GAAG,KAAK,CAAC;AACV,QAAA,MAAM,SAAS,GAAG,aAAa,CAAC,aAAa,IAC3CA,IAAC,GAAG,EAAA,EAAA,wBAAA,EAAA,IAAA,EAEF,SAAS,EAAE,SAAS,qBACH,YAAY,EAAA,uBAAA,EACN,iBAAiB,EACf,yBAAA,EAAA,mBAAmB,EAC5C,QAAA,EAAAA,GAAA,CAAC,SAAS,EAAK,EAAA,GAAA,cAAc,GAAI,EAC7B,CAAA,KAEN,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,CACtC,CAAC;AACF,QAAA,OAAO,SAAS,CAAC;AACnB,KAAC,CAAC;AAEF,IAAA,OAAO,OAAO,CAAC;AACjB;;;;"}
+{"version":3,"file":"withComponentWrapper.js","sources":["../../../src/utils/withComponentWrapper.tsx"],"sourcesContent":["import { ComponentRegistration } from '@contentful/experiences-core/types';\nimport React from 'react';\ninterface CFProps extends React.HtmlHTMLAttributes<HTMLElement> {\n  /**\n   * Classes to be applied to the container component if `wrapComponent` is true, or directly to the child component if false.\n   */\n  className?: string;\n  'data-cf-node-id': string;\n  'data-cf-node-block-id': string;\n  'data-cf-node-block-type': string;\n}\n\n// NOTE: We're use this as a default for `options`. When only one option is explicitly defined,\n// all other default options are dropped as we're not merging the provided options with the default ones.\n// We started merging both options with SDK v3 but many customers wouldn't upgrade as it suddenly added\n// wrappers to their components because they only set the options to `{ wrapContainerWidth: \"100%\" }`.\n// With v2, it results in `wrapComponent` being undefined but with v3, it resulted in it being `true` and\n// thus causing unexpected layout changes.\n// We rolled back that change to let customers migrate smoothly for now but will adjust this behaviour with\n// v4.\nconst DEFAULT_OPTIONS = {\n  wrapComponent: true,\n  wrapContainer: 'div' as keyof JSX.IntrinsicElements,\n};\n\n/**\n * Sets up a component to be consumed by Experience Builder. This function can be used to wrap a component with a container component, or to pass props to the component directly.\n * @param Component Component to be used by Experience Builder.\n * @param options Options for the `withComponentWrapper` function.\n * @default { wrapComponent: true, wrapContainer: 'div' }\n * @returns A component that can be passed to `defineComponents`.\n */\nexport function withComponentWrapper<T>(\n  Component: React.ElementType,\n  options: ComponentRegistration['options'] = DEFAULT_OPTIONS,\n) {\n  const Wrapped: React.FC<CFProps & T> = (props) => {\n    const Tag = options.wrapContainer ?? 'div';\n    const {\n      className = '',\n      'data-cf-node-id': dataCfNodeId,\n      'data-cf-node-block-id': dataCfNodeBlockId,\n      'data-cf-node-block-type': dataCfNodeBlockType,\n      ...componentProps\n    } = props;\n    const component = options.wrapComponent ? (\n      <Tag\n        data-component-wrapper\n        className={className}\n        data-cf-node-id={dataCfNodeId}\n        data-cf-node-block-id={dataCfNodeBlockId}\n        data-cf-node-block-type={dataCfNodeBlockType}>\n        <Component {...componentProps} />\n      </Tag>\n    ) : (\n      React.createElement(Component, props)\n    );\n    return component;\n  };\n\n  return Wrapped;\n}\n"],"names":["_jsx"],"mappings":";;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,eAAe,GAAG;AACtB,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,aAAa,EAAE,KAAoC;CACpD,CAAC;AAEF;;;;;;AAMG;SACa,oBAAoB,CAClC,SAA4B,EAC5B,UAA4C,eAAe,EAAA;AAE3D,IAAA,MAAM,OAAO,GAA0B,CAAC,KAAK,KAAI;AAC/C,QAAA,MAAM,GAAG,GAAG,OAAO,CAAC,aAAa,IAAI,KAAK,CAAC;QAC3C,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,iBAAiB,EAAE,YAAY,EAC/B,uBAAuB,EAAE,iBAAiB,EAC1C,yBAAyB,EAAE,mBAAmB,EAC9C,GAAG,cAAc,EAClB,GAAG,KAAK,CAAC;AACV,QAAA,MAAM,SAAS,GAAG,OAAO,CAAC,aAAa,IACrCA,IAAC,GAAG,EAAA,EAAA,wBAAA,EAAA,IAAA,EAEF,SAAS,EAAE,SAAS,qBACH,YAAY,EAAA,uBAAA,EACN,iBAAiB,EACf,yBAAA,EAAA,mBAAmB,EAC5C,QAAA,EAAAA,GAAA,CAAC,SAAS,EAAK,EAAA,GAAA,cAAc,GAAI,EAC7B,CAAA,KAEN,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,CACtC,CAAC;AACF,QAAA,OAAO,SAAS,CAAC;AACnB,KAAC,CAAC;AAEF,IAAA,OAAO,OAAO,CAAC;AACjB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-sdk-react",
-  "version": "3.3.1-dev-20250821T1304-a31a6e8.0",
+  "version": "3.3.1-dev-20250825T0713-34ae1b3.0",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "typings": "./dist/src/index.d.ts",
@@ -41,10 +41,10 @@
     "depcruise": "depcruise src"
   },
   "dependencies": {
-    "@contentful/experiences-components-react": "3.3.1-dev-20250821T1304-a31a6e8.0",
-    "@contentful/experiences-core": "3.3.1-dev-20250821T1304-a31a6e8.0",
-    "@contentful/experiences-validators": "3.3.1-dev-20250821T1304-a31a6e8.0",
-    "@contentful/experiences-visual-editor-react": "3.3.1-dev-20250821T1304-a31a6e8.0",
+    "@contentful/experiences-components-react": "3.3.1-dev-20250825T0713-34ae1b3.0",
+    "@contentful/experiences-core": "3.3.1-dev-20250825T0713-34ae1b3.0",
+    "@contentful/experiences-validators": "3.3.1-dev-20250825T0713-34ae1b3.0",
+    "@contentful/experiences-visual-editor-react": "3.3.1-dev-20250825T0713-34ae1b3.0",
     "@contentful/rich-text-types": "^17.0.0",
     "csstype": "^3.1.2",
     "immer": "^10.0.3",
@@ -98,5 +98,5 @@
     "dist",
     "package.json"
   ],
-  "gitHead": "94f700484ae6d104864bab325f3b150f7313feae"
+  "gitHead": "5f8a95f923c5195d258a4ca7719c1a83d4c4a627"
 }