@wavemaker-ai/react-runtime 1.0.0-rc.324 → 1.0.0-rc.328

package/components/data/table/utils/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type CSSProperties } from "react";
 import { WmTableColumnProps, WmTableRowActionProps, WmTableRowProps, WmTableActionProps, ValidationResult } from "../props";
 declare const formWidgets: readonly ["WmText", "WmTextarea", "WmCheckbox", "WmSlider", "WmCurrency", "WmSwitch", "WmSelect", "WmCheckboxSet", "WmRadioSet", "WmDate", "WmTime", "WmTimestamp", "WmRating", "WmDatetime", "WmSearch", "WmChips", "WmColorPicker"];
 type FormWidgetType = (typeof formWidgets)[number];
@@ -7,7 +7,8 @@ export type EditWidgetType = FormWidgetType;
  * Angular behavior: when a dataset is a non-array object (e.g. a REST API response
  * like { users: [...], total: 100 }), return the first array-valued property as the
  * actual row data.  If the value is already an array it is returned as-is; if no
- * array property is found (e.g. a params snapshot) an empty array is returned.
+ * array property is found, the object itself is a single record (e.g. a get-by-id
+ * service response) and is wrapped as a one-row array.
  */
 export declare const extractDataArray: (dataset: any) => any[];
 /**
@@ -46,6 +47,15 @@ export declare const parseTableStructureWithGroups: (children: React.ReactNode)
 export declare const flattenTableStructure: (structure: TableStructureItem[]) => WmTableColumnProps[];
 export declare const parseTableRowActions: (children: React.ReactNode) => WmTableRowActionProps[];
 export declare const parseTableActions: (children: React.ReactNode) => WmTableActionProps[];
+/** Resolve row-bound expansion props. Uses precomputed map first, then tableRowProps(rowData) fallback. */
+export declare const getRowExpansionConfig: (config: WmTableRowProps | null, rowId: string, rowData?: any) => WmTableRowProps | null;
+/**
+ * Whether the expansion column should be reserved in the table layout.
+ * When tableRowProps gates show per row (e.g. hierarchy children.length), hide the
+ * column entirely if no current row would show an expand control — avoids empty
+ * row-expansion-cell spacers for leaf-only datasets.
+ */
+export declare const isRowExpansionVisible: (config: WmTableRowProps | null | undefined, dataset: any[] | undefined) => boolean;
 export declare const parseTableRowExpansion: (children: React.ReactNode) => WmTableRowProps | null;
 export declare const isEditAction: (actionKey: string) => boolean;
 export declare const isDeleteAction: (actionKey: string) => boolean;
@@ -95,8 +105,18 @@ export declare const INTERNAL_PROPERTIES: string[];
  */
 export declare const cleanRowData: (data: any) => any;
 export declare const parseWidth: (width: string | number, fallbackSize?: number) => number;
+/**
+ * Angular datatable.js hides show:false columns via jQuery `.hide()` / `.show()`
+ * (sets element.style.display = "none"), not by removing th/td from the DOM.
+ * setColGroupWidths also hides the matching `<col>` ($headerCol.hide()).
+ */
+export declare function isColumnDomHidden(meta?: Record<string, unknown>): boolean;
+/** Angular setColGroupWidths: jQuery `.hide()` plus width 0 on col for table-layout:fixed. */
+export declare function getDomHiddenColStyle(meta?: Record<string, unknown>): CSSProperties | undefined;
+/** Inline style for hidden th/td — display:none and zero box so flex sizing cannot leak width. */
+export declare function getDomHiddenCellStyle(meta?: Record<string, unknown>): CSSProperties | undefined;
 export declare const getColClass: (colClass: string, rowData: any, columnName: string) => string;
