npm - @fluentui/react-popover - Versions diffs - 0.0.0-nightly-20220303-0405.1 → 0.0.0-nightly-20220304-0506.1 - Mend

@fluentui/react-popover 0.0.0-nightly-20220303-0405.1 → 0.0.0-nightly-20220304-0506.1

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 (38) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,15 +2,15 @@
   "name": "@fluentui/react-popover",
   "entries": [
     {
-      "date": "Thu, 03 Mar 2022 04:13:52 GMT",
-      "tag": "@fluentui/react-popover_v0.0.0-nightly-20220303-0405.1",
-      "version": "0.0.0-nightly-20220303-0405.1",
+      "date": "Fri, 04 Mar 2022 05:15:20 GMT",
+      "tag": "@fluentui/react-popover_v0.0.0-nightly-20220304-0506.1",
+      "version": "0.0.0-nightly-20220304-0506.1",
       "comments": {
         "prerelease": [
           {
             "author": "email not defined",
             "package": "@fluentui/react-popover",
-            "commit": "8db7ae621362b260adddd684122740d4736ca91d",
+            "commit": "a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77",
             "comment": "Release nightly v9"
           },
           {
@@ -19,53 +19,59 @@
             "commit": "f2f1c0ea948cc3517eeb442c05433eb0918def29",
             "comment": "Adding explicit export maps on all consumer packages for FUIR 8 and 9."
           },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-popover",
+            "commit": "17a19427f5465577427f5c1c4ed61578a063f990",
+            "comment": "refactor: PopoverSurface should be rendered from the Popover component"
+          },
           {
             "author": "beachball",
             "package": "@fluentui/react-popover",
-            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20220303-0405.1",
-            "commit": "8db7ae621362b260adddd684122740d4736ca91d"
+            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20220304-0506.1",
+            "commit": "a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-popover",
-            "comment": "Bump @fluentui/react-portal to v0.0.0-nightly-20220303-0405.1",
-            "commit": "8db7ae621362b260adddd684122740d4736ca91d"
+            "comment": "Bump @fluentui/react-portal to v0.0.0-nightly-20220304-0506.1",
+            "commit": "a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-popover",
-            "comment": "Bump @fluentui/react-positioning to v0.0.0-nightly-20220303-0405.1",
-            "commit": "8db7ae621362b260adddd684122740d4736ca91d"
+            "comment": "Bump @fluentui/react-positioning to v0.0.0-nightly-20220304-0506.1",
+            "commit": "a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-popover",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220303-0405.1",
-            "commit": "8db7ae621362b260adddd684122740d4736ca91d"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220304-0506.1",
+            "commit": "a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-popover",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220303-0405.1",
-            "commit": "8db7ae621362b260adddd684122740d4736ca91d"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220304-0506.1",
+            "commit": "a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-popover",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220303-0405.1",
-            "commit": "8db7ae621362b260adddd684122740d4736ca91d"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220304-0506.1",
+            "commit": "a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-popover",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220303-0405.1",
-            "commit": "8db7ae621362b260adddd684122740d4736ca91d"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220304-0506.1",
+            "commit": "a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-popover",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220303-0405.1",
-            "commit": "8db7ae621362b260adddd684122740d4736ca91d"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220304-0506.1",
+            "commit": "a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77"
           }
         ]
       }

package/CHANGELOG.md CHANGED Viewed

@@ -1,26 +1,27 @@
 # Change Log - @fluentui/react-popover
-This log was last generated on Thu, 03 Mar 2022 04:13:52 GMT and should not be manually modified.
+This log was last generated on Fri, 04 Mar 2022 05:15:20 GMT and should not be manually modified.
 <!-- Start content -->
-## [0.0.0-nightly-20220303-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v0.0.0-nightly-20220303-0405.1)
+## [0.0.0-nightly-20220304-0506.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v0.0.0-nightly-20220304-0506.1)
-Thu, 03 Mar 2022 04:13:52 GMT
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.4..@fluentui/react-popover_v0.0.0-nightly-20220303-0405.1)
+Fri, 04 Mar 2022 05:15:20 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.4..@fluentui/react-popover_v0.0.0-nightly-20220304-0506.1)
 ### Changes
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/8db7ae621362b260adddd684122740d4736ca91d) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77) by email not defined)
 - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
