@sitecore-jss/sitecore-jss-react 20.0.2 → 20.1.0-canary.2

package/dist/cjs/components/PlaceholderCommon.js

@@ -17,9 +17,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlaceholderCommon = void 0;
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
-const MissingComponent_1 = require("../components/MissingComponent");
+const MissingComponent_1 = require("./MissingComponent");
 const utils_1 = require("../utils");
 const HiddenRendering_1 = require("./HiddenRendering");
+/** [SXA] common marker by which we find container fo replacing **/
+const PREFIX_PLACEHOLDER = 'container-{*}';
 class PlaceholderCommon extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -31,6 +33,12 @@ class PlaceholderCommon extends react_1.default.Component {
     }
     static getPlaceholderDataFromRenderingData(rendering, name) {
         let result;
+        /** [SXA] it needs for deleting dynamics placeholder when we set him number(props.name) of container.
+        from backend side we get common name of placeholder is called 'container-{*}' where '{*}' marker for replacing **/
+        if (rendering && rendering.placeholders && rendering.placeholders[PREFIX_PLACEHOLDER]) {
+            rendering.placeholders[name] = rendering.placeholders[PREFIX_PLACEHOLDER];
+            delete rendering.placeholders[PREFIX_PLACEHOLDER];
+        }
         if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
             result = rendering.placeholders[name];
         }
@@ -52,6 +60,11 @@ class PlaceholderCommon extends react_1.default.Component {
     componentDidCatch(error) {
         this.setState({ error });
     }
+    getSXAParams(rendering) {
+        return (rendering.params.FieldNames && {
+            styles: `${rendering.params.GridParameters || ''} ${rendering.params.Styles || ''}`,
+        });
+    }
     getComponentsForRenderingData(placeholderData) {
         const _a = this.props, { name, fields: placeholderFields, params: placeholderParams, missingComponentComponent, hiddenRenderingComponent } = _a, placeholderProps = __rest(_a, ["name", "fields", "params", "missingComponentComponent", "hiddenRenderingComponent"]);
         return placeholderData
@@ -80,18 +93,23 @@ class PlaceholderCommon extends react_1.default.Component {
             const finalProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), placeholderProps), ((placeholderFields || componentRendering.fields) && {
                 fields: Object.assign(Object.assign({}, placeholderFields), componentRendering.fields),
             })), ((placeholderParams || componentRendering.params) && {
-                params: Object.assign(Object.assign({}, placeholderParams), componentRendering.params),
+                params: Object.assign(Object.assign(Object.assign({}, placeholderParams), componentRendering.params), this.getSXAParams(componentRendering)),
             })), { rendering: componentRendering });
             return react_1.default.createElement(component, this.props.modifyComponentProps ? this.props.modifyComponentProps(finalProps) : finalProps);
         })
             .filter((element) => element); // remove nulls
     }
     getComponentForRendering(renderingDefinition) {
+        var _a;
         const componentFactory = this.props.componentFactory;
         if (!componentFactory || typeof componentFactory !== 'function') {
             console.warn(`No componentFactory was available to service request for component ${renderingDefinition}`);
             return null;
         }
+        // Render SXA Rendering Variant
+        if ((_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.FieldNames) {
+            return componentFactory(renderingDefinition.componentName, renderingDefinition.params.FieldNames);
+        }
         return componentFactory(renderingDefinition.componentName);
     }
     addRef(nodeRef) {

package/dist/cjs/enhancers/withComponentFactory.js

@@ -6,12 +6,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withComponentFactory = void 0;
 const react_1 = __importDefault(require("react"));
 const SitecoreContext_1 = require("../components/SitecoreContext");
+const react_2 = require("react");
 /**
  * @param {React.ComponentClass<T> | React.SFC<T>} Component
  */
 function withComponentFactory(Component) {
-    return function WithComponentFactory(props) {
-        return (react_1.default.createElement(SitecoreContext_1.ComponentFactoryReactContext.Consumer, null, (context) => react_1.default.createElement(Component, Object.assign({}, props, { componentFactory: props.componentFactory || context }))));
-    };
+    /**
+     * @param {T} props - props to pass to the wrapped component
+     * @returns {JSX.Element} - the rendered component
+     */
+    function WithComponentFactory(props) {
+        const context = react_2.useContext(SitecoreContext_1.ComponentFactoryReactContext);
+        return react_1.default.createElement(Component, Object.assign({}, props, { componentFactory: props.componentFactory || context }));
+    }
+    WithComponentFactory.displayName = `withComponentFactory(${Component.displayName ||
+        Component.name ||
+        'Anonymous'})`;
+    return WithComponentFactory;
 }
 exports.withComponentFactory = withComponentFactory;

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withDatasourceCheck = exports.withPlaceholder = exports.withExperienceEditorChromes = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.Image = exports.Placeholder = exports.mediaApi = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.resetEditorChromes = exports.isEditorActive = exports.resetExperienceEditorChromes = exports.isExperienceEditorActive = exports.constants = void 0;
+exports.withDatasourceCheck = exports.withPlaceholder = exports.withExperienceEditorChromes = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.resetEditorChromes = exports.isEditorActive = exports.resetExperienceEditorChromes = exports.isExperienceEditorActive = exports.constants = void 0;
 var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
 var utils_1 = require("@sitecore-jss/sitecore-jss/utils");
@@ -25,6 +25,7 @@ var Placeholder_1 = require("./components/Placeholder");
 Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
 var Image_1 = require("./components/Image");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return Image_1.Image; } });
