@fluentui/react-portal 0.0.0-nightly-20220302-0405.1

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-portal
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/README.md

@@ -0,0 +1,147 @@
+# @fluentui/react-portal
+
+**React Portal components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+This package contains the `Portal` component, which allow consumers to render [React portals](https://reactjs.org/docs/portals.html) with Fluent styling and RTL awareness.
+
+## Usage
+
+### Portal
+
+`Portal` can be used as standalone with any part of a Fluent app. The component should be under a `FluentProvider` in the tree to make sure that proper theming and RTL handling is available.
+
+By default `Portal` will render content to `document body`
+
+```tsx
+<FluentProvider>
+  <Portal>Content rendered by default to Fluent's document.body</Portal>
+</FluentProvider>
+```
+
+The mount location of the portal can be customized
+
+```tsx
+const node = document.getElementById('customNode');
+
+<Portal mountNode={node}>Render to a custom node in DOM</Portal>;
+```
+
+### Styling
+
+`Portal` renders React children directly to the default/configured DOM node. Therefore styling should be applied to the `children` by users directly.
+
+### Virtual parents
+
+Out of order DOM elements can be problematic when using 'click outside' event listeners since you cannot rely on `element.contains(event.target)` because the `Portal` elements are out of DOM order.
+
+```tsx
+
+const outerButtonRef = React.useRef();
+const innerButtonRef = React.useRef();
+
+
+<Portal>
+  <div>
+    <button ref={outerButtonRef}> Outer button </button>
+    <Portal>
+      <div>
+        <button ref={innerButtonRef}> Inner button </button>
+      </div>
+    </Portal>
+  </div>
+</Portal>
+
+// DOM output
+<div>
+  <button>Outer button</button>
+</div>
+
+<div>
+  <button>Inner button</button>
+</div>
+
+// Let's add an event listener to 'dismss' the outer portal when clicked outside
+// ⚠⚠⚠ This will always be called when clicking on the inner button
+document.addEventListener((event) => {
+  if (outerButtonRef.current.contains(event.target)) {
+    dismissOuterPortal();
+  }
+})
+```
+
+When the above case is not required, using `element.contains` is perfectly fine. But nested cases should still be handled appropriately. We do this using the concept of `virtual parents`
+
+`Portal` will make public 2 utilities that will only be used in cases where the user needs to know if an out of order DOM element will need to be used or not.
+
+- `setVirtualParent` - sets virtual parent. Portal uses this already internally.
+- `elementContains` - similar to `element.contains` but uses the virtual hierarchy as reference
+
+Below shows what a virtual parent is
+
+```tsx
+// Setting a virtual parent
+
+const parent document.getElementById('parent')
+const child document.getElement.ById('child');
+
+child._virtual.parent = parent;
+```
+
+`Portals` will render a hidden span that will be the virtual parent, by nesting portals virtual parens will also be nested so that `elementContains` will work predictably.
+
+```tsx
+<FluentProvider>
+  <Portal id="portal-1" />
+  <Portal id="portal-2" />
+</FluentProvider>
+```
+
+DOM output:
+
+```tsx
+<body>
+  <div>
+    {/* Virtual parent for portal*/}
+    <span aria-hidden />
+    {/* Virtual parent for portal*/}
+    <span aria-hidden />
+  </div>
+
+  <div id="portal-1" class="theme-provider-0">
+    {children}
+  </div>
+  <div id="portal-2" class="theme-provider-0">
+    {children}
+  </div>
+</body>
+```
+
+```tsx
+<FluentProvider>
+  <Portal id="portal-1">
+    <Portal id="portal-2" />
+  </Portal>
+</FluentProvider>
+```
+
+DOM output:
+
+```tsx
+<body>
+  <div>
+    {/* Virtual parent for outer portal*/}
+    <span aria-hidden></span>
+  </div>
+
+  <div id="portal-1" class="theme-provider-0">
+    {/* Virtual parent for inner portal*/}
+    <span aria-hidden />
+    {children}
+  </div>
+  <div id="portal-2" class="theme-provider-0">
+    {children}
+  </div>
+</body>
+```

package/Spec.md

@@ -0,0 +1,254 @@
+# Portal Spec
+
+## Background
+
+Components that require positioning out of the normal DOM order such as Menu and Tooltip are generally rendered through React portals. This is very useful when the components need to break out of the bounds of a parent component so that the content is not overflowed or covered by another element with zIndex. Portals also support event bubbling in the React tree.
+
+Since our styling system uses css variables that are written onto DOM, we need to ensure that all portals are rendered onto a part of the DOM where the css variables are available.
+
+Portals also need need to include the same dir attribute as the parent react tree, so that RTL/LTR is displayed correctly in the portal and the parent content.
+
+## Prior Art
+
+Open UI research was not done for this component. `Portal` does not actually represent a UI control, but a utility component specific to React that makes the rendering of out of order DOM elements easy from within the React tree.
+
+### v0/v8 Comparison
+
+This section compares the noteworthy differences/similarities between the `Layer` and `Portal` components of v8 and v0 respectively that share functionality with this proposed converged component.
+
+#### Portal Trigger
+
+The v0 Portal component includes a `trigger` prop that allows consumers to open a React portal. The adoption is not widely used across v0's main consumer, Teams.
+
+The v8 `Layer` component fills a similar role to `PortalInner` which is the component that actually renders a React portal.
+
+#### Event propagation
+
+v8 `Layer` users must explicitly use the `enableEventBubbling` behaviour, which is default in React portals. This is mainly because `Layer` is older than `React.Portal`. Since synthetic event propagation was only introduced with React portals, it had to be enabled to preserve backwards compat.
+
+Meanwhile v0 does not allow any kind of way to disable native React event bubbling through portals, to achieve a similar effect, the user must manage this themselves.
+
+#### DOM insertion
+
+Both `Layer` and `Portal` allow insertion of portals to the same part of the DOM element.
+
+v8 Layer does this through a `LayerHost` which can be rendered at any part of the React tree. The result is a HTMLDiv element with a specific CSS class and unique Id. `Layer` will attempt to find a `LayerHost` to mount either by CSS class or user provided `hostId`. The default fallback is `document.body`. Each `Layer` will render its own `Fabric` provider. The `insertFirst` property supported by `Layer` was introduced in #8065 for modeless Dialogs which was achieved through `position: static` and DOM insertion order. The same effect can be achieved through `pointer-events: none`.
+
+The v0 `PortalBoxContext` stores a single HTMLDiv that is usually a child of `document.body` where all `Portal` components are rendered by default. The v0 `Provider` is rendered for the default portal element, where style and RTL overrides could be applied for all portals within.
+
+#### Lifecycle methods
+
+v0 `Portal` only supports the following lifecycle methods:
+
+- onMount
+- onUnmount
+
+`Layer` supports the following:
+
+- onLayerMounted
+- onLayerWillUnmount
+
+The lifecycle events are very similar, with the only difference being that `onLayerWillUnmount` is called with `hostId` changes. v0 does not consider the mountNode changing as an unmount of the component itself.
+
+#### Focus Management
+
+v0 `Portal` can be configured to focus trap its contents while v8 `Layer` does not offer this and users would need to use `FocusTrapZone` for this purpose.
+
+## Sample Code
+
+`Portal` by default mounts the content to `document.body`. In the event a consumer needs to target a specific mount node for Portal content this should be configurable via prop. Both variants should still be able to access theme and fluent context if available.
+
+```
+const customElement = document.createElement('div');
+
+<App> // using FluentProvider of ThemeProvider but not PortalProvider
+  <Portal /> // attached to document.body
+  <Portal mountNode={customElement} /> // mounted on custom element
+</App>
+```
+
+`Portal` should be used as a component at any part of the React tree:
+
+```tsx
+<ContextProvider>
+  <Portal>
+    <ContextConsumer /> // should be able to access context
+  </Portal>
+</ContextProvider>
+```
+
+`Portal` should be able to access theme values as css variables:
+
+```tsx
+const useStyles = makeStyles({
+    portalContent: theme => {...}
+})
+
+
+const styles = useStyles();
+
+<ThemeProvider>
+    <Portal>
+      <div className={styles.portalContent}>
+        Can use all theme CSS variables from the parent ThemeProvider
+      </div>
+    </Portal>
+</ThemeProvider>
+```
+
+## Variants
+
+- Mounting the portal on a custom node
+
+## API
+
+### Portal
+
+| Name      | Description                            | Required | Type        | Default value                    |
+| --------- | -------------------------------------- | -------- | ----------- | -------------------------------- |
+| mountNode | Where the portal is mounted to the DOM | No       | HTMLElement | ProviderContext or document.body |
+
+### Virtual parents
+
+Out of order DOM elements can be problematic when using 'click outside' event listeners since you cannot rely on `element.contains(event.target)` because the `Portal` elements are out of DOM order.
+
+```tsx
+
+const outerButtonRef = React.useRef();
+const innerButtonRef = React.useRef();
+
+
+<Portal>
+  <div>
+    <button ref={outerButtonRef}> Outer button </button>
+    <Portal>
+      <div>
+        <button ref={innerButtonRef}> Inner button </button>
+      </div>
+    </Portal>
+  </div>
+</Portal>
+
+// DOM output
+<div>
+  <button>Outer button</button>
+</div>
+
+<div>
+  <button>Inner button</button>
+</div>
+
+// Let's add an event listener to 'dismss' the outer portal when clicked outside
+// ⚠⚠⚠ This will always be called when clicking on the inner button
+document.addEventListener((event) => {
+  if (outerButtonRef.current.contains(event.target)) {
+    dismissOuterPortal();
+  }
+})
+```
+
+When the above case is not required, using `element.contains` is perfectly fine. But nested cases should still be handled appropriately. We do this using the concept of `virtual parents`
+
+`Portal` will make public 2 utilities that will only be used in cases where the user needs to know if an out of order DOM element will need to be used or not.
+
+- `setVirtualParent` - sets virtual parent
+- `elementContains` - similar to `element.contains` but uses the virtual hierarchy as reference
+
+Below shows what a virtual parent is
+
+```tsx
+// Setting a virtual parent
+
+const parent document.getElementById('parent')
+const child document.getElement.ById('child');
+
+child._virtual.parent = parent;
+```
+
+## Structure
+
+```tsx
+<FluentProvider>
+  <Portal id="portal-1" />
+  <Portal id="portal-2" />
+</FluentProvider>
+```
+
+DOM output:
+
+```tsx
+<body>
+  <div>
+    {/* Virtual parent for portal*/}
+    <span aria-hidden />
+    {/* Virtual parent for portal*/}
+    <span aria-hidden />
+  </div>
+
+  <div id="portal-1" class="theme-provider-0">
+    {children}
+  </div>
+  <div id="portal-2" class="theme-provider-0">
+    {children}
+  </div>
+</body>
+```
+
+```tsx
+<FluentProvider>
+  <Portal id="portal-1">
+    <Portal id="portal-2" />
+  </Portal>
+</FluentProvider>
+```
+
+DOM output:
+
+```tsx
+<body>
+  <div>
+    {/* Virtual parent for outer portal*/}
+    <span aria-hidden></span>
+  </div>
+
+  <div id="portal-1" class="theme-provider-0">
+    {/* Virtual parent for inner portal*/}
+    <span aria-hidden />
+    {children}
+  </div>
+  <div id="portal-2" class="theme-provider-0">
+    {children}
+  </div>
+</body>
+```
+
+## Migration
+
+_Describe what will need to be done to upgrade from the existing implementations:_
+
+### v8 migration
+
+- There will be no way to disable event bubbling, it will be up to consumers to call `stopPropagation` themselves or create extra utilities that do so
+- No more concept of `LayerHost` and id/class selectors, raw HTML elements/refs can be stored in context on the consumer app and used in `mountNode` for `Portals` if required
+- No more mount lifecycle methods, users can remedy this easily with `useEffect` or `useLayoutEffect` hooks
+- `insertFirst` will no longer be supported, and can be handled by a custom `mountNode` if necessary, sticky Dialog can be implmented with `pointer-events: none`
+
+### v0 migration
+
+- No more openable portals - should use future converged `Popup`
+- No more focus trapping in `Portals` do that manually (Tabster)
+- No more mount lifecycle methods, users can remedy this easily with `useEffect` or `useLayoutEffect` hooks
+
+## Behaviors
+
+### Server Side Rendering (SSR)
+
+The ReactDOM `createPortal` requires a valid DOM node to render. This is problematic when `document` does not actually exist during the server render. Instead during the server render `null` will be used. This is not a big problem for most components that use portals such as popups or dialogs since they must be opened from some kind of trigger element (i.e. button)
+
+However, there are some cases where a `Portal` content will always need to be rendered on the page. Tooltips should always be rendered so that `aria` attributes will refer to actual elements. This is problematic since the Tooltip (or higher order component) needs to be aware of the server render where `null`is rendered and render the actual content on the first client render.
+
+The `Portal` component should handle this SSR case, and should be aware of the server and client renders when calling `ReactDOM.createPortal`.
+
+## Accessibility
+
+This component is considered a utility to render its children to an out of order DOM element. Since the component itself does not render DOM it is up to the consumer to handle the A11y requirements of their portal content.

package/dist/react-portal.d.ts

@@ -0,0 +1,62 @@
+import * as React_2 from 'react';
+
+/**
+ * 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;
+
+/**
+ * A portal provides a way to render children into a DOM node
+ * that exists outside the DOM hierarchy of the parent component.
+ */
+export declare const Portal: React_2.FC<PortalProps>;
+
+declare type PortalCommons = {
+    /**
+     * React children
+     */
+    children: React_2.ReactNode;
+    /**
+     * Where the portal children are mounted on DOM
+     * @defaultValue a new element on document.body without any styling
+     */
+    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_2.MutableRefObject<HTMLSpanElement | null>;
+};
+
+/**
+ * Render the final JSX of Portal
+ */
+export declare const renderPortal_unstable: (state: PortalState) => React_2.ReactElement;
+
+/**
+ * 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;
+
+/**
+ * Create the state required to render Portal.
+ *
+ * The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal_unstable.
+ *
+ * @param props - props from this instance of Portal
+ */
+export declare const usePortal_unstable: (props: PortalProps) => PortalState;
+
+export { }

package/lib/Portal.d.ts

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

package/lib/Portal.js

@@ -0,0 +1,2 @@
+export * from './components/Portal/index';
+//# sourceMappingURL=Portal.js.map

package/lib/Portal.js.map

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

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { PortalProps } from './Portal.types';
+/**
+ * A portal provides a way to render children into a DOM node
+ * that exists outside the DOM hierarchy of the parent component.
+ */
+export declare const Portal: React.FC<PortalProps>;

package/lib/components/Portal/Portal.js

@@ -0,0 +1,13 @@
+import { usePortal_unstable } from './usePortal';
+import { renderPortal_unstable } from './renderPortal';
+/**
+ * A portal provides a way to render children into a DOM node
+ * that exists outside the DOM hierarchy of the parent component.
+ */
+
+export const Portal = props => {
+  const state = usePortal_unstable(props);
+  return renderPortal_unstable(state);
+};
+Portal.displayName = 'Portal';
+//# sourceMappingURL=Portal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Portal/Portal.tsx"],"names":[],"mappings":"AAEA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AAGA;;;AAGG;;AACH,OAAO,MAAM,MAAM,GAA0B,KAAK,IAAG;AACnD,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,CAAhC;AAEA,SAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CAJM;AAMP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\n\nimport { usePortal_unstable } from './usePortal';\nimport { renderPortal_unstable } from './renderPortal';\nimport type { PortalProps } from './Portal.types';\n\n/**\n * A portal provides a way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nexport const Portal: React.FC<PortalProps> = props => {\n  const state = usePortal_unstable(props);\n\n  return renderPortal_unstable(state);\n};\n\nPortal.displayName = 'Portal';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+declare type PortalCommons = {
+    /**
+     * React children
+     */
+    children: React.ReactNode;
+    /**
+     * Where the portal children are mounted on DOM
+     * @defaultValue a new element on document.body without any styling
+     */
+    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>;
+};
+export {};

