@neovici/cosmoz-input 3.9.0 → 3.10.0

package/dist/cosmoz-input.js

@@ -1,5 +1,6 @@
 import { html } from 'lit-html';
 import { live } from 'lit-html/directives/live.js';
+import { ref } from 'lit-html/directives/ref.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { component } from 'haunted';
 import { useInput } from './use-input';
@@ -17,10 +18,11 @@ const observedAttributes = [
     ...attributes,
 ];
 export const Input = (host) => {
-    const { type = 'text', pattern, allowedPattern, autocomplete, value, readonly, disabled, min, max, step, maxlength, } = host, { onChange, onFocus, onInput } = useInput(host);
+    const { type = 'text', pattern, allowedPattern, autocomplete, value, readonly, disabled, min, max, step, maxlength, } = host, { onChange, onFocus, onInput, onRef } = useInput(host);
     const onBeforeInput = useAllowedPattern(allowedPattern);
     return render(html `
 			<input
+				${ref(onRef)}
 				style="--chars: ${value?.toString()?.length ?? 0}ch"
 				id="input"
 				part="input"

package/dist/cosmoz-textarea.js

@@ -1,5 +1,6 @@
 import { html } from 'lit-html'; // eslint-disable-line object-curly-newline
 import { live } from 'lit-html/directives/live.js';
+import { ref } from 'lit-html/directives/ref.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { component } from 'haunted';
 import { useInput } from './use-input';
@@ -7,10 +8,11 @@ import { useAutoHeight } from './use-auto-height';
 import { render, attributes } from './render';
 const observedAttributes = ['rows', ...attributes];
 export const Textarea = (host) => {
-    const { autocomplete, value, placeholder, readonly, disabled, rows, cols, maxlength, } = host, { onChange, onFocus, onInput } = useInput(host);
+    const { autocomplete, value, placeholder, readonly, disabled, rows, cols, maxlength, } = host, { onChange, onFocus, onInput, onRef } = useInput(host);
     useAutoHeight(host);
     return render(html `
 			<textarea id="input" part="input"
+				${ref(onRef)}
 				autocomplete=${ifDefined(autocomplete)}
 				placeholder=${placeholder || ' '}
 				rows=${rows ?? 1} cols=${ifDefined(cols)}

package/dist/use-input.d.ts

@@ -1,11 +1,15 @@
+type Input = HTMLInputElement | HTMLTextAreaElement;
 export interface BaseInput extends HTMLElement {
     value?: string | number;
     maxRows?: number;
     focused?: boolean;
     disabled?: boolean;
+    onInputRef?: (el: Input) => void;
 }
 export declare const useInput: <T extends BaseInput>(host: T) => {
     onChange: (e: Event) => boolean;
     onFocus: (e: FocusEvent) => void;
     onInput: (e: InputEvent) => void;
+    onRef: (el?: Element) => void;
 };
+export {};

package/dist/use-input.js

@@ -1,10 +1,16 @@
-import { useCallback, useEffect } from 'haunted';
+import { useCallback, useEffect, useRef } from 'haunted';
 import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
 import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
-// TODO:  use useRef instead of callback with querySelector
 export const useInput = (host) => {
-    const root = host.shadowRoot, onChange = useCallback((e) => host.dispatchEvent(new Event(e.type, { bubbles: e.bubbles })), []), onInput = useCallback((e) => notifyProperty(host, 'value', e.target.value), []), onFocus = useCallback((e) => notifyProperty(host, 'focused', e.type === 'focus'), []), focus = useCallback(() => root.querySelector('#input')?.focus(), []), validate = useCallback(() => {
-        const valid = root.querySelector('#input')?.checkValidity();
+    const { onInputRef } = host;
+    const inputRef = useRef(undefined);
+    const onRef = useCallback((el) => {
+        const ref = el;
+        inputRef.current = ref;
+        onInputRef?.(ref);
+    }, [onInputRef]);
+    const root = host.shadowRoot, onChange = useCallback((e) => host.dispatchEvent(new Event(e.type, { bubbles: e.bubbles })), []), onInput = useCallback((e) => notifyProperty(host, 'value', e.target.value), []), onFocus = useCallback((e) => notifyProperty(host, 'focused', e.type === 'focus'), []), focus = useCallback(() => inputRef.current?.focus(), []), validate = useCallback(() => {
+        const valid = inputRef.current?.checkValidity();
         host.toggleAttribute('invalid', !valid);
         return valid;
     }, []);
@@ -29,5 +35,6 @@ export const useInput = (host) => {
         onChange,
         onFocus,
         onInput,
+        onRef,
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-input",
-	"version": "3.9.0",
+	"version": "3.10.0",
 	"description": "A input web component",
 	"keywords": [
 		"lit-html",