fluentui-extended 2026.2.17 → 2026.6.12

package/README.md

@@ -167,6 +167,7 @@ import { AddRegular, PersonSearchRegular } from '@fluentui/react-icons';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `id` | `string` | auto-generated | Unique identifier for the lookup |
 | `options` | `LookupOption[]` | `[]` | Options to display in the dropdown |
 | `selectedKey` | `string \| null` | - | Selected option key (controlled) |
 | `selectedOption` | `LookupOption \| null` | - | Selected option object (recommended for async) |
@@ -178,9 +179,20 @@ import { AddRegular, PersonSearchRegular } from '@fluentui/react-icons';
 | `clearable` | `boolean` | `true` | Show clear button |
 | `minSearchLength` | `number` | `0` | Min chars before search fires |
 | `searchDebounceMs` | `number` | `300` | Search debounce delay (ms) |
+| `matchInputWidth` | `boolean` | `true` | Match dropdown width to input width |
 | `header` | `ReactNode` | - | Header content |
 | `footer` | `ReactNode` | - | Footer content |
 | `disabled` | `boolean` | `false` | Disable the lookup |
+| `open` | `boolean` | - | Controlled open state for the dropdown |
+| `onOpenChange` | `(open: boolean) => void` | - | Callback when dropdown open state changes |
+
+### Cross-Document Support (Dynamics 365 Iframes)
+
+The Lookup component automatically detects when it's rendered inside a cross-document context (e.g., a React tree mounted into a parent window's document from an iframe). It uses `ownerDocument` and `ownerDocument.defaultView` instead of the global `document` and `window` to ensure:
+
+- **Dismiss on click outside** works correctly (mousedown listener on the correct document)
+- **Scroll/resize tracking** responds to the correct window's events
+- **Dropdown positioning** uses the correct scroll offsets
 
 ### Inherited Input Props
 

package/dist/index.js

@@ -458,9 +458,10 @@ var Lookup = ({
     const updatePosition = () => {
       const rect = inputWrapperRef.current?.getBoundingClientRect();
       if (rect) {
+        const ownerWin2 = inputWrapperRef.current?.ownerDocument?.defaultView ?? window;
         setDropdownPosition({
-          top: rect.bottom + 4 + window.scrollY,
-          left: rect.left + window.scrollX,
+          top: rect.bottom + 4 + ownerWin2.scrollY,
+          left: rect.left + ownerWin2.scrollX,
           width: matchInputWidth ? rect.width : 0
         });
       }
@@ -471,12 +472,13 @@ var Lookup = ({
       resizeObserver = new ResizeObserver(() => updatePosition());
       resizeObserver.observe(inputWrapperRef.current);
     }
-    window.addEventListener("resize", updatePosition);
-    window.addEventListener("scroll", updatePosition, true);
+    const ownerWin = inputWrapperRef.current?.ownerDocument?.defaultView ?? window;
+    ownerWin.addEventListener("resize", updatePosition);
+    ownerWin.addEventListener("scroll", updatePosition, true);
     return () => {
       resizeObserver?.disconnect();
-      window.removeEventListener("resize", updatePosition);
-      window.removeEventListener("scroll", updatePosition, true);
+      ownerWin.removeEventListener("resize", updatePosition);
+      ownerWin.removeEventListener("scroll", updatePosition, true);
     };
   }, [isOpen, matchInputWidth]);
   React3__namespace.useEffect(() => {
@@ -490,9 +492,10 @@ var Lookup = ({
         closeDropdown();
       }
     };
-    document.addEventListener("mousedown", handlePointerDownOutside, true);
+    const ownerDoc = inputWrapperRef.current?.ownerDocument ?? document;
+    ownerDoc.addEventListener("mousedown", handlePointerDownOutside, true);
     return () => {
-      document.removeEventListener("mousedown", handlePointerDownOutside, true);
+      ownerDoc.removeEventListener("mousedown", handlePointerDownOutside, true);
     };
   }, [isOpen, closeDropdown]);
   const showDropdown = isOpen && !disabled;