@github/auto-complete-element - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

dist/index.esm.js

		@@ -237,11 +237,2 @@ class AutocompleteEvent extends CustomEvent {

		sibling(next) {
		const options = Array.from(this.results.querySelectorAll('[role="option"]'));
		const selected = this.results.querySelector('[aria-selected="true"]');
		const index = options.indexOf(selected);
		const sibling = next ? options[index + 1] : options[index - 1];
		const def = next ? options[0] : options[options.length - 1];
		return sibling \|\| def;
		}

		onKeydown(event) {
		@@ -248,0 +239,0 @@ if (event.key === 'Escape' && this.container.open) {

dist/index.umd.js

		@@ -243,11 +243,2 @@ (function (global, factory) {

		sibling(next) {
		const options = Array.from(this.results.querySelectorAll('[role="option"]'));
		const selected = this.results.querySelector('[aria-selected="true"]');
		const index = options.indexOf(selected);
		const sibling = next ? options[index + 1] : options[index - 1];
		const def = next ? options[0] : options[options.length - 1];
		return sibling \|\| def;
		}

		onKeydown(event) {
		@@ -254,0 +245,0 @@ if (event.key === 'Escape' && this.container.open) {

index.d.ts

		@@ -22,2 +22,5 @@ export default class AutocompleteElement extends HTMLElement {
		}
		}
		interface HTMLElementTagNameMap {
		'auto-complete': AutoCompleteElement
		}
		}

package.json

		{
		"name": "@github/auto-complete-element",
		"version": "1.0.8",
		"version": "1.0.9",
		"description": "Auto-complete input values from server results",
		@@ -5,0 +5,0 @@ "repository": "github/auto-complete-element",

README.md

		@@ -47,20 +47,29 @@ # <auto-complete> element

		### Network request lifecycle events

		Request lifecycle events are dispatched on the `<auto-complete>` element. These events do not bubble.

		- `loadstart` - The server fetch has started.
		- `load` - The network request completed successfully.
		- `error` - The network request failed.
		- `loadend` - The network request has completed.

		Network events are useful for displaying progress states while the request is in-flight.

		```js
		const completer = document.querySelector('auto-complete')
		const container = completer.parentElement
		completer.addEventListener('loadstart', () => container.classList.add('is-loading'))
		completer.addEventListener('loadend', () => container.classList.remove('is-loading'))
		completer.addEventListener('load', () => container.classList.add('is-success'))
		completer.addEventListener('error', () => container.classList.add('is-error'))
		```

		// Network request lifecycle events.
		completer.addEventListener('loadstart', function(event) {
		console.log('Network request started', event)
		})
		completer.addEventListener('loadend', function(event) {
		console.log('Network request complete', event)
		})
		completer.addEventListener('load', function(event) {
		console.log('Network request succeeded', event)
		})
		completer.addEventListener('error', function(event) {
		console.log('Network request failed', event)
		})
		### Auto-complete events

		// Auto-complete result events.
		`auto-complete-change` is dispatched after a value is selected. In `event.detail` you can find:

		- `relatedTarget`: The HTMLInputElement controlling the auto-complete result list.

		```js
		completer.addEventListener('auto-complete-change', function(event) {
		@@ -67,0 +76,0 @@ console.log('Auto-completed value chosen or cleared', completer.value)

@github/auto-complete-element - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics