@contentful/react-apps-toolkit 1.1.0 → 1.2.2

package/README.md

@@ -82,7 +82,7 @@ function ComponentUsingCMA() {
   const [entries, setEntries] = useState();
 
   useEffect(() => {
-    cma.entries.getMany().then(setEntries);
+    cma.entry.getMany().then((data) => setEntries(data.items));
   }, [cma]);
 
   return <>{entries?.length}</>;
@@ -125,6 +125,30 @@ function App() {
 }
 ```
 
+### useAutoResizer
+
+`useAutoResizer` listens for DOM changes and updates the app's height when the size changes.
+
+Usage:
+
+```tsx
+import { SDKProvider, useAutoResizer } from '@contentful/react-apps-toolkit';
+
+function ComponentUsingAutoResizer() {
+  useAutoResizer();
+
+  return <div>Component will be auto-resized</div>;
+}
+
+function App() {
+  return (
+    <SDKProvider>
+      <ComponentUsingAutoResizer />
+    </SDKProvider>
+  );
+}
+```
+
 ### Resources
 
 - [create-contentful-app](https://www.npmjs.com/package/create-contentful-app): A starter that makes it easy to bootstrap apps for Contentful.

package/dist/SDKProvider.js

@@ -39,6 +39,6 @@ var SDKProvider = function (props) {
         }
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(exports.SDKContext.Provider, __assign({ value: { sdk: sdk } }, { children: props.children }));
+    return (0, jsx_runtime_1.jsx)(exports.SDKContext.Provider, __assign({ value: { sdk: sdk } }, { children: props.children }), void 0);
 };
 exports.SDKProvider = SDKProvider;

package/dist/SDKProvider.spec.js

@@ -21,13 +21,13 @@ describe('SDKProvider', function () {
         consoleWarnMock === null || consoleWarnMock === void 0 ? void 0 : consoleWarnMock.mockRestore();
     });
     it('renders its children when sdk the init returns the sdk', function () {
-        var getByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(SDKProvider_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)("div", { children: "children" }) })).getByText;
+        var getByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(SDKProvider_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)("div", { children: "children" }, void 0) }, void 0)).getByText;
         expect(getByText('children')).toBeTruthy();
     });
     it('calls console warn after timeout if callback is not returning ', function () {
         // @ts-ignore
         app_sdk_1.init.mockImplementation(function () { });
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(SDKProvider_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)("div", { children: "children" }) }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SDKProvider_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)("div", { children: "children" }, void 0) }, void 0));
         jest.runAllTimers();
         expect(consoleWarnMock).toHaveBeenCalled();
     });

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './SDKProvider';
+export * from './useAutoResizer';
 export * from './useCMA';
 export * from './useFieldValue';
 export * from './useSDK';

package/dist/index.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -15,6 +11,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./SDKProvider"), exports);
+__exportStar(require("./useAutoResizer"), exports);
 __exportStar(require("./useCMA"), exports);
 __exportStar(require("./useFieldValue"), exports);
 __exportStar(require("./useSDK"), exports);

package/dist/useAutoResizer.d.ts

@@ -0,0 +1,9 @@
+import { WindowAPI } from '@contentful/app-sdk';
+/**
+ * Starts/stops the auto resizer when the component is mounted/unmounted.
+ * Must be wrapped by SDKProvider.
+ * Can only be used when app is rendered in field, sidebar or dialog locations.
+ * @param {Object} params - Options to be passed to auto resizer
+ * @param {Boolean} params.absoluteElements - Defines if auto resizer should consider absolute elements
+ */
+export declare function useAutoResizer(...params: Parameters<WindowAPI['startAutoResizer']>): void;

package/dist/useAutoResizer.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoResizer = void 0;
+var react_1 = require("react");
+var useSDK_1 = require("./useSDK");
+/**
+ * Starts/stops the auto resizer when the component is mounted/unmounted.
+ * Must be wrapped by SDKProvider.
+ * Can only be used when app is rendered in field, sidebar or dialog locations.
+ * @param {Object} params - Options to be passed to auto resizer
+ * @param {Boolean} params.absoluteElements - Defines if auto resizer should consider absolute elements
+ */
+function useAutoResizer() {
+    var params = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        params[_i] = arguments[_i];
+    }
+    var sdk = (0, useSDK_1.useSDK)();
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (typeof sdk.window === 'undefined') {
+            throw new Error('useAutoResizer is unavailable at this location, it can only be rendered in field, sidebar and dialog locations.');
+        }
+        (_a = sdk.window).startAutoResizer.apply(_a, params);
+        return sdk.window.stopAutoResizer;
+    }, [sdk.window]);
+}
+exports.useAutoResizer = useAutoResizer;

package/dist/useAutoResizer.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/useAutoResizer.spec.js

@@ -0,0 +1,49 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_hooks_1 = require("@testing-library/react-hooks");
+var useAutoResizer_1 = require("./useAutoResizer");
+var useSDK_1 = require("./useSDK");
+var mockSDK = {
+    window: {
+        startAutoResizer: jest.fn(),
+        stopAutoResizer: jest.fn(),
+    },
+};
+jest.mock('./useSDK', function () { return (__assign(__assign({}, jest.requireActual('./useSDK')), { useSDK: jest.fn() })); });
+var useSDKMock = useSDK_1.useSDK;
+beforeEach(function () {
+    jest.resetAllMocks();
+    mockSDK.window.startAutoResizer.mockImplementationOnce(function () { return function () { }; });
+    mockSDK.window.stopAutoResizer.mockImplementationOnce(function () { return function () { }; });
+});
+describe('useAutoResizer', function () {
+    beforeEach(function () {
+        // @ts-expect-error
+        useSDKMock.mockImplementation(function () { return mockSDK; });
+    });
+    it('should invoke the field SDK autoResizer start and stop methods', function () {
+        var hook = (0, react_hooks_1.renderHook)(useAutoResizer_1.useAutoResizer);
+        expect(mockSDK.window.startAutoResizer).toBeCalledTimes(1);
+        expect(mockSDK.window.stopAutoResizer).toBeCalledTimes(0);
+        hook.unmount();
+        expect(mockSDK.window.startAutoResizer).toBeCalledTimes(1);
+        expect(mockSDK.window.stopAutoResizer).toBeCalledTimes(1);
+    });
+    it('should accept sdk.window.startAutoResizer parameters', function () {
+        var params = { absoluteElements: true };
+        var hook = (0, react_hooks_1.renderHook)(function () { return (0, useAutoResizer_1.useAutoResizer)(params); });
+        expect(mockSDK.window.startAutoResizer).toHaveBeenCalledWith(params);
+        hook.unmount();
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/react-apps-toolkit",
-  "version": "1.1.0",
+  "version": "1.2.2",
   "description": "Toolkit for building a Contentful app in React",
   "keywords": [],
   "author": "Contentful GmbH",
@@ -34,15 +34,15 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@types/jest": "^27.4.0",
-    "@types/react": "^18.0.2",
-    "jest": "^27.5.0",
-    "react": "^17.0.2",
+    "@testing-library/react": "12.1.3",
+    "@testing-library/react-hooks": "8.0.0",
+    "@types/jest": "27.4.0",
+    "@types/react": "18.0.2",
+    "jest": "27.5.0",
+    "react": "17.0.2",
     "react-dom": "17.0.2",
-    "ts-jest": "^27.1.3",
-    "typescript": "^4.5.5"
+    "ts-jest": "27.1.3",
+    "typescript": "4.5.5"
   },
   "publishConfig": {
     "access": "public"
@@ -51,5 +51,5 @@
     "@contentful/app-sdk": "^4.0.0",
     "contentful-management": ">=7.30.0"
   },
-  "gitHead": "9a4e43853351f0c40fab5ca83f04054a52dbb4ee"
+  "gitHead": "4df44c41cb830360fc514b99d59a7aaa8796e15e"
 }