@wavemaker/react-runtime 11.14.1-rc.236

package/components/input/textarea/index.js

@@ -0,0 +1,347 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var lodash = _interopRequireWildcard(require("lodash-es"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
+var _delay = _interopRequireDefault(require("lodash/delay"));
+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 = "form-control app-textarea";
+var WmTextarea = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var name = props.name,
+    readonly = props.readonly,
+    required = props.required,
+    disabled = props.disabled,
+    maxchars = props.maxchars,
+    tabindex = props.tabindex,
+    placeholder = props.placeholder,
+    shortcutkey = props.shortcutkey,
+    autofocus = props.autofocus,
+    arialabel = props.arialabel,
+    _props$limitdisplayte = props.limitdisplaytext,
+    limitdisplaytext = _props$limitdisplayte === void 0 ? "" : _props$limitdisplayte,
+    _props$datavalue = props.datavalue,
+    datavalue = _props$datavalue === void 0 ? "" : _props$datavalue,
+    listener = props.listener,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onKeydown = props.onKeydown,
+    onKeypress = props.onKeypress,
+    onKeyup = props.onKeyup,
+    className = props.className,
+    _props$styles = props.styles,
+    styles = _props$styles === void 0 ? {} : _props$styles,
+    _props$updatedelay = props.updatedelay,
+    updatedelay = _props$updatedelay === void 0 ? "0" : _props$updatedelay,
+    _props$updateon = props.updateon,
+    updateon = _props$updateon === void 0 ? "blur" : _props$updateon,
+    _props$regexp = props.regexp,
+    regexp = _props$regexp === void 0 ? ".*" : _props$regexp,
+    id = props.id;
+
+  // Track internal vs external updates
+  var valueRef = (0, _react.useRef)(datavalue);
+  var isInternalUpdate = (0, _react.useRef)(false);
+  var _useState = (0, _react.useState)(datavalue),
+    displayValue = _useState[0],
+    setDisplayValue = _useState[1];
+  var _useState2 = (0, _react.useState)({
+      show: false,
+      message: ""
+    }),
+    error = _useState2[0],
+    setError = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    isDirty = _useState3[0],
+    setIsDirty = _useState3[1];
+  var _useState4 = (0, _react.useState)(false),
+    isTouched = _useState4[0],
+    setIsTouched = _useState4[1];
+  var textareaRef = (0, _react.useRef)(null);
+
+  // Memoize validation function
+  var validateInput = (0, _react.useCallback)(function (inputValue) {
+    if (!inputValue.trim() && required) {
+      return {
+        isValid: false,
+        message: "This field is required"
+      };
+    }
+    if (regexp && inputValue && !new RegExp(regexp).test(inputValue)) {
+      return {
+        isValid: false,
+        message: "Invalid format"
+      };
+    }
+    if (maxchars && inputValue.length > maxchars) {
+      return {
+        isValid: false,
+        message: "Maximum ".concat(maxchars, " characters allowed")
+      };
+    }
+    return {
+      isValid: true,
+      message: ""
+    };
+  }, [required, regexp, maxchars]);
+  var updateValue = (0, _react.useCallback)(function (newValue, validation) {
+    if (validation.isValid) {
+      isInternalUpdate.current = true;
+      if (listener !== null && listener !== void 0 && listener.onChange) {
+        listener.onChange(props.fieldName || name, {
+          datavalue: newValue,
+          value: newValue,
+          charlength: newValue === null || newValue === void 0 ? void 0 : newValue.length
+        });
+      }
+      if (onChange) {
+        var syntheticEvent = {
+          target: {
+            value: newValue,
+            name: name
+          },
+          currentTarget: textareaRef.current
+        };
+        onChange(syntheticEvent, props, newValue, valueRef.current);
+      }
+
+      // We need this setTimeout to ensure external updates don't override
+      // our internal update immediately
+      setTimeout(function () {
+        isInternalUpdate.current = false;
+      }, 0);
+    }
+  }, [onChange, listener === null || listener === void 0 ? void 0 : listener.onChange]);
+
+  // Debounced update with stable reference
+  var debouncedUpdate = (0, _react.useCallback)(lodash.debounce(function (newValue) {
+    var validation = validateInput(newValue);
+    setError({
+      show: !validation.isValid,
+      message: validation.message
+    });
+    updateValue(newValue, validation);
+  }, parseInt(updatedelay || "10"), {
+    leading: parseInt(updatedelay) === 0
+  }), [updatedelay, validateInput, updateValue]);
+  var debouncedCharLengthUpdate = (0, _react.useCallback)(lodash.debounce(function (charLength) {
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(props.fieldName || name, {
+        charlength: charLength
+      });
+    }
+  }, 10), []);
+
+  // Handle external value changes without overriding user input
+  (0, _react.useEffect)(function () {
+    // Only update if this is an external change (not triggered by our own code)
+    if (datavalue !== valueRef.current && !isInternalUpdate.current) {
+      valueRef.current = datavalue;
+      setDisplayValue(datavalue);
+      if (isDirty) {
+        var validation = validateInput(datavalue);
+        setError({
+          show: !validation.isValid,
+          message: validation.message
+        });
+      }
+    }
+  }, [datavalue, isDirty, validateInput]);
+
+  // Setup keyboard shortcut
+  (0, _react.useEffect)(function () {
+    if (!shortcutkey) return;
+    var handleGlobalKeyDown = function handleGlobalKeyDown(e) {
+      if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
+        var _textareaRef$current;
+        e.preventDefault();
+        (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 || _textareaRef$current.focus();
+      }
+    };
+    window.addEventListener("keydown", handleGlobalKeyDown);
+    return function () {
+      return window.removeEventListener("keydown", handleGlobalKeyDown);
+    };
+  }, [shortcutkey]);
+  var handleUpdateCharLength = (0, _react.useCallback)(function (charLength) {
+    // Only update char length when limitdisplaytext is not empty
+    if (listener !== null && listener !== void 0 && listener.onChange && limitdisplaytext !== "") {
+      debouncedCharLengthUpdate(charLength);
+    }
+  }, [limitdisplaytext, debouncedCharLengthUpdate]);
+  var handleInputChange = (0, _react.useCallback)(function (event) {
+    var newValue = event.target.value;
+    // Update ref immediately on change
+    valueRef.current = newValue;
+    setDisplayValue(newValue);
+    isInternalUpdate.current = true;
+
+    // Always update char length regardless of updateon mode
+    handleUpdateCharLength(newValue.length);
+    if (updateon === "keypress") {
+      debouncedUpdate(newValue);
+    }
+    if (onKeypress) {
+      var _listener$Widgets;
+      onKeypress(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name]);
+    }
+
+    // Reset the flag after a small delay
+    setTimeout(function () {
+      isInternalUpdate.current = false;
+    }, 0);
+  }, []);
+  var handleBlur = (0, _react.useCallback)(function (event) {
+    if (readonly || disabled) {
+      return;
+    }
+    // setIsDirty(true);
+    // Important: Update the flag before calling debouncedUpdate
+    isInternalUpdate.current = true;
+    var currentValue = valueRef.current;
+    if (updateon === "blur") {
+      // For immediate validation feedback
+      var _validation = validateInput(currentValue);
+      setError({
+        show: !_validation.isValid,
+        message: _validation.message
+      });
+
+      // Call the debounced update
+      debouncedUpdate(currentValue);
+    }
+    var validation = validateInput(currentValue);
+    if (!validation.isValid && required) {
+      setIsDirty(true);
+    } else {
+      setIsDirty(false);
+    }
+    if (onBlur) {
+      var _listener$Widgets2;
+      onBlur(event, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name]);
+    }
+
+    // Reset the flag after a small delay
+    setTimeout(function () {
+      isInternalUpdate.current = false;
+    }, 0);
+  }, [updateon, debouncedUpdate, onBlur, listener, name, validateInput, handleUpdateCharLength]);
+  var handleFocus = (0, _react.useCallback)(function (event) {
+    if (onFocus) {
+      var _listener$Widgets3;
+      onFocus(event, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
+    }
+  }, [onFocus, listener, name]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === "Enter" && !event.shiftKey) {
+      // Set flag before update
+      isInternalUpdate.current = true;
+      debouncedUpdate(valueRef.current);
+    }
+    if (onKeydown) {
+      (0, _delay["default"])(function () {
+        var _listener$Widgets4;
+        onKeydown(event, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name]);
+      }, 0);
+    }
+  }, [debouncedUpdate, onKeydown, listener, name]);
+  var handleKeyUp = (0, _react.useCallback)(function (event) {
+    if (onKeyup) {
+      (0, _delay["default"])(function () {
+        var _listener$Widgets5;
+        onKeyup(event, listener === null || listener === void 0 || (_listener$Widgets5 = listener.Widgets) === null || _listener$Widgets5 === void 0 ? void 0 : _listener$Widgets5[name]);
+      }, 0);
+    }
+  }, [onKeyup, listener, name]);
+  var handleMouseEnter = function handleMouseEnter(event) {
+    setIsTouched(true);
+    if (props.onMouseEnter) {
+      props.onMouseEnter(event, props, displayValue, valueRef.current);
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave(event) {
+    setIsTouched(false);
+    if (props.onMouseLeave) {
+      props.onMouseLeave(event, props, displayValue, valueRef.current);
+    }
+  };
+  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    onChange: handleInputChange
+  }, onFocus ? {
+    onFocus: handleFocus
+  } : {}), onKeydown ? {
+    onKeyDown: handleKeyDown
+  } : {}), onKeyup ? {
+    onKeyUp: handleKeyUp
+  } : {}), updateon === "blur" || onBlur ? {
+    onBlur: handleBlur
+  } : {}), props.onMouseEnter ? {
+    onMouseEnter: handleMouseEnter
+  } : {}), props.onMouseLeave ? {
+    onMouseLeave: handleMouseLeave
+  } : {}), props.onClick ? {
+    onClick: props.onClick
+  } : {});
+  return __jsx(_react["default"].Fragment, null, __jsx(_TextField["default"], (0, _extends2["default"])({
+    multiline: true,
+    variant: "standard",
+    name: name,
+    title: props.hint,
+    id: id || name,
+    placeholder: placeholder || "Place your text here",
+    value: displayValue,
+    required: required,
+    disabled: disabled,
+    error: isDirty && error.show,
+    className: (0, _clsx["default"])("app-input-wrapper", isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid"),
+    "aria-readonly": readonly,
+    slotProps: {
+      htmlInput: {
+        type: "textarea",
+        maxLength: maxchars,
+        readOnly: readonly,
+        tabIndex: tabindex,
+        accessKey: shortcutkey,
+        "aria-label": arialabel,
+        autoFocus: autofocus,
+        ref: textareaRef,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        className: (0, _clsx["default"])(DEFAULT_CLASS, className, isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid"),
+        pattern: regexp,
+        style: _objectSpread({
+          height: "none",
+          resize: "both",
+          overflow: "auto"
+        }, styles)
+      }
+    },
+    sx: {
+      width: "100%"
+    }
+  }, events)), maxchars && __jsx(_Box["default"], {
+    className: "textarea-count"
+  }, limitdisplaytext.replaceAll("undefined", "".concat((displayValue === null || displayValue === void 0 ? void 0 : displayValue.length) || 0))));
+}, function (prev, current) {
+  var keys = ["datavalue", "disabled", "required", "readonly", "placeholder", "maxchars", "tabindex", "shortcutkey", "autofocus", "arialabel", "limitdisplaytext"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmTextarea.displayName = "WmTextarea";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmTextarea));

package/components/input/textarea/props.js

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

package/components/layout/footer/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "app-footer clearfix";
+var Default_Styles = {
+  minWidth: "100%"
+};
+function WmFooter(props) {
+  var styles = props.styles,
+    children = props.children,
+    className = props.className,
+    id = props.id;
+  return __jsx(_material.Box, {
+    component: "div",
+    sx: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    id: id
+  }, children);
+}
+WmFooter.displayName = "WmFooter";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmFooter);

