@atlaskit/teams-app-internal-popup-adaptor 1.1.0

package/src/usePressableTriggerRef.ts

@@ -0,0 +1,89 @@
+import { type MutableRefObject, useCallback, useEffect, useRef } from 'react';
+
+import { bind, type UnbindFn } from 'bind-event-listener';
+
+export type UsePressableTriggerRefProps = {
+	onOpen: () => void;
+	onClose?: () => void;
+	isOpen?: boolean;
+	isDisabled?: boolean;
+	openedByRef?: MutableRefObject<'hover' | 'click' | null>;
+};
+
+export function usePressableTriggerRef({
+	onOpen,
+	onClose,
+	isOpen = false,
+	isDisabled = false,
+	openedByRef,
+}: UsePressableTriggerRefProps): (element: HTMLElement | null) => void {
+	const nodeRef = useRef<HTMLElement | null>(null);
+	const eventListeners = useRef<UnbindFn[]>([]);
+
+	const handleOpen = useCallback(() => {
+		if (isOpen) {
+			onClose?.();
+		} else {
+			if (openedByRef) {
+				openedByRef.current = 'click';
+			}
+			onOpen();
+		}
+	}, [isOpen, onClose, openedByRef, onOpen]);
+
+	const keydownListener = useCallback(
+		(event: Event) => {
+			if (event instanceof KeyboardEvent && (event.key === 'Enter' || event.key === ' ')) {
+				event.preventDefault();
+				handleOpen();
+			}
+		},
+		[handleOpen],
+	);
+
+	const cleanUpEventListeners = useCallback(() => {
+		eventListeners.current.forEach((unbind) => {
+			unbind();
+		});
+		eventListeners.current = [];
+	}, []);
+
+	const addEventListener = useCallback(
+		(element: HTMLElement, type: string, callback: EventListener) => {
+			const unbind = bind(element, {
+				type,
+				listener: callback,
+			});
+
+			eventListeners.current.push(unbind);
+		},
+		[],
+	);
+
+	const refCallback = useCallback(
+		(element: HTMLElement | null) => {
+			if (element !== nodeRef.current) {
+				if (nodeRef.current) {
+					cleanUpEventListeners();
+				}
+				if (element) {
+					if (!isDisabled) {
+						addEventListener(element, 'click', handleOpen);
+					}
+					// Always attach keydown for keyboard accessibility
+					addEventListener(element, 'keydown', keydownListener);
+				}
+				nodeRef.current = element;
+			}
+		},
+		[handleOpen, keydownListener, addEventListener, cleanUpEventListeners, isDisabled],
+	);
+
+	useEffect(() => {
+		return () => {
+			cleanUpEventListeners();
+		};
+	}, [cleanUpEventListeners]);
+
+	return refCallback;
+}

package/src/utils.ts

@@ -0,0 +1,49 @@
+/**
+ * Type guard to check if an event has a relatedTarget property.
+ */
+function hasRelatedTarget(event: Event): event is Event & { relatedTarget: EventTarget | null } {
+	return 'relatedTarget' in event;
+}
+
+/**
+ * Checks if the mouse is moving to an atlaskit portal or kudos modal
+ * where we should prevent the popup from closing
+ */
+function isMovingToKudos(relatedTarget: EventTarget | null): boolean {
+	if (!(relatedTarget instanceof HTMLElement)) {
+		return false;
+	}
+
+	const iframe =
+		relatedTarget.closest('.atlaskit-portal')?.querySelector('iframe') ||
+		relatedTarget.closest('iframe');
+	return iframe instanceof HTMLIFrameElement && iframe.src.includes('give-kudos');
+}
+
+/**
+ * Returns the child portal if mouse is moving to a portal controlled by the parent popup.
+ */
+function getChildPortalFromParentPopup(
+	relatedTarget: EventTarget | null,
+	parentPopupElement: HTMLElement | null,
+): Element | null {
+	if (!(relatedTarget instanceof HTMLElement) || !parentPopupElement) {
+		return null;
+	}
+
+	const portal = relatedTarget.closest('.atlaskit-portal');
+	if (!portal) {
+		return null;
+	}
+
+	for (const trigger of Array.from(parentPopupElement.querySelectorAll('[aria-controls]'))) {
+		const controlsId = trigger.getAttribute('aria-controls');
+		if (controlsId && portal.querySelector(`#${controlsId}`)) {
+			return portal;
+		}
+	}
+
+	return null;
+}
+
+export { hasRelatedTarget, isMovingToKudos, getChildPortalFromParentPopup };

