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

package/components/basic/tree/utils.d.ts

@@ -1,4 +1,5 @@
-import { TreeNodeData, TreeItem, TreePartialNodeApi } from "./props";
+import { type StorageType } from "@wavemaker-ai/react-runtime/utils/state-persistance";
+import { TreeNodeData, TreeItem, TreePartialNodeApi, TreeUrlState } from "./props";
 /** Whether the dataset row (`node.data`) is disabled via its `disabled` property. */
 export declare const isTreeNodeDisabled: (data: TreeNodeData | undefined | null) => boolean;
 export declare const getNestedPropertyLocal: (obj: any, path: string) => any;
@@ -17,6 +18,20 @@ export declare const findNodeById: (nodes: TreeItem[], id: string) => TreeItem |
  * Used so partial templates can expand/collapse by id even when the passed-in `TreeItem`
  */
 export declare const toggleExpansionInTree: (nodes: TreeItem[], nodeId: string) => TreeItem[];
+/** Migrate legacy `{ id, open, parentNode }` URL payloads to an `expanded` id list. */
+export declare const migrateLegacyTreeUrlState: (raw: TreeUrlState | null | undefined) => string[];
+/**
+ * Ensures all ancestors of every expanded id are included so nested paths reopen after refresh.
+ */
+export declare const normalizeExpandedIds: (tree: TreeItem[], expandedIds: Iterable<string>) => Set<string>;
+/**
+ * Node ids that are expanded **in the visible tree** (parent chain must be open / pre-open).
+ * Descendants of a collapsed branch are omitted even if `open` flags were left true internally.
+ */
+export declare const collectExpandedNodeIdsForUrl: (nodes: TreeItem[]) => string[];
+export declare const saveTreeState: (name: string, storage: StorageType, stateToSave: Partial<TreeUrlState> | null) => void;
+export declare const getTreeState: (name: string, storage: StorageType) => TreeUrlState | null;
+export declare const clearTreeState: (name: string, storage: StorageType) => void;
 /**
  * Dataset row fields for `pageParams.item` (no methods — those are merged in the hook as {@link TreePartialNodeApi}).
  */

package/components/basic/tree/utils.js

@@ -20,6 +20,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import isArray from "lodash-es/isArray";
 import cloneDeep from "lodash-es/cloneDeep";
 import get from "lodash-es/get";
+import {
+  clearWidgetState,
+  getWidgetState,
+  setWidgetState
+} from "../../../utils/state-persistance";
 const isTreeNodeDisabled = (data) => {
   if (!data) return false;
   const disabled_node = data.disabled;
@@ -144,6 +149,106 @@ const toggleExpansionInTree = (nodes, nodeId) => {
     return n;
   });
 };
