@7shifts/sous-chef 4.5.0 → 4.5.1

package/dist/index.js

@@ -11431,19 +11431,29 @@ var DropdownSubmenu = React.forwardRef(function (_ref, ref) {
     left: -9999,
     visibility: 'hidden'
   };
-  return React__default["default"].createElement("div", {
-    className: styles$1g['dropdown-submenu'],
-    "data-submenu-direction": direction,
-    style: position || DEFAULT_POSITION,
-    onMouseEnter: openSubmenu,
-    onFocus: openSubmenu,
-    onMouseDown: function onMouseDown(e) {
-      return 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["default"].createElement("div", {
+      className: styles$1g['dropdown-submenu'],
+      "data-submenu-direction": direction,
+      style: position || DEFAULT_POSITION,
+      onMouseEnter: openSubmenu,
+      onFocus: openSubmenu,
+      onMouseDown: function onMouseDown(e) {
+        return e.stopPropagation();
+      },
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      role: "menu",
+      tabIndex: -1,
+      ref: ref
+    }, children)
+  );
 });
 
 var useSubmenu = function useSubmenu(_ref) {
@@ -11601,6 +11611,16 @@ var DropdownListItem = function DropdownListItem(_ref) {
     }
   };
   var handleClick = function 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) {
+      var _target = e.target;
+      var isFromFormControl = _target.closest('input, textarea, select, [contenteditable="true"]') !== null;
+      if (isFromFormControl || e.key !== 'Enter' && e.key !== ' ') {
+        return;
+      }
+    }
     e.stopPropagation();
     if (disabled) {
       return;
@@ -11613,7 +11633,6 @@ var DropdownListItem = function DropdownListItem(_ref) {
         return;
       } else {
         notifySubmenuOpened();
-        return;
       }
     }
     if (!isSelectable) {
@@ -11730,6 +11749,9 @@ var canInteractWithItem = function canInteractWithItem(child) {
   }
   return !child.props.disabled || false;
 };
+var isDivider = function isDivider(child) {
+  return getItemType(child) === 'DropdownListDivider';
+};
 var getItemType = function getItemType(child) {
   var isDropdownListDivider = checkIsComponent(child, {
     component: DropdownListDivider,
@@ -11767,6 +11789,7 @@ var DropdownList = function DropdownList(_ref) {
     }
     return {
       disabled: !canInteractWithItem(child),
+      divider: isDivider(child),
       onClick: child.props.onClick,
       href: child.props.href,
       submenu: child.props.submenu
@@ -11808,14 +11831,19 @@ var DropdownList = function DropdownList(_ref) {
     "data-testid": testId,
     ref: listRef
   }, React__default["default"].Children.toArray(children).filter(Boolean).map(function (child, index) {
-    var _classNames;
+    var _items$index, _items$index2, _classNames;
+    // 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).
+    var isInteractive = !((_items$index = items[index]) != null && _items$index.disabled);
+    var divider = (_items$index2 = items[index]) == null ? void 0 : _items$index2.divider;
     return React__default["default"].createElement("li", {
       key: index,
-      className: classnames__default["default"](styles$1j['dropdown-list__item'], (_classNames = {}, _classNames[styles$1j['dropdown-list__item--hover']] = focusedItem === index, _classNames)),
-      onMouseEnter: function onMouseEnter() {
+      className: classnames__default["default"](styles$1j['dropdown-list__item'], (_classNames = {}, _classNames[styles$1j['dropdown-list__item--hover']] = focusedItem === index && isInteractive, _classNames)),
+      onMouseEnter: divider ? undefined : function () {
         return setFocusOnItem(index);
       },
-      role: "menuitem"
+      role: divider ? 'separator' : 'menuitem'
     }, child);
   }));
 };