@sanity/ui 0.36.16 → 0.37.2

package/lib/src/components/autocomplete/autocomplete.d.ts

@@ -40,6 +40,8 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption> {
         content: React.ReactElement | null;
         hidden: boolean;
         inputElement: HTMLInputElement | null;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
     }, ref: React.Ref<HTMLDivElement>) => React.ReactNode;
     renderValue?: (value: string, option?: Option) => string;
     suffix?: React.ReactNode;

package/lib/src/components/autocomplete/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AACA,OAAO,KASN,MAAM,OAAO,CAAA;AAId,OAAO,EAAM,QAAQ,EAAgB,YAAY,EAAyB,MAAM,kBAAkB,CAAA;AAWlG,OAAO,EAAC,2BAA2B,EAAE,sBAAsB,EAAC,MAAM,SAAS,CAAA;AAE3E;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,MAAM,SAAS,sBAAsB;IACtE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAA;IACzD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5C,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,2BAA2B,CAAA;IAClD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC3B,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,cAAc,GAAG,cAAc,GAAG,MAAM,CAAC,CAAA;IAClF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,WAAW,EAAE,CAAA;IAC/B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAA;IACrD;;OAEG;IACH,aAAa,CAAC,EAAE,CACd,KAAK,EAAE;QACL,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;QAClC,MAAM,EAAE,OAAO,CAAA;QACf,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAA;KACtC,EACD,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,KAC3B,KAAK,CAAC,SAAS,CAAA;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACxD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAwjBD;;GAEG;AACH,eAAO,MAAM,YAAY;;MAyBpB,MAAM,YAAY,CAAA"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AACA,OAAO,KASN,MAAM,OAAO,CAAA;AAId,OAAO,EAAM,QAAQ,EAAgB,YAAY,EAAyB,MAAM,kBAAkB,CAAA;AAWlG,OAAO,EAAC,2BAA2B,EAAE,sBAAsB,EAAC,MAAM,SAAS,CAAA;AAE3E;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,MAAM,SAAS,sBAAsB;IACtE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAA;IACzD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5C,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,2BAA2B,CAAA;IAClD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC3B,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,cAAc,GAAG,cAAc,GAAG,MAAM,CAAC,CAAA;IAClF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,WAAW,EAAE,CAAA;IAC/B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAA;IACrD;;OAEG;IACH,aAAa,CAAC,EAAE,CACd,KAAK,EAAE;QACL,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;QAClC,MAAM,EAAE,OAAO,CAAA;QACf,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAA;QACrC,YAAY,EAAE,MAAM,IAAI,CAAA;QACxB,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB,EACD,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,KAC3B,KAAK,CAAC,SAAS,CAAA;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACxD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AA8jBD;;GAEG;AACH,eAAO,MAAM,YAAY;;MAyBpB,MAAM,YAAY,CAAA"}

package/lib/src/components/menu/menu.d.ts

@@ -24,5 +24,5 @@ export interface MenuProps extends ResponsivePaddingProps {
 /**
  * @public
  */
-export declare const Menu: React.ForwardRefExoticComponent<Pick<MenuProps & Omit<React.HTMLProps<HTMLDivElement>, "as" | "height" | "tabIndex" | "role">, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "translate" | "radioGroup" | "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" | "key" | keyof MenuProps> & React.RefAttributes<unknown>>;
+export declare const Menu: React.ForwardRefExoticComponent<Pick<MenuProps & Omit<React.HTMLProps<HTMLDivElement>, "as" | "height" | "tabIndex" | "role">, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "translate" | "radioGroup" | "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" | "key" | keyof MenuProps> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=menu.d.ts.map

package/lib/src/components/menu/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAA;AAI1F,OAAO,EAAC,sBAAsB,EAAC,MAAM,wBAAwB,CAAA;AAK7D;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,sBAAsB;IACvD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAClC,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,MAAM,IAAI,CAAA;IACjD,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAC1B;AAOD;;GAEG;AACH,eAAO,MAAM,IAAI,w2LAmTf,CAAA"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAIxE,OAAO,EAAC,sBAAsB,EAAC,MAAM,wBAAwB,CAAA;AAK7D;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,sBAAsB;IACvD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAClC,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,MAAM,IAAI,CAAA;IACjD,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAC1B;AAOD;;GAEG;AACH,eAAO,MAAM,IAAI,+2LA+Hf,CAAA"}

