@fluentui/react-menu 9.0.0-alpha.77 → 9.0.0-alpha.80

package/lib/components/MenuPopover/MenuPopover.d.ts

@@ -1,6 +1,23 @@
 import * as React from 'react';
-import type { MenuPopoverProps } from './MenuPopover.types';
 /**
  * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
  */
-export declare const MenuPopover: React.ForwardRefExoticComponent<MenuPopoverProps & React.RefAttributes<HTMLElement>>;
+export declare const MenuPopover: React.ForwardRefExoticComponent<Pick<{
+    root?: import("@fluentui/react-utilities").ShorthandProps<{
+        as?: "div" | undefined;
+    } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("@fluentui/react-utilities").ShorthandRenderFunction<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        }> | null | undefined;
+    }>;
+}, never> & Pick<{
+    as?: "div" | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+} & {
+    children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("@fluentui/react-utilities").ShorthandRenderFunction<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }> | null | undefined;
+}, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as"> & React.RefAttributes<HTMLElement>>;

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

@@ -5,15 +5,14 @@ export declare type MenuPopoverSlots = {
 /**
  * MenuPopover Props
  */
-export interface MenuPopoverProps extends ComponentProps<MenuPopoverSlots> {
-}
+export declare type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;
 /**
  * State used in rendering MenuPopover
  */
-export interface MenuPopoverState extends ComponentState<MenuPopoverSlots> {
+export declare type MenuPopoverState = ComponentState<MenuPopoverSlots> & {
     /**
      * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order
      * This option is disregarded for submenus
      */
     inline: boolean;
-}
+};

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

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.types.js","sourceRoot":"../src/","sources":["components/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: IntrinsicShorthandProps<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport interface MenuPopoverProps extends ComponentProps<MenuPopoverSlots> {}\n\n/**\n * State used in rendering MenuPopover\n */\nexport interface MenuPopoverState extends ComponentState<MenuPopoverSlots> {\n  /**\n   * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n   * This option is disregarded for submenus\n   */\n  inline: boolean;\n}\n"]}
+{"version":3,"file":"MenuPopover.types.js","sourceRoot":"../src/","sources":["components/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: IntrinsicShorthandProps<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> & {\n  /**\n   * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n   * This option is disregarded for submenus\n   */\n  inline: boolean;\n};\n"]}

package/lib/components/MenuPopover/useMenuPopoverStyles.d.ts

@@ -1,6 +1,5 @@
 import type { MenuPopoverState } from './MenuPopover.types';
 /**
  * Apply styling to the Menu slots based on the state
- * {@docCategory Menu }
  */
 export declare const useMenuPopoverStyles: (state: MenuPopoverState) => MenuPopoverState;

package/lib/components/MenuPopover/useMenuPopoverStyles.js

@@ -27,7 +27,6 @@ var useStyles = /*#__PURE__*/__styles({
 });
 /**
  * Apply styling to the Menu slots based on the state
- * {@docCategory Menu }
  */
 
 

package/lib/components/MenuPopover/useMenuPopoverStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;;AAGA,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAaA;;;AAGG;;;AACH,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAAwB;AAC1D,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport type { MenuPopoverState } from './MenuPopover.types';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    backgroundColor: theme.alias.color.neutral.neutralBackground1,\n    minWidth: '128px',\n    maxWidth: '300px',\n    width: 'max-content',\n    boxShadow: `${theme.alias.shadow.shadow16}`,\n    paddingTop: '4px',\n    paddingBottom: '4px',\n    border: `1px solid ${theme.alias.color.neutral.transparentStroke}`,\n  }),\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n * {@docCategory Menu }\n */\nexport const useMenuPopoverStyles = (state: MenuPopoverState): MenuPopoverState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;;AAGA,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAaA;;AAEG;;;AACH,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAAwB;AAC1D,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport type { MenuPopoverState } from './MenuPopover.types';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    backgroundColor: theme.alias.color.neutral.neutralBackground1,\n    minWidth: '128px',\n    maxWidth: '300px',\n    width: 'max-content',\n    boxShadow: `${theme.alias.shadow.shadow16}`,\n    paddingTop: '4px',\n    paddingBottom: '4px',\n    border: `1px solid ${theme.alias.color.neutral.transparentStroke}`,\n  }),\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles = (state: MenuPopoverState): MenuPopoverState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuTrigger/MenuTrigger.d.ts

@@ -3,6 +3,5 @@ import type { MenuTriggerProps } from './MenuTrigger.types';
 /**
  * Wraps a trigger element as an only child
  * and adds the necessary event handling to open a popup menu
- * {@docCategory MenuTrigger }
  */
 export declare const MenuTrigger: React.FC<MenuTriggerProps>;

package/lib/components/MenuTrigger/MenuTrigger.js

@@ -3,7 +3,6 @@ import { renderMenuTrigger } from './renderMenuTrigger';
 /**
  * Wraps a trigger element as an only child
  * and adds the necessary event handling to open a popup menu
- * {@docCategory MenuTrigger }
  */
 
 export var MenuTrigger = function (props) {

package/lib/components/MenuTrigger/MenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":"AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AAGA;;;;AAIG;;AACH,OAAO,IAAM,WAAW,GAA+B,UAAA,KAAA,EAAK;AAC1D,MAAM,KAAK,GAAG,cAAc,CAAC,KAAD,CAA5B;AAEA,SAAO,iBAAiB,CAAC,KAAD,CAAxB;AACD,CAJM;AAMP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useMenuTrigger } from './useMenuTrigger';\nimport { renderMenuTrigger } from './renderMenuTrigger';\nimport type { MenuTriggerProps } from './MenuTrigger.types';\n\n/**\n * Wraps a trigger element as an only child\n * and adds the necessary event handling to open a popup menu\n * {@docCategory MenuTrigger }\n */\nexport const MenuTrigger: React.FC<MenuTriggerProps> = props => {\n  const state = useMenuTrigger(props);\n\n  return renderMenuTrigger(state);\n};\n\nMenuTrigger.displayName = 'MenuTrigger';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":"AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AAGA;;;AAGG;;AACH,OAAO,IAAM,WAAW,GAA+B,UAAA,KAAA,EAAK;AAC1D,MAAM,KAAK,GAAG,cAAc,CAAC,KAAD,CAA5B;AAEA,SAAO,iBAAiB,CAAC,KAAD,CAAxB;AACD,CAJM;AAMP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useMenuTrigger } from './useMenuTrigger';\nimport { renderMenuTrigger } from './renderMenuTrigger';\nimport type { MenuTriggerProps } from './MenuTrigger.types';\n\n/**\n * Wraps a trigger element as an only child\n * and adds the necessary event handling to open a popup menu\n */\nexport const MenuTrigger: React.FC<MenuTriggerProps> = props => {\n  const state = useMenuTrigger(props);\n\n  return renderMenuTrigger(state);\n};\n\nMenuTrigger.displayName = 'MenuTrigger';\n"],"sourceRoot":"../src/"}

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

