dry-ux 1.81.0 → 1.83.0

package/dist/enhanced-inputs/CurrencyInput.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { InputHTMLAttributes } from "react";
+import { IEnhancedProps } from "./interface";
+interface CurrencyInputProps extends InputHTMLAttributes<HTMLInputElement>, IEnhancedProps {
+    /** Show decimal places (default: true) */
+    decimal_places?: boolean;
+    /** Currency symbol (default: "$") */
+    currency?: string;
+}
+export declare const CurrencyInput: React.ForwardRefExoticComponent<CurrencyInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/enhanced-inputs/CurrencyInput.js

@@ -0,0 +1,65 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrencyInput = void 0;
+const React = require("react");
+const HTMLInputs_1 = require("./HTMLInputs");
+const utilities_1 = require("../helpers/utilities");
+const toRaw = (value) => {
+    if (value == null || value === "")
+        return "";
+    return String(value).replace(/[^0-9.\-]/g, "");
+};
+const formatDisplay = (raw, currency, decimal_places) => {
+    if (raw === "" || raw === "-")
+        return raw;
+    const num = parseFloat(raw);
+    if (isNaN(num))
+        return raw;
+    return currency + (0, utilities_1.formatDollar)(num, decimal_places);
+};
+exports.CurrencyInput = React.forwardRef((_a, ref) => {
+    var _b;
+    var { decimal_places = true, currency = "$", name, value, defaultValue, onChange, onFocus, onBlur } = _a, rest = __rest(_a, ["decimal_places", "currency", "name", "value", "defaultValue", "onChange", "onFocus", "onBlur"]);
+    const initialRaw = toRaw((_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : "");
+    const [rawValue, setRawValue] = React.useState(initialRaw);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const isControlled = value !== undefined;
+    // Sync rawValue when controlled value changes
+    React.useEffect(() => {
+        if (isControlled) {
+            setRawValue(toRaw(value));
+        }
+    }, [value]);
+    const displayValue = isFocused ? rawValue : formatDisplay(rawValue, currency, decimal_places);
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    };
+    const handleChange = (e) => {
+        const raw = toRaw(e.target.value);
+        setRawValue(raw);
+        if (onChange) {
+            // Provide the raw numeric value to the parent's onChange
+            const syntheticEvent = Object.assign(Object.assign({}, e), { target: Object.assign(Object.assign({}, e.target), { value: raw, name }) });
+            onChange(syntheticEvent);
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HTMLInputs_1.Input, Object.assign({ ref: ref }, rest, { type: "text", value: displayValue, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange })),
+        React.createElement("input", { type: "hidden", name: name, value: rawValue })));
+});

package/dist/enhanced-inputs/Element.d.ts

@@ -92,7 +92,7 @@ export declare class Element {
      * @param once Whether the event should only fire once.
      * @returns A function to remove the event listener, or undefined if the element is not suitable for events.
      */
-    addEventListener(type: string, handler: (e: Event) => void, once?: boolean): () => void | undefined;
+    addEventListener(type: string, handler: (e: any) => void, once?: boolean): () => void | undefined;
     /**
      * Adds a change event listener to the element.
      * @param handler The event handler function.
@@ -106,21 +106,21 @@ export declare class Element {
      * @param once Whether the event should only fire once.
      * @returns A function to remove the event listener.
      */
-    click(handler: (e: Event) => void, once?: boolean): () => void | undefined;
+    click(handler: (e: MouseEvent) => void, once?: boolean): () => void | undefined;
     /**
      * Adds a focus event listener to the element.
      * @param handler The event handler function.
      * @param once Whether the event should only fire once.
      * @returns A function to remove the event listener.
      */
-    focus(handler: (e: Event) => void, once?: boolean): () => void | undefined;
+    focus(handler: (e: FocusEvent) => void, once?: boolean): () => void | undefined;
     /**
      * Adds a blur event listener to the element.
      * @param handler The event handler function.
      * @param once Whether the event should only fire once.
      * @returns A function to remove the event listener.
      */
-    blur(handler: (e: Event) => void, once?: boolean): () => void | undefined;
+    blur(handler: (e: FocusEvent) => void, once?: boolean): () => void | undefined;
     /**
      * Adds a keydown event listener to the element.
      * @param handler The keyboard event handler function.

package/dist/enhanced-inputs/Element.js

@@ -124,14 +124,11 @@ class Element {
      * @returns A function to remove the event listener, or undefined if the element is not suitable for events.
      */
     addEventListener(type, handler, once) {
-        if ((this.nativeInput instanceof HTMLInputElement ||
-            this.nativeInput instanceof HTMLSelectElement ||
-            this.nativeInput instanceof HTMLTextAreaElement) &&
-            !!type) {
-            const abortController = new AbortController();
-            this.nativeInput.addEventListener("change", handler, { once, signal: abortController.signal });
-            return abortController.abort;
-        }
+        if (!type)
+            return;
+        const abortController = new AbortController();
+        this.native.addEventListener(type, handler, { once, signal: abortController.signal });
+        return () => abortController.abort();
     }
     /**
      * Adds a change event listener to the element.

package/dist/index.d.ts

@@ -19,3 +19,4 @@ export { Viewport } from "./ui-utils/ViewportDetect";
 export * from "./enhanced-inputs/HTMLInputs";
 export * from "./enhanced-inputs/interface";
 export { Element, InputElement } from "./enhanced-inputs/Element";
+export { CurrencyInput } from "./enhanced-inputs/CurrencyInput";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Element = exports.Viewport = exports.Validation = exports.RenderWhenVisible = exports.Spinner = exports.Loader = exports.ErrorScreen = exports.ErrorBoundary = exports.DajaxiceProxy = exports.unflatten = exports.flatten = exports.classSet = exports.DryUXProvider = exports.Money = exports.DryUXRenderer = exports.DryUXContext = exports.useDryUxContext = void 0;
+exports.CurrencyInput = exports.Element = exports.Viewport = exports.Validation = exports.RenderWhenVisible = exports.Spinner = exports.Loader = exports.ErrorScreen = exports.ErrorBoundary = exports.DajaxiceProxy = exports.unflatten = exports.flatten = exports.classSet = exports.DryUXProvider = exports.Money = exports.DryUXRenderer = exports.DryUXContext = exports.useDryUxContext = void 0;
 var UIUtilProvider_1 = require("./ui-utils/UIUtilProvider");
 Object.defineProperty(exports, "useDryUxContext", { enumerable: true, get: function () { return UIUtilProvider_1.useUIUtilContext; } });
 Object.defineProperty(exports, "DryUXContext", { enumerable: true, get: function () { return UIUtilProvider_1.UIUtilContext; } });
@@ -52,3 +52,5 @@ __exportStar(require("./enhanced-inputs/HTMLInputs"), exports);
 __exportStar(require("./enhanced-inputs/interface"), exports);
 var Element_1 = require("./enhanced-inputs/Element");
 Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return Element_1.Element; } });
+var CurrencyInput_1 = require("./enhanced-inputs/CurrencyInput");
+Object.defineProperty(exports, "CurrencyInput", { enumerable: true, get: function () { return CurrencyInput_1.CurrencyInput; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dry-ux",
-  "version": "1.81.0",
+  "version": "1.83.0",
   "description": "",
   "main": "dist/index",
   "scripts": {