-export { TABLE_CSS_CLASSES, TABLE_DATA_STATES, TABLE_MESSAGES, INTERACTIVE_CLASSES, INTERACTIVE_ROLES, INTERACTIVE_DATA_ROLES, INTERACTIVE_TAG_NAMES, DYNAMIC_COLUMNS_CONFIG, UNSUPPORTED_STATE_PERSISTENCE_TYPES, } from "./constants";
+export { TABLE_CSS_CLASSES, TABLE_DATA_STATES, TABLE_MESSAGES, INTERACTIVE_CLASSES, INTERACTIVE_ROLES, INTERACTIVE_DATA_ROLES, INTERACTIVE_TAG_NAMES, UNSUPPORTED_STATE_PERSISTENCE_TYPES, } from "./constants";
 export { renderDisplayCell } from "./renderDisplayCell";
 export { buildSelectionColumns } from "./buildSelectionColumns";
 export { validateField, resetValidationState, updateValidationErrors } from "./validation";

package/components/data/table/utils/index.js

@@ -86,7 +86,7 @@ const extractDataArray = (dataset) => {
   if (isArray(dataset)) return dataset;
   if (dataset !== null && dataset !== void 0 && typeof dataset === "object") {
     const firstArray = Object.values(dataset).find((v) => isArray(v));
-    return firstArray != null ? firstArray : [];
+    return firstArray != null ? firstArray : [dataset];
   }
   return [];
 };
@@ -311,26 +311,17 @@ const flattenTableStructure = (structure) => {
   });
   return columns;
 };