package/tsconfig.app.json

@@ -0,0 +1,46 @@
+{
+	"extends": "../../../tsconfig.base.json",
+	"include": ["./src/**/*.ts", "./src/**/*.tsx"],
+	"exclude": [
+		"**/docs/**/*",
+		"**/__tests__/**/*",
+		"**/vr-tests/**/*",
+		"**/__perf__/**/*",
+		"**/*.test.*",
+		"**/test.*",
+		"**/test-*",
+		"**/examples.ts",
+		"**/examples.tsx",
+		"**/examples/*.ts",
+		"**/examples/*.tsx",
+		"**/examples/**/*.ts",
+		"**/examples/**/*.tsx",
+		"**/stories.ts",
+		"**/stories.tsx",
+		"**/stories/*.ts",
+		"**/stories/*.tsx",
+		"**/stories/**/*.ts",
+		"**/stories/**/*.tsx",
+		"**/storybook/**/*",
+		"**/constellation/**/*",
+		".storybook/*",
+		"./__fixtures__/**/*",
+		"./__generated__/**/*",
+		"./mocks/**/*",
+		"./__mocks__/**/*",
+		"**/mock.*",
+		"**/codemods/**/*.ts",
+		"**/codemods/**/*.tsx"
+	],
+	"compilerOptions": {
+		"composite": true,
+		"outDir": "../../../tsDist/@atlaskit__teams-app-internal-popup-adaptor/app",
+		"isolatedDeclarations": true
+	},
+	"references": [
+		{
+			"path": "../../design-system/popup/tsconfig.app.json"
+		}
+	],
+	"files": []
+}

package/tsconfig.dev.json

@@ -0,0 +1,45 @@
+{
+	"extends": "../../../tsconfig.base.json",
+	"include": [
+		"**/docs/**/*",
+		"**/__tests__/**/*",
+		"**/vr-tests/**/*",
+		"**/__perf__/**/*",
+		"**/*.test.*",
+		"**/test.*",
+		"**/test-*",
+		"**/examples.ts",
+		"**/examples.tsx",
+		"**/examples/*.ts",
+		"**/examples/*.tsx",
+		"**/examples/**/*.ts",
+		"**/examples/**/*.tsx",
+		"**/storybook/**/*",
+		"**/constellation/**/*",
+		".storybook/*",
+		"./__fixtures__/**/*",
+		"./__generated__/**/*",
+		"./mocks/**/*",
+		"./__mocks__/**/*",
+		"**/mock.*",
+		"**/codemods/**/*.ts",
+		"**/codemods/**/*.tsx",
+		"**/stories.ts",
+		"**/stories.tsx",
+		"**/stories/*.ts",
+		"**/stories/*.tsx",
+		"**/stories/**/*.ts",
+		"**/stories/**/*.tsx"
+	],
+	"exclude": ["./dist/**/*", "./build/**/*", "./node_modules/**/*"],
+	"compilerOptions": {
+		"composite": true,
+		"outDir": "../../../tsDist/@atlaskit__teams-app-internal-popup-adaptor/dev",
+		"isolatedDeclarations": true
+	},
+	"references": [
+		{
+			"path": "./tsconfig.app.json"
+		}
+	]
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": [
+    "__tests__/**/*.ts",
+    "__tests__/**/*.tsx",
+    "docs/**/*.ts",
+    "docs/**/*.tsx",
+    "examples/**/*.ts",
+    "examples/**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "**/stories.ts",
+    "**/stories.tsx",
+    "**/stories/*.ts",
+    "**/stories/*.tsx",
+    "**/stories/**/*.ts",
+    "**/stories/**/*.tsx"
+  ]
+}