+Object.defineProperty(exports, "getEEMarkup", { enumerable: true, get: function () { return Image_1.getEEMarkup; } });
 var RichText_1 = require("./components/RichText");
 Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichText_1.RichText; } });
 Object.defineProperty(exports, "RichTextPropTypes", { enumerable: true, get: function () { return RichText_1.RichTextPropTypes; } });

package/dist/cjs/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertAttributesToReactProps = exports.convertStyleAttribute = exports.convertKebabCasetoCamelCase = void 0;
+exports.addClassName = exports.convertAttributesToReactProps = exports.convertStyleAttribute = exports.convertKebabCasetoCamelCase = void 0;
 const style_attr_1 = require("style-attr");
 // https://stackoverflow.com/a/10426674/9324
 const convertKebabCasetoCamelCase = (str) => str.replace(/^.|-./g, (letter, index) => index === 0 ? letter.toLowerCase() : letter.substr(1).toUpperCase());
@@ -48,3 +48,23 @@ const convertAttributesToReactProps = (attributes) => {
     }, {});
 };
 exports.convertAttributesToReactProps = convertAttributesToReactProps;
+/**
+ * "class" property will be transformed into or appended to "className" instead.
+ * @param {string} otherAttrs all other props included on the image component
+ * * @returns {void}
+ */
+const addClassName = (otherAttrs) => {
+    if (otherAttrs.class) {
+        // if any classes are defined properly already
+        if (otherAttrs.className) {
+            let className = otherAttrs.className;
+            className += ` ${otherAttrs.class}`;
+            otherAttrs.className = className;
+        }
+        else {
+            otherAttrs.className = otherAttrs.class;
+        }
+        delete otherAttrs.class;
+    }
+};
+exports.addClassName = addClassName;

package/dist/esm/components/Image.js

@@ -13,7 +13,7 @@ import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { convertAttributesToReactProps } from '../utils';
+import { addClassName, convertAttributesToReactProps } from '../utils';
 const getEditableWrapper = (editableMarkup, ...otherProps) => (
 // create an inline wrapper and use dangerouslySetInnerHTML.
 // if we try to parse the EE value, the parser will strip invalid or disallowed attributes from html elements - and EE uses several
@@ -23,6 +23,7 @@ const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
     if (!src) {
         return null;
     }
+    addClassName(otherAttrs);
     const newAttrs = Object.assign({}, otherAttrs);
     // update image URL for jss handler and image rendering params
     const resolvedSrc = mediaApi.updateImageUrl(src, imageParams, mediaUrlPrefix);
@@ -34,6 +35,30 @@ const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
     newAttrs.src = resolvedSrc;
     return newAttrs;
 };