package/lib/src/components/menu/menuContext.d.ts

@@ -7,9 +7,17 @@ export interface MenuContextValue {
     onClickOutside?: (event: MouseEvent) => void;
     onEscape?: () => void;
     onItemClick?: () => void;
+    onItemMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
+    onItemMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
+    registerElement?: (el: HTMLElement) => () => void;
+    /**
+     * @deprecated Use `onItemMouseEnter` instead
+     */
     onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * @deprecated Use `onItemMouseLeave` instead
+     */
     onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void;
-    registerElement?: (el: HTMLElement) => () => void;
 }
 export declare const MenuContext: React.Context<MenuContextValue | null>;
 //# sourceMappingURL=menuContext.d.ts.map

package/lib/src/components/menu/menuContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuContext.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menuContext.ts"],"names":[],"mappings":";AAGA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,GAAG,CAAA;IACZ,aAAa,EAAE,WAAW,GAAG,IAAI,CAAA;IACjC,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,MAAM,IAAI,CAAA;IACtE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAC5D,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAC5D,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,MAAM,IAAI,CAAA;CAClD;AAMD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAoB,CAAA"}
+{"version":3,"file":"menuContext.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menuContext.ts"],"names":[],"mappings":";AAGA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,GAAG,CAAA;IACZ,aAAa,EAAE,WAAW,GAAG,IAAI,CAAA;IACjC,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,MAAM,IAAI,CAAA;IACtE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IACjE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IACjE,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,MAAM,IAAI,CAAA;IAEjD;;OAEG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAE5D;;OAEG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;CAC7D;AAMD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAoB,CAAA"}

package/lib/src/components/menu/menuGroup.d.ts

@@ -7,9 +7,11 @@ import { SelectableTone } from '../../types/selectable';
 export interface MenuGroupProps {
     as?: React.ElementType | keyof JSX.IntrinsicElements;
     fontSize?: number | number[];
+    icon?: React.ComponentType | React.ReactNode;
     padding?: number | number[];
     popover?: Omit<PopoverProps, 'content' | 'open'>;
     radius?: number | number[];
+    space?: number | number[];
     text: React.ReactNode;
     tone?: SelectableTone;
 }

package/lib/src/components/menu/menuGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menuGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiD,MAAM,OAAO,CAAA;AAErE,OAAO,EAAe,YAAY,EAAO,MAAM,kBAAkB,CAAA;AAEjE,OAAO,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAA;AAIrD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAA;IACpD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC3B,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,CAAC,CAAA;IAChD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAeD;;GAEG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,cAAc,GACnB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC,GAC5E,KAAK,CAAC,YAAY,CAoLpB"}
+{"version":3,"file":"menuGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menuGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgF,MAAM,OAAO,CAAA;AAEpG,OAAO,EAAqB,YAAY,EAAO,MAAM,kBAAkB,CAAA;AAEvE,OAAO,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAA;AAIrD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAA;IACpD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5C,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC3B,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,CAAC,CAAA;IAChD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,cAAc,GACnB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC,GAC5E,KAAK,CAAC,YAAY,CAyKpB"}

