Merge branch 'main' into 2927-left-nav-upgrade-to-support-instanced-o…

…bject-at-top
trimble-oss · Jan 8, 2025 · cfb9baa · cfb9baa
2 parents 3ea52fb + 8cac83e
commit cfb9baa
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 54 deletions.
diff --git a/.github/workflows/azure-static-web-apps-deploy.yml b/.github/workflows/azure-static-web-apps-deploy.yml
@@ -13,7 +13,7 @@ jobs:
     permissions:
       contents: read # for actions/checkout to fetch code
     if: github.repository == 'trimble-oss/modus-web-components'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     name: Build and Deploy Job
     steps:
       - uses: actions/checkout@v4

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -9,7 +9,7 @@ permissions:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     defaults:
       run:
         working-directory: ./stencil-workspace

diff --git a/angular-workspace/test-ng15/.npmrc b/angular-workspace/test-ng15/.npmrc
@@ -0,0 +1,2 @@
+lockfile-version = "2"
+registry = https://registry.npmjs.org/
diff --git a/angular-workspace/test-ng15/package-lock.json b/angular-workspace/test-ng15/package-lock.json
diff --git a/angular-workspace/test-ng15/package.json b/angular-workspace/test-ng15/package.json
@@ -19,7 +19,7 @@
     "@angular/platform-browser": "^15.2.9",
     "@angular/platform-browser-dynamic": "^15.2.9",
     "@angular/router": "^15.2.9",
-    "@trimble-oss/modus-angular-components": "0.41.0-ng15",
+    "@trimble-oss/modus-angular-components": "1.1.0-ng15",
     "rxjs": "~7.8.1",
     "tslib": "^2.5.3",
     "zone.js": "~0.12.0"
@@ -41,5 +41,8 @@
   },
   "engines": {
     "node": ">=16"
+  },
+  "volta": {
+    "node": "18.20.5"
   }
 }
diff --git a/stencil-workspace/package-lock.json b/stencil-workspace/package-lock.json
diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts
@@ -163,6 +163,10 @@ export namespace Components {
           * A promise that returns the filtered options.
          */
         "filterOptions": (search: string) => Promise<ModusAutocompleteOption[] | string[]>;
+        /**
+          * Focus the autocomplete component
+         */
+        "focusInput": () => Promise<void>;
         /**
           * Whether the search icon is included.
          */

diff --git a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx
@@ -10,6 +10,7 @@ import {
   Listen,
   Element,
   Watch,
+  Method,
 } from '@stencil/core';
 
 import { IconSearch } from '../../icons/svgs/icon-search';
@@ -159,6 +160,16 @@ export class ModusAutocomplete {
     }
   }
 
+  /** Focus the autocomplete component */
+  @Method()
+  async focusInput(): Promise<void> {
+    const textInputElement = this.el.shadowRoot.querySelector('modus-text-input');
+
+    if (textInputElement) {
+      textInputElement.focusInput();
+    }
+  }
+
   @Listen('mousedown', { target: 'document' })
   onMouseDown(event: MouseEvent): void {
     if (!this.hasFocus) {

diff --git a/stencil-workspace/src/components/modus-autocomplete/readme.md b/stencil-workspace/src/components/modus-autocomplete/readme.md
@@ -42,6 +42,19 @@
 | `valueChange`       | An event that fires when the input value changes. Emits the value string.     | `CustomEvent<string \| string[]>` |
 
 
+## Methods
+
+### `focusInput() => Promise<void>`
+
+Focus the autocomplete component
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
 ## Dependencies
 
 ### Used by

diff --git a/...src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/...src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx
@@ -186,15 +186,23 @@ export class ModusTableCellEditor {
       selectedOption = this.editedValue as string;
     }
 
+    function handleArrowKeys(e: KeyboardEvent, callback: (e: KeyboardEvent) => void) {
+      const code = e.key.toLowerCase();
+      if (code === KEYBOARD_UP || code === KEYBOARD_DOWN) {
+        e.stopPropagation();
+      } else callback(e);
+    }
+
     return (
       <div class="autocomplete-container">
         <modus-autocomplete
           {...this.getDefaultProps('Autocomplete input')}
           include-search-icon="false"
           size="medium"
+          ref={(el) => (this.inputElement = el)}
           options={options}
           onBlur={this.handleBlur}
-          onKeyDown={(e) => e.stopPropagation()}
+          onKeyDown={(e) => handleArrowKeys(e, this.handleKeyDown)}
           filterOptions={
             args.filterOptions
               ? (...props) => {

diff --git a/stencil-workspace/storybook/package-lock.json b/stencil-workspace/storybook/package-lock.json
diff --git a/...ook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx b/...ook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx
@@ -245,3 +245,9 @@ interface ModusAutocompleteOption {
 | `optionSelected`    | An event that fires when a dropdown option is selected. Emits the option id.  | `CustomEvent<string>`            |
 | `valueChange`       | An event that fires when the input value changes. Emits the value string.     | `CustomEvent<string \|string[]>` |
 | `selectionsChanged` | An event that fires when an option is selected/removed. Emits the option ids. | `CustomEvent<string[]>`          |
+
+### Methods
+
+| Method name  | Description     | Parameter | Return          |
+| ------------ | --------------- | --------- | --------------- |
+| `focusInput` | Focus the input |           | `Promise<void>` |
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		lockfile-version = "2"
		registry = https://registry.npmjs.org/