@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/data/form/props.d.ts

@@ -0,0 +1,131 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+export interface FormProps {
+    /**
+     * The default mode of the form.
+     */
+    defaultmode?: "create" | "edit" | "view";
+    /**
+     * Error message to display when form submission fails.
+     */
+    errormessage?: string;
+    /**
+     * Position of the captions for form fields.
+     */
+    captionposition?: "left" | "right" | "top" | "bottom";
+    /**
+     * Title of the form.
+     */
+    title?: string;
+    /**
+     * Encoding type for the form.
+     */
+    enctype?: string;
+    /**
+     * HTTP method for form submission.
+     */
+    method?: "post" | "put" | "delete";
+    /**
+     * The alignment of the captions.
+     */
+    captionalign?: "left" | "center" | "right";
+    /**
+     * Subheading of the form.
+     */
+    subheading?: string;
+    /**
+     * CSS class for the form icon.
+     */
+    iconclass?: string;
+    iconurl?: string;
+    /**
+     * Whether to enable autocomplete for the form.
+     */
+    autocomplete?: boolean;
+    /**
+     * Whether the form is collapsible.
+     */
+    collapsible?: boolean;
+    /**
+     * Whether the form is expanded by default (if collapsible).
+     */
+    expanded?: boolean;
+    /**
+     * Data source for the form.
+     */
+    formdatasource?: string;
+    /**
+     * Number of fields/columns in the form layout.
+     */
+    numberoffields?: number;
+    /**
+     * Type of the form.
+     */
+    formType?: string;
+    /**
+     * Whether the form is currently in view mode.
+     */
+    isViewMode?: boolean;
+    /**
+     * Whether the form is part of a layout dialog.
+     */
+    isLayoutDialog?: boolean;
+    /**
+     * Whether the form is inside a wizard component.
+     */
+    isInsideWizard?: boolean;
+    /**
+     * Type of validation to apply.
+     */
+    validationtype?: string;
+    /**
+     * The unique ID for the form.
+     */
+    id?: string;
+    /**
+     * Metadata for the form fields.
+     */
+    metadata?: any[];
+    /**
+     * Callback for form submission.
+     */
+    submit?: (e?: any) => Promise<boolean | undefined>;
+    /**
+     * Callback for resetting the form.
+     */
+    formreset?: () => Promise<void>;
+    /**
+     * Ref for the HTML form element.
+     */
+    formElementRef?: React.Ref<HTMLFormElement>;
+    /**
+     * Actions to display in the form header.
+     */
+    headerActions?: any[];
+    /**
+     * Function to handle expansion/collapse of the form.
+     */
+    expandCollapsePanel?: () => void;
+    /**
+     * Whether to show the status message.
+     */
+    showmessage?: boolean;
+    /**
+     * Layout for the status message.
+     */
+    messagelayout?: "Inline" | "Toaster";
+    /**
+     * The status message to display.
+     */
+    statusMessage?: {
+        caption?: string;
+        type?: string;
+    };
+    /**
+     * Callback to clear the status message.
+     */
+    clearMessage?: () => void;
+}
+/**
+ * Combined props for the WmForm component, including base WaveMaker props.
+ */
+export type WmFormProps = Prettify<FormProps & BaseProps>;

package/components/data/list/components/GroupHeader.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { GroupHeaderProps } from "./props";
+/**
+ * Group header component for grouped lists
+ */
+export declare const GroupHeader: React.FC<GroupHeaderProps>;

package/components/data/list/components/GroupHeader.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+const GroupHeader = ({
+  groupKey,
+  displayCount,
+  isCollapsed,
+  collapsible,
+  showcount,
+  onHeaderClick
+}) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    className: clsx("app-list-item-header list-item list-group-header", {
+      "collapsible-content": collapsible
+    }),
+    onClick: () => onHeaderClick(groupKey),
+    children: /* @__PURE__ */ jsxs("h4", { children: [
+      groupKey,
+      /* @__PURE__ */ jsxs("div", { className: "header-action", children: [
+        collapsible && /* @__PURE__ */ jsx(
+          "i",
+          {
+            className: clsx(
+              "app-icon wi action",
+              isCollapsed ? "wi-chevron-down" : "wi-chevron-up"
+            )
+          }
+        ),
+        showcount && /* @__PURE__ */ jsx("span", { className: "label label-default", children: displayCount })
+      ] })
+    ] })
+  }
+);
+export {
+  GroupHeader
+};

package/components/data/list/components/GroupedListItems.d.ts