package/lib/src/components/menu/menuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuItem.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAA;AAKd,OAAO,EAAC,sBAAsB,EAAE,qBAAqB,EAAC,MAAM,wBAAwB,CAAA;AACpF,OAAO,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAA;AAIrD;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,sBAAsB,EAAE,qBAAqB;IAClF,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAA;IACpD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC5B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAA;IACjD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,iLAsInB,CAAA"}
+{"version":3,"file":"menuItem.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAA;AAKd,OAAO,EAAC,sBAAsB,EAAE,qBAAqB,EAAC,MAAM,wBAAwB,CAAA;AACpF,OAAO,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAA;AAIrD;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,sBAAsB,EAAE,qBAAqB;IAClF,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAA;IACpD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC5B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAA;IACjD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,iLA6InB,CAAA"}

package/lib/src/components/menu/useMenuController.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+/**
+ * @internal
+ */
+export interface MenuController {
+    activeElement: HTMLElement | null;
+    activeIndex: number;
+    handleItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
+    handleItemMouseLeave: () => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    mount: (element: HTMLElement | null, selected?: boolean) => () => void;
+    rootElement: HTMLDivElement | null;
+    setRootElement: (el: HTMLDivElement | null) => void;
+}
+/**
+ * This controller is responsible for controlling UI menu state.
+ *
+ * @internal
+ */
+export declare function useMenuController(props: {
+    onKeyDown?: React.KeyboardEventHandler;
+    originElement?: HTMLElement | null;
+    shouldFocus: 'first' | 'last' | null;
+}): MenuController;
+//# sourceMappingURL=useMenuController.d.ts.map

package/lib/src/components/menu/useMenuController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuController.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/useMenuController.ts"],"names":[],"mappings":";AAGA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,aAAa,EAAE,WAAW,GAAG,IAAI,CAAA;IACjC,WAAW,EAAE,MAAM,CAAA;IACnB,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IACpE,oBAAoB,EAAE,MAAM,IAAI,CAAA;IAChC,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;IACnE,KAAK,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,MAAM,IAAI,CAAA;IACtE,WAAW,EAAE,cAAc,GAAG,IAAI,CAAA;IAClC,cAAc,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAA;CACpD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAA;IACtC,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAClC,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAAA;CACrC,GAAG,cAAc,CAoNjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "0.36.16",
+  "version": "0.37.2",
   "sideEffects": false,
   "source": "src/index.ts",
   "exports": {
@@ -29,11 +29,11 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@popperjs/core": "^2.10.2",
+    "@popperjs/core": "^2.11.2",
     "@reach/auto-id": "^0.16.0",
     "@sanity/color": "^2.1.6",
-    "@sanity/icons": "^1.2.2",
-    "framer-motion": "5.3.3",
+    "@sanity/icons": "^1.2.3",
+    "framer-motion": "5.5.5",
     "lodash": "^4.17.21",
     "popper-max-size-modifier": "^0.2.0",
     "react-is": "^17.0.2",
@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@testing-library/dom": "^8.11.1",
-    "@testing-library/jest-dom": "^5.15.1",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@types/refractor": "^3.0.2",
     "react": "^17.0.2",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ae8fa191ffc390ff27427d393451a181c381c399"
+  "gitHead": "4aa7b389d7379a58ed02977022ec00f7e0114711"
 }

package/src/components/autocomplete/__workshop__/fullscreen.tsx