package/components/layout/header/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "app-header clearfix app-header-shrink";
+function WmHeader(props) {
+  var styles = props.styles,
+    children = props.children,
+    className = props.className,
+    id = props.id;
+  return __jsx(_Box["default"], {
+    component: "header",
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    id: id,
+    style: styles
+  }, __jsx(_Box["default"], {
+    component: "div",
+    className: "app-header-container"
+  }, children));
+}
+WmHeader.displayName = "WmHeader";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmHeader);

package/components/layout/leftnav/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+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;
+var DEFAULT_CLASS = "app-nav-drawer app-left-panel left-panel-collapsed ";
+function WmLeftPanel(props) {
+  var styles = props.styles,
+    children = props.children,
+    className = props.className,
+    _props$columnwidth = props.columnwidth,
+    columnwidth = _props$columnwidth === void 0 ? 2 : _props$columnwidth,
+    id = props.id,
+    navtype = props.navtype,
+    navheight = props.navheight,
+    onNavHeightChange = props.onNavHeightChange;
+  (0, _react.useEffect)(function () {
+    if (onNavHeightChange) {
+      onNavHeightChange(navheight === "full");
+    }
+    return function () {
+      if (onNavHeightChange) {
+        onNavHeightChange(false);
+      }
+    };
+  }, [navheight, onNavHeightChange]);
+  return __jsx(_Box["default"], {
+    id: id,
+    component: "div",
+    sx: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className, "col-sm-".concat(columnwidth, " app-nav-").concat(navtype))
+  }, children);
+}
+WmLeftPanel.displayName = "WmLeftPanel";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmLeftPanel);

