@fluentui/react-portal 9.0.0-alpha.8 → 9.0.0-nightly.25435def33.0

package/lib/virtualParent/isVirtualElement.d.ts

@@ -0,0 +1,5 @@
+import type { VirtualElement } from './types';
+/**
+ * Determines whether or not an element has the virtual hierarchy extension.
+ */
+export declare function isVirtualElement(element: HTMLElement | VirtualElement): element is VirtualElement;

package/lib/virtualParent/isVirtualElement.js

@@ -0,0 +1,7 @@
+/**
+ * Determines whether or not an element has the virtual hierarchy extension.
+ */
+export function isVirtualElement(element) {
+    return element && !!element._virtual;
+}
+//# sourceMappingURL=isVirtualElement.js.map

package/lib/virtualParent/isVirtualElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isVirtualElement.js","sourceRoot":"","sources":["../../src/virtualParent/isVirtualElement.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,OAAqC;IACpE,OAAO,OAAO,IAAI,CAAC,CAAkB,OAAQ,CAAC,QAAQ,CAAC;AACzD,CAAC"}

package/lib/virtualParent/setVirtualParent.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Sets the virtual parent of an element.
+ *
+ * @param child - Theme element to set the virtual parent
+ * @param parent - The virtual parent, use `undefined` to remove a virtual parent relationship
+ */
+export declare function setVirtualParent(child: HTMLElement, parent?: HTMLElement): void;

package/lib/virtualParent/setVirtualParent.js

@@ -0,0 +1,17 @@
+/**
+ * Sets the virtual parent of an element.
+ *
+ * @param child - Theme element to set the virtual parent
+ * @param parent - The virtual parent, use `undefined` to remove a virtual parent relationship
+ */
+export function setVirtualParent(child, parent) {
+    if (!child) {
+        return;
+    }
+    var virtualChild = child;
+    if (!virtualChild._virtual) {
+        virtualChild._virtual = {};
+    }
+    virtualChild._virtual.parent = parent || undefined;
+}
+//# sourceMappingURL=setVirtualParent.js.map

package/lib/virtualParent/setVirtualParent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setVirtualParent.js","sourceRoot":"","sources":["../../src/virtualParent/setVirtualParent.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAkB,EAAE,MAAoB;IACvE,IAAI,CAAC,KAAK,EAAE;QACV,OAAO;KACR;IAED,IAAM,YAAY,GAAmB,KAAK,CAAC;IAE3C,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE;QAC1B,YAAY,CAAC,QAAQ,GAAG,EAAE,CAAC;KAC5B;IAED,YAAY,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,IAAI,SAAS,CAAC;AACrD,CAAC"}

package/lib/virtualParent/types.d.ts

@@ -0,0 +1,5 @@
+export interface VirtualElement extends HTMLElement {
+    _virtual: {
+        parent?: HTMLElement;
+    };
+}

package/lib/virtualParent/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/virtualParent/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/virtualParent/types.ts"],"names":[],"mappings":""}

package/lib-commonjs/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","sourceRoot":"../src/","sources":["Portal.ts"],"names":[],"mappings":";;;AAAA,oEAA0C","sourcesContent":["export * from './components/Portal/index';\n"]}
+{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../src/Portal.ts"],"names":[],"mappings":";;;AAAA,oEAA0C"}

package/lib-commonjs/common/isConformant.d.ts

@@ -1,2 +1,4 @@
-import { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>): void;
+import type { IsConformantOptions } from '@fluentui/react-conformance';
+export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
+    componentPath?: string;
+}): void;

package/lib-commonjs/common/isConformant.js.map

@@ -1 +1 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;AAAA,iEAAoG;AAEpG,SAAgB,YAAY,CAAC,QAAoD;IAC/E,IAAM,cAAc,GAAG;QACrB,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC7D,CAAC;IAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC;AAPD,oCAOC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>) {\n  const defaultOptions = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}
+{"version":3,"file":"isConformant.js","sourceRoot":"","sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;AAAA,iEAA+E;AAG/E,SAAgB,YAAY,CAC1B,QAAyF;IAEzF,IAAM,cAAc,GAAyC;QAC3D,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC7D,CAAC;IAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC;AATD,oCASC"}