@@ -1,20 +1,16 @@
 import * as React from 'react';
-/**
- * {@docCategory MenuTrigger }
- */
-export interface MenuTriggerProps {
+export declare type MenuTriggerProps = {
     /**
-     * Explicitly require single child
+     * Explicitly require single child or render function
      */
-    children: React.ReactElement;
-}
+    children: (React.ReactElement & {
+        ref?: React.Ref<unknown>;
+    }) | ((props: MenuTriggerChildProps) => React.ReactNode);
+};
 /**
  * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu
  */
-export interface MenuTriggerChildProps extends Required<Pick<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onContextMenu' | 'onKeyDown' | 'aria-haspopup' | 'aria-expanded' | 'id'>> {
-}
-/**
- * {@docCategory MenuTrigger }
- */
-export interface MenuTriggerState extends MenuTriggerProps {
-}
+export declare type MenuTriggerChildProps = Required<Pick<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onContextMenu' | 'onKeyDown' | 'aria-haspopup' | 'aria-expanded' | 'id'>> & {
+    ref?: React.Ref<never>;
+};
+export declare type MenuTriggerState = MenuTriggerProps;

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

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"../src/","sources":["components/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\n/**\n * {@docCategory MenuTrigger }\n */\nexport interface MenuTriggerProps {\n  /**\n   * Explicitly require single child\n   */\n  children: React.ReactElement;\n}\n\n/**\n * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu\n */\nexport interface MenuTriggerChildProps\n  extends Required<\n    Pick<\n      React.HTMLAttributes<HTMLElement>,\n      | 'onClick'\n      | 'onMouseEnter'\n      | 'onMouseLeave'\n      | 'onContextMenu'\n      | 'onKeyDown'\n      | 'aria-haspopup'\n      | 'aria-expanded'\n      | 'id'\n    >\n  > {}\n\n/**\n * {@docCategory MenuTrigger }\n */\nexport interface MenuTriggerState extends MenuTriggerProps {}\n"]}
+{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"../src/","sources":["components/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type MenuTriggerProps = {\n  /**\n   * Explicitly require single child or render function\n   */\n  children: (React.ReactElement & { ref?: React.Ref<unknown> }) | ((props: MenuTriggerChildProps) => React.ReactNode);\n};\n\n/**\n * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu\n */\nexport type MenuTriggerChildProps = Required<\n  Pick<\n    React.HTMLAttributes<HTMLElement>,\n    | 'onClick'\n    | 'onMouseEnter'\n    | 'onMouseLeave'\n    | 'onContextMenu'\n    | 'onKeyDown'\n    | 'aria-haspopup'\n    | 'aria-expanded'\n    | 'id'\n  >\n> & {\n  ref?: React.Ref<never>;\n};\n\nexport type MenuTriggerState = MenuTriggerProps;\n"]}

package/lib/components/MenuTrigger/renderMenuTrigger.d.ts

@@ -3,6 +3,5 @@ import type { MenuTriggerState } from './MenuTrigger.types';
  * Render the final JSX of MenuTrigger
  *
  * Only renders children
- * {@docCategory MenuTrigger }
  */
 export declare const renderMenuTrigger: (state: MenuTriggerState) => JSX.Element;

package/lib/components/MenuTrigger/renderMenuTrigger.js

