@salesforce/commerce-sdk-react 5.2.0 → 5.2.1

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## v5.2.1 (May 21, 2026)
+- Add contentLinkUuid support to fix Page Designer integration [#3839](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3839)
+
 ## v5.2.0 (May 07, 2026)
 - Allow auth related cookies domain to be set via config [#3782](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3782)
 - WIP: Add support for HttpOnly session cookies [#3804](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3804)

package/components/ShopperExperienceV2/Component/index.js

@@ -35,10 +35,11 @@ const Component = exports.Component = /*#__PURE__*/(0, _react.memo)(function Com
   const componentWithRuntimeProps = component;
   const designMetadata = {
     name: (_component$designMeta = component.designMetadata) === null || _component$designMeta === void 0 ? void 0 : _component$designMeta.name,
-    isFragment: false,
+    isFragment: Boolean(componentWithRuntimeProps.fragment),
     isVisible: Boolean(componentWithRuntimeProps.visible),
     isLocalized: Boolean(componentWithRuntimeProps.localized),
-    id: component.id
+    id: component.id,
+    contentLinkUuid: componentWithRuntimeProps.contentLinkUuid
   };
 
   // Cast DynamicComponent to accept our props since registry returns unknown type

package/components/ShopperExperienceV2/Region/index.js

@@ -50,11 +50,14 @@ function renderRegionContent(region, regionId, metadata, className, rest) {
     region: region,
     className: className,
     designMetadata: getDesignMetadata(regionId, metadata)
-  }, rest), (_region$components = region.components) === null || _region$components === void 0 ? void 0 : _region$components.map(comp => comp.id && /*#__PURE__*/_react.default.createElement(_Component.Component, {
-    key: comp.id,
-    component: comp,
-    regionId: region.id
-  })));
+  }, rest), (_region$components = region.components) === null || _region$components === void 0 ? void 0 : _region$components.map(comp => {
+    const key = comp.contentLinkUuid || comp.id;
+    return comp.id && /*#__PURE__*/_react.default.createElement(_Component.Component, {
+      key: key,
+      component: comp,
+      regionId: region.id
+    });
+  }));
 }
 
 /**

package/components/ShopperExperienceV2/Region/region-wrapper.d.ts

@@ -6,7 +6,7 @@ import { type RegionDesignMetadata } from '@salesforce/storefront-next-runtime/d
 export interface RegionRendererProps extends React.HTMLAttributes<HTMLDivElement> {
     region: any;
     children: ReactNode;
-    designMetadata?: Omit<RegionDesignMetadata, 'componentIds'>;
+    designMetadata?: Omit<RegionDesignMetadata, 'contentLinkUuids'>;
 }
 /**
  * RegionWrapper - Smart wrapper that conditionally applies design mode decoration

package/components/ShopperExperienceV2/Region/region-wrapper.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.RegionWrapper = RegionWrapper;
 var _react = _interopRequireDefault(require("react"));
 var _core = require("@salesforce/storefront-next-runtime/design/react/core");
-var _react2 = require("@salesforce/storefront-next-runtime/design/react");
 const _excluded = ["region", "children", "className", "designMetadata"];
 /*
  * Copyright (c) 2025, salesforce.com, inc.
@@ -36,7 +35,7 @@ function RegionRenderer({
  * Create the design-mode decorated version of the region renderer
  * This wraps the region with Page Designer functionality when in design mode
  */