-- Bump @fluentui/react-context-selector to v0.0.0-nightly-20220303-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/8db7ae621362b260adddd684122740d4736ca91d) by beachball)
-- Bump @fluentui/react-portal to v0.0.0-nightly-20220303-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/8db7ae621362b260adddd684122740d4736ca91d) by beachball)
-- Bump @fluentui/react-positioning to v0.0.0-nightly-20220303-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/8db7ae621362b260adddd684122740d4736ca91d) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220303-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/8db7ae621362b260adddd684122740d4736ca91d) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20220303-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/8db7ae621362b260adddd684122740d4736ca91d) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20220303-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/8db7ae621362b260adddd684122740d4736ca91d) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20220303-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/8db7ae621362b260adddd684122740d4736ca91d) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220303-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/8db7ae621362b260adddd684122740d4736ca91d) by beachball)
+- refactor: PopoverSurface should be rendered from the Popover component ([PR #21922](https://github.com/microsoft/fluentui/pull/21922) by lingfangao@hotmail.com)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20220304-0506.1 ([commit](https://github.com/microsoft/fluentui/commit/a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77) by beachball)
+- Bump @fluentui/react-portal to v0.0.0-nightly-20220304-0506.1 ([commit](https://github.com/microsoft/fluentui/commit/a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77) by beachball)
+- Bump @fluentui/react-positioning to v0.0.0-nightly-20220304-0506.1 ([commit](https://github.com/microsoft/fluentui/commit/a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220304-0506.1 ([commit](https://github.com/microsoft/fluentui/commit/a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20220304-0506.1 ([commit](https://github.com/microsoft/fluentui/commit/a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20220304-0506.1 ([commit](https://github.com/microsoft/fluentui/commit/a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220304-0506.1 ([commit](https://github.com/microsoft/fluentui/commit/a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220304-0506.1 ([commit](https://github.com/microsoft/fluentui/commit/a873fd1ee15a2fdfa247e9bc7a97de0c2f85bd77) by beachball)
 ## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-rc.4)

package/dist/react-popover.d.ts CHANGED Viewed

@@ -83,7 +83,7 @@ export declare const PopoverContext: Context<PopoverContextValue>;
 /**
  * Context shared between Popover and its children components
  */
-export declare type PopoverContextValue = Pick<PopoverState, 'open' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus'>;
+export declare type PopoverContextValue = Pick<PopoverState, 'toggleOpen' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus'>;
 /**
  * Popover Props
@@ -109,6 +109,10 @@ export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children
      * Callback to open/close the Popover
      */
     setOpen: (e: OpenPopoverEvents, open: boolean) => void;
+    /**
+     * Callback to toggle the open state of the Popover
+     */
+    toggleOpen: (e: OpenPopoverEvents) => void;
     /**
      * Ref of the PopoverTrigger
      */
@@ -130,6 +134,8 @@ export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children
      */
     setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
     size: NonNullable<PopoverProps['size']>;
+    popoverTrigger: React_2.ReactElement | undefined;
+    popoverSurface: React_2.ReactElement | undefined;
 };
 /**
@@ -154,7 +160,7 @@ export declare type PopoverSurfaceSlots = {
 /**
  * PopoverSurface State
  */
-export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {
+export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {
     /**
      * CSS class for the arrow element
      */
@@ -194,7 +200,7 @@ export declare const renderPopover_unstable: (state: PopoverState) => JSX.Elemen
 /**
  * Render the final JSX of PopoverSurface
  */
-export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element | null;
+export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element;
 /**
  * Render the final JSX of PopoverTrigger

package/lib/components/Popover/Popover.types.d.ts CHANGED Viewed

@@ -68,6 +68,10 @@ export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children
      * Callback to open/close the Popover
      */
     setOpen: (e: OpenPopoverEvents, open: boolean) => void;
+    /**
+     * Callback to toggle the open state of the Popover
+     */
+    toggleOpen: (e: OpenPopoverEvents) => void;
     /**
      * Ref of the PopoverTrigger
      */
@@ -89,6 +93,8 @@ export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children
      */
     setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
     size: NonNullable<PopoverProps['size']>;
+    popoverTrigger: React.ReactElement | undefined;
+    popoverSurface: React.ReactElement | undefined;
 };
 /**
  * Data attached to open/close events

package/lib/components/Popover/Popover.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PopperVirtualElement, PositioningShorthand, usePopperMouseTarget } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\n\n/*\n Determines popover padding and arrow size\n /\nexport type PopoverSize = 'small' \| 'medium' \| 'large';\n\ntype PopoverCommons = Pick<PortalProps, 'mountNode'> & {\n /\n Controls the opening of the Popover\n /\n open: boolean;\n /\n Used to set the initial open state of the Popover in uncontrolled mode\n /\n defaultOpen?: boolean;\n /\n Call back when the component requests to change value\n * The `open` value is used as a hint when directly controlling the component\n /\n onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;\n /\n Flag to open the Popover by hovering the trigger\n /\n openOnHover?: boolean;\n /\n Flag to open the Popover as a context menu. Disables all other interactions\n /\n openOnContext?: boolean;\n /\n Do not display the arrow\n /\n noArrow?: boolean;\n /\n Determines popover padding and arrow size\n * @default medium\n /\n size?: PopoverSize;\n\n /\n A popover can appear styled with brand or inverted.\n * When not specified, the default style is used.\n /\n appearance?: 'brand' \| 'inverted';\n\n /\n Should trap focus\n /\n trapFocus?: boolean;\n\n /\n Configures the position of the Popover\n /\n positioning?: PositioningShorthand;\n};\n\n/\n Popover Props\n /\nexport type PopoverProps = Partial<PopoverCommons> & {\n /\n Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.\n * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.\n /\n children: [JSX.Element, JSX.Element] \| JSX.Element;\n};\n\n/\n Popover State\n /\nexport type PopoverState = PopoverCommons &\n Pick<PopoverProps, 'children'> & {\n /\n Callback to open/close the Popover\n /\n setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n /\n Ref of the PopoverTrigger\n /\n triggerRef: React.MutableRefObject<HTMLElement \| null>;\n /\n Ref of the PopoverSurface\n /\n contentRef: React.MutableRefObject<HTMLElement \| null>;\n /\n Ref of the pointing arrow\n /\n arrowRef: React.MutableRefObject<HTMLDivElement \| null>;\n /\n Anchors the popper to the mouse click for context events\n /\n contextTarget: PopperVirtualElement \| undefined;\n /\n A callback to set the target of the popper to the mouse click for context events\n /\n setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];\n\n size: NonNullable<PopoverProps['size']>;\n };\n\n/\n Data attached to open/close events\n /\nexport type OnOpenChangeData = { open: boolean };\n\n/\n The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n \| MouseEvent\n \| TouchEvent\n \| React.MouseEvent<HTMLElement>\n \| React.KeyboardEvent<HTMLElement>\n \| React.FocusEvent<HTMLElement>;\n"]}
1	+ {"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PopperVirtualElement, PositioningShorthand, usePopperMouseTarget } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\n\n/*\n Determines popover padding and arrow size\n /\nexport type PopoverSize = 'small' \| 'medium' \| 'large';\n\ntype PopoverCommons = Pick<PortalProps, 'mountNode'> & {\n /\n Controls the opening of the Popover\n /\n open: boolean;\n /\n Used to set the initial open state of the Popover in uncontrolled mode\n /\n defaultOpen?: boolean;\n /\n Call back when the component requests to change value\n * The `open` value is used as a hint when directly controlling the component\n /\n onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;\n /\n Flag to open the Popover by hovering the trigger\n /\n openOnHover?: boolean;\n /\n Flag to open the Popover as a context menu. Disables all other interactions\n /\n openOnContext?: boolean;\n /\n Do not display the arrow\n /\n noArrow?: boolean;\n /\n Determines popover padding and arrow size\n * @default medium\n /\n size?: PopoverSize;\n\n /\n A popover can appear styled with brand or inverted.\n * When not specified, the default style is used.\n /\n appearance?: 'brand' \| 'inverted';\n\n /\n Should trap focus\n /\n trapFocus?: boolean;\n\n /\n Configures the position of the Popover\n /\n positioning?: PositioningShorthand;\n};\n\n/\n Popover Props\n /\nexport type PopoverProps = Partial<PopoverCommons> & {\n /\n Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.\n * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.\n /\n children: [JSX.Element, JSX.Element] \| JSX.Element;\n};\n\n/\n Popover State\n /\nexport type PopoverState = PopoverCommons &\n Pick<PopoverProps, 'children'> & {\n /\n Callback to open/close the Popover\n /\n setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n /\n Callback to toggle the open state of the Popover\n /\n toggleOpen: (e: OpenPopoverEvents) => void;\n /\n Ref of the PopoverTrigger\n /\n triggerRef: React.MutableRefObject<HTMLElement \| null>;\n /\n Ref of the PopoverSurface\n /\n contentRef: React.MutableRefObject<HTMLElement \| null>;\n /\n Ref of the pointing arrow\n /\n arrowRef: React.MutableRefObject<HTMLDivElement \| null>;\n /\n Anchors the popper to the mouse click for context events\n /\n contextTarget: PopperVirtualElement \| undefined;\n /\n A callback to set the target of the popper to the mouse click for context events\n /\n setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];\n\n size: NonNullable<PopoverProps['size']>;\n\n popoverTrigger: React.ReactElement \| undefined;\n\n popoverSurface: React.ReactElement \| undefined;\n };\n\n/\n Data attached to open/close events\n /\nexport type OnOpenChangeData = { open: boolean };\n\n/\n The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n \| MouseEvent\n \| TouchEvent\n \| React.MouseEvent<HTMLElement>\n \| React.KeyboardEvent<HTMLElement>\n \| React.FocusEvent<HTMLElement>;\n"]}

package/lib/components/Popover/renderPopover.js CHANGED Viewed

@@ -6,8 +6,8 @@ import { PopoverContext } from '../../popoverContext';
 export const renderPopover_unstable = state => {
   const {
-    open,
     setOpen,
+    toggleOpen,
     triggerRef,
     contentRef,
     openOnContext,
@@ -21,8 +21,8 @@ export const renderPopover_unstable = state => {
   } = state;
   return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
     value: {
-      open,
       setOpen,
+      toggleOpen,
       triggerRef,
       contentRef,
       openOnHover,
@@ -34,6 +34,6 @@ export const renderPopover_unstable = state => {
       appearance,
       trapFocus
     }
-  }, state.children);
+  }, state.popoverTrigger, state.open && state.popoverSurface);
 };
 //# sourceMappingURL=renderPopover.js.map

package/lib/components/Popover/renderPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,sBAA/B;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AACJ,IAAA,~~IADI~~;AAEJ,IAAA,~~OAFI~~;AAGJ,IAAA,UAHI;AAIJ,IAAA,UAJI;AAKJ,IAAA,aALI;AAMJ,IAAA,WANI;AAOJ,IAAA,SAPI;AAQJ,IAAA,QARI;AASJ,IAAA,IATI;AAUJ,IAAA,OAVI;AAWJ,IAAA,UAXI;AAYJ,IAAA;AAZI,MAaF,KAbJ;AAeA,sBACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;AACtB,IAAA,KAAK,EAAE;AACL,MAAA,~~IADK~~;AAEL,MAAA,~~OAFK~~;AAGL,MAAA,UAHK;AAIL,MAAA,UAJK;AAKL,MAAA,WALK;AAML,MAAA,aANK;AAOL,MAAA,SAPK;AAQL,MAAA,QARK;AASL,MAAA,IATK;AAUL,MAAA,OAVK;AAWL,MAAA,UAXK;AAYL,MAAA;AAZK;AADe,GAAxB,EAgBG,KAAK,CAAC,~~QAhBT~~,CADF;~~AAoBD~~,~~CApCM~~","sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\n/*\n Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState) => {\n const {\n ~~open~~,\n ~~setOpen~~,\n triggerRef,\n contentRef,\n openOnContext,\n openOnHover,\n mountNode,\n arrowRef,\n size,\n noArrow,\n appearance,\n trapFocus,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n ~~open~~,\n ~~setOpen~~,\n triggerRef,\n contentRef,\n openOnHover,\n openOnContext,\n mountNode,\n arrowRef,\n size,\n noArrow,\n appearance,\n trapFocus,\n }}\n >\n {state.~~children~~}\n </PopoverContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,sBAA/B;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AACJ,IAAA,OADI;AAEJ,IAAA,UAFI;AAGJ,IAAA,UAHI;AAIJ,IAAA,UAJI;AAKJ,IAAA,aALI;AAMJ,IAAA,WANI;AAOJ,IAAA,SAPI;AAQJ,IAAA,QARI;AASJ,IAAA,IATI;AAUJ,IAAA,OAVI;AAWJ,IAAA,UAXI;AAYJ,IAAA;AAZI,MAaF,KAbJ;AAeA,sBACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;AACtB,IAAA,KAAK,EAAE;AACL,MAAA,OADK;AAEL,MAAA,UAFK;AAGL,MAAA,UAHK;AAIL,MAAA,UAJK;AAKL,MAAA,WALK;AAML,MAAA,aANK;AAOL,MAAA,SAPK;AAQL,MAAA,QARK;AASL,MAAA,IATK;AAUL,MAAA,OAVK;AAWL,MAAA,UAXK;AAYL,MAAA;AAZK;AADe,GAAxB,EAgBG,KAAK,CAAC,cAhBT,EAiBG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,cAjBvB,CADF;AAqBD,CArCM","sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\n/*\n Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState) => {\n const {\n setOpen,\n toggleOpen,\n triggerRef,\n contentRef,\n openOnContext,\n openOnHover,\n mountNode,\n arrowRef,\n size,\n noArrow,\n appearance,\n trapFocus,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n setOpen,\n toggleOpen,\n triggerRef,\n contentRef,\n openOnHover,\n openOnContext,\n mountNode,\n arrowRef,\n size,\n noArrow,\n appearance,\n trapFocus,\n }}\n >\n {state.popoverTrigger}\n {state.open && state.popoverSurface}\n </PopoverContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Popover/usePopover.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { useControllableState, useEventCallback, useOnClickOutside, useOnScrollO
 import { useFluent } from '@fluentui/react-shared-contexts';
 import { usePopper, resolvePositioningShorthand, mergeArrowOffset, usePopperMouseTarget } from '@fluentui/react-positioning';
 import { elementContains } from '@fluentui/react-portal';
+import { useFocusFinders } from '@fluentui/react-tabster';
 import { arrowHeights } from '../PopoverSurface/index';
 /**
  * Create the state required to render Popover.
@@ -21,7 +22,34 @@ export const usePopover_unstable = props => {
     setContextTarget,
     ...props
   };
+  const children = React.Children.toArray(props.children);
+  if (process.env.NODE_ENV !== 'production') {
+    if (children.length === 0) {
+      // eslint-disable-next-line no-console
+      console.warn('Popover must contain at least one child');
+    }
+    if (children.length > 2) {
+      // eslint-disable-next-line no-console
+      console.warn('Popover must contain at most two children');
+    }
+  }
+  let popoverTrigger = undefined;
+  let popoverSurface = undefined;
+  if (children.length === 2) {
+    popoverTrigger = children[0];
+    popoverSurface = children[1];
+  } else if (children.length === 1) {
+    popoverSurface = children[0];
+  }
   const [open, setOpen] = useOpenState(initialState);
+  const toggleOpen = React.useCallback(e => {
+    setOpen(e, !open);
+  }, [setOpen, open]);
   const popperRefs = usePopoverRefs(initialState);
   const {
     targetDocument
@@ -41,10 +69,22 @@ export const usePopover_unstable = props => {
     disabled: !open || !initialState.openOnContext // only close on scroll for context
   });
+  const {
+    findFirstFocusable
+  } = useFocusFinders();
+  React.useEffect(() => {
+    if (open && popperRefs.contentRef.current) {
+      const firstFocusable = findFirstFocusable(popperRefs.contentRef.current);
+      firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+    }
+  }, [findFirstFocusable, open, popperRefs.contentRef]);
   return { ...initialState,
     ...popperRefs,
+    popoverTrigger,
+    popoverSurface,
     open,
     setOpen,
+    toggleOpen,
     setContextTarget,
     contextTarget
   };

package/lib/components/Popover/usePopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Popover/usePopover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SACE,oBADF,EAEE,gBAFF,EAGE,iBAHF,EAIE,kBAJF,QAKO,2BALP;AAMA,SAAS,SAAT,QAA0B,iCAA1B;AACA,SACE,SADF,EAEE,2BAFF,EAGE,gBAHF,EAIE,oBAJF,QAKO,6BALP;AAMA,SAAS,eAAT,QAAgC,wBAAhC;AACA,SAAS,YAAT,QAA6B,yBAA7B;AAGA;;;;;;;AAOG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAsC;AACvE,QAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,oBAAoB,EAA9D;AACA,QAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,QADa;AAEnB,IAAA,aAFmB;AAGnB,IAAA,gBAHmB;AAInB,OAAG;AAJgB,GAArB;AAOA,QAAM,CAAC,IAAD,EAAO,OAAP,IAAkB,YAAY,CAAC,YAAD,CAApC;AACA,QAAM,UAAU,GAAG,cAAc,CAAC,YAAD,CAAjC;AAEA,QAAM;AAAE,IAAA;AAAF,MAAqB,SAAS,EAApC;AACA,EAAA,iBAAiB,CAAC;AAChB,IAAA,QAAQ,EAAE,eADM;AAEhB,IAAA,OAAO,EAAE,cAFO;AAGhB,IAAA,QAAQ,EAAE,EAAE,IAAI,OAAO,CAAC,EAAD,EAAK,KAAL,CAHP;AAIhB,IAAA,IAAI,EAAE,CAAC,UAAU,CAAC,UAAZ,EAAwB,UAAU,CAAC,UAAnC,CAJU;AAKhB,IAAA,QAAQ,EAAE,CAAC;AALK,GAAD,CAAjB;AAOA,EAAA,kBAAkB,CAAC;AACjB,IAAA,QAAQ,EAAE,eADO;AAEjB,IAAA,OAAO,EAAE,cAFQ;AAGjB,IAAA,QAAQ,EAAE,EAAE,IAAI,OAAO,CAAC,EAAD,EAAK,KAAL,CAHN;AAIjB,IAAA,IAAI,EAAE,CAAC,UAAU,CAAC,UAAZ,EAAwB,UAAU,CAAC,UAAnC,CAJW;AAKjB,IAAA,QAAQ,EAAE,CAAC,IAAD,IAAS,CAAC,YAAY,CAAC,aALhB,CAK+B;;AAL/B,GAAD,CAAlB;AAQA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,UAFE;AAGL,IAAA,~~IAHK~~;AAIL,IAAA,~~OAJK~~;AAKL,IAAA,~~gBALK~~;AAML,IAAA;~~AANK~~,GAAP;~~AAQD~~,~~CApCM~~;~~AAsCP~~;;AAEG;;AACH,SAAS,YAAT,CACE,KADF,EAC6G;AAE3G,QAAM,YAAY,GAAiC,gBAAgB,CAAC,CAAC,CAAD,EAAI,IAAJ,KAAY;AAAA,QAAA,EAAA;;AAAC,WAAA,CAAA,EAAA,GAAA,KAAK,CAAC,YAAN,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAA,IAAA,CAAlB,KAAkB,EAAG,CAAH,EAAM,IAAN,CAAlB;AAA6B,GAA3C,CAAnE;AAEA,QAAM,CAAC,IAAD,EAAO,YAAP,IAAuB,oBAAoB,CAAC;AAChD,IAAA,KAAK,EAAE,KAAK,CAAC,IADmC;AAEhD,IAAA,YAAY,EAAE,KAAK,CAAC,WAF4B;AAGhD,IAAA,YAAY,EAAE;AAHkC,GAAD,CAAjD;AAKA,EAAA,KAAK,CAAC,IAAN,GAAa,IAAI,KAAK,SAAT,GAAqB,IAArB,GAA4B,KAAK,CAAC,IAA/C;AACA,QAAM,gBAAgB,GAAG,KAAK,CAAC,gBAA/B;AAEA,QAAM,OAAO,GAAG,KAAK,CAAC,WAAN,CACd,CAAC,CAAD,EAAuB,UAAvB,KAA8C;AAC5C,QAAI,UAAU,IAAI,CAAC,CAAC,IAAF,KAAW,aAA7B,EAA4C;AAC1C,MAAA,gBAAgB,CAAC,CAAD,CAAhB;AACD;;AAED,QAAI,CAAC,UAAL,EAAiB;AACf,MAAA,gBAAgB,CAAC,SAAD,CAAhB;AACD;;AAED,IAAA,YAAY,CAAC,QAAQ,IAAG;AACtB;AACA;AACA,UAAI,QAAQ,KAAK,UAAjB,EAA6B;AAC3B,QAAA,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,CAAH,EAAM;AAAE,UAAA,IAAI,EAAE;AAAR,SAAN,CAAZ;AACD;;AAED,aAAO,UAAP;AACD,KARW,CAAZ;AASD,GAnBa,EAoBd,CAAC,YAAD,EAAe,YAAf,EAA6B,gBAA7B,CApBc,CAAhB;AAuBA,SAAO,CAAC,IAAD,EAAO,OAAP,CAAP;AACD;AAED;;AAEG;;;AACH,SAAS,cAAT,CACE,KADF,EACuH;AAErH,QAAM,aAAa,GAAG;AACpB,IAAA,QAAQ,EAAE,OADU;AAEpB,IAAA,KAAK,EAAE,QAFa;AAGpB,IAAA,MAAM,EAAE,KAAK,CAAC,aAAN,GAAsB,KAAK,CAAC,aAA5B,GAA4C,SAHhC;AAIpB,OAAG,2BAA2B,CAAC,KAAK,CAAC,WAAP;AAJV,GAAtB,CAFqH,CASrH;;AACA,MAAI,aAAa,CAAC,WAAlB,EAA+B;AAC7B,IAAA,KAAK,CAAC,OAAN,GAAgB,IAAhB;AACD;;AAED,MAAI,CAAC,KAAK,CAAC,OAAX,EAAoB;AAClB,IAAA,aAAa,CAAC,MAAd,GAAuB,gBAAgB,CAAC,aAAa,CAAC,MAAf,EAAuB,YAAY,CAAC,KAAK,CAAC,IAAP,CAAnC,CAAvC;AACD;;AAED,QAAM;AAAE,IAAA,SAAS,EAAE,UAAb;AAAyB,IAAA,YAAY,EAAE,UAAvC;AAAmD,IAAA;AAAnD,MAAgE,SAAS,CAAC,aAAD,CAA/E;AAEA,SAAO;AACL,IAAA,UADK;AAEL,IAAA,UAFK;AAGL,IAAA;AAHK,GAAP;AAKD","sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePopper,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePopperMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\n\n/*\n Create the state required to render Popover.\n \n The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n \n @param props - props from this instance of Popover\n /\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePopperMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const [open, setOpen] = useOpenState(initialState);\n const popperRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [popperRefs.triggerRef, popperRefs.contentRef],\n disabled: !open,\n });\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [popperRefs.triggerRef, popperRefs.contentRef],\n disabled: !open \|\| !initialState.openOnContext, // only close on scroll for context\n });\n\n return {\n ...initialState,\n ...popperRefs,\n open,\n setOpen,\n setContextTarget,\n contextTarget,\n };\n};\n\n/\n Creates and manages the Popover open state\n /\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' \| 'onOpenChange'> & Pick<PopoverProps, 'open' \| 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(prevOpen => {\n // More than one event (mouse, focus, keyboard) can request the Popover to close\n // We assume the first event is the correct one\n if (prevOpen !== shouldOpen) {\n onOpenChange?.(e, { open: shouldOpen });\n }\n\n return shouldOpen;\n });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/\n Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' \| 'contextTarget'> & Pick<PopoverProps, 'positioning' \| 'openOnContext' \| 'noArrow'>,\n) {\n const popperOptions = {\n position: 'above' as const,\n align: 'center' as const,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (popperOptions.coverTarget) {\n state.noArrow = true;\n }\n\n if (!state.noArrow) {\n popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePopper(popperOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Popover/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePopper,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePopperMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\n\n/*\n Create the state required to render Popover.\n \n The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n \n @param props - props from this instance of Popover\n /\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePopperMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement \| undefined = undefined;\n let popoverSurface: React.ReactElement \| undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpen] = useOpenState(initialState);\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n e => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const popperRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [popperRefs.triggerRef, popperRefs.contentRef],\n disabled: !open,\n });\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [popperRefs.triggerRef, popperRefs.contentRef],\n disabled: !open \|\| !initialState.openOnContext, // only close on scroll for context\n });\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (open && popperRefs.contentRef.current) {\n const firstFocusable = findFirstFocusable(popperRefs.contentRef.current);\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, popperRefs.contentRef]);\n\n return {\n ...initialState,\n ...popperRefs,\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n };\n};\n\n/\n Creates and manages the Popover open state\n /\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' \| 'onOpenChange'> & Pick<PopoverProps, 'open' \| 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(prevOpen => {\n // More than one event (mouse, focus, keyboard) can request the Popover to close\n // We assume the first event is the correct one\n if (prevOpen !== shouldOpen) {\n onOpenChange?.(e, { open: shouldOpen });\n }\n\n return shouldOpen;\n });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/\n Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' \| 'contextTarget'> & Pick<PopoverProps, 'positioning' \| 'openOnContext' \| 'noArrow'>,\n) {\n const popperOptions = {\n position: 'above' as const,\n align: 'center' as const,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (popperOptions.coverTarget) {\n state.noArrow = true;\n }\n\n if (!state.noArrow) {\n popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePopper(popperOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"sourceRoot":"../src/"}

package/lib/components/PopoverSurface/PopoverSurface.types.d.ts CHANGED Viewed

@@ -13,7 +13,7 @@ export declare type PopoverSurfaceSlots = {
 /**
  * PopoverSurface State
  */
-export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {
+export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {
     /**
      * CSS class for the arrow element
      */

package/lib/components/PopoverSurface/PopoverSurface.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoverSurface.types.js","sourceRoot":"../src/","sources":["components/PopoverSurface/PopoverSurface.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverContextValue } from '../../popoverContext';\n\n/*\n PopoverSurface Props\n /\nexport type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;\n\n/\n Names of the slots in PopoverSurfaceProps\n /\nexport type PopoverSurfaceSlots = {\n root: Slot<'div'>;\n};\n\n/\n PopoverSurface State\n /\nexport type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> &\n Pick<PopoverContextValue, '~~open' \| '~~mountNode' \| 'noArrow' \| 'size' \| 'appearance' \| 'arrowRef'> & {\n /\n CSS class for the arrow element\n */\n arrowClassName?: string;\n };\n"]}
1	+ {"version":3,"file":"PopoverSurface.types.js","sourceRoot":"../src/","sources":["components/PopoverSurface/PopoverSurface.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverContextValue } from '../../popoverContext';\n\n/*\n PopoverSurface Props\n /\nexport type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;\n\n/\n Names of the slots in PopoverSurfaceProps\n /\nexport type PopoverSurfaceSlots = {\n root: Slot<'div'>;\n};\n\n/\n PopoverSurface State\n /\nexport type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> &\n Pick<PopoverContextValue, 'mountNode' \| 'noArrow' \| 'size' \| 'appearance' \| 'arrowRef'> & {\n /\n CSS class for the arrow element\n */\n arrowClassName?: string;\n };\n"]}

package/lib/components/PopoverSurface/renderPopoverSurface.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@ import type { PopoverSurfaceState } from './PopoverSurface.types';
 /**
  * Render the final JSX of PopoverSurface
  */
-export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element | null;
+export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element;

package/lib/components/PopoverSurface/renderPopoverSurface.js CHANGED Viewed

@@ -9,12 +9,7 @@ export const renderPopoverSurface_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state); // TODO should hidden Popovers be supported ?
-  if (!state.open) {
-    return null;
-  }
+  } = getSlots(state);
   return /*#__PURE__*/React.createElement(Portal, {
     mountNode: state.mountNode
   }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root

package/lib/components/PopoverSurface/renderPopoverSurface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/PopoverSurface/renderPopoverSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAsB,KAAtB,CAArC~~,CAD0E,CAG1E;;AACA,MAAI,CAAC,KAAK,CAAC,IAAX,EAAiB~~;~~AACf~~,~~WAAO,IAAP;AACD;;AAED,~~sBACE,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO;AAAC,IAAA,SAAS,EAAE,KAAK,CAAC;AAAlB,GAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,CAAC,KAAK,CAAC,OAAP,iBAAkB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADrB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF,CADF;AAQD,~~CAhBM~~","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/*\n Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState) => {\n const { slots, slotProps } = getSlots<PopoverSurfaceSlots>(state);\n\n ~~// TODO should hidden Popovers be supported ?\n if (!state.open) {\n~~ return ~~null;\n }\n\n return~~ (\n <Portal mountNode={state.mountNode}>\n <slots.root {...slotProps.root}>\n {!state.noArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {slotProps.root.children}\n </slots.root>\n </Portal>\n );\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/PopoverSurface/renderPopoverSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAsB,KAAtB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO;AAAC,IAAA,SAAS,EAAE,KAAK,CAAC;AAAlB,GAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,CAAC,KAAK,CAAC,OAAP,iBAAkB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADrB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/*\n Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState) => {\n const { slots, slotProps } = getSlots<PopoverSurfaceSlots>(state);\n\n return (\n <Portal mountNode={state.mountNode}>\n <slots.root {...slotProps.root}>\n {!state.noArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {slotProps.root.children}\n </slots.root>\n </Portal>\n );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/PopoverSurface/usePopoverSurface.js CHANGED Viewed

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
-import { useFocusFinders, useModalAttributes } from '@fluentui/react-tabster';
+import { useModalAttributes } from '@fluentui/react-tabster';
 import { usePopoverContext_unstable } from '../../popoverContext';
 /**
  * Create the state required to render PopoverSurface.
@@ -14,7 +13,6 @@ import { usePopoverContext_unstable } from '../../popoverContext';
 export const usePopoverSurface_unstable = (props, ref) => {
   const contentRef = usePopoverContext_unstable(context => context.contentRef);
-  const open = usePopoverContext_unstable(context => context.open);
   const openOnHover = usePopoverContext_unstable(context => context.openOnHover);
   const setOpen = usePopoverContext_unstable(context => context.setOpen);
   const mountNode = usePopoverContext_unstable(context => context.mountNode);
@@ -33,7 +31,6 @@ export const usePopoverSurface_unstable = (props, ref) => {
     noArrow,
     size,
     arrowRef,
-    open,
     mountNode,
     components: {
       root: 'div'
@@ -80,15 +77,6 @@ export const usePopoverSurface_unstable = (props, ref) => {
     onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
   };
-  const {
-    findFirstFocusable
-  } = useFocusFinders();
-  React.useEffect(() => {
-    if (state.open && contentRef.current) {
-      const firstFocusable = findFirstFocusable(contentRef.current);
-      firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
-    }
-  }, [contentRef, findFirstFocusable, state.open]);
   return state;
 };
 //# sourceMappingURL=usePopoverSurface.js.map

package/lib/components/PopoverSurface/usePopoverSurface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/PopoverSurface/usePopoverSurface.ts"],"names":[],"mappings":"~~AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;~~AACA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,SAAS,~~eAAT~~,~~EAA0B~~,~~kBAA1B,QAAoD,yBAApD~~;AACA,SAAS,0BAAT,QAA2C,sBAA3C;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM,UAAU,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,UAApB,CAA7C;AACA,QAAM,~~IAAI,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,IAApB,CAAvC;AACA,QAAM,~~WAAW,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,WAApB,CAA9C;AACA,QAAM,OAAO,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,OAApB,CAA1C;AACA,QAAM,SAAS,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,SAApB,CAA5C;AACA,QAAM,QAAQ,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,QAApB,CAA3C;AACA,QAAM,IAAI,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,IAApB,CAAvC;AACA,QAAM,OAAO,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,OAApB,CAA1C;AACA,QAAM,UAAU,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,UAApB,CAA7C;AACA,QAAM,SAAS,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,SAApB,CAA5C;AACA,QAAM;AAAE,IAAA;AAAF,MAAsB,kBAAkB,CAAC;AAAE,IAAA;AAAF,GAAD,CAA9C;AAEA,QAAM,KAAK,GAAwB;AACjC,IAAA,UADiC;AAEjC,IAAA,OAFiC;AAGjC,IAAA,IAHiC;AAIjC,IAAA,QAJiC;AAKjC,IAAA,~~IALiC~~;AAMjC,IAAA,~~SANiC;AAOjC,IAAA,~~UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,~~KAPqB~~;~~AAUjC~~,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,UAAN,CADe;AAEjC,MAAA,IAAI,EAAE,SAAS,GAAG,QAAH,GAAc,eAFI;AAGjC,oBAAc,SAAS,GAAG,IAAH,GAAU,SAHA;AAIjC,SAAG,eAJ8B;AAKjC,SAAG;AAL8B,KAAR;~~AAVM~~,GAAnC;~~AAmBA~~,QAAM;AACJ,IAAA,YAAY,EAAE,oBADV;AAEJ,IAAA,YAAY,EAAE,oBAFV;AAGJ,IAAA,SAAS,EAAE;AAHP,MAIF,KAAK,CAAC,IAJV;;AAKA,EAAA,KAAK,CAAC,IAAN,CAAW,YAAX,GAA2B,CAAD,IAAwC;AAChE,QAAI,WAAJ,EAAiB;AACf,MAAA,OAAO,CAAC,CAAD,EAAI,IAAJ,CAAP;AACD;;AAED,IAAA,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,CAApB;AACD,GAND;;AAQA,EAAA,KAAK,CAAC,IAAN,CAAW,YAAX,GAA2B,CAAD,IAAwC;AAChE,QAAI,WAAJ,EAAiB;AACf,MAAA,OAAO,CAAC,CAAD,EAAI,KAAJ,CAAP;AACD;;AAED,IAAA,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,CAApB;AACD,GAND;;AAQA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAwB,CAAD,IAA2C;WAAA,CAChE;AACA;;;AACA,QAAI,CAAC,CAAC,GAAF,KAAU,QAAV,KAAsB,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE,QAAF,CAAW,CAAC,CAAC,MAAb,CAAxC,CAAJ,EAAoF;AAClF,MAAA,OAAO,CAAC,CAAD,EAAI,KAAJ,CAAP;AACD;;AAED,IAAA,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAA,iBAAiB,CAAG,CAAH,CAAjB;AACD,GARD;;AAUA,QAAM;AAAE,IAAA;AAAF,MAAyB,eAAe,EAA9C;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,QAAI,KAAK,CAAC,IAAN,IAAc,UAAU,CAAC,OAA7B,EAAsC;AACpC,YAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,OAAZ,CAAzC;AACA,MAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,KAAhB,EAAA;AACD;AACF,GALD,EAKG,CAAC,UAAD,EAAa,kBAAb,EAAiC,KAAK,CAAC,IAAvC,CALH;AAMA,SAAO,KAAP;AACD,~~CA3EM~~","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { ~~useFocusFinders,~~ useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\n/*\n Create the state required to render PopoverSurface.\n \n The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n \n @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n props: PopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n const contentRef = usePopoverContext_unstable(context => context.contentRef);\n const ~~open = usePopoverContext_unstable(context => context.open);\n const~~ openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const mountNode = usePopoverContext_unstable(context => context.mountNode);\n const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n const size = usePopoverContext_unstable(context => context.size);\n const noArrow = usePopoverContext_unstable(context => context.noArrow);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const { modalAttributes } = useModalAttributes({ trapFocus });\n\n const state: PopoverSurfaceState = {\n appearance,\n noArrow,\n size,\n arrowRef,\n ~~open,\n~~ mountNode,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, contentRef),\n role: trapFocus ? 'dialog' : 'complementary',\n 'aria-modal': trapFocus ? true : undefined,\n ...modalAttributes,\n ...props,\n }),\n };\n\n const {\n onMouseEnter: onMouseEnterOriginal,\n onMouseLeave: onMouseLeaveOriginal,\n onKeyDown: onKeyDownOriginal,\n } = state.root;\n state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n\n onMouseEnterOriginal?.(e);\n };\n\n state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n\n onMouseLeaveOriginal?.(e);\n };\n\n state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n setOpen(e, false);\n }\n\n onKeyDownOriginal?.(e);\n };\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (state.open && contentRef.current) {\n const firstFocusable = findFirstFocusable(contentRef.current);\n firstFocusable?.focus();\n }\n }, [contentRef, findFirstFocusable, state.open]);\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/PopoverSurface/usePopoverSurface.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\n/*\n Create the state required to render PopoverSurface.\n \n The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n \n @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n props: PopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n const contentRef = usePopoverContext_unstable(context => context.contentRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const mountNode = usePopoverContext_unstable(context => context.mountNode);\n const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n const size = usePopoverContext_unstable(context => context.size);\n const noArrow = usePopoverContext_unstable(context => context.noArrow);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const { modalAttributes } = useModalAttributes({ trapFocus });\n\n const state: PopoverSurfaceState = {\n appearance,\n noArrow,\n size,\n arrowRef,\n mountNode,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, contentRef),\n role: trapFocus ? 'dialog' : 'complementary',\n 'aria-modal': trapFocus ? true : undefined,\n ...modalAttributes,\n ...props,\n }),\n };\n\n const {\n onMouseEnter: onMouseEnterOriginal,\n onMouseLeave: onMouseLeaveOriginal,\n onKeyDown: onKeyDownOriginal,\n } = state.root;\n state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n\n onMouseEnterOriginal?.(e);\n };\n\n state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n\n onMouseLeaveOriginal?.(e);\n };\n\n state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n setOpen(e, false);\n }\n\n onKeyDownOriginal?.(e);\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/PopoverTrigger/usePopoverTrigger.js CHANGED Viewed

@@ -19,7 +19,7 @@ export const usePopoverTrigger_unstable = props => {
   } = props;
   const child = /*#__PURE__*/React.isValidElement(children) ? getTriggerChild(children) : undefined;
   const setOpen = usePopoverContext_unstable(context => context.setOpen);
-  const open = usePopoverContext_unstable(context => context.open);
+  const toggleOpen = usePopoverContext_unstable(context => context.toggleOpen);
   const triggerRef = usePopoverContext_unstable(context => context.triggerRef);
   const openOnHover = usePopoverContext_unstable(context => context.openOnHover);
   const openOnContext = usePopoverContext_unstable(context => context.openOnContext);
@@ -37,7 +37,7 @@ export const usePopoverTrigger_unstable = props => {
   const onClick = e => {
     if (!openOnContext) {
-      setOpen(e, !open);
+      toggleOpen(e);
     }
   };

package/lib/components/PopoverTrigger/usePopoverTrigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/PopoverTrigger/usePopoverTrigger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SACE,2BADF,EAEE,eAFF,EAGE,6BAHF,EAIE,aAJF,EAKE,uBALF,EAME,gBANF,QAOO,2BAPP;AAQA,SAAS,kBAAT,QAAmC,yBAAnC;AACA,SAAS,0BAAT,QAA2C,sBAA3C;AAGA;;;;;;;AAOG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAoD;;;AAC5F,QAAM;AAAE,IAAA;AAAF,MAAe,KAArB;AACA,QAAM,KAAK,GAAG,aAAA,KAAK,CAAC,cAAN,CAAqB,QAArB,IAAiC,eAAe,CAAC,QAAD,CAAhD,GAA6D,SAA3E;AAEA,QAAM,OAAO,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,OAApB,CAA1C;AACA,QAAM,~~IAAI~~,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,~~IAApB~~,~~CAAvC~~;AACA,QAAM,UAAU,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,UAApB,CAA7C;AACA,QAAM,WAAW,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,WAApB,CAA9C;AACA,QAAM,aAAa,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,aAApB,CAAhD;AACA,QAAM,SAAS,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,SAApB,CAA5C;AACA,QAAM;AAAE,IAAA;AAAF,MAAwB,kBAAkB,EAAhD;;AAEA,QAAM,aAAa,GAAI,CAAD,IAAqC;AACzD,QAAI,aAAJ,EAAmB;AACjB,MAAA,CAAC,CAAC,cAAF;AACA,MAAA,OAAO,CAAC,CAAD,EAAI,IAAJ,CAAP;AACD;AACF,GALD;;AAOA,QAAM,OAAO,GAAI,CAAD,IAAqC;AACnD,QAAI,CAAC,aAAL,EAAoB;AAClB,MAAA,~~OAAO~~,CAAC,CAAD,~~EAAI,CAAC,IAAL,CAAP~~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","sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n shouldPreventDefaultOnKeyDown,\n useMergedRefs,\n useMergedEventCallbacks,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\n\n/*\n Create the state required to render PopoverTrigger.\n \n The returned state can be modified with hooks such as usePopoverTriggerStyles,\n * before being passed to renderPopoverTrigger_unstable.\n \n @param props - props from this instance of PopoverTrigger\n */\nexport const usePopoverTrigger_unstable = (props: PopoverTriggerProps): PopoverTriggerState => {\n const { children } = props;\n const child = React.isValidElement(children) ? getTriggerChild(children) : undefined;\n\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const ~~open~~ = usePopoverContext_unstable(context => context.~~open~~);\n const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const openOnContext = usePopoverContext_unstable(context => context.openOnContext);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const { triggerAttributes } = useModalAttributes();\n\n const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnContext) {\n e.preventDefault();\n setOpen(e, true);\n }\n };\n\n const onClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!openOnContext) {\n ~~setOpen~~(e~~, !open~~);\n }\n };\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (shouldPreventDefaultOnKeyDown(e) && (e.key === ' ' \|\| e.key === 'Enter')) {\n e.preventDefault();\n (e.target as HTMLElement)?.click();\n }\n\n if (e.key === 'Escape') {\n setOpen(e, false);\n }\n };\n\n const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n });\n\n const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n };\n\n return {\n children: applyTriggerPropsToChildren<PopoverTriggerChildProps>(props.children, {\n ...triggerAttributes,\n 'aria-haspopup': trapFocus ? 'dialog' : 'true',\n ...child?.props,\n onClick: useMergedEventCallbacks(child?.props?.onClick, onClick),\n onMouseEnter: useMergedEventCallbacks(child?.props?.onMouseEnter, onMouseEnter),\n onKeyDown: useMergedEventCallbacks(child?.props?.onKeyDown, onKeyDown),\n onMouseLeave: useMergedEventCallbacks(child?.props?.onMouseLeave, onMouseLeave),\n onContextMenu: useMergedEventCallbacks(child?.props?.onContextMenu, onContextMenu),\n ref: useMergedRefs(triggerRef, child?.ref),\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/PopoverTrigger/usePopoverTrigger.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n shouldPreventDefaultOnKeyDown,\n useMergedRefs,\n useMergedEventCallbacks,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\n\n/*\n Create the state required to render PopoverTrigger.\n \n The returned state can be modified with hooks such as usePopoverTriggerStyles,\n * before being passed to renderPopoverTrigger_unstable.\n \n @param props - props from this instance of PopoverTrigger\n */\nexport const usePopoverTrigger_unstable = (props: PopoverTriggerProps): PopoverTriggerState => {\n const { children } = props;\n const child = React.isValidElement(children) ? getTriggerChild(children) : undefined;\n\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const toggleOpen = usePopoverContext_unstable(context => context.toggleOpen);\n const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const openOnContext = usePopoverContext_unstable(context => context.openOnContext);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const { triggerAttributes } = useModalAttributes();\n\n const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnContext) {\n e.preventDefault();\n setOpen(e, true);\n }\n };\n\n const onClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!openOnContext) {\n toggleOpen(e);\n }\n };\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (shouldPreventDefaultOnKeyDown(e) && (e.key === ' ' \|\| e.key === 'Enter')) {\n e.preventDefault();\n (e.target as HTMLElement)?.click();\n }\n\n if (e.key === 'Escape') {\n setOpen(e, false);\n }\n };\n\n const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n });\n\n const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n };\n\n return {\n children: applyTriggerPropsToChildren<PopoverTriggerChildProps>(props.children, {\n ...triggerAttributes,\n 'aria-haspopup': trapFocus ? 'dialog' : 'true',\n ...child?.props,\n onClick: useMergedEventCallbacks(child?.props?.onClick, onClick),\n onMouseEnter: useMergedEventCallbacks(child?.props?.onMouseEnter, onMouseEnter),\n onKeyDown: useMergedEventCallbacks(child?.props?.onKeyDown, onKeyDown),\n onMouseLeave: useMergedEventCallbacks(child?.props?.onMouseLeave, onMouseLeave),\n onContextMenu: useMergedEventCallbacks(child?.props?.onContextMenu, onContextMenu),\n ref: useMergedRefs(triggerRef, child?.ref),\n }),\n };\n};\n"],"sourceRoot":"../src/"}

