@sanity/ui 0.36.17 → 0.37.0

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,+2LA2Hf,CAAA"}

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

@@ -7,8 +7,8 @@ export interface MenuContextValue {
     onClickOutside?: (event: MouseEvent) => void;
     onEscape?: () => void;
     onItemClick?: () => void;
-    onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
-    onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void;
+    onItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
+    onItemMouseLeave: (event: React.MouseEvent<HTMLElement>) => void;
     registerElement?: (el: HTMLElement) => () => void;
 }
 export declare const MenuContext: React.Context<MenuContextValue | null>;

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,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAChE,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAChE,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"}

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,CAwKpB"}

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.17",
+  "version": "0.37.0",
   "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": "bffa8588fc2167c42afab5d788a69303947099a0"
+  "gitHead": "2622dda034809ec983fdce4c4a25ab054d3c5196"
 }

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

@@ -25,8 +25,8 @@ describe('components/menu', () => {
           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),
+          onItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => console.log(event),
+          onItemMouseLeave: (event: React.MouseEvent<HTMLElement>) => console.log(event),
         }
 
         return (
@@ -38,12 +38,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 +62,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 +92,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>
         )

package/src/components/menu/menu.tsx

@@ -1,11 +1,11 @@
-import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import React, {forwardRef, useCallback, useEffect, useMemo} from 'react'
 import styled from 'styled-components'
