Shadow DOM: FocusZone and FocusTrapZone (microsoft#30206)

Co-authored-by: KHMakoto <[email protected]>

change/@fluentui-dom-utilities-781d59ca-cc21-4853-8971-45459939f85d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add shadow DOM support for DOM APIs",
+  "packageName": "@fluentui/dom-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-focus-a8531b74-9b98-4cb7-8806-cae9890d42ed.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add shadow DOM support when traversing the DOM",
+  "packageName": "@fluentui/react-focus",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/dom-utilities/etc/dom-utilities.api.md

@@ -16,9 +16,15 @@ export function elementContainsAttribute(element: HTMLElement, attribute: string
 // @public
 export function findElementRecursive(element: HTMLElement | null, matchFunction: (element: HTMLElement) => boolean): HTMLElement | null;
 
+// @public (undocumented)
+export const getActiveElement: (doc: Document) => Element | null;
+
 // @public
 export function getChildren(parent: HTMLElement, allowVirtualChildren?: boolean): HTMLElement[];
 
+// @public (undocumented)
+export const getEventTarget: (event: Event) => HTMLElement | null;
+
 // @public
 export function getParent(child: HTMLElement, allowVirtualParents?: boolean): HTMLElement | null;
 
@@ -46,7 +52,6 @@ export function setPortalAttribute(element: HTMLElement): void;
 // @public
 export function setVirtualParent(child: HTMLElement, parent: HTMLElement | null): void;
 
-
 // (No @packageDocumentation comment for this package)
 
 ```

packages/dom-utilities/src/getActiveElement.ts

@@ -0,0 +1,9 @@
+export const getActiveElement = (doc: Document): Element | null => {
+  let ae = doc.activeElement;
+
+  while (ae?.shadowRoot) {
+    ae = ae.shadowRoot.activeElement;
+  }
+
+  return ae;
+};

packages/dom-utilities/src/getEventTarget.ts

@@ -0,0 +1,8 @@
+export const getEventTarget = (event: Event): HTMLElement | null => {
+  let target = event.target as HTMLElement;
+  if (target && target.shadowRoot) {
+    target = event.composedPath()[0] as HTMLElement;
+  }
+
+  return target;
+};

packages/dom-utilities/src/getParent.ts

@@ -7,8 +7,28 @@ import { getVirtualParent } from './getVirtualParent';
  * @public
  */
 export function getParent(child: HTMLElement, allowVirtualParents: boolean = true): HTMLElement | null {
-  return (
-    child &&
-    ((allowVirtualParents && getVirtualParent(child)) || (child.parentNode && (child.parentNode as HTMLElement)))
-  );
+  if (!child) {
+    return null;
+  }
+
+  const parent = allowVirtualParents && getVirtualParent(child);
+
+  if (parent) {
+    return parent;
+  }
+
+  // Support looking for parents in shadow DOM
+  if (
+    typeof (child as HTMLSlotElement).assignedElements !== 'function' &&
+    (child as HTMLElement).assignedSlot?.parentNode
+  ) {
+    // Element is slotted
+    return (child as HTMLElement).assignedSlot as HTMLElement;
+  } else if (child.parentNode?.nodeType === 11) {
+    // nodeType 11 is DOCUMENT_FRAGMENT
+    // Element is in shadow root
+    return (child.parentNode as ShadowRoot).host as HTMLElement;
+  } else {
+    return child.parentNode as HTMLElement;
+  }
 }

packages/dom-utilities/src/index.ts

@@ -1,13 +1,15 @@
-export * from './IVirtualElement';
-export * from './elementContains';
-export * from './elementContainsAttribute';
-export * from './findElementRecursive';
-export * from './getChildren';
-export * from './getParent';
-export * from './getVirtualParent';
-export * from './isVirtualElement';
-export * from './portalContainsElement';
-export * from './setPortalAttribute';
-export * from './setVirtualParent';
+export type { IVirtualElement } from './IVirtualElement';
+export { elementContains } from './elementContains';
+export { elementContainsAttribute } from './elementContainsAttribute';
+export { findElementRecursive } from './findElementRecursive';
+export { getActiveElement } from './getActiveElement';
+export { getChildren } from './getChildren';
+export { getEventTarget } from './getEventTarget';
+export { getParent } from './getParent';
+export { getVirtualParent } from './getVirtualParent';
+export { isVirtualElement } from './isVirtualElement';
+export { portalContainsElement } from './portalContainsElement';
+export { DATA_PORTAL_ATTRIBUTE, setPortalAttribute } from './setPortalAttribute';
+export { setVirtualParent } from './setVirtualParent';
 
 import './version';

packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap

@@ -205,7 +205,7 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
                       opacity: 0.8;
                     }
               >
-
+                 
               </div>
             </div>
             <div

packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap

@@ -124,9 +124,9 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders HorizontalBarChartW
           x={40}
           y={4}
         />
-
-
-
+         
+         
+         
       </g>
     </svg>
   </div>
@@ -743,9 +743,9 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders hideLegend correctl
           x={40}
           y={4}
         />
-
-
-
+         
+         
+         
       </g>
     </svg>
   </div>
@@ -872,9 +872,9 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders showToolTipForYAxis
           x={40}
           y={14.25}
         />
-
-
-
+         
+         
+         
       </g>
     </svg>
   </div>
@@ -1479,9 +1479,9 @@ exports[`HorizontalBarChartWithAxis snapShot testing renders showYAxisLables cor
           x={40}
           y={14.25}
         />
-
-
-
+         
+         
+         
       </g>
     </svg>
   </div>