package/lib/popoverContext.d.ts CHANGED Viewed

@@ -4,5 +4,5 @@ export declare const PopoverContext: Context<PopoverContextValue>;
 /**
  * Context shared between Popover and its children components
  */
-export declare type PopoverContextValue = Pick<PopoverState, 'open' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus'>;
+export declare type PopoverContextValue = Pick<PopoverState, 'toggleOpen' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus'>;
 export declare const usePopoverContext_unstable: <T>(selector: ContextSelector<PopoverContextValue, T>) => T;

package/lib/popoverContext.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 export const PopoverContext = /*#__PURE__*/createContext({
-  open: false,
   setOpen: () => null,
+  toggleOpen: () => null,
   triggerRef: {
     current: null
   },

package/lib/popoverContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["popoverContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAIA,OAAO,MAAM,cAAc,gBAAiC,aAAa,CAAsB;AAC7F,EAAA,~~IAAI~~,EAAE,~~KADuF~~;AAE7F,EAAA,~~OAAO~~,EAAE,MAAM,~~IAF8E~~;AAG7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GAHiF;AAI7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GAJiF;AAK7F,EAAA,QAAQ,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GALmF;AAM7F,EAAA,aAAa,EAAE,KAN8E;AAO7F,EAAA,WAAW,EAAE,KAPgF;AAQ7F,EAAA,IAAI,EAAE,QARuF;AAS7F,EAAA,SAAS,EAAE;AATkF,CAAtB,CAAlE;AA+BP,OAAO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,kBAAkB,CAAC,cAAD,EAAiB,QAAjB,CADb","sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue>({\n ~~open~~: ~~false~~,\n ~~setOpen~~: () => null,\n triggerRef: { current: null },\n contentRef: { current: null },\n arrowRef: { current: null },\n openOnContext: false,\n openOnHover: false,\n size: 'medium',\n trapFocus: false,\n});\n\n/*\n Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n PopoverState,\n \| '~~open~~'\n \| 'setOpen'\n \| 'triggerRef'\n \| 'contentRef'\n \| 'openOnHover'\n \| 'openOnContext'\n \| 'mountNode'\n \| 'noArrow'\n \| 'arrowRef'\n \| 'size'\n \| 'appearance'\n \| 'trapFocus'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n useContextSelector(PopoverContext, selector);\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["popoverContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAIA,OAAO,MAAM,cAAc,gBAAiC,aAAa,CAAsB;AAC7F,EAAA,OAAO,EAAE,MAAM,IAD8E;AAE7F,EAAA,UAAU,EAAE,MAAM,IAF2E;AAG7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GAHiF;AAI7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GAJiF;AAK7F,EAAA,QAAQ,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GALmF;AAM7F,EAAA,aAAa,EAAE,KAN8E;AAO7F,EAAA,WAAW,EAAE,KAPgF;AAQ7F,EAAA,IAAI,EAAE,QARuF;AAS7F,EAAA,SAAS,EAAE;AATkF,CAAtB,CAAlE;AA+BP,OAAO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,kBAAkB,CAAC,cAAD,EAAiB,QAAjB,CADb","sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue>({\n setOpen: () => null,\n toggleOpen: () => null,\n triggerRef: { current: null },\n contentRef: { current: null },\n arrowRef: { current: null },\n openOnContext: false,\n openOnHover: false,\n size: 'medium',\n trapFocus: false,\n});\n\n/*\n Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n PopoverState,\n \| 'toggleOpen'\n \| 'setOpen'\n \| 'triggerRef'\n \| 'contentRef'\n \| 'openOnHover'\n \| 'openOnContext'\n \| 'mountNode'\n \| 'noArrow'\n \| 'arrowRef'\n \| 'size'\n \| 'appearance'\n \| 'trapFocus'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n useContextSelector(PopoverContext, selector);\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Popover/Popover.types.d.ts CHANGED Viewed

@@ -68,6 +68,10 @@ export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children
      * Callback to open/close the Popover
      */
     setOpen: (e: OpenPopoverEvents, open: boolean) => void;
+    /**
+     * Callback to toggle the open state of the Popover
+     */
+    toggleOpen: (e: OpenPopoverEvents) => void;
     /**
      * Ref of the PopoverTrigger
      */
@@ -89,6 +93,8 @@ export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children
      */
     setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
     size: NonNullable<PopoverProps['size']>;
+    popoverTrigger: React.ReactElement | undefined;
+    popoverSurface: React.ReactElement | undefined;
 };
 /**
  * Data attached to open/close events

package/lib-commonjs/components/Popover/renderPopover.js CHANGED Viewed

@@ -15,8 +15,8 @@ const popoverContext_1 = /*#__PURE__*/require("../../popoverContext");
 const renderPopover_unstable = state => {
   const {
-    open,
     setOpen,
+    toggleOpen,
     triggerRef,
     contentRef,
     openOnContext,
@@ -30,8 +30,8 @@ const renderPopover_unstable = state => {
   } = state;
   return React.createElement(popoverContext_1.PopoverContext.Provider, {
     value: {
-      open,
       setOpen,
+      toggleOpen,
       triggerRef,
       contentRef,
       openOnHover,
@@ -43,7 +43,7 @@ const renderPopover_unstable = state => {
       appearance,
       trapFocus
     }
-  }, state.children);
+  }, state.popoverTrigger, state.open && state.popoverSurface);
 };
 exports.renderPopover_unstable = renderPopover_unstable;

package/lib-commonjs/components/Popover/renderPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AACJ,IAAA,~~IADI~~;AAEJ,IAAA,~~OAFI~~;AAGJ,IAAA,UAHI;AAIJ,IAAA,UAJI;AAKJ,IAAA,aALI;AAMJ,IAAA,WANI;AAOJ,IAAA,SAPI;AAQJ,IAAA,QARI;AASJ,IAAA,IATI;AAUJ,IAAA,OAVI;AAWJ,IAAA,UAXI;AAYJ,IAAA;AAZI,MAaF,KAbJ;AAeA,SACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;AACtB,IAAA,KAAK,EAAE;AACL,MAAA,~~IADK~~;AAEL,MAAA,~~OAFK~~;AAGL,MAAA,UAHK;AAIL,MAAA,UAJK;AAKL,MAAA,WALK;AAML,MAAA,aANK;AAOL,MAAA,SAPK;AAQL,MAAA,QARK;AASL,MAAA,IATK;AAUL,MAAA,OAVK;AAWL,MAAA,UAXK;AAYL,MAAA;AAZK;AADe,GAAxB,EAgBG,KAAK,CAAC,~~QAhBT~~,CADF;~~AAoBD~~,~~CApCM~~;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\n/*\n Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState) => {\n const {\n ~~open~~,\n ~~setOpen~~,\n triggerRef,\n contentRef,\n openOnContext,\n openOnHover,\n mountNode,\n arrowRef,\n size,\n noArrow,\n appearance,\n trapFocus,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n ~~open~~,\n ~~setOpen~~,\n triggerRef,\n contentRef,\n openOnHover,\n openOnContext,\n mountNode,\n arrowRef,\n size,\n noArrow,\n appearance,\n trapFocus,\n }}\n >\n {state.~~children~~}\n </PopoverContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AACJ,IAAA,OADI;AAEJ,IAAA,UAFI;AAGJ,IAAA,UAHI;AAIJ,IAAA,UAJI;AAKJ,IAAA,aALI;AAMJ,IAAA,WANI;AAOJ,IAAA,SAPI;AAQJ,IAAA,QARI;AASJ,IAAA,IATI;AAUJ,IAAA,OAVI;AAWJ,IAAA,UAXI;AAYJ,IAAA;AAZI,MAaF,KAbJ;AAeA,SACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;AACtB,IAAA,KAAK,EAAE;AACL,MAAA,OADK;AAEL,MAAA,UAFK;AAGL,MAAA,UAHK;AAIL,MAAA,UAJK;AAKL,MAAA,WALK;AAML,MAAA,aANK;AAOL,MAAA,SAPK;AAQL,MAAA,QARK;AASL,MAAA,IATK;AAUL,MAAA,OAVK;AAWL,MAAA,UAXK;AAYL,MAAA;AAZK;AADe,GAAxB,EAgBG,KAAK,CAAC,cAhBT,EAiBG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,cAjBvB,CADF;AAqBD,CArCM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\n/*\n Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState) => {\n const {\n setOpen,\n toggleOpen,\n triggerRef,\n contentRef,\n openOnContext,\n openOnHover,\n mountNode,\n arrowRef,\n size,\n noArrow,\n appearance,\n trapFocus,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n setOpen,\n toggleOpen,\n triggerRef,\n contentRef,\n openOnHover,\n openOnContext,\n mountNode,\n arrowRef,\n size,\n noArrow,\n appearance,\n trapFocus,\n }}\n >\n {state.popoverTrigger}\n {state.open && state.popoverSurface}\n </PopoverContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Popover/usePopover.js CHANGED Viewed

@@ -15,6 +15,8 @@ const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
 const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 const index_1 = /*#__PURE__*/require("../PopoverSurface/index");
 /**
  * Create the state required to render Popover.
@@ -34,7 +36,34 @@ const usePopover_unstable = props => {
     setContextTarget,
     ...props
   };
+  const children = React.Children.toArray(props.children);
+  if (process.env.NODE_ENV !== 'production') {
+    if (children.length === 0) {
+      // eslint-disable-next-line no-console
+      console.warn('Popover must contain at least one child');
+    }
+    if (children.length > 2) {
+      // eslint-disable-next-line no-console
+      console.warn('Popover must contain at most two children');
+    }
+  }
+  let popoverTrigger = undefined;
+  let popoverSurface = undefined;
+  if (children.length === 2) {
+    popoverTrigger = children[0];
+    popoverSurface = children[1];
+  } else if (children.length === 1) {
+    popoverSurface = children[0];
+  }
   const [open, setOpen] = useOpenState(initialState);
+  const toggleOpen = React.useCallback(e => {
+    setOpen(e, !open);
+  }, [setOpen, open]);
   const popperRefs = usePopoverRefs(initialState);
   const {
     targetDocument
@@ -54,10 +83,22 @@ const usePopover_unstable = props => {
     disabled: !open || !initialState.openOnContext // only close on scroll for context
   });
+  const {
+    findFirstFocusable
+  } = react_tabster_1.useFocusFinders();
+  React.useEffect(() => {
+    if (open && popperRefs.contentRef.current) {
+      const firstFocusable = findFirstFocusable(popperRefs.contentRef.current);
+      firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+    }
+  }, [findFirstFocusable, open, popperRefs.contentRef]);
   return { ...initialState,
     ...popperRefs,
+    popoverTrigger,
+    popoverSurface,
     open,
     setOpen,
+    toggleOpen,
     setContextTarget,
     contextTarget
   };

package/lib-commonjs/components/Popover/usePopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Popover/usePopover.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAMA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAMA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAGA;;;;;;;AAOG;;;AACI,MAAM,mBAAmB,GAAI,KAAD,IAAsC;AACvE,QAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,mBAAA,CAAA,oBAAA,EAA1C;AACA,QAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,QADa;AAEnB,IAAA,aAFmB;AAGnB,IAAA,gBAHmB;AAInB,OAAG;AAJgB,GAArB;AAOA,QAAM,CAAC,IAAD,EAAO,OAAP,IAAkB,YAAY,CAAC,YAAD,CAApC;AACA,QAAM,UAAU,GAAG,cAAc,CAAC,YAAD,CAAjC;AAEA,QAAM;AAAE,IAAA;AAAF,MAAqB,uBAAA,CAAA,SAAA,EAA3B;AACA,EAAA,iBAAA,CAAA,iBAAA,CAAkB;AAChB,IAAA,QAAQ,EAAE,cAAA,CAAA,eADM;AAEhB,IAAA,OAAO,EAAE,cAFO;AAGhB,IAAA,QAAQ,EAAE,EAAE,IAAI,OAAO,CAAC,EAAD,EAAK,KAAL,CAHP;AAIhB,IAAA,IAAI,EAAE,CAAC,UAAU,CAAC,UAAZ,EAAwB,UAAU,CAAC,UAAnC,CAJU;AAKhB,IAAA,QAAQ,EAAE,CAAC;AALK,GAAlB;AAOA,EAAA,iBAAA,CAAA,kBAAA,CAAmB;AACjB,IAAA,QAAQ,EAAE,cAAA,CAAA,eADO;AAEjB,IAAA,OAAO,EAAE,cAFQ;AAGjB,IAAA,QAAQ,EAAE,EAAE,IAAI,OAAO,CAAC,EAAD,EAAK,KAAL,CAHN;AAIjB,IAAA,IAAI,EAAE,CAAC,UAAU,CAAC,UAAZ,EAAwB,UAAU,CAAC,UAAnC,CAJW;AAKjB,IAAA,QAAQ,EAAE,CAAC,IAAD,IAAS,CAAC,YAAY,CAAC,aALhB,CAK+B;;AAL/B,GAAnB;AAQA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,UAFE;AAGL,IAAA,~~IAHK~~;AAIL,IAAA,~~OAJK~~;AAKL,IAAA,~~gBALK~~;AAML,IAAA;~~AANK~~,GAAP;~~AAQD~~,~~CApCM~~;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB;~~AAsCb~~;;AAEG;;AACH,SAAS,YAAT,CACE,KADF,EAC6G;AAE3G,QAAM,YAAY,GAAiC,iBAAA,CAAA,gBAAA,CAAiB,CAAC,CAAD,EAAI,IAAJ,KAAY;AAAA,QAAA,EAAA;;AAAC,WAAA,CAAA,EAAA,GAAA,KAAK,CAAC,YAAN,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAA,IAAA,CAAlB,KAAkB,EAAG,CAAH,EAAM,IAAN,CAAlB;AAA6B,GAA3D,CAAnD;AAEA,QAAM,CAAC,IAAD,EAAO,YAAP,IAAuB,iBAAA,CAAA,oBAAA,CAAqB;AAChD,IAAA,KAAK,EAAE,KAAK,CAAC,IADmC;AAEhD,IAAA,YAAY,EAAE,KAAK,CAAC,WAF4B;AAGhD,IAAA,YAAY,EAAE;AAHkC,GAArB,CAA7B;AAKA,EAAA,KAAK,CAAC,IAAN,GAAa,IAAI,KAAK,SAAT,GAAqB,IAArB,GAA4B,KAAK,CAAC,IAA/C;AACA,QAAM,gBAAgB,GAAG,KAAK,CAAC,gBAA/B;AAEA,QAAM,OAAO,GAAG,KAAK,CAAC,WAAN,CACd,CAAC,CAAD,EAAuB,UAAvB,KAA8C;AAC5C,QAAI,UAAU,IAAI,CAAC,CAAC,IAAF,KAAW,aAA7B,EAA4C;AAC1C,MAAA,gBAAgB,CAAC,CAAD,CAAhB;AACD;;AAED,QAAI,CAAC,UAAL,EAAiB;AACf,MAAA,gBAAgB,CAAC,SAAD,CAAhB;AACD;;AAED,IAAA,YAAY,CAAC,QAAQ,IAAG;AACtB;AACA;AACA,UAAI,QAAQ,KAAK,UAAjB,EAA6B;AAC3B,QAAA,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,CAAH,EAAM;AAAE,UAAA,IAAI,EAAE;AAAR,SAAN,CAAZ;AACD;;AAED,aAAO,UAAP;AACD,KARW,CAAZ;AASD,GAnBa,EAoBd,CAAC,YAAD,EAAe,YAAf,EAA6B,gBAA7B,CApBc,CAAhB;AAuBA,SAAO,CAAC,IAAD,EAAO,OAAP,CAAP;AACD;AAED;;AAEG;;;AACH,SAAS,cAAT,CACE,KADF,EACuH;AAErH,QAAM,aAAa,GAAG;AACpB,IAAA,QAAQ,EAAE,OADU;AAEpB,IAAA,KAAK,EAAE,QAFa;AAGpB,IAAA,MAAM,EAAE,KAAK,CAAC,aAAN,GAAsB,KAAK,CAAC,aAA5B,GAA4C,SAHhC;AAIpB,OAAG,mBAAA,CAAA,2BAAA,CAA4B,KAAK,CAAC,WAAlC;AAJiB,GAAtB,CAFqH,CASrH;;AACA,MAAI,aAAa,CAAC,WAAlB,EAA+B;AAC7B,IAAA,KAAK,CAAC,OAAN,GAAgB,IAAhB;AACD;;AAED,MAAI,CAAC,KAAK,CAAC,OAAX,EAAoB;AAClB,IAAA,aAAa,CAAC,MAAd,GAAuB,mBAAA,CAAA,gBAAA,CAAiB,aAAa,CAAC,MAA/B,EAAuC,OAAA,CAAA,YAAA,CAAa,KAAK,CAAC,IAAnB,CAAvC,CAAvB;AACD;;AAED,QAAM;AAAE,IAAA,SAAS,EAAE,UAAb;AAAyB,IAAA,YAAY,EAAE,UAAvC;AAAmD,IAAA;AAAnD,MAAgE,mBAAA,CAAA,SAAA,CAAU,aAAV,CAAtE;AAEA,SAAO;AACL,IAAA,UADK;AAEL,IAAA,UAFK;AAGL,IAAA;AAHK,GAAP;AAKD","sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePopper,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePopperMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\n\n/*\n Create the state required to render Popover.\n \n The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n \n @param props - props from this instance of Popover\n /\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePopperMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const [open, setOpen] = useOpenState(initialState);\n const popperRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [popperRefs.triggerRef, popperRefs.contentRef],\n disabled: !open,\n });\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [popperRefs.triggerRef, popperRefs.contentRef],\n disabled: !open \|\| !initialState.openOnContext, // only close on scroll for context\n });\n\n return {\n ...initialState,\n ...popperRefs,\n open,\n setOpen,\n setContextTarget,\n contextTarget,\n };\n};\n\n/\n Creates and manages the Popover open state\n /\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' \| 'onOpenChange'> & Pick<PopoverProps, 'open' \| 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(prevOpen => {\n // More than one event (mouse, focus, keyboard) can request the Popover to close\n // We assume the first event is the correct one\n if (prevOpen !== shouldOpen) {\n onOpenChange?.(e, { open: shouldOpen });\n }\n\n return shouldOpen;\n });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/\n Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' \| 'contextTarget'> & Pick<PopoverProps, 'positioning' \| 'openOnContext' \| 'noArrow'>,\n) {\n const popperOptions = {\n position: 'above' as const,\n align: 'center' as const,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (popperOptions.coverTarget) {\n state.noArrow = true;\n }\n\n if (!state.noArrow) {\n popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePopper(popperOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Popover/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePopper,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePopperMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\n\n/*\n Create the state required to render Popover.\n \n The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n \n @param props - props from this instance of Popover\n /\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePopperMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement \| undefined = undefined;\n let popoverSurface: React.ReactElement \| undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpen] = useOpenState(initialState);\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n e => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const popperRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [popperRefs.triggerRef, popperRefs.contentRef],\n disabled: !open,\n });\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [popperRefs.triggerRef, popperRefs.contentRef],\n disabled: !open \|\| !initialState.openOnContext, // only close on scroll for context\n });\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (open && popperRefs.contentRef.current) {\n const firstFocusable = findFirstFocusable(popperRefs.contentRef.current);\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, popperRefs.contentRef]);\n\n return {\n ...initialState,\n ...popperRefs,\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n };\n};\n\n/\n Creates and manages the Popover open state\n /\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' \| 'onOpenChange'> & Pick<PopoverProps, 'open' \| 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(prevOpen => {\n // More than one event (mouse, focus, keyboard) can request the Popover to close\n // We assume the first event is the correct one\n if (prevOpen !== shouldOpen) {\n onOpenChange?.(e, { open: shouldOpen });\n }\n\n return shouldOpen;\n });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/\n Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' \| 'contextTarget'> & Pick<PopoverProps, 'positioning' \| 'openOnContext' \| 'noArrow'>,\n) {\n const popperOptions = {\n position: 'above' as const,\n align: 'center' as const,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (popperOptions.coverTarget) {\n state.noArrow = true;\n }\n\n if (!state.noArrow) {\n popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePopper(popperOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.d.ts CHANGED Viewed

@@ -13,7 +13,7 @@ export declare type PopoverSurfaceSlots = {
 /**
  * PopoverSurface State
  */
-export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {
+export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {
     /**
      * CSS class for the arrow element
      */

package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@ import type { PopoverSurfaceState } from './PopoverSurface.types';
 /**
  * Render the final JSX of PopoverSurface
  */
-export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element | null;
+export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element;

package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js CHANGED Viewed

@@ -19,12 +19,7 @@ const renderPopoverSurface_unstable = state => {
   const {
     slots,
     slotProps
-  } = react_utilities_1.getSlots(state); // TODO should hidden Popovers be supported ?
-  if (!state.open) {
-    return null;
-  }
+  } = react_utilities_1.getSlots(state);
   return React.createElement(react_portal_1.Portal, {
     mountNode: state.mountNode
   }, React.createElement(slots.root, { ...slotProps.root

package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/PopoverSurface/renderPopoverSurface.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,CAA7B~~,CAD0E,CAG1E;;AACA,MAAI,CAAC,KAAK,CAAC,IAAX,EAAiB~~;~~AACf~~,~~WAAO,IAAP;AACD;;AAED,~~SACE,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO;AAAC,IAAA,SAAS,EAAE,KAAK,CAAC;AAAlB,GAAP,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,CAAC,KAAK,CAAC,OAAP,IAAkB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADrB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF,CADF;AAQD,~~CAhBM~~;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/*\n Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState) => {\n const { slots, slotProps } = getSlots<PopoverSurfaceSlots>(state);\n\n ~~// TODO should hidden Popovers be supported ?\n if (!state.open) {\n~~ return ~~null;\n }\n\n return~~ (\n <Portal mountNode={state.mountNode}>\n <slots.root {...slotProps.root}>\n {!state.noArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {slotProps.root.children}\n </slots.root>\n </Portal>\n );\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/PopoverSurface/renderPopoverSurface.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO;AAAC,IAAA,SAAS,EAAE,KAAK,CAAC;AAAlB,GAAP,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,CAAC,KAAK,CAAC,OAAP,IAAkB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADrB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/*\n Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState) => {\n const { slots, slotProps } = getSlots<PopoverSurfaceSlots>(state);\n\n return (\n <Portal mountNode={state.mountNode}>\n <slots.root {...slotProps.root}>\n {!state.noArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {slotProps.root.children}\n </slots.root>\n </Portal>\n );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js CHANGED Viewed

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.usePopoverSurface_unstable = void 0;
-const React = /*#__PURE__*/require("react");
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
@@ -25,7 +23,6 @@ const popoverContext_1 = /*#__PURE__*/require("../../popoverContext");
 const usePopoverSurface_unstable = (props, ref) => {
   const contentRef = popoverContext_1.usePopoverContext_unstable(context => context.contentRef);
-  const open = popoverContext_1.usePopoverContext_unstable(context => context.open);
   const openOnHover = popoverContext_1.usePopoverContext_unstable(context => context.openOnHover);
   const setOpen = popoverContext_1.usePopoverContext_unstable(context => context.setOpen);
   const mountNode = popoverContext_1.usePopoverContext_unstable(context => context.mountNode);
@@ -44,7 +41,6 @@ const usePopoverSurface_unstable = (props, ref) => {
     noArrow,
     size,
     arrowRef,
-    open,
     mountNode,
     components: {
       root: 'div'
@@ -91,15 +87,6 @@ const usePopoverSurface_unstable = (props, ref) => {
     onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
   };
-  const {
-    findFirstFocusable
-  } = react_tabster_1.useFocusFinders();
-  React.useEffect(() => {
-    if (state.open && contentRef.current) {
-      const firstFocusable = findFirstFocusable(contentRef.current);
-      firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
-    }
-  }, [contentRef, findFirstFocusable, state.open]);
   return state;
 };

package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/PopoverSurface/usePopoverSurface.ts"],"names":[],"mappings":";;;;;;;~~AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;~~AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM,UAAU,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,UAA9C,CAAnB;AACA,QAAM,~~IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,IAA9C,CAAb;AACA,QAAM,~~WAAW,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,WAA9C,CAApB;AACA,QAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,OAA9C,CAAhB;AACA,QAAM,SAAS,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,SAA9C,CAAlB;AACA,QAAM,QAAQ,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,QAA9C,CAAjB;AACA,QAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,IAA9C,CAAb;AACA,QAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,OAA9C,CAAhB;AACA,QAAM,UAAU,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,UAA9C,CAAnB;AACA,QAAM,SAAS,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,SAA9C,CAAlB;AACA,QAAM;AAAE,IAAA;AAAF,MAAsB,eAAA,CAAA,kBAAA,CAAmB;AAAE,IAAA;AAAF,GAAnB,CAA5B;AAEA,QAAM,KAAK,GAAwB;AACjC,IAAA,UADiC;AAEjC,IAAA,OAFiC;AAGjC,IAAA,IAHiC;AAIjC,IAAA,QAJiC;AAKjC,IAAA,~~IALiC~~;AAMjC,IAAA,~~SANiC;AAOjC,IAAA,~~UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,~~KAPqB~~;~~AAUjC~~,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,UAAnB,CAD4B;AAEjC,MAAA,IAAI,EAAE,SAAS,GAAG,QAAH,GAAc,eAFI;AAGjC,oBAAc,SAAS,GAAG,IAAH,GAAU,SAHA;AAIjC,SAAG,eAJ8B;AAKjC,SAAG;AAL8B,KAA7B;~~AAV2B~~,GAAnC;~~AAmBA~~,QAAM;AACJ,IAAA,YAAY,EAAE,oBADV;AAEJ,IAAA,YAAY,EAAE,oBAFV;AAGJ,IAAA,SAAS,EAAE;AAHP,MAIF,KAAK,CAAC,IAJV;;AAKA,EAAA,KAAK,CAAC,IAAN,CAAW,YAAX,GAA2B,CAAD,IAAwC;AAChE,QAAI,WAAJ,EAAiB;AACf,MAAA,OAAO,CAAC,CAAD,EAAI,IAAJ,CAAP;AACD;;AAED,IAAA,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,CAApB;AACD,GAND;;AAQA,EAAA,KAAK,CAAC,IAAN,CAAW,YAAX,GAA2B,CAAD,IAAwC;AAChE,QAAI,WAAJ,EAAiB;AACf,MAAA,OAAO,CAAC,CAAD,EAAI,KAAJ,CAAP;AACD;;AAED,IAAA,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,CAApB;AACD,GAND;;AAQA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAwB,CAAD,IAA2C;WAAA,CAChE;AACA;;;AACA,QAAI,CAAC,CAAC,GAAF,KAAU,QAAV,KAAsB,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE,QAAF,CAAW,CAAC,CAAC,MAAb,CAAxC,CAAJ,EAAoF;AAClF,MAAA,OAAO,CAAC,CAAD,EAAI,KAAJ,CAAP;AACD;;AAED,IAAA,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAA,iBAAiB,CAAG,CAAH,CAAjB;AACD,GARD;;AAUA,QAAM;AAAE,IAAA;AAAF,MAAyB,eAAA,CAAA,eAAA,EAA/B;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,QAAI,KAAK,CAAC,IAAN,IAAc,UAAU,CAAC,OAA7B,EAAsC;AACpC,YAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,OAAZ,CAAzC;AACA,MAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,KAAhB,EAAA;AACD;AACF,GALD,EAKG,CAAC,UAAD,EAAa,kBAAb,EAAiC,KAAK,CAAC,IAAvC,CALH;AAMA,SAAO,KAAP;AACD,~~CA3EM~~;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { ~~useFocusFinders,~~ useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\n/*\n Create the state required to render PopoverSurface.\n \n The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n \n @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n props: PopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n const contentRef = usePopoverContext_unstable(context => context.contentRef);\n const ~~open = usePopoverContext_unstable(context => context.open);\n const~~ openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const mountNode = usePopoverContext_unstable(context => context.mountNode);\n const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n const size = usePopoverContext_unstable(context => context.size);\n const noArrow = usePopoverContext_unstable(context => context.noArrow);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const { modalAttributes } = useModalAttributes({ trapFocus });\n\n const state: PopoverSurfaceState = {\n appearance,\n noArrow,\n size,\n arrowRef,\n ~~open,\n~~ mountNode,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, contentRef),\n role: trapFocus ? 'dialog' : 'complementary',\n 'aria-modal': trapFocus ? true : undefined,\n ...modalAttributes,\n ...props,\n }),\n };\n\n const {\n onMouseEnter: onMouseEnterOriginal,\n onMouseLeave: onMouseLeaveOriginal,\n onKeyDown: onKeyDownOriginal,\n } = state.root;\n state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n\n onMouseEnterOriginal?.(e);\n };\n\n state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n\n onMouseLeaveOriginal?.(e);\n };\n\n state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n setOpen(e, false);\n }\n\n onKeyDownOriginal?.(e);\n };\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (state.open && contentRef.current) {\n const firstFocusable = findFirstFocusable(contentRef.current);\n firstFocusable?.focus();\n }\n }, [contentRef, findFirstFocusable, state.open]);\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/PopoverSurface/usePopoverSurface.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\n/*\n Create the state required to render PopoverSurface.\n \n The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n \n @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n props: PopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n const contentRef = usePopoverContext_unstable(context => context.contentRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const mountNode = usePopoverContext_unstable(context => context.mountNode);\n const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n const size = usePopoverContext_unstable(context => context.size);\n const noArrow = usePopoverContext_unstable(context => context.noArrow);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const { modalAttributes } = useModalAttributes({ trapFocus });\n\n const state: PopoverSurfaceState = {\n appearance,\n noArrow,\n size,\n arrowRef,\n mountNode,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, contentRef),\n role: trapFocus ? 'dialog' : 'complementary',\n 'aria-modal': trapFocus ? true : undefined,\n ...modalAttributes,\n ...props,\n }),\n };\n\n const {\n onMouseEnter: onMouseEnterOriginal,\n onMouseLeave: onMouseLeaveOriginal,\n onKeyDown: onKeyDownOriginal,\n } = state.root;\n state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n\n onMouseEnterOriginal?.(e);\n };\n\n state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n\n onMouseLeaveOriginal?.(e);\n };\n\n state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n setOpen(e, false);\n }\n\n onKeyDownOriginal?.(e);\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js CHANGED Viewed

@@ -30,7 +30,7 @@ const usePopoverTrigger_unstable = props => {
   } = props;
   const child = React.isValidElement(children) ? react_utilities_1.getTriggerChild(children) : undefined;
   const setOpen = popoverContext_1.usePopoverContext_unstable(context => context.setOpen);
-  const open = popoverContext_1.usePopoverContext_unstable(context => context.open);
+  const toggleOpen = popoverContext_1.usePopoverContext_unstable(context => context.toggleOpen);
   const triggerRef = popoverContext_1.usePopoverContext_unstable(context => context.triggerRef);
   const openOnHover = popoverContext_1.usePopoverContext_unstable(context => context.openOnHover);
   const openOnContext = popoverContext_1.usePopoverContext_unstable(context => context.openOnContext);
@@ -48,7 +48,7 @@ const usePopoverTrigger_unstable = props => {
   const onClick = e => {
     if (!openOnContext) {
-      setOpen(e, !open);
+      toggleOpen(e);
     }
   };

package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/PopoverTrigger/usePopoverTrigger.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAQA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAGA;;;;;;;AAOG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAoD;;;AAC5F,QAAM;AAAE,IAAA;AAAF,MAAe,KAArB;AACA,QAAM,KAAK,GAAG,KAAK,CAAC,cAAN,CAAqB,QAArB,IAAiC,iBAAA,CAAA,eAAA,CAAgB,QAAhB,CAAjC,GAA6D,SAA3E;AAEA,QAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,OAA9C,CAAhB;AACA,QAAM,~~IAAI~~,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,~~IAA9C~~,~~CAAb~~;AACA,QAAM,UAAU,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,UAA9C,CAAnB;AACA,QAAM,WAAW,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,WAA9C,CAApB;AACA,QAAM,aAAa,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,aAA9C,CAAtB;AACA,QAAM,SAAS,GAAG,gBAAA,CAAA,0BAAA,CAA2B,OAAO,IAAI,OAAO,CAAC,SAA9C,CAAlB;AACA,QAAM;AAAE,IAAA;AAAF,MAAwB,eAAA,CAAA,kBAAA,EAA9B;;AAEA,QAAM,aAAa,GAAI,CAAD,IAAqC;AACzD,QAAI,aAAJ,EAAmB;AACjB,MAAA,CAAC,CAAC,cAAF;AACA,MAAA,OAAO,CAAC,CAAD,EAAI,IAAJ,CAAP;AACD;AACF,GALD;;AAOA,QAAM,OAAO,GAAI,CAAD,IAAqC;AACnD,QAAI,CAAC,aAAL,EAAoB;AAClB,MAAA,~~OAAO~~,CAAC,CAAD,~~EAAI,CAAC,IAAL,CAAP~~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","sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n shouldPreventDefaultOnKeyDown,\n useMergedRefs,\n useMergedEventCallbacks,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\n\n/*\n Create the state required to render PopoverTrigger.\n \n The returned state can be modified with hooks such as usePopoverTriggerStyles,\n * before being passed to renderPopoverTrigger_unstable.\n \n @param props - props from this instance of PopoverTrigger\n */\nexport const usePopoverTrigger_unstable = (props: PopoverTriggerProps): PopoverTriggerState => {\n const { children } = props;\n const child = React.isValidElement(children) ? getTriggerChild(children) : undefined;\n\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const ~~open~~ = usePopoverContext_unstable(context => context.~~open~~);\n const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const openOnContext = usePopoverContext_unstable(context => context.openOnContext);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const { triggerAttributes } = useModalAttributes();\n\n const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnContext) {\n e.preventDefault();\n setOpen(e, true);\n }\n };\n\n const onClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!openOnContext) {\n ~~setOpen~~(e~~, !open~~);\n }\n };\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (shouldPreventDefaultOnKeyDown(e) && (e.key === ' ' \|\| e.key === 'Enter')) {\n e.preventDefault();\n (e.target as HTMLElement)?.click();\n }\n\n if (e.key === 'Escape') {\n setOpen(e, false);\n }\n };\n\n const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n });\n\n const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n };\n\n return {\n children: applyTriggerPropsToChildren<PopoverTriggerChildProps>(props.children, {\n ...triggerAttributes,\n 'aria-haspopup': trapFocus ? 'dialog' : 'true',\n ...child?.props,\n onClick: useMergedEventCallbacks(child?.props?.onClick, onClick),\n onMouseEnter: useMergedEventCallbacks(child?.props?.onMouseEnter, onMouseEnter),\n onKeyDown: useMergedEventCallbacks(child?.props?.onKeyDown, onKeyDown),\n onMouseLeave: useMergedEventCallbacks(child?.props?.onMouseLeave, onMouseLeave),\n onContextMenu: useMergedEventCallbacks(child?.props?.onContextMenu, onContextMenu),\n ref: useMergedRefs(triggerRef, child?.ref),\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/PopoverTrigger/usePopoverTrigger.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getTriggerChild,\n shouldPreventDefaultOnKeyDown,\n useMergedRefs,\n useMergedEventCallbacks,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverTriggerChildProps, PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\n\n/*\n Create the state required to render PopoverTrigger.\n \n The returned state can be modified with hooks such as usePopoverTriggerStyles,\n * before being passed to renderPopoverTrigger_unstable.\n \n @param props - props from this instance of PopoverTrigger\n */\nexport const usePopoverTrigger_unstable = (props: PopoverTriggerProps): PopoverTriggerState => {\n const { children } = props;\n const child = React.isValidElement(children) ? getTriggerChild(children) : undefined;\n\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const toggleOpen = usePopoverContext_unstable(context => context.toggleOpen);\n const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const openOnContext = usePopoverContext_unstable(context => context.openOnContext);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const { triggerAttributes } = useModalAttributes();\n\n const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnContext) {\n e.preventDefault();\n setOpen(e, true);\n }\n };\n\n const onClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!openOnContext) {\n toggleOpen(e);\n }\n };\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (shouldPreventDefaultOnKeyDown(e) && (e.key === ' ' \|\| e.key === 'Enter')) {\n e.preventDefault();\n (e.target as HTMLElement)?.click();\n }\n\n if (e.key === 'Escape') {\n setOpen(e, false);\n }\n };\n\n const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n });\n\n const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n };\n\n return {\n children: applyTriggerPropsToChildren<PopoverTriggerChildProps>(props.children, {\n ...triggerAttributes,\n 'aria-haspopup': trapFocus ? 'dialog' : 'true',\n ...child?.props,\n onClick: useMergedEventCallbacks(child?.props?.onClick, onClick),\n onMouseEnter: useMergedEventCallbacks(child?.props?.onMouseEnter, onMouseEnter),\n onKeyDown: useMergedEventCallbacks(child?.props?.onKeyDown, onKeyDown),\n onMouseLeave: useMergedEventCallbacks(child?.props?.onMouseLeave, onMouseLeave),\n onContextMenu: useMergedEventCallbacks(child?.props?.onContextMenu, onContextMenu),\n ref: useMergedRefs(triggerRef, child?.ref),\n }),\n };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/popoverContext.d.ts CHANGED Viewed

