@wavemaker-ai/react-runtime 1.0.0-rc.309 → 1.0.0-rc.314

package/components/input/currency/index.js

@@ -1,265 +1,318 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmCurrency = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _constants = require("@wavemaker-ai/react-runtime/components/constants");
-var _material = require("@mui/material");
-var _input = require("@base-ui-components/react/input");
-var _formatUtil = require("@wavemaker-ai/react-runtime/utils/format-util");
-var lodash = _interopRequireWildcard(require("lodash-es"));
-var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
-var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-var __jsx = _react["default"].createElement;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var WmCurrency = function WmCurrency(props) {
-  var _props$currency = props.currency,
-    currency = _props$currency === void 0 ? "USD" : _props$currency,
-    _props$datavalue = props.datavalue,
-    initialDataValue = _props$datavalue === void 0 ? null : _props$datavalue,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$readonly = props.readonly,
-    readonly = _props$readonly === void 0 ? false : _props$readonly,
-    _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "Enter value" : _props$placeholder,
-    _props$arialabel = props.arialabel,
-    arialabel = _props$arialabel === void 0 ? currency : _props$arialabel,
-    name = props.name,
-    _props$tabindex = props.tabindex,
-    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
-    shortcutkey = props.shortcutkey,
-    maxvalue = props.maxvalue,
-    minvalue = props.minvalue,
-    _props$step = props.step,
-    step = _props$step === void 0 ? 1 : _props$step,
-    textAlign = props.textAlign,
-    hint = props.hint,
-    _props$trailingzero = props.trailingzero,
-    trailingzero = _props$trailingzero === void 0 ? false : _props$trailingzero,
-    _props$inputmode = props.inputmode,
-    inputmode = _props$inputmode === void 0 ? "natural" : _props$inputmode,
-    _props$decimalplaces = props.decimalplaces,
-    decimalplaces = _props$decimalplaces === void 0 ? 0 : _props$decimalplaces,
-    _props$updateon = props.updateon,
-    updateon = _props$updateon === void 0 ? "blur" : _props$updateon,
-    _props$updatedelay = props.updatedelay,
-    updatedelay = _props$updatedelay === void 0 ? "0" : _props$updatedelay,
-    onChange = props.onChange,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    onClick = props.onClick,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    onKeyDown = props.onKeyDown,
-    onEnter = props.onEnter,
-    className = props.className,
-    listener = props.listener,
-    styles = props.styles;
-  var _useState = (0, _react.useState)(initialDataValue),
-    datavalue = _useState[0],
-    setDatavalue = _useState[1];
-  var _useState2 = (0, _react.useState)(initialDataValue),
-    prevDatavalue = _useState2[0],
-    setPrevDatavalue = _useState2[1];
-  var _useState3 = (0, _react.useState)(initialDataValue !== null ? initialDataValue.toString() : ""),
-    internalValue = _useState3[0],
-    setInternalValue = _useState3[1];
-  // Add state to preserve the original string input when trailingzero is true
-  var _useState4 = (0, _react.useState)(initialDataValue !== null ? initialDataValue.toString() : ""),
-    rawInputValue = _useState4[0],
-    setRawInputValue = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    isTouched = _useState5[0],
-    setIsTouched = _useState5[1];
-  var inputEl = (0, _react.useRef)(null);
-  var _useState6 = (0, _react.useState)(false),
-    showError = _useState6[0],
-    setShowError = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    isDirty = _useState7[0],
-    setIsDirty = _useState7[1];
-  var currencyCode = currency || _constants.currencyConstants.appDefaultCurrency;
-  var currencySymbol = (0, _react.useMemo)(function () {
-    var _currencyConstants$CU;
-    return ((_currencyConstants$CU = _constants.currencyConstants.CURRENCY_INFO[currencyCode]) === null || _currencyConstants$CU === void 0 ? void 0 : _currencyConstants$CU.symbol) || "$";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { currencyConstants } from "../../constants";
+import { Box } from "@mui/material";
+import { Input } from "@base-ui-components/react/input";
+import {
+  handleStepValue,
+  validateNumericValue,
+  handleNumericInputChange,
+  formatOnBlur,
+  handleValidatedValueUpdate
+} from "../../../utils/format-util";
+import * as lodash from "lodash-es";
+import withFormController from "../../data/form/form-controller/withFormController";
+import withStandalone from "../../../higherOrder/withStandalone";
+const WmCurrency = (props) => {
+  const {
+    currency = "USD",
+    datavalue: initialDataValue = null,
+    disabled = false,
+    readonly = false,
+    required = false,
+    placeholder = "Enter value",
+    arialabel = currency,
+    name,
+    tabindex = 0,
+    shortcutkey,
+    maxvalue,
+    minvalue,
+    step = 1,
+    textAlign,
+    hint,
+    trailingzero = false,
+    inputmode = "natural",
+    decimalplaces = 0,
+    updateon = "blur",
+    updatedelay = "0",
+    onChange,
+    onBlur,
+    onFocus,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onKeyDown,
+    onEnter,
+    className,
+    listener,
+    styles
+  } = props;
+  const [datavalue, setDatavalue] = useState(initialDataValue);
+  const [prevDatavalue, setPrevDatavalue] = useState(initialDataValue);
+  const [internalValue, setInternalValue] = useState(
+    initialDataValue !== null ? initialDataValue.toString() : ""
+  );
+  const [rawInputValue, setRawInputValue] = useState(
+    initialDataValue !== null ? initialDataValue.toString() : ""
+  );
+  const [isTouched, setIsTouched] = useState(false);
+  const inputEl = useRef(null);
+  const [showError, setShowError] = useState(false);
+  const [isDirty, setIsDirty] = useState(false);
+  const currencyCode = currency || currencyConstants.appDefaultCurrency;
+  const currencySymbol = useMemo(() => {
+    var _a;
+    return ((_a = currencyConstants.CURRENCY_INFO[currencyCode]) == null ? void 0 : _a.symbol) || "$";
   }, [currencyCode]);
-  var effectiveDecimalPlaces = (0, _react.useMemo)(function () {
+  const effectiveDecimalPlaces = useMemo(() => {
     if (decimalplaces > 0) return decimalplaces;
     if (inputmode === "financial" && step && step < 1) {
-      var stepStr = step.toString();
+      const stepStr = step.toString();
       if (stepStr.includes(".")) {
         return stepStr.split(".")[1].length;
       }
     }
     return decimalplaces;
   }, [decimalplaces, inputmode, step]);
-  var htmlInputMode = effectiveDecimalPlaces > 0 ? "decimal" : "numeric";
-  var validateValue = (0, _react.useCallback)(function (value) {
-    return (0, _formatUtil.validateNumericValue)(value, required, minvalue, maxvalue);
-  }, [required, minvalue, maxvalue]);
-  var debouncedUpdateValue = (0, _react.useCallback)(lodash.debounce(function (value) {
-    var validation = validateValue(value);
-    setShowError(!validation.isValid);
-    if (onChange || listener !== null && listener !== void 0 && listener.onChange) {
-      (0, _formatUtil.handleValidatedValueUpdate)(value, props.fieldName || name, inputEl.current, onChange, listener, prevDatavalue, setPrevDatavalue, props);
-    }
-  }, parseInt(updatedelay || "10"), {
-    leading: parseInt(updatedelay) === 0
-  }), [validateValue, setShowError, onChange, listener, name, inputEl, prevDatavalue, setPrevDatavalue, updatedelay, props]);
-  var handleMouseEnter = (0, _react.useCallback)(function (event) {
-    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(event, props);
-  }, [onMouseEnter]);
-  var handleMouseLeave = (0, _react.useCallback)(function (event) {
-    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(event, props);
-  }, [onMouseLeave]);
-  var handleClick = (0, _react.useCallback)(function (event) {
-    onClick === null || onClick === void 0 || onClick(event, props);
-  }, [onClick]);
-  var handleFocus = (0, _react.useCallback)(function (e) {
-    onFocus === null || onFocus === void 0 || onFocus(e);
-  }, [onFocus]);
-  var handleArrowPress = (0, _react.useCallback)(function (event, direction) {
-    event.preventDefault();
-    if (readonly || disabled || !step || step === 0) {
-      return;
-    }
-    var targetVal = event.target.value.replace(/,/g, "");
-    var currentValue = targetVal && !isNaN(Number.parseFloat(targetVal)) ? Number.parseFloat(targetVal) : datavalue;
-    var newValue = (0, _formatUtil.handleStepValue)(currentValue, direction, step, effectiveDecimalPlaces, minvalue, maxvalue);
-    var cleanValue = newValue.toString();
-    setInternalValue(cleanValue);
-    setDatavalue(newValue);
-    setRawInputValue(cleanValue);
-    var validation = validateValue(newValue);
-    setShowError(!validation.isValid);
-    if (updateon === "keypress") {
-      debouncedUpdateValue(newValue);
-    }
-  }, [readonly, disabled, step, datavalue, minvalue, maxvalue, effectiveDecimalPlaces, validateValue, onChange, name, props, prevDatavalue, debouncedUpdateValue]);
-  var handleKeyDown = (0, _react.useCallback)(function (event) {
-    if (step && step !== 0) {
-      if (event.key === "ArrowUp") {
-        handleArrowPress(event, "UP");
-        return;
-      } else if (event.key === "ArrowDown") {
-        handleArrowPress(event, "DOWN");
+  const htmlInputMode = effectiveDecimalPlaces > 0 ? "decimal" : "numeric";
+  const validateValue = useCallback(
+    (value) => {
+      return validateNumericValue(value, required, minvalue, maxvalue);
+    },
+    [required, minvalue, maxvalue]
+  );
+  const debouncedUpdateValue = useCallback(
+    lodash.debounce(
+      (value) => {
+        const validation = validateValue(value);
+        setShowError(!validation.isValid);
+        if (onChange || (listener == null ? void 0 : listener.onChange)) {
+          handleValidatedValueUpdate(
+            value,
+            props.fieldName || name,
+            inputEl.current,
+            onChange,
+            listener,
+            prevDatavalue,
+            setPrevDatavalue,
+            props
+          );
+        }
+      },
+      parseInt(updatedelay || "10"),
+      { leading: parseInt(updatedelay) === 0 }
+    ),
+    [
+      validateValue,
+      setShowError,
+      onChange,
+      listener,
+      name,
+      inputEl,
+      prevDatavalue,
+      setPrevDatavalue,
+      updatedelay,
+      props
+    ]
+  );
+  const handleMouseEnter = useCallback(
+    (event) => {
+      onMouseEnter == null ? void 0 : onMouseEnter(event, props);
+    },
+    [onMouseEnter]
+  );
+  const handleMouseLeave = useCallback(
+    (event) => {
+      onMouseLeave == null ? void 0 : onMouseLeave(event, props);
+    },
+    [onMouseLeave]
+  );
+  const handleClick = useCallback(
+    (event) => {
+      onClick == null ? void 0 : onClick(event, props);
+    },
+    [onClick]
+  );
+  const handleFocus = useCallback(
+    (e) => {
+      onFocus == null ? void 0 : onFocus(e);
+    },
+    [onFocus]
+  );
+  const handleArrowPress = useCallback(
+    (event, direction) => {
+      event.preventDefault();
+      if (readonly || disabled || !step || step === 0) {
         return;
       }
-    }
-    if (event.key === "Enter" && onEnter) {
-      onEnter(event);
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  }, [handleArrowPress, onEnter, onKeyDown, step]);
-  var handleInputChange = function handleInputChange(event) {
-    var result = (0, _formatUtil.handleNumericInputChange)(event.target.value, inputmode, effectiveDecimalPlaces, setRawInputValue);
+      const targetVal = event.target.value.replace(/,/g, "");
+      let currentValue = targetVal && !isNaN(Number.parseFloat(targetVal)) ? Number.parseFloat(targetVal) : datavalue;
+      const newValue = handleStepValue(
+        currentValue,
+        direction,
+        step,
+        effectiveDecimalPlaces,
+        minvalue,
+        maxvalue
+      );
+      const cleanValue = newValue.toString();
+      setInternalValue(cleanValue);
+      setDatavalue(newValue);
+      setRawInputValue(cleanValue);
+      const validation = validateValue(newValue);
+      setShowError(!validation.isValid);
+      if (updateon === "keypress") {
+        debouncedUpdateValue(newValue);
+      }
+    },
+    [
+      readonly,
+      disabled,
+      step,
+      datavalue,
+      minvalue,
+      maxvalue,
+      effectiveDecimalPlaces,
+      validateValue,
+      onChange,
+      name,
+      props,
+      prevDatavalue,
+      debouncedUpdateValue
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (step && step !== 0) {
+        if (event.key === "ArrowUp") {
+          handleArrowPress(event, "UP");
+          return;
+        } else if (event.key === "ArrowDown") {
+          handleArrowPress(event, "DOWN");
+          return;
+        }
+      }
+      if (event.key === "Enter" && onEnter) {
+        onEnter(event);
+      }
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+    },
+    [handleArrowPress, onEnter, onKeyDown, step]
+  );
+  const handleInputChange = (event) => {
+    const result = handleNumericInputChange(
+      event.target.value,
+      inputmode,
+      effectiveDecimalPlaces,
+      setRawInputValue
+    );
     if (result.newVal === null && event.target.value !== "") {
-      return; // Invalid input, don't update
+      return;
     }
     setInternalValue(result.inputValue);
     setDatavalue(result.newVal);
-    var validation = validateValue(result.newVal);
+    const validation = validateValue(result.newVal);
     setShowError(!validation.isValid);
     if (updateon === "keypress") {
       debouncedUpdateValue(result.newVal);
     }
   };
-  var handleBlur = function handleBlur(e) {
-    var _listener$Widgets;
-    // Ensure proper formatting on blur
-    var formattedValue = (0, _formatUtil.formatOnBlur)(datavalue, rawInputValue, trailingzero, effectiveDecimalPlaces);
+  const handleBlur = (e) => {
+    var _a;
+    const formattedValue = formatOnBlur(
+      datavalue,
+      rawInputValue,
+      trailingzero,
+      effectiveDecimalPlaces
+    );
     if (formattedValue) {
       setInternalValue(formattedValue);
     }
     if (updateon === "blur") {
       debouncedUpdateValue(datavalue);
     }
-    onBlur === null || onBlur === void 0 || onBlur(e, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name]);
+    onBlur == null ? void 0 : onBlur(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
     if (updateon === "blur") {
       debouncedUpdateValue(datavalue);
     }
-    var validation = validateValue(datavalue);
+    const validation = validateValue(datavalue);
     setIsTouched(true);
     setIsDirty(!validation.isValid);
     setShowError(!validation.isValid);
   };
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (initialDataValue != datavalue) {
       setDatavalue(initialDataValue);
-      var cleanValue = initialDataValue !== null ? initialDataValue.toString() : "";
+      const cleanValue = initialDataValue !== null ? initialDataValue.toString() : "";
       setInternalValue(cleanValue);
       setRawInputValue(cleanValue);
       setPrevDatavalue(datavalue);
     }
   }, [initialDataValue]);
-  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, onClick ? {
-    onClick: handleClick
-  } : {}), onMouseEnter ? {
-    onMouseEnter: handleMouseEnter
-  } : {}), onMouseLeave ? {
-    onMouseLeave: handleMouseLeave
-  } : {}), onFocus ? {
-    onFocus: handleFocus
-  } : {}), {
-    onBlur: handleBlur
-  }), {
-    onChange: handleInputChange
-  }), {
-    onKeyDown: handleKeyDown
-  });
-  return __jsx(_material.Box, {
-    component: "div",
-    hidden: props.hidden,
-    className: "".concat(_constants.currencyConstants.DEFAULT_CLS, " ").concat(className || "", " ").concat(isTouched ? "ng-touched" : "ng-untouched", "  ").concat(isDirty ? "ng-invalid" : ""),
-    inputMode: htmlInputMode
-  }, __jsx(_material.Box, {
-    component: "span",
-    className: "input-group-addon"
-  }, currencySymbol), __jsx(_input.Input, (0, _extends2["default"])({
-    className: "form-control app-textbox app-currency-input app-input-wrapper ".concat(isTouched ? "ng-touched" : "ng-untouched", " ").concat(isDirty ? "ng-invalid" : ""),
-    value: internalValue,
-    name: name,
-    inputMode: htmlInputMode,
-    title: hint,
-    type: "text"
-  }, events, {
-    step: step,
-    min: minvalue,
-    max: maxvalue,
-    disabled: disabled,
-    readOnly: readonly,
-    required: required,
-    placeholder: placeholder,
-    "aria-label": arialabel,
-    tabIndex: tabindex,
-    accessKey: shortcutkey,
-    style: styles,
-    ref: inputEl
-  })));
+  const events = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, onClick ? { onClick: handleClick } : {}), onMouseEnter ? { onMouseEnter: handleMouseEnter } : {}), onMouseLeave ? { onMouseLeave: handleMouseLeave } : {}), onFocus ? { onFocus: handleFocus } : {}), { onBlur: handleBlur }), { onChange: handleInputChange }), { onKeyDown: handleKeyDown });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "div",
+      hidden: props.hidden,
+      className: `${currencyConstants.DEFAULT_CLS} ${className || ""} ${isTouched ? "ng-touched" : "ng-untouched"}  ${isDirty ? "ng-invalid" : ""}`,
+      inputMode: htmlInputMode,
+      children: [
+        /* @__PURE__ */ jsx(Box, { component: "span", className: "input-group-addon", children: currencySymbol }),
+        /* @__PURE__ */ jsx(
+          Input,
+          __spreadProps(__spreadValues({
+            className: `form-control app-textbox app-currency-input app-input-wrapper ${isTouched ? "ng-touched" : "ng-untouched"} ${isDirty ? "ng-invalid" : ""}`,
+            value: internalValue,
+            name,
+            inputMode: htmlInputMode,
+            title: hint,
+            type: "text"
+          }, events), {
+            step,
+            min: minvalue,
+            max: maxvalue,
+            disabled,
+            readOnly: readonly,
+            required,
+            placeholder,
+            "aria-label": arialabel,
+            tabIndex: tabindex,
+            accessKey: shortcutkey,
+            style: styles,
+            ref: inputEl
+          })
+        )
+      ]
+    }
+  );
+};
+const WithFormController = withFormController(WmCurrency);
+const WmCurrencyStandalone = withStandalone(WithFormController);
+var currency_default = withBaseWrapper(WithFormController);
+export {
+  WmCurrencyStandalone as WmCurrency,
+  currency_default as default
 };
-var WithFormController = (0, _withFormController["default"])(WmCurrency);
-var WmCurrencyStandalone = exports.WmCurrency = (0, _withStandalone["default"])(WithFormController);
-/**
- * The WmCurrency component provides a currency input with symbol, formatting, and step controls.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-currency--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-currency--docs)
- *
- * @param props - {@link WmCurrencyProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithFormController);

package/components/input/currency/props.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});