npm - fluentui-extended - Versions diffs - 2026.8.60 → 2026.8.70 - Mend

fluentui-extended 2026.8.60 → 2026.8.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactNode, ReactPortal } from 'react';
+import React__default, { ReactNode } from 'react';
 import { InputProps, PresenceBadgeStatus } from '@fluentui/react-components';
 /**
@@ -39,46 +39,32 @@ declare const toTextareaAppearance: (appearance?: FieldAppearance) => TextareaAp
 declare const toListboxAppearance: (appearance?: FieldAppearance) => ListboxAppearance;
 interface ParentPortalProps {
-    /** Content to render in the parent document. */
     children: ReactNode;
-    /**
-     * ID for the container element created in the parent document.
-     * Defaults to 'fluentui-extended-parent-portal-root'.
-     */
     containerId?: string;
-    /**
-     * When true, syncs Griffel stylesheets from the iframe to the parent
-     * document so Fluent components render with full styling.
-     * Defaults to true.
-     */
     syncStyles?: boolean;
-    /**
-     * When true, copies Fluent CSS custom properties (theme tokens) from the
-     * iframe's FluentProvider to the parent container.
-     * Defaults to true.
-     */
     syncTokens?: boolean;
-    /**
-     * Interval (ms) for re-syncing CSSOM rules that Griffel inserts via
-     * insertRule(). Set to 0 to disable periodic sync (only MutationObserver).
-     * Defaults to 300.
-     */
     syncInterval?: number;
-    /**
-     * Additional CSS injected into the parent document's <head> for the
-     * portal container. Overrides default positioning styles.
-     */
+    containerStyles?: string;
+}
+interface UseParentPortalMountOptions {
+    containerId?: string;
+    syncStyles?: boolean;
+    syncTokens?: boolean;
+    syncInterval?: number;
     containerStyles?: string;
 }
 /**
- * Renders children into the parent document (escaping an iframe) with full
- * Fluent UI styling. Wraps content in a FluentProvider so theme tokens and
- * Griffel styles are available in the parent DOM.
- *
- * Falls back to rendering children in-place if not inside an iframe.
+ * Hook that returns the parent-document mount node for use with Fluent's
+ * `mountNode` prop (e.g. on DialogSurface). Also handles style sync.
+ */
+declare function useParentPortalMount(options?: UseParentPortalMountOptions): HTMLElement | undefined;
+/**
+ * Renders children into the parent document via createPortal.
+ * Use for non-portal Fluent components. For DialogSurface, use
+ * useParentPortalMount() with the mountNode prop instead.
  */
-declare function ParentPortal({ children, containerId, syncStyles, syncTokens, syncInterval, containerStyles, }: ParentPortalProps): ReactPortal | React__default.JSX.Element;
+declare function ParentPortal({ children, containerId, syncStyles, syncTokens, syncInterval, containerStyles, }: ParentPortalProps): React__default.JSX.Element;
 /** Size variants matching FluentUI Input component */
 type LookupSize = 'small' | 'medium';
@@ -250,6 +236,12 @@ interface LookupProps extends Omit<InputProps, 'onChange' | 'value'> {
     hoverCardDelayMs?: number;
     /** Content rendered at the bottom of the card, e.g. an "Open record" link */
     hoverCardActions?: React.ReactNode;
+    /**
+     * Mount node for the dropdown Portal. Use when the Lookup is inside a
+     * dialog rendered in a parent document (via mountNode) so the listbox
+     * appears in the same document as the dialog.
+     */
+    mountNode?: HTMLElement;
 }
 declare const Lookup: React.FC<LookupProps>;