-const DecoratedRegionRenderer = (0, _react2.createReactRegionDesignDecorator)(RegionRenderer);
+const DecoratedRegionRenderer = (0, _core.createReactRegionDesignDecorator)(RegionRenderer);
 
 /**
  * RegionWrapper - Smart wrapper that conditionally applies design mode decoration
@@ -72,7 +71,7 @@ function RegionWrapper(_ref) {
     var _region$components;
     return {
       id: region.id,
-      componentIds: (region === null || region === void 0 ? void 0 : (_region$components = region.components) === null || _region$components === void 0 ? void 0 : _region$components.map(cmp => cmp.id)) || [],
+      contentLinkUuids: (region === null || region === void 0 ? void 0 : (_region$components = region.components) === null || _region$components === void 0 ? void 0 : _region$components.map(cmp => cmp.contentLinkUuid || cmp.id)) || [],
       componentTypeExclusions: (designMetadata === null || designMetadata === void 0 ? void 0 : designMetadata.componentTypeExclusions) || [],
       componentTypeInclusions: (designMetadata === null || designMetadata === void 0 ? void 0 : designMetadata.componentTypeInclusions) || []
     };

package/components/ShopperExperienceV2/registry.d.ts

@@ -1,4 +1,4 @@
-import { type ReactDesignComponentType } from '@salesforce/storefront-next-runtime/design/react';
+import { type ReactDesignComponentType } from '@salesforce/storefront-next-runtime/design/react/core';
 import { ComponentRegistry } from '@salesforce/storefront-next-runtime/design';
 /**
  * Factory function to create a React-specific component registry

package/components/ShopperExperienceV2/registry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createReactComponentRegistry = createReactComponentRegistry;
 exports.registry = void 0;
-var _react = require("@salesforce/storefront-next-runtime/design/react");
+var _core = require("@salesforce/storefront-next-runtime/design/react/core");
 var _design = require("@salesforce/storefront-next-runtime/design");
 /*
  * Copyright (c) 2025, salesforce.com, inc.
@@ -20,7 +20,7 @@ var _design = require("@salesforce/storefront-next-runtime/design");
  */
 function createReactComponentRegistry() {
   return new _design.ComponentRegistry({
-    adapter: (0, _react.createReactAdapter)()
+    adapter: (0, _core.createReactAdapter)()
   });
 }
 

package/components/ShopperExperienceV2/types.d.ts

@@ -7,8 +7,14 @@ type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType[number];
 declare const CLIENT_KEY: "shopperExperience";
 type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>;
 export type Page = DataType<Client['getPage']>;
-export type Region = ArrayElement<NonNullable<Page['regions']>>;
-export type Component = ArrayElement<NonNullable<Region['components']>>;
+type BaseRegion = ArrayElement<NonNullable<Page['regions']>>;
+type BaseComponent = ArrayElement<NonNullable<BaseRegion['components']>>;
+export type Component = BaseComponent & {
+    contentLinkUuid?: string;
+};
+export type Region = Omit<BaseRegion, 'components'> & {
+    components?: Component[];
+};
 /**
  * Extended Page type with design metadata and component data
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/commerce-sdk-react",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "A library that provides react hooks for fetching data from Commerce Cloud",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/ecom-react-hooks#readme",
   "bugs": {
@@ -40,13 +40,13 @@
     "version": "node ./scripts/version.js"
   },
   "dependencies": {
-    "@salesforce/storefront-next-runtime": "0.1.1",
+    "@salesforce/storefront-next-runtime": "0.4.2",
     "commerce-sdk-isomorphic": "5.2.0",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^4.0.0"
   },
   "devDependencies": {
-    "@salesforce/pwa-kit-dev": "3.18.0",
+    "@salesforce/pwa-kit-dev": "3.18.1",
     "@tanstack/react-query": "^4.28.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -61,7 +61,7 @@
     "@types/react-helmet": "~6.1.6",
     "@types/react-router-dom": "~5.3.3",
     "cross-env": "^5.2.1",
-    "internal-lib-build": "3.18.0",
+    "internal-lib-build": "3.18.1",
     "jsonwebtoken": "^9.0.0",
     "nock": "^13.3.0",
     "nodemon": "^2.0.22",
@@ -91,11 +91,12 @@
   "overrides": {
     "@salesforce/storefront-next-runtime": {
       "react": "^18.2.0",
-      "react-dom": "^18.2.0"
+      "react-dom": "^18.2.0",
+      "react-router": "^5.3.4"
     }
   },
   "publishConfig": {
     "directory": "dist"
   },
-  "gitHead": "2f979acd3f44c121968b50ce4c731dbcd047a677"
+  "gitHead": "c9397dd6adc78039f0ddfc5b1b0aeb264ace425e"
 }