@sitecore-jss/sitecore-jss-nextjs 22.1.0-canary.41 → 22.1.0-canary.42

package/dist/cjs/components/Link.js

@@ -45,13 +45,17 @@ const sitecore_jss_react_1 = require("@sitecore-jss/sitecore-jss-react");
 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.editable && !field.value && !field.href)) {
+        (!field.editable &&
+            !field.value &&
+            !field.href &&
+            !field.metadata)) {
         return null;
     }
     const value = (field.href
         ? field
         : field.value);
-    const { href, querystring, anchor } = 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.editable || field.metadata);
     if (href && !isEditing) {
         const text = showLinkTextWithChildrenPresent || !children ? value.text || value.href : null;

package/dist/cjs/components/NextImage.js

@@ -20,7 +20,10 @@ const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const sitecore_jss_react_1 = require("@sitecore-jss/sitecore-jss-react");
 const image_1 = __importDefault(require("next/image"));
-exports.NextImage = (0, sitecore_jss_react_1.withFieldMetadata)((_a) => {
+const sitecore_jss_react_2 = require("@sitecore-jss/sitecore-jss-react");
+const sitecore_jss_react_3 = require("@sitecore-jss/sitecore-jss-react");
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+exports.NextImage = (0, sitecore_jss_react_1.withFieldMetadata)((0, sitecore_jss_react_2.withEmptyFieldEditingComponent)((_a) => {
     var { editable = true, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
     // next handles src and we use a custom loader,
     // throw error if these are present
@@ -28,8 +31,7 @@ exports.NextImage = (0, sitecore_jss_react_1.withFieldMetadata)((_a) => {
         throw new Error('Detected src prop. If you wish to use src, use next/image directly.');
     }
     const dynamicMedia = field;
-    if (!field ||
-        (!dynamicMedia.editable && !dynamicMedia.value && !dynamicMedia.src)) {
+    if (!field || (!dynamicMedia.editable && (0, layout_1.isFieldValueEmpty)(dynamicMedia))) {
         return null;
     }
     const imageField = dynamicMedia;
@@ -59,7 +61,7 @@ exports.NextImage = (0, sitecore_jss_react_1.withFieldMetadata)((_a) => {
         return react_1.default.createElement(image_1.default, Object.assign({ alt: "" }, imageProps));
     }
     return null; // we can't handle the truth
-});
+}, { defaultEmptyFieldEditingComponent: sitecore_jss_react_3.DefaultEmptyFieldEditingComponentImage }));
 exports.NextImage.propTypes = {
     field: prop_types_1.default.oneOfType([
         prop_types_1.default.shape({
@@ -73,5 +75,9 @@ exports.NextImage.propTypes = {
     editable: prop_types_1.default.bool,
     mediaUrlPrefix: prop_types_1.default.instanceOf(RegExp),
     imageParams: prop_types_1.default.objectOf(prop_types_1.default.oneOfType([prop_types_1.default.number.isRequired, prop_types_1.default.string.isRequired]).isRequired),
+    emptyFieldEditingComponent: prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.func,
+    ]),
 };
 exports.NextImage.displayName = 'NextImage';

package/dist/cjs/components/RichText.js

@@ -46,7 +46,7 @@ const prefetched = {};
 const RichText = (props) => {
     const { internalLinksSelector = 'a[href^="/"]', prefetchLinks = true, editable = true } = props, rest = __rest(props, ["internalLinksSelector", "prefetchLinks", "editable"]);
     const hasText = props.field && props.field.value;
-    const isEditing = editable && props.field && props.field.editable;
+    const isEditing = editable && props.field && (props.field.editable || props.field.metadata);
     const router = (0, router_1.useRouter)();
     const richTextRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -78,7 +78,7 @@ const RichText = (props) => {
             link.addEventListener('click', routeHandler, false);
         });
     };
-    return react_1.default.createElement(sitecore_jss_react_1.RichText, Object.assign({ ref: richTextRef }, rest));
+    return react_1.default.createElement(sitecore_jss_react_1.RichText, Object.assign({ ref: richTextRef, editable: editable }, rest));
 };
 exports.RichText = RichText;
 exports.RichText.propTypes = Object.assign({ internalLinksSelector: prop_types_1.default.string }, sitecore_jss_react_1.RichTextPropTypes);

package/dist/cjs/index.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.EditFrame = exports.DateField = exports.Text = exports.Image = exports.Context = exports.ComponentBuilder = exports.BYOCWrapper = exports.FEaaSWrapper = exports.NextImage = exports.Placeholder = exports.RichText = exports.Link = exports.useComponentProps = exports.ComponentPropsContext = exports.ComponentPropsReactContext = exports.normalizeSiteRewrite = exports.getSiteRewriteData = exports.getSiteRewrite = exports.GraphQLSiteInfoService = exports.SiteResolver = exports.GraphQLRobotsService = exports.GraphQLErrorPagesService = exports.GraphQLSitemapXmlService = exports.MultisiteGraphQLSitemapService = exports.GraphQLSitemapService = exports.DisconnectedSitemapService = exports.ComponentPropsService = exports.CdpHelper = exports.normalizePersonalizedRewrite = exports.getPersonalizedRewriteData = exports.getPersonalizedRewrite = exports.personalizeLayout = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.mediaApi = exports.EditMode = exports.getContentStylesheetLink = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.debug = exports.enableDebug = exports.NativeDataFetcher = exports.AxiosDataFetcher = exports.constants = void 0;
-exports.EditingScripts = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.getComponentLibraryStylesheetLinks = exports.BYOCComponent = void 0;
+exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.DefaultEmptyFieldEditingComponentText = exports.DefaultEmptyFieldEditingComponentImage = exports.File = exports.getComponentLibraryStylesheetLinks = exports.BYOCComponent = void 0;
 var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
 Object.defineProperty(exports, "AxiosDataFetcher", { enumerable: true, get: function () { return sitecore_jss_1.AxiosDataFetcher; } });
@@ -99,6 +99,8 @@ Object.defineProperty(exports, "fetchFEaaSComponentServerProps", { enumerable: t
 Object.defineProperty(exports, "BYOCComponent", { enumerable: true, get: function () { return sitecore_jss_react_1.BYOCComponent; } });
 Object.defineProperty(exports, "getComponentLibraryStylesheetLinks", { enumerable: true, get: function () { return sitecore_jss_react_1.getComponentLibraryStylesheetLinks; } });
 Object.defineProperty(exports, "File", { enumerable: true, get: function () { return sitecore_jss_react_1.File; } });
+Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentImage", { enumerable: true, get: function () { return sitecore_jss_react_1.DefaultEmptyFieldEditingComponentImage; } });
+Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentText", { enumerable: true, get: function () { return sitecore_jss_react_1.DefaultEmptyFieldEditingComponentText; } });
 Object.defineProperty(exports, "VisitorIdentification", { enumerable: true, get: function () { return sitecore_jss_react_1.VisitorIdentification; } });
 Object.defineProperty(exports, "SitecoreContext", { enumerable: true, get: function () { return sitecore_jss_react_1.SitecoreContext; } });
 Object.defineProperty(exports, "SitecoreContextReactContext", { enumerable: true, get: function () { return sitecore_jss_react_1.SitecoreContextReactContext; } });
@@ -108,4 +110,5 @@ Object.defineProperty(exports, "withEditorChromes", { enumerable: true, get: fun
 Object.defineProperty(exports, "withPlaceholder", { enumerable: true, get: function () { return sitecore_jss_react_1.withPlaceholder; } });
 Object.defineProperty(exports, "withDatasourceCheck", { enumerable: true, get: function () { return sitecore_jss_react_1.withDatasourceCheck; } });
 Object.defineProperty(exports, "withFieldMetadata", { enumerable: true, get: function () { return sitecore_jss_react_1.withFieldMetadata; } });
+Object.defineProperty(exports, "withEmptyFieldEditingComponent", { enumerable: true, get: function () { return sitecore_jss_react_1.withEmptyFieldEditingComponent; } });
 Object.defineProperty(exports, "EditingScripts", { enumerable: true, get: function () { return sitecore_jss_react_1.EditingScripts; } });

package/dist/esm/components/Link.js

@@ -16,13 +16,17 @@ import { Link as ReactLink, LinkPropTypes, } from '@sitecore-jss/sitecore-jss-re
 export const Link = forwardRef((props, ref) => {
     const { field, editable = true, children, internalLinkMatcher = /^\//g, showLinkTextWithChildrenPresent } = props, htmlLinkProps = __rest(props, ["field", "editable", "children", "internalLinkMatcher", "showLinkTextWithChildrenPresent"]);
     if (!field ||
-        (!field.editable && !field.value && !field.href)) {
+        (!field.editable &&
+            !field.value &&
+            !field.href &&
+            !field.metadata)) {
         return null;
     }
     const value = (field.href
         ? field
         : field.value);
-    const { href, querystring, anchor } = 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.editable || field.metadata);
     if (href && !isEditing) {
         const text = showLinkTextWithChildrenPresent || !children ? value.text || value.href : null;

package/dist/esm/components/NextImage.js

@@ -14,7 +14,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { getEEMarkup, withFieldMetadata, } from '@sitecore-jss/sitecore-jss-react';
 import Image from 'next/image';
-export const NextImage = withFieldMetadata((_a) => {
+import { withEmptyFieldEditingComponent } from '@sitecore-jss/sitecore-jss-react';
+import { DefaultEmptyFieldEditingComponentImage } from '@sitecore-jss/sitecore-jss-react';
+import { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
+export const NextImage = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
     var { editable = true, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
     // next handles src and we use a custom loader,
     // throw error if these are present
@@ -22,8 +25,7 @@ export const NextImage = withFieldMetadata((_a) => {
         throw new Error('Detected src prop. If you wish to use src, use next/image directly.');
     }
     const dynamicMedia = field;
-    if (!field ||
-        (!dynamicMedia.editable && !dynamicMedia.value && !dynamicMedia.src)) {
+    if (!field || (!dynamicMedia.editable && isFieldValueEmpty(dynamicMedia))) {
         return null;
     }
     const imageField = dynamicMedia;
@@ -53,7 +55,7 @@ export const NextImage = withFieldMetadata((_a) => {
         return React.createElement(Image, Object.assign({ alt: "" }, imageProps));
     }
     return null; // we can't handle the truth
-});
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentImage }));
 NextImage.propTypes = {
     field: PropTypes.oneOfType([
         PropTypes.shape({
@@ -67,5 +69,9 @@ NextImage.propTypes = {
     editable: PropTypes.bool,
     mediaUrlPrefix: PropTypes.instanceOf(RegExp),
     imageParams: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]).isRequired),
+    emptyFieldEditingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
 };
 NextImage.displayName = 'NextImage';

package/dist/esm/components/RichText.js

@@ -17,7 +17,7 @@ const prefetched = {};
 export const RichText = (props) => {
     const { internalLinksSelector = 'a[href^="/"]', prefetchLinks = true, editable = true } = props, rest = __rest(props, ["internalLinksSelector", "prefetchLinks", "editable"]);
     const hasText = props.field && props.field.value;
-    const isEditing = editable && props.field && props.field.editable;
+    const isEditing = editable && props.field && (props.field.editable || props.field.metadata);
     const router = useRouter();
     const richTextRef = useRef(null);
     useEffect(() => {
@@ -49,7 +49,7 @@ export const RichText = (props) => {
             link.addEventListener('click', routeHandler, false);
         });
     };
-    return React.createElement(ReactRichText, Object.assign({ ref: richTextRef }, rest));
+    return React.createElement(ReactRichText, Object.assign({ ref: richTextRef, editable: editable }, rest));
 };
 RichText.propTypes = Object.assign({ internalLinksSelector: PropTypes.string }, RichTextPropTypes);
 RichText.displayName = 'NextRichText';

package/dist/esm/index.js

@@ -20,4 +20,4 @@ export { FEaaSWrapper };
 export { BYOCWrapper };
 export { ComponentBuilder } from './ComponentBuilder';
 export { Context } from './context';
-export { Image, Text, DateField, EditFrame, FEaaSComponent, fetchFEaaSComponentServerProps, BYOCComponent, getComponentLibraryStylesheetLinks, File, VisitorIdentification, SitecoreContext, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, withFieldMetadata, EditingScripts, } from '@sitecore-jss/sitecore-jss-react';
+export { Image, Text, DateField, EditFrame, FEaaSComponent, fetchFEaaSComponentServerProps, BYOCComponent, getComponentLibraryStylesheetLinks, File, DefaultEmptyFieldEditingComponentImage, DefaultEmptyFieldEditingComponentText, VisitorIdentification, SitecoreContext, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, withFieldMetadata, withEmptyFieldEditingComponent, EditingScripts, } from '@sitecore-jss/sitecore-jss-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-nextjs",
-  "version": "22.1.0-canary.41",
+  "version": "22.1.0-canary.42",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -72,9 +72,9 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^22.1.0-canary.41",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^22.1.0-canary.41",
-    "@sitecore-jss/sitecore-jss-react": "^22.1.0-canary.41",
+    "@sitecore-jss/sitecore-jss": "^22.1.0-canary.42",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^22.1.0-canary.42",
+    "@sitecore-jss/sitecore-jss-react": "^22.1.0-canary.42",
     "@vercel/kv": "^0.2.1",
     "prop-types": "^15.8.1",
     "regex-parser": "^2.2.11",
@@ -82,7 +82,7 @@
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "4125328e86f3325f6ad9bce2c36da0fd904642bd",
+  "gitHead": "1747f39006e5d311aa26c0251c178f11b2281913",
   "files": [
     "dist",
     "types",

package/types/components/RichText.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="@types/react" />
+import React from 'react';
 import PropTypes from 'prop-types';
 import { RichTextProps as ReactRichTextProps } from '@sitecore-jss/sitecore-jss-react';
 export type RichTextProps = ReactRichTextProps & {
@@ -25,6 +27,7 @@ export declare const RichText: {
         }>>;
         tag: PropTypes.Requireable<string>;
         editable: PropTypes.Requireable<boolean>;
+        emptyFieldEditingComponent: PropTypes.Requireable<NonNullable<React.ComponentClass<unknown, any> | React.FC<unknown>>>;
         internalLinksSelector: PropTypes.Requireable<string>;
     };
     displayName: string;

package/types/index.d.ts

@@ -23,4 +23,4 @@ export { FEaaSWrapper };
 export { BYOCWrapper };
 export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder';
 export { Context, ContextConfig, SDK } from './context';
-export { ComponentFactory, Image, ImageField, ImageFieldValue, ImageProps, LinkField, LinkFieldValue, Text, TextField, DateField, EditFrame, FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, BYOCComponentParams, BYOCComponent, BYOCComponentProps, getComponentLibraryStylesheetLinks, File, FileField, RichTextField, VisitorIdentification, PlaceholderComponentProps, SitecoreContext, SitecoreContextState, SitecoreContextValue, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, ImageSizeParameters, WithSitecoreContextOptions, WithSitecoreContextProps, WithSitecoreContextHocProps, withFieldMetadata, EditingScripts, } from '@sitecore-jss/sitecore-jss-react';
+export { ComponentFactory, Image, ImageField, ImageFieldValue, ImageProps, LinkField, LinkFieldValue, Text, TextField, DateField, EditFrame, FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, BYOCComponentParams, BYOCComponent, BYOCComponentProps, getComponentLibraryStylesheetLinks, File, FileField, RichTextField, DefaultEmptyFieldEditingComponentImage, DefaultEmptyFieldEditingComponentText, VisitorIdentification, PlaceholderComponentProps, SitecoreContext, SitecoreContextState, SitecoreContextValue, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, ImageSizeParameters, WithSitecoreContextOptions, WithSitecoreContextProps, WithSitecoreContextHocProps, withFieldMetadata, withEmptyFieldEditingComponent, EditingScripts, } from '@sitecore-jss/sitecore-jss-react';