@@ -4,5 +4,5 @@ export declare const PopoverContext: Context<PopoverContextValue>;
 /**
  * Context shared between Popover and its children components
  */
-export declare type PopoverContextValue = Pick<PopoverState, 'open' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus'>;
+export declare type PopoverContextValue = Pick<PopoverState, 'toggleOpen' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus'>;
 export declare const usePopoverContext_unstable: <T>(selector: ContextSelector<PopoverContextValue, T>) => T;

package/lib-commonjs/popoverContext.js CHANGED Viewed

@@ -8,8 +8,8 @@ exports.usePopoverContext_unstable = exports.PopoverContext = void 0;
 const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
 exports.PopoverContext = /*#__PURE__*/react_context_selector_1.createContext({
-  open: false,
   setOpen: () => null,
+  toggleOpen: () => null,
   triggerRef: {
     current: null
   },

package/lib-commonjs/popoverContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["popoverContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAA+C,wBAAA,CAAA,aAAA,CAAmC;AAC7F,EAAA,~~IAAI~~,EAAE,~~KADuF~~;AAE7F,EAAA,~~OAAO~~,EAAE,MAAM,~~IAF8E~~;AAG7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GAHiF;AAI7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GAJiF;AAK7F,EAAA,QAAQ,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GALmF;AAM7F,EAAA,aAAa,EAAE,KAN8E;AAO7F,EAAA,WAAW,EAAE,KAPgF;AAQ7F,EAAA,IAAI,EAAE,QARuF;AAS7F,EAAA,SAAS,EAAE;AATkF,CAAnC,CAA/C;;AA+BN,MAAM,0BAA0B,GAAO,QAAJ,IACxC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,cAAnB,EAAmC,QAAnC,CADK;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue>({\n ~~open~~: ~~false~~,\n ~~setOpen~~: () => null,\n triggerRef: { current: null },\n contentRef: { current: null },\n arrowRef: { current: null },\n openOnContext: false,\n openOnHover: false,\n size: 'medium',\n trapFocus: false,\n});\n\n/*\n Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n PopoverState,\n \| '~~open~~'\n \| 'setOpen'\n \| 'triggerRef'\n \| 'contentRef'\n \| 'openOnHover'\n \| 'openOnContext'\n \| 'mountNode'\n \| 'noArrow'\n \| 'arrowRef'\n \| 'size'\n \| 'appearance'\n \| 'trapFocus'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n useContextSelector(PopoverContext, selector);\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["popoverContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAA+C,wBAAA,CAAA,aAAA,CAAmC;AAC7F,EAAA,OAAO,EAAE,MAAM,IAD8E;AAE7F,EAAA,UAAU,EAAE,MAAM,IAF2E;AAG7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GAHiF;AAI7F,EAAA,UAAU,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GAJiF;AAK7F,EAAA,QAAQ,EAAE;AAAE,IAAA,OAAO,EAAE;AAAX,GALmF;AAM7F,EAAA,aAAa,EAAE,KAN8E;AAO7F,EAAA,WAAW,EAAE,KAPgF;AAQ7F,EAAA,IAAI,EAAE,QARuF;AAS7F,EAAA,SAAS,EAAE;AATkF,CAAnC,CAA/C;;AA+BN,MAAM,0BAA0B,GAAO,QAAJ,IACxC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,cAAnB,EAAmC,QAAnC,CADK;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue>({\n setOpen: () => null,\n toggleOpen: () => null,\n triggerRef: { current: null },\n contentRef: { current: null },\n arrowRef: { current: null },\n openOnContext: false,\n openOnHover: false,\n size: 'medium',\n trapFocus: false,\n});\n\n/*\n Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n PopoverState,\n \| 'toggleOpen'\n \| 'setOpen'\n \| 'triggerRef'\n \| 'contentRef'\n \| 'openOnHover'\n \| 'openOnContext'\n \| 'mountNode'\n \| 'noArrow'\n \| 'arrowRef'\n \| 'size'\n \| 'appearance'\n \| 'trapFocus'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n useContextSelector(PopoverContext, selector);\n"],"sourceRoot":"../src/"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-popover",
-  "version": "0.0.0-nightly-20220303-0405.1",
+  "version": "0.0.0-nightly-20220304-0506.1",
   "description": "Popover component for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220303-0405.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220304-0506.1",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -43,14 +43,14 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "0.0.0-nightly-20220303-0405.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20220304-0506.1",
     "@griffel/react": "1.0.0",
-    "@fluentui/react-portal": "0.0.0-nightly-20220303-0405.1",
-    "@fluentui/react-positioning": "0.0.0-nightly-20220303-0405.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20220303-0405.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20220303-0405.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20220303-0405.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20220303-0405.1",
+    "@fluentui/react-portal": "0.0.0-nightly-20220304-0506.1",
+    "@fluentui/react-positioning": "0.0.0-nightly-20220304-0506.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20220304-0506.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20220304-0506.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20220304-0506.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20220304-0506.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {