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

package/components/container/panel/components/panel-header/index.js

@@ -1,8 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, IconButton } from "@mui/material";
 import DOMPurify from "dompurify";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
 import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
 import CloseIcon from "@mui/icons-material/Close";
@@ -137,7 +135,7 @@ const PanelHeader = ({
           title: `${(_b = (_a = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _a.LABEL_COLLAPSE) != null ? _b : "Collapse"}/${(_d = (_c = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _c.LABEL_EXPAND) != null ? _d : "Expand"}`,
           onClick: onToggleExpand,
           "aria-expanded": isExpanded,
-          children: isExpanded ? /* @__PURE__ */ jsx(ExpandLessIcon, { className: "wi-minus" }) : /* @__PURE__ */ jsx(ExpandMoreIcon, { className: "wi-plus" })
+          children: /* @__PURE__ */ jsx(Box, { component: "i", className: isExpanded ? "wi-minus" : "wi-plus" })
         }
       ),
       enablefullscreen && /* @__PURE__ */ jsx(

package/components/container/tabs/tab-pane/index.d.ts

@@ -39,6 +39,7 @@ declare const _default: React.ComponentType<{
     onHeaderClick?: (event: React.SyntheticEvent, props: WmTabPaneProps, paneIndex: number) => void;
     renderPartial?: (props: WmTabPaneProps, onLoad?: (widget?: WmTabPaneProps) => void) => React.ReactNode;
     layoutClassName?: string;
+    direction?: string;
     standalone?: boolean;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;

package/components/container/tabs/tab-pane/index.js

@@ -98,7 +98,7 @@ const WmTabpane = (props) => {
   }, [name, headerProps, updatePaneHeader]);
   return /* @__PURE__ */ jsx(
     Tabs.Panel,
-    __spreadProps(__spreadValues({
+    __spreadProps(__spreadValues(__spreadValues({
       value: index,
       keepMounted: true,
       className: clsx("tab-pane", "wm-tab-pane-root", layoutClassName, {
@@ -113,7 +113,7 @@ const WmTabpane = (props) => {
       style: props == null ? void 0 : props.styles,
       "data-pane-name": name,
       title: props == null ? void 0 : props.title
-    }, { name }), {
+    }, { name }), props.direction ? { direction: props.direction } : {}), {
       children: /* @__PURE__ */ jsx("div", { className: "tab-body", "data-widget-id": props["data-widget-id"], children: renderPartial ? renderPartial(
         props,
         () => {

package/components/container/tabs/tab-pane/props.d.ts

@@ -78,6 +78,7 @@ export interface TabPanePropsBase {
      * Utility layout classes from Studio Auto Layout (merged on the outer tab-pane wrapper).
      */
     layoutClassName?: string;
+    direction?: string;
 }
 /**
  * Combined props for the WmTabPane component, including base WaveMaker props.

package/components/container/wizard/index.js

@@ -97,6 +97,7 @@ const WmWizardComponent = memo(
     const formRefs = useRef({});
     const stepContainerRefs = useRef({});
     const navIndexRef = useRef(-1);
+    const loadedStepNameRef = useRef(null);
     const [formReady, setFormReady] = useState(false);
     const parentFormContext = useParentFormData();
     const isInsideOuterForm = !!parentFormContext && Object.keys(parentFormContext).length > 0;
@@ -469,12 +470,6 @@ const WmWizardComponent = memo(
               });
             })
           );
-          setTimeout(() => {
-            if (step.onLoad) {
-              const stepIndex = visibleSteps.findIndex((s) => s.name === step.name);
-              step.onLoad(step, stepIndex);
-            }
-          }, 100);
         } else {
           const nextValidStep = getNextValidStep(0, visibleSteps);
           if (nextValidStep) {
@@ -583,10 +578,16 @@ const WmWizardComponent = memo(
       visibleSteps
     ]);
     useEffect(() => {
-      if (currentStep == null ? void 0 : currentStep.onLoad) {
-        currentStep == null ? void 0 : currentStep.onLoad(currentStep, currentStepIndex);
-      }
-    }, [currentStep == null ? void 0 : currentStep.onLoad]);
+      if (!(currentStep == null ? void 0 : currentStep.onLoad) || loadedStepNameRef.current === currentStep.name) return;
+      const step = currentStep;
+      const timer = setTimeout(() => {
+        var _a;
+        if (loadedStepNameRef.current === step.name) return;
+        loadedStepNameRef.current = step.name;
+        (_a = step.onLoad) == null ? void 0 : _a.call(step, step, currentStepIndex);
+      }, 100);
+      return () => clearTimeout(timer);
+    }, [currentStep == null ? void 0 : currentStep.name, currentStep == null ? void 0 : currentStep.onLoad, currentStepIndex]);
     useEffect(() => {
       if (type === "dynamic" && dataset.length > 0 && steps.length === 0) {
         const dynamicSteps = createDynamicSteps(dataset);

package/components/container/wizard/utils.js

@@ -44,6 +44,7 @@ const getStepByIndex = (index, visibleSteps) => {
 };
 const updateStepFocus = () => {
   setTimeout(() => {
+    if (typeof document === "undefined") return;
     const currentStepElement = document.querySelector(
       ".MuiStepButton-root[aria-current='step']"
     );

package/components/data/form/dynamic-fields/WmxDynamicFormField.d.ts

@@ -0,0 +1,11 @@
+import { FormFieldMetadata } from "./props";
+export type WmxFormFieldProps = Record<string, unknown> & {
+    class?: string;
+    className?: string;
+};
+type WmxDynamicFormFieldProps = {
+    field: FormFieldMetadata;
+    fieldProps: WmxFormFieldProps;
+};
+export declare const WmxDynamicFormField: ({ field, fieldProps }: WmxDynamicFormFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/data/form/dynamic-fields/WmxDynamicFormField.js

@@ -0,0 +1,77 @@
+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 { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import WmText from "../../../input/text";
+import withFormController from "../form-controller/withFormController";
+import { loadWmxComponent, getWmxComponentName } from "../../../../utils/wmx.utils";
+const WmxDynamicFormField = ({ field, fieldProps }) => {
+  var _b;
+  const componentName = getWmxComponentName(String((field == null ? void 0 : field.widget) || ""));
+  const _a = fieldProps, { class: className } = _a, restProps = __objRest(_a, ["class"]);
+  const resolvedClassName = className || fieldProps.className;
+  const [RawComponent, setRawComponent] = useState(null);
+  useEffect(() => {
+    if (!componentName) return;
+    let isActive = true;
+    loadWmxComponent(componentName).then((component) => {
+      if (isActive) {
+        setRawComponent(component);
+      }
+    }).catch((e) => {
+      console.error(e);
+    });
+    return () => {
+      isActive = false;
+    };
+  }, [componentName]);
+  const EnhancedWmxComponent = useMemo(() => {
+    if (!RawComponent) return null;
+    return withFormController(RawComponent);
+  }, [RawComponent]);
+  if (!EnhancedWmxComponent) {
+    return /* @__PURE__ */ jsx(WmText, __spreadProps(__spreadValues({ name: field == null ? void 0 : field.name }, restProps), { className: resolvedClassName }));
+  }
+  const dataset = (_b = field == null ? void 0 : field.dataset) != null ? _b : fieldProps == null ? void 0 : fieldProps.dataset;
+  return /* @__PURE__ */ jsx(
+    EnhancedWmxComponent,
+    __spreadProps(__spreadValues({
+      componentname: componentName
+    }, restProps), {
+      className: resolvedClassName,
+      dataset
+    })
+  );
+};
+export {
+  WmxDynamicFormField
+};

package/components/data/form/dynamic-fields/index.js

@@ -42,7 +42,12 @@ import WmLabel from "../../../basic/label";
 import WmFormField from "../form-field";
 import { updateMetadata } from "./utils";
 import { COMPONENT_MAP } from "./constant";
+import { WmxDynamicFormField } from "./WmxDynamicFormField";
 const DEFAULT_FIELD_CLASS = "app-dynamic-form-field";
+const isWmxComponent = (field) => {
+  var _a;
+  return (_a = field == null ? void 0 : field.widget) == null ? void 0 : _a.includes("wmx-");
+};
 function DynamicForm(props) {
   const {
     metadata,
@@ -74,7 +79,6 @@ function DynamicForm(props) {
     return Math.floor(12 / columns);
   };
   const renderFormField = (field) => {
-    const ComponentToRender = COMPONENT_MAP[field.widget] || WmText;
     const fieldProps = __spreadValues(__spreadProps(__spreadValues({}, field), {
       className: field.class,
       listener,
@@ -84,8 +88,15 @@ function DynamicForm(props) {
       onChangeHandler: formContext.onChangeHandler
     });
     const _a = fieldProps, { class: className } = _a, restProps = __objRest(_a, ["class"]);
+    if (isWmxComponent(field)) {
+      return handleWmxFormFieldRendering(field, fieldProps);
+    }
+    const ComponentToRender = COMPONENT_MAP[field.widget] || WmText;
     return /* @__PURE__ */ jsx(ComponentToRender, __spreadProps(__spreadValues({}, restProps), { className: className || fieldProps.className }));
   };
+  const handleWmxFormFieldRendering = (field, fieldProps) => {
+    return /* @__PURE__ */ jsx(WmxDynamicFormField, { field, fieldProps });
+  };
   const renderFormFieldWithWrapper = (field) => {
     const columnWidth = getColumnWidth(field.columnwidth);
     return /* @__PURE__ */ jsx(

package/components/data/form/form-controller/withFormController.js

@@ -325,20 +325,6 @@ const withFormController = (WrappedComponent) => {
                 })()
               }
             ),
-            hint && !shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: "help-block",
-                "aria-hidden": "true",
-                role: "alert",
-                "aria-live": "polite",
-                style: {
-                  textAlign: "start",
-                  width: "100%"
-                },
-                children: hint
-              }
-            ),
             shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
               "p",
               {

package/components/data/form/form-field/index.js

@@ -37,7 +37,7 @@ const DATASET_SYNC_KEYS = [
 ];
 const WmFormField = memo(
   (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { show = true, deferload } = props;
     const [proxyProps, setProxyProps] = useState(__spreadProps(__spreadValues({}, props), {
       show: show == null ? void 0 : show.toString(),
@@ -50,7 +50,7 @@ const WmFormField = memo(
     const fieldKey = props.formKey || props.name;
     const defaultValueRegisteredRef = useRef(false);
     const showfield = (_b = (_a = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _a.show) != null ? _b : show;
-    const formReady = (formProxy == null ? void 0 : formProxy.listener) !== void 0;
+    const formReady = (formProxy == null ? void 0 : formProxy.listener) !== void 0 || ((_c = props.formRef) == null ? void 0 : _c.name) === props.formName;
     const reset = useCallback(
       (value) => {
         const field = fieldProxyRef.current;
@@ -110,17 +110,20 @@ const WmFormField = memo(
       });
     }, [props.dataset, props.datafield, props.displayfield, props.displaylabel, props.searchkey]);
     function renderFormFields() {
-      var _a2, _b2, _c2, _d2, _e, _f, _g;
+      var _a2, _b2, _c2, _d2, _e2, _f, _g, _h;
       if (props.formRef) {
         const errors = (_a2 = props.formRef) == null ? void 0 : _a2.errors;
         const formKey = (_b2 = props.formKey) != null ? _b2 : props.name;
         const fieldError = formKey && errors ? get(errors, formKey) : void 0;
         const invalid = Boolean(fieldError);
         const invalidCls = invalid ? " text-danger " : "";
-        return /* @__PURE__ */ jsx(Fragment, { children: (_g = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _g.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
+        return /* @__PURE__ */ jsx(Fragment, { children: (_h = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _h.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
           show: showfield,
           disabled: (_d2 = (_c2 = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _c2.disabled) != null ? _d2 : props == null ? void 0 : props.disabled,
-          readonly: (_f = (_e = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _e.readonly) != null ? _f : props == null ? void 0 : props.readonly,
+          readonly: (_f = (_e2 = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _e2.readonly) != null ? _f : props == null ? void 0 : props.readonly,
+          // BaseField derives this from live validators. A direct field-proxy write wins,
+          // but never fall back to the initial proxyProps.required snapshot.
+          required: (_g = overriddenItemsRef.current.required) != null ? _g : props.required,
           fieldError,
           validators: props.validators,
           asyncValidators: props.asyncValidators,
@@ -135,12 +138,12 @@ const WmFormField = memo(
       }
     }
     const isDynamicFormField = typeof props.className === "string" && props.className.includes("app-dynamic-form-field");
-    const itemsPerRowClass = !isDynamicFormField && ((_c = props.formRef) == null ? void 0 : _c.itemsPerRow) || "";
+    const itemsPerRowClass = !isDynamicFormField && ((_d = props.formRef) == null ? void 0 : _d.itemsPerRow) || "";
     if (!fieldProxyRef.current) {
       return null;
     }
     const isDeferLoad = deferload === true;
-    const showValue = ((_d = proxyProps == null ? void 0 : proxyProps.show) == null ? void 0 : _d.toString()) !== "false";
+    const showValue = ((_e = proxyProps == null ? void 0 : proxyProps.show) == null ? void 0 : _e.toString()) !== "false";
     if ((!showValue || showfield) && isDeferLoad) {
       return null;
     }

package/components/data/list/index.js

@@ -511,7 +511,7 @@ const WmList = (props) => {
     );
   return /* @__PURE__ */ jsxs(
     Box,
-    __spreadProps(__spreadValues({
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({
       className: clsx(
         DEFAULT_CLS,
         "wm-position-relative",
@@ -523,7 +523,8 @@ const WmList = (props) => {
       "data-name": name
     }, { name }), {
       "data-navigation": navigation,
-      ref: ListWrapperRef,
+      ref: ListWrapperRef
+    }), direction ? { direction } : {}), {
       children: [
         /* @__PURE__ */ jsx(
           ListHeader,

package/components/data/table/components/RowCells.js

@@ -71,7 +71,7 @@ const RowCells = memo(
             tabIndex: 0,
             "data-col-id": cellIndex,
             className: `${TABLE_CSS_CLASSES.tableCell} ${colClass || ""}  ${((_e = cell.column.columnDef.meta) == null ? void 0 : _e.className) || ""}`.trim(),
-            style: __spreadProps(__spreadValues(__spreadValues({
+            style: __spreadValues(__spreadProps(__spreadValues(__spreadValues({
               width: cell.column.getSize(),
               textAlign: (_f = cell.column.columnDef.meta) == null ? void 0 : _f.textAlign,
               backgroundColor: (_g = cell.column.columnDef.meta) == null ? void 0 : _g.backgroundColor
@@ -95,6 +95,8 @@ const RowCells = memo(
             })()), getDomHiddenCellStyle(cell.column.columnDef.meta)), {
               fontSize: "inherit",
               color: "inherit"
+            }), hasCustomCellContent && {
+              textOverflow: "clip"
             }),
             children: customRender ? /* @__PURE__ */ jsx(CustomExpressionRenderBody, { rowData, render: customRender }) : ((_h = cell.column.columnDef.meta) == null ? void 0 : _h.renderCellContent) && !isEditingRow ? (_i = cell.column.columnDef.meta) == null ? void 0 : _i.renderCellContent(rowData, cell.column.columnDef) : flexRender(cell.column.columnDef.cell, cell.getContext())
           },

package/components/data/table/components/TableHeader.js

@@ -380,6 +380,7 @@ const TableHeaderComponent = memo(
             const isClickable = enablecolumnselection && !isSystemColumn || enablesort && header.column.getCanSort();
             const headerCellResizableClass = header.column.getCanResize() ? " ui-resizable" : "";
             const headerMeta = header.column.columnDef.meta;
+            const isMultiSelectHeader = columnId === "multiSelect";
             cells.push(
               /* @__PURE__ */ jsxs(
                 TableCell,
@@ -402,7 +403,10 @@ const TableHeaderComponent = memo(
                   tabIndex: 0,
                   "data-col-field": header.column.id,
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: "header-data", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
+                    isMultiSelectHeader && !header.isPlaceholder ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      flexRender(header.column.columnDef.header, header.getContext()),
+                      /* @__PURE__ */ jsx("span", { className: "header-data", children: "\xA0" })
+                    ] }) : /* @__PURE__ */ jsx("span", { className: "header-data", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
                     enablesort && !enablecolumnselection && header.column.getCanSort() && /* @__PURE__ */ jsx(
                       Box,
                       {

package/components/data/table/hooks/useRowHandlers.d.ts

@@ -1,5 +1,7 @@
 import { UseRowHandlersProps, UseRowHandlersReturn } from "../props";
 /**
- * Hook to consolidate all row click handlers
+ * Hook to consolidate all row click handlers.
+ * Angular rowSelectionHandler: callOnRowClickEvent first, then toggle + onRowSelect.
+ * Checkbox/radio clicks bubble to the row (rowclick), then onChange fires rowselect.
  */
-export declare const useRowHandlers: ({ editingRowId, isAddingNewRow, handleRowSelectionClick, handleTableEditRowClick, handleRowActiveClick, onRowclick, useRadioSelect, useMultiSelect, isrowselectable, listener, name, }: UseRowHandlersProps) => UseRowHandlersReturn;
+export declare const useRowHandlers: ({ editingRowId, isAddingNewRow, handleRowSelectionClick, handleTableEditRowClick, handleRowActiveClick, onRowclick, useRadioSelect, useMultiSelect, isrowselectable, listener, viewParent, name, widgetRegistrationKey, }: UseRowHandlersProps) => UseRowHandlersReturn;

package/components/data/table/hooks/useRowHandlers.js

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import { cleanRowData } from "../utils";
+import { getWidgetForCallback } from "../utils/selectionUtils";
 const useRowHandlers = ({
   editingRowId,
   isAddingNewRow,
@@ -11,18 +12,29 @@ const useRowHandlers = ({
   useMultiSelect = false,
   isrowselectable = false,
   listener,
-  name
+  viewParent,
+  name,
+  widgetRegistrationKey
 }) => {
+  const widgetKey = widgetRegistrationKey != null ? widgetRegistrationKey : name;
+  const getWidgetRef = useCallback(
+    () => getWidgetForCallback(listener, viewParent, widgetKey),
+    [viewParent, widgetKey]
+  );
+  const invokeRowClick = useCallback(
+    (event, rowData) => {
+      if (!onRowclick) return;
+      const widget = getWidgetRef();
+      if (widget) {
+        widget.nativeElement = event.target;
+      }
+      onRowclick(event, widget, cleanRowData(rowData));
+    },
+    [onRowclick, getWidgetRef]
+  );
   const handleRowClick = useCallback(
     (event, rowData, rowId) => {
-      var _a, _b;
       const hasSelectionMode = useRadioSelect || useMultiSelect;
-      if (onRowclick) {
-        if ((_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]) {
-          listener.Widgets[name].nativeElement = event.target;
-        }
-        onRowclick(event, (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[name], cleanRowData(rowData));
-      }
       let isSelectionHandled = false;
       if (hasSelectionMode && isrowselectable) {
         isSelectionHandled = handleRowSelectionClick(event, rowId, rowData);
@@ -35,6 +47,7 @@ const useRowHandlers = ({
         return;
       }
       handleRowActiveClick(rowId, isSelectionHandled, isEditingOrAdding);
+      invokeRowClick(event, rowData);
     },
     [
       editingRowId,
@@ -42,11 +55,10 @@ const useRowHandlers = ({
       handleRowSelectionClick,
       handleTableEditRowClick,
       handleRowActiveClick,
-      onRowclick,
+      invokeRowClick,
       useRadioSelect,
       useMultiSelect,
-      isrowselectable,
-      name
+      isrowselectable
     ]
   );
   return {

package/components/data/table/hooks/useRowSelection.d.ts

@@ -1,2 +1,2 @@
 import { UseRowSelectionProps, UseRowSelectionReturn } from "../props";
-export declare const useRowSelection: ({ radioselect, multiselect, gridfirstrowselect, internalDataset, cellState, name, statehandler, initialActualPageSize, getTableState: getTableCurrentState, onRowselect, onRowdeselect, listener, navigation, onSyncSelectedItems, }: UseRowSelectionProps) => UseRowSelectionReturn;
+export declare const useRowSelection: ({ radioselect, multiselect, gridfirstrowselect, internalDataset, cellState, name, statehandler, initialActualPageSize, getTableState: getTableCurrentState, onRowselect, onRowdeselect, listener, navigation, viewParent, widgetRegistrationKey, onSyncSelectedItems, }: UseRowSelectionProps) => UseRowSelectionReturn;