@ui5/webcomponents 2.7.3 → 2.8.0-rc.1

package/dist/custom-elements-internal.json

@@ -1799,6 +1799,49 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/types/InteractiveAreaSize.js",
+      "declarations": [
+        {
+          "kind": "enum",
+          "name": "InteractiveAreaSize",
+          "description": "Defines the area size around the component that the user can select.",
+          "_ui5privacy": "public",
+          "_ui5since": "2.8.0",
+          "members": [
+            {
+              "kind": "field",
+              "static": true,
+              "privacy": "public",
+              "description": "The default target area size (the area taken by the component itself without any extra invisible touch area).",
+              "default": "Normal",
+              "name": "Normal",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "static": true,
+              "privacy": "public",
+              "description": "Enlarged target area size (up to 24px in height) provides users with an enhanced dedicated space to interact with the component.",
+              "default": "Large",
+              "name": "Large",
+              "readonly": true
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "InteractiveAreaSize",
+            "module": "dist/types/InteractiveAreaSize.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/types/LinkAccessibleRole.js",
@@ -5279,7 +5322,7 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.",
+              "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.\n\n**Note:** The badge component only accepts numeric values and the \"+\" symbol. Using other characters or formats may result in unpredictable behavior, which is not guaranteed or supported.",
               "privacy": "public",
               "_ui5since": "2.7.0"
             }
@@ -5295,7 +5338,7 @@
               }
             },
             {
-              "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.",
+              "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.\n\n**Note:** The badge component only accepts numeric values and the \"+\" symbol. Using other characters or formats may result in unpredictable behavior, which is not guaranteed or supported.",
               "name": "text",
               "default": "\"\"",
               "fieldName": "text",
@@ -13408,6 +13451,24 @@
               "description": "Defines the component design.\n\n**Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "interactiveAreaSize",
+              "type": {
+                "text": "InteractiveAreaSize",
+                "references": [
+                  {
+                    "name": "InteractiveAreaSize",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/InteractiveAreaSize.js"
+                  }
+                ]
+              },
+              "default": "\"Normal\"",
+              "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.",
+              "privacy": "public",
+              "_ui5since": "2.8.0"
+            },
             {
               "kind": "field",
               "name": "wrappingType",
@@ -13617,6 +13678,15 @@
                 "text": "\"Default\" | \"Emphasized\" | \"Subtle\""
               }
             },
+            {
+              "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.",
+              "name": "interactive-area-size",
+              "default": "\"Normal\"",
+              "fieldName": "interactiveAreaSize",
+              "type": {
+                "text": "\"Normal\" | \"Large\""
+              }
+            },
             {
               "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** By default the text will wrap. If \"None\" is set - the text will truncate.",
               "name": "wrapping-type",
@@ -24770,6 +24840,21 @@
                   "name": "action",
                   "_ui5privacy": "public",
                   "description": "The row action instance"
+                },
+                {
+                  "type": {
+                    "text": "TableRow",
+                    "references": [
+                      {
+                        "name": "TableRow",
+                        "package": "@ui5/webcomponents",
+                        "module": "dist/TableRow.js"
+                      }
+                    ]
+                  },
+                  "name": "row",
+                  "_ui5privacy": "public",
+                  "description": "The row instance"
                 }
               ]
             }
