@7shifts/sous-chef 4.5.0 → 4.5.1

package/dist/index.modern.js

@@ -11442,17 +11442,25 @@ const DropdownSubmenu = forwardRef(({
     left: -9999,
     visibility: 'hidden'
   };
-  return React__default.createElement("div", {
-    className: styles$1g['dropdown-submenu'],
-    "data-submenu-direction": direction,
-    style: position || DEFAULT_POSITION,
-    onMouseEnter: openSubmenu,
-    onFocus: openSubmenu,
-    onMouseDown: e => e.stopPropagation(),
-    role: "menu",
-    tabIndex: -1,
-    ref: ref
-  }, children);
+  return (
+    // Stop clicks on submenu content (e.g. form inputs) from bubbling
+    // up to the parent DropdownListItem, which would otherwise close
+    // the dropdown. The click handler is purely a propagation guard,
+    // so no keyboard handler is needed.
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React__default.createElement("div", {
+      className: styles$1g['dropdown-submenu'],
+      "data-submenu-direction": direction,
+      style: position || DEFAULT_POSITION,
+      onMouseEnter: openSubmenu,
+      onFocus: openSubmenu,
+      onMouseDown: e => e.stopPropagation(),
+      onClick: e => e.stopPropagation(),
+      role: "menu",
+      tabIndex: -1,
+      ref: ref
+    }, children)
+  );
 });
 
 const useSubmenu = ({
@@ -11604,6 +11612,16 @@ const DropdownListItem = ({
     }
   };
   const handleClick = e => {
+    // Keyboard events can bubble up from form controls rendered inside a
+    // submenu. Ignore them so typing in a form doesn't activate the item
+    // (or its submenu). Only Enter/Space should activate the item itself.
+    if ('key' in e) {
+      const target = e.target;
+      const isFromFormControl = target.closest('input, textarea, select, [contenteditable="true"]') !== null;
+      if (isFromFormControl || e.key !== 'Enter' && e.key !== ' ') {
+        return;
+      }
+    }
     e.stopPropagation();
     if (disabled) {
       return;
@@ -11616,7 +11634,6 @@ const DropdownListItem = ({
         return;
       } else {
         notifySubmenuOpened();
-        return;
       }
     }
     if (!_isSelectable) {
@@ -11735,6 +11752,7 @@ const canInteractWithItem = child => {
   }
   return !child.props.disabled || false;
 };
+const isDivider = child => getItemType(child) === 'DropdownListDivider';
 const getItemType = child => {
   const isDropdownListDivider = checkIsComponent(child, {
     component: DropdownListDivider,
@@ -11774,6 +11792,7 @@ const DropdownList = ({
     }
     return {
       disabled: !canInteractWithItem(child),
+      divider: isDivider(child),
       onClick: child.props.onClick,
       href: child.props.href,
       submenu: child.props.submenu
@@ -11816,13 +11835,19 @@ const DropdownList = ({
     "data-testid": testId,
     ref: listRef
   }, React__default.Children.toArray(children).filter(Boolean).map((child, index) => {
+    var _items$index, _items$index2;
+    // A stale `focusedItem` index can drift onto a divider when
+    // the list re-renders with different items, so gate the
+    // highlight on the row being interactive (never a divider).
+    const isInteractive = !((_items$index = items[index]) != null && _items$index.disabled);
+    const divider = (_items$index2 = items[index]) == null ? void 0 : _items$index2.divider;
     return React__default.createElement("li", {
       key: index,
       className: classnames(styles$1j['dropdown-list__item'], {
-        [styles$1j['dropdown-list__item--hover']]: focusedItem === index
+        [styles$1j['dropdown-list__item--hover']]: focusedItem === index && isInteractive
       }),
-      onMouseEnter: () => setFocusOnItem(index),
-      role: "menuitem"
+      onMouseEnter: divider ? undefined : () => setFocusOnItem(index),
+      role: divider ? 'separator' : 'menuitem'
     }, child);
   }));
 };