@sitecore-jss/sitecore-jss-react 22.9.1-canary.1 → 22.9.1-canary.2

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', style: inlineStyles, className: `scEmptyImage ${props.className || ''}` })));
 };
 exports.DefaultEmptyFieldEditingComponentImage = DefaultEmptyFieldEditingComponentImage;

package/dist/cjs/enhancers/withEmptyFieldEditingComponent.js

@@ -36,21 +36,28 @@ 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) {
         // eslint-disable-next-line react/display-name
         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 }))));
         });
     }
     // eslint-disable-next-line react/display-name
     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));
     };
 }
 exports.withEmptyFieldEditingComponent = withEmptyFieldEditingComponent;

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', style: inlineStyles, className: `scEmptyImage ${props.className || ''}` })));
 };

package/dist/esm/enhancers/withEmptyFieldEditingComponent.js

@@ -10,20 +10,27 @@ 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) {
         // eslint-disable-next-line react/display-name
         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 }))));
         });
     }
     // eslint-disable-next-line react/display-name
     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-jss/sitecore-jss-react",
-  "version": "22.9.1-canary.1",
+  "version": "22.9.1-canary.2",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -61,13 +61,13 @@
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "22.9.1-canary.1",
+    "@sitecore-jss/sitecore-jss": "22.9.1-canary.2",
     "fast-deep-equal": "^3.1.3",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "37948499e02360fcf6e7f262d241444451bda07d",
+  "gitHead": "2a48376b67f1278441ca21fecc9ec577bb797957",
   "files": [
     "dist",
     "types"

package/types/components/Date.d.ts

@@ -2,7 +2,7 @@
 import React from 'react';
 import { EditableFieldProps } from './sharedTypes';
 import { FieldMetadata } from '@sitecore-jss/sitecore-jss/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,4 +1,10 @@
 /// <reference types="@types/react" />
 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

@@ -27,7 +27,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

@@ -19,7 +19,7 @@ export interface LinkField {
     editableFirstPart?: string;
     editableLastPart?: string;
 }
-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

@@ -6,7 +6,7 @@ export interface RichTextField extends FieldMetadata {
     value?: string;
     editable?: 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

@@ -6,7 +6,7 @@ export interface TextField extends FieldMetadata {
     value?: string | number;
     editable?: string;
 }
-export interface TextProps extends EditableFieldProps {
+export interface TextProps extends EditableFieldProps<TextProps> {
     [htmlAttributes: string]: unknown;
     /** The text field data. */
     field?: TextField;

package/types/components/sharedTypes.d.ts

@@ -16,7 +16,7 @@ export type JssComponentType = ComponentType & {
 /**
  * Shared editing field props
  */
-export interface EditableFieldProps {
+export interface EditableFieldProps<EmptyFieldEditingComponentProps = unknown> {
     /**
      * Can be used to explicitly disable inline editing.
      * If true and `field.editable` has a value, then `field.editable` will be processed and rendered as component output. If false, `field.editable` value will be ignored and not rendered.
@@ -28,5 +28,5 @@ export interface EditableFieldProps {
      *
      * Custom element to render in Pages in Metadata 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

@@ -14,15 +14,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 {};