@reykjavik/hanna-react 0.10.117 → 0.10.119

package/CHANGELOG.md

@@ -4,6 +4,18 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.119
+
+_2024-02-29_
+
+- fix: Stop `Multiselect` dropdown closing on touch-based page scroll
+
+## 0.10.118
+
+_2024-02-07_
+
+- feat: Add component `IframeBlockClientScript`
+
 ## 0.10.117
 
 _2024-01-26_

package/IframeBlockClientScript.d.ts

@@ -0,0 +1,14 @@
+export type IframeBlockClientScriptProps = {
+    /**
+     * Restricts the domain of the parent page, to prevent unknown sites
+     * from recieving the benefits of automated resizing.
+     *
+     * Default: `'*'` (resizable on any domain)
+     */
+    targetOrigin?: string;
+};
+/**
+ * Drop this component into the iframed page to enable auto-resizing of the
+ * `<iframe/>` on the parent pages's `IframeBlock` component.
+ */
+export declare const IframeBlockClientScript: (props: IframeBlockClientScriptProps) => JSX.Element;

package/IframeBlockClientScript.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IframeBlockClientScript = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+/**
+ * Drop this component into the iframed page to enable auto-resizing of the
+ * `<iframe/>` on the parent pages's `IframeBlock` component.
+ */
+const IframeBlockClientScript = (props) => {
+    const { targetOrigin } = props;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        !!targetOrigin && (react_1.default.createElement("script", { dangerouslySetInnerHTML: {
+                __html: `window.iFrameResizer=${JSON.stringify({ targetOrigin })}`,
+            } })),
+        react_1.default.createElement("script", { src: (0, assets_1.getAssetUrl)('scripts/iframeResizer.contentWindow@4.js') })));
+};
+exports.IframeBlockClientScript = IframeBlockClientScript;

package/esm/IframeBlockClientScript.d.ts

@@ -0,0 +1,14 @@
+export type IframeBlockClientScriptProps = {
+    /**
+     * Restricts the domain of the parent page, to prevent unknown sites
+     * from recieving the benefits of automated resizing.
+     *
+     * Default: `'*'` (resizable on any domain)
+     */
+    targetOrigin?: string;
+};
+/**
+ * Drop this component into the iframed page to enable auto-resizing of the
+ * `<iframe/>` on the parent pages's `IframeBlock` component.
+ */
+export declare const IframeBlockClientScript: (props: IframeBlockClientScriptProps) => JSX.Element;

package/esm/IframeBlockClientScript.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
+/**
+ * Drop this component into the iframed page to enable auto-resizing of the
+ * `<iframe/>` on the parent pages's `IframeBlock` component.
+ */
+export const IframeBlockClientScript = (props) => {
+    const { targetOrigin } = props;
+    return (React.createElement(React.Fragment, null,
+        !!targetOrigin && (React.createElement("script", { dangerouslySetInnerHTML: {
+                __html: `window.iFrameResizer=${JSON.stringify({ targetOrigin })}`,
+            } })),
+        React.createElement("script", { src: getAssetUrl('scripts/iframeResizer.contentWindow@4.js') })));
+};

package/esm/index.d.ts

@@ -55,6 +55,7 @@
 /// <reference path="./ImageCards.d.tsx" />
 /// <reference path="./Illustration.d.tsx" />
 /// <reference path="./IframedLayout.d.tsx" />
+/// <reference path="./IframeBlockClientScript.d.tsx" />
 /// <reference path="./IframeBlock.d.tsx" />
 /// <reference path="./HeroBlock.d.tsx" />
 /// <reference path="./Heading.d.tsx" />

package/esm/utils/useOnClickOutside.d.ts

@@ -5,5 +5,5 @@ type Ref<E extends HTMLElement> = MutableRefObject<E> | RefObject<E>;
  * @param ref single or array of refs to check for click outside
  * @param handler callback to run when clicked outside of the ref
  */
-declare const useOnClickOutside: <E extends HTMLElement>(ref: Ref<E> | Ref<E>[], handler: (event: globalThis.MouseEvent | globalThis.TouchEvent) => void) => void;
-export { useOnClickOutside };
+export declare const useOnClickOutside: <E extends HTMLElement>(ref: Ref<E> | Ref<E>[], handler: (event: globalThis.MouseEvent | globalThis.TouchEvent) => void) => void;
+export {};

package/esm/utils/useOnClickOutside.js

@@ -4,7 +4,7 @@ import { useEffect, useMemo } from 'react';
  * @param ref single or array of refs to check for click outside
  * @param handler callback to run when clicked outside of the ref
  */
-const useOnClickOutside = (ref, handler) => {
+export const useOnClickOutside = (ref, handler) => {
     const refs = Array.isArray(ref) ? ref : [ref];
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const stableRefs = useMemo(() => refs, refs);
@@ -21,12 +21,9 @@ const useOnClickOutside = (ref, handler) => {
                 handler(event);
             }
         };
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
+        document.addEventListener('click', listener);
         return () => {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
+            document.removeEventListener('click', listener);
         };
     }, [handler, stableRefs]);
 };
-export { useOnClickOutside };

package/index.d.ts

@@ -55,6 +55,7 @@
 /// <reference path="./ImageCards.d.tsx" />
 /// <reference path="./Illustration.d.tsx" />
 /// <reference path="./IframedLayout.d.tsx" />
+/// <reference path="./IframeBlockClientScript.d.tsx" />
 /// <reference path="./IframeBlock.d.tsx" />
 /// <reference path="./HeroBlock.d.tsx" />
 /// <reference path="./Heading.d.tsx" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.117",
+	"version": "0.10.119",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -273,6 +273,10 @@
 			"import": "./esm/IframedLayout.js",
 			"require": "./IframedLayout.js"
 		},
+		"./IframeBlockClientScript": {
+			"import": "./esm/IframeBlockClientScript.js",
+			"require": "./IframeBlockClientScript.js"
+		},
 		"./IframeBlock": {
 			"import": "./esm/IframeBlock.js",
 			"require": "./IframeBlock.js"

package/utils/useOnClickOutside.d.ts

@@ -5,5 +5,5 @@ type Ref<E extends HTMLElement> = MutableRefObject<E> | RefObject<E>;
  * @param ref single or array of refs to check for click outside
  * @param handler callback to run when clicked outside of the ref
  */
-declare const useOnClickOutside: <E extends HTMLElement>(ref: Ref<E> | Ref<E>[], handler: (event: globalThis.MouseEvent | globalThis.TouchEvent) => void) => void;
-export { useOnClickOutside };
+export declare const useOnClickOutside: <E extends HTMLElement>(ref: Ref<E> | Ref<E>[], handler: (event: globalThis.MouseEvent | globalThis.TouchEvent) => void) => void;
+export {};

package/utils/useOnClickOutside.js

@@ -24,11 +24,9 @@ const useOnClickOutside = (ref, handler) => {
                 handler(event);
             }
         };
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
+        document.addEventListener('click', listener);
         return () => {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
+            document.removeEventListener('click', listener);
         };
     }, [handler, stableRefs]);
 };