@@ -4,7 +4,6 @@ import { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';
  * Render the final JSX of MenuTrigger
  *
  * Only renders children
- * {@docCategory MenuTrigger }
  */
 
 export var renderMenuTrigger = function (state) {

package/lib/components/MenuTrigger/renderMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuTrigger/renderMenuTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,mCAA3C;AAGA;;;;;AAKG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;AACvD,sBAAO,KAAA,CAAA,aAAA,CAAC,0BAAD,EAA2B;AAAC,IAAA,KAAK,EAAE;AAAR,GAA3B,EAA0C,KAAK,CAAC,QAAhD,CAAP;AACD,CAFM","sourcesContent":["import * as React from 'react';\nimport { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';\nimport type { MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n * {@docCategory MenuTrigger }\n */\nexport const renderMenuTrigger = (state: MenuTriggerState) => {\n  return <MenuTriggerContextProvider value={true}>{state.children}</MenuTriggerContextProvider>;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuTrigger/renderMenuTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,mCAA3C;AAGA;;;;AAIG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;AACvD,sBAAO,KAAA,CAAA,aAAA,CAAC,0BAAD,EAA2B;AAAC,IAAA,KAAK,EAAE;AAAR,GAA3B,EAA0C,KAAK,CAAC,QAAhD,CAAP;AACD,CAFM","sourcesContent":["import * as React from 'react';\nimport { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';\nimport type { MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderMenuTrigger = (state: MenuTriggerState) => {\n  return <MenuTriggerContextProvider value={true}>{state.children}</MenuTriggerContextProvider>;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuTrigger/useMenuTrigger.d.ts

@@ -4,7 +4,5 @@ import type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
  * Clones the only child component and adds necessary event handling behaviours to open a popup menu
  *
  * @param props - props from this instance of MenuTrigger
- *
- * {@docCategory MenuTrigger }
  */
 export declare const useMenuTrigger: (props: MenuTriggerProps) => MenuTriggerState;

package/lib/components/MenuTrigger/useMenuTrigger.js

@@ -5,8 +5,6 @@ import { useTriggerElement } from './useTriggerElement';
  * Clones the only child component and adds necessary event handling behaviours to open a popup menu
  *
  * @param props - props from this instance of MenuTrigger
- *
- * {@docCategory MenuTrigger }
  */
 
 export var useMenuTrigger = function (props) {

package/lib/components/MenuTrigger/useMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":";AAAA,SAAS,iBAAT,QAAkC,qBAAlC;AAGA;;;;;;;AAOG;;AACH,OAAO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAwB;AACpD,MAAM,KAAK,GAAA,QAAA,CAAA,EAAA,EAAQ,KAAR,CAAX,CADoD,CAGpD;;;AACA,SAAO,iBAAiB,CAAC,KAAD,CAAxB;AACD,CALM","sourcesContent":["import { useTriggerElement } from './useTriggerElement';\nimport type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n *\n * {@docCategory MenuTrigger }\n */\nexport const useMenuTrigger = (props: MenuTriggerProps): MenuTriggerState => {\n  const state = { ...props };\n\n  // TODO just move the contents of this hook here\n  return useTriggerElement(state);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":";AAAA,SAAS,iBAAT,QAAkC,qBAAlC;AAGA;;;;;AAKG;;AACH,OAAO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAwB;AACpD,MAAM,KAAK,GAAA,QAAA,CAAA,EAAA,EAAQ,KAAR,CAAX,CADoD,CAGpD;;;AACA,SAAO,iBAAiB,CAAC,KAAD,CAAxB;AACD,CALM","sourcesContent":["import { useTriggerElement } from './useTriggerElement';\nimport type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n */\nexport const useMenuTrigger = (props: MenuTriggerProps): MenuTriggerState => {\n  const state = { ...props };\n\n  // TODO just move the contents of this hook here\n  return useTriggerElement(state);\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuTrigger/useTriggerElement.js

@@ -1,7 +1,7 @@
 import { __assign } from "tslib";
 import * as React from 'react';
 import { ArrowRight, ArrowDown, ArrowLeft, Escape } from '@fluentui/keyboard-keys';
-import { useMergedRefs, useEventCallback, shouldPreventDefaultOnKeyDown } from '@fluentui/react-utilities';
+import { applyTriggerPropsToChildren, onlyChild, shouldPreventDefaultOnKeyDown, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { useFocusFinders } from '@fluentui/react-tabster';
 import { useMenuContext } from '../../contexts/menuContext';
 import { useFluent } from '@fluentui/react-shared-contexts';
@@ -16,7 +16,7 @@ var noop = function () {
 
 
 export var useTriggerElement = function (state) {
-  var _a;
+  var _a, _b;
 
   var triggerRef = useMenuContext(function (context) {
     return context.triggerRef;
@@ -48,9 +48,8 @@ export var useTriggerElement = function (state) {
   var openedWithKeyboardRef = React.useRef(false);
   var hasMouseMoved = React.useRef(false);
   var dir = useFluent().dir;
-  var OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft; // TODO also need to warn on React.Fragment usage
-
-  var child = React.Children.only(state.children);
+  var OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;
+  var child = /*#__PURE__*/React.isValidElement(state.children) ? onlyChild(state.children) : undefined;
   var onContextMenu = useEventCallback(function (e) {
     var _a, _b;
 
@@ -62,7 +61,7 @@ export var useTriggerElement = function (state) {
       });
     }
 
-    (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onContextMenu) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+    (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onContextMenu) === null || _b === void 0 ? void 0 : _b.call(_a, e);
   });
   var onClick = useEventCallback(function (e) {
     var _a, _b;
@@ -75,7 +74,7 @@ export var useTriggerElement = function (state) {
       openedWithKeyboardRef.current = false;
     }
 
-    (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+    (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
   });
   var onKeyDown = useEventCallback(function (e) {
     var _a, _b, _c;
@@ -111,7 +110,7 @@ export var useTriggerElement = function (state) {
       focusFirst();
     }
 
-    (_c = (_b = child.props) === null || _b === void 0 ? void 0 : _b.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+    (_c = (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(_b, e);
   });
   var onMouseEnter = useEventCallback(function (e) {
     var _a, _b;
@@ -123,7 +122,7 @@ export var useTriggerElement = function (state) {
       });
     }
 
-    (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+    (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
   }); // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience
   // First time open the mouse using mousemove and then continue with mouseenter
   // Only use once to determine that the user is using the mouse since it is an expensive event to handle
@@ -147,14 +146,14 @@ export var useTriggerElement = function (state) {
       });
     }
 
-    (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+    (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
   });
-  var disabled = (_a = child.props) === null || _a === void 0 ? void 0 : _a.disabled;
+  var disabled = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.disabled;
 
   var triggerProps = __assign({
     'aria-haspopup': true,
     'aria-expanded': open,
-    id: child.props.id || triggerId
+    id: ((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.id) || triggerId
   }, !disabled ? {
     onClick: onClick,
     onMouseEnter: onMouseEnter,
@@ -172,8 +171,8 @@ export var useTriggerElement = function (state) {
     onMouseMove: noop
   });
 
-  state.children = /*#__PURE__*/React.cloneElement(child, __assign(__assign({}, triggerProps), {
-    ref: useMergedRefs(child.ref, triggerRef)
+  state.children = applyTriggerPropsToChildren(state.children, __assign(__assign({}, triggerProps), {
+    ref: useMergedRefs(typeof state.children !== 'function' && state.children.ref || null, triggerRef)
   }));
   return state;
 };

package/lib/components/MenuTrigger/useTriggerElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuTrigger/useTriggerElement.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ArrowRight, ArrowDown, ArrowLeft, Escape } from '@fluentui/keyboard-keys';\nimport { useMergedRefs, useEventCallback, shouldPreventDefaultOnKeyDown } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext } from '../../contexts/menuContext';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuTriggerChildProps, MenuTriggerState } from './MenuTrigger.types';\n\nconst noop = () => null;\n\n/**\n * Adds the necessary props to the trigger element\n */\nexport const useTriggerElement = (state: MenuTriggerState): MenuTriggerState => {\n  const triggerRef = useMenuContext(context => context.triggerRef);\n  const menuPopoverRef = useMenuContext(context => context.menuPopoverRef);\n  const setOpen = useMenuContext(context => context.setOpen);\n  const open = useMenuContext(context => context.open);\n  const triggerId = useMenuContext(context => context.triggerId);\n  const openOnHover = useMenuContext(context => context.openOnHover);\n  const openOnContext = useMenuContext(context => context.openOnContext);\n  const isSubmenu = useIsSubmenu();\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, menuPopoverRef]);\n\n  const openedWithKeyboardRef = React.useRef(false);\n  const hasMouseMoved = React.useRef(false);\n\n  const { dir } = useFluent();\n  const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n  // TODO also need to warn on React.Fragment usage\n  const child = React.Children.only(state.children);\n\n  const onContextMenu = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, { open: true, keyboard: false });\n    }\n    child.props?.onContextMenu?.(e);\n  });\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (!openOnContext) {\n      setOpen(e, { open: !open, keyboard: openedWithKeyboardRef.current });\n      openedWithKeyboardRef.current = false;\n    }\n    child.props?.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    if (shouldPreventDefaultOnKeyDown(e)) {\n      e.preventDefault();\n      openedWithKeyboardRef.current = true;\n      (e.target as HTMLElement)?.click();\n    }\n\n    const key = e.key;\n\n    if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n      setOpen(e, { open: true, keyboard: true });\n    }\n\n    if (key === Escape && !isSubmenu) {\n      setOpen(e, { open: false, keyboard: true });\n    }\n\n    // if menu is already open, can't rely on effects to focus\n    if (open && key === OpenArrowKey && isSubmenu) {\n      focusFirst();\n    }\n\n    if (open && key === ArrowDown && !isSubmenu) {\n      focusFirst();\n    }\n\n    child.props?.onKeyDown?.(e);\n  });\n\n  const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover && hasMouseMoved.current) {\n      setOpen(e, { open: true, keyboard: false });\n    }\n\n    child.props?.onMouseEnter?.(e);\n  });\n\n  // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n  // First time open the mouse using mousemove and then continue with mouseenter\n  // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n  const onMouseMove = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover && !hasMouseMoved.current) {\n      setOpen(e, { open: true, keyboard: false });\n      hasMouseMoved.current = true;\n    }\n  });\n\n  const onMouseLeave = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, { open: false, keyboard: false });\n    }\n\n    child.props?.onMouseLeave?.(e);\n  });\n\n  const disabled = child.props?.disabled;\n  const triggerProps: MenuTriggerChildProps = {\n    'aria-haspopup': true,\n    'aria-expanded': open,\n    id: child.props.id || triggerId,\n\n    ...(!disabled\n      ? {\n          onClick,\n          onMouseEnter,\n          onMouseLeave,\n          onContextMenu,\n          onKeyDown,\n          onMouseMove,\n        }\n      : // Spread disabled event handlers to implement contract and avoid specific disabled logic in handlers\n        {\n          onClick: noop,\n          onMouseEnter: noop,\n          onMouseLeave: noop,\n          onContextMenu: noop,\n          onKeyDown: noop,\n          onMouseMove: noop,\n        }),\n  };\n\n  state.children = React.cloneElement(child, {\n    ...triggerProps,\n    ref: useMergedRefs(((child as unknown) as React.ReactElement & React.RefAttributes<unknown>).ref, triggerRef),\n  });\n\n  return state as MenuTriggerState;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuTrigger/useTriggerElement.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,UAAT,EAAqB,SAArB,EAAgC,SAAhC,EAA2C,MAA3C,QAAyD,yBAAzD;AACA,SACE,2BADF,EAEE,SAFF,EAGE,6BAHF,EAIE,gBAJF,EAKE,aALF,QAMO,2BANP;AAOA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SAAS,cAAT,QAA+B,4BAA/B;AACA,SAAS,SAAT,QAA0B,iCAA1B;AACA,SAAS,YAAT,QAA6B,0BAA7B;;AAGA,IAAM,IAAI,GAAG,YAAA;AAAM,SAAA,IAAA;AAAI,CAAvB;AAEA;;AAEG;;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;;;AACvD,MAAM,UAAU,GAAG,cAAc,CAAC,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,UAAA;AAAkB,GAA9B,CAAjC;AACA,MAAM,cAAc,GAAG,cAAc,CAAC,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,cAAA;AAAsB,GAAlC,CAArC;AACA,MAAM,OAAO,GAAG,cAAc,CAAC,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,OAAA;AAAe,GAA3B,CAA9B;AACA,MAAM,IAAI,GAAG,cAAc,CAAC,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,IAAA;AAAY,GAAxB,CAA3B;AACA,MAAM,SAAS,GAAG,cAAc,CAAC,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,SAAA;AAAiB,GAA7B,CAAhC;AACA,MAAM,WAAW,GAAG,cAAc,CAAC,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,WAAA;AAAmB,GAA/B,CAAlC;AACA,MAAM,aAAa,GAAG,cAAc,CAAC,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,aAAA;AAAqB,GAAjC,CAApC;AACA,MAAM,SAAS,GAAG,YAAY,EAA9B;AACQ,MAAA,kBAAkB,GAAK,eAAe,GAApB,kBAAlB;AACR,MAAM,UAAU,GAAG,KAAK,CAAC,WAAN,CAAkB,YAAA;AACnC,QAAM,cAAc,GAAG,kBAAkB,CAAC,cAAc,CAAC,OAAhB,CAAzC;AACA,IAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,KAAhB,EAAA;AACD,GAHkB,EAGhB,CAAC,kBAAD,EAAqB,cAArB,CAHgB,CAAnB;AAKA,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAN,CAAa,KAAb,CAA9B;AACA,MAAM,aAAa,GAAG,KAAK,CAAC,MAAN,CAAa,KAAb,CAAtB;AAEQ,MAAA,GAAG,GAAK,SAAS,GAAd,GAAH;AACR,MAAM,YAAY,GAAG,GAAG,KAAK,KAAR,GAAgB,UAAhB,GAA6B,SAAlD;AAEA,MAAM,KAAK,GAAG,aAAA,KAAK,CAAC,cAAN,CAAqB,KAAK,CAAC,QAA3B,IAAuC,SAAS,CAAC,KAAK,CAAC,QAAP,CAAhD,GAAmE,SAAjF;AAEA,MAAM,aAAa,GAAG,gBAAgB,CAAC,UAAC,CAAD,EAAiC;;;AACtE,QAAI,aAAJ,EAAmB;AACjB,MAAA,CAAC,CAAC,cAAF;AACA,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,IAAR;AAAc,QAAA,QAAQ,EAAE;AAAxB,OAAJ,CAAP;AACD;;AAED,KAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,aAAd,MAA2B,IAA3B,IAA2B,EAAA,KAAA,KAAA,CAA3B,GAA2B,KAAA,CAA3B,GAA2B,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,CAAH,CAA3B;AACD,GAPqC,CAAtC;AASA,MAAM,OAAO,GAAG,gBAAgB,CAAC,UAAC,CAAD,EAAiC;;;AAChE,QAAI,CAAC,aAAL,EAAoB;AAClB,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,CAAC,IAAT;AAAe,QAAA,QAAQ,EAAE,qBAAqB,CAAC;AAA/C,OAAJ,CAAP;AACA,MAAA,qBAAqB,CAAC,OAAtB,GAAgC,KAAhC;AACD;;AAED,KAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,OAAd,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,CAAH,CAArB;AACD,GAP+B,CAAhC;AASA,MAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,CAAD,EAAoC;;;AACrE,QAAI,6BAA6B,CAAC,CAAD,CAAjC,EAAsC;AACpC,MAAA,CAAC,CAAC,cAAF;AACA,MAAA,qBAAqB,CAAC,OAAtB,GAAgC,IAAhC;AACA,OAAA,EAAA,GAAC,CAAC,CAAC,MAAH,MAAyB,IAAzB,IAAyB,EAAA,KAAA,KAAA,CAAzB,GAAyB,KAAA,CAAzB,GAAyB,EAAA,CAAE,KAAF,EAAzB;AACD;;AAED,QAAM,GAAG,GAAG,CAAC,CAAC,GAAd;;AAEA,QAAI,CAAC,aAAD,KAAoB,SAAS,IAAI,GAAG,KAAK,YAAtB,IAAwC,CAAC,SAAD,IAAc,GAAG,KAAK,SAAjF,CAAJ,EAAkG;AAChG,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,IAAR;AAAc,QAAA,QAAQ,EAAE;AAAxB,OAAJ,CAAP;AACD;;AAED,QAAI,GAAG,KAAK,MAAR,IAAkB,CAAC,SAAvB,EAAkC;AAChC,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,KAAR;AAAe,QAAA,QAAQ,EAAE;AAAzB,OAAJ,CAAP;AACD,KAfoE,CAiBrE;;;AACA,QAAI,IAAI,IAAI,GAAG,KAAK,YAAhB,IAAgC,SAApC,EAA+C;AAC7C,MAAA,UAAU;AACX;;AAED,QAAI,IAAI,IAAI,GAAG,KAAK,SAAhB,IAA6B,CAAC,SAAlC,EAA6C;AAC3C,MAAA,UAAU;AACX;;AAED,KAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,SAAd,MAAuB,IAAvB,IAAuB,EAAA,KAAA,KAAA,CAAvB,GAAuB,KAAA,CAAvB,GAAuB,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,CAAH,CAAvB;AACD,GA3BiC,CAAlC;AA6BA,MAAM,YAAY,GAAG,gBAAgB,CAAC,UAAC,CAAD,EAAiC;;;AACrE,QAAI,WAAW,IAAI,aAAa,CAAC,OAAjC,EAA0C;AACxC,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,IAAR;AAAc,QAAA,QAAQ,EAAE;AAAxB,OAAJ,CAAP;AACD;;AAED,KAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,YAAd,MAA0B,IAA1B,IAA0B,EAAA,KAAA,KAAA,CAA1B,GAA0B,KAAA,CAA1B,GAA0B,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,CAAH,CAA1B;AACD,GANoC,CAArC,CAtEuD,CA8EvD;AACA;AACA;;AACA,MAAM,WAAW,GAAG,gBAAgB,CAAC,UAAC,CAAD,EAAiC;AACpE,QAAI,WAAW,IAAI,CAAC,aAAa,CAAC,OAAlC,EAA2C;AACzC,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,IAAR;AAAc,QAAA,QAAQ,EAAE;AAAxB,OAAJ,CAAP;AACA,MAAA,aAAa,CAAC,OAAd,GAAwB,IAAxB;AACD;AACF,GALmC,CAApC;AAOA,MAAM,YAAY,GAAG,gBAAgB,CAAC,UAAC,CAAD,EAAiC;;;AACrE,QAAI,WAAJ,EAAiB;AACf,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,KAAR;AAAe,QAAA,QAAQ,EAAE;AAAzB,OAAJ,CAAP;AACD;;AAED,KAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,YAAd,MAA0B,IAA1B,IAA0B,EAAA,KAAA,KAAA,CAA1B,GAA0B,KAAA,CAA1B,GAA0B,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,CAAH,CAA1B;AACD,GANoC,CAArC;AAQA,MAAM,QAAQ,GAAA,CAAA,EAAA,GAAG,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAV,MAAe,IAAf,IAAe,EAAA,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAe,EAAA,CAAE,QAA/B;;AACA,MAAM,YAAY,GAAA,QAAA,CAAA;AAChB,qBAAiB,IADD;AAEhB,qBAAiB,IAFD;AAGhB,IAAA,EAAE,EAAE,CAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,EAAd,KAAoB;AAHR,GAAA,EAKZ,CAAC,QAAD,GACA;AACE,IAAA,OAAO,EAAA,OADT;AAEE,IAAA,YAAY,EAAA,YAFd;AAGE,IAAA,YAAY,EAAA,YAHd;AAIE,IAAA,aAAa,EAAA,aAJf;AAKE,IAAA,SAAS,EAAA,SALX;AAME,IAAA,WAAW,EAAA;AANb,GADA,GASA;AACA;AACE,IAAA,OAAO,EAAE,IADX;AAEE,IAAA,YAAY,EAAE,IAFhB;AAGE,IAAA,YAAY,EAAE,IAHhB;AAIE,IAAA,aAAa,EAAE,IAJjB;AAKE,IAAA,SAAS,EAAE,IALb;AAME,IAAA,WAAW,EAAE;AANf,GAfY,CAAlB;;AAyBA,EAAA,KAAK,CAAC,QAAN,GAAiB,2BAA2B,CAAC,KAAK,CAAC,QAAP,EAAe,QAAA,CAAA,QAAA,CAAA,EAAA,EACtD,YADsD,CAAA,EAC1C;AACf,IAAA,GAAG,EAAE,aAAa,CAAE,OAAO,KAAK,CAAC,QAAb,KAA0B,UAA1B,IAAwC,KAAK,CAAC,QAAN,CAAe,GAAxD,IAAgE,IAAjE,EAAuE,UAAvE;AADH,GAD0C,CAAf,CAA5C;AAKA,SAAO,KAAP;AACD,CAhIM","sourcesContent":["import * as React from 'react';\nimport { ArrowRight, ArrowDown, ArrowLeft, Escape } from '@fluentui/keyboard-keys';\nimport {\n  applyTriggerPropsToChildren,\n  onlyChild,\n  shouldPreventDefaultOnKeyDown,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext } from '../../contexts/menuContext';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuTriggerChildProps, MenuTriggerState } from './MenuTrigger.types';\n\nconst noop = () => null;\n\n/**\n * Adds the necessary props to the trigger element\n */\nexport const useTriggerElement = (state: MenuTriggerState): MenuTriggerState => {\n  const triggerRef = useMenuContext(context => context.triggerRef);\n  const menuPopoverRef = useMenuContext(context => context.menuPopoverRef);\n  const setOpen = useMenuContext(context => context.setOpen);\n  const open = useMenuContext(context => context.open);\n  const triggerId = useMenuContext(context => context.triggerId);\n  const openOnHover = useMenuContext(context => context.openOnHover);\n  const openOnContext = useMenuContext(context => context.openOnContext);\n  const isSubmenu = useIsSubmenu();\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, menuPopoverRef]);\n\n  const openedWithKeyboardRef = React.useRef(false);\n  const hasMouseMoved = React.useRef(false);\n\n  const { dir } = useFluent();\n  const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n  const child = React.isValidElement(state.children) ? onlyChild(state.children) : undefined;\n\n  const onContextMenu = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, { open: true, keyboard: false });\n    }\n\n    child?.props?.onContextMenu?.(e);\n  });\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (!openOnContext) {\n      setOpen(e, { open: !open, keyboard: openedWithKeyboardRef.current });\n      openedWithKeyboardRef.current = false;\n    }\n\n    child?.props?.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    if (shouldPreventDefaultOnKeyDown(e)) {\n      e.preventDefault();\n      openedWithKeyboardRef.current = true;\n      (e.target as HTMLElement)?.click();\n    }\n\n    const key = e.key;\n\n    if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n      setOpen(e, { open: true, keyboard: true });\n    }\n\n    if (key === Escape && !isSubmenu) {\n      setOpen(e, { open: false, keyboard: true });\n    }\n\n    // if menu is already open, can't rely on effects to focus\n    if (open && key === OpenArrowKey && isSubmenu) {\n      focusFirst();\n    }\n\n    if (open && key === ArrowDown && !isSubmenu) {\n      focusFirst();\n    }\n\n    child?.props?.onKeyDown?.(e);\n  });\n\n  const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover && hasMouseMoved.current) {\n      setOpen(e, { open: true, keyboard: false });\n    }\n\n    child?.props?.onMouseEnter?.(e);\n  });\n\n  // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n  // First time open the mouse using mousemove and then continue with mouseenter\n  // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n  const onMouseMove = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover && !hasMouseMoved.current) {\n      setOpen(e, { open: true, keyboard: false });\n      hasMouseMoved.current = true;\n    }\n  });\n\n  const onMouseLeave = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, { open: false, keyboard: false });\n    }\n\n    child?.props?.onMouseLeave?.(e);\n  });\n\n  const disabled = child?.props?.disabled;\n  const triggerProps: MenuTriggerChildProps = {\n    'aria-haspopup': true,\n    'aria-expanded': open,\n    id: child?.props?.id || triggerId,\n\n    ...(!disabled\n      ? {\n          onClick,\n          onMouseEnter,\n          onMouseLeave,\n          onContextMenu,\n          onKeyDown,\n          onMouseMove,\n        }\n      : // Spread disabled event handlers to implement contract and avoid specific disabled logic in handlers\n        {\n          onClick: noop,\n          onMouseEnter: noop,\n          onMouseLeave: noop,\n          onContextMenu: noop,\n          onKeyDown: noop,\n          onMouseMove: noop,\n        }),\n  };\n\n  state.children = applyTriggerPropsToChildren(state.children, {\n    ...triggerProps,\n    ref: useMergedRefs((typeof state.children !== 'function' && state.children.ref) || null, triggerRef),\n  }) as React.ReactElement;\n\n  return state as MenuTriggerState;\n};\n"],"sourceRoot":"../src/"}

package/lib/contexts/menuContext.d.ts

@@ -8,9 +8,9 @@ export declare const MenuContext: Context<MenuContextValue>;
  *
  * Extends and drills down MenuList props to simplify API
  */
-export interface MenuContextValue extends MenuListProps, Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopoverRef' | 'setOpen' | 'isSubmenu' | 'triggerId' | 'hasIcons' | 'hasCheckmarks' | 'persistOnItemClick' | 'inline'> {
+export declare type MenuContextValue = MenuListProps & Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopoverRef' | 'setOpen' | 'isSubmenu' | 'triggerId' | 'hasIcons' | 'hasCheckmarks' | 'persistOnItemClick' | 'inline'> & {
     open: boolean;
     triggerId: string;
-}
+};
 export declare const MenuProvider: React.Provider<MenuContextValue> & React.FC<React.ProviderProps<MenuContextValue>>;
 export declare const useMenuContext: <T>(selector: ContextSelector<MenuContextValue, T>) => T;

package/lib/contexts/menuContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/menuContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,IAAM,WAAW,gBAA8B,aAAa,CAAmB;AACpF,EAAA,IAAI,EAAE,KAD8E;AAEpF,EAAA,OAAO,EAAE,YAAA;AAAM,WAAA,KAAA;AAAK,GAFgE;AAGpF,EAAA,aAAa,EAAE,EAHqE;AAIpF,EAAA,oBAAoB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAJoD;AAKpF,EAAA,oBAAoB,EAAE,EAL8D;AAMpF,EAAA,SAAS,EAAE,KANyE;AAOpF,EAAA,UAAU,EAAG;AAAE,IAAA,OAAO,EAAE;AAAX,GAPuE;AAQpF,EAAA,cAAc,EAAG;AAAE,IAAA,OAAO,EAAE;AAAX,GARmE;AASpF,EAAA,SAAS,EAAE,EATyE;AAUpF,EAAA,aAAa,EAAE,KAVqE;AAWpF,EAAA,WAAW,EAAE,KAXuE;AAYpF,EAAA,QAAQ,EAAE,KAZ0E;AAapF,EAAA,aAAa,EAAE;AAbqE,CAAnB,CAA5D;AAyCP,OAAO,IAAM,YAAY,GAAG,WAAW,CAAC,QAAjC;AAEP,OAAO,IAAM,cAAc,GAAG,UAAI,QAAJ,EAAkD;AAC9E,SAAA,kBAAkB,CAAC,WAAD,EAAc,QAAd,CAAlB;AAAyC,CADpC","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuListProps } from '../components/index';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue>({\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  defaultCheckedValues: {},\n  isSubmenu: false,\n  triggerRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  menuPopoverRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport interface MenuContextValue\n  extends MenuListProps,\n    Pick<\n      MenuState,\n      | 'openOnHover'\n      | 'openOnContext'\n      | 'triggerRef'\n      | 'menuPopoverRef'\n      | 'setOpen'\n      | 'isSubmenu'\n      | 'triggerId'\n      | 'hasIcons'\n      | 'hasCheckmarks'\n      | 'persistOnItemClick'\n      | 'inline'\n    > {\n  open: boolean;\n  triggerId: string;\n}\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, selector);\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["contexts/menuContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,IAAM,WAAW,gBAA8B,aAAa,CAAmB;AACpF,EAAA,IAAI,EAAE,KAD8E;AAEpF,EAAA,OAAO,EAAE,YAAA;AAAM,WAAA,KAAA;AAAK,GAFgE;AAGpF,EAAA,aAAa,EAAE,EAHqE;AAIpF,EAAA,oBAAoB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAJoD;AAKpF,EAAA,oBAAoB,EAAE,EAL8D;AAMpF,EAAA,SAAS,EAAE,KANyE;AAOpF,EAAA,UAAU,EAAG;AAAE,IAAA,OAAO,EAAE;AAAX,GAPuE;AAQpF,EAAA,cAAc,EAAG;AAAE,IAAA,OAAO,EAAE;AAAX,GARmE;AASpF,EAAA,SAAS,EAAE,EATyE;AAUpF,EAAA,aAAa,EAAE,KAVqE;AAWpF,EAAA,WAAW,EAAE,KAXuE;AAYpF,EAAA,QAAQ,EAAE,KAZ0E;AAapF,EAAA,aAAa,EAAE;AAbqE,CAAnB,CAA5D;AAwCP,OAAO,IAAM,YAAY,GAAG,WAAW,CAAC,QAAjC;AAEP,OAAO,IAAM,cAAc,GAAG,UAAI,QAAJ,EAAkD;AAC9E,SAAA,kBAAkB,CAAC,WAAD,EAAc,QAAd,CAAlB;AAAyC,CADpC","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuListProps } from '../components/index';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue>({\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  defaultCheckedValues: {},\n  isSubmenu: false,\n  triggerRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  menuPopoverRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = MenuListProps &\n  Pick<\n    MenuState,\n    | 'openOnHover'\n    | 'openOnContext'\n    | 'triggerRef'\n    | 'menuPopoverRef'\n    | 'setOpen'\n    | 'isSubmenu'\n    | 'triggerId'\n    | 'hasIcons'\n    | 'hasCheckmarks'\n    | 'persistOnItemClick'\n    | 'inline'\n  > & {\n    open: boolean;\n    triggerId: string;\n  };\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, selector);\n"],"sourceRoot":"../src/"}

package/lib/contexts/menuGroupContext.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
  * Context used to guarantee correct aria-relationship between header
  * and group information
  */
-export interface MenuGroupContextValue {
+export declare type MenuGroupContextValue = {
     /**
      * Element id applied to the `MenuGroupHeader` component
      */
     headerId: string;
-}
+};
 export declare const MenuGroupContextProvider: React.Provider<MenuGroupContextValue>;
 export declare const useMenuGroupContext: () => MenuGroupContextValue;

package/lib/contexts/menuGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/menuGroupContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,IAAM,gBAAgB,gBAAG,KAAK,CAAC,aAAN,CAA2C;AAAE,EAAA,QAAQ,EAAE;AAAZ,CAA3C,CAAzB;AAaA,OAAO,IAAM,wBAAwB,GAAG,gBAAgB,CAAC,QAAlD;AACP,OAAO,IAAM,mBAAmB,GAAG,YAAA;AAAM,SAAA,KAAK,CAAC,UAAN,CAAA,gBAAA,CAAA;AAAkC,CAApE","sourcesContent":["import * as React from 'react';\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue>({ headerId: '' });\n\n/**\n * Context used to guarantee correct aria-relationship between header\n * and group information\n */\nexport interface MenuGroupContextValue {\n  /**\n   * Element id applied to the `MenuGroupHeader` component\n   */\n  headerId: string;\n}\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\nexport const useMenuGroupContext = () => React.useContext(MenuGroupContext);\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["contexts/menuGroupContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,IAAM,gBAAgB,gBAAG,KAAK,CAAC,aAAN,CAA2C;AAAE,EAAA,QAAQ,EAAE;AAAZ,CAA3C,CAAzB;AAaA,OAAO,IAAM,wBAAwB,GAAG,gBAAgB,CAAC,QAAlD;AACP,OAAO,IAAM,mBAAmB,GAAG,YAAA;AAAM,SAAA,KAAK,CAAC,UAAN,CAAA,gBAAA,CAAA;AAAkC,CAApE","sourcesContent":["import * as React from 'react';\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue>({ headerId: '' });\n\n/**\n * Context used to guarantee correct aria-relationship between header\n * and group information\n */\nexport type MenuGroupContextValue = {\n  /**\n   * Element id applied to the `MenuGroupHeader` component\n   */\n  headerId: string;\n};\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\nexport const useMenuGroupContext = () => React.useContext(MenuGroupContext);\n"],"sourceRoot":"../src/"}

package/lib/contexts/menuListContext.d.ts

@@ -6,10 +6,10 @@ export declare const MenuListContext: Context<MenuListContextValue>;
 /**
  * Context shared between MenuList and its children components
  */
-export interface MenuListContextValue extends Pick<MenuListProps, 'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'> {
+export declare type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'> & {
     setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;
     toggleCheckbox?: SelectableHandler;
     selectRadio?: SelectableHandler;
-}
+};
 export declare const MenuListProvider: React.Provider<MenuListContextValue> & React.FC<React.ProviderProps<MenuListContextValue>>;
 export declare const useMenuListContext: <T>(selector: ContextSelector<MenuListContextValue, T>) => T;

package/lib/contexts/menuListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/menuListContext.tsx"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,IAAM,eAAe,gBAAkC,aAAa,CAAuB;AAChG,EAAA,aAAa,EAAE,EADiF;AAEhG,EAAA,oBAAoB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAFgE;AAGhG,EAAA,wBAAwB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAH4D;AAIhG,EAAA,cAAc,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAJsE;AAKhG,EAAA,WAAW,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GALyE;AAMhG,EAAA,QAAQ,EAAE,KANsF;AAOhG,EAAA,aAAa,EAAE;AAPiF,CAAvB,CAApE;AAoBP,OAAO,IAAM,gBAAgB,GAAG,eAAe,CAAC,QAAzC;AAEP,OAAO,IAAM,kBAAkB,GAAG,UAAK,QAAL,EAAuD;AACvF,SAAA,kBAAkB,CAAC,eAAD,EAAkB,QAAlB,CAAlB;AAA6C,CADxC","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SelectableHandler } from '../selectable/index';\nimport type { MenuListProps } from '../components/index';\n\nexport const MenuListContext: Context<MenuListContextValue> = createContext<MenuListContextValue>({\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  setFocusByFirstCharacter: () => null,\n  toggleCheckbox: () => null,\n  selectRadio: () => null,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between MenuList and its children components\n */\nexport interface MenuListContextValue\n  extends Pick<MenuListProps, 'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'> {\n  setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n  toggleCheckbox?: SelectableHandler;\n  selectRadio?: SelectableHandler;\n}\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext = <T,>(selector: ContextSelector<MenuListContextValue, T>) =>\n  useContextSelector(MenuListContext, selector);\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["contexts/menuListContext.tsx"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,IAAM,eAAe,gBAAkC,aAAa,CAAuB;AAChG,EAAA,aAAa,EAAE,EADiF;AAEhG,EAAA,oBAAoB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAFgE;AAGhG,EAAA,wBAAwB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAH4D;AAIhG,EAAA,cAAc,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAJsE;AAKhG,EAAA,WAAW,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GALyE;AAMhG,EAAA,QAAQ,EAAE,KANsF;AAOhG,EAAA,aAAa,EAAE;AAPiF,CAAvB,CAApE;AAsBP,OAAO,IAAM,gBAAgB,GAAG,eAAe,CAAC,QAAzC;AAEP,OAAO,IAAM,kBAAkB,GAAG,UAAK,QAAL,EAAuD;AACvF,SAAA,kBAAkB,CAAC,eAAD,EAAkB,QAAlB,CAAlB;AAA6C,CADxC","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SelectableHandler } from '../selectable/index';\nimport type { MenuListProps } from '../components/index';\n\nexport const MenuListContext: Context<MenuListContextValue> = createContext<MenuListContextValue>({\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  setFocusByFirstCharacter: () => null,\n  toggleCheckbox: () => null,\n  selectRadio: () => null,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between MenuList and its children components\n */\nexport type MenuListContextValue = Pick<\n  MenuListProps,\n  'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'\n> & {\n  setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n  toggleCheckbox?: SelectableHandler;\n  selectRadio?: SelectableHandler;\n};\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext = <T,>(selector: ContextSelector<MenuListContextValue, T>) =>\n  useContextSelector(MenuListContext, selector);\n"],"sourceRoot":"../src/"}

package/lib/selectable/types.d.ts

@@ -3,7 +3,7 @@ export declare type SelectableHandler = (e: React.MouseEvent | React.KeyboardEve
 /**
  * Props for selecatble menu items
  */
-export interface MenuItemSelectableProps {
+export declare type MenuItemSelectableProps = {
     /**
      * Follows input convention
      * https://www.w3schools.com/jsref/prop_checkbox_name.asp
@@ -14,11 +14,11 @@ export interface MenuItemSelectableProps {
      * https://www.w3schools.com/jsref/prop_checkbox_value.asp
      */
     value: string;
-}
+};
 /**
  * State for selectable menu items
  */
-export interface MenuItemSelectableState extends MenuItemSelectableProps {
+export declare type MenuItemSelectableState = MenuItemSelectableProps & {
     /**
      * Checked items for a value with `name`
      */
@@ -31,4 +31,4 @@ export interface MenuItemSelectableState extends MenuItemSelectableProps {
      * Selectable is checked
      */
     checked: boolean;
-}
+};

package/lib/selectable/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["selectable/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type SelectableHandler = (\n  e: React.MouseEvent | React.KeyboardEvent,\n  name: string,\n  value: string,\n  checked: boolean,\n) => void;\n\n/**\n * Props for selecatble menu items\n */\nexport interface MenuItemSelectableProps {\n  /**\n   * Follows input convention\n   * https://www.w3schools.com/jsref/prop_checkbox_name.asp\n   */\n  name: string;\n\n  /**\n   * Follows input convention\n   * https://www.w3schools.com/jsref/prop_checkbox_value.asp\n   */\n  value: string;\n}\n\n/**\n * State for selectable menu items\n */\nexport interface MenuItemSelectableState extends MenuItemSelectableProps {\n  /**\n   * Checked items for a value with `name`\n   */\n  checkedItems: string[];\n\n  /**\n   * Callback when checked items changes for a given value with `name`\n   */\n  onCheckedValueChange: (e: React.MouseEvent | React.KeyboardEvent, name: string, checkedItems: string[]) => void;\n\n  /**\n   * Selectable is checked\n   */\n  checked: boolean;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["selectable/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type SelectableHandler = (\n  e: React.MouseEvent | React.KeyboardEvent,\n  name: string,\n  value: string,\n  checked: boolean,\n) => void;\n\n/**\n * Props for selecatble menu items\n */\nexport type MenuItemSelectableProps = {\n  /**\n   * Follows input convention\n   * https://www.w3schools.com/jsref/prop_checkbox_name.asp\n   */\n  name: string;\n\n  /**\n   * Follows input convention\n   * https://www.w3schools.com/jsref/prop_checkbox_value.asp\n   */\n  value: string;\n};\n\n/**\n * State for selectable menu items\n */\nexport type MenuItemSelectableState = MenuItemSelectableProps & {\n  /**\n   * Checked items for a value with `name`\n   */\n  checkedItems: string[];\n\n  /**\n   * Callback when checked items changes for a given value with `name`\n   */\n  onCheckedValueChange: (e: React.MouseEvent | React.KeyboardEvent, name: string, checkedItems: string[]) => void;\n\n  /**\n   * Selectable is checked\n   */\n  checked: boolean;\n};\n"]}

package/lib-amd/components/Menu/Menu.d.ts

@@ -2,6 +2,5 @@ import * as React from 'react';
 import type { MenuProps } from './Menu.types';
 /**
  * Wrapper component that manages state for a popup MenuList and a MenuTrigger
- * {@docCategory Menu }
  */
 export declare const Menu: React.FC<MenuProps>;

package/lib-amd/components/Menu/Menu.js

@@ -4,7 +4,6 @@ define(["require", "exports", "./useMenu", "./useMenuContextValues", "./renderMe
     exports.Menu = void 0;
     /**
      * Wrapper component that manages state for a popup MenuList and a MenuTrigger
-     * {@docCategory Menu }
      */
     var Menu = function (props) {
         var state = useMenu_1.useMenu(props);

package/lib-amd/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"../src/","sources":["components/Menu/Menu.tsx"],"names":[],"mappings":";;;;IAMA;;;OAGG;IACI,IAAM,IAAI,GAAwB,UAAA,KAAK;QAC5C,IAAM,KAAK,GAAG,iBAAO,CAAC,KAAK,CAAC,CAAC;QAC7B,IAAM,aAAa,GAAG,2CAAoB,CAAC,KAAK,CAAC,CAAC;QAElD,OAAO,uBAAU,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAC1C,CAAC,CAAC;IALW,QAAA,IAAI,QAKf;IAEF,YAAI,CAAC,WAAW,GAAG,MAAM,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenu } from './useMenu';\nimport { useMenuContextValues } from './useMenuContextValues';\nimport { renderMenu } from './renderMenu';\nimport type { MenuProps } from './Menu.types';\n\n/**\n * Wrapper component that manages state for a popup MenuList and a MenuTrigger\n * {@docCategory Menu }\n */\nexport const Menu: React.FC<MenuProps> = props => {\n  const state = useMenu(props);\n  const contextValues = useMenuContextValues(state);\n\n  return renderMenu(state, contextValues);\n};\n\nMenu.displayName = 'Menu';\n"]}
+{"version":3,"file":"Menu.js","sourceRoot":"../src/","sources":["components/Menu/Menu.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACI,IAAM,IAAI,GAAwB,UAAA,KAAK;QAC5C,IAAM,KAAK,GAAG,iBAAO,CAAC,KAAK,CAAC,CAAC;QAC7B,IAAM,aAAa,GAAG,2CAAoB,CAAC,KAAK,CAAC,CAAC;QAElD,OAAO,uBAAU,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAC1C,CAAC,CAAC;IALW,QAAA,IAAI,QAKf;IAEF,YAAI,CAAC,WAAW,GAAG,MAAM,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenu } from './useMenu';\nimport { useMenuContextValues } from './useMenuContextValues';\nimport { renderMenu } from './renderMenu';\nimport type { MenuProps } from './Menu.types';\n\n/**\n * Wrapper component that manages state for a popup MenuList and a MenuTrigger\n */\nexport const Menu: React.FC<MenuProps> = props => {\n  const state = useMenu(props);\n  const contextValues = useMenuContextValues(state);\n\n  return renderMenu(state, contextValues);\n};\n\nMenu.displayName = 'Menu';\n"]}