anu-verzum 2.1.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.1.0</strong></h3>
 
 <br>
 
@@ -196,6 +195,8 @@ The following types are exported from `anu-verzum` for use in consumer projects:
 | `CreateSelectorFn` | Overloaded interface for `Anu.store.createSelector` — enables full type inference on transformation parameters |
 | `ApiSuccessResponse<T>` | Successful HTTP response `{ status: number; response: T \| null }` |
 | `ApiErrorResponse` | Error HTTP response `{ status: number; response: null }` |
+| `FormatNumberOptions` | Options for `Anu.Intl.formatNumber` — `Intl.NumberFormatOptions` plus an optional `locale` |
+| `ParseNumberOptions` | Options for `Anu.Intl.parseNumber` — `{ locale?: string }` |
 
 #### Library development scripts
 

package/dist/core/components/Intl.d.ts

@@ -14,8 +14,16 @@ export interface AbbreviateNumberOptions {
     decimalPlaces?: number;
     decimalSign?: string;
 }
+export interface FormatNumberOptions extends Intl.NumberFormatOptions {
+    locale?: string;
+}
+export interface ParseNumberOptions {
+    locale?: string;
+}
 declare const Intl: {
     abbreviateNumber: (value: number, options?: AbbreviateNumberOptions) => string | number;
+    formatNumber: (value: number, options?: FormatNumberOptions) => string;
+    parseNumber: (text: string, options?: ParseNumberOptions) => number | null;
     FormattedMessage: ({ id, values, defaultMessage }: FormattedMessageProps) => AnuElement;
     formatMessage: (id: string, values?: Record<string, string | number>, defaultMessage?: string) => string;
     Provider: ({ locale, messages, defaultLocale, children }: IntlProviderProps) => AnuElement | null;

package/dist/core/components/Intl.js

@@ -11,6 +11,11 @@ let __messagesContext = {
   locale: undefined,
   messages: {}
 };
+
+// `Intl.NumberFormatOptions` here refers to the global ECMAScript Intl namespace
+// (type space), not the local `Intl` API object declared at the bottom of this
+// file — a `const` introduces only a value binding, so the type reference is safe.
+
 const IntlProvider = ({
   locale,
   messages,
@@ -113,8 +118,15 @@ const formatMessage = (id, values, defaultMessage) => {
   }
   return textValue;
 };
+
+// Reduce any BCP 47 tag to its lowercase language subtag, e.g. 'hu-HU' / 'HU' → 'hu'.
+// Used for the exact dictionary-key lookups below (UNITS / DECIMAL_SIGN), which key
+// on the language only — so a Provider locale of 'hu', 'HU', or 'hu-HU' all resolve
+// to the same Hungarian entry. (formatNumber/parseNumber keep the full tag, since the
+// region subtag is meaningful to Intl.NumberFormat — e.g. en-US vs en-GB vs en-IN.)
+const getLanguageSubtag = locale => locale ? locale.toLowerCase().split('-')[0] : undefined;
 const abbreviateNumber = (value, options = {}) => {
-  const getByLocale = values => values[__messagesContext.locale || 'default'] || values['default'];
+  const getByLocale = values => values[getLanguageSubtag(__messagesContext.locale) || 'default'] || values['default'];
   const UNITS = {
     hu: ['E', 'm', 'M', 'b'],
     default: ['K', 'M', 'B', 'T']
@@ -162,8 +174,70 @@ const abbreviateNumber = (value, options = {}) => {
   }
   return value;
 };
+
+// The local `Intl` object below shadows the global ECMAScript `Intl`, so number
+// formatting/parsing must reach the real `Intl.NumberFormat` via `globalThis.Intl`.
+const resolveLocale = locale => locale || __messagesContext.locale || undefined;
+const formatNumber = (value, options = {}) => {
+  const {
+    locale,
+    ...numberFormatOptions
+  } = options;
+  if (typeof value !== 'number' || isNaN(value)) {
+    return String(value);
+  }
+  try {
+    return new globalThis.Intl.NumberFormat(resolveLocale(locale), numberFormatOptions).format(value);
+  } catch (err) {
+    console.error(err);
+    return String(value);
+  }
+};
+const parseNumber = (text, options = {}) => {
+  if (typeof text !== 'string') {
+    return null;
+  }
+  try {
+    // Discover the locale's grouping/decimal/minus marks from a known sample,
+    // then normalize the input back into a plain JS-parseable number string.
+    const parts = new globalThis.Intl.NumberFormat(resolveLocale(options.locale)).formatToParts(-12345.6);
+    const groupSign = parts.find(p => p.type === 'group')?.value ?? '';
+    const decimalSign = parts.find(p => p.type === 'decimal')?.value ?? '.';
+    const minusSign = parts.find(p => p.type === 'minusSign')?.value ?? '-';
+    let normalized = text.trim();
+    const isNegative = normalized.indexOf('-') > -1 || !!minusSign && normalized.indexOf(minusSign) > -1;
+
+    // Drop grouping separators: the explicit locale group sign plus any
+    // whitespace (JS `\s` covers NBSP/NNBSP, which several locales group with).
+    if (groupSign) {
+      normalized = normalized.split(groupSign).join('');
+    }
+    normalized = normalized.replace(/\s/g, '');
+
+    // Convert the locale decimal sign to a dot.
+    if (decimalSign && decimalSign !== '.') {
+      normalized = normalized.split(decimalSign).join('.');
+    }
+
+    // Keep only digits and the decimal dot; sign is reapplied from isNegative.
+    normalized = normalized.replace(/[^0-9.]/g, '');
+    if (normalized === '' || normalized === '.') {
+      return null;
+    }
+    const result = Number(normalized);
+    if (isNaN(result)) {
+      return null;
+    }
+    return isNegative ? -result : result;
+  } catch (err) {
+    console.error(err);
+    return null;
+  }
+};
 const Intl = {
   abbreviateNumber,
+  formatNumber,
+  parseNumber,
   FormattedMessage,
   formatMessage,
   Provider: IntlProvider

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/index.d.ts

@@ -102,6 +102,8 @@ declare const Anu: {
     };
     Intl: {
         abbreviateNumber: (value: number, options?: import(".").AbbreviateNumberOptions) => string | number;
+        formatNumber: (value: number, options?: import(".").FormatNumberOptions) => string;
+        parseNumber: (text: string, options?: import(".").ParseNumberOptions) => number | null;
         FormattedMessage: ({ id, values, defaultMessage }: import("./core/components/Intl").FormattedMessageProps) => AnuElement;
         formatMessage: (id: string, values?: Record<string, string | number>, defaultMessage?: string) => string;
         Provider: ({ locale, messages, defaultLocale, children }: import("./core/components/Intl").IntlProviderProps) => AnuElement | null;
@@ -160,7 +162,7 @@ export type { ApiSuccessResponse, ApiErrorResponse } from './server-api/server-a
 export { Component, Fragment, createElement, createRef, createPortal, createContext, render, goTo };
 export { AnulyticsProvider, trackEvent };
 export { store, ServerAPI, Utils, Connector, Feature, History, Intl };
-export type { AbbreviateNumberOptions } from './core/components/Intl';
+export type { AbbreviateNumberOptions, FormatNumberOptions, ParseNumberOptions } from './core/components/Intl';
 declare global {
     namespace JSX {
         interface IntrinsicAttributes {

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/byLabelText.js

@@ -15,8 +15,12 @@ const queryAllByLabelText = (container, label) => {
     }
     const forAttr = labelEl.getAttribute('for');
     if (forAttr) {
-      const input = container.querySelector(`#${CSS.escape(forAttr)}`);
-      if (input) {
+      // The `for` attribute is already an element id, so resolve it with
+      // getElementById — no CSS.escape needed (jsdom omits the browser-only
+      // `CSS` global), and it handles any id characters. Scope to container.
+      const doc = container.ownerDocument ?? document;
+      const input = doc.getElementById(forAttr);
+      if (input && container.contains(input)) {
         results.push(input);
       }
       return;

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.1.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",