+const migrateLegacyTreeUrlState = (raw) => {
+  if (!raw || typeof raw !== "object") return [];
+  if (Array.isArray(raw.expanded) && raw.expanded.length) {
+    return raw.expanded.map((id) => String(id));
+  }
+  const ids = /* @__PURE__ */ new Set();
+  if (Array.isArray(raw.parentNode)) {
+    for (const x of raw.parentNode) {
+      if (x != null && x !== "") ids.add(String(x));
+    }
+  }
+  if (raw.open && raw.id != null && raw.id !== "") {
+    ids.add(String(raw.id));
+  }
+  return [...ids];
+};
+const normalizeExpandedIds = (tree, expandedIds) => {
+  const set = /* @__PURE__ */ new Set();
+  for (const id of expandedIds) {
+    if (id == null || id === "") continue;
+    const node = findNodeById(tree, String(id));
+    if (!node) continue;
+    let current = node;
+    while (current) {
+      set.add(String(current.nodeId));
+      current = current.parent;
+    }
+  }
+  return set;
+};
+const collectExpandedNodeIdsForUrl = (nodes) => {
+  const out = [];
+  const walk = (list, branchOpen) => {
+    var _a;
+    for (const n of list) {
+      if (!branchOpen) continue;
+      if (n.open) {
+        out.push(n.nodeId);
+        if ((_a = n.children) == null ? void 0 : _a.length) {
+          walk(n.children, true);
+        }
+      }
+    }
+  };
+  walk(nodes, true);
+  return out;
+};
+const encodeNodeIdForUrl = (id) => {
+  try {
+    return btoa(unescape(encodeURIComponent(id))).replace(/=+$/, "");
+  } catch (e) {
+    return id;
+  }
+};
+const decodeNodeIdFromUrl = (token) => {
+  try {
+    return decodeURIComponent(escape(atob(token)));
+  } catch (e) {
+    return token;
+  }
+};
+const toTreeStatePayload = (storage, state) => {
+  var _a;
+  if (storage !== "URL") return state;
+  const out = {};
+  if ((_a = state.expanded) == null ? void 0 : _a.length) {
+    out.expanded = [...new Set(state.expanded.map(String))].map(encodeNodeIdForUrl);
+  }
+  if (state.selected) out.selected = encodeNodeIdForUrl(String(state.selected));
+  return out;
+};
+const fromTreeStatePayload = (storage, raw) => {
+  var _a, _b;
+  if (raw == null || typeof raw !== "object" || Array.isArray(raw)) return null;
+  const state = raw;
+  if (storage !== "URL") return state;
+  const out = {};
+  if ((_a = state.expanded) == null ? void 0 : _a.length) {
+    out.expanded = [...new Set(state.expanded.map((id) => decodeNodeIdFromUrl(String(id))))];
+  }
+  if (state.selected) out.selected = decodeNodeIdFromUrl(String(state.selected));
+  return ((_b = out.expanded) == null ? void 0 : _b.length) || out.selected ? out : null;
+};
+const saveTreeState = (name, storage, stateToSave) => {
+  const config = { name, type: "tree", storage };
+  if (stateToSave == null) {
+    clearWidgetState(config);
+    return;
+  }
+  if (storage === "URL") {
+    clearWidgetState(config);
+  }
+  setWidgetState(config, toTreeStatePayload(storage, stateToSave));
+};
+const getTreeState = (name, storage) => {
+  return fromTreeStatePayload(storage, getWidgetState({ name, type: "tree", storage }));
+};
+const clearTreeState = (name, storage) => {
+  clearWidgetState({ name, type: "tree", storage });
+};
 const getTreePartialRowPayload = (node) => {
   var _a;
   const raw = node.data;
@@ -205,12 +310,18 @@ export {
   assembleTreePartialItem,
   buildTreePartialSnapshot,
   buildTreePathFromRoot,
+  clearTreeState,
+  collectExpandedNodeIdsForUrl,
   computeTreeNodeDepthFromRoot,
   findNodeById,
   generateUniqueNodeId,
   getNestedPropertyLocal,
   getTreePartialRowPayload,
+  getTreeState,
   isTreeNodeDisabled,
+  migrateLegacyTreeUrlState,
+  normalizeExpandedIds,
   processNode,
+  saveTreeState,
   toggleExpansionInTree
 };

package/components/chart/src/dataUtils.js

@@ -428,7 +428,7 @@ const getAggregatedData = (datasource, groupby, aggregation, aggregationcolumn,
       }
     ];
   }
-  datasource.execute("getAggregatedData", {
+  datasource == null ? void 0 : datasource.execute("getAggregatedData", {
     aggregations: data,
     sort: sortExpr
   }).then(

package/components/common/customTemplate/useCustomTemplate.js

@@ -6,7 +6,7 @@ function useCustomTemplate({ content, name, listener }) {
     if ((listener == null ? void 0 : listener.onChange) && typeof listener.onChange === "function") {
       listener.onChange(name, { setTemplate });
     }
-  }, [name, listener == null ? void 0 : listener.onChange]);
+  }, [name]);
   useEffect(() => {
     stableOnChange();
   }, [stableOnChange]);

package/components/container/layout-grid/grid-column/index.js

@@ -33,6 +33,7 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { Container } from "@mui/material";
 import { withBaseWrapper } from "../../../../higherOrder/withBaseWrapper";