package/lib/components/Portal/Portal.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.types.js","sourceRoot":"../src/","sources":["components/Portal/Portal.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\ntype PortalCommons = {\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 | undefined;\n};\n\nexport type PortalProps = Partial<PortalCommons>;\n\nexport type PortalState = PortalCommons & {\n  /** Indicates if a Portal should be rendered. */\n  shouldRender: boolean;\n\n  /**\n   * Ref to the root span element as virtual parent\n   */\n  virtualParentRootRef: React.MutableRefObject<HTMLSpanElement | null>;\n};\n"]}

package/lib/components/Portal/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Portal';
+export * from './Portal.types';
+export * from './renderPortal';
+export * from './usePortal';

package/lib/components/Portal/index.js

@@ -0,0 +1,5 @@
+export * from './Portal';
+export * from './Portal.types';
+export * from './renderPortal';
+export * from './usePortal';
+//# sourceMappingURL=index.js.map

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

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

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

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

package/lib/components/Portal/renderPortal.js

@@ -0,0 +1,13 @@
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+/**
+ * Render the final JSX of Portal
+ */
+
+export const renderPortal_unstable = state => {
+  return /*#__PURE__*/React.createElement("span", {
+    hidden: true,
+    ref: state.virtualParentRootRef
+  }, state.shouldRender && state.mountNode && /*#__PURE__*/ReactDOM.createPortal(state.children, state.mountNode));
+};
+//# sourceMappingURL=renderPortal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Portal/renderPortal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAZ,MAA0B,WAA1B;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAA2C;AAC9E,sBACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAM,IAAA,MAAM,EAAA,IAAZ;AAAa,IAAA,GAAG,EAAE,KAAK,CAAC;AAAxB,GAAA,EACG,KAAK,CAAC,YAAN,IAAsB,KAAK,CAAC,SAA5B,iBAAyC,QAAQ,CAAC,YAAT,CAAsB,KAAK,CAAC,QAA5B,EAAsC,KAAK,CAAC,SAA5C,CAD5C,CADF;AAKD,CANM","sourcesContent":["import * as ReactDOM from 'react-dom';\nimport * as React from 'react';\nimport type { PortalState } from './Portal.types';\n\n/**\n * Render the final JSX of Portal\n */\nexport const renderPortal_unstable = (state: PortalState): React.ReactElement => {\n  return (\n    <span hidden ref={state.virtualParentRootRef}>\n      {state.shouldRender && state.mountNode && ReactDOM.createPortal(state.children, state.mountNode)}\n    </span>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,9 @@
+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_unstable.
+ *
+ * @param props - props from this instance of Portal
+ */
+export declare const usePortal_unstable: (props: PortalProps) => PortalState;

package/lib/components/Portal/usePortal.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { useIsSSR } from '@fluentui/react-utilities';
+import { usePortalMountNode } from './usePortalMountNode';
+import { setVirtualParent } from '../../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_unstable.
+ *
+ * @param props - props from this instance of Portal
+ */
+
+export const usePortal_unstable = props => {
+  const {
+    children,
+    mountNode
+  } = props;
+  const virtualParentRootRef = React.useRef(null);
+  const fallbackMountNode = usePortalMountNode({
+    disabled: !!mountNode
+  });
+  const state = {
+    children,
+    mountNode: mountNode !== null && mountNode !== void 0 ? mountNode : fallbackMountNode,
+    shouldRender: !useIsSSR(),
+    virtualParentRootRef
+  };
+  React.useEffect(() => {
+    if (state.virtualParentRootRef.current && state.mountNode) {
+      setVirtualParent(state.mountNode, state.virtualParentRootRef.current);
+    }
+  }, [state.virtualParentRootRef, state.mountNode]);
+  return state;
+};
+//# sourceMappingURL=usePortal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Portal/usePortal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AAGA;;;;;;AAMG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoC;AACpE,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA0B,KAAhC;AAEA,QAAM,oBAAoB,GAAG,KAAK,CAAC,MAAN,CAA8B,IAA9B,CAA7B;AACA,QAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAAE,IAAA,QAAQ,EAAE,CAAC,CAAC;AAAd,GAAD,CAA5C;AAEA,QAAM,KAAK,GAAgB;AACzB,IAAA,QADyB;AAEzB,IAAA,SAAS,EAAE,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAA,SAAA,GAAa,iBAFC;AAGzB,IAAA,YAAY,EAAE,CAAC,QAAQ,EAHE;AAIzB,IAAA;AAJyB,GAA3B;AAOA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,QAAI,KAAK,CAAC,oBAAN,CAA2B,OAA3B,IAAsC,KAAK,CAAC,SAAhD,EAA2D;AACzD,MAAA,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB,KAAK,CAAC,oBAAN,CAA2B,OAA7C,CAAhB;AACD;AACF,GAJD,EAIG,CAAC,KAAK,CAAC,oBAAP,EAA6B,KAAK,CAAC,SAAnC,CAJH;AAMA,SAAO,KAAP;AACD,CApBM","sourcesContent":["import * as React from 'react';\nimport { useIsSSR } from '@fluentui/react-utilities';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport { setVirtualParent } from '../../virtualParent/index';\nimport type { PortalProps, PortalState } from './Portal.types';\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_unstable.\n *\n * @param props - props from this instance of Portal\n */\nexport const usePortal_unstable = (props: PortalProps): PortalState => {\n  const { children, mountNode } = props;\n\n  const virtualParentRootRef = React.useRef<HTMLSpanElement>(null);\n  const fallbackMountNode = usePortalMountNode({ disabled: !!mountNode });\n\n  const state: PortalState = {\n    children,\n    mountNode: mountNode ?? fallbackMountNode,\n    shouldRender: !useIsSSR(),\n    virtualParentRootRef,\n  };\n\n  React.useEffect(() => {\n    if (state.virtualParentRootRef.current && state.mountNode) {\n      setVirtualParent(state.mountNode, state.virtualParentRootRef.current);\n    }\n  }, [state.virtualParentRootRef, state.mountNode]);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Portal/usePortalMountNode.d.ts

@@ -0,0 +1,10 @@
+export declare type UsePortalMountNodeOptions = {
+    /**
+     * Since hooks cannot be called conditionally use this flag to disable creating the node
+     */
+    disabled?: boolean;
+};
+/**
+ * Creates a new element on a document.body to mount portals
+ */
+export declare const usePortalMountNode: (options: UsePortalMountNodeOptions) => HTMLDivElement | undefined;