@@ -0,0 +1,6 @@
+import { ListItemData } from "../props";
+import { GroupedListItemsProps } from "./props";
+/**
+ * Grouped list items renderer for grouped lists
+ */
+export declare const GroupedListItems: <T extends ListItemData = ListItemData>({ groupedData, paginatedGroupedData, direction, disableitem, itemclass, itemsPerRowClass, name, tabIndex, activeItems, collapsible, showcount, groupCollapsed, renderItem, itemTemplate, nodatamessage, onItemClick, onItemDoubleClick, onItemMouseEnter, onItemMouseLeave, onHeaderClick, itemAttrs, hasListGroupAutoLayout, standalone, }: GroupedListItemsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/components/data/list/components/GroupedListItems.js

@@ -0,0 +1,112 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { GroupHeader } from "./GroupHeader";
+import { ListItemWithTemplate } from "./ListItemWithTemplate";
+import { NoDataMessage } from "./NoDataMessage";
+import { LIST_DIRECTION } from "../utils/constants";
+const GroupedListItems = ({
+  groupedData,
+  paginatedGroupedData,
+  direction,
+  disableitem,
+  itemclass,
+  itemsPerRowClass,
+  name,
+  tabIndex,
+  activeItems,
+  collapsible,
+  showcount,
+  groupCollapsed,
+  renderItem,
+  itemTemplate,
+  nodatamessage,
+  onItemClick,
+  onItemDoubleClick,
+  onItemMouseEnter,
+  onItemMouseLeave,
+  onHeaderClick,
+  itemAttrs,
+  hasListGroupAutoLayout,
+  standalone = false
+}) => {
+  if (!groupedData || !Array.isArray(groupedData) || groupedData.length === 0) {
+    return /* @__PURE__ */ jsx(NoDataMessage, { message: nodatamessage });
+  }
+  const groupsToRender = paginatedGroupedData;
+  if (groupsToRender.length === 0) {
+    return /* @__PURE__ */ jsx(NoDataMessage, { message: nodatamessage });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: groupsToRender.map((groupObj) => {
+    const isGroupCollapsed = groupCollapsed[groupObj.key] || false;
+    const displayCount = groupObj.originalDataLength || groupObj.data.length;
+    const groupedItemClass = typeof itemclass === "function" ? (it) => clsx(itemclass(it), "group-list-item") : clsx(itemclass, "group-list-item");
+    return /* @__PURE__ */ jsx("li", { className: "app-list-item-group clearfix", children: /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        tabIndex,
+        className: clsx(
+          "list-group item-group",
+          hasListGroupAutoLayout && "list-group-autolayout"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            GroupHeader,
+            {
+              groupKey: groupObj.key,
+              displayCount,
+              isCollapsed: isGroupCollapsed,
+              collapsible,
+              showcount,
+              onHeaderClick
+            }
+          ),
+          !isGroupCollapsed && /* @__PURE__ */ jsx("li", { className: "list-group-container", children: /* @__PURE__ */ jsx(
+            "ul",
+            {
+              className: clsx(
+                "list-group clearfix",
+                direction === LIST_DIRECTION.HORIZONTAL ? "app-horizontal-list" : "",
+                hasListGroupAutoLayout && "list-group-autolayout"
+              ),
+              children: groupObj.data.map((item, index) => {
+                const actualIndexInGroup = groupObj.startIndexInGroup + index;
+                const itemId = `group_${groupObj.key}_item_${actualIndexInGroup}`;
+                const isFirst = index === 0;
+                const isLast = index === groupObj.data.length - 1;
+                return /* @__PURE__ */ jsx(
+                  ListItemWithTemplate,
+                  {
+                    item,
+                    index: actualIndexInGroup,
+                    itemId,
+                    isFirst,
+                    isLast,
+                    disableitem,
+                    itemclass: groupedItemClass,
+                    itemsPerRowClass,
+                    name: `${name}_group_${groupObj.key}`,
+                    tabIndex,
+                    isActive: activeItems.has(item),
+                    direction,
+                    renderItem,
+                    itemTemplate,
+                    onItemClick,
+                    onItemDoubleClick,
+                    onItemMouseEnter,
+                    onItemMouseLeave,
+                    itemAttrs,
+                    standalone
+                  },
+                  itemId
+                );
+              })
+            }
+          ) })
+        ]
+      }
+    ) }, `group_${groupObj.key}`);
+  }) });
+};
+export {
+  GroupedListItems
+};

package/components/data/list/components/ListContainer.d.ts

@@ -0,0 +1,6 @@
+import { ListItemData } from "../props";
+import { ListContainerProps } from "./props";
+/**
+ * List container wrapper that optionally includes drag and drop functionality
+ */
+export declare const ListContainer: <T extends ListItemData = ListItemData>({ direction, enablereorder, items, startIndex, children, onDragEnd, }: ListContainerProps<T>) => import("react/jsx-runtime").JSX.Element;

package/components/data/list/components/ListContainer.js

