anu-verzum 2.2.0 → 2.2.1

package/README.md

@@ -4,7 +4,6 @@
 
 <h3>@author: <strong>Anubis-programmer</strong></h3>
 <h3>@license: <strong>MIT</strong></h3>
-<h3>@version: <strong>2.2.0</strong></h3>
 
 <br>
 

package/dist/core/domUtils.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.updateDomProperties = exports.getHTMLValidSvgTag = exports.createDomElement = exports.SVG_ELEMENT_LIST = void 0;
 var _elements = require("./elements");
+const HTML_ATTRIBUTE_NAME_MAP = {
+  acceptCharset: 'accept-charset',
+  httpEquiv: 'http-equiv'
+};
 const getHTMLValidSvgTag = fiberType => {
   switch (fiberType) {
     case 'anchor':
@@ -46,8 +50,18 @@ const updateDomProperties = (dom, prevProps, nextProps, isSvgElement = false) =>
         dom.setAttribute(name, nextProps[name]);
       }
     } else {
-      if (name.includes('-') || name === 'role') {
+      if (name === 'className' || name === 'htmlFor') {
+        // Both have working IDL aliases (el.className / el.htmlFor).
+        el[name] = nextProps[name];
+      } else if (name.includes('-') || name === 'role') {
         dom.setAttribute(name, nextProps[name]);
+      } else if (dom.nodeType === 1 && /[A-Z]/.test(name)) {
+        // camelCase HTML attribute (inputMode, autoComplete, …): the
+        // DOM name is the lowercased key, except for the hyphenated
+        // cases captured in HTML_ATTRIBUTE_NAME_MAP. Setting these as
+        // IDL properties is unreliable (e.g. el.autoComplete is not a
+        // reflected property), so route them through setAttribute.
+        dom.setAttribute(HTML_ATTRIBUTE_NAME_MAP[name] ?? name.toLowerCase(), nextProps[name]);
       } else {
         el[name] = nextProps[name];
       }

package/dist/testing/events/fireEvent.d.ts

@@ -1,17 +1,19 @@
-type EventInit = globalThis.EventInit & Record<string, any>;
+type EventInit = globalThis.EventInit & {
+    target?: Record<string, any>;
+} & Record<string, any>;
 export declare const fireEvent: {
     (element: Element, eventName: string, init?: EventInit): boolean;
-    click(el: Element, init?: MouseEventInit): boolean;
-    dblclick(el: Element, init?: MouseEventInit): boolean;
-    change(el: Element, init?: globalThis.EventInit): boolean;
-    input(el: Element, init?: globalThis.EventInit): boolean;
-    focus(el: Element, init?: FocusEventInit): boolean;
-    blur(el: Element, init?: FocusEventInit): boolean;
-    keyDown(el: Element, init?: KeyboardEventInit): boolean;
-    keyUp(el: Element, init?: KeyboardEventInit): boolean;
-    keyPress(el: Element, init?: KeyboardEventInit): boolean;
-    submit(el: Element, init?: globalThis.EventInit): boolean;
-    mouseDown(el: Element, init?: MouseEventInit): boolean;
-    mouseUp(el: Element, init?: MouseEventInit): boolean;
+    click(el: Element, init?: EventInit): boolean;
+    dblclick(el: Element, init?: EventInit): boolean;
+    change(el: Element, init?: EventInit): boolean;
+    input(el: Element, init?: EventInit): boolean;
+    focus(el: Element, init?: EventInit): boolean;
+    blur(el: Element, init?: EventInit): boolean;
+    keyDown(el: Element, init?: EventInit): boolean;
+    keyUp(el: Element, init?: EventInit): boolean;
+    keyPress(el: Element, init?: EventInit): boolean;
+    submit(el: Element, init?: EventInit): boolean;
+    mouseDown(el: Element, init?: EventInit): boolean;
+    mouseUp(el: Element, init?: EventInit): boolean;
 };
 export {};

package/dist/testing/events/fireEvent.js

@@ -26,7 +26,14 @@ const buildEvent = (eventName, init) => {
   return new Event(eventName, opts);
 };
 const fireEvent = (element, eventName, init) => {
-  const dispatched = element.dispatchEvent(buildEvent(eventName, init));
+  const {
+    target,
+    ...eventInit
+  } = init ?? {};
+  if (target) {
+    Object.assign(element, target);
+  }
+  const dispatched = element.dispatchEvent(buildEvent(eventName, eventInit));
   (0, _act.flushEffects)();
   return dispatched;
 };

package/dist/testing/queries/byRole.js

@@ -9,9 +9,6 @@ const IMPLICIT_ROLES = {
   button: ['button'],
   link: ['a'],
   heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-  textbox: ['input'],
-  checkbox: ['input[type="checkbox"]'],
-  radio: ['input[type="radio"]'],
   combobox: ['select'],
   img: ['img'],
   list: ['ul', 'ol'],
@@ -22,6 +19,21 @@ const IMPLICIT_ROLES = {
   banner: ['header'],
   contentinfo: ['footer']
 };
+const INPUT_TYPE_ROLES = {
+  text: 'textbox',
+  search: 'textbox',
+  email: 'textbox',
+  tel: 'textbox',
+  url: 'textbox',
+  number: 'spinbutton',
+  range: 'slider',
+  checkbox: 'checkbox',
+  radio: 'radio',
+  button: 'button',
+  submit: 'button',
+  reset: 'button',
+  image: 'button'
+};
 const getAccessibleName = el => {
   const ariaLabel = el.getAttribute('aria-label');
   if (ariaLabel) {
@@ -44,17 +56,15 @@ const hasRole = (el, role) => {
   if (el.getAttribute('role') === role) {
     return true;
   }
+  if (el.tagName.toLowerCase() === 'input') {
+    const type = (el.getAttribute('type') ?? 'text').toLowerCase();
+    return INPUT_TYPE_ROLES[type] === role;
+  }
   const selectors = IMPLICIT_ROLES[role];
   if (!selectors) {
     return false;
   }
-  return selectors.some(sel => {
-    if (sel === 'input' && role === 'textbox') {
-      const type = el.getAttribute('type') ?? 'text';
-      return el.tagName.toLowerCase() === 'input' && ['text', 'search', 'email', 'tel', 'url'].indexOf(type) >= 0;
-    }
-    return el.matches(sel);
-  });
+  return selectors.some(sel => el.matches(sel));
 };
 const queryAllByRole = (container, role, options) => {
   const results = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anu-verzum",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "A \"React-like\" UI library that supports JSX syntax, Redux-like state management, array-rendering, i18n, routing and many more.",
   "keywords": [
     "anu-verzum",