@@ -1511,4 +1503,4 @@ declare const validateQueryBuilderState: (state: QueryBuilderState, fields: Quer
 declare const QueryBuilder: React.FC<QueryBuilderProps>;
-export { type AttributeMetadata, CommandBar, type CommandBarItem, type CommandBarItemAppearance, type CommandBarProps, DEFAULT_FIELD_APPEARANCE, type DateTimeBehavior, DateTimeField, type DateTimeFieldProps, DateTimeRangeField, type DateTimeRangeFieldChange, type DateTimeRangeFieldProps, type DateTimeRangeValue, type EntityDefinition, EntityGrid, type EntityGridColumn, type EntityGridProps, type EntityGridSort, type EntityGridSortDirection, type FieldAppearance, type ListboxAppearance, Lookup, type LookupOption, type LookupOptionDetail, type LookupProps, OptionSetField, type OptionSetFieldProps, type OptionSetOption, type OptionSetValue, OwnerLookup, type OwnerLookupProps, type OwnerRecord, type OwnerType, ParentPortal, type ParentPortalProps, QueryBuilder, type QueryBuilderApplyResult, type QueryBuilderCondition, type QueryBuilderDataType, type QueryBuilderField, type QueryBuilderGroup, type QueryBuilderOperator, type QueryBuilderOption, type QueryBuilderProps, type QueryBuilderQueryOptions, type QueryBuilderRelatedEntity, type QueryBuilderState, RecordHoverCard, type RecordHoverCardDetail, type RecordHoverCardProps, type RecordHoverCardRecord, type SearchOwnersOptions, type SearchSystemUsersOptions, SystemUserCard, type SystemUserCardProps, type SystemUserContactItem, SystemUserPersona, type SystemUserPersonaProps, type SystemUserPersonaSize, type SystemUserRecord, type TextareaAppearance, type WebApiCollection, WebApiError, clearMetadataCache, formatMultiSelectValue, formatStoredValue, getAttributeOptions, getEntityAttributes, getEntityDefinition, getEntityOptionSets, getOwner, getSystemUser, getWebApiBaseUrl, initialsOf, ownerFromUser, parseFetchXmlToState, parseSelectedValues, parseStoredValue, searchOwners, searchSystemUsers, searchTeams, serializeQueryBuilderState, setWebApiBaseUrl, setWebApiFetch, systemUserImageUrl, toListboxAppearance, toTextareaAppearance, validateFetchXmlSyntax, validateQueryBuilderState, webApiGet };
+export { type AttributeMetadata, CommandBar, type CommandBarItem, type CommandBarItemAppearance, type CommandBarProps, DEFAULT_FIELD_APPEARANCE, type DateTimeBehavior, DateTimeField, type DateTimeFieldProps, DateTimeRangeField, type DateTimeRangeFieldChange, type DateTimeRangeFieldProps, type DateTimeRangeValue, type EntityDefinition, EntityGrid, type EntityGridColumn, type EntityGridProps, type EntityGridSort, type EntityGridSortDirection, type FieldAppearance, type ListboxAppearance, Lookup, type LookupOption, type LookupOptionDetail, type LookupProps, OptionSetField, type OptionSetFieldProps, type OptionSetOption, type OptionSetValue, OwnerLookup, type OwnerLookupProps, type OwnerRecord, type OwnerType, ParentPortal, type ParentPortalProps, QueryBuilder, type QueryBuilderApplyResult, type QueryBuilderCondition, type QueryBuilderDataType, type QueryBuilderField, type QueryBuilderGroup, type QueryBuilderOperator, type QueryBuilderOption, type QueryBuilderProps, type QueryBuilderQueryOptions, type QueryBuilderRelatedEntity, type QueryBuilderState, RecordHoverCard, type RecordHoverCardDetail, type RecordHoverCardProps, type RecordHoverCardRecord, type SearchOwnersOptions, type SearchSystemUsersOptions, SystemUserCard, type SystemUserCardProps, type SystemUserContactItem, SystemUserPersona, type SystemUserPersonaProps, type SystemUserPersonaSize, type SystemUserRecord, type TextareaAppearance, type UseParentPortalMountOptions, type WebApiCollection, WebApiError, clearMetadataCache, formatMultiSelectValue, formatStoredValue, getAttributeOptions, getEntityAttributes, getEntityDefinition, getEntityOptionSets, getOwner, getSystemUser, getWebApiBaseUrl, initialsOf, ownerFromUser, parseFetchXmlToState, parseSelectedValues, parseStoredValue, searchOwners, searchSystemUsers, searchTeams, serializeQueryBuilderState, setWebApiBaseUrl, setWebApiFetch, systemUserImageUrl, toListboxAppearance, toTextareaAppearance, useParentPortalMount, validateFetchXmlSyntax, validateQueryBuilderState, webApiGet };

package/dist/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactNode, ReactPortal } from 'react';
+import React__default, { ReactNode } from 'react';
 import { InputProps, PresenceBadgeStatus } from '@fluentui/react-components';
 /**
@@ -39,46 +39,32 @@ declare const toTextareaAppearance: (appearance?: FieldAppearance) => TextareaAp
 declare const toListboxAppearance: (appearance?: FieldAppearance) => ListboxAppearance;
 interface ParentPortalProps {
-    /** Content to render in the parent document. */
     children: ReactNode;