@@ -81,13 +81,22 @@ export default function Fullscreen() {
   }, [])
 
   const renderPopover = useCallback(
-    (props: {content: React.ReactNode; hidden: boolean}, ref: React.Ref<HTMLDivElement>) => {
+    (
+      props: {
+        content: React.ReactNode
+        hidden: boolean
+        onMouseEnter: () => void
+        onMouseLeave: () => void
+      },
+      ref: React.Ref<HTMLDivElement>
+    ) => {
       if (!props.hidden && error) {
         return (
           <Portal>
             <Card
+              onMouseEnter={props.onMouseEnter}
+              onMouseLeave={props.onMouseLeave}
               padding={4}
-              scheme="light"
               style={{position: 'absolute', inset: '0 0 0 0'}}
               tone="critical"
             >
@@ -104,7 +113,12 @@ export default function Fullscreen() {
       if (!props.hidden && query && !loading && options.length === 0) {
         return (
           <Portal>
-            <Card padding={4} scheme="light" style={{position: 'absolute', inset: '0 0 0 0'}}>
+            <Card
+              onMouseEnter={props.onMouseEnter}
+              onMouseLeave={props.onMouseLeave}
+              padding={4}
+              style={{position: 'absolute', inset: '0 0 0 0'}}
+            >
               <Flex align="center" height="fill" justify="center">
                 <Text align="center" muted>
                   No results for <strong>‘{query}’</strong>
@@ -117,7 +131,12 @@ export default function Fullscreen() {
 
       return (
         <Portal>
-          <Card hidden={props.hidden} ref={ref} scheme="light">
+          <Card
+            hidden={props.hidden}
+            onMouseEnter={props.onMouseEnter}
+            onMouseLeave={props.onMouseLeave}
+            ref={ref}
+          >
             {props.content}
           </Card>
         </Portal>
@@ -158,7 +177,7 @@ export default function Fullscreen() {
     <Card style={{display: 'flex', flexDirection: 'column', minHeight: '100%'}} tone="transparent">
       <PortalProvider element={portalElement}>
         <Flex direction="column" flex={1} height="fill">
-          <Card hidden={open} padding={2} scheme="dark">
+          <Card hidden={open} padding={2}>
             <Flex align="center">
               <Box flex={1} />
               <Button

package/src/components/autocomplete/autocomplete.tsx

@@ -65,6 +65,8 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption> {
       content: React.ReactElement | null
       hidden: boolean
       inputElement: HTMLInputElement | null
+      onMouseEnter: () => void
+      onMouseLeave: () => void
     },
     ref: React.Ref<HTMLDivElement>
   ) => React.ReactNode
@@ -586,7 +588,13 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const results = useMemo(() => {
     if (renderPopover) {
       return renderPopover(
-        {content, hidden: !expanded, inputElement: inputElementRef.current},
+        {
+          content,
+          hidden: !expanded,
+          inputElement: inputElementRef.current,
+          onMouseEnter: handlePopoverMouseEnter,
+          onMouseLeave: handlePopoverMouseLeave,
+        },
         setResultsPopoverElement
       )
     }

package/src/components/menu/__workshop__/index.ts

@@ -22,6 +22,11 @@ export default defineScope('components/menu', 'Menu', [
     title: 'Groups',
     component: lazy(() => import('./groups')),
   },
+  {
+    name: 'menu-group-right',
+    title: 'Menu group (right)',
+    component: lazy(() => import('./menuGroupRight')),
+  },
   {
     name: 'tones',
     title: 'Tones',

package/src/components/menu/__workshop__/menuGroupRight.tsx

@@ -0,0 +1,59 @@
+import {
+  AddIcon,
+  BookIcon,
+  CopyIcon,
+  EllipsisVerticalIcon,
+  ImageIcon,
+  TrashIcon,
+} from '@sanity/icons'
+import {
+  Box,
+  Button,
+  Card,
+  Container,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuGroup,
+  MenuItem,
+} from '@sanity/ui'
+import React from 'react'
+
+export default function MenuGroupRightStory() {
+  return (
+    <Card height="fill" tone="transparent">
+      <Flex align="center" height="fill" padding={4} sizing="border">
+        <Container width={1}>
+          <Card padding={2} radius={2} shadow={2}>
+            <Flex>
+              <Box flex={1} />
+              <Box>
+                <MenuButton
+                  button={<Button icon={EllipsisVerticalIcon} mode="bleed" />}
+                  id="right-menu"
+                  menu={
+                    <Menu>
+                      <MenuGroup icon={AddIcon} popover={{placement: 'left'}} text="Add above">
+                        <MenuItem icon={ImageIcon} text="Image" />
+                        <MenuItem icon={BookIcon} text="Book" />
+                      </MenuGroup>
+                      <MenuGroup icon={AddIcon} popover={{placement: 'left'}} text="Add below">
+                        <MenuItem icon={ImageIcon} text="Image" />
+                        <MenuItem icon={BookIcon} text="Book" />
+                      </MenuGroup>
+                      <MenuDivider />
+                      <MenuItem icon={CopyIcon} text="Duplicate" />
+                      <MenuItem icon={TrashIcon} text="Remove" tone="critical" />
+                    </Menu>
+                  }
+                  popover={{placement: 'right', portal: true}}
+                />
+              </Box>
+            </Flex>
+          </Card>
+        </Container>
+      </Flex>
+    </Card>
+  )
+}

package/src/components/menu/menu.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 
-import React from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {render} from '../../../test'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'
@@ -19,15 +19,30 @@ describe('components/menu', () => {
       }
 
       function Root() {
-        const value: MenuContextValue = {
-          version: 0.0,
-          activeElement: null,
-          activeIndex: 0,
-          mount: (element: HTMLElement | null) => () => console.log(element),
-          onItemClick: () => undefined,
-          onMouseEnter: (event: React.MouseEvent<HTMLElement>) => console.log(event),
-          onMouseLeave: (event: React.MouseEvent<HTMLElement>) => console.log(event),
-        }
+        const handleItemMouseEnter = useCallback(
+          (event: React.MouseEvent<HTMLElement>) => console.log(event),
+          []
+        )
+
+        const handleItemMouseLeave = useCallback(
+          (event: React.MouseEvent<HTMLElement>) => console.log(event),
+          []
+        )
+
+        const value: MenuContextValue = useMemo(
+          () => ({
+            version: 0.0,
+            activeElement: null,
+            activeIndex: 0,
+            mount: (element: HTMLElement | null) => () => console.log(element),
+            onItemClick: () => undefined,
+            onItemMouseEnter: handleItemMouseEnter,
+            onItemMouseLeave: handleItemMouseLeave,
+            onMouseEnter: handleItemMouseEnter,
+            onMouseLeave: handleItemMouseLeave,
+          }),
+          [handleItemMouseEnter, handleItemMouseLeave]
+        )
 
         return (
           <MenuContext.Provider value={value}>
@@ -38,12 +53,14 @@ describe('components/menu', () => {
 
       render(<Root />)
 
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].activeIndex).toBe(0)
-      expect(typeof log.mock.calls[0][0].mount).toBe('function')
-      expect(typeof log.mock.calls[0][0].onItemClick).toBe('function')
-      expect(typeof log.mock.calls[0][0].onMouseEnter).toBe('function')
-      expect(typeof log.mock.calls[0][0].onMouseLeave).toBe('function')
+      const contextValue = log.mock.calls[0][0]
+
+      expect(contextValue.version).toBe(0.0)
+      expect(contextValue.activeIndex).toBe(0)
+      expect(typeof contextValue.mount).toBe('function')
+      expect(typeof contextValue.onItemClick).toBe('function')
+      expect(typeof contextValue.onItemMouseEnter).toBe('function')
+      expect(typeof contextValue.onItemMouseEnter).toBe('function')
     })
 
     it('should fail when no context value is provided', async () => {
@@ -60,10 +77,11 @@ describe('components/menu', () => {
       }
 
       function Root() {
-        const value = undefined
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const value: any = undefined
 
         return (
-          <MenuContext.Provider value={value as any}>
+          <MenuContext.Provider value={value}>
             <Debug />
           </MenuContext.Provider>
         )
@@ -89,12 +107,13 @@ describe('components/menu', () => {
 
       function Root() {
         // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const value: any = () => {
           return {version: 1}
         }
 
         return (
-          <MenuContext.Provider value={value as any}>
+          <MenuContext.Provider value={value}>
             <Debug />
           </MenuContext.Provider>
         )