@contentful/react-apps-toolkit 1.1.0 → 1.2.0

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/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.0",
   "description": "Toolkit for building a Contentful app in React",
   "keywords": [],
   "author": "Contentful GmbH",
@@ -51,5 +51,5 @@
     "@contentful/app-sdk": "^4.0.0",
     "contentful-management": ">=7.30.0"
   },
-  "gitHead": "9a4e43853351f0c40fab5ca83f04054a52dbb4ee"
+  "gitHead": "c60afb63364287280a1ed826a76b8154ef3a4bd0"
 }