@sitecore-jss/sitecore-jss-react 21.1.0-canary.99 → 21.1.1

package/README.md

@@ -2,9 +2,7 @@
 
 This module is provided as a part of Sitecore JavaScript Rendering SDK (JSS). It contains React components and integration for JSS.
 
-<!---
-@TODO: Update to version 20.0.0 docs before release
--->
-[Documentation](https://doc.sitecore.com/xp/en/developers/hd/190/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-react.html)
 
-[API reference documentation](/ref-docs/sitecore-jss-react/).
+[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/210/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-react.html)
+
+[API reference documentation](/ref-docs/sitecore-jss-react/)

package/dist/cjs/components/EditFrame.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditFrame = void 0;
+const react_1 = __importDefault(require("react"));
+const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
+const utils_1 = require("@sitecore-jss/sitecore-jss/utils");
+const EditFrame = ({ children, dataSource, buttons, title, tooltip, cssClass, parameters, }) => {
+    var _a;
+    const { sitecoreContext } = (0, withSitecoreContext_1.useSitecoreContext)();
+    if (!sitecoreContext.pageEditing) {
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+    const chromeData = {
+        displayName: title,
+        expandedDisplayName: tooltip,
+    };
+    const frameProps = {};
+    frameProps.className = 'scLooseFrameZone';
+    if (cssClass) {
+        frameProps.className = `${frameProps.className} ${cssClass}`;
+    }
+    // item uri for edit frame target
+    if (dataSource) {
+        const databaseName = dataSource.databaseName || ((_a = sitecoreContext.route) === null || _a === void 0 ? void 0 : _a.databaseName);
+        const language = dataSource.language || sitecoreContext.language;
+        frameProps.sc_item = `sitecore://${databaseName}/${dataSource.itemId}?lang=${language}`;
+        chromeData.contextItemUri = frameProps.sc_item;
+    }
+    chromeData.commands = buttons === null || buttons === void 0 ? void 0 : buttons.map((value) => {
+        return (0, utils_1.mapButtonToCommand)(value, dataSource === null || dataSource === void 0 ? void 0 : dataSource.itemId, parameters);
+    });
+    return (react_1.default.createElement("div", Object.assign({ className: "scLooseFrameZone" }, frameProps),
+        react_1.default.createElement("span", { className: "scChromeData" }, JSON.stringify(chromeData)),
+        children));
+};
+exports.EditFrame = EditFrame;

package/dist/cjs/components/FEaaSComponent.js

@@ -84,8 +84,10 @@ const FEaaSComponent = ({ params, fields }) => {
         optProps.dangerouslySetInnerHTML = { __html: params.ComponentHTMLOverride };
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("feaas-stylesheet", { library: reqProps.library, cdn: reqProps.cdn },
-            react_1.default.createElement("link", { rel: "stylesheet", href: `${reqProps.cdn}/styles/${reqProps.library}/published.css` })),
+        react_1.default.createElement("link", { rel: "preload", as: "style", href: `${reqProps.cdn}/styles/${reqProps.library}/published.css` }),
+        react_1.default.createElement("link", { rel: "preload", as: "fetch", href: `${reqProps.cdn}/components/${reqProps.library}/${reqProps.component}/${reqProps.version}/${reqProps.revision}.html` }),
+        react_1.default.createElement("link", { rel: "preload", as: "script", href: exports.FEAAS_MODULE_SRC }),
+        react_1.default.createElement("feaas-stylesheet", { library: reqProps.library, cdn: reqProps.cdn }),
         react_1.default.createElement("feaas-component", Object.assign({}, reqProps, optProps))));
 };
 exports.FEaaSComponent = FEaaSComponent;

package/dist/cjs/components/Link.js

@@ -79,7 +79,7 @@ exports.Link = (0, react_1.forwardRef)((_a, ref) => {
     if (!link) {
         return null;
     }
-    const anchor = link.anchor ? `#${link.anchor}` : '';
+    const anchor = link.linktype !== 'anchor' && link.anchor ? `#${link.anchor}` : '';
     const querystring = link.querystring ? `?${link.querystring}` : '';
     const anchorAttrs = {
         href: `${link.href}${querystring}${anchor}`,

package/dist/cjs/components/PlaceholderCommon.js

@@ -73,6 +73,8 @@ class PlaceholderCommon extends react_1.default.Component {
         this.setState({ error });
     }
     getSXAParams(rendering) {
+        if (!rendering.params)
+            return {};
         return (rendering.params.FieldNames && {
             styles: `${rendering.params.GridParameters || ''} ${rendering.params.Styles || ''}`,
         });

package/dist/cjs/index.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.FEaaSComponent = 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.enableDebug = exports.constants = void 0;
+exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.FEaaSComponent = 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.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.enableDebug = 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; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return sitecore_jss_1.enableDebug; } });
 var utils_1 = require("@sitecore-jss/sitecore-jss/utils");
 Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return utils_1.isEditorActive; } });
 Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return utils_1.resetEditorChromes; } });
+Object.defineProperty(exports, "DefaultEditFrameButton", { enumerable: true, get: function () { return utils_1.DefaultEditFrameButton; } });
+Object.defineProperty(exports, "DefaultEditFrameButtons", { enumerable: true, get: function () { return utils_1.DefaultEditFrameButtons; } });
 var layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 Object.defineProperty(exports, "LayoutServicePageState", { enumerable: true, get: function () { return layout_1.LayoutServicePageState; } });
 Object.defineProperty(exports, "GraphQLLayoutService", { enumerable: true, get: function () { return layout_1.GraphQLLayoutService; } });
@@ -53,3 +55,5 @@ var withPlaceholder_1 = require("./enhancers/withPlaceholder");
 Object.defineProperty(exports, "withPlaceholder", { enumerable: true, get: function () { return withPlaceholder_1.withPlaceholder; } });
 var withDatasourceCheck_1 = require("./enhancers/withDatasourceCheck");
 Object.defineProperty(exports, "withDatasourceCheck", { enumerable: true, get: function () { return withDatasourceCheck_1.withDatasourceCheck; } });
+var EditFrame_1 = require("./components/EditFrame");
+Object.defineProperty(exports, "EditFrame", { enumerable: true, get: function () { return EditFrame_1.EditFrame; } });

package/dist/esm/components/EditFrame.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useSitecoreContext } from '../enhancers/withSitecoreContext';
+import { mapButtonToCommand, } from '@sitecore-jss/sitecore-jss/utils';
+export const EditFrame = ({ children, dataSource, buttons, title, tooltip, cssClass, parameters, }) => {
+    var _a;
+    const { sitecoreContext } = useSitecoreContext();
+    if (!sitecoreContext.pageEditing) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    const chromeData = {
+        displayName: title,
+        expandedDisplayName: tooltip,
+    };
+    const frameProps = {};
+    frameProps.className = 'scLooseFrameZone';
+    if (cssClass) {
+        frameProps.className = `${frameProps.className} ${cssClass}`;
+    }
+    // item uri for edit frame target
+    if (dataSource) {
+        const databaseName = dataSource.databaseName || ((_a = sitecoreContext.route) === null || _a === void 0 ? void 0 : _a.databaseName);
+        const language = dataSource.language || sitecoreContext.language;
+        frameProps.sc_item = `sitecore://${databaseName}/${dataSource.itemId}?lang=${language}`;
+        chromeData.contextItemUri = frameProps.sc_item;
+    }
+    chromeData.commands = buttons === null || buttons === void 0 ? void 0 : buttons.map((value) => {
+        return mapButtonToCommand(value, dataSource === null || dataSource === void 0 ? void 0 : dataSource.itemId, parameters);
+    });
+    return (React.createElement("div", Object.assign({ className: "scLooseFrameZone" }, frameProps),
+        React.createElement("span", { className: "scChromeData" }, JSON.stringify(chromeData)),
+        children));
+};

package/dist/esm/components/FEaaSComponent.js

@@ -58,7 +58,9 @@ export const FEaaSComponent = ({ params, fields }) => {
         optProps.dangerouslySetInnerHTML = { __html: params.ComponentHTMLOverride };
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement("feaas-stylesheet", { library: reqProps.library, cdn: reqProps.cdn },
-            React.createElement("link", { rel: "stylesheet", href: `${reqProps.cdn}/styles/${reqProps.library}/published.css` })),
+        React.createElement("link", { rel: "preload", as: "style", href: `${reqProps.cdn}/styles/${reqProps.library}/published.css` }),
+        React.createElement("link", { rel: "preload", as: "fetch", href: `${reqProps.cdn}/components/${reqProps.library}/${reqProps.component}/${reqProps.version}/${reqProps.revision}.html` }),
+        React.createElement("link", { rel: "preload", as: "script", href: FEAAS_MODULE_SRC }),
+        React.createElement("feaas-stylesheet", { library: reqProps.library, cdn: reqProps.cdn }),
         React.createElement("feaas-component", Object.assign({}, reqProps, optProps))));
 };

package/dist/esm/components/Link.js

@@ -50,7 +50,7 @@ export const Link = forwardRef((_a, ref) => {
     if (!link) {
         return null;
     }
-    const anchor = link.anchor ? `#${link.anchor}` : '';
+    const anchor = link.linktype !== 'anchor' && link.anchor ? `#${link.anchor}` : '';
     const querystring = link.querystring ? `?${link.querystring}` : '';
     const anchorAttrs = {
         href: `${link.href}${querystring}${anchor}`,

package/dist/esm/components/PlaceholderCommon.js

@@ -67,6 +67,8 @@ export class PlaceholderCommon extends React.Component {
         this.setState({ error });
     }
     getSXAParams(rendering) {
+        if (!rendering.params)
+            return {};
         return (rendering.params.FieldNames && {
             styles: `${rendering.params.GridParameters || ''} ${rendering.params.Styles || ''}`,
         });

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 export { constants, enableDebug } from '@sitecore-jss/sitecore-jss';
-export { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/utils';
+export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, } from '@sitecore-jss/sitecore-jss/utils';
 export { LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, } from '@sitecore-jss/sitecore-jss/layout';
 export { trackingApi, } from '@sitecore-jss/sitecore-jss/tracking';
 export { GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
@@ -18,3 +18,4 @@ export { withSitecoreContext, useSitecoreContext, } from './enhancers/withSiteco
 export { withEditorChromes } from './enhancers/withEditorChromes';
 export { withPlaceholder } from './enhancers/withPlaceholder';
 export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
+export { EditFrame } from './components/EditFrame';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "21.1.0-canary.99",
+  "version": "21.1.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -10,8 +10,7 @@
     "lint": "eslint ./src/**/*.tsx ./src/**/*.ts",
     "test": "mocha --require ts-node/register/transpile-only --require ./src/tests/shim.ts ./src/tests/jsdom-setup.ts ./src/tests/enzyme-setup.ts \"./src/**/*.test.ts\" \"./src/**/*.test.tsx\" --exit",
     "prepublishOnly": "npm run build",
-    "coverage": "nyc npm test",
-    "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --readme none --out ../../ref-docs/sitecore-jss-react src/index.ts --githubPages false"
+    "coverage": "nyc npm test"
   },
   "engines": {
     "node": ">=12",
@@ -27,7 +26,7 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
-    "@sitecore-feaas/clientside": "^0.1.17",
+    "@sitecore-feaas/clientside": "^0.1.24",
     "@types/chai": "^4.3.4",
     "@types/chai-string": "^1.4.2",
     "@types/deep-equal": "^1.0.1",
@@ -62,7 +61,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^21.1.0-canary.99",
+    "@sitecore-jss/sitecore-jss": "^21.1.1",
     "deep-equal": "^2.1.0",
     "html-react-parser": "^3.0.4",
     "prop-types": "^15.8.1",
@@ -70,7 +69,7 @@
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "5b1755d4be55645818169d278dd204543d1351d8",
+  "gitHead": "ae9d7fc994fa11061b5a164ff6a86b3ccf845a4c",
   "files": [
     "dist",
     "types"

package/types/components/EditFrame.d.ts

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react';
+import { EditFrameDataSource, EditButtonTypes } from '@sitecore-jss/sitecore-jss/utils';
+export interface EditFrameProps {
+    dataSource?: EditFrameDataSource;
+    buttons?: EditButtonTypes[];
+    title?: string;
+    tooltip?: string;
+    cssClass?: string;
+    parameters?: Record<string, string | number | boolean | undefined | null>;
+}
+export declare const EditFrame: React.FC<PropsWithChildren<EditFrameProps>>;

package/types/components/Link.d.ts

@@ -10,6 +10,7 @@ export interface LinkFieldValue {
     text?: string;
     anchor?: string;
     querystring?: string;
+    linktype?: string;
 }
 export interface LinkField {
     value: LinkFieldValue;
@@ -31,7 +32,7 @@ export type LinkProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLA
      */
     showLinkTextWithChildrenPresent?: boolean;
 };
-export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps, "key" | "field" | "editable" | "showLinkTextWithChildrenPresent" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps, "key" | "editable" | "field" | "showLinkTextWithChildrenPresent" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & React.RefAttributes<HTMLAnchorElement>>;
 export declare const LinkPropTypes: {
     field: PropTypes.Validator<NonNullable<NonNullable<PropTypes.InferProps<{
         href: PropTypes.Requireable<any>;

package/types/components/PlaceholderCommon.d.ts

@@ -81,6 +81,8 @@ export declare class PlaceholderCommon<T extends PlaceholderProps> extends React
     componentDidUpdate(): void;
     componentDidCatch(error: Error): void;
     getSXAParams(rendering: ComponentRendering): {
+        styles?: undefined;
+    } | {
         styles: string;
     };
     getComponentsForRenderingData(placeholderData: (ComponentRendering | HtmlElementRendering)[]): React.ReactElement<{

package/types/index.d.ts

@@ -1,5 +1,5 @@
 export { constants, enableDebug } from '@sitecore-jss/sitecore-jss';
-export { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/utils';
+export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, EditFrameDataSource, FieldEditButton, WebEditButton, EditButtonTypes, } from '@sitecore-jss/sitecore-jss/utils';
 export { LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RestLayoutService, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, } from '@sitecore-jss/sitecore-jss/layout';
 export { trackingApi, TrackingRequestOptions, CampaignInstance, GoalInstance, OutcomeInstance, EventInstance, PageViewInstance, } from '@sitecore-jss/sitecore-jss/tracking';
 export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
@@ -19,3 +19,4 @@ export { withSitecoreContext, useSitecoreContext, ComponentConsumerProps, WithSi
 export { withEditorChromes } from './enhancers/withEditorChromes';
 export { withPlaceholder } from './enhancers/withPlaceholder';
 export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
+export { EditFrameProps, EditFrame } from './components/EditFrame';