@@ -25176,6 +25261,24 @@
           "kind": "class",
           "description": "### Overview\n\nThe `ui5-table-header-cell` component represents a column in the `ui5-table`.\n\nAs it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`\nto ensure correct layout and design.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";`",
           "name": "TableHeaderCell",
+          "slots": [
+            {
+              "name": "action",
+              "description": "Defines the action of the column.\n\n**Note:** While multiple actions are technically possible, this is not supported.",
+              "_ui5since": "2.8.0",
+              "_ui5type": {
+                "text": "Array<TableHeaderCellActionBase>",
+                "references": [
+                  {
+                    "name": "TableHeaderCellActionBase",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/TableHeaderCellActionBase.js"
+                  }
+                ]
+              },
+              "_ui5privacy": "public"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -25228,6 +25331,24 @@
               "privacy": "public",
               "_ui5since": "2.7.0"
             },
+            {
+              "kind": "field",
+              "name": "sortIndicator",
+              "type": {
+                "text": "SortOrder",
+                "references": [
+                  {
+                    "name": "SortOrder",
+                    "package": "@ui5/webcomponents-base",
+                    "module": "dist/types/SortOrder.js"
+                  }
+                ]
+              },
+              "default": "\"None\"",
+              "description": "Defines the sort indicator of the column.",
+              "privacy": "public",
+              "_ui5since": "2.8.0"
+            },
             {
               "kind": "field",
               "name": "horizontalAlign",
@@ -25296,6 +25417,15 @@
                 "text": "string | undefined"
               }
             },
+            {
+              "description": "Defines the sort indicator of the column.",
+              "name": "sort-indicator",
+              "default": "\"None\"",
+              "fieldName": "sortIndicator",
+              "type": {
+                "text": "\"None\" | \"Ascending\" | \"Descending\""
+              }
+            },
             {
               "description": "Determines the horizontal alignment of table cells.",
               "name": "horizontal-align",
@@ -25341,6 +25471,140 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/TableHeaderCellActionAI.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "### Overview\n\nThe `ui5-table-header-cell-action-ai` component defines a dedicated AI action for the table column.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCellActionAI.js\";`",
+          "name": "TableHeaderCellActionAI",
+          "superclass": {
+            "name": "TableHeaderCellActionBase",
+            "package": "@ui5/webcomponents",
+            "module": "dist/TableHeaderCellActionBase.js"
+          },
+          "tagName": "ui5-table-header-cell-action-ai",
+          "customElement": true,
+          "_ui5since": "2.8.0",
+          "_ui5privacy": "public",
+          "events": [
+            {
+              "name": "click",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent<TableHeaderCellActionClickEventDetail>",
+                "references": [
+                  {
+                    "name": "TableHeaderCellActionClickEventDetail",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/TableHeaderCellActionBase.js"
+                  }
+                ]
+              },
+              "description": "Fired when a header cell action is clicked.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": false,
+              "_ui5since": "2.8.0",
+              "_ui5parameters": [
+                {
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "name": "targetRef",
+                  "_ui5privacy": "public",
+                  "description": "The reference to the element that triggered the event"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "TableHeaderCellActionBase",
+                "module": "dist/TableHeaderCellActionBase.js"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TableHeaderCellActionAI",
+            "module": "dist/TableHeaderCellActionAI.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ui5-table-header-cell-action-ai",
+          "declaration": {
+            "name": "TableHeaderCellActionAI",
+            "module": "dist/TableHeaderCellActionAI.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/TableHeaderCellActionBase.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `TableHeaderCellActionBase` class serves as a foundation for table header cell actions.",
+          "name": "TableHeaderCellActionBase",
+          "events": [
+            {
+              "name": "click",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent<TableHeaderCellActionClickEventDetail>",
+                "references": [
+                  {
+                    "name": "TableHeaderCellActionClickEventDetail",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/TableHeaderCellActionBase.js"
+                  }
+                ]
+              },
+              "description": "Fired when a header cell action is clicked.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": false,
+              "_ui5since": "2.8.0",
+              "_ui5parameters": [
+                {
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "name": "targetRef",
+                  "_ui5privacy": "public",
+                  "description": "The reference to the element that triggered the event"
+                }
+              ]
+            }
+          ],
+          "superclass": {
+            "name": "UI5Element",
+            "package": "@ui5/webcomponents-base",
+            "module": "dist/UI5Element.js"
+          },
+          "customElement": true,
+          "_ui5since": "2.8.0",
+          "_ui5privacy": "public",
+          "_ui5abstract": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TableHeaderCellActionBase",
+            "module": "dist/TableHeaderCellActionBase.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/TableHeaderRow.js",
@@ -25795,7 +26059,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The `TableRowActionNavigation` class defines a navigation actio‚n for table rows.",
+          "description": "### Overview\n\nThe `ui5-table-row-action-navigation` component defines a navigation action for table rows.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRowActionNavigation.js\";`",
           "name": "TableRowActionNavigation",
           "members": [
             {

package/dist/custom-elements.json

@@ -476,6 +476,21 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/types/InteractiveAreaSize.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "InteractiveAreaSize",
+            "module": "dist/types/InteractiveAreaSize.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/types/LinkAccessibleRole.js",
@@ -2309,7 +2324,7 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.",
+              "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.\n\n**Note:** The badge component only accepts numeric values and the \"+\" symbol. Using other characters or formats may result in unpredictable behavior, which is not guaranteed or supported.",
               "privacy": "public"
             }
           ],
@@ -2324,7 +2339,7 @@
               }
             },
             {
-              "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.",
+              "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.\n\n**Note:** The badge component only accepts numeric values and the \"+\" symbol. Using other characters or formats may result in unpredictable behavior, which is not guaranteed or supported.",
               "name": "text",
               "default": "\"\"",
               "fieldName": "text",
@@ -9450,6 +9465,23 @@
               "description": "Defines the component design.\n\n**Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "interactiveAreaSize",
+              "type": {
+                "text": "InteractiveAreaSize",
+                "references": [
+                  {
+                    "name": "InteractiveAreaSize",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/InteractiveAreaSize.js"
+                  }
+                ]
+              },
+              "default": "\"Normal\"",
+              "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "wrappingType",
@@ -9614,6 +9646,15 @@
                 "text": "\"Default\" | \"Emphasized\" | \"Subtle\""
               }
             },
