From c5fe88c68cad218b2de6c278dff352ae11e7cc9f Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Mon, 6 Jan 2025 14:53:12 +0530 Subject: [PATCH 1/2] Table: Add Focus Handling for Autocomplete Input in Table Cells (#3047) * 3044 - autocomple add focus method and table autocomplete focus issue fix * 3044 - revert keydown behaviour * 3044 - update storybook docs * 3044 - handling arrow key actions --- stencil-workspace/src/components.d.ts | 4 ++++ .../modus-autocomplete/modus-autocomplete.tsx | 11 +++++++++++ .../src/components/modus-autocomplete/readme.md | 13 +++++++++++++ .../modus-table-cell-editor.tsx | 10 +++++++++- .../modus-autocomplete-storybook-docs.mdx | 6 ++++++ 5 files changed, 43 insertions(+), 1 deletion(-) diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 148a09a11..2d5e9af7b 100644 --- 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; + /** + * Focus the autocomplete component + */ + "focusInput": () => Promise; /** * 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 index f82d0f7ca..13611d7d1 100644 --- 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 { + 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 index 402b89058..5f5538d4f 100644 --- 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` | +## Methods + +### `focusInput() => Promise` + +Focus the autocomplete component + +#### Returns + +Type: `Promise` + + + + ## Dependencies ### Used by diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index 46f502954..9ea21ae2e 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/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 (
(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/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx index 1b0988e7d..be767b8c5 100644 --- a/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx +++ b/stencil-workspace/storybook/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` | | `valueChange` | An event that fires when the input value changes. Emits the value string. | `CustomEvent` | | `selectionsChanged` | An event that fires when an option is selected/removed. Emits the option ids. | `CustomEvent` | + +### Methods + +| Method name | Description | Parameter | Return | +| ------------ | --------------- | --------- | --------------- | +| `focusInput` | Focus the input | | `Promise` | From 8cac83ed36f57231a87b154f98d06d24d2a3aa39 Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Tue, 7 Jan 2025 23:38:53 +0900 Subject: [PATCH 2/2] npm audit fix (#3098) Use Ubuntu `ubuntu-22.04` --- .../azure-static-web-apps-deploy.yml | 2 +- .github/workflows/build.yml | 2 +- angular-workspace/test-ng15/.npmrc | 2 + angular-workspace/test-ng15/package-lock.json | 95 ++++++++++--------- angular-workspace/test-ng15/package.json | 5 +- stencil-workspace/package-lock.json | 7 +- stencil-workspace/storybook/package-lock.json | 6 +- 7 files changed, 66 insertions(+), 53 deletions(-) create mode 100644 angular-workspace/test-ng15/.npmrc diff --git a/.github/workflows/azure-static-web-apps-deploy.yml b/.github/workflows/azure-static-web-apps-deploy.yml index d8d79ef95..f909ddc74 100644 --- 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 index 18a26ca47..349ee61de 100644 --- 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 new file mode 100644 index 000000000..6282f7bb4 --- /dev/null +++ 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 index 73cb9779b..66547eb4a 100644 --- a/angular-workspace/test-ng15/package-lock.json +++ b/angular-workspace/test-ng15/package-lock.json @@ -16,7 +16,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" @@ -2870,28 +2870,31 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.6.8", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", - "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "version": "1.6.9", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz", + "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==", + "license": "MIT", "peer": true, "dependencies": { - "@floating-ui/utils": "^0.2.8" + "@floating-ui/utils": "^0.2.9" } }, "node_modules/@floating-ui/dom": { - "version": "1.6.12", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz", - "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==", + "version": "1.6.13", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz", + "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==", + "license": "MIT", "peer": true, "dependencies": { "@floating-ui/core": "^1.6.0", - "@floating-ui/utils": "^0.2.8" + "@floating-ui/utils": "^0.2.9" } }, "node_modules/@floating-ui/utils": { - "version": "0.2.8", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", - "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==", + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", + "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", + "license": "MIT", "peer": true }, "node_modules/@gar/promisify": { @@ -3327,6 +3330,7 @@ "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", "peer": true, "funding": { "type": "opencollective", @@ -3541,9 +3545,10 @@ "dev": true }, "node_modules/@stencil/core": { - "version": "4.22.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.22.2.tgz", - "integrity": "sha512-eq2pYrrnzcLyBRANk0X/VVOfCtD0nCxWnEZ0AVdscuqfDkOjxa6SSZOfEhR9FAvrmESHp8y5jRCVPnf4n5CC4A==", + "version": "4.23.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.23.1.tgz", + "integrity": "sha512-VtGgKTZdqaank5zs/gE5LBTcIYg4pE81pI4rfknMl5NFQbGcp83KISgBeJP/eRgcQCPu+ji/XhOq1joaTepAhQ==", + "license": "MIT", "peer": true, "bin": { "stencil": "bin/stencil" @@ -3557,6 +3562,7 @@ "version": "8.20.5", "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz", "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==", + "license": "MIT", "peer": true, "engines": { "node": ">=12" @@ -3576,9 +3582,10 @@ } }, "node_modules/@trimble-oss/modus-angular-components": { - "version": "0.41.0-ng15", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-angular-components/-/modus-angular-components-0.41.0-ng15.tgz", - "integrity": "sha512-KJnWc/w2c9+RyEwIBS6arF11WyZcITSMcSXRiew36RREFOQxdAmDuj6uigBjLdR6frECE1eOB17FCH16H6SnRA==", + "version": "1.1.0-ng15", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-angular-components/-/modus-angular-components-1.1.0-ng15.tgz", + "integrity": "sha512-10VYc84jnyKwi25JPi03wfHOR1rJFjOKjlGcV6VQAAiSz9nigwUQX4zNfsrOWKu99YLWjsntf2lt59twPhvwwg==", + "license": "MIT", "dependencies": { "tslib": "^2.5.3" }, @@ -3588,13 +3595,14 @@ "peerDependencies": { "@angular/common": "^15.2.9", "@angular/core": "^15.2.9", - "@trimble-oss/modus-web-components": "0.41.0" + "@trimble-oss/modus-web-components": "1.1.0" } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.41.0.tgz", - "integrity": "sha512-hPikURXXmkcGK7qLeaPXOzu0SDcFW/Gf0RjVS3vwldpHjl3y/mWFKIBhv42fU7ZVntqd+xBYCDpruBmSvWo+sw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-1.1.0.tgz", + "integrity": "sha512-XxAZzfi4+yp5FPiWnS8TMe8fW+87EdUI/tCgwYkMW1zMC+tCQoc52cLa7qTf7lljhmcJfTiC+Jjd3RXvc6xHIA==", + "license": "MIT", "peer": true, "dependencies": { "@floating-ui/dom": "^1.6.12", @@ -3603,8 +3611,7 @@ "@tanstack/table-core": "^8.20.5" }, "engines": { - "node": ">=16", - "npm": ">=8" + "node": ">=18.20" } }, "node_modules/@tufjs/canonical-json": { @@ -14581,28 +14588,28 @@ "optional": true }, "@floating-ui/core": { - "version": "1.6.8", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", - "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "version": "1.6.9", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz", + "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==", "peer": true, "requires": { - "@floating-ui/utils": "^0.2.8" + "@floating-ui/utils": "^0.2.9" } }, "@floating-ui/dom": { - "version": "1.6.12", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz", - "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==", + "version": "1.6.13", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz", + "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==", "peer": true, "requires": { "@floating-ui/core": "^1.6.0", - "@floating-ui/utils": "^0.2.8" + "@floating-ui/utils": "^0.2.9" } }, "@floating-ui/utils": { - "version": "0.2.8", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", - "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==", + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", + "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", "peer": true }, "@gar/promisify": { @@ -15073,9 +15080,9 @@ "dev": true }, "@stencil/core": { - "version": "4.22.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.22.2.tgz", - "integrity": "sha512-eq2pYrrnzcLyBRANk0X/VVOfCtD0nCxWnEZ0AVdscuqfDkOjxa6SSZOfEhR9FAvrmESHp8y5jRCVPnf4n5CC4A==", + "version": "4.23.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.23.1.tgz", + "integrity": "sha512-VtGgKTZdqaank5zs/gE5LBTcIYg4pE81pI4rfknMl5NFQbGcp83KISgBeJP/eRgcQCPu+ji/XhOq1joaTepAhQ==", "peer": true }, "@tanstack/table-core": { @@ -15091,17 +15098,17 @@ "dev": true }, "@trimble-oss/modus-angular-components": { - "version": "0.41.0-ng15", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-angular-components/-/modus-angular-components-0.41.0-ng15.tgz", - "integrity": "sha512-KJnWc/w2c9+RyEwIBS6arF11WyZcITSMcSXRiew36RREFOQxdAmDuj6uigBjLdR6frECE1eOB17FCH16H6SnRA==", + "version": "1.1.0-ng15", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-angular-components/-/modus-angular-components-1.1.0-ng15.tgz", + "integrity": "sha512-10VYc84jnyKwi25JPi03wfHOR1rJFjOKjlGcV6VQAAiSz9nigwUQX4zNfsrOWKu99YLWjsntf2lt59twPhvwwg==", "requires": { "tslib": "^2.5.3" } }, "@trimble-oss/modus-web-components": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.41.0.tgz", - "integrity": "sha512-hPikURXXmkcGK7qLeaPXOzu0SDcFW/Gf0RjVS3vwldpHjl3y/mWFKIBhv42fU7ZVntqd+xBYCDpruBmSvWo+sw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-1.1.0.tgz", + "integrity": "sha512-XxAZzfi4+yp5FPiWnS8TMe8fW+87EdUI/tCgwYkMW1zMC+tCQoc52cLa7qTf7lljhmcJfTiC+Jjd3RXvc6xHIA==", "peer": true, "requires": { "@floating-ui/dom": "^1.6.12", diff --git a/angular-workspace/test-ng15/package.json b/angular-workspace/test-ng15/package.json index ceed34883..04abc909f 100644 --- 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 index 61255a53d..e6a6c04e9 100644 --- a/stencil-workspace/package-lock.json +++ b/stencil-workspace/package-lock.json @@ -5290,9 +5290,9 @@ "dev": true }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "dev": true, "funding": [ { @@ -5300,6 +5300,7 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "bin": { "nanoid": "bin/nanoid.cjs" }, diff --git a/stencil-workspace/storybook/package-lock.json b/stencil-workspace/storybook/package-lock.json index 81f457168..96a47e380 100644 --- a/stencil-workspace/storybook/package-lock.json +++ b/stencil-workspace/storybook/package-lock.json @@ -6094,9 +6094,9 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "dev": true, "funding": [ {