-const parseTableRowActions = (children) => {
-  const actions = [];
-  React.Children.forEach(children, (child) => {
-    var _a;
-    if (child && child.props && child.props.name && (child.props.name.includes("wm_table_row_action") || ((_a = child.type) == null ? void 0 : _a.displayName) === "WmTableRowAction")) {
-      const props = get(child, "props", {});
-      const actionProps = assign({}, props);
-      if (child.key) {
-        actionProps.key = child.key;
-      }
-      actions.push(actionProps);
-    }
-  });
-  return actions;
+const isTableChildOfType = (child, namePattern, componentToken) => {
+  var _a;
+  if (!((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.name)) return false;
+  const propName = child.props.name;
+  const displayName = getChildComponentDisplayName(child);
+  return propName.includes(namePattern) || displayName.includes(componentToken);
 };
-const parseTableActions = (children) => {
+const parseTableChildActions = (children, namePattern, componentToken) => {
   const actions = [];
   React.Children.forEach(children, (child) => {
-    var _a;
-    if (child && child.props && child.props.name && (child.props.name.includes("wm_table_action") || ((_a = child.type) == null ? void 0 : _a.displayName) === "WmTableAction")) {
+    if (isTableChildOfType(child, namePattern, componentToken)) {
       const props = get(child, "props", {});
       const actionProps = assign({}, props);
       if (child.key) {
@@ -341,6 +332,8 @@ const parseTableActions = (children) => {
   });
   return actions;
 };
+const parseTableRowActions = (children) => parseTableChildActions(children, "wm_table_row_action", "WmTableRowAction");
+const parseTableActions = (children) => parseTableChildActions(children, "wm_table_action", "WmTableAction");
 function isTableRowComponent(child) {
   if (!(child == null ? void 0 : child.type)) return false;
   const name = child.type.displayName || child.type.name || "";
@@ -353,6 +346,24 @@ function isTableRowComponent(child) {
   }
   return false;
 }
+const getRowExpansionConfig = (config, rowId, rowData) => {
+  if (!config) return null;
+  const overrides = typeof config.tableRowProps === "function" && rowData !== void 0 ? config.tableRowProps(rowData) : {};
+  return __spreadValues(__spreadValues({}, config), overrides);
+};
+const isRowExpansionVisible = (config, dataset) => {
+  if (!config) return false;
+  if (typeof config.tableRowProps === "function") {
+    if (!Array.isArray(dataset) || dataset.length === 0) return false;
+    return dataset.some((row) => {
+      var _a;
+      const overrides = ((_a = config.tableRowProps) == null ? void 0 : _a.call(config, row)) || {};
+      const show = overrides.show !== void 0 ? overrides.show : config.show;
+      return show !== false;
+    });
+  }
+  return config.show !== false;
+};
 const parseTableRowExpansion = (children) => {
   let rowExpansionConfig = null;
   React.Children.forEach(children, (child) => {
@@ -570,6 +581,32 @@ const parseWidth = (width, fallbackSize = 150) => {
   }
   return columnSize;
 };
+function isColumnDomHidden(meta) {
+  return !!(meta == null ? void 0 : meta.domHidden);
+}
+function getDomHiddenColStyle(meta) {
+  if (!isColumnDomHidden(meta)) {
+    return void 0;
+  }
+  return {
+    display: "none",
+    width: 0,
+    minWidth: 0,
+    maxWidth: 0
+  };
+}
+function getDomHiddenCellStyle(meta) {
+  if (!isColumnDomHidden(meta)) {
+    return void 0;
+  }
+  return {
+    display: "none",
+    width: 0,
+    minWidth: 0,
+    maxWidth: 0,
+    padding: 0
+  };
+}
 const getColClass = (colClass, rowData, columnName) => {
   if (!colClass || typeof colClass !== "string") {
     return "";
@@ -611,7 +648,6 @@ import {
   INTERACTIVE_ROLES,
   INTERACTIVE_DATA_ROLES,
   INTERACTIVE_TAG_NAMES,
-  DYNAMIC_COLUMNS_CONFIG,
   UNSUPPORTED_STATE_PERSISTENCE_TYPES
 } from "./constants";
 import { renderDisplayCell } from "./renderDisplayCell";
@@ -642,7 +678,6 @@ import {
   convertFilterObjectToArray
 } from "./table-helpers";
 export {
-  DYNAMIC_COLUMNS_CONFIG,
   INTERACTIVE_CLASSES,
   INTERACTIVE_DATA_ROLES,
   INTERACTIVE_ROLES,
@@ -673,6 +708,9 @@ export {
   getButtonClasses,
   getChildComponentDisplayName,
   getColClass,
+  getDomHiddenCellStyle,
+  getDomHiddenColStyle,
+  getRowExpansionConfig,
   getRowIdsFromDataset,
   getSpacingClasses,
   getTableActionButtonClass,
@@ -683,11 +721,13 @@ export {
   hasInteractiveAttributes,
   hasInteractiveClass,
   isAddNewAction,
+  isColumnDomHidden,
   isColumnVisibleForViewport,
   isDataColumn,
   isDeleteAction,
   isEditAction,
   isInteractiveElement,
+  isRowExpansionVisible,
   parseTableActions,
   parseTableColumns,
   parseTableRowActions,

package/components/data/table/utils/selectionUtils.d.ts

@@ -11,6 +11,11 @@ export declare const hasInteractiveAttributes: (element: HTMLElement) => boolean
  * Check if element or its ancestors are interactive
  */
 export declare const isInteractiveElement: (event: React.MouseEvent) => boolean;
+/**
+ * Widget passed to user callbacks must come from the page proxy (viewParent), which
+ * listener.onChange updates synchronously. listener.Widgets lags one React commit behind.
+ */
+export declare const getWidgetForCallback: (listener: any | undefined, viewParent: any | undefined, widgetKey: string) => any;
 /**
  * Get row IDs from dataset
  */

package/components/data/table/utils/selectionUtils.js

@@ -47,6 +47,10 @@ const isInteractiveElement = (event) => {
   }
   return false;
 };
+const getWidgetForCallback = (listener, viewParent, widgetKey) => {
+  var _a, _b, _c;
+  return (_c = (_a = viewParent == null ? void 0 : viewParent.Widgets) == null ? void 0 : _a[widgetKey]) != null ? _c : (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[widgetKey];
+};
 const getRowIdsFromDataset = (dataset) => {
   return dataset.map((row) => row._wmTableRowId || String(row.id));
 };
@@ -103,6 +107,7 @@ const selectionStateHelpers = {
 };
 export {
   getRowIdsFromDataset,
+  getWidgetForCallback,
   hasInteractiveAttributes,
   hasInteractiveClass,
   isInteractiveElement,

package/components/dialogs/dialog/index.js

@@ -18,13 +18,14 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo } from "react";
+import { memo, Suspense } from "react";
 import clsx from "clsx";
 import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
 import Dialog from "..";
 import BaseDialog from "../withDialogWrapper";
 import { WmDialogHeader } from "../dialog-header";
 import { WmDialogContent } from "../dialog-content";
+import { WmSpinner } from "../../basic/spinner";
 const WmDialog = memo(
   (props) => {
     var _a;
@@ -65,7 +66,7 @@ const WmDialog = memo(
               closable: props.closable
             }
           ),
-          props.children
+          /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(WmSpinner, { show: true, name: "dialog" }), children: props.children })
         ] }))
       })
     );

package/components/dialogs/dialog-header/index.js

@@ -38,7 +38,7 @@ const WmDialogHeader = (props) => {
             variant,
             id: titleid,
             component: variant,
-            sx: { display: "flex", alignItems: "center" },
+            sx: { display: "flex", alignItems: "center", fontWeight: "bold" },
             className: "app-dialog-title modal-title",
             children: [
               isDialog ? iconclass && iconclass.trim() !== "" || iconurl && iconurl !== "" ? /* @__PURE__ */ jsx(

package/components/dialogs/index.js

@@ -18,11 +18,13 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
-import React, { memo, useEffect } from "react";
+import React, { memo, useEffect, useMemo } from "react";
 import Dialog from "@mui/material/Dialog";
 import Fade from "@mui/material/Fade";
 import clsx from "clsx";
+import { useAppState } from "../../context/WidgetProvider";
 import { Box } from "@mui/material";
+import { getFragmentCssScopeClass } from "../../utils/style-utils";
 const DEFAULT_CLASS = "modal fade in";
 const FadeTransition = React.forwardRef(function FadeTransition2(props, ref) {
   return /* @__PURE__ */ jsx(
@@ -56,6 +58,16 @@ const useBodyScrollLock = (lock) => {
 const WmDialog = memo((props) => {
   const { children, className, open = false, onClose, modal = false, onTransitionEntered } = props;
   useBodyScrollLock(open);
+  const appState = useAppState();
+  const cssScopeClass = useMemo(
+    () => getFragmentCssScopeClass({
+      componentName: appState == null ? void 0 : appState.componentName,
+      name: appState == null ? void 0 : appState.name,
+      componentType: appState == null ? void 0 : appState.componentType,
+      type: appState == null ? void 0 : appState.type
+    }),
+    [appState == null ? void 0 : appState.componentName, appState == null ? void 0 : appState.name, appState == null ? void 0 : appState.componentType, appState == null ? void 0 : appState.type]
+  );
   const transitionType = FadeTransition;
   const pageRef = document.getElementsByClassName("app-page")[0] || null;
   const handleClose = (event, reason) => {
@@ -130,7 +142,7 @@ const WmDialog = memo((props) => {
           width: "var(--wm-modal-full-screen-width)"
         }, sheetPositionStyles))
       },
-      children: /* @__PURE__ */ jsx(Box, { className: clsx(className), children })
+      children: /* @__PURE__ */ jsx("div", { className: clsx(cssScopeClass), children: /* @__PURE__ */ jsx(Box, { className: clsx(className), children }) })
     })
   );
 });

package/components/input/chips/index.js

@@ -100,6 +100,10 @@ const WmChips = React.memo(
     const [uniqueKeyCounter, setUniqueKeyCounter] = useState(0);
     const [isInitialized, setIsInitialized] = useState(false);
     const backspaceArmedRef = useRef(false);
+    const chipsListRef = useRef(chipsList);
+    chipsListRef.current = chipsList;
+    const modelByValueRef = useRef(modelByValue);
+    modelByValueRef.current = modelByValue;
     const maxSizeReached = "Max size reached";
     const isFullWidth = inputwidth === "full";
     const generateStableKeyCb = useCallback(
@@ -219,7 +223,20 @@ const WmChips = React.memo(
             };
             newChipsList.push(chipObj);
           } else {
-            searchQuery2.push(val);
+            const existingChip = chipsListRef.current.find((chip) => {
+              var _a2, _b;
+              const chipModelValue = (_b = (_a2 = chip.dataObject) == null ? void 0 : _a2[datafield]) != null ? _b : chip.value;
+              return isEqual(chip.value, val) || isEqual(chipModelValue, val);
+            });
+            if (existingChip) {
+              newChipsList.push(__spreadProps(__spreadValues({}, existingChip), {
+                key: generateStableKeyCb(existingChip.value, i),
+                active: false,
+                isDuplicate: false
+              }));
+            } else {
+              searchQuery2.push(val);
+            }
           }
         });
         if (searchQuery2.length && datafield !== "All Fields") {
@@ -248,16 +265,23 @@ const WmChips = React.memo(
     const debouncedUpdateQueryModel = useMemo(() => {
       return debounce(updateQueryModel, 150);
     }, [updateQueryModel]);
+    const debouncedUpdateQueryModelRef = useRef(debouncedUpdateQueryModel);
+    useEffect(() => {
+      debouncedUpdateQueryModelRef.current = debouncedUpdateQueryModel;
+    }, [debouncedUpdateQueryModel]);
     useEffect(() => {
       if (isInitialized && datavalue !== void 0) {
-        debouncedUpdateQueryModel(datavalue);
+        if (isEqual(datavalue, modelByValueRef.current)) {
+          return;
+        }
+        debouncedUpdateQueryModelRef.current(datavalue);
       } else if (datavalue == void 0 || datavalue.length == 0) {
         setChipsList([]);
         setSearchQuery(void 0);
         setModelByValue([]);
         updateMaxSize(0);
       }
-    }, [datavalue, debouncedUpdateQueryModel]);
+    }, [datavalue, isInitialized]);
     const addItem = useCallback(
       (newItem) => {
         performAddItem(
@@ -447,7 +471,7 @@ const WmChips = React.memo(
         formEl.removeEventListener("wmformreset", handleFormReset);
       };
     }, []);
-    const renderChipsList = () => {
+    const RenderChipsList = () => {
       const sensors = useSensors(
         useSensor(PointerSensor, {
           activationConstraint: { distance: 5 }
@@ -624,7 +648,7 @@ const WmChips = React.memo(
         className: "wm-chips-root",
         ref: rootRef,
         style: __spreadValues({ width, height }, styles),
-        children: renderChipsList()
+        children: RenderChipsList()
       }
     );
   },

package/components/input/color-picker/index.js

@@ -513,8 +513,8 @@ const WmColorPicker = memo(
         window.removeEventListener("resize", updatePosition);
       };
     }, [isOpen, calculatePosition, setPickerPosition]);
-    const checkPlaceholder = () => {
-      setTimeout(() => {
+    useEffect(() => {
+      const timeoutId = setTimeout(() => {
         var _a2;
         const captionEl = (_a2 = containerRef.current) == null ? void 0 : _a2.closest(".app-composite-widget.caption-floating");
         if (captionEl && !captionEl.classList.contains("float-active")) {
@@ -523,10 +523,8 @@ const WmColorPicker = memo(
           setPlaceholder(placeholder);
         }
       }, 100);
-    };
-    useEffect(() => {
-      checkPlaceholder();
-    }, [inputValue, isInteractingWithPicker]);
+      return () => clearTimeout(timeoutId);
+    }, [inputValue, isInteractingWithPicker, placeholder]);
     return /* @__PURE__ */ jsxs(
       Box,
       {

package/components/input/default/radioset/index.js

@@ -404,7 +404,8 @@ const WmRadioset = memo(
       "groupby",
       "collapsible",
       "datasetItems",
-      "hidden"
+      "hidden",
+      "getDisplayExpression"
     ];
     return keys.every((key) => {
       if (key === "datasetItems") {

package/components/input/epoch/date/index.js

@@ -69,7 +69,7 @@ const WmDate = forwardRef((props, ref) => {
     onMouseEnter,
     onMouseLeave,
     onBeforeload,
-    placeholder = "Select Date",
+    placeholder = "Select date",
     tabindex = 0,
     datepattern: datepatternProp,
     outputformat = "yyyy-MM-dd",

package/components/input/select/index.js

@@ -47,7 +47,7 @@ const WmSelect = React.memo(
       name,
       styles,
       orderby,
-      placeholder,
+      placeholder = "Select value",
       readonly = false,
       required = false,
       shortcutkey,
@@ -334,10 +334,9 @@ const WmSelect = React.memo(
       }
       prevComputedValueRef.current = currentValue;
     }, [computedSelectValue, multiple, listener, props.fieldName, name, localDatavalue]);
-    return /* @__PURE__ */ jsx("div", { className: clsx(DEFAULT_CLASS, className), children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: clsx(DEFAULT_CLASS, className), hidden: props.hidden, style: styles, children: /* @__PURE__ */ jsxs(
       NativeSelect,
       __spreadProps(__spreadValues({
-        hidden: props.hidden,
         name,
         IconComponent: () => null,
         className: clsx(
@@ -368,8 +367,7 @@ const WmSelect = React.memo(
           "aria-readonly": readonly,
           className: `app-select ${className} ${DEFAULT_CLASS}  form-control ng-valid ng-touched ng-dirty wm-app `,
           accessKey: shortcutkey,
-          title: hint,
-          style: styles
+          title: hint
         },
         readOnly: readonly,
         children: [

package/components/input/text/index.js

@@ -369,13 +369,14 @@ const WmText = memo(
         autoFocus: autofocus,
         disabled,
         required,
-        placeholder: placeholder != null ? placeholder : "Enter text",
+        placeholder: placeholder != null ? placeholder : "Enter value",
         value: sanitizeInputValue(displayValue),
         type,
         inputRef: ref,
         error: displayError,
         "aria-readonly": readonly,
         helperText: supportingtext || void 0,
+        style: styles,
         className: clsx(
           "app-input-wrapper",
           isTouched ? "ng-touched" : "ng-untouched",
@@ -443,7 +444,6 @@ const WmText = memo(
               isTouched ? "ng-touched" : "ng-untouched",
               displayError && "ng-invalid"
             ),
-            style: styles,
             "aria-label": arialabel,
             maxLength: maxchars,
             pattern: regexp,

package/components/input/textarea/index.js

@@ -14,6 +14,18 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+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 } from "react/jsx-runtime";
 import { memo, useEffect, useRef, useState, useCallback, useMemo } from "react";
 import clsx from "clsx";
@@ -133,13 +145,22 @@ const WmTextarea = memo(
         }
       }
     }, [datavalue, isDirty, validateInput]);
+    useEffect(() => {
+      var _a2, _b;
+      const shadowTextarea = (_b = (_a2 = textareaRef.current) == null ? void 0 : _a2.closest(".wm-textarea-root")) == null ? void 0 : _b.querySelector('textarea[aria-hidden="true"]');
+      if (readonly) {
+        shadowTextarea == null ? void 0 : shadowTextarea.setAttribute("readonly", "");
+      } else {
+        shadowTextarea == null ? void 0 : shadowTextarea.removeAttribute("readonly");
+      }
+    }, [readonly]);
     useEffect(() => {
       if (!shortcutkey) return;
       const handleGlobalKeyDown = (e) => {
-        var _a;
+        var _a2;
         if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
           e.preventDefault();
-          (_a = textareaRef.current) == null ? void 0 : _a.focus();
+          (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
         }
       };
       window.addEventListener("keydown", handleGlobalKeyDown);
@@ -154,11 +175,11 @@ const WmTextarea = memo(
       [limitdisplaytext, maxchars, debouncedCharLengthUpdate]
     );
     const characterCountText = useMemo(
-      () => maxchars ? resolveCharacterCountText(maxchars, displayValue, limitdisplaytext) : void 0,
+      () => maxchars && limitdisplaytext ? resolveCharacterCountText(maxchars, displayValue, limitdisplaytext) : void 0,
       [maxchars, displayValue, limitdisplaytext]
     );
     const handleInputChange = useCallback((event) => {
-      var _a;
+      var _a2;
       const newValue = event.target.value;
       valueRef.current = newValue;
       setDisplayValue(newValue);
@@ -168,7 +189,7 @@ const WmTextarea = memo(
         debouncedUpdate(newValue);
       }
       if (onKeypress) {
-        onKeypress(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+        onKeypress(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
       }
       setTimeout(() => {
         isInternalUpdate.current = false;
@@ -176,7 +197,7 @@ const WmTextarea = memo(
     }, []);
     const handleBlur = useCallback(
       (event) => {
-        var _a;
+        var _a2;
         if (readonly || disabled) {
           return;
         }
@@ -194,7 +215,7 @@ const WmTextarea = memo(
           setIsDirty(false);
         }
         if (onBlur) {
-          onBlur(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+          onBlur(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
         }
         setTimeout(() => {
           isInternalUpdate.current = false;
@@ -204,9 +225,9 @@ const WmTextarea = memo(
     );
     const handleFocus = useCallback(
       (event) => {
-        var _a;
+        var _a2;
         if (onFocus) {
-          onFocus(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+          onFocus(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
         }
       },
       [onFocus, listener, name]
@@ -219,8 +240,8 @@ const WmTextarea = memo(
         }
         if (onKeydown) {
           delay(() => {
-            var _a;
-            onKeydown(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+            var _a2;
+            onKeydown(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
           }, 0);
         }
       },
@@ -230,8 +251,8 @@ const WmTextarea = memo(
       (event) => {
         if (onKeyup) {
           delay(() => {
-            var _a;
-            onKeyup(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+            var _a2;
+            onKeyup(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
           }, 0);
         }
       },
@@ -256,6 +277,8 @@ const WmTextarea = memo(
     } : {});
     const value = sanitizeInputValue(displayValue);
     const isEditable = !readonly && !disabled;
+    const _a = styles || {}, { height: styleHeight } = _a, rootStyles = __objRest(_a, ["height"]);
+    const textareaHeight = !styleHeight ? void 0 : typeof styleHeight === "number" ? `${styleHeight}px` : String(styleHeight);
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
       TextField,
       __spreadValues({
@@ -276,7 +299,7 @@ const WmTextarea = memo(
           isTouched ? "ng-touched" : "ng-untouched",
           isDirty && "ng-invalid"
         ),
-        style: styles,
+        style: rootStyles,
         "aria-readonly": readonly,
         helperText: characterCountText,
         slotProps: {
@@ -299,11 +322,11 @@ const WmTextarea = memo(
               isDirty && "ng-invalid",
               isEditable ? "wm-textarea-editable" : ""
             ),
-            style: __spreadValues({}, styles.height ? { "--wm-textarea-height": `${styles.height}` } : {}),
+            style: __spreadValues({}, textareaHeight ? { "--wm-textarea-height": textareaHeight } : {}),
             pattern: regexp
           }
         },
-        slots: __spreadValues({}, maxchars ? { formHelperText: TextareaCount } : {})
+        slots: __spreadValues({}, maxchars && limitdisplaytext ? { formHelperText: TextareaCount } : {})
       }, events)
     ) });
   },
@@ -320,7 +343,9 @@ const WmTextarea = memo(
       "autofocus",
       "arialabel",
       "limitdisplaytext",
-      "hidden"
+      "hidden",
+      "styles",
+      "className"
     ];
     return keys.every((key) => prev[key] === current[key]);
   }

package/components/navbar/nav/index.js

@@ -61,14 +61,19 @@ const WmNav = memo(
     }, [dataset, orderby]);
     const triggerActionClickForAnchor = (e, item) => {
       e == null ? void 0 : e.preventDefault();
+      const navigate = () => {
+        triggerItemAction({
+          label: getItemLabel(item),
+          link: item[props.itemlink || "link"],
+          target: item[props.itemtarget]
+        });
+      };
       if (props.onSelect) {
         props.onSelect(e, props, item);
+        setTimeout(navigate, 0);
+      } else {
+        navigate();
       }
-      triggerItemAction({
-        label: getItemLabel(item),
-        link: item[props.itemlink || "link"],
-        target: item[props.itemtarget]
-      });
     };
     const getItemLabel = (item) => {
       const { itemlabel } = props;