@momentum-design/components 0.92.0 → 0.92.1

package/dist/custom-elements.json

@@ -8554,6 +8554,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "attribute": "boundary-padding",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "interactive",
@@ -9235,6 +9250,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "fieldName": "boundaryPadding",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
@@ -15800,7 +15828,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.",
+              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.\n\nThis follows the native behaviour, actionable element can be triggered by Enter\nkey on the keydown event.\n\nNote: Action triggered by Space on the keyup event.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -15824,7 +15852,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page."
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event."
             },
             {
               "kind": "method",
@@ -16660,7 +16688,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.",
+              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.\n\nThis follows the native behaviour, actionable element can be triggered by Enter\nkey on the keydown event.\n\nNote: Action triggered by Space on the keyup event.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16684,7 +16712,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.",
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
               "inheritedFrom": {
                 "name": "MenuItem",
                 "module": "components/menuitem/menuitem.component.js"
@@ -17574,7 +17602,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.",
+              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.\n\nThis follows the native behaviour, actionable element can be triggered by Enter\nkey on the keydown event.\n\nNote: Action triggered by Space on the keyup event.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -17598,7 +17626,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.",
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
               "inheritedFrom": {
                 "name": "MenuItem",
                 "module": "components/menuitem/menuitem.component.js"
@@ -18279,7 +18307,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A popover menu component that displays a list of menu items in a floating container.\nIt's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\naccessible, nested menu structures with the following features:\n- Appears adjacent to the triggering menu item\n- Supports keyboard navigation (arrow keys, Home, End)\n- Manages focus trapping when open\n- Closes on Escape key or outside click\n- Supports both mouse and keyboard interactions\n- Automatically handles ARIA attributes for accessibility\n\nThe component extends `mdc-popover` and adds menu-specific behaviors and styling.\nWhen nested within another `mdc-menupopover`, it automatically adjusts its behavior\nto work as a submenu (right-aligned, shows on hover).\n\nThe orientation of the menu popover is always set to `vertical`.",
+          "description": "A popover menu component that displays a list of menu items in a floating container.\nIt's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\naccessible, nested menu structures with the following features:\n- Appears adjacent to the triggering menu item\n- Supports keyboard navigation (arrow keys, Home, End)\n- Manages focus trapping when open\n- Closes on Escape key or outside click\n- Supports both mouse and keyboard interactions\n- Automatically handles ARIA attributes for accessibility\n\nThe component extends `mdc-popover` and adds menu-specific behaviors and styling.\nWhen nested within another `mdc-menupopover`, it automatically adjusts its behavior\nto work as a submenu (right-aligned, shows on hover).\n\nThe orientation of the menu popover is always set to `vertical`.\n\nSubmenu opens when:\n- Clicked on a menu item with a submenu\n- Enter or Space key pressed on a menu item with a submenu\n\nMenu closes completely (with all sub menus) when:\n- A menu item is clicked that does not have a submenu\n- Enter key pressed on a menu item (not a submenu trigger), menu item radio or menu item checkbox\n- Click outside the menu popover (on the backdrop)\n\nClose submenus when:\n- Esc key pressed, only the current submenu closed\n- Arrow Left key pressed, only the current submenu closed\n- Open another submenu with Click, Enter or Space key,\n  closes recursively all submenus until the selected item's submenu\n\nMenu does not close when:\n- Space key pressed on a menu item radio or menu item checkbox",
           "name": "MenuPopover",
           "slots": [
             {
@@ -18311,6 +18339,15 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "menuItems",
+              "type": {
+                "text": "Array<HTMLElement>"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
             {
               "kind": "method",
               "name": "isOpenUpdated",
@@ -18340,6 +18377,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "resetTabIndexes",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused menu item."
+                }
+              ],
+              "description": "Reset all tabindex to -1 and set the tabindex of the current menu item to 0"
+            },
             {
               "kind": "method",
               "name": "getCurrentIndex",
@@ -18454,6 +18506,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "closeMenu",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The target element that was clicked."
+                }
+              ],
+              "description": "Determines whether to close the menu based on the clicked target."
+            },
             {
               "kind": "method",
               "name": "handleMouseClick",
@@ -18514,7 +18581,27 @@
                   "description": "The keyboard event that triggered the keydown action."
                 }
               ],
-              "description": "Handles keydown events for keyboard navigation within the menu popover.\nThis method allows users to navigate through the menu items using the keyboard.\nIt supports Home, End, Arrow Up, Arrow Down, Arrow Left, Arrow Right, and Escape keys.",
+              "description": "Handles keydown events for keyboard navigation within the menu popover.\nThis method allows users to navigate through the menu items using the keyboard.\nIt supports Home, End, Arrow Up, Arrow Down, Arrow Left, Arrow Right, and Escape keys.\n\nAlso, it handles Enter key to close the menu popover",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event that triggered the keydown action."
+                }
+              ],
+              "description": "Handles keyup events for keyboard navigation within the menu popover.\n\nSome keys must be handled with keyup event to prevent default action.\n\nSpace key closes the menu when the user presses it on a menu item,\nbut the same key will trigger a click on the menu opener button.\nThe button uses the keyup event so we have to handle it here as well\nto prevent the meu opener action which would re-open the menu.",
               "return": {
                 "type": {
                   "text": ""
@@ -19157,6 +19244,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "attribute": "boundary-padding",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "showArrow",
@@ -19802,6 +19904,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "fieldName": "boundaryPadding",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
@@ -20094,7 +20209,7 @@
             "module": "/src/components/popover/popover.component"
           },
           "tagName": "mdc-menupopover",
-          "jsDoc": "/**\n * A popover menu component that displays a list of menu items in a floating container.\n * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\n * accessible, nested menu structures with the following features:\n * - Appears adjacent to the triggering menu item\n * - Supports keyboard navigation (arrow keys, Home, End)\n * - Manages focus trapping when open\n * - Closes on Escape key or outside click\n * - Supports both mouse and keyboard interactions\n * - Automatically handles ARIA attributes for accessibility\n *\n * The component extends `mdc-popover` and adds menu-specific behaviors and styling.\n * When nested within another `mdc-menupopover`, it automatically adjusts its behavior\n * to work as a submenu (right-aligned, shows on hover).\n *\n * The orientation of the menu popover is always set to `vertical`.\n *\n * @tagname mdc-menupopover\n *\n * @slot - Default slot for the menu popover content\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n * @event action - (React: onAction) This event is dispatched when a menuItem selected and the menu closes.\n *\n * @slot default - Contains the menu items to be displayed in the popover\n */",
+          "jsDoc": "/**\n * A popover menu component that displays a list of menu items in a floating container.\n * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\n * accessible, nested menu structures with the following features:\n * - Appears adjacent to the triggering menu item\n * - Supports keyboard navigation (arrow keys, Home, End)\n * - Manages focus trapping when open\n * - Closes on Escape key or outside click\n * - Supports both mouse and keyboard interactions\n * - Automatically handles ARIA attributes for accessibility\n *\n * The component extends `mdc-popover` and adds menu-specific behaviors and styling.\n * When nested within another `mdc-menupopover`, it automatically adjusts its behavior\n * to work as a submenu (right-aligned, shows on hover).\n *\n * The orientation of the menu popover is always set to `vertical`.\n *\n * Submenu opens when:\n * - Clicked on a menu item with a submenu\n * - Enter or Space key pressed on a menu item with a submenu\n *\n * Menu closes completely (with all sub menus) when:\n * - A menu item is clicked that does not have a submenu\n * - Enter key pressed on a menu item (not a submenu trigger), menu item radio or menu item checkbox\n * - Click outside the menu popover (on the backdrop)\n *\n * Close submenus when:\n * - Esc key pressed, only the current submenu closed\n * - Arrow Left key pressed, only the current submenu closed\n * - Open another submenu with Click, Enter or Space key,\n *   closes recursively all submenus until the selected item's submenu\n *\n * Menu does not close when:\n * - Space key pressed on a menu item radio or menu item checkbox\n *\n * @tagname mdc-menupopover\n *\n * @slot - Default slot for the menu popover content\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n * @event action - (React: onAction) This event is dispatched when a menuItem selected and the menu closes.\n *\n * @slot default - Contains the menu items to be displayed in the popover\n */",
           "customElement": true,
           "cssProperties": [
             {
@@ -20659,7 +20774,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.",
+              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.\n\nThis follows the native behaviour, actionable element can be triggered by Enter\nkey on the keydown event.\n\nNote: Action triggered by Space on the keyup event.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -20683,7 +20798,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.",
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
               "inheritedFrom": {
                 "name": "MenuItem",
                 "module": "components/menuitem/menuitem.component.js"
@@ -23856,6 +23971,17 @@
               "attribute": "offset",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "attribute": "boundary-padding",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "focusTrap",
@@ -24876,6 +25002,15 @@
               "default": "4",
               "fieldName": "offset"
             },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "fieldName": "boundaryPadding"
+            },
             {
               "name": "focus-trap",
               "type": {
@@ -34370,6 +34505,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "attribute": "boundary-padding",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "showArrow",
@@ -35065,6 +35215,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "fieldName": "boundaryPadding",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
@@ -36221,6 +36384,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "attribute": "boundary-padding",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "showArrow",
@@ -36917,6 +37095,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "fieldName": "boundaryPadding",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {

package/dist/react/menupopover/index.d.ts

@@ -17,6 +17,24 @@ import Component from '../../components/menupopover';
  *
  * The orientation of the menu popover is always set to `vertical`.
  *
+ * Submenu opens when:
+ * - Clicked on a menu item with a submenu
+ * - Enter or Space key pressed on a menu item with a submenu
+ *
+ * Menu closes completely (with all sub menus) when:
+ * - A menu item is clicked that does not have a submenu
+ * - Enter key pressed on a menu item (not a submenu trigger), menu item radio or menu item checkbox
+ * - Click outside the menu popover (on the backdrop)
+ *
+ * Close submenus when:
+ * - Esc key pressed, only the current submenu closed
+ * - Arrow Left key pressed, only the current submenu closed
+ * - Open another submenu with Click, Enter or Space key,
+ *   closes recursively all submenus until the selected item's submenu
+ *
+ * Menu does not close when:
+ * - Space key pressed on a menu item radio or menu item checkbox
+ *
  * @tagname mdc-menupopover
  *
  * @slot - Default slot for the menu popover content

package/dist/react/menupopover/index.js

@@ -19,6 +19,24 @@ import { TAG_NAME } from '../../components/menupopover/menupopover.constants';
  *
  * The orientation of the menu popover is always set to `vertical`.
  *
+ * Submenu opens when:
+ * - Clicked on a menu item with a submenu
+ * - Enter or Space key pressed on a menu item with a submenu
+ *
+ * Menu closes completely (with all sub menus) when:
+ * - A menu item is clicked that does not have a submenu
+ * - Enter key pressed on a menu item (not a submenu trigger), menu item radio or menu item checkbox
+ * - Click outside the menu popover (on the backdrop)
+ *
+ * Close submenus when:
+ * - Esc key pressed, only the current submenu closed
+ * - Arrow Left key pressed, only the current submenu closed
+ * - Open another submenu with Click, Enter or Space key,
+ *   closes recursively all submenus until the selected item's submenu
+ *
+ * Menu does not close when:
+ * - Space key pressed on a menu item radio or menu item checkbox
+ *
  * @tagname mdc-menupopover
  *
  * @slot - Default slot for the menu popover content

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.92.0",
+  "version": "0.92.1",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"