package/components/layout/rightnav/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+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;
+var DEFAULT_CLASS = "app-right-panel";
+var WmRightPanel = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var styles = props.styles,
+    children = props.children,
+    className = props.className,
+    _props$columnwidth = props.columnwidth,
+    columnwidth = _props$columnwidth === void 0 ? 2 : _props$columnwidth,
+    id = props.id;
+  return __jsx(_Box["default"], {
+    id: id,
+    sx: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className, "col-sm-".concat(columnwidth))
+  }, children);
+}, function () {
+  return true;
+});
+WmRightPanel.displayName = "WmRightPanel";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmRightPanel);

package/components/layout/topnav/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _excluded = ["styles", "children", "className", "id"];
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "app-top-nav";
+function WmTopNav(props) {
+  var styles = props.styles,
+    children = props.children,
+    className = props.className,
+    id = props.id,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return __jsx(_Box["default"], (0, _extends2["default"])({
+    component: "section",
+    sx: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    id: id,
+    role: "navigation",
+    "aria-label": "Second level navigation",
+    "data-role": "page-topnav"
+  }, restProps), children);
+}
+WmTopNav.displayName = "WmTopNav";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmTopNav);

package/components/navbar/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _excluded = ["className", "children", "styles", "id"];
+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;
+var DEFAULT_CLASS = "navbar navbar-default app-navbar";
+var WmNavbar = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var className = props.className,
+    children = props.children,
+    styles = props.styles,
+    id = props.id,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return __jsx(_Box["default"], (0, _extends2["default"])({
+    component: "nav",
+    sx: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    id: id
+  }, restProps), __jsx(_Box["default"], {
+    component: "div",
+    className: "container-fluid"
+  }, __jsx(_Box["default"], {
+    component: "div",
+    className: "collapse navbar-collapse"
+  }, children)));
+}, function () {
+  return true;
+});
+WmNavbar.displayName = "WmNavbar";
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)((0, _withBaseWrapper.withBaseWrapper)(WmNavbar));

