dry-ux 1.84.0 → 1.85.0

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

@@ -6,6 +6,8 @@ interface CurrencyInputProps extends InputHTMLAttributes<HTMLInputElement>, IEnh
     decimal_places?: boolean;
     /** Currency symbol (default: "$") */
     currency?: string;
+    /** Show a clear button when the field has a value (default: false) */
+    clearable?: boolean;
 }
 export declare const CurrencyInput: React.ForwardRefExoticComponent<CurrencyInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/enhanced-inputs/CurrencyInput.js

@@ -30,11 +30,12 @@ const formatDisplay = (raw, currency, 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"]);
+    var { decimal_places = true, currency = "$", clearable = false, name, value, defaultValue, onChange, onFocus, onBlur, disabled, readOnly } = _a, rest = __rest(_a, ["decimal_places", "currency", "clearable", "name", "value", "defaultValue", "onChange", "onFocus", "onBlur", "disabled", "readOnly"]);
     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 hiddenRef = React.useRef(null);
+    const inputRef = React.useRef(null);
     const isControlled = value !== undefined;
     // Sync rawValue when controlled value changes
     React.useEffect(() => {
@@ -63,7 +64,36 @@ exports.CurrencyInput = React.forwardRef((_a, ref) => {
             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 })),
+    const handleClear = () => {
+        const input = inputRef.current;
+        if (input) {
+            const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+            setter.call(input, "");
+            input.dispatchEvent(new Event("input", { bubbles: true }));
+            input.focus();
+        }
+    };
+    const showClear = clearable && rawValue !== "" && !disabled && !readOnly;
+    return (React.createElement("span", { className: "dry-ux-currency-input-wrapper", style: { position: "relative", display: "inline-block" } },
+        React.createElement(HTMLInputs_1.Input, Object.assign({ ref: (el) => {
+                inputRef.current = el;
+                if (typeof ref === "function")
+                    ref(el);
+                else if (ref)
+                    ref.current = el;
+            } }, rest, { type: "text", disabled: disabled, readOnly: readOnly, value: displayValue, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, style: clearable ? Object.assign(Object.assign({}, (rest.style || {})), { paddingRight: 28 }) : rest.style })),
+        showClear && (React.createElement("button", { type: "button", className: "dry-ux-currency-clear-btn", tabIndex: -1, onClick: handleClear, "aria-label": "Clear", style: {
+                position: "absolute",
+                right: 6,
+                top: "50%",
+                transform: "translateY(-50%)",
+                border: "none",
+                background: "transparent",
+                cursor: "pointer",
+                padding: "0 4px",
+                lineHeight: 1,
+                fontSize: 14,
+                color: "#999",
+            } }, "\u2715")),
         React.createElement("input", { ref: hiddenRef, type: "hidden", name: name, value: rawValue, className: "validate validate-hidden" })));
 });

package/dist/styles/modal.css

@@ -59,6 +59,19 @@
     left: 50%!important;
 }
 
+.dry-ux-modal.draggable .modal-dialog {
+    transform: none!important;
+}
+
+.dry-ux-modal.draggable .modal-header {
+    cursor: move;
+    user-select: none;
+}
+
+.dry-ux-modal.draggable .modal-header.dragging {
+    cursor: move;
+}
+
 .dry-ux-modal-backdrop {
     position: fixed!important;
     top: 0!important;

package/dist/ui-utils/Modal.js

@@ -5,14 +5,18 @@ const react_bootstrap_1 = require("react-bootstrap");
 require("../styles/modal.css");
 const classSet_1 = require("../helpers/classSet");
 const ActionsOverlay_1 = require("./ActionsOverlay");
+const useDraggable_1 = require("./useDraggable");
 /**
  * Modal component that renders a Bootstrap modal with custom configurations.
  *
  * @param {ModalProps} props - The props for the Modal component.
  * @returns {JSX.Element} The Modal component.
  */
-const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, options: { content, footerContent, cssClass = "", closeBtn, title, width, onClose, titleCloseBtn = true, centered, trackingId, actions = [], }, }, config: { defaultModalStyles = false, styles = {}, centered: globalCentered, onOpen, onClose: globalOnClose }, providerId, debug, }) => {
+const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, options: { content, footerContent, cssClass = "", closeBtn, title, width, onClose, titleCloseBtn = true, centered, trackingId, draggable, actions = [], }, }, config: { defaultModalStyles = false, styles = {}, centered: globalCentered, onOpen, onClose: globalOnClose }, providerId, debug, }) => {
     const isCentered = centered !== null && centered !== void 0 ? centered : globalCentered;
+    const isDraggable = !!draggable && !!title;
+    const draggableClass = isDraggable ? `dry-ux-draggable-${id}` : "";
+    (0, useDraggable_1.useDraggable)(isDraggable, shown, `dry-ux-draggable-${id}`);
     const applyStyles = React.useCallback(() => {
         document.querySelectorAll(".modal-dialog").forEach((el) => {
             el.style.width = typeof width == "number" ? `${width}px` : width;
@@ -45,6 +49,8 @@ const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, opt
     const modalCssClass = (0, classSet_1.classSet)({
         "dry-ux-modal": true,
         centered: isCentered,
+        draggable: isDraggable,
+        [draggableClass]: isDraggable,
         [cssClass]: true,
         "default-styles": defaultModalStyles,
     });

package/dist/ui-utils/UIUtil.interface.d.ts

@@ -160,6 +160,10 @@ export type PopUpOptions = {
      * The tracking ID for the modal.
      */
     trackingId?: string;
+    /**
+     * If true, the modal can be dragged by the title bar.
+     */
+    draggable?: boolean;
     /**
      * If true, the modal will be shown.
      */

package/dist/ui-utils/useDraggable.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook that makes a modal dialog draggable by its header.
+ * Finds the modal via the .draggable CSS class, attaches mousedown to .modal-header,
+ * and applies transform: translate() to the .modal-dialog element.
+ *
+ * @param enabled - Whether dragging is enabled.
+ * @param shown - Current shown state; position resets when modal reopens.
+ * @param modalClass - Unique CSS class on the modal to identify it.
+ */
+export declare const useDraggable: (enabled: boolean, shown: boolean, modalClass: string) => void;

package/dist/ui-utils/useDraggable.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDraggable = void 0;
+const React = require("react");
+/**
+ * Hook that makes a modal dialog draggable by its header.
+ * Finds the modal via the .draggable CSS class, attaches mousedown to .modal-header,
+ * and applies transform: translate() to the .modal-dialog element.
+ *
+ * @param enabled - Whether dragging is enabled.
+ * @param shown - Current shown state; position resets when modal reopens.
+ * @param modalClass - Unique CSS class on the modal to identify it.
+ */
+const useDraggable = (enabled, shown, modalClass) => {
+    const cleanupRef = React.useRef(null);
+    React.useEffect(() => {
+        if (cleanupRef.current) {
+            cleanupRef.current();
+            cleanupRef.current = null;
+        }
+        if (!enabled || !shown)
+            return;
+        // Defer to next frame to ensure portal DOM is committed
+        const raf = requestAnimationFrame(() => {
+            const modal = document.querySelector(`.${modalClass}`);
+            const dialog = modal === null || modal === void 0 ? void 0 : modal.querySelector(".modal-dialog");
+            const header = dialog === null || dialog === void 0 ? void 0 : dialog.querySelector(".modal-header");
+            if (!dialog || !header)
+                return;
+            const offset = { x: 0, y: 0 };
+            const startPos = { x: 0, y: 0 };
+            let dragging = false;
+            dialog.style.setProperty("transform", "none", "important");
+            const onMouseDown = (e) => {
+                if (e.target.closest(".close"))
+                    return;
+                dragging = true;
+                startPos.x = e.clientX - offset.x;
+                startPos.y = e.clientY - offset.y;
+                header.classList.add("dragging");
+                e.preventDefault();
+            };
+            const onMouseMove = (e) => {
+                if (!dragging)
+                    return;
+                offset.x = e.clientX - startPos.x;
+                offset.y = e.clientY - startPos.y;
+                dialog.style.setProperty("transform", `translate(${offset.x}px, ${offset.y}px)`, "important");
+            };
+            const onMouseUp = () => {
+                if (!dragging)
+                    return;
+                dragging = false;
+                header.classList.remove("dragging");
+            };
+            header.addEventListener("mousedown", onMouseDown);
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+            cleanupRef.current = () => {
+                header.removeEventListener("mousedown", onMouseDown);
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            };
+        });
+        return () => {
+            cancelAnimationFrame(raf);
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = null;
+            }
+        };
+    }, [enabled, shown, modalClass]);
+};
+exports.useDraggable = useDraggable;

package/package.json

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