+/**
+ * @param imageField {ImageField} provides the dynamicMedia which is used to render the image
+ * @param imageParams {ImageProp['imageParams']}} provides the image parameters that will be attached to the image URL
+ * @param mediaUrlPrefix {RegExp} the url prefix regex used in the mediaApi
+ * @param otherProps {ImageProps} all other props included on the image component
+ * @returns Experience Editor Markup
+ */
+export const getEEMarkup = (imageField, imageParams, mediaUrlPrefix, otherProps) => {
+    // we likely have an experience editor value, should be a string
+    const foundImg = mediaApi.findEditorImageTag(imageField.editable);
+    if (!foundImg) {
+        return getEditableWrapper(imageField.editable);
+    }
+    const foundImgProps = convertAttributesToReactProps(foundImg.attrs);
+    // Note: otherProps may override values from foundImgProps, e.g. `style`, `className` prop
+    // We do not attempt to merge.
+    const imgAttrs = getImageAttrs(Object.assign(Object.assign({}, foundImgProps), otherProps), imageParams, mediaUrlPrefix);
+    if (!imgAttrs) {
+        return getEditableWrapper(imageField.editable);
+    }
+    const imgHtml = ReactDOMServer.renderToStaticMarkup(React.createElement("img", Object.assign({}, imgAttrs)));
+    const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
+    return getEditableWrapper(editableMarkup);
+};
 export const Image = (_a) => {
     var { media, editable, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["media", "editable", "imageParams", "field", "mediaUrlPrefix"]);
     // allows the mistake of using 'field' prop instead of 'media' (consistent with other helpers)
@@ -46,22 +71,8 @@ export const Image = (_a) => {
         return null;
     }
     const imageField = dynamicMedia;
-    // we likely have an experience editor value, should be a string
     if (editable && imageField.editable) {
-        const foundImg = mediaApi.findEditorImageTag(imageField.editable);
-        if (!foundImg) {
-            return getEditableWrapper(imageField.editable);
-        }
-        const foundImgProps = convertAttributesToReactProps(foundImg.attrs);
-        // Note: otherProps may override values from foundImgProps, e.g. `style`, `className` prop
-        // We do not attempt to merge.
-        const imgAttrs = getImageAttrs(Object.assign(Object.assign({}, foundImgProps), otherProps), imageParams, mediaUrlPrefix);
-        if (!imgAttrs) {
-            return getEditableWrapper(imageField.editable);
-        }
-        const imgHtml = ReactDOMServer.renderToStaticMarkup(React.createElement("img", Object.assign({}, imgAttrs)));
-        const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
-        return getEditableWrapper(editableMarkup);
+        return getEEMarkup(imageField, imageParams, mediaUrlPrefix, otherProps);
     }
     // some wise-guy/gal is passing in a 'raw' image object value
     const img = dynamicMedia.src

package/dist/esm/components/Placeholder.js

@@ -15,6 +15,7 @@ class PlaceholderComponent extends PlaceholderCommon {
         this.isEmpty = false;
     }
     componentDidMount() {
+        super.componentDidMount();
         if (this.isEmpty && HorizonEditor.isActive()) {
             HorizonEditor.resetChromes();
         }

package/dist/esm/components/PlaceholderCommon.js

@@ -11,9 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MissingComponent } from '../components/MissingComponent';
+import { MissingComponent } from './MissingComponent';
 import { convertAttributesToReactProps } from '../utils';
 import { HiddenRendering, HIDDEN_RENDERING_NAME } from './HiddenRendering';
+/** [SXA] common marker by which we find container fo replacing **/
+const PREFIX_PLACEHOLDER = 'container-{*}';
 export class PlaceholderCommon extends React.Component {
     constructor(props) {
         super(props);
@@ -25,6 +27,12 @@ export class PlaceholderCommon extends React.Component {
     }
     static getPlaceholderDataFromRenderingData(rendering, name) {
         let result;
+        /** [SXA] it needs for deleting dynamics placeholder when we set him number(props.name) of container.
+        from backend side we get common name of placeholder is called 'container-{*}' where '{*}' marker for replacing **/
+        if (rendering && rendering.placeholders && rendering.placeholders[PREFIX_PLACEHOLDER]) {
+            rendering.placeholders[name] = rendering.placeholders[PREFIX_PLACEHOLDER];
+            delete rendering.placeholders[PREFIX_PLACEHOLDER];
+        }
         if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
             result = rendering.placeholders[name];
         }
@@ -46,6 +54,11 @@ export class PlaceholderCommon extends React.Component {
     componentDidCatch(error) {
         this.setState({ error });
     }
+    getSXAParams(rendering) {
+        return (rendering.params.FieldNames && {
+            styles: `${rendering.params.GridParameters || ''} ${rendering.params.Styles || ''}`,
+        });
+    }
     getComponentsForRenderingData(placeholderData) {
         const _a = this.props, { name, fields: placeholderFields, params: placeholderParams, missingComponentComponent, hiddenRenderingComponent } = _a, placeholderProps = __rest(_a, ["name", "fields", "params", "missingComponentComponent", "hiddenRenderingComponent"]);
         return placeholderData
@@ -74,18 +87,23 @@ export class PlaceholderCommon extends React.Component {
             const finalProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), placeholderProps), ((placeholderFields || componentRendering.fields) && {
                 fields: Object.assign(Object.assign({}, placeholderFields), componentRendering.fields),
             })), ((placeholderParams || componentRendering.params) && {
-                params: Object.assign(Object.assign({}, placeholderParams), componentRendering.params),
+                params: Object.assign(Object.assign(Object.assign({}, placeholderParams), componentRendering.params), this.getSXAParams(componentRendering)),
             })), { rendering: componentRendering });
             return React.createElement(component, this.props.modifyComponentProps ? this.props.modifyComponentProps(finalProps) : finalProps);
         })
             .filter((element) => element); // remove nulls
     }
     getComponentForRendering(renderingDefinition) {
+        var _a;
         const componentFactory = this.props.componentFactory;
         if (!componentFactory || typeof componentFactory !== 'function') {
             console.warn(`No componentFactory was available to service request for component ${renderingDefinition}`);
             return null;
         }
+        // Render SXA Rendering Variant
+        if ((_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.FieldNames) {
+            return componentFactory(renderingDefinition.componentName, renderingDefinition.params.FieldNames);
+        }
         return componentFactory(renderingDefinition.componentName);
     }
     addRef(nodeRef) {

package/dist/esm/enhancers/withComponentFactory.js

@@ -1,10 +1,20 @@
 import React from 'react';
 import { ComponentFactoryReactContext } from '../components/SitecoreContext';
+import { useContext } from 'react';
 /**
  * @param {React.ComponentClass<T> | React.SFC<T>} Component
  */
 export function withComponentFactory(Component) {
-    return function WithComponentFactory(props) {
-        return (React.createElement(ComponentFactoryReactContext.Consumer, null, (context) => React.createElement(Component, Object.assign({}, props, { componentFactory: props.componentFactory || context }))));
-    };
+    /**
+     * @param {T} props - props to pass to the wrapped component
+     * @returns {JSX.Element} - the rendered component
+     */
+    function WithComponentFactory(props) {
+        const context = useContext(ComponentFactoryReactContext);
+        return React.createElement(Component, Object.assign({}, props, { componentFactory: props.componentFactory || context }));
+    }
+    WithComponentFactory.displayName = `withComponentFactory(${Component.displayName ||
+        Component.name ||
+        'Anonymous'})`;
+    return WithComponentFactory;
 }

package/dist/esm/index.js

@@ -5,7 +5,7 @@ export { trackingApi, } from '@sitecore-jss/sitecore-jss/tracking';
 export { GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { Placeholder } from './components/Placeholder';
-export { Image } from './components/Image';
+export { Image, getEEMarkup } from './components/Image';
 export { RichText, RichTextPropTypes } from './components/RichText';
 export { Text } from './components/Text';
 export { DateField } from './components/Date';

package/dist/esm/utils.js

@@ -42,3 +42,22 @@ export const convertAttributesToReactProps = (attributes) => {
         return result;
     }, {});
 };
+/**
+ * "class" property will be transformed into or appended to "className" instead.
+ * @param {string} otherAttrs all other props included on the image component
+ * * @returns {void}
+ */
+export const addClassName = (otherAttrs) => {
+    if (otherAttrs.class) {
+        // if any classes are defined properly already
+        if (otherAttrs.className) {
+            let className = otherAttrs.className;
+            className += ` ${otherAttrs.class}`;
+            otherAttrs.className = className;
+        }
+        else {
+            otherAttrs.className = otherAttrs.class;
+        }
+        delete otherAttrs.class;
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "20.0.2",
+  "version": "20.1.0-canary.2",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -61,12 +61,12 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^20.0.2",
+    "@sitecore-jss/sitecore-jss": "^20.1.0-canary.2",
     "deep-equal": "^2.0.5",
     "prop-types": "^15.7.2",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "4101e08d574129bcf190bbd79bda5ff7c9337122"
+  "gitHead": "fba4497292298d24067efc25dddc1a144ccd59df"
 }

package/tsconfig-esm.json

@@ -1,7 +1,7 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "es6",
-    "outDir": "dist/esm"
-  },
-}
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "es6",
+    "outDir": "dist/esm"
+  },
+}