package/components/navbar/nav/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _List = _interopRequireDefault(require("@mui/material/List"));
+var _navItem = require("@wavemaker/react-runtime/components/navbar/nav-item");
+var _anchor = require("@wavemaker/react-runtime/components/basic/anchor");
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var _menu = _interopRequireDefault(require("@wavemaker/react-runtime/components/navigation/menu"));
+var _constants = require("../../../core/constants");
+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 NavClassTypes = {
+  pills: "nav-pills",
+  tabs: "nav-tabs",
+  navbar: "navbar-nav"
+};
+var DEFAULT_CLASS = "nav app-nav";
+var WmNav = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$styles, _props$styles2;
+  var layout = props.layout,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "navbar" : _props$type,
+    className = props.className,
+    children = props.children,
+    name = props.name,
+    styles = props.styles,
+    id = props.id;
+  var renderNavItem = function renderNavItem() {
+    if (props.dataset && props.dataset.length > 0) {
+      return props.dataset.map(function (item, index) {
+        var subActions = item["itemchildren"] || item["children"] || item["SubActions"];
+        var hasSubactions = Array.isArray(subActions) && subActions.length > 0;
+        var childComponent = hasSubactions ? __jsx(_menu["default"], {
+          name: "",
+          itemlabel: props.itemlabel,
+          listener: {},
+          iconclass: item[props.itemicon],
+          caption: item[props.itemlabel || "label"],
+          dataset: subActions,
+          type: "anchor",
+          onSelect: props.onSelect
+        }) : __jsx(_anchor.WmAnchor, {
+          name: "",
+          listener: {},
+          caption: item[props.itemlabel || "label"],
+          iconclass: item[props.itemicon],
+          iconposition: item[props.iconposition],
+          iconheight: item[props.iconheight],
+          iconwidth: item[props.iconwidth],
+          iconmargin: item[props.iconmargin],
+          hyperlink: (0, _constants.hyperLinkMofify)(item[props.itemlink || "link"]),
+          target: item[props.itemtarget],
+          action: item[props.itemaction],
+          badgevalue: item[props.itembadge],
+          children: item[props.itemchildren],
+          hint: item[props.itemhint]
+        });
+        return __jsx(_navItem.WmNavItem, {
+          key: index,
+          name: "",
+          listener: {},
+          className: hasSubactions ? "nav-".concat(type) : undefined,
+          hint: item[props.itemhint]
+        }, childComponent);
+      });
+    }
+    return children;
+  };
+  return __jsx(_List["default"], {
+    disablePadding: true,
+    sx: _objectSpread({
+      "&": {
+        width: ((_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.width) || "auto",
+        height: ((_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.height) || "auto",
+        justifyContent: "normal"
+      },
+      " & .MuiListItem-root": {
+        width: "auto"
+      }
+    }, styles),
+    role: "navigation",
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className, "nav-".concat(layout, " ").concat(NavClassTypes[type])),
+    id: id
+  }, renderNavItem());
+}, function (prev, current) {
+  var keys = ["layout", "type", "className", "styles", "children"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmNav.displayName = "WmNav";
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)((0, _withBaseWrapper["default"])(WmNav));