package/lib-commonjs/components/Portal/Portal.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PortalProps } from './Portal.types';
+import type { PortalProps } from './Portal.types';
 /**
  * Component that renders children in a React portal
  */

package/lib-commonjs/components/Portal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","sourceRoot":"../src/","sources":["components/Portal/Portal.tsx"],"names":[],"mappings":";;;AAEA,yCAAwC;AAExC,+CAA8C;AAE9C;;GAEG;AACI,IAAM,MAAM,GAA0B,UAAA,KAAK;IAChD,IAAM,KAAK,GAAG,qBAAS,CAAC,KAAK,CAAC,CAAC;IAE/B,OAAO,2BAAY,CAAC,KAAK,CAAC,CAAC;AAC7B,CAAC,CAAC;AAJW,QAAA,MAAM,UAIjB;AAEF,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { usePortal } from './usePortal';\nimport { PortalProps } from './Portal.types';\nimport { renderPortal } from './renderPortal';\n\n/**\n * Component that renders children in a React portal\n */\nexport const Portal: React.FC<PortalProps> = props => {\n  const state = usePortal(props);\n\n  return renderPortal(state);\n};\n\nPortal.displayName = 'Portal';\n"]}
+{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../../../src/components/Portal/Portal.tsx"],"names":[],"mappings":";;;AAEA,yCAAwC;AACxC,+CAA8C;AAG9C;;GAEG;AACI,IAAM,MAAM,GAA0B,UAAA,KAAK;IAChD,IAAM,KAAK,GAAG,qBAAS,CAAC,KAAK,CAAC,CAAC;IAE/B,OAAO,2BAAY,CAAC,KAAK,CAAC,CAAC;AAC7B,CAAC,CAAC;AAJW,QAAA,MAAM,UAIjB;AAEF,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/lib-commonjs/components/Portal/Portal.types.d.ts

@@ -1,16 +1,21 @@
 import * as React from 'react';
-export interface PortalProps {
+export declare type PortalCommons = {
     /**
      * React children
      */
-    children?: React.ReactNode;
+    children: React.ReactNode;
     /**
      * Where the portal children are mounted on DOM
      * @defaultValue a new element on document.body without any styling
      */
-    mountNode?: HTMLDivElement | null;
-}
-export interface PortalState extends PortalProps {
+    mountNode: HTMLDivElement | undefined;
+};
+export declare type PortalProps = Partial<PortalCommons>;
+export declare type PortalState = PortalCommons & {
     /** Indicates if a Portal should be rendered. */
     shouldRender: boolean;
-}
+    /**
+     * Ref to the root span element as virtual parent
+     */
+    virtualParentRootRef: React.MutableRefObject<HTMLSpanElement | null>;
+};

package/lib-commonjs/components/Portal/Portal.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.types.js","sourceRoot":"../src/","sources":["components/Portal/Portal.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport interface PortalProps {\n  /**\n   * React children\n   */\n  children?: React.ReactNode;\n  /**\n   * Where the portal children are mounted on DOM\n   * @defaultValue a new element on document.body without any styling\n   */\n  mountNode?: HTMLDivElement | null;\n\n  /**\n   * React events should not bubble up the portal\n   */\n  // TODO clarify if this is still needed\n  // disableEventBubbling?: 'first' | 'last';\n}\n\nexport interface PortalState extends PortalProps {\n  /** Indicates if a Portal should be rendered. */\n  shouldRender: boolean;\n}\n"]}
+{"version":3,"file":"Portal.types.js","sourceRoot":"","sources":["../../../src/components/Portal/Portal.types.ts"],"names":[],"mappings":""}

package/lib-commonjs/components/Portal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Portal/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyB;AACzB,yDAA+B;AAC/B,yDAA+B;AAC/B,sDAA4B","sourcesContent":["export * from './Portal';\nexport * from './Portal.types';\nexport * from './renderPortal';\nexport * from './usePortal';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Portal/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyB;AACzB,yDAA+B;AAC/B,yDAA+B;AAC/B,sDAA4B"}

package/lib-commonjs/components/Portal/renderPortal.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { PortalState } from './Portal.types';
+import type { PortalState } from './Portal.types';
 /**
  * Render the final JSX of Portal
  */
-export declare const renderPortal: (state: PortalState) => React.ReactPortal | null;
+export declare const renderPortal: (state: PortalState) => React.ReactElement;

package/lib-commonjs/components/Portal/renderPortal.js

@@ -2,14 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderPortal = void 0;
 var ReactDOM = require("react-dom");
+var React = require("react");
 /**
  * Render the final JSX of Portal
  */
 var renderPortal = function (state) {
-    if (state.shouldRender && state.mountNode) {
-        return ReactDOM.createPortal(state.children, state.mountNode);
-    }
-    return null;
+    return (React.createElement("span", { hidden: true, ref: state.virtualParentRootRef }, state.shouldRender && state.mountNode && ReactDOM.createPortal(state.children, state.mountNode)));
 };
 exports.renderPortal = renderPortal;
 //# sourceMappingURL=renderPortal.js.map

package/lib-commonjs/components/Portal/renderPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderPortal.js","sourceRoot":"../src/","sources":["components/Portal/renderPortal.tsx"],"names":[],"mappings":";;;AAAA,oCAAsC;AAItC;;GAEG;AACI,IAAM,YAAY,GAAG,UAAC,KAAkB;IAC7C,IAAI,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,SAAS,EAAE;QACzC,OAAO,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;KAC/D;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AANW,QAAA,YAAY,gBAMvB","sourcesContent":["import * as ReactDOM from 'react-dom';\nimport * as React from 'react';\nimport { PortalState } from './Portal.types';\n\n/**\n * Render the final JSX of Portal\n */\nexport const renderPortal = (state: PortalState): React.ReactPortal | null => {\n  if (state.shouldRender && state.mountNode) {\n    return ReactDOM.createPortal(state.children, state.mountNode);\n  }\n\n  return null;\n};\n"]}
+{"version":3,"file":"renderPortal.js","sourceRoot":"","sources":["../../../src/components/Portal/renderPortal.tsx"],"names":[],"mappings":";;;AAAA,oCAAsC;AACtC,6BAA+B;AAG/B;;GAEG;AACI,IAAM,YAAY,GAAG,UAAC,KAAkB;IAC7C,OAAO,CACL,8BAAM,MAAM,QAAC,GAAG,EAAE,KAAK,CAAC,oBAAoB,IACzC,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,SAAS,IAAI,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,CAC3F,CACR,CAAC;AACJ,CAAC,CAAC;AANW,QAAA,YAAY,gBAMvB"}

package/lib-commonjs/components/Portal/usePortal.d.ts

@@ -1,10 +1,9 @@
-import { PortalProps, PortalState } from './Portal.types';
+import type { PortalProps, PortalState } from './Portal.types';
 /**
  * Create the state required to render Portal.
  *
  * The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal.
  *
  * @param props - props from this instance of Portal
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const usePortal: (props: PortalProps, defaultProps?: PortalProps | undefined) => PortalState;
+export declare const usePortal: (props: PortalProps) => PortalState;

package/lib-commonjs/components/Portal/usePortal.js

@@ -1,22 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePortal = void 0;
+var React = require("react");
 var react_utilities_1 = require("@fluentui/react-utilities");
 var usePortalMountNode_1 = require("./usePortalMountNode");
-var mergeProps = react_utilities_1.makeMergeProps();
+var index_1 = require("../../virtualParent/index");
 /**
  * Create the state required to render Portal.
  *
  * The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal.
  *
  * @param props - props from this instance of Portal
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-var usePortal = function (props, defaultProps) {
-    var _a;
-    var state = mergeProps({ shouldRender: !react_utilities_1.useIsSSR() }, defaultProps, props);
-    var fallbackMountNode = usePortalMountNode_1.usePortalMountNode({ disabled: !!state.mountNode });
-    state.mountNode = (_a = state.mountNode) !== null && _a !== void 0 ? _a : fallbackMountNode;
+var usePortal = function (props) {
+    var children = props.children, mountNode = props.mountNode;
+    var virtualParentRootRef = React.useRef(null);
+    var fallbackMountNode = usePortalMountNode_1.usePortalMountNode({ disabled: !!mountNode });
+    var state = {
+        children: children,
+        mountNode: mountNode !== null && mountNode !== void 0 ? mountNode : fallbackMountNode,
+        shouldRender: !react_utilities_1.useIsSSR(),
+        virtualParentRootRef: virtualParentRootRef,
+    };
+    React.useEffect(function () {
+        if (state.virtualParentRootRef.current && state.mountNode) {
+            index_1.setVirtualParent(state.mountNode, state.virtualParentRootRef.current);
+        }
+    }, [state.virtualParentRootRef, state.mountNode]);
     return state;
 };
 exports.usePortal = usePortal;

package/lib-commonjs/components/Portal/usePortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePortal.js","sourceRoot":"../src/","sources":["components/Portal/usePortal.ts"],"names":[],"mappings":";;;AAAA,6DAAqE;AAGrE,2DAA0D;AAE1D,IAAM,UAAU,GAAG,gCAAc,EAAe,CAAC;AAEjD;;;;;;;GAOG;AACI,IAAM,SAAS,GAAG,UAAC,KAAkB,EAAE,YAA0B;;IACtE,IAAM,KAAK,GAAG,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC,0BAAQ,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;IAC7E,IAAM,iBAAiB,GAAG,uCAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;IAE9E,KAAK,CAAC,SAAS,SAAG,KAAK,CAAC,SAAS,mCAAI,iBAAiB,CAAC;IAEvD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAPW,QAAA,SAAS,aAOpB","sourcesContent":["import { makeMergeProps, useIsSSR } from '@fluentui/react-utilities';\n\nimport { PortalProps, PortalState } from './Portal.types';\nimport { usePortalMountNode } from './usePortalMountNode';\n\nconst mergeProps = makeMergeProps<PortalState>();\n\n/**\n * Create the state required to render Portal.\n *\n * The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal.\n *\n * @param props - props from this instance of Portal\n * @param defaultProps - (optional) default prop values provided by the implementing type\n */\nexport const usePortal = (props: PortalProps, defaultProps?: PortalProps): PortalState => {\n  const state = mergeProps({ shouldRender: !useIsSSR() }, defaultProps, props);\n  const fallbackMountNode = usePortalMountNode({ disabled: !!state.mountNode });\n\n  state.mountNode = state.mountNode ?? fallbackMountNode;\n\n  return state;\n};\n"]}
+{"version":3,"file":"usePortal.js","sourceRoot":"","sources":["../../../src/components/Portal/usePortal.ts"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,6DAAqD;AACrD,2DAA0D;AAC1D,mDAA6D;AAG7D;;;;;;GAMG;AACI,IAAM,SAAS,GAAG,UAAC,KAAkB;IAClC,IAAA,QAAQ,GAAgB,KAAK,SAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;IAEtC,IAAM,oBAAoB,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAC;IACjE,IAAM,iBAAiB,GAAG,uCAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC;IAExE,IAAM,KAAK,GAAgB;QACzB,QAAQ,UAAA;QACR,SAAS,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,iBAAiB;QACzC,YAAY,EAAE,CAAC,0BAAQ,EAAE;QACzB,oBAAoB,sBAAA;KACrB,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC;QACd,IAAI,KAAK,CAAC,oBAAoB,CAAC,OAAO,IAAI,KAAK,CAAC,SAAS,EAAE;YACzD,wBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;SACvE;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAElD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AApBW,QAAA,SAAS,aAoBpB"}

package/lib-commonjs/components/Portal/usePortalMountNode.js

@@ -4,6 +4,7 @@ exports.usePortalMountNode = void 0;
 var React = require("react");
 var react_utilities_1 = require("@fluentui/react-utilities");
 var react_shared_contexts_1 = require("@fluentui/react-shared-contexts");
+var react_tabster_1 = require("@fluentui/react-tabster");
 /**
  * Creates a new element on a document.body to mount portals
  */
@@ -20,6 +21,7 @@ var usePortalMountNode = function (options) {
         targetDocument.body.appendChild(newElement);
         return newElement;
     }, [targetDocument, themeClassName, dir, options.disabled]);
+    react_tabster_1.useKeyboardNavAttribute().current = element;
     react_utilities_1.useIsomorphicLayoutEffect(function () {
         return function () {
             var _a;

package/lib-commonjs/components/Portal/usePortalMountNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePortalMountNode.js","sourceRoot":"../src/","sources":["components/Portal/usePortalMountNode.ts"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,6DAAsE;AACtE,yEAA+E;AAS/E;;GAEG;AACI,IAAM,kBAAkB,GAAG,UAAC,OAAkC;IACnE,IAAM,cAAc,GAAG,yCAAiB,EAAE,CAAC;IACrC,IAAA,KAA0B,iCAAS,EAAE,EAAnC,cAAc,oBAAA,EAAE,GAAG,SAAgB,CAAC;IAE5C,IAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC5B,IAAI,cAAc,KAAK,SAAS,IAAI,OAAO,CAAC,QAAQ,EAAE;YACpD,OAAO,SAAS,CAAC;SAClB;QAED,IAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACvD,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QACjD,UAAU,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QACpC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAE5C,OAAO,UAAU,CAAC;IACpB,CAAC,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,GAAG,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5D,2CAAyB,CAAC;QACxB,OAAO;;YACL,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,0CAAE,WAAW,CAAC,OAAO,EAAE;QAC/C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAxBW,QAAA,kBAAkB,sBAwB7B","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useThemeClassName, useFluent } from '@fluentui/react-shared-contexts';\n\nexport type UsePortalMountNodeOptions = {\n  /**\n   * Since hooks cannot be called conditionally use this flag to disable creating the node\n   */\n  disabled?: boolean;\n};\n\n/**\n * Creates a new element on a document.body to mount portals\n */\nexport const usePortalMountNode = (options: UsePortalMountNodeOptions) => {\n  const themeClassName = useThemeClassName();\n  const { targetDocument, dir } = useFluent();\n\n  const element = React.useMemo(() => {\n    if (targetDocument === undefined || options.disabled) {\n      return undefined;\n    }\n\n    const newElement = targetDocument.createElement('div');\n    newElement.setAttribute('class', themeClassName);\n    newElement.setAttribute('dir', dir);\n    targetDocument.body.appendChild(newElement);\n\n    return newElement;\n  }, [targetDocument, themeClassName, dir, options.disabled]);\n\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      element?.parentElement?.removeChild(element);\n    };\n  }, [element]);\n\n  return element;\n};\n"]}
+{"version":3,"file":"usePortalMountNode.js","sourceRoot":"","sources":["../../../src/components/Portal/usePortalMountNode.ts"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,6DAAsE;AACtE,yEAA+E;AAC/E,yDAAkE;AASlE;;GAEG;AACI,IAAM,kBAAkB,GAAG,UAAC,OAAkC;IACnE,IAAM,cAAc,GAAG,yCAAiB,EAAE,CAAC;IACrC,IAAA,KAA0B,iCAAS,EAAE,EAAnC,cAAc,oBAAA,EAAE,GAAG,SAAgB,CAAC;IAE5C,IAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC5B,IAAI,cAAc,KAAK,SAAS,IAAI,OAAO,CAAC,QAAQ,EAAE;YACpD,OAAO,SAAS,CAAC;SAClB;QAED,IAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACvD,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QACjD,UAAU,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QACpC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAE5C,OAAO,UAAU,CAAC;IACpB,CAAC,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,GAAG,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE3D,uCAAuB,EAA0C,CAAC,OAAO,GAAG,OAAQ,CAAC;IAEtF,2CAAyB,CAAC;QACxB,OAAO;;YACL,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,0CAAE,WAAW,CAAC,OAAO,EAAE;QAC/C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AA1BW,QAAA,kBAAkB,sBA0B7B"}

package/lib-commonjs/index.d.ts

@@ -1 +1,2 @@
 export * from './components/Portal/index';
+export { elementContains, setVirtualParent } from './virtualParent/index';

package/lib-commonjs/index.js

@@ -1,5 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.setVirtualParent = exports.elementContains = void 0;
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./components/Portal/index"), exports);
+var index_1 = require("./virtualParent/index");
+Object.defineProperty(exports, "elementContains", { enumerable: true, get: function () { return index_1.elementContains; } });
+Object.defineProperty(exports, "setVirtualParent", { enumerable: true, get: function () { return index_1.setVirtualParent; } });
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA0C","sourcesContent":["export * from './components/Portal/index';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,oEAA0C;AAC1C,+CAA0E;AAAjE,wGAAA,eAAe,OAAA;AAAE,yGAAA,gBAAgB,OAAA"}

package/lib-commonjs/virtualParent/elementContains.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Similar functionality to `element.contains` DOM API for use with out of order DOM elements that
+ * checks the virtual parent hierarchy. If a virtual parents exists, it is chosen over the actual parent
+ *
+ * @returns true if the child can find the parent in its virtual hierarchy
+ */
+export declare function elementContains(parent: HTMLElement | null, child: HTMLElement | null): boolean;

package/lib-commonjs/virtualParent/elementContains.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.elementContains = void 0;
+var getParent_1 = require("./getParent");
+/**
+ * Similar functionality to `element.contains` DOM API for use with out of order DOM elements that
+ * checks the virtual parent hierarchy. If a virtual parents exists, it is chosen over the actual parent
+ *
+ * @returns true if the child can find the parent in its virtual hierarchy
+ */
+function elementContains(parent, child) {
+    if (!parent || !child) {
+        return false;
+    }
+    if (parent === child) {
+        return true;
+    }
+    else {
+        while (child) {
+            var nextParent = getParent_1.getParent(child);
+            if (nextParent === parent) {
+                return true;
+            }
+            child = nextParent;
+        }
+    }
+    return false;
+}
+exports.elementContains = elementContains;
+//# sourceMappingURL=elementContains.js.map

package/lib-commonjs/virtualParent/elementContains.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementContains.js","sourceRoot":"","sources":["../../src/virtualParent/elementContains.ts"],"names":[],"mappings":";;;AAAA,yCAAwC;AACxC;;;;;GAKG;AACH,SAAgB,eAAe,CAAC,MAA0B,EAAE,KAAyB;IACnF,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE;QACrB,OAAO,KAAK,CAAC;KACd;IAED,IAAI,MAAM,KAAK,KAAK,EAAE;QACpB,OAAO,IAAI,CAAC;KACb;SAAM;QACL,OAAO,KAAK,EAAE;YACZ,IAAM,UAAU,GAAuB,qBAAS,CAAC,KAAK,CAAC,CAAC;YAExD,IAAI,UAAU,KAAK,MAAM,EAAE;gBACzB,OAAO,IAAI,CAAC;aACb;YAED,KAAK,GAAG,UAAU,CAAC;SACpB;KACF;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AApBD,0CAoBC"}

package/lib-commonjs/virtualParent/getParent.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Gets the element which is the parent of a given element.
+ * This method prefers the virtual parent over real DOM parent when present.
+ */
+export declare function getParent(child: HTMLElement | null): HTMLElement | null;

package/lib-commonjs/virtualParent/getParent.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getParent = void 0;
+var getVirtualParent_1 = require("./getVirtualParent");
+/**
+ * Gets the element which is the parent of a given element.
+ * This method prefers the virtual parent over real DOM parent when present.
+ */
+function getParent(child) {
+    return (child && getVirtualParent_1.getVirtualParent(child)) || (child === null || child === void 0 ? void 0 : child.parentNode);
+}
+exports.getParent = getParent;
+//# sourceMappingURL=getParent.js.map

package/lib-commonjs/virtualParent/getParent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getParent.js","sourceRoot":"","sources":["../../src/virtualParent/getParent.ts"],"names":[],"mappings":";;;AAAA,uDAAsD;AAEtD;;;GAGG;AACH,SAAgB,SAAS,CAAC,KAAyB;IACjD,OAAO,CAAC,KAAK,IAAI,mCAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAiC,CAAA,CAAC;AACzF,CAAC;AAFD,8BAEC"}

package/lib-commonjs/virtualParent/getVirtualParent.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Gets the virtual parent given the child element, if it exists.
+ */
+export declare function getVirtualParent(child: HTMLElement): HTMLElement | undefined;

package/lib-commonjs/virtualParent/getVirtualParent.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVirtualParent = void 0;
+var isVirtualElement_1 = require("./isVirtualElement");
+/**
+ * Gets the virtual parent given the child element, if it exists.
+ */
+function getVirtualParent(child) {
+    var parent;
+    if (isVirtualElement_1.isVirtualElement(child)) {
+        parent = child._virtual.parent;
+    }
+    return parent;
+}
+exports.getVirtualParent = getVirtualParent;
+//# sourceMappingURL=getVirtualParent.js.map

package/lib-commonjs/virtualParent/getVirtualParent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getVirtualParent.js","sourceRoot":"","sources":["../../src/virtualParent/getVirtualParent.ts"],"names":[],"mappings":";;;AAAA,uDAAsD;AACtD;;GAEG;AACH,SAAgB,gBAAgB,CAAC,KAAkB;IACjD,IAAI,MAA+B,CAAC;IACpC,IAAI,mCAAgB,CAAC,KAAK,CAAC,EAAE;QAC3B,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;KAChC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAND,4CAMC"}

package/lib-commonjs/virtualParent/index.d.ts

@@ -0,0 +1,5 @@
+export * from './elementContains';
+export * from './getParent';
+export * from './getVirtualParent';
+export * from './isVirtualElement';
+export * from './setVirtualParent';

package/lib-commonjs/virtualParent/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./elementContains"), exports);
+tslib_1.__exportStar(require("./getParent"), exports);
+tslib_1.__exportStar(require("./getVirtualParent"), exports);
+tslib_1.__exportStar(require("./isVirtualElement"), exports);
+tslib_1.__exportStar(require("./setVirtualParent"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/virtualParent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/virtualParent/index.ts"],"names":[],"mappings":";;;AAAA,4DAAkC;AAClC,sDAA4B;AAC5B,6DAAmC;AACnC,6DAAmC;AACnC,6DAAmC"}

package/lib-commonjs/virtualParent/isVirtualElement.d.ts

@@ -0,0 +1,5 @@
+import type { VirtualElement } from './types';
+/**
+ * Determines whether or not an element has the virtual hierarchy extension.
+ */
+export declare function isVirtualElement(element: HTMLElement | VirtualElement): element is VirtualElement;

package/lib-commonjs/virtualParent/isVirtualElement.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isVirtualElement = void 0;
+/**
+ * Determines whether or not an element has the virtual hierarchy extension.
+ */
+function isVirtualElement(element) {
+    return element && !!element._virtual;
+}
+exports.isVirtualElement = isVirtualElement;
+//# sourceMappingURL=isVirtualElement.js.map

package/lib-commonjs/virtualParent/isVirtualElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isVirtualElement.js","sourceRoot":"","sources":["../../src/virtualParent/isVirtualElement.ts"],"names":[],"mappings":";;;AAEA;;GAEG;AACH,SAAgB,gBAAgB,CAAC,OAAqC;IACpE,OAAO,OAAO,IAAI,CAAC,CAAkB,OAAQ,CAAC,QAAQ,CAAC;AACzD,CAAC;AAFD,4CAEC"}

package/lib-commonjs/virtualParent/setVirtualParent.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Sets the virtual parent of an element.
+ *
+ * @param child - Theme element to set the virtual parent
+ * @param parent - The virtual parent, use `undefined` to remove a virtual parent relationship
+ */
+export declare function setVirtualParent(child: HTMLElement, parent?: HTMLElement): void;

package/lib-commonjs/virtualParent/setVirtualParent.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setVirtualParent = void 0;
+/**
+ * Sets the virtual parent of an element.
+ *
+ * @param child - Theme element to set the virtual parent
+ * @param parent - The virtual parent, use `undefined` to remove a virtual parent relationship
+ */
+function setVirtualParent(child, parent) {
+    if (!child) {
+        return;
+    }
+    var virtualChild = child;
+    if (!virtualChild._virtual) {
+        virtualChild._virtual = {};
+    }
+    virtualChild._virtual.parent = parent || undefined;
+}
+exports.setVirtualParent = setVirtualParent;
+//# sourceMappingURL=setVirtualParent.js.map

package/lib-commonjs/virtualParent/setVirtualParent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setVirtualParent.js","sourceRoot":"","sources":["../../src/virtualParent/setVirtualParent.ts"],"names":[],"mappings":";;;AAEA;;;;;GAKG;AACH,SAAgB,gBAAgB,CAAC,KAAkB,EAAE,MAAoB;IACvE,IAAI,CAAC,KAAK,EAAE;QACV,OAAO;KACR;IAED,IAAM,YAAY,GAAmB,KAAK,CAAC;IAE3C,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE;QAC1B,YAAY,CAAC,QAAQ,GAAG,EAAE,CAAC;KAC5B;IAED,YAAY,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,IAAI,SAAS,CAAC;AACrD,CAAC;AAZD,4CAYC"}

package/lib-commonjs/virtualParent/types.d.ts

@@ -0,0 +1,5 @@
+export interface VirtualElement extends HTMLElement {
+    _virtual: {
+        parent?: HTMLElement;
+    };
+}

package/lib-commonjs/virtualParent/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib-commonjs/virtualParent/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/virtualParent/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-portal",
-  "version": "9.0.0-alpha.8",
+  "version": "9.0.0-nightly.25435def33.0",
   "description": "A utility component that creates portals compatible with Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,19 +13,21 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start": "just-scripts dev:storybook",
-    "start-test": "just-scripts jest-watch",
-    "test": "just-scripts test",
-    "update-snapshots": "just-scripts jest -u"
+    "start": "yarn storybook",
+    "test": "jest",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-portal/src && yarn docs",
+    "storybook": "start-storybook"
   },
   "devDependencies": {
-    "@fluentui/eslint-plugin": "^1.2.0",
-    "@fluentui/jest-serializer-make-styles": "^9.0.0-alpha.7",
-    "@fluentui/react-conformance": "^0.3.0",
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/jest-serializer-make-styles": "9.0.0-nightly.25435def33.0",
+    "@fluentui/react-conformance": "*",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -39,9 +41,10 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "^9.0.0-alpha.30",
-    "@fluentui/react-shared-contexts": "^9.0.0-alpha.8",
-    "@fluentui/react-utilities": "^9.0.0-alpha.21",
+    "@fluentui/react-make-styles": "9.0.0-nightly.25435def33.0",
+    "@fluentui/react-shared-contexts": "9.0.0-nightly.25435def33.0",
+    "@fluentui/react-tabster": "9.0.0-nightly.25435def33.0",
+    "@fluentui/react-utilities": "9.0.0-nightly.25435def33.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -51,7 +54,7 @@
     "react-dom": ">=16.8.0 <18.0.0"
   },
   "beachball": {
-    "tag": "alpha",
+    "tag": "beta",
     "disallowedChangeTypes": [
       "major",
       "minor",

package/config/api-extractor.json

@@ -1,3 +0,0 @@
-{
-  "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json"
-}

package/config/tests.js

@@ -1,7 +0,0 @@
-/** Jest test setup file. */
-
-const { configure } = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-
-// Configure enzyme.
-configure({ adapter: new Adapter() });

package/etc/react-portal.api.md

@@ -1,32 +0,0 @@
-## API Report File for "@fluentui/react-portal"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import * as React_2 from 'react';
-
-// @public
-export const Portal: React_2.FC<PortalProps>;
-
-// @public (undocumented)
-export interface PortalProps {
-    children?: React_2.ReactNode;
-    mountNode?: HTMLDivElement | null;
-}
-
-// @public (undocumented)
-export interface PortalState extends PortalProps {
-    shouldRender: boolean;
-}
-
-// @public
-export const renderPortal: (state: PortalState) => React_2.ReactPortal | null;
-
-// @public
-export const usePortal: (props: PortalProps, defaultProps?: PortalProps | undefined) => PortalState;
-
-
-// (No @packageDocumentation comment for this package)
-
-```

package/just.config.ts

@@ -1,3 +0,0 @@
-import { preset } from '@fluentui/scripts';
-
-preset();

package/lib-amd/Portal.d.ts

@@ -1 +0,0 @@
-export * from './components/Portal/index';

package/lib-amd/Portal.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./components/Portal/index"], function (require, exports, tslib_1, index_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(index_1, exports);
-});
-//# sourceMappingURL=Portal.js.map

package/lib-amd/Portal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Portal.js","sourceRoot":"../src/","sources":["Portal.ts"],"names":[],"mappings":";;;IAAA,uCAA0C","sourcesContent":["export * from './components/Portal/index';\n"]}