-import {useClickOutside, useGlobalKeyDown} from '../../hooks'
+import {useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'
 import {ResponsivePaddingProps} from '../../primitives/types'
 import {useLayer} from '../../utils'
-import {_getFocusableElements, _sortElements} from './helpers'
 import {MenuContext, MenuContextValue} from './menuContext'
+import {useMenuController} from './useMenuController'
 
 /**
  * @public
@@ -39,7 +39,7 @@ const Root = styled(Box)`
  */
 export const Menu = forwardRef(function Menu(
   props: MenuProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex'>,
-  ref
+  ref: React.ForwardedRef<HTMLDivElement>
 ) {
   const {
     children,
@@ -60,221 +60,35 @@ export const Menu = forwardRef(function Menu(
     ...restProps
   } = props
 
+  const forwardedRef = useForwardedRef(ref)
+
   const {isTopLayer} = useLayer()
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const elementsRef = useRef<HTMLElement[]>([])
-  const [activeIndex, setActiveIndex] = useState(-1)
-  const activeIndexRef = useRef(activeIndex)
-  const activeElement = elementsRef.current[activeIndex] || null
-  const activeElementRef = useRef<HTMLElement | null>(activeElement)
-  const mounted = Boolean(rootElement)
 
-  const setRef = useCallback(
+  const {
+    activeElement,
+    activeIndex,
+    handleItemMouseEnter,
+    handleItemMouseLeave,
+    handleKeyDown,
+    mount,
+    rootElement,
+    setRootElement,
+  } = useMenuController({onKeyDown, originElement, shouldFocus})
+
+  const handleRefChange = useCallback(
     (el: HTMLDivElement | null) => {
       setRootElement(el)
-      if (typeof ref === 'function') ref(el)
-      else if (ref) ref.current = el
-    },
-    [ref]
-  )
-
-  const mount = useCallback(
-    (element: HTMLElement | null, selected?: boolean): (() => void) => {
-      if (!element) return () => undefined
-
-      if (elementsRef.current.indexOf(element) === -1) {
-        elementsRef.current.push(element)
-        _sortElements(rootElement, elementsRef.current)
-      }
-
-      if (selected) {
-        const selectedIndex = elementsRef.current.indexOf(element)
-
-        setActiveIndex(selectedIndex)
-        activeIndexRef.current = selectedIndex
-      }
-
-      return () => {
-        const idx = elementsRef.current.indexOf(element)
-
-        if (idx > -1) {
-          elementsRef.current.splice(idx, 1)
-        }
-      }
-    },
-    [rootElement]
-  )
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      // Move focus to the element that opened the menu before handling the `Tab` press
-      if (event.key === 'Tab') {
-        if (originElement) {
-          originElement.focus()
-        }
-
-        return
-      }
-
-      // Move focus to the first focusable menuitem
-      if (event.key === 'Home') {
-        event.preventDefault()
-        event.stopPropagation()
-
-        const focusableElements = _getFocusableElements(elementsRef.current)
-        const el = focusableElements[0]
-
-        if (!el) return
-
-        const currentIndex = elementsRef.current.indexOf(el)
-
-        setActiveIndex(currentIndex)
-        activeIndexRef.current = currentIndex
-
-        return
-      }
-
-      // Move focus to the last focusable menuitem
-      if (event.key === 'End') {
-        event.preventDefault()
-        event.stopPropagation()
-
-        const focusableElements = _getFocusableElements(elementsRef.current)
-        const el = focusableElements[focusableElements.length - 1]
-
-        if (!el) return
-
-        const currentIndex = elementsRef.current.indexOf(el)
-
-        setActiveIndex(currentIndex)
-        activeIndexRef.current = currentIndex
-
-        return
-      }
-
-      if (event.key === 'ArrowUp') {
-        event.preventDefault()
-        event.stopPropagation()
-
-        const focusableElements = _getFocusableElements(elementsRef.current)
-        const focusableLen = focusableElements.length
-
-        if (focusableLen === 0) return
-
-        const focusedElement = elementsRef.current[activeIndex]
-
-        let focusedIndex = focusableElements.indexOf(focusedElement)
-
-        focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen
-
-        const el = focusableElements[focusedIndex]
-        const currentIndex = elementsRef.current.indexOf(el)
-
-        setActiveIndex(currentIndex)
-        activeIndexRef.current = currentIndex
-
-        return
-      }
-
-      if (event.key === 'ArrowDown') {
-        event.preventDefault()
-        event.stopPropagation()
-
-        const focusableElements = _getFocusableElements(elementsRef.current)
-        const focusableLen = focusableElements.length
-
-        if (focusableLen === 0) return
-
-        const focusedElement = elementsRef.current[activeIndex]
-
-        let focusedIndex = focusableElements.indexOf(focusedElement)
-
-        focusedIndex = (focusedIndex + 1) % focusableLen
-
-        const el = focusableElements[focusedIndex]
-        const currentIndex = elementsRef.current.indexOf(el)
-
-        setActiveIndex(currentIndex)
-        activeIndexRef.current = currentIndex
-
-        return
-      }
-
-      if (onKeyDown) {
-        onKeyDown(event)
-      }
+      forwardedRef.current = el
     },
-    [activeIndex, onKeyDown, originElement]
+    [forwardedRef, setRootElement]
   )
 
-  const handleItemMouseEnter = useCallback((event: React.MouseEvent<HTMLElement>) => {
-    const element = event.currentTarget
-    const currentIndex = elementsRef.current.indexOf(element)
-
-    setActiveIndex(currentIndex)
-    activeIndexRef.current = currentIndex
-  }, [])
-
-  const handleItemMouseLeave = useCallback(() => {
-    rootElement?.focus()
-    setActiveIndex(-1)
-    activeIndexRef.current = -1
-  }, [rootElement])
-
   // Trigger `onItemSelect` when active index changes
   useEffect(() => {
     if (onItemSelect) onItemSelect(activeIndex)
   }, [activeIndex, onItemSelect])
 
-  useEffect(() => {
-    activeElementRef.current = activeElement
-  }, [activeElement])
-
-  // Set focus on the currently active element
-  useEffect(() => {
-    if (!mounted) return
-
-    const rafId = window.requestAnimationFrame(() => {
-      const _activeIndex = activeIndexRef.current
-
-      if (_activeIndex === -1) {
-        if (shouldFocus === 'first') {
-          const focusableElements = _getFocusableElements(elementsRef.current)
-          const el = focusableElements[0]
-
-          if (el) {
-            const currentIndex = elementsRef.current.indexOf(el)
-
-            setActiveIndex(currentIndex)
-            activeIndexRef.current = currentIndex
-          }
-        }
-
-        if (shouldFocus === 'last') {
-          const focusableElements = _getFocusableElements(elementsRef.current)
-          const el = focusableElements[focusableElements.length - 1]
-
-          if (el) {
-            const currentIndex = elementsRef.current.indexOf(el)
-
-            setActiveIndex(currentIndex)
-            activeIndexRef.current = currentIndex
-          }
-        }
-
-        return
-      }
-
-      const element = elementsRef.current[_activeIndex] || null
-
-      element?.focus()
-    })
-
-    return () => {
-      window.cancelAnimationFrame(rafId)
-    }
-  }, [activeIndex, mounted, shouldFocus])
-
+  // Close menu when clicking outside
   useClickOutside(
     useCallback(
       (event) => isTopLayer && onClickOutside && onClickOutside(event),
@@ -283,6 +97,7 @@ export const Menu = forwardRef(function Menu(
     [rootElement]
   )
 
+  // Close menu when pressing Escape
   useGlobalKeyDown(
     useCallback(
       (event) => {
@@ -297,6 +112,7 @@ export const Menu = forwardRef(function Menu(
     )
   )
 
+  // Register root element (for nested menus)
   useEffect(() => {
     if (!rootElement || !registerElement) return
 
@@ -311,9 +127,9 @@ export const Menu = forwardRef(function Menu(
       mount,
       onClickOutside,
       onEscape,
-      onMouseEnter: handleItemMouseEnter,
-      onMouseLeave: handleItemMouseLeave,
       onItemClick,
+      onItemMouseEnter: handleItemMouseEnter,
+      onItemMouseLeave: handleItemMouseLeave,
       registerElement,
     }),
     [
@@ -336,7 +152,7 @@ export const Menu = forwardRef(function Menu(
         {...restProps}
         onKeyDown={handleKeyDown}
         padding={padding}
-        ref={setRef}
+        ref={handleRefChange}
         role="menu"
         tabIndex={-1}
       >

package/src/components/menu/menuContext.ts

@@ -9,8 +9,8 @@ export interface MenuContextValue {
   onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
-  onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
-  onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void
+  onItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
+  onItemMouseLeave: (event: React.MouseEvent<HTMLElement>) => void
   registerElement?: (el: HTMLElement) => () => void
 }