@@ -0,0 +1,22 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { DndWrapper } from "./ListDND";
+const ListContainer = ({
+  direction,
+  enablereorder,
+  items,
+  startIndex,
+  children,
+  onDragEnd
+}) => /* @__PURE__ */ jsx(Fragment, { children: enablereorder ? /* @__PURE__ */ jsx(
+  DndWrapper,
+  {
+    items,
+    direction,
+    startIndex,
+    onDragEnd,
+    children
+  }
+) : children });
+export {
+  ListContainer
+};

package/components/data/list/components/ListDND.d.ts

@@ -0,0 +1,39 @@
+import React, { ReactNode } from "react";
+import { DragEndEvent } from "@dnd-kit/core";
+import { IDirection } from "../props";
+export declare const getItemId: (item: any, index: number) => string;
+export declare const dragStyles: {
+    draggable: {
+        touchAction: string;
+        userSelect: "none";
+    };
+    dragging: {
+        opacity: number;
+        cursor: string;
+        zIndex: number;
+        boxShadow: string;
+    };
+    handle: {
+        cursor: string;
+    };
+};
+export declare const SortableItem: ({ id, children, enableReorder, disableItem, direction, }: {
+    id: string;
+    children: ReactNode;
+    enableReorder?: boolean;
+    disableItem?: boolean;
+    direction?: IDirection;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const DndWrapper: ({ children, items, direction, startIndex, onDragEnd, }: {
+    children: ReactNode;
+    items: any[];
+    direction: IDirection;
+    startIndex: number;
+    onDragEnd: (event: DragEndEvent) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useDragAndDrop: (initialItems: any[], onReorder?: (event: any, data: any, changes: any) => void, orderby?: string) => {
+    items: any[];
+    setItems: React.Dispatch<React.SetStateAction<any[]>>;
+    handleDragEnd: (event: DragEndEvent) => void;
+    hasBeenReordered: boolean;
+};

package/components/data/list/components/ListDND.js

@@ -0,0 +1,254 @@
+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));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState, useCallback, useRef } from "react";
+import clsx from "clsx";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  DragOverlay,
+  MouseSensor,
+  TouchSensor
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  horizontalListSortingStrategy,
+  useSortable
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+const getItemId = (item, index) => {
+  if ((item == null ? void 0 : item.id) !== void 0) {
+    return `item_${item.id}_${index}`;
+  }
+  if ((item == null ? void 0 : item._wmListItemId) !== void 0) {
+    return `item_${item._wmListItemId}_${index}`;
+  }
+  if (typeof item === "object" && item !== null) {
+    const keys = Object.keys(item).slice(0, 3);
+    const hashStr = keys.map((key) => {
+      const val = item[key];
+      if (typeof val !== "object" && val !== null && val !== void 0) {
+        return `${key}:${val}`;
+      }
+      return null;
+    }).filter(Boolean).join("_");
+    return hashStr ? `item_${hashStr}_idx${index}` : `item_idx${index}`;
+  }
+  return `item_idx${index}`;
+};
+const dragStyles = {
+  draggable: {
+    touchAction: "none",
+    userSelect: "none"
+  },
+  dragging: {
+    opacity: 0.5,
+    cursor: "grabbing",
+    zIndex: 1,
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)"
+  },
+  handle: {
+    cursor: "grab"
+  }
+};
+const SortableItem = ({
+  id,
+  children,
+  enableReorder,
+  disableItem,
+  direction = "vertical"
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    disabled: !enableReorder || disableItem
+  });
+  const getConstrainedTransform = () => {
+    if (!transform) return null;
+    if (direction === "horizontal") {
+      return __spreadProps(__spreadValues({}, transform), {
+        y: Math.max(-5, Math.min(5, transform.y)),
+        // Minimal vertical drift
+        scaleX: transform.scaleX || 1,
+        scaleY: transform.scaleY || 1
+      });
+    } else {
+      return __spreadProps(__spreadValues({}, transform), {
+        x: Math.max(-5, Math.min(5, transform.x)),
+        // Minimal horizontal drift
+        scaleX: transform.scaleX || 1,
+        scaleY: transform.scaleY || 1
+      });
+    }
+  };
+  const constrainedTransform = getConstrainedTransform();
+  const style = {
+    "--wm-dnd-transform": CSS.Transform.toString(constrainedTransform),
+    "--wm-dnd-transition": transition
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({
+      ref: setNodeRef,
+      className: clsx(
+        "wm-sortable-item",
+        "wm-position-relative",
+        "wm-touch-action-none",
+        "wm-will-change-transform",
+        "wm-w-full",
+        isDragging && "wm-dragging",
+        enableReorder && !disableItem && "wm-cursor-grab"
+      ),
+      style
+    }, attributes), listeners), {
+      "data-draggable": enableReorder && !disableItem,
+      "data-dragging": isDragging,
+      "data-direction": direction,
+      children
+    })
+  );
+};
+const DndWrapper = ({
+  children,
+  items,
+  direction,
+  startIndex,
+  onDragEnd
+}) => {
+  const [activeId, setActiveId] = useState(null);
+  const sensors = useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 100,
+        tolerance: 5
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+  const handleDragEnd = (event) => {
+    setActiveId(null);
+    onDragEnd(event);
+  };
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      children: [
+        /* @__PURE__ */ jsx(
+          SortableContext,
+          {
+            items: items.map((item, index) => getItemId(item, startIndex + index)),
+            strategy: direction === "horizontal" ? horizontalListSortingStrategy : verticalListSortingStrategy,
+            children: React.Children.map(children, (child) => {
+              if (React.isValidElement(child)) {
+                return React.cloneElement(child, { direction });
+              }
+              return child;
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(DragOverlay, { children: activeId ? /* @__PURE__ */ jsx(Fragment, {}) : null })
+      ]
+    }
+  );
+};
+const useDragAndDrop = (initialItems, onReorder, orderby) => {
+  const [items, setItems] = useState(() => initialItems || []);
+  const [hasBeenReordered, setHasBeenReordered] = useState(false);
+  const previousOrderByRef = useRef(orderby);
+  const previousItemsRef = useRef(initialItems || []);
+  useEffect(() => {
+    const orderByChanged = orderby !== previousOrderByRef.current;
+    if (orderByChanged) {
+      setItems(initialItems || []);
+      setHasBeenReordered(false);
+      previousOrderByRef.current = orderby;
+      previousItemsRef.current = initialItems || [];
+    } else if (!hasBeenReordered) {
+      const newItems = initialItems || [];
+      const prevItems = previousItemsRef.current;
+      const itemsChanged = newItems.length !== prevItems.length || newItems.some((item, index) => item !== prevItems[index]);
+      if (itemsChanged) {
+        setItems(newItems);
+        previousItemsRef.current = newItems;
+      }
+    }
+  }, [initialItems, orderby, hasBeenReordered]);
+  const handleDragEnd = useCallback(
+    (event) => {
+      const { active, over } = event;
+      if (over && active.id !== over.id) {
+        setItems((currentItems) => {
+          const oldIndex = currentItems.findIndex(
+            (item, index) => getItemId(item, index) === active.id
+          );
+          const newIndex = currentItems.findIndex(
+            (item, index) => getItemId(item, index) === over.id
+          );
+          if (oldIndex !== -1 && newIndex !== -1) {
+            const newItems = arrayMove(currentItems, oldIndex, newIndex);
+            setHasBeenReordered(true);
+            if (onReorder) {
+              onReorder(event, newItems, {
+                item: currentItems[oldIndex],
+                oldIndex,
+                newIndex
+              });
+            }
+            return newItems;
+          }
+          return currentItems;
+        });
+      }
+    },
+    [onReorder]
+  );
+  return {
+    items,
+    setItems,
+    handleDragEnd,
+    hasBeenReordered
+  };
+};
+export {
+  DndWrapper,
+  SortableItem,
+  dragStyles,
+  getItemId,
+  useDragAndDrop
+};

package/components/data/list/components/ListHeader.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { ListHeaderProps } from "./props";
+/**
+ * List Header Component
+ * Displays the header section of the list with title, subtitle, and icon
+ */
+export declare const ListHeader: React.FC<ListHeaderProps>;

package/components/data/list/components/ListHeader.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import DOMPurify from "dompurify";
+import { WmAppIcon } from "../../../common/WmAppIcon";
+const ListHeader = ({
+  title,
+  subheading,
+  iconclass,
+  iconurl,
+  prefabName
+}) => {
+  if (!title && !subheading && !iconclass && !iconurl) return null;
+  return /* @__PURE__ */ jsx(Box, { component: "div", className: "panel-heading", children: /* @__PURE__ */ jsxs(Typography, { className: "panel-title wm-all-unset", variant: "h6", children: [
+    /* @__PURE__ */ jsx("span", { className: "pull-left", children: /* @__PURE__ */ jsx(
+      WmAppIcon,
+      {
+        iconclass,
+        iconurl,
+        prefabName,
+        defaultClasses: "panel-icon",
+        alt: "List icon"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("span", { className: "pull-left", children: [
+      title && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          className: "heading wm-all-unset",
+          component: "span",
+          variant: "h6",
+          dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(title) }
+        }
+      ),
+      subheading && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          className: "description wm-all-unset",
+          component: "span",
+          variant: "body2",
+          dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(subheading) }
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  ListHeader
+};