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

package/components/form/button/index.js

@@ -1,255 +1,306 @@
-"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.WmButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _image = _interopRequireDefault(require("next/image"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
-var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _resourceUrl = require("@wavemaker-ai/react-runtime/utils/resource-url");
-var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
-var _excluded = ["iconurl", "iconclass", "iconwidth", "iconheight", "iconmargin", "iconposition", "caption", "badgevalue", "children", "styles", "className", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onKeydown", "onKeypress", "onKeyup", "listener", "name", "disabled", "type", "shortcutkey", "arialabel", "show"];
-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 DEFAULT_CLASS = "btn app-button";
-var WmButton = exports.WmButton = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var _listener$appLocale;
-  var iconurl = props.iconurl,
-    iconclass = props.iconclass,
-    iconwidth = props.iconwidth,
-    iconheight = props.iconheight,
-    iconmargin = props.iconmargin,
-    _props$iconposition = props.iconposition,
-    iconposition = _props$iconposition === void 0 ? "left" : _props$iconposition,
-    caption = props.caption,
-    badgevalue = props.badgevalue,
-    children = props.children,
-    styles = props.styles,
-    className = props.className,
-    onClick = props.onClick,
-    onDoubleClick = props.onDoubleClick,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    onKeydown = props.onKeydown,
-    onKeypress = props.onKeypress,
-    onKeyup = props.onKeyup,
-    listener = props.listener,
-    name = props.name,
-    disabled = props.disabled,
-    _props$type = props.type,
-    type = _props$type === void 0 ? "button" : _props$type,
-    shortcutkey = props.shortcutkey,
-    _props$arialabel = props.arialabel,
-    arialabel = _props$arialabel === void 0 ? caption : _props$arialabel,
-    _props$show = props.show,
-    show = _props$show === void 0 ? "true" : _props$show,
-    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var safeCaption = (caption === null || caption === void 0 ? void 0 : caption.toString().replace(/undefined|null/g, "")) || "";
-  var btnRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    if (!shortcutkey) return;
-    var handleGlobalKeyDown = function handleGlobalKeyDown(e) {
-      if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
-        var _btnRef$current;
-        e.preventDefault();
-        (_btnRef$current = btnRef.current) === null || _btnRef$current === void 0 || _btnRef$current.focus();
+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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from "react";
+import clsx from "clsx";
+import Image from "next/image";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Badge from "@mui/material/Badge";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { prefixPrefabResourceUrl } from "../../../utils/resource-url";
+import { removeInvalidAttributes } from "../../../utils/attr";
+const DEFAULT_CLASS = "btn app-button";
+const WmButton = memo(
+  (props) => {
+    var _b;
+    const _a = props, {
+      iconurl,
+      iconclass,
+      iconwidth,
+      iconheight,
+      iconmargin,
+      iconposition = "left",
+      caption,
+      badgevalue,
+      children,
+      styles,
+      className,
+      onClick,
+      onDoubleClick,
+      onMouseEnter,
+      onMouseLeave,
+      onFocus,
+      onBlur,
+      onKeydown,
+      onKeypress,
+      onKeyup,
+      listener,
+      name,
+      disabled,
+      type = "button",
+      shortcutkey,
+      arialabel = caption,
+      show = "true"
+    } = _a, restProps = __objRest(_a, [
+      "iconurl",
+      "iconclass",
+      "iconwidth",
+      "iconheight",
+      "iconmargin",
+      "iconposition",
+      "caption",
+      "badgevalue",
+      "children",
+      "styles",
+      "className",
+      "onClick",
+      "onDoubleClick",
+      "onMouseEnter",
+      "onMouseLeave",
+      "onFocus",
+      "onBlur",
+      "onKeydown",
+      "onKeypress",
+      "onKeyup",
+      "listener",
+      "name",
+      "disabled",
+      "type",
+      "shortcutkey",
+      "arialabel",
+      "show"
+    ]);
+    const safeCaption = (caption == null ? void 0 : caption.toString().replace(/undefined|null/g, "")) || "";
+    const btnRef = useRef(null);
+    useEffect(() => {
+      if (!shortcutkey) return;
+      const handleGlobalKeyDown = (e) => {
+        var _a2;
+        if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
+          e.preventDefault();
+          (_a2 = btnRef.current) == null ? void 0 : _a2.focus();
+        }
+      };
+      window.addEventListener("keydown", handleGlobalKeyDown);
+      return () => window.removeEventListener("keydown", handleGlobalKeyDown);
+    }, [shortcutkey]);
+    function handleClick(event) {
+      var _a2;
+      event.preventDefault();
+      if (!props.stopPropagation) {
+        event.stopPropagation();
       }
-    };
-    window.addEventListener("keydown", handleGlobalKeyDown);
-    return function () {
-      return window.removeEventListener("keydown", handleGlobalKeyDown);
-    };
-  }, [shortcutkey]);
-  function handleClick(event) {
-    var _listener$Widgets;
-    event.preventDefault();
-    if (!props.stopPropagation) {
+      onClick == null ? void 0 : onClick(event, ((_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[(props == null ? void 0 : props.name) || ""]) || props);
+    }
+    function handleOnBlur(event) {
+      event.preventDefault();
+      onBlur == null ? void 0 : onBlur(event, props);
+    }
+    function handleOnFocus(event) {
+      event.preventDefault();
       event.stopPropagation();
+      onFocus == null ? void 0 : onFocus(event, props);
     }
-    onClick === null || onClick === void 0 || onClick(event, (listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[(props === null || props === void 0 ? void 0 : props.name) || ""]) || props);
-  }
-  function handleOnBlur(event) {
-    event.preventDefault();
-    onBlur === null || onBlur === void 0 || onBlur(event, props);
-  }
-  function handleOnFocus(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    onFocus === null || onFocus === void 0 || onFocus(event, props);
-  }
-  function handleMouseEnter(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(event, props);
-  }
-  function handleMouseLeave(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(event, props);
-  }
-  function handleDoubleClick(event) {
-    event.preventDefault();
-    onDoubleClick === null || onDoubleClick === void 0 || onDoubleClick(event, props);
-  }
-  function handleKeyDown(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    onKeydown === null || onKeydown === void 0 || onKeydown(event, props);
-  }
-  function handleKeyUp(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    onKeyup === null || onKeyup === void 0 || onKeyup(event, props);
-  }
-  function handleKeyPress(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    onKeypress === null || onKeypress === void 0 || onKeypress(event, props);
-  }
-  var handleMouseDown = function handleMouseDown(event) {
-    var formName = props.formName;
-    if (type === "reset" && formName) {
-      var _document;
+    function handleMouseEnter(event) {
       event.preventDefault();
-      (_document = document) === null || _document === void 0 || (_document = _document.activeElement) === null || _document === void 0 || _document.blur();
-      setTimeout(function () {
-        var _listener$Widgets2, _listener$Widgets2$fo;
-        listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 || (_listener$Widgets2 = _listener$Widgets2[formName]) === null || _listener$Widgets2 === void 0 || (_listener$Widgets2$fo = _listener$Widgets2.formreset) === null || _listener$Widgets2$fo === void 0 || _listener$Widgets2$fo.call(_listener$Widgets2);
-        onClick === null || onClick === void 0 || onClick(event, props);
-      }, 0);
+      event.stopPropagation();
+      onMouseEnter == null ? void 0 : onMouseEnter(event, props);
     }
-  };
-  var EVENTS = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, onBlur && {
-    onBlur: handleOnBlur
-  }), onFocus && {
-    onFocus: handleOnFocus
-  }), onMouseEnter && {
-    onMouseEnter: handleMouseEnter
-  }), onMouseLeave && {
-    onMouseLeave: handleMouseLeave
-  }), onDoubleClick && {
-    onDoubleClick: handleDoubleClick
-  }), onKeydown && {
-    onKeyDown: handleKeyDown
-  }), onKeyup && {
-    onKeyUp: handleKeyUp
-  }), onClick && {
-    onClick: handleClick
-  }), onKeypress && {
-    onKeyPress: handleKeyPress
-  }), {
-    onMouseDown: handleMouseDown
-  });
-  return __jsx(_Button["default"], (0, _extends2["default"])({
-    sx: {
-      all: "initial",
-      position: "relative",
-      boxSizing: "border-box"
-    },
-    style: styles,
-    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
-    disableFocusRipple: true,
-    disableRipple: true,
-    disableElevation: true,
-    disableTouchRipple: true,
-    "icon-position": props.iconposition,
-    name: name,
-    id: name,
-    type: type,
-    ref: btnRef,
-    caption: caption,
-    disabled: disabled,
-    "aria-label": safeCaption,
-    title: props.hint,
-    show: show === null || show === void 0 ? void 0 : show.toString()
-  }, (0, _attr.removeInvalidAttributes)(restProps), EVENTS), iconurl && __jsx(_image["default"], {
-    "data-identifier": "img",
-    alt: "button image",
-    src: (0, _resourceUrl.prefixPrefabResourceUrl)(iconurl, props.prefabName),
-    className: "button-image-icon",
-    width: parseInt(iconwidth || "24", 10),
-    height: parseInt(iconheight || "24", 10),
-    style: {
-      width: iconwidth,
-      height: iconheight || "auto",
-      margin: iconmargin || "0 4"
+    function handleMouseLeave(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      onMouseLeave == null ? void 0 : onMouseLeave(event, props);
     }
-  }), iconclass && __jsx(_react["default"].Fragment, null, __jsx("i", {
-    className: (0, _clsx["default"])("app-icon", iconclass),
-    "aria-hidden": "true",
-    style: {
-      width: iconwidth || "auto",
-      height: iconheight || "auto",
-      margin: iconmargin || "0 4",
-      fontSize: iconheight || "24"
+    function handleDoubleClick(event) {
+      event.preventDefault();
+      onDoubleClick == null ? void 0 : onDoubleClick(event, props);
     }
-  }), __jsx(_Box["default"], {
-    component: "span",
-    className: "sr-only"
-  }, safeCaption, " ", listener === null || listener === void 0 || (_listener$appLocale = listener.appLocale) === null || _listener$appLocale === void 0 ? void 0 : _listener$appLocale.LABEL_ICON)), __jsx(_Box["default"], {
-    component: "span",
-    className: "btn-caption",
-    dangerouslySetInnerHTML: {
-      __html: safeCaption || ""
-    },
-    sx: {
-      color: "inherit",
-      fontSize: "inherit",
-      fontFamily: "inherit",
-      fontStyle: "inherit"
+    function handleKeyDown(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      onKeydown == null ? void 0 : onKeydown(event, props);
     }
-  }), children, badgevalue && __jsx(_Badge["default"], {
-    sx: {
-      all: "initial",
-      lineHeight: "inherit",
-      letterSpacing: "inherit",
-      fontSize: "inherit"
-    },
-    badgeContent: badgevalue,
-    slotProps: {
-      badge: {
-        className: "badge pull-right",
-        style: {
-          position: "absolute",
-          right: "0em",
-          top: "0em",
-          height: "inherit",
-          fontFamily: "initial",
-          width: "inherit"
-        }
-      }
+    function handleKeyUp(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      onKeyup == null ? void 0 : onKeyup(event, props);
+    }
+    function handleKeyPress(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      onKeypress == null ? void 0 : onKeypress(event, props);
     }
-  }));
-}, function (prev, current) {
-  var keys = ["iconurl", "iconclass", "iconheight", "iconmargin", "caption", "badgevalue", "disabled", "hidden", "onClick", "show", "styles", "className"];
-  return keys.every(function (key) {
-    return prev[key] === current[key];
-  });
-});
+    const handleMouseDown = (event) => {
+      var _a2;
+      const formName = props.formName;
+      if (type === "reset" && formName) {
+        event.preventDefault();
+        (_a2 = document == null ? void 0 : document.activeElement) == null ? void 0 : _a2.blur();
+        setTimeout(() => {
+          var _a3, _b2, _c;
+          (_c = (_b2 = (_a3 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a3[formName]) == null ? void 0 : _b2.formreset) == null ? void 0 : _c.call(_b2);
+          onClick == null ? void 0 : onClick(event, props);
+        }, 0);
+      }
+    };
+    const EVENTS = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, onBlur && { onBlur: handleOnBlur }), onFocus && { onFocus: handleOnFocus }), onMouseEnter && { onMouseEnter: handleMouseEnter }), onMouseLeave && { onMouseLeave: handleMouseLeave }), onDoubleClick && { onDoubleClick: handleDoubleClick }), onKeydown && { onKeyDown: handleKeyDown }), onKeyup && { onKeyUp: handleKeyUp }), onClick && { onClick: handleClick }), onKeypress && { onKeyPress: handleKeyPress }), { onMouseDown: handleMouseDown });
+    return /* @__PURE__ */ jsxs(
+      Button,
+      __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
+        sx: {
+          all: "initial",
+          position: "relative",
+          boxSizing: "border-box"
+        },
+        style: styles,
+        className: clsx(DEFAULT_CLASS, className),
+        disableFocusRipple: true,
+        disableRipple: true,
+        disableElevation: true,
+        disableTouchRipple: true,
+        "icon-position": props.iconposition
+      }, { name }), {
+        id: name,
+        type,
+        ref: btnRef,
+        caption,
+        disabled,
+        "aria-label": safeCaption,
+        title: props.hint,
+        show: show == null ? void 0 : show.toString()
+      }), removeInvalidAttributes(restProps)), EVENTS), {
+        children: [
+          iconurl && /* @__PURE__ */ jsx(
+            Image,
+            {
+              "data-identifier": "img",
+              alt: "button image",
+              src: prefixPrefabResourceUrl(iconurl, props.prefabName),
+              className: "button-image-icon",
+              width: parseInt(iconwidth || "24", 10),
+              height: parseInt(iconheight || "24", 10),
+              style: {
+                width: iconwidth,
+                height: iconheight || "auto",
+                margin: iconmargin || "0 4"
+              }
+            }
+          ),
+          iconclass && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "i",
+              {
+                className: clsx("app-icon", iconclass),
+                "aria-hidden": "true",
+                style: {
+                  width: iconwidth || "auto",
+                  height: iconheight || "auto",
+                  margin: iconmargin || "0 4",
+                  fontSize: iconheight || "24"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { component: "span", className: "sr-only", children: [
+              safeCaption,
+              " ",
+              (_b = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _b.LABEL_ICON
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "span",
+              className: "btn-caption",
+              dangerouslySetInnerHTML: { __html: safeCaption || "" },
+              sx: {
+                color: "inherit",
+                fontSize: "inherit",
+                fontFamily: "inherit",
+                fontStyle: "inherit"
+              }
+            }
+          ),
+          children,
+          badgevalue && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              sx: {
+                all: "initial",
+                lineHeight: "inherit",
+                letterSpacing: "inherit",
+                fontSize: "inherit"
+              },
+              badgeContent: badgevalue,
+              slotProps: {
+                badge: {
+                  className: "badge pull-right",
+                  style: {
+                    position: "absolute",
+                    right: "0em",
+                    top: "0em",
+                    height: "inherit",
+                    fontFamily: "initial",
+                    width: "inherit"
+                  }
+                }
+              }
+            }
+          )
+        ]
+      })
+    );
+  },
+  (prev, current) => {
+    const keys = [
+      "iconurl",
+      "iconclass",
+      "iconheight",
+      "iconmargin",
+      "caption",
+      "badgevalue",
+      "disabled",
+      "hidden",
+      "onClick",
+      "show",
+      "styles",
+      "className"
+    ];
+    return keys.every((key) => prev[key] === current[key]);
+  }
+);
 WmButton.displayName = "WmButton";
-
-/**
- * The WmButton component is a flexible button that supports icons, badges,
- * shortcuts, and various events.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-button--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-button--docs)
- *
- * @param props - {@link WmButtonProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmButton);
+var button_default = withBaseWrapper(WmButton);
+export {
+  WmButton,
+  button_default as default
+};

package/components/form/button/props.js

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