@enonic/ui 1.0.0-beta.4 → 1.0.0-beta.5

package/dist/types/components/input/input.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
 export type InputAddonProps = ComponentPropsWithoutRef<'div'>;
 export type InputProps = {
     label?: string;
@@ -19,12 +19,18 @@ export type InputProps = {
      * `useBlinkAttention` for the trigger logic.
      */
     highlight?: boolean;
+    /**
+     * Ref to the field's container element — the one that wears the blink ring. Pass the same ref
+     * to `useBlinkAttention` so the hook can restart the CSS animation directly via the DOM. When
+     * provided, `highlight` becomes optional; the hook drives the class on its own.
+     */
+    highlightRef?: Ref<HTMLDivElement>;
     className?: string;
 } & ComponentPropsWithoutRef<'input'>;
 export declare const Input: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<InputProps> & {
-    ref?: import('preact').Ref<HTMLInputElement> | undefined;
+    ref?: Ref<HTMLInputElement> | undefined;
 }> & {
     Addon: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<InputAddonProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+        ref?: Ref<HTMLDivElement> | undefined;
     }>;
 };

package/dist/types/components/textarea/textarea.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
 export type TextAreaProps = {
     label?: string;
     description?: ReactNode;
@@ -17,6 +17,12 @@ export type TextAreaProps = {
      * `useBlinkAttention` for the trigger logic.
      */
     highlight?: boolean;
+    /**
+     * Ref to the field's container element — the one that wears the blink ring. Pass the same ref
+     * to `useBlinkAttention` so the hook can restart the CSS animation directly via the DOM. When
+     * provided, `highlight` becomes optional; the hook drives the class on its own.
+     */
+    highlightRef?: Ref<HTMLDivElement>;
     resizable?: boolean;
     /**
      * Enables automatic content-based sizing.
@@ -28,5 +34,5 @@ export type TextAreaProps = {
     className?: string;
 } & ComponentPropsWithoutRef<'textarea'>;
 export declare const TextArea: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<TextAreaProps> & {
-    ref?: import('preact').Ref<HTMLTextAreaElement> | undefined;
+    ref?: Ref<HTMLTextAreaElement> | undefined;
 }>;

package/dist/types/hooks/use-blink-attention.d.ts

@@ -5,8 +5,14 @@ export type UseBlinkAttentionConfig = {
 };
 /**
  * Draws attention to an element by scrolling it into view and pulsing a one-shot ring around it.
- * Returns a boolean — apply the `input-blink-attention` utility class while it's `true`.
+ * The hook owns the `input-blink-attention` class on the ref'd element — the ref must point to
+ * the element that wears the ring (typically a field's container, e.g. `Input.highlightRef` /
+ * `TextArea.highlightRef`). A boolean is also returned for callers that need to react to the
+ * blink in their own UI.
  *
- * The trigger is edge-driven: every time `trigger` flips to truthy, the animation restarts.
+ * The trigger is edge-driven: every time `trigger` flips to truthy, the animation restarts —
+ * even when the previous blink is still in progress. Restarts go through a class-remove → reflow
+ * → class-add cycle rather than React state alone, because React can coalesce a false→true
+ * toggle into a single commit and the browser would then see one uninterrupted animation.
  */
 export declare const useBlinkAttention: <T extends HTMLElement>(ref: RefObject<T | null>, trigger: unknown, { scrollIntoView }?: UseBlinkAttentionConfig) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enonic/ui",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "Enonic UI Component Library",
   "author": "Enonic",
   "license": "MIT",