+            {
+              "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.",
+              "name": "interactive-area-size",
+              "default": "\"Normal\"",
+              "fieldName": "interactiveAreaSize",
+              "type": {
+                "text": "\"Normal\" | \"Large\""
+              }
+            },
             {
               "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** By default the text will wrap. If \"None\" is set - the text will truncate.",
               "name": "wrapping-type",
@@ -19569,6 +19610,12 @@
           "kind": "class",
           "description": "### Overview\n\nThe `ui5-table-header-cell` component represents a column in the `ui5-table`.\n\nAs it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`\nto ensure correct layout and design.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";`",
           "name": "TableHeaderCell",
+          "slots": [
+            {
+              "name": "action",
+              "description": "Defines the action of the column.\n\n**Note:** While multiple actions are technically possible, this is not supported."
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -19620,6 +19667,23 @@
               "default": "undefined",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "sortIndicator",
+              "type": {
+                "text": "SortOrder",
+                "references": [
+                  {
+                    "name": "SortOrder",
+                    "package": "@ui5/webcomponents-base",
+                    "module": "dist/types/SortOrder.js"
+                  }
+                ]
+              },
+              "default": "\"None\"",
+              "description": "Defines the sort indicator of the column.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "horizontalAlign",
@@ -19688,6 +19752,15 @@
                 "text": "string | undefined"
               }
             },
+            {
+              "description": "Defines the sort indicator of the column.",
+              "name": "sort-indicator",
+              "default": "\"None\"",
+              "fieldName": "sortIndicator",
+              "type": {
+                "text": "\"None\" | \"Ascending\" | \"Descending\""
+              }
+            },
             {
               "description": "Determines the horizontal alignment of table cells.",
               "name": "horizontal-align",
@@ -19730,6 +19803,105 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/TableHeaderCellActionAI.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "### Overview\n\nThe `ui5-table-header-cell-action-ai` component defines a dedicated AI action for the table column.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCellActionAI.js\";`",
+          "name": "TableHeaderCellActionAI",
+          "superclass": {
+            "name": "TableHeaderCellActionBase",
+            "package": "@ui5/webcomponents",
+            "module": "dist/TableHeaderCellActionBase.js"
+          },
+          "tagName": "ui5-table-header-cell-action-ai",
+          "customElement": true,
+          "events": [
+            {
+              "name": "click",
+              "type": {
+                "text": "CustomEvent<TableHeaderCellActionClickEventDetail>",
+                "references": [
+                  {
+                    "name": "TableHeaderCellActionClickEventDetail",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/TableHeaderCellActionBase.js"
+                  }
+                ]
+              },
+              "description": "Fired when a header cell action is clicked.",
+              "inheritedFrom": {
+                "name": "TableHeaderCellActionBase",
+                "module": "dist/TableHeaderCellActionBase.js"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TableHeaderCellActionAI",
+            "module": "dist/TableHeaderCellActionAI.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ui5-table-header-cell-action-ai",
+          "declaration": {
+            "name": "TableHeaderCellActionAI",
+            "module": "dist/TableHeaderCellActionAI.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/TableHeaderCellActionBase.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `TableHeaderCellActionBase` class serves as a foundation for table header cell actions.",
+          "name": "TableHeaderCellActionBase",
+          "events": [
+            {
+              "name": "click",
+              "type": {
+                "text": "CustomEvent<TableHeaderCellActionClickEventDetail>",
+                "references": [
+                  {
+                    "name": "TableHeaderCellActionClickEventDetail",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/TableHeaderCellActionBase.js"
+                  }
+                ]
+              },
+              "description": "Fired when a header cell action is clicked."
+            }
+          ],
+          "superclass": {
+            "name": "UI5Element",
+            "package": "@ui5/webcomponents-base",
+            "module": "dist/UI5Element.js"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TableHeaderCellActionBase",
+            "module": "dist/TableHeaderCellActionBase.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/TableHeaderRow.js",
@@ -20135,7 +20307,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The `TableRowActionNavigation` class defines a navigation actio‚n for table rows.",
+          "description": "### Overview\n\nThe `ui5-table-row-action-navigation` component defines a navigation action for table rows.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRowActionNavigation.js\";`",
           "name": "TableRowActionNavigation",
           "members": [
             {

package/dist/features/InputSuggestions.d.ts

@@ -47,8 +47,8 @@ declare class Suggestions {
     static SCROLL_STEP: number;
     get template(): typeof InputSuggestionsTemplate;
     constructor(component: SuggestionComponent, slotName: string, highlight: boolean, handleFocus: boolean);
-    onUp(e: KeyboardEvent): boolean;
-    onDown(e: KeyboardEvent): boolean;
+    onUp(e: KeyboardEvent, indexOfItem: number): boolean;
+    onDown(e: KeyboardEvent, indexOfItem: number): boolean;
     onSpace(e: KeyboardEvent): boolean;
     onEnter(e: KeyboardEvent): boolean;
     onPageUp(e: KeyboardEvent): boolean;
@@ -66,13 +66,11 @@ declare class Suggestions {
     onItemSelected(selectedItem: IInputSuggestionItemSelectable | null, keyboardUsed: boolean): void;
     onItemSelect(item: IInputSuggestionItem): void;
     onItemPress(e: CustomEvent<ListItemClickEventDetail | ListSelectionChangeEventDetail>): void;
-    _onOpen(): void;
     _onClose(): void;
-    _applyFocus(): void;
     _isItemOnTarget(): boolean;
     get _isGroupItem(): boolean;
     isOpened(): boolean;
-    _handleItemNavigation(forward: boolean): void;
+    _handleItemNavigation(forward: boolean, index: number): void;
     _selectNextItem(): void;
     _selectPreviousItem(): void;
     _moveItemSelection(previousIdx: number, nextIdx: number): void;

package/dist/features/InputSuggestions.js

@@ -26,14 +26,16 @@ class Suggestions {
         // that changes due to user interaction.
         this.selectedItemIndex = -1;
     }
-    onUp(e) {
+    onUp(e, indexOfItem) {
         e.preventDefault();
-        this._handleItemNavigation(false /* forward */);
+        const index = !this.isOpened && this._hasValueState && indexOfItem === -1 ? 0 : indexOfItem;
+        this._handleItemNavigation(false /* forward */, index);
         return true;
     }
-    onDown(e) {
+    onDown(e, indexOfItem) {
         e.preventDefault();
-        this._handleItemNavigation(true /* forward */);
+        const index = !this.isOpened && this._hasValueState && indexOfItem === -1 ? 0 : indexOfItem;
+        this._handleItemNavigation(true /* forward */, index);
         return true;
     }
     onSpace(e) {
@@ -172,17 +174,9 @@ class Suggestions {
         }
         this.onItemSelected(pressedItem, false /* keyboardUsed */);
     }
-    _onOpen() {
-        this._applyFocus();
-    }
     _onClose() {
         this._handledPress = false;
     }
-    _applyFocus() {
-        if (this.selectedItemIndex) {
-            this._getItems()[this.selectedItemIndex]?.focus();
-        }
-    }
     _isItemOnTarget() {
         return this.isOpened() && this.selectedItemIndex !== null && this.selectedItemIndex !== -1 && !this._isGroupItem;
     }
@@ -196,7 +190,8 @@ class Suggestions {
     isOpened() {
         return !!(this._getPicker()?.open);
     }
-    _handleItemNavigation(forward) {
+    _handleItemNavigation(forward, index) {
+        this.selectedItemIndex = index;
         if (!this._getItems().length) {
             return;
         }