@expofp/ui 3.21.0

package/dist/shared/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,14 @@
+import { type RefObject } from 'react';
+type Ref = RefObject<HTMLElement | null>;
+/**
+ * Calls `handler` when a click or touch lands outside every ref in `refs`,
+ * while `enabled` is true.
+ *
+ * The listeners are attached to `document`. Both `refs` and `handler` are held
+ * in refs, so passing an inline array/arrow does not re-subscribe on every
+ * render — the listeners are only (re)attached when `enabled` flips. Pass the
+ * open state as `enabled` so the listeners exist only while the popup is open.
+ */
+declare function useOnClickOutside(refs: Ref | Ref[], handler: (event: Event) => void, enabled?: boolean): void;
+export default useOnClickOutside;
+//# sourceMappingURL=useOnClickOutside.d.ts.map

package/dist/shared/hooks/useOnClickOutside.js

@@ -0,0 +1,43 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Calls `handler` when a click or touch lands outside every ref in `refs`,
+ * while `enabled` is true.
+ *
+ * The listeners are attached to `document`. Both `refs` and `handler` are held
+ * in refs, so passing an inline array/arrow does not re-subscribe on every
+ * render — the listeners are only (re)attached when `enabled` flips. Pass the
+ * open state as `enabled` so the listeners exist only while the popup is open.
+ */
+function useOnClickOutside(refs, handler, enabled = true) {
+    const refsRef = useRef(refs);
+    const handlerRef = useRef(handler);
+    useEffect(() => {
+        refsRef.current = refs;
+        handlerRef.current = handler;
+    });
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const listener = (event) => {
+            const refArray = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];
+            const isClickInside = refArray.some((ref) => {
+                if (!ref?.current)
+                    return false;
+                const target = event.target;
+                return (ref.current.contains(target) ||
+                    (event.composed && ref.current.contains(event.composedPath()[0])));
+            });
+            if (!isClickInside) {
+                handlerRef.current(event);
+            }
+        };
+        document.addEventListener('click', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('click', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [enabled]);
+}
+export default useOnClickOutside;

package/dist/shared/hooks/useOnEscape.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Calls `handler` when the Escape key is pressed while `enabled` is true.
+ *
+ * The listener is attached to `document`, so Escape is caught regardless of
+ * where focus currently sits. The handler is held in a ref, so passing an
+ * inline arrow does not re-subscribe the listener on every render — it only
+ * re-subscribes when `enabled` flips.
+ *
+ * Focus management (e.g. returning focus to a trigger) is left to the caller's
+ * handler, since which element to focus is component-specific.
+ */
+declare function useOnEscape(handler: () => void, enabled?: boolean): void;
+export default useOnEscape;
+//# sourceMappingURL=useOnEscape.d.ts.map

package/dist/shared/hooks/useOnEscape.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Calls `handler` when the Escape key is pressed while `enabled` is true.
+ *
+ * The listener is attached to `document`, so Escape is caught regardless of
+ * where focus currently sits. The handler is held in a ref, so passing an
+ * inline arrow does not re-subscribe the listener on every render — it only
+ * re-subscribes when `enabled` flips.
+ *
+ * Focus management (e.g. returning focus to a trigger) is left to the caller's
+ * handler, since which element to focus is component-specific.
+ */
+function useOnEscape(handler, enabled = true) {
+    const handlerRef = useRef(handler);
+    useEffect(() => {
+        handlerRef.current = handler;
+    });
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                handlerRef.current();
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [enabled]);
+}
+export default useOnEscape;

package/dist/shared/hooks/useWindowSize.d.ts

@@ -0,0 +1,5 @@
+export declare const useWindowSize: () => {
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=useWindowSize.d.ts.map

package/dist/shared/hooks/useWindowSize.js

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+export const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState(() => {
+        const isInIframe = window !== window.top;
+        if (isInIframe) {
+            return {
+                width: document.documentElement.clientWidth || window.innerWidth,
+                height: document.documentElement.clientHeight || window.innerHeight,
+            };
+        }
+        return {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+    });
+    useEffect(() => {
+        const handleResize = () => {
+            const isInIframe = window !== window.top;
+            if (isInIframe) {
+                setWindowSize({
+                    width: document.documentElement.clientWidth || window.innerWidth,
+                    height: document.documentElement.clientHeight || window.innerHeight,
+                });
+            }
+            else {
+                setWindowSize({
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                });
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('orientationchange', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('orientationchange', handleResize);
+        };
+    }, []);
+    return windowSize;
+};

package/dist/shared/interactive.d.ts

@@ -0,0 +1,2 @@
+export declare function isInteractiveTarget(target: Element | null): boolean;
+//# sourceMappingURL=interactive.d.ts.map

package/dist/shared/interactive.js

@@ -0,0 +1,4 @@
+const INTERACTIVE_SELECTOR = 'button, input, select, textarea, a, [contenteditable="true"], [draggable="false"]';
+export function isInteractiveTarget(target) {
+    return Boolean(target?.closest(INTERACTIVE_SELECTOR));
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@expofp/ui",
+  "version": "3.21.0",
+  "type": "module",
+  "description": "ExpoFP SDK internal: shared pure React UI components",
+  "homepage": "https://developer.expofp.com/",
+  "license": "MIT",
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "@expofp/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo",
+    "!**/*.map"
+  ],
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "copy-to-clipboard": "^3.2.0",
+    "resize-observer": "^1.0.4",
+    "tslib": "^2.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@storybook/addon-vitest": "10.4.6",
+    "@storybook/react": "10.4.6",
+    "@storybook/react-vite": "10.4.6",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/browser-playwright": "^4.1.9",
+    "playwright": "^1.61.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "sass-embedded": "^1.100.0",
+    "storybook": "10.4.6"
+  },
+  "nx": {
+    "targets": {
+      "test-storybook": {
+        "dependsOn": [
+          "^build"
+        ],
+        "command": "vitest run --config vitest.storybook.config.mts",
+        "options": {
+          "cwd": "packages/ui"
+        },
+        "cache": true
+      }
+    }
+  }
+}