+import { removeInvalidAttributes } from "../../../../utils/attr";
 const DEFAULT_CLASS = "app-grid-column";
 const WmGridcolumn = (props) => {
   const _a = props, {
@@ -57,7 +58,7 @@ const WmGridcolumn = (props) => {
       maxWidth: false,
       style: styles,
       className: clsx(DEFAULT_CLASS, className, columnwidth && `col-sm-${columnwidth}`)
-    }, otherProps), {
+    }, removeInvalidAttributes(otherProps)), {
       children
     })
   );

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

@@ -449,7 +449,7 @@ const BaseForm = (WrappedComponent) => {
     useEffect(() => {
       return () => {
         var _a2;
-        if (!formName) return;
+        if (!formName || !formRef.current) return;
         (_a2 = props == null ? void 0 : props.destroy) == null ? void 0 : _a2.call(props, formName);
         formresetFn();
       };
@@ -583,6 +583,7 @@ const BaseForm = (WrappedComponent) => {
         widgetCls,
         itemsPerRow,
         validationtype: props.validationtype,
+        submitCount,
         showViewMode,
         formdata: computedFormdata,
         submit,
@@ -602,6 +603,7 @@ const BaseForm = (WrappedComponent) => {
         widgetCls,
         itemsPerRow,
         props.validationtype,
+        submitCount,
         showViewMode,
         computedFormdata,
         submit,

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

@@ -160,17 +160,12 @@ const withFormController = (WrappedComponent) => {
         }
       };
     }, [effectiveFormKey]);
-    useEffect(() => {
-      if (touched && !hasEverBeenTouchedRef.current) {
-        hasEverBeenTouchedRef.current = true;
-      }
-    }, [touched]);
     useEffect(() => {
       if (isInitialMountRef.current) {
         isInitialMountRef.current = false;
         return;
       }
-      const hasBeenTouchedOrSubmitted = hasEverBeenTouchedRef.current || (formRef == null ? void 0 : formRef.submitCount) && formRef.submitCount > 0;
+      const hasBeenTouchedOrSubmitted = hasEverBeenTouchedRef.current || (formRef == null ? void 0 : formRef.submitCount) && formRef.submitCount > 0 || false;
       if (trigger && effectiveFormKey && hasBeenTouchedOrSubmitted) {
         trigger(effectiveFormKey);
       }
@@ -181,7 +176,7 @@ const withFormController = (WrappedComponent) => {
         customMsgInitialRef.current = false;
         return;
       }
-      if (trigger && effectiveFormKey) {
+      if (trigger && effectiveFormKey && hasEverBeenTouchedRef.current) {
         trigger(effectiveFormKey);
       }
     }, [customValidationMsg]);
@@ -218,6 +213,7 @@ const withFormController = (WrappedComponent) => {
         return (e) => {
           var _a2;
           setTouched(true);
+          hasEverBeenTouchedRef.current = true;
           field.onBlur();
           const shouldTriggerValidation = validationType === "html" && trigger && !!fieldState.error || validationType !== "none" && ((_a2 = observeRef.current) == null ? void 0 : _a2.length) && trigger;
           if (shouldTriggerValidation) {

package/components/data/pagination/hooks/usePagination.js

@@ -165,7 +165,6 @@ const usePagination = ({
             return response;
           }).catch((error) => {
             isFetchingRef.current = false;
-            console.error("Error fetching page data:", error);
             setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), {
               error: error.message || "Failed to fetch page data"
             }));

package/components/data/table/index.js

@@ -396,7 +396,7 @@ const WmTableComponent = memo(
           initialSortState: persisted.sort || void 0
         };
       }
-      const initialPageSize2 = defaultPageSizeFromOptions !== void 0 ? defaultPageSizeFromOptions : actualPageSize || pagesize;
+      const initialPageSize2 = allowpagesizechange ? defaultPageSizeFromOptions != null ? defaultPageSizeFromOptions : actualPageSize : pagesize;
       return {
         initialPage: 1,
         initialPageSize: initialPageSize2,
@@ -1392,6 +1392,9 @@ const WmTableComponent = memo(
     useEffect(() => {
       updateSelectedItem();
     }, [activeRowIds, selectedRowIds, useRadioSelect, useMultiSelect, internalDataset, name]);
+    const isTableLoading = useMemo(() => {
+      return loading && navigation !== "On-Demand" && internalDataset.length === 0;
+    }, [loading, navigation, internalDataset.length]);
     const colGroupSpec = useMemo(() => {
       const headerGroups = table.getHeaderGroups();
       const leafHeaderGroup = headerGroups.length ? headerGroups[headerGroups.length - 1] : void 0;
@@ -1454,7 +1457,7 @@ const WmTableComponent = memo(
                 className: "app-grid-header-inner",
                 style: __spreadValues({ height: "100%", overflow: "auto", position: "relative" }, styles),
                 children: [
-                  loading && navigation !== "On-Demand" && /* @__PURE__ */ jsx(LoadingComponent, { message: loadingdatamsg }),
+                  isTableLoading && /* @__PURE__ */ jsx(LoadingComponent, { message: loadingdatamsg }),
                   /* @__PURE__ */ jsxs(
                     Table,
                     __spreadProps(__spreadValues({

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

@@ -8,7 +8,7 @@ export declare const createRowIndexColumn: () => ColumnDef<any>;
 /**
  * Creates data column definition from WmTableColumnProps
  */
-export declare const createDataColumn: (wmColumn: WmTableColumnProps, renderCell: (wmColumn: WmTableColumnProps, row: any) => React.ReactNode) => ColumnDef<any>;
+export declare const createDataColumn: (wmColumn: WmTableColumnProps, renderCell: (wmColumn: WmTableColumnProps, row: any) => React.ReactNode, index?: number) => ColumnDef<any>;
 /**
  * Creates column definitions from table columns
  */

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

@@ -45,7 +45,7 @@ const createRowIndexColumn = () => ({
   },
   enableSorting: false
 });
-const createDataColumn = (wmColumn, renderCell) => {
+const createDataColumn = (wmColumn, renderCell, index = 0) => {
   var _a, _b;
   const colClassProp = (_a = wmColumn.colClass) != null ? _a : wmColumn["col-class"];
   let columnSize;
@@ -54,8 +54,11 @@ const createDataColumn = (wmColumn, renderCell) => {
   } else if ((_b = wmColumn.styles) == null ? void 0 : _b.width) {
     columnSize = parseWidth(wmColumn.styles.width);
   }
+  const accessorKey = wmColumn.field || wmColumn.name;
+  const columnId = (accessorKey == null ? void 0 : accessorKey.replace(/\./g, "_")) || (typeof wmColumn.caption === "string" && wmColumn.caption ? wmColumn.caption : void 0) || `column_${index}`;
   return __spreadProps(__spreadValues({
-    accessorKey: wmColumn.field || wmColumn.name,
+    id: columnId,
+    accessorKey,
     // Use sortby field for sorting if provided, otherwise use the display field
     // Supports nested properties like "department.store.employee"
     accessorFn: wmColumn.sortby ? (row) => get(row, wmColumn.sortby || "") : void 0,
@@ -89,9 +92,9 @@ const createDataColumn = (wmColumn, renderCell) => {
 };
 const createDataColumns = (wmTableColumns, renderCell) => {
   const columns = [];
-  wmTableColumns.forEach((wmColumn) => {
+  wmTableColumns.forEach((wmColumn, index) => {
     if (wmColumn.show) {
-      columns.push(createDataColumn(wmColumn, renderCell));
+      columns.push(createDataColumn(wmColumn, renderCell, index));
     }
   });
   return columns;

package/components/data/table/utils/crud-handlers.js

@@ -27,8 +27,8 @@ import { DataSource } from "../../types";
 const getDatasourceInfo = async (datasource) => {
   var _a, _b;
   const [supportsCrud, isApiAware] = await Promise.all([
-    datasource.execute(DataSource.Operation.SUPPORTS_CRUD),
-    datasource.execute(DataSource.Operation.IS_API_AWARE)
+    datasource == null ? void 0 : datasource.execute(DataSource.Operation.SUPPORTS_CRUD),
+    datasource == null ? void 0 : datasource.execute(DataSource.Operation.IS_API_AWARE)
   ]);
   const currentPageNum = ((_b = (_a = datasource.pagination) == null ? void 0 : _a.number) != null ? _b : 0) + 1;
   const shouldUseServer = supportsCrud || !isApiAware || datasource.category === "wm.CrudVariable";
@@ -151,7 +151,7 @@ const handleNonApiAwareOperation = async (datasource, binddataset, formData, ope
   const path = binddataset.split(".");
   const parentIndex = parseInt(path[path.length - 1]);
   const parentPath = path.slice(0, -1).join(".");
-  return datasource.execute(DataSource.Operation[operation], {
+  return datasource == null ? void 0 : datasource.execute(DataSource.Operation[operation], {
     item: formData,
     path: parentPath,
     parentIndex
@@ -159,7 +159,7 @@ const handleNonApiAwareOperation = async (datasource, binddataset, formData, ope
 };
 const refreshDataSource = async (datasource, options) => {
   if (!datasource) throw new Error("Datasource is required");
-  return datasource.execute(DataSource.Operation.LIST_RECORDS, {
+  return datasource == null ? void 0 : datasource.execute(DataSource.Operation.LIST_RECORDS, {
     filterFields: options.filterFields || {},
     orderBy: options.orderBy,
     page: options.page || 1,
@@ -206,10 +206,10 @@ const handleServerOperation = async (options) => {
             isNewRow ? "ADD_ITEM" : "SET_ITEM"
           );
         } else {
-          response = await datasource.execute(
+          response = await (datasource == null ? void 0 : datasource.execute(
             isNewRow ? DataSource.Operation.INSERT_RECORD : DataSource.Operation.UPDATE_RECORD,
             { row: formData, skipNotification: true }
-          );
+          ));
           if (response.error) throw response.error;
           if (isNewRow && isServerSidePagination && datasource.pagination) {
             const { totalElements, size = 10 } = datasource.pagination;
@@ -292,10 +292,10 @@ const handleDeleteOperation = async (options) => {
         if (!isApiAware && binddataset) {
           await handleNonApiAwareOperation(datasource, binddataset, rowData, "REMOVE_ITEM");
         } else {
-          response = await datasource.execute(DataSource.Operation.DELETE_RECORD, {
+          response = await (datasource == null ? void 0 : datasource.execute(DataSource.Operation.DELETE_RECORD, {
             row: rowData,
             skipNotification: true
-          });
+          }));
           if (response.error) throw response.error;
         }
       }
@@ -312,10 +312,10 @@ const handleDeleteOperation = async (options) => {
       isServerSidePagination || false
     );
     if (isServerSidePagination && paginationResult.shouldRefresh && datasource) {
-      await datasource.invoke({
+      await (datasource == null ? void 0 : datasource.invoke({
         page: paginationResult.targetPage,
         pagesize: ((_b = datasource.pagination) == null ? void 0 : _b.size) || 10
-      });
+      }));
     }
     onRowDelete == null ? void 0 : onRowDelete(rowData, rowIndex, newDataset);
     return handleOperationResult("delete", response, null, {

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

@@ -94,11 +94,12 @@ export declare const INTERNAL_PROPERTIES: string[];
 export declare const cleanRowData: (data: any) => any;
 export declare const parseWidth: (width: string | number, fallbackSize?: number) => number;
 export declare const getColClass: (colClass: string, rowData: any, columnName: string) => string;
-export * from "./constants";
-export * from "./renderDisplayCell";
-export * from "./buildSelectionColumns";
-export * from "./validation";
-export * from "./selectionUtils";
-export * from "./columnBuilder";
-export * from "./columnWidthDistribution";
-export * from "./table-helpers";
+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 { renderDisplayCell } from "./renderDisplayCell";
+export { buildSelectionColumns } from "./buildSelectionColumns";
+export { validateField, resetValidationState, updateValidationErrors } from "./validation";
+export { hasInteractiveClass, hasInteractiveAttributes, isInteractiveElement, getRowIdsFromDataset, rowExistsInDataset, selectionStateHelpers, } from "./selectionUtils";
+export { createRowIndexColumn, createDataColumn, createDataColumns, createEditingActionButtons, createDefaultColumnProps, getActionColumnSize, } from "./columnBuilder";
+export { isDataColumn, hasExplicitWidth, distributeColumnWidths } from "./columnWidthDistribution";
+export type { TableSearchFilter, FilterFieldObject, FilterFieldsObject, TableSortState, TableStateData, } from "./table-helpers";
+export { saveTableState, getTableState, clearTableState, convertFilterArrayToObject, convertFilterObjectToArray, } from "./table-helpers";

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

@@ -590,40 +590,104 @@ const getColClass = (colClass, rowData, columnName) => {
     return "";
   }
 };
-export * from "./constants";
-export * from "./renderDisplayCell";
-export * from "./buildSelectionColumns";
-export * from "./validation";
-export * from "./selectionUtils";
-export * from "./columnBuilder";
-export * from "./columnWidthDistribution";
-export * from "./table-helpers";
+import {
+  TABLE_CSS_CLASSES as TABLE_CSS_CLASSES2,
+  TABLE_DATA_STATES,
+  TABLE_MESSAGES,
+  INTERACTIVE_CLASSES,
+  INTERACTIVE_ROLES,
+  INTERACTIVE_DATA_ROLES,
+  INTERACTIVE_TAG_NAMES,
+  DYNAMIC_COLUMNS_CONFIG,
+  UNSUPPORTED_STATE_PERSISTENCE_TYPES
+} from "./constants";
+import { renderDisplayCell } from "./renderDisplayCell";
+import { buildSelectionColumns } from "./buildSelectionColumns";
+import { validateField, resetValidationState, updateValidationErrors } from "./validation";
+import {
+  hasInteractiveClass,
+  hasInteractiveAttributes,
+  isInteractiveElement,
+  getRowIdsFromDataset,
+  rowExistsInDataset,
+  selectionStateHelpers
+} from "./selectionUtils";
+import {
+  createRowIndexColumn,
+  createDataColumn,
+  createDataColumns,
+  createEditingActionButtons,
+  createDefaultColumnProps,
+  getActionColumnSize
+} from "./columnBuilder";
+import { isDataColumn, hasExplicitWidth, distributeColumnWidths } from "./columnWidthDistribution";
+import {
+  saveTableState,
+  getTableState,
+  clearTableState,
+  convertFilterArrayToObject,
+  convertFilterObjectToArray
+} from "./table-helpers";
 export {
+  DYNAMIC_COLUMNS_CONFIG,
+  INTERACTIVE_CLASSES,
+  INTERACTIVE_DATA_ROLES,
+  INTERACTIVE_ROLES,
+  INTERACTIVE_TAG_NAMES,
   INTERNAL_PROPERTIES,
+  TABLE_CSS_CLASSES2 as TABLE_CSS_CLASSES,
+  TABLE_DATA_STATES,
+  TABLE_MESSAGES,
+  UNSUPPORTED_STATE_PERSISTENCE_TYPES,
   addUniqueRowIds,
+  buildSelectionColumns,
   cleanRowData,
+  clearTableState,
+  convertFilterArrayToObject,
+  convertFilterObjectToArray,
+  createDataColumn,
+  createDataColumns,
+  createDefaultColumnProps,
+  createEditingActionButtons,
+  createRowIndexColumn,
+  distributeColumnWidths,
   extractDataArray,
   flattenTableStructure,
   getActionButtonClass,
+  getActionColumnSize,
   getAggregateFunctions,
   getBooleanDataset,
   getButtonClasses,
   getColClass,
+  getRowIdsFromDataset,
   getSpacingClasses,
   getTableActionButtonClass,
+  getTableState,
   getWidgetMappingForType,
   handleNewRowNavigation,
+  hasExplicitWidth,
+  hasInteractiveAttributes,
+  hasInteractiveClass,
   isAddNewAction,
   isColumnVisibleForViewport,
+  isDataColumn,
   isDeleteAction,
   isEditAction,
+  isInteractiveElement,
   parseTableActions,
   parseTableColumns,
   parseTableRowActions,
   parseTableRowExpansion,
   parseTableStructureWithGroups,
   parseWidth,
+  renderDisplayCell,
+  resetValidationState,
+  rowExistsInDataset,
+  saveTableState,
+  selectionStateHelpers,
   shouldShowPagination,
   shouldShowPanelHeading,
-  validateEditingFields
+  updateValidationErrors,
+  validateEditingFields,
+  validateField
 };

package/components/layout/leftnav/index.js

@@ -1,18 +1,24 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { useContext, useEffect } from "react";
 import clsx from "clsx";
 import Box from "@mui/material/Box";
+import { PageLayoutContext } from "../../page/page-context";
+import { getLeftPanelPageClasses } from "./utils/page-class-util";
 const DEFAULT_CLASS = "app-nav-drawer app-left-panel left-panel-collapsed ";
+const SLIDE_IN = "slide-in";
 const WmLeftPanel = (props) => {
+  const { onLeftPanelPageClassesChange } = useContext(PageLayoutContext);
   const {
     styles,
     children,
     render,
     className,
     columnwidth = 2,
+    xscolumnwidth = 10,
     id,
     navtype,
     navheight,
+    animation = SLIDE_IN,
     onNavHeightChange
   } = props;
   useEffect(() => {
@@ -25,6 +31,18 @@ const WmLeftPanel = (props) => {
       }
     };
   }, [navheight, onNavHeightChange]);
+  useEffect(() => {
+    onLeftPanelPageClassesChange == null ? void 0 : onLeftPanelPageClassesChange(
+      getLeftPanelPageClasses({
+        animation,
+        columnwidth,
+        xscolumnwidth
+      })
+    );
+    return () => {
+      onLeftPanelPageClassesChange == null ? void 0 : onLeftPanelPageClassesChange(void 0);
+    };
+  }, [animation, columnwidth, xscolumnwidth]);
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -34,7 +52,8 @@ const WmLeftPanel = (props) => {
       className: clsx(
         DEFAULT_CLASS,
         className,
-        `col-sm-${columnwidth} ${navtype ? `app-nav-${navtype}` : ""} ${navheight ? `app-nav-${navheight}` : ""}`
+        animation,
+        `col-md-${columnwidth} col-sm-${columnwidth} col-xs-${xscolumnwidth} ${navtype ? `app-nav-${navtype}` : ""} ${navheight ? `app-nav-${navheight}` : ""}`
       ),
       children: render ? render(props) : children
     }

package/components/layout/leftnav/props.d.ts

@@ -1,9 +1,18 @@
 export interface LeftNavProps {
+    /**
+     * The animation mode used by the left panel.
+     */
+    animation?: string;
     /**
      * The number of columns the left panel should span.
      * @default 2
      */
     columnwidth?: number | string;
+    /**
+     * The number of columns the left panel should span on extra-small screens.
+     * @default 10
+     */
+    xscolumnwidth?: number | string;
     /**
      * The height of the navigation panel.
      */

package/components/layout/leftnav/utils/page-class-util.d.ts

@@ -0,0 +1,9 @@
+export type LeftPanelPageLayout = {
+    animation?: string;
+    columnwidth?: number | string;
+    xscolumnwidth?: number | string;
+};
+/**
+ * (slide-in-left-panel-container, left-panel-container-*-*, etc.).
+ */
+export declare const getLeftPanelPageClasses: (layout: LeftPanelPageLayout) => string;

package/components/layout/leftnav/utils/page-class-util.js

@@ -0,0 +1,28 @@
+import clsx from "clsx";
+const SLIDE_IN = "slide-in";
+const SLIDE_OVER = "slide-over";
+const getPageWidthClass = (device, panelWidth) => {
+  const width = Number(panelWidth);
+  if (!Number.isFinite(width)) {
+    return "";
+  }
+  return `left-panel-container-${device}-${12 - width}`;
+};
+const getLeftPanelPageClasses = (layout) => {
+  if (layout.animation === SLIDE_IN) {
+    return clsx(
+      "left-panel-collapsed-container",
+      "slide-in-left-panel-container",
+      getPageWidthClass("md", layout.columnwidth),
+      getPageWidthClass("sm", layout.columnwidth),
+      getPageWidthClass("xs", layout.xscolumnwidth)
+    );
+  }
+  if (layout.animation === SLIDE_OVER) {
+    return clsx("left-panel-collapsed-container", "slide-over-left-panel-container");
+  }
+  return "left-panel-collapsed-container";
+};
+export {
+  getLeftPanelPageClasses
+};