fix: More fixes related to the Ariakit upgrade (#818)

* fix: Reset anchor rect after context menu is closed
* fix: Revert earlier attempt to auto-close menus when they lose focus
* Prepare new release

Author: gnapse

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v24.1.2-beta
+
+-   [Fix] Reset anchor rect after context menu is closed.
+-   [Fix] Revert earlier attempt to auto-close menus when they lose focus.
+
 # v24.1.1-beta
 
 -   [Fix] It was possible to leave a tooltip in a state in which it remained visible all the time. This release fixes the issue.

package-lock.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "24.1.1-beta",
+    "version": "24.1.2-beta",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

package.json

@@ -126,6 +126,11 @@ const ContextMenuTrigger = polymorphicComponent<'div', unknown>(function Context
         [setAnchorRect, menuStore],
     )
 
+    const isOpen = menuStore.useState('open')
+    React.useEffect(() => {
+        if (!isOpen) setAnchorRect(null)
+    }, [isOpen, setAnchorRect])
+
     return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })
 })
 
@@ -156,12 +161,6 @@ const MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(
                 className={classNames('reactist_menulist', exceptionallySetClassName)}
                 getAnchorRect={getAnchorRect ?? undefined}
                 modal={modal}
-                onBlur={(event) => {
-                    if (!event.relatedTarget) return
-                    if (event.currentTarget.contains(event.relatedTarget)) return
-                    if (event.relatedTarget?.closest('[role^="menu"]')) return
-                    menuStore.hide()
-                }}
             />
         </Portal>
     ) : null
@@ -178,17 +177,20 @@ type MenuItemProps = {
      * `onSelect` callbacks to each menu item.
      */
     value?: string
+
     /**
      * The content inside the menu item.
      */
     children: React.ReactNode
+
     /**
      * When `true` the menu item is disabled and won't be selectable or be part of the keyboard
      * navigation across the menu options.
      *
      * @default true
      */
     disabled?: boolean
+
     /**
      * When `true` the menu will close when the menu item is selected, in addition to performing the
      * action that the menu item is set out to do.
@@ -199,6 +201,7 @@ type MenuItemProps = {
      * @default true
      */
     hideOnSelect?: boolean
+
     /**
      * The action to perform when the menu item is selected.
      *
@@ -207,6 +210,7 @@ type MenuItemProps = {
      * achieve the same effect conditionally and dynamically deciding at run time.
      */
     onSelect?: () => unknown
+
     /**
      * The event handler called when the menu item is clicked.
      *
@@ -305,7 +309,7 @@ const SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(
 
     const handleSubItemSelect = React.useCallback(
         function handleSubItemSelect(value: string | null | undefined) {
-            if (onItemSelect) onItemSelect(value)
+            onItemSelect?.(value)
             parentMenuItemSelect?.(value)
             parentMenuHide()
         },
@@ -314,8 +318,7 @@ const SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(
 
     const [button, list] = React.Children.toArray(children)
 
-    // Ariakit needs to be able to pass props to the MenuButton
-    // and combine it with the MenuItem component
+    // Ariakit needs to be able to pass props to the MenuButton and combine it with the MenuItem component
     const renderMenuButton = React.useCallback(
         function renderMenuButton(props: MenuButtonProps) {
             return React.cloneElement(button as React.ReactElement, props)