package/types/components/Image.d.ts

@@ -55,4 +55,12 @@ export interface ImageProps {
      */
     mediaUrlPrefix?: RegExp;
 }
+/**
+ * @param imageField {ImageField} provides the dynamicMedia which is used to render the image
+ * @param imageParams {ImageProp['imageParams']}} provides the image parameters that will be attached to the image URL
+ * @param mediaUrlPrefix {RegExp} the url prefix regex used in the mediaApi
+ * @param otherProps {ImageProps} all other props included on the image component
+ * @returns Experience Editor Markup
+ */
+export declare const getEEMarkup: (imageField: ImageField, imageParams?: ImageProps['imageParams'], mediaUrlPrefix?: RegExp, otherProps?: ImageProps) => JSX.Element;
 export declare const Image: React.SFC<ImageProps>;

package/types/components/Placeholder.d.ts

@@ -18,4 +18,7 @@ export interface PlaceholderComponentProps extends PlaceholderProps {
      */
     renderEach?: (component: React.ReactNode, index: number) => React.ComponentClass<unknown> | React.SFC<unknown> | React.ReactNode;
 }
-export declare const Placeholder: (props: PlaceholderComponentProps) => JSX.Element;
+export declare const Placeholder: {
+    (props: PlaceholderComponentProps): JSX.Element;
+    displayName: string;
+};

