@nectary/components 4.11.0 → 4.11.2

package/action-menu/index.js

@@ -81,6 +81,13 @@ export class ActionMenu extends NectaryElement {
         top: 0,
         behavior: 'auto'
       });
+    } else {
+      const activeElement = this.#getDeepActiveElement();
+      const isTextInput = activeElement !== null && activeElement.tagName === 'INPUT';
+      if (!isTextInput) {
+        this.focus();
+        this.#selectOption(this.#getFirstOption());
+      }
     }
   };
   #handleKeydown(e) {
@@ -155,6 +162,13 @@ export class ActionMenu extends NectaryElement {
     }
     return this.#getLastOption();
   }
+  #getDeepActiveElement() {
+    let activeElement = this.ownerDocument.activeElement;
+    while (activeElement !== null && activeElement.shadowRoot !== null && activeElement.shadowRoot.activeElement !== null) {
+      activeElement = activeElement.shadowRoot.activeElement;
+    }
+    return activeElement;
+  }
   #selectOption($option) {
     const hasRows = this.hasAttribute('rows');
     for (const $op of this.#getOptionElements()) {
@@ -166,6 +180,15 @@ export class ActionMenu extends NectaryElement {
         });
       }
     }
+    if ($option !== null) {
+      $option.focus();
+      $option.onmouseover = e => {
+        if (e.defaultPrevented) {
+          return;
+        }
+        this.#selectOption(null);
+      };
+    }
   }
   #getOptionElements() {
     return this.#$optionSlot.assignedElements();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.11.0",
+  "version": "4.11.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/types.d.ts

@@ -1,5 +1,5 @@
-import type { ClassAttributes, DOMAttributes, HTMLAttributes } from 'react'
-import type { ReactifyEvents, ReactifyElement, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners } from './utils/adapters'
+import type { HTMLAttributes, CSSProperties } from 'react'
+import type { ReactifyEvents, WebComponentReactBaseProp, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners } from './utils/adapters'
 
 export type TRect = {
   x: number,
@@ -8,21 +8,24 @@ export type TRect = {
   height: number,
 }
 
-export type NectaryComponentVanillaByType<T extends object> =
+export type NectaryComponentVanillaByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> =
   Omit<HTMLElement, 'addEventListener' | 'removeEventListener'> &
   ExtendEventListeners<Required<SafeSelect<T, 'events'>>> &
   SetAttributes<Required<RemoveReadonly<SafeSelect<T, 'props'>>>> &
   Required<CamelCaseify<SafeSelect<T, 'props'>>> &
   Required<SafeSelect<T, 'methods'>>
 
-export type NectaryComponentReactByType<T extends object> =
-  ReactifyElement<HTMLElement> &
+export type NectaryComponentReactByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> =
+  WebComponentReactBaseProp<NectaryComponentVanillaByType<T>> &
   ReactifyEvents<SafeSelect<T, 'events'>> &
   RemoveReadonly<SafeSelect<T, 'props'>> &
-  { style?: SafeSelect<T, 'style'> }
+  {
+    style?: Partial<SafeSelect<T, 'style'>> & CSSProperties;
+  }
+
 
 export type NectaryComponentVanilla<K extends keyof NectaryComponentMap> =
   NectaryComponentVanillaByType<NectaryComponentMap[K]>
 
 export type NectaryComponentReact<K extends keyof NectaryComponentMap> =
-  NectaryComponentReactByType<NectaryComponentMap[K]>
+  NectaryComponentReactByType<NectaryComponentMap[K]>

package/utils/adapters.d.ts

@@ -1,4 +1,4 @@
-import type { ClassAttributes, DOMAttributes, HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 export type SafeSelect<T extends object, K extends string | number | symbol> = K extends keyof T ? T[K] extends object ? T[K] : {} : {};
 type CamelCaseString<S extends string> = S extends `${infer P1}-${infer P2}${infer P3}` ? `${Lowercase<P1>}${Uppercase<P2>}${CamelCaseString<P3>}` : S;
 export type CamelCaseify<T> = T extends object ? {
@@ -21,10 +21,10 @@ export type ExtendEventListeners<Events> = {
 export type SetAttributes<Props> = {
     setAttribute<K extends keyof Props>(attr: K, value: Props[K] extends boolean ? '' : Props[K]): void;
 };
-export type ReactifyElement<TElement> = Pick<HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'slot' | 'children'> & ClassAttributes<TElement> & Pick<DOMAttributes<TElement>, 'onClick' | 'onDoubleClick' | 'onMouseDown' | 'onMouseUp' | 'onMouseMove' | 'onMouseOver' | 'onMouseOut' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress'> & {
-    class?: string;
-};
 export type ReactifyEvents<T> = {
     [K in keyof T as K extends string ? `on${K}` : never]: T[K];
 };
+export type WebComponentReactBaseProp<T = HTMLElement> = Omit<DetailedHTMLProps<HTMLAttributes<T>, T>, 'className' | 'style'> & {
+    class?: string;
+};
 export {};