@sitecore-content-sdk/react 1.1.0-canary.40 → 1.1.0-canary.42

package/dist/cjs/components/DefaultEmptyFieldEditingComponents.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = void 0;
 const react_1 = __importDefault(require("react"));
-const DefaultEmptyFieldEditingComponentText = () => {
-    return react_1.default.createElement("span", null, "[No text in field]");
+const DefaultEmptyFieldEditingComponentText = (props) => {
+    return react_1.default.createElement(props.tag || 'span', props, '[No text in field]');
 };
 exports.DefaultEmptyFieldEditingComponentText = DefaultEmptyFieldEditingComponentText;
-const DefaultEmptyFieldEditingComponentImage = () => {
+const DefaultEmptyFieldEditingComponentImage = (props) => {
     const inlineStyles = {
         minWidth: '48px',
         minHeight: '48px',
@@ -17,6 +17,6 @@ const DefaultEmptyFieldEditingComponentImage = () => {
         maxHeight: '400px',
         cursor: 'pointer',
     };
-    return (react_1.default.createElement("img", { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: "scEmptyImage", style: inlineStyles }));
+    return (react_1.default.createElement("img", Object.assign({}, props, { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: `scEmptyImage ${props.className || ''}`, style: inlineStyles })));
 };
 exports.DefaultEmptyFieldEditingComponentImage = DefaultEmptyFieldEditingComponentImage;

package/dist/cjs/enhancers/withEmptyFieldEditingComponent.js

@@ -46,18 +46,25 @@ function withEmptyFieldEditingComponent(FieldComponent, options) {
         var _a;
         const { editable = true } = props;
         if (((_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata) && editable && (0, layout_1.isFieldValueEmpty)(props.field)) {
-            return props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
+            const Component = props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
+            let resolvedProps = props;
+            // If no custom empty field editing component is provided, we can omit unnecessary props
+            // to do not insert them to html
+            if (!props.emptyFieldEditingComponent) {
+                resolvedProps = Object.assign(Object.assign({}, props), { editable: undefined, field: undefined });
+            }
+            return react_1.default.createElement(Component, Object.assign({}, resolvedProps));
         }
         return null;
     };
     if (options.isForwardRef) {
         return (0, react_1.forwardRef)((props, ref) => {
-            const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
-            return (react_1.default.createElement(react_1.default.Fragment, null, (EmptyFieldEditingComponent && react_1.default.createElement(EmptyFieldEditingComponent, null)) || (react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref })))));
+            const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+            return (emptyFieldEditingComponent || (react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
         });
     }
     return (props) => {
-        const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
-        return (react_1.default.createElement(react_1.default.Fragment, null, (EmptyFieldEditingComponent && react_1.default.createElement(EmptyFieldEditingComponent, null)) || (react_1.default.createElement(FieldComponent, Object.assign({}, props)))));
+        const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+        return emptyFieldEditingComponent || react_1.default.createElement(FieldComponent, Object.assign({}, props));
     };
 }

package/dist/esm/components/DefaultEmptyFieldEditingComponents.js

@@ -1,8 +1,8 @@
 import React from 'react';
-export const DefaultEmptyFieldEditingComponentText = () => {
-    return React.createElement("span", null, "[No text in field]");
+export const DefaultEmptyFieldEditingComponentText = (props) => {
+    return React.createElement(props.tag || 'span', props, '[No text in field]');
 };
-export const DefaultEmptyFieldEditingComponentImage = () => {
+export const DefaultEmptyFieldEditingComponentImage = (props) => {
     const inlineStyles = {
         minWidth: '48px',
         minHeight: '48px',
@@ -10,5 +10,5 @@ export const DefaultEmptyFieldEditingComponentImage = () => {
         maxHeight: '400px',
         cursor: 'pointer',
     };
-    return (React.createElement("img", { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: "scEmptyImage", style: inlineStyles }));
+    return (React.createElement("img", Object.assign({}, props, { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: `scEmptyImage ${props.className || ''}`, style: inlineStyles })));
 };

package/dist/esm/enhancers/withEmptyFieldEditingComponent.js

@@ -10,18 +10,25 @@ export function withEmptyFieldEditingComponent(FieldComponent, options) {
         var _a;
         const { editable = true } = props;
         if (((_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata) && editable && isFieldValueEmpty(props.field)) {
-            return props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
+            const Component = props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
+            let resolvedProps = props;
+            // If no custom empty field editing component is provided, we can omit unnecessary props
+            // to do not insert them to html
+            if (!props.emptyFieldEditingComponent) {
+                resolvedProps = Object.assign(Object.assign({}, props), { editable: undefined, field: undefined });
+            }
+            return React.createElement(Component, Object.assign({}, resolvedProps));
         }
         return null;
     };
     if (options.isForwardRef) {
         return forwardRef((props, ref) => {
-            const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
-            return (React.createElement(React.Fragment, null, (EmptyFieldEditingComponent && React.createElement(EmptyFieldEditingComponent, null)) || (React.createElement(FieldComponent, Object.assign({}, props, { ref: ref })))));
+            const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+            return (emptyFieldEditingComponent || (React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
         });
     }
     return (props) => {
-        const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
-        return (React.createElement(React.Fragment, null, (EmptyFieldEditingComponent && React.createElement(EmptyFieldEditingComponent, null)) || (React.createElement(FieldComponent, Object.assign({}, props)))));
+        const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+        return emptyFieldEditingComponent || React.createElement(FieldComponent, Object.assign({}, props));
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-content-sdk/react",
-  "version": "1.1.0-canary.40",
+  "version": "1.1.0-canary.42",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -72,12 +72,12 @@
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@sitecore-content-sdk/core": "1.1.0-canary.40",
+    "@sitecore-content-sdk/core": "1.1.0-canary.42",
     "fast-deep-equal": "^3.1.3"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "961243c99c4a31188f7a0ca9b3fb7d6e8199e16a",
+  "gitHead": "fb95f0f3aab093cb6af38ea85919873b4cf10032",
   "files": [
     "dist",
     "types"

package/types/components/Date.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { EditableFieldProps } from './sharedTypes';
 import { FieldMetadata } from '@sitecore-content-sdk/core/layout';
-export interface DateFieldProps extends EditableFieldProps {
+export interface DateFieldProps extends EditableFieldProps<DateFieldProps> {
     /** The date field data. */
     [htmlAttributes: string]: unknown;
     field: FieldMetadata & {

package/types/components/DefaultEmptyFieldEditingComponents.d.ts

@@ -1,3 +1,9 @@
 import React from 'react';
-export declare const DefaultEmptyFieldEditingComponentText: React.FC;
-export declare const DefaultEmptyFieldEditingComponentImage: React.FC;
+export declare const DefaultEmptyFieldEditingComponentText: React.FC<{
+    [key: string]: unknown;
+    tag?: string;
+}>;
+export declare const DefaultEmptyFieldEditingComponentImage: React.FC<{
+    [key: string]: unknown;
+    className?: string;
+}>;

package/types/components/Image.d.ts

@@ -25,7 +25,7 @@ export interface ImageSizeParameters {
     /** Image scale. Defaults to 1.0 */
     sc?: number;
 }
-export interface ImageProps extends EditableFieldProps {
+export interface ImageProps extends EditableFieldProps<ImageProps> {
     [attributeName: string]: unknown;
     /** Image field data (consistent with other field types) */
     field?: (ImageField | ImageFieldValue) & FieldMetadata;

package/types/components/Link.d.ts

@@ -16,7 +16,7 @@ export interface LinkFieldValue {
 export interface LinkField {
     value: LinkFieldValue;
 }
-export type LinkProps = EditableFieldProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement> & {
+export type LinkProps = EditableFieldProps<LinkProps> & React.AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement> & {
     /** The link field data. */
     field: (LinkField | LinkFieldValue) & FieldMetadata;
     /**

package/types/components/RichText.d.ts

@@ -4,7 +4,7 @@ import { FieldMetadata } from '@sitecore-content-sdk/core/layout';
 export interface RichTextField extends FieldMetadata {
     value?: string;
 }
-export interface RichTextProps extends EditableFieldProps {
+export interface RichTextProps extends EditableFieldProps<RichTextProps> {
     [htmlAttributes: string]: unknown;
     /** The rich text field data. */
     field?: RichTextField;

package/types/components/Text.d.ts

@@ -4,7 +4,7 @@ import { FieldMetadata } from '@sitecore-content-sdk/core/layout';
 export interface TextField extends FieldMetadata {
     value?: string | number;
 }
-export interface TextProps extends EditableFieldProps {
+export interface TextProps extends EditableFieldProps<TextProps> {
     [htmlAttributes: string]: unknown;
     /** The text field data. */
     field?: TextField;

package/types/components/sharedTypes/props.d.ts

@@ -1,7 +1,7 @@
 /**
  * Shared editing field props
  */
-export interface EditableFieldProps {
+export interface EditableFieldProps<EmptyFieldEditingComponentProps = unknown> {
     /**
      * Can be used to explicitly disable inline editing.
      * @default true
@@ -10,5 +10,5 @@ export interface EditableFieldProps {
     /**
      * Custom element to render in Pages in edit mode if field value is empty
      */
-    emptyFieldEditingComponent?: React.ComponentClass<unknown> | React.FC<unknown>;
+    emptyFieldEditingComponent?: React.ComponentClass<EmptyFieldEditingComponentProps> | React.FC<EmptyFieldEditingComponentProps>;
 }

package/types/enhancers/withEmptyFieldEditingComponent.d.ts

@@ -13,15 +13,15 @@ export interface WithEmptyFieldEditingComponentOptions {
      */
     isForwardRef?: boolean;
 }
-interface WithEmptyFieldEditingComponentProps {
+interface WithEmptyFieldEditingComponentProps<Props> {
     field?: (Partial<Field> | GenericFieldValue) & FieldMetadata;
     editable?: boolean;
-    emptyFieldEditingComponent?: React.ComponentClass | React.FC;
+    emptyFieldEditingComponent?: React.ComponentClass<Props> | React.FC<Props>;
 }
 /**
  * Returns the passed field component or default component in case field value is empty and edit mode is 'metadata'
  * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
  * @param {WithEmptyFieldEditingComponentProps} options the options of the HOC;
  */
-export declare function withEmptyFieldEditingComponent<FieldComponentProps extends WithEmptyFieldEditingComponentProps, RefElementType = HTMLElement>(FieldComponent: ComponentType<FieldComponentProps>, options: WithEmptyFieldEditingComponentOptions): React.ForwardRefExoticComponent<React.PropsWithoutRef<FieldComponentProps> & React.RefAttributes<RefElementType>> | ((props: FieldComponentProps) => React.JSX.Element);
+export declare function withEmptyFieldEditingComponent<FieldComponentProps extends WithEmptyFieldEditingComponentProps<FieldComponentProps>, RefElementType = HTMLElement>(FieldComponent: ComponentType<FieldComponentProps>, options: WithEmptyFieldEditingComponentOptions): React.ForwardRefExoticComponent<React.PropsWithoutRef<FieldComponentProps> & React.RefAttributes<RefElementType>> | ((props: FieldComponentProps) => React.JSX.Element);
 export {};