package/types/components/PlaceholderCommon.d.ts

@@ -1,12 +1,12 @@
 import React, { ComponentType } from 'react';
 import PropTypes from 'prop-types';
-import { ComponentFactory } from '../components/sharedTypes';
+import { ComponentFactory } from './sharedTypes';
 import { ComponentRendering, RouteData, Field, Item, HtmlElementRendering } from '@sitecore-jss/sitecore-jss/layout';
 declare type ErrorComponentProps = {
     [prop: string]: unknown;
 };
 /** Provided for the component which represents rendering data */
-declare type ComponentProps = {
+export declare type ComponentProps = {
     [key: string]: unknown;
     rendering: ComponentRendering;
 };
@@ -80,12 +80,13 @@ export declare class PlaceholderCommon<T extends PlaceholderProps> extends React
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentDidCatch(error: Error): void;
+    getSXAParams(rendering: ComponentRendering): {
+        styles: string;
+    };
     getComponentsForRenderingData(placeholderData: (ComponentRendering | HtmlElementRendering)[]): React.ReactElement<{
         [attr: string]: unknown;
     }, string | React.JSXElementConstructor<any>>[];
-    getComponentForRendering(renderingDefinition: {
-        componentName: string;
-    }): ComponentType | null;
+    getComponentForRendering(renderingDefinition: ComponentRendering): ComponentType | null;
     addRef(nodeRef: Element): void;
     createRawElement(elem: HtmlElementRendering, baseProps: {
         key?: string;

package/types/components/sharedTypes.d.ts

@@ -1,2 +1,6 @@
 import { ComponentType } from 'react';
-export declare type ComponentFactory = (componentName: string) => ComponentType | null;
+/**
+ * @param {string} componentName component to be imported from the component factory
+ * @param {string?} exportName component to be imported in case you export multiple components from the same file
+ */
+export declare type ComponentFactory = (componentName: string, exportName?: string) => ComponentType | null;

package/types/enhancers/withComponentFactory.d.ts

@@ -6,4 +6,7 @@ export interface ComponentFactoryProps {
 /**
  * @param {React.ComponentClass<T> | React.SFC<T>} Component
  */
-export declare function withComponentFactory<T extends ComponentFactoryProps>(Component: React.ComponentClass<T> | React.SFC<T>): (props: T) => JSX.Element;
+export declare function withComponentFactory<T extends ComponentFactoryProps>(Component: React.ComponentClass<T> | React.SFC<T>): {
+    (props: T): JSX.Element;
+    displayName: string;
+};

package/types/enhancers/withPlaceholder.d.ts

@@ -31,4 +31,7 @@ export declare type WithPlaceholderSpec = (string | PlaceholderToPropMapping) |
  * @param {WithPlaceholderSpec} placeholders
  * @param {WithPlaceholderOptions} [options]
  */
-export declare function withPlaceholder(placeholders: WithPlaceholderSpec, options?: WithPlaceholderOptions): (WrappedComponent: React.ComponentClass<PlaceholderProps> | React.FunctionComponent<PlaceholderProps>) => (props: PlaceholderProps) => JSX.Element;
+export declare function withPlaceholder(placeholders: WithPlaceholderSpec, options?: WithPlaceholderOptions): (WrappedComponent: React.ComponentClass<PlaceholderProps> | React.FunctionComponent<PlaceholderProps>) => {
+    (props: PlaceholderProps): JSX.Element;
+    displayName: string;
+};

package/types/index.d.ts

@@ -6,7 +6,7 @@ export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, RestDic
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { ComponentFactory } from './components/sharedTypes';
 export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
-export { Image, ImageField } from './components/Image';
+export { Image, ImageProps, ImageField, getEEMarkup, ImageFieldValue } from './components/Image';
 export { RichText, RichTextProps, RichTextPropTypes, RichTextField } from './components/RichText';
 export { Text, TextField } from './components/Text';
 export { DateField } from './components/Date';

package/types/utils.d.ts

@@ -15,3 +15,11 @@ export declare const convertAttributesToReactProps: (attributes: {
 }) => [] | {
     [attr: string]: unknown;
 };
+/**
+ * "class" property will be transformed into or appended to "className" instead.
+ * @param {string} otherAttrs all other props included on the image component
+ * * @returns {void}
+ */
+export declare const addClassName: (otherAttrs: {
+    [key: string]: unknown;
+}) => void;