-    /**
-     * ID for the container element created in the parent document.
-     * Defaults to 'fluentui-extended-parent-portal-root'.
-     */
     containerId?: string;
-    /**
-     * When true, syncs Griffel stylesheets from the iframe to the parent
-     * document so Fluent components render with full styling.
-     * Defaults to true.
-     */
     syncStyles?: boolean;
-    /**
-     * When true, copies Fluent CSS custom properties (theme tokens) from the
-     * iframe's FluentProvider to the parent container.
-     * Defaults to true.
-     */
     syncTokens?: boolean;
-    /**
-     * Interval (ms) for re-syncing CSSOM rules that Griffel inserts via
-     * insertRule(). Set to 0 to disable periodic sync (only MutationObserver).
-     * Defaults to 300.
-     */
     syncInterval?: number;
-    /**
-     * Additional CSS injected into the parent document's <head> for the
-     * portal container. Overrides default positioning styles.
-     */
+    containerStyles?: string;
+}
+interface UseParentPortalMountOptions {
+    containerId?: string;
+    syncStyles?: boolean;
+    syncTokens?: boolean;
+    syncInterval?: number;
     containerStyles?: string;
 }
 /**
- * Renders children into the parent document (escaping an iframe) with full
- * Fluent UI styling. Wraps content in a FluentProvider so theme tokens and
- * Griffel styles are available in the parent DOM.
- *
- * Falls back to rendering children in-place if not inside an iframe.
+ * Hook that returns the parent-document mount node for use with Fluent's
+ * `mountNode` prop (e.g. on DialogSurface). Also handles style sync.
+ */
+declare function useParentPortalMount(options?: UseParentPortalMountOptions): HTMLElement | undefined;
+/**
+ * Renders children into the parent document via createPortal.
+ * Use for non-portal Fluent components. For DialogSurface, use
+ * useParentPortalMount() with the mountNode prop instead.
  */
-declare function ParentPortal({ children, containerId, syncStyles, syncTokens, syncInterval, containerStyles, }: ParentPortalProps): ReactPortal | React__default.JSX.Element;
+declare function ParentPortal({ children, containerId, syncStyles, syncTokens, syncInterval, containerStyles, }: ParentPortalProps): React__default.JSX.Element;
 /** Size variants matching FluentUI Input component */
 type LookupSize = 'small' | 'medium';
@@ -250,6 +236,12 @@ interface LookupProps extends Omit<InputProps, 'onChange' | 'value'> {
     hoverCardDelayMs?: number;
     /** Content rendered at the bottom of the card, e.g. an "Open record" link */
     hoverCardActions?: React.ReactNode;
+    /**
+     * Mount node for the dropdown Portal. Use when the Lookup is inside a
+     * dialog rendered in a parent document (via mountNode) so the listbox
+     * appears in the same document as the dialog.
+     */
+    mountNode?: HTMLElement;
 }
 declare const Lookup: React.FC<LookupProps>;
@@ -1511,4 +1503,4 @@ declare const validateQueryBuilderState: (state: QueryBuilderState, fields: Quer
 declare const QueryBuilder: React.FC<QueryBuilderProps>;
-export { type AttributeMetadata, CommandBar, type CommandBarItem, type CommandBarItemAppearance, type CommandBarProps, DEFAULT_FIELD_APPEARANCE, type DateTimeBehavior, DateTimeField, type DateTimeFieldProps, DateTimeRangeField, type DateTimeRangeFieldChange, type DateTimeRangeFieldProps, type DateTimeRangeValue, type EntityDefinition, EntityGrid, type EntityGridColumn, type EntityGridProps, type EntityGridSort, type EntityGridSortDirection, type FieldAppearance, type ListboxAppearance, Lookup, type LookupOption, type LookupOptionDetail, type LookupProps, OptionSetField, type OptionSetFieldProps, type OptionSetOption, type OptionSetValue, OwnerLookup, type OwnerLookupProps, type OwnerRecord, type OwnerType, ParentPortal, type ParentPortalProps, QueryBuilder, type QueryBuilderApplyResult, type QueryBuilderCondition, type QueryBuilderDataType, type QueryBuilderField, type QueryBuilderGroup, type QueryBuilderOperator, type QueryBuilderOption, type QueryBuilderProps, type QueryBuilderQueryOptions, type QueryBuilderRelatedEntity, type QueryBuilderState, RecordHoverCard, type RecordHoverCardDetail, type RecordHoverCardProps, type RecordHoverCardRecord, type SearchOwnersOptions, type SearchSystemUsersOptions, SystemUserCard, type SystemUserCardProps, type SystemUserContactItem, SystemUserPersona, type SystemUserPersonaProps, type SystemUserPersonaSize, type SystemUserRecord, type TextareaAppearance, type WebApiCollection, WebApiError, clearMetadataCache, formatMultiSelectValue, formatStoredValue, getAttributeOptions, getEntityAttributes, getEntityDefinition, getEntityOptionSets, getOwner, getSystemUser, getWebApiBaseUrl, initialsOf, ownerFromUser, parseFetchXmlToState, parseSelectedValues, parseStoredValue, searchOwners, searchSystemUsers, searchTeams, serializeQueryBuilderState, setWebApiBaseUrl, setWebApiFetch, systemUserImageUrl, toListboxAppearance, toTextareaAppearance, validateFetchXmlSyntax, validateQueryBuilderState, webApiGet };
+export { type AttributeMetadata, CommandBar, type CommandBarItem, type CommandBarItemAppearance, type CommandBarProps, DEFAULT_FIELD_APPEARANCE, type DateTimeBehavior, DateTimeField, type DateTimeFieldProps, DateTimeRangeField, type DateTimeRangeFieldChange, type DateTimeRangeFieldProps, type DateTimeRangeValue, type EntityDefinition, EntityGrid, type EntityGridColumn, type EntityGridProps, type EntityGridSort, type EntityGridSortDirection, type FieldAppearance, type ListboxAppearance, Lookup, type LookupOption, type LookupOptionDetail, type LookupProps, OptionSetField, type OptionSetFieldProps, type OptionSetOption, type OptionSetValue, OwnerLookup, type OwnerLookupProps, type OwnerRecord, type OwnerType, ParentPortal, type ParentPortalProps, QueryBuilder, type QueryBuilderApplyResult, type QueryBuilderCondition, type QueryBuilderDataType, type QueryBuilderField, type QueryBuilderGroup, type QueryBuilderOperator, type QueryBuilderOption, type QueryBuilderProps, type QueryBuilderQueryOptions, type QueryBuilderRelatedEntity, type QueryBuilderState, RecordHoverCard, type RecordHoverCardDetail, type RecordHoverCardProps, type RecordHoverCardRecord, type SearchOwnersOptions, type SearchSystemUsersOptions, SystemUserCard, type SystemUserCardProps, type SystemUserContactItem, SystemUserPersona, type SystemUserPersonaProps, type SystemUserPersonaSize, type SystemUserRecord, type TextareaAppearance, type UseParentPortalMountOptions, type WebApiCollection, WebApiError, clearMetadataCache, formatMultiSelectValue, formatStoredValue, getAttributeOptions, getEntityAttributes, getEntityDefinition, getEntityOptionSets, getOwner, getSystemUser, getWebApiBaseUrl, initialsOf, ownerFromUser, parseFetchXmlToState, parseSelectedValues, parseStoredValue, searchOwners, searchSystemUsers, searchTeams, serializeQueryBuilderState, setWebApiBaseUrl, setWebApiFetch, systemUserImageUrl, toListboxAppearance, toTextareaAppearance, useParentPortalMount, validateFetchXmlSyntax, validateQueryBuilderState, webApiGet };

package/dist/index.js CHANGED Viewed

@@ -109,29 +109,12 @@ function serializeSheet(sheet) {
     return "";
   }
 }
-function ParentPortal({
-  children,
-  containerId = DEFAULT_CONTAINER_ID,
-  syncStyles = true,
-  syncTokens = true,
-  syncInterval = 300,
-  containerStyles
-}) {
-  const [container, setContainer] = React15.useState(null);
+function useSyncStyles(active, containerId, syncInterval) {
   const intervalRef = React15.useRef(null);
   const observerRef = React15.useRef(null);
   const mirrorMapRef = React15.useRef(/* @__PURE__ */ new Map());
   React15.useEffect(() => {
-    const parentDoc = getParentDocument();
-    if (!parentDoc) return;
-    const el = getOrCreateContainer(parentDoc, containerId, containerStyles);
-    if (syncTokens) copyFluentTokens(el);
-    setContainer(el);
-    return () => {
-    };
-  }, [containerId, containerStyles, syncTokens]);
-  React15.useEffect(() => {
-    if (!syncStyles || !container) return;
+    if (!active) return;
     const parentDoc = getParentDocument();
     if (!parentDoc) return;
     const mirrorMap = mirrorMapRef.current;
@@ -170,7 +153,42 @@ function ParentPortal({
       for (const mirror of mirrorMap.values()) mirror.remove();
       mirrorMap.clear();
     };
-  }, [syncStyles, syncInterval, container, containerId]);
+  }, [active, syncInterval, containerId]);
+}
+function useParentPortalMount(options) {
+  const {
+    containerId = DEFAULT_CONTAINER_ID,
+    syncStyles = true,
+    syncTokens = true,
+    syncInterval = 300,
+    containerStyles
+  } = options ?? {};
+  const [container, setContainer] = React15.useState(null);
+  React15.useEffect(() => {
+    const parentDoc = getParentDocument();
+    if (!parentDoc) return;
+    const el = getOrCreateContainer(parentDoc, containerId, containerStyles);
+    if (syncTokens) copyFluentTokens(el);
+    setContainer(el);
+  }, [containerId, containerStyles, syncTokens]);
+  useSyncStyles(syncStyles && container !== null, containerId, syncInterval);
+  return container ?? void 0;
+}
+function ParentPortal({
+  children,
+  containerId = DEFAULT_CONTAINER_ID,
+  syncStyles = true,
+  syncTokens = true,
+  syncInterval = 300,
+  containerStyles
+}) {
+  const container = useParentPortalMount({
+    containerId,
+    syncStyles,
+    syncTokens,
+    syncInterval,
+    containerStyles
+  });
   if (!container) {
     return /* @__PURE__ */ React15__namespace.default.createElement(React15__namespace.default.Fragment, null, children);
   }
@@ -1121,6 +1139,7 @@ var Lookup = ({
   hoverCardTarget = "both",
   hoverCardDelayMs = 400,
   hoverCardActions,
+  mountNode,
   multiSelect = false,
   maxSelection,
   selectedKeys: selectedKeysProp,
@@ -1576,7 +1595,7 @@ var Lookup = ({
       }
     )),
     /* @__PURE__ */ React15__namespace.createElement("span", { className: styles.tagInputIcons }, loading ? /* @__PURE__ */ React15__namespace.createElement(reactComponents.Spinner, { size: "tiny" }) : /* @__PURE__ */ React15__namespace.createElement("span", { className: styles.chevronIcon }, /* @__PURE__ */ React15__namespace.createElement(reactIcons.SearchRegular, null)))
-  ), showDropdown && /* @__PURE__ */ React15__namespace.createElement(reactComponents.Portal, null, /* @__PURE__ */ React15__namespace.createElement(
+  ), showDropdown && /* @__PURE__ */ React15__namespace.createElement(reactComponents.Portal, { mountNode }, /* @__PURE__ */ React15__namespace.createElement(
     "div",
     {
       className: styles.dropdownPortal,
@@ -9924,6 +9943,7 @@ exports.setWebApiFetch = setWebApiFetch;
 exports.systemUserImageUrl = systemUserImageUrl;
 exports.toListboxAppearance = toListboxAppearance;
 exports.toTextareaAppearance = toTextareaAppearance;
+exports.useParentPortalMount = useParentPortalMount;
 exports.validateFetchXmlSyntax = validateFetchXmlSyntax;
 exports.validateQueryBuilderState = validateQueryBuilderState;
 exports.webApiGet = webApiGet;