@sitecore-content-sdk/nextjs 1.3.0-canary.9 → 1.4.0-canary.2

package/dist/cjs/components/FEaaSWrapper.js

@@ -1,32 +1,33 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getComponentServerProps = void 0;
-const react_1 = require("@sitecore-content-sdk/react");
-/**
- * TODO: remove when framework agnostic forms implemented
- * This is a repackaged version of the React FEaaSWrapper component with support for
- * server rendering in Next.js (using component-level data-fetching feature of Content SDK).
- */
-/**
- * Will be called during SSG or SSR
- * @param {ComponentRendering} rendering
- * @param {LayoutServiceData} layoutData
- * @returns {GetStaticPropsContext | GetServerSideProps} context
- */
-const getComponentServerProps = (rendering, layoutData) => __awaiter(void 0, void 0, void 0, function* () {
-    const params = rendering.params || {};
-    const isPageStateNormal = !layoutData.sitecore.context.pageState ||
-        layoutData.sitecore.context.pageState === react_1.LayoutServicePageState.Normal;
-    return yield (0, react_1.fetchFEaaSComponentServerProps)(params, isPageStateNormal);
-});
-exports.getComponentServerProps = getComponentServerProps;
-exports.default = react_1.FEaaSWrapper;
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentServerProps = void 0;
+const react_1 = require("@sitecore-content-sdk/react");
+/**
+ * TODO: remove when framework agnostic forms implemented
+ * This is a repackaged version of the React FEaaSWrapper component with support for
+ * server rendering in Next.js (using component-level data-fetching feature of Content SDK).
+ */
+/**
+ * Will be called during SSG or SSR
+ * @param {ComponentRendering} rendering
+ * @param {LayoutServiceData} layoutData
+ * @returns {GetStaticPropsContext | GetServerSideProps} context
+ * @internal
+ */
+const getComponentServerProps = (rendering, layoutData) => __awaiter(void 0, void 0, void 0, function* () {
+    const params = rendering.params || {};
+    const isPageStateNormal = !layoutData.sitecore.context.pageState ||
+        layoutData.sitecore.context.pageState === react_1.LayoutServicePageState.Normal;
+    return yield (0, react_1.fetchFEaaSComponentServerProps)(params, isPageStateNormal);
+});
+exports.getComponentServerProps = getComponentServerProps;
+exports.default = react_1.FEaaSWrapper;

package/dist/cjs/components/Link.js

@@ -1,90 +1,117 @@
-"use strict";
-'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Link = void 0;
-const react_1 = __importStar(require("react"));
-const link_1 = __importDefault(require("next/link"));
-const react_2 = require("@sitecore-content-sdk/react");
-/**
- * Matches relative URLs that end with a file extension.
- */
-const FILE_EXTENSION_MATCHER = /^\/.*\.\w+$/;
-exports.Link = (0, react_1.forwardRef)((props, ref) => {
-    const { field, editable = true, children, internalLinkMatcher = /^\//g, showLinkTextWithChildrenPresent } = props, htmlLinkProps = __rest(props, ["field", "editable", "children", "internalLinkMatcher", "showLinkTextWithChildrenPresent"]);
-    if (!field || (!field.value && !field.href && !field.metadata)) {
-        return null;
-    }
-    const value = (field.href ? field : field.value);
-    // fallback to {} if value is undefined; could happen if field is LinkFieldValue, href is empty in metadata mode
-    const { href, querystring, anchor } = value || {};
-    const isEditing = editable && field.metadata;
-    if (href && !isEditing) {
-        const text = showLinkTextWithChildrenPresent || !children ? value.text || value.href : null;
-        const isMatching = internalLinkMatcher.test(href);
-        const isFileUrl = FILE_EXTENSION_MATCHER.test(href);
-        // determine if a link is a route or not. File extensions are not routes and should not be pre-fetched.
-        if (isMatching && !isFileUrl) {
-            return (react_1.default.createElement(link_1.default, Object.assign({ href: { pathname: href, query: querystring, hash: anchor }, key: "link", locale: false, title: value.title, target: value.target, className: value.class, prefetch: props.prefetch }, htmlLinkProps, { ref: ref }, (process.env.TEST
-                ? {
-                    'data-nextjs-link': true,
-                    'data-nextjs-prefetch': props.prefetch,
-                }
-                : {})),
-                text,
-                children));
-        }
-    }
-    // prevent passing internalLinkMatcher or prefetch as it is an invalid DOM element prop
-    const reactLinkProps = Object.assign({}, props);
-    delete reactLinkProps.internalLinkMatcher;
-    delete reactLinkProps.prefetch;
-    return (react_1.default.createElement(react_2.Link, Object.assign({}, reactLinkProps, { ref: ref }, (process.env.TEST ? { 'data-react-link': true } : {}))));
-});
-exports.Link.displayName = 'NextLink';
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const react_1 = __importStar(require("react"));
+const link_1 = __importDefault(require("next/link"));
+const react_2 = require("@sitecore-content-sdk/react");
+/**
+ * The list of NextLink props to be supported by the Link component.
+ */
+const supportedNextLinkProps = [
+    'as',
+    'onNavigate',
+    'passHref',
+    'prefetch',
+    'replace',
+    'scroll',
+    'shallow',
+];
+/**
+ * Matches relative URLs that end with a file extension.
+ */
+const FILE_EXTENSION_MATCHER = /^\/.*\.\w+$/;
+/**
+ * Next.js specific Link component implementation.
+ * @public
+ */
+exports.Link = (0, react_1.forwardRef)((props, ref) => {
+    const { field, editable = true, children, internalLinkMatcher = /^\//g, showLinkTextWithChildrenPresent } = props, rest = __rest(props, ["field", "editable", "children", "internalLinkMatcher", "showLinkTextWithChildrenPresent"]);
+    if (!field || (!field.value && !field.href && !field.metadata)) {
+        return null;
+    }
+    const value = (field.href ? field : field.value);
+    // fallback to {} if value is undefined; could happen if field is LinkFieldValue, href is empty in metadata mode
+    const { href, querystring, anchor } = value || {};
+    const isEditing = editable && field.metadata;
+    if (href && !isEditing) {
+        const text = showLinkTextWithChildrenPresent || !children ? value.text || value.href : null;
+        const isMatching = internalLinkMatcher.test(href);
+        const isFileUrl = FILE_EXTENSION_MATCHER.test(href);
+        // determine if a link is a route or not. File extensions are not routes and should not be pre-fetched.
+        if (isMatching && !isFileUrl) {
+            return (react_1.default.createElement(link_1.default, Object.assign({ href: { pathname: href, query: querystring, hash: anchor }, key: "link", title: value.title, target: value.target, className: value.class }, rest, { locale: false, ref: ref }, (process.env.TEST
+                ? {
+                    'data-nextjs-link': true,
+                    'data-nextjs-prefetch': props.prefetch,
+                }
+                : {})),
+                text,
+                children));
+        }
+    }
+    const reactLinkProps = sanitizeLinkProps(props);
+    return (react_1.default.createElement(react_2.Link, Object.assign({}, reactLinkProps, { ref: ref }, (process.env.TEST ? { 'data-react-link': true } : {}))));
+});
+exports.Link.displayName = 'NextLink';
+/**
+ * Sanitize props for ReactLink by removing Next.js and internal props to prevent invalid DOM attributes.
+ * @param {LinkProps} props - The props the Link component received.
+ * @returns sanitized props for ReactLink.
+ * @internal
+ */
+function sanitizeLinkProps(props) {
+    const internalProps = ['internalLinkMatcher'];
+    const sanitizedProps = Object.assign({}, props);
+    for (const prop of [...supportedNextLinkProps, ...internalProps]) {
+        delete sanitizedProps[prop];
+    }
+    return sanitizedProps;
+}

package/dist/cjs/components/NextImage.js

@@ -1,62 +1,66 @@
-"use strict";
-'use client';
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NextImage = void 0;
-/* eslint-disable no-unused-vars */
-const media_1 = require("@sitecore-content-sdk/core/media");
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@sitecore-content-sdk/react");
-const image_1 = __importDefault(require("next/image"));
-const layout_1 = require("@sitecore-content-sdk/core/layout");
-exports.NextImage = (0, react_2.withFieldMetadata)((0, react_2.withEmptyFieldEditingComponent)((_a) => {
-    var { editable = true, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
-    const context = react_1.default.useContext(react_2.SitecoreProviderReactContext);
-    // next handles src and we use a custom loader,
-    // throw error if these are present
-    if (otherProps.src) {
-        throw new Error('Detected src prop. If you wish to use src, use next/image directly.');
-    }
-    const dynamicMedia = field;
-    if ((0, layout_1.isFieldValueEmpty)(dynamicMedia)) {
-        return null;
-    }
-    // some wise-guy/gal is passing in a 'raw' image object value
-    const img = dynamicMedia.src
-        ? field
-        : dynamicMedia.value;
-    if (!img) {
-        return null;
-    }
-    // disable image optimization for Edit / Preview / Component rendering, but preserve original value if true
-    const unoptimized = otherProps.unoptimized || !context.page.mode.isNormal;
-    const attrs = Object.assign(Object.assign(Object.assign({}, img), otherProps), { fill,
-        priority, src: media_1.mediaApi.updateImageUrl(img.src, imageParams, mediaUrlPrefix), unoptimized });
-    const imageProps = Object.assign(Object.assign({}, attrs), { 
-        // force replace /media with /jssmedia in src since we _know_ we will be adding a 'mw' query string parameter
-        // this is required for Sitecore media API resizing to work properly
-        src: media_1.mediaApi.replaceMediaUrlPrefix(attrs.src, mediaUrlPrefix) });
-    // Exclude `width`, `height` in case image is responsive, `fill` is used
-    if (imageProps.fill) {
-        delete imageProps.width;
-        delete imageProps.height;
-    }
-    if (attrs) {
-        return (react_1.default.createElement(image_1.default, Object.assign({ alt: "" }, imageProps, (process.env.TEST ? { 'data-unoptimized': unoptimized } : {}))));
-    }
-    return null; // we can't handle the truth
-}, { defaultEmptyFieldEditingComponent: react_2.DefaultEmptyFieldEditingComponentImage }));
-exports.NextImage.displayName = 'NextImage';
+"use strict";
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextImage = void 0;
+/* eslint-disable no-unused-vars */
+const media_1 = require("@sitecore-content-sdk/core/media");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@sitecore-content-sdk/react");
+const image_1 = __importDefault(require("next/image"));
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+/**
+ * Next.js specific Image component implementation.
+ * @public
+ */
+exports.NextImage = (0, react_2.withFieldMetadata)((0, react_2.withEmptyFieldEditingComponent)((_a) => {
+    var { editable = true, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
+    const context = react_1.default.useContext(react_2.SitecoreProviderReactContext);
+    // next handles src and we use a custom loader,
+    // throw error if these are present
+    if (otherProps.src) {
+        throw new Error('Detected src prop. If you wish to use src, use next/image directly.');
+    }
+    const dynamicMedia = field;
+    if ((0, layout_1.isFieldValueEmpty)(dynamicMedia)) {
+        return null;
+    }
+    // some wise-guy/gal is passing in a 'raw' image object value
+    const img = dynamicMedia.src
+        ? field
+        : dynamicMedia.value;
+    if (!img) {
+        return null;
+    }
+    // disable image optimization for Edit / Preview / Component rendering, but preserve original value if true
+    const unoptimized = otherProps.unoptimized || !context.page.mode.isNormal;
+    const attrs = Object.assign(Object.assign(Object.assign({}, img), otherProps), { fill,
+        priority, src: media_1.mediaApi.updateImageUrl(img.src, imageParams, mediaUrlPrefix), unoptimized });
+    const imageProps = Object.assign(Object.assign({}, attrs), { 
+        // force replace /media with /jssmedia in src since we _know_ we will be adding a 'mw' query string parameter
+        // this is required for Sitecore media API resizing to work properly
+        src: media_1.mediaApi.replaceMediaUrlPrefix(attrs.src, mediaUrlPrefix) });
+    // Exclude `width`, `height` in case image is responsive, `fill` is used
+    if (imageProps.fill) {
+        delete imageProps.width;
+        delete imageProps.height;
+    }
+    if (attrs) {
+        return (react_1.default.createElement(image_1.default, Object.assign({ alt: "" }, imageProps, (process.env.TEST ? { 'data-unoptimized': unoptimized } : {}))));
+    }
+    return null; // we can't handle the truth
+}, { defaultEmptyFieldEditingComponent: react_2.DefaultEmptyFieldEditingComponentImage }));
+exports.NextImage.displayName = 'NextImage';

package/dist/cjs/components/Placeholder.js

@@ -1,50 +1,55 @@
-"use strict";
-'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Placeholder = void 0;
-const react_1 = __importStar(require("react"));
-const react_2 = require("@sitecore-content-sdk/react");
-const ComponentPropsContext_1 = require("./ComponentPropsContext");
-const Placeholder = (props) => {
-    const componentPropsContext = (0, react_1.useContext)(ComponentPropsContext_1.ComponentPropsReactContext);
-    return (react_1.default.createElement(react_2.Placeholder, Object.assign({}, props, { modifyComponentProps: (initialProps) => {
-            if (!initialProps.rendering.uid)
-                return initialProps;
-            const data = componentPropsContext[initialProps.rendering.uid];
-            return Object.assign(Object.assign({}, initialProps), data);
-        } })));
-};
-exports.Placeholder = Placeholder;
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Placeholder = void 0;
+const react_1 = __importStar(require("react"));
+const react_2 = require("@sitecore-content-sdk/react");
+const ComponentPropsContext_1 = require("./ComponentPropsContext");
+/**
+ * The Placeholder component.
+ * @param {PlaceholderProps} props component props
+ * @public
+ */
+const Placeholder = (props) => {
+    const componentPropsContext = (0, react_1.useContext)(ComponentPropsContext_1.ComponentPropsReactContext);
+    return (react_1.default.createElement(react_2.Placeholder, Object.assign({}, props, { modifyComponentProps: (initialProps) => {
+            if (!initialProps.rendering.uid)
+                return initialProps;
+            const data = componentPropsContext[initialProps.rendering.uid];
+            return Object.assign(Object.assign({}, initialProps), data);
+        } })));
+};
+exports.Placeholder = Placeholder;