@wavemaker-ai/react-runtime 1.0.0-rc.309

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

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GroupedListItems = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _GroupHeader = require("./GroupHeader");
+var _ListItemWithTemplate = require("./ListItemWithTemplate");
+var _NoDataMessage = require("./NoDataMessage");
+var _constants = require("../utils/constants");
+var __jsx = _react["default"].createElement;
+/**
+ * Grouped list items renderer for grouped lists
+ */
+var GroupedListItems = exports.GroupedListItems = function GroupedListItems(_ref) {
+  var groupedData = _ref.groupedData,
+    paginatedGroupedData = _ref.paginatedGroupedData,
+    direction = _ref.direction,
+    disableitem = _ref.disableitem,
+    itemclass = _ref.itemclass,
+    itemsPerRowClass = _ref.itemsPerRowClass,
+    name = _ref.name,
+    tabIndex = _ref.tabIndex,
+    activeItems = _ref.activeItems,
+    collapsible = _ref.collapsible,
+    showcount = _ref.showcount,
+    groupCollapsed = _ref.groupCollapsed,
+    renderItem = _ref.renderItem,
+    itemTemplate = _ref.itemTemplate,
+    nodatamessage = _ref.nodatamessage,
+    onItemClick = _ref.onItemClick,
+    onItemDoubleClick = _ref.onItemDoubleClick,
+    onItemMouseEnter = _ref.onItemMouseEnter,
+    onItemMouseLeave = _ref.onItemMouseLeave,
+    onHeaderClick = _ref.onHeaderClick,
+    itemAttrs = _ref.itemAttrs,
+    hasListGroupAutoLayout = _ref.hasListGroupAutoLayout,
+    _ref$standalone = _ref.standalone,
+    standalone = _ref$standalone === void 0 ? false : _ref$standalone;
+  if (!groupedData || !Array.isArray(groupedData) || groupedData.length === 0) {
+    return __jsx(_NoDataMessage.NoDataMessage, {
+      message: nodatamessage
+    });
+  }
+  var groupsToRender = paginatedGroupedData;
+  if (groupsToRender.length === 0) {
+    return __jsx(_NoDataMessage.NoDataMessage, {
+      message: nodatamessage
+    });
+  }
+  return __jsx(_react["default"].Fragment, null, groupsToRender.map(function (groupObj) {
+    var isGroupCollapsed = groupCollapsed[groupObj.key] || false;
+    var displayCount = groupObj.originalDataLength || groupObj.data.length;
+    // Build itemclass for grouped items: if function, wrap to append group class
+    var groupedItemClass = typeof itemclass === "function" ? function (it) {
+      return (0, _clsx["default"])(itemclass(it), "group-list-item");
+    } : (0, _clsx["default"])(itemclass, "group-list-item");
+    return __jsx("li", {
+      key: "group_".concat(groupObj.key),
+      className: "app-list-item-group clearfix"
+    }, __jsx("ul", {
+      tabIndex: tabIndex,
+      className: (0, _clsx["default"])("list-group item-group", hasListGroupAutoLayout && "list-group-autolayout")
+    }, __jsx(_GroupHeader.GroupHeader, {
+      groupKey: groupObj.key,
+      displayCount: displayCount,
+      isCollapsed: isGroupCollapsed,
+      collapsible: collapsible,
+      showcount: showcount,
+      onHeaderClick: onHeaderClick
+    }), !isGroupCollapsed && __jsx("li", {
+      className: "list-group-container"
+    }, __jsx("ul", {
+      className: (0, _clsx["default"])("list-group clearfix", direction === _constants.LIST_DIRECTION.HORIZONTAL ? "app-horizontal-list" : "", hasListGroupAutoLayout && "list-group-autolayout")
+    }, groupObj.data.map(function (item, index) {
+      var actualIndexInGroup = groupObj.startIndexInGroup + index;
+      var itemId = "group_".concat(groupObj.key, "_item_").concat(actualIndexInGroup);
+      var isFirst = index === 0;
+      var isLast = index === groupObj.data.length - 1;
+      return __jsx(_ListItemWithTemplate.ListItemWithTemplate, {
+        key: itemId,
+        item: item,
+        index: actualIndexInGroup,
+        itemId: itemId,
+        isFirst: isFirst,
+        isLast: isLast,
+        disableitem: disableitem,
+        itemclass: groupedItemClass,
+        itemsPerRowClass: itemsPerRowClass,
+        name: "".concat(name, "_group_").concat(groupObj.key),
+        tabIndex: tabIndex,
+        isActive: activeItems.has(item),
+        direction: direction,
+        renderItem: renderItem,
+        itemTemplate: itemTemplate,
+        onItemClick: onItemClick,
+        onItemDoubleClick: onItemDoubleClick,
+        onItemMouseEnter: onItemMouseEnter,
+        onItemMouseLeave: onItemMouseLeave,
+        itemAttrs: itemAttrs,
+        standalone: standalone
+      });
+    })))));
+  }));
+};

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,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListContainer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ListDND = require("./ListDND");
+var __jsx = _react["default"].createElement;
+/**
+ * List container wrapper that optionally includes drag and drop functionality
+ */
+var ListContainer = exports.ListContainer = function ListContainer(_ref) {
+  var direction = _ref.direction,
+    enablereorder = _ref.enablereorder,
+    items = _ref.items,
+    startIndex = _ref.startIndex,
+    children = _ref.children,
+    onDragEnd = _ref.onDragEnd;
+  return __jsx(_react["default"].Fragment, null, enablereorder ? __jsx(_ListDND.DndWrapper, {
+    items: items,
+    direction: direction,
+    startIndex: startIndex,
+    onDragEnd: onDragEnd
+  }, children) : children);
+};

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,246 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDragAndDrop = exports.getItemId = exports.dragStyles = exports.SortableItem = exports.DndWrapper = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+var _utilities = require("@dnd-kit/utilities");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Utility function to get a unique ID for an item
+var getItemId = exports.getItemId = function getItemId(item, index) {
+  // Always include index to ensure uniqueness in accumulated data scenarios
+  if ((item === null || item === void 0 ? void 0 : item.id) !== undefined) {
+    // If item has an id, use it with index for guaranteed uniqueness
+    return "item_".concat(item.id, "_").concat(index);
+  }
+  if ((item === null || item === void 0 ? void 0 : item._wmListItemId) !== undefined) {
+    return "item_".concat(item._wmListItemId, "_").concat(index);
+  }
+  if ((0, _typeof2["default"])(item) === "object" && item !== null) {
+    // Create a hash from the first few properties to keep the ID shorter
+    var keys = Object.keys(item).slice(0, 3); // Use first 3 properties
+    var hashStr = keys.map(function (key) {
+      var val = item[key];
+      if ((0, _typeof2["default"])(val) !== "object" && val !== null && val !== undefined) {
+        return "".concat(key, ":").concat(val);
+      }
+      return null;
+    }).filter(Boolean).join("_");
+
+    // Always include index for uniqueness
+    return hashStr ? "item_".concat(hashStr, "_idx").concat(index) : "item_idx".concat(index);
+  }
+  return "item_idx".concat(index);
+};
+
+// Enhanced styles for drag and drop - simplified
+var dragStyles = exports.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"
+  }
+};
+
+// Direction-aware sortable wrapper component
+var SortableItem = exports.SortableItem = function SortableItem(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    enableReorder = _ref.enableReorder,
+    disableItem = _ref.disableItem,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "vertical" : _ref$direction;
+  var _useSortable = (0, _sortable.useSortable)({
+      id: id,
+      disabled: !enableReorder || disableItem
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition,
+    isDragging = _useSortable.isDragging;
+
+  // Direction-aware transform constraints - minimal drift allowance
+  var getConstrainedTransform = function getConstrainedTransform() {
+    if (!transform) return null;
+    if (direction === "horizontal") {
+      // For horizontal lists, allow horizontal movement but minimal vertical drift
+      return _objectSpread(_objectSpread({}, transform), {}, {
+        y: Math.max(-5, Math.min(5, transform.y)),
+        // Minimal vertical drift
+        scaleX: transform.scaleX || 1,
+        scaleY: transform.scaleY || 1
+      });
+    } else {
+      // For vertical lists, allow vertical movement but minimal horizontal drift
+      return _objectSpread(_objectSpread({}, transform), {}, {
+        x: Math.max(-5, Math.min(5, transform.x)),
+        // Minimal horizontal drift
+        scaleX: transform.scaleX || 1,
+        scaleY: transform.scaleY || 1
+      });
+    }
+  };
+  var constrainedTransform = getConstrainedTransform();
+
+  // transform and transition are per-frame computed values from @dnd-kit —
+  // impossible to express as classes, kept as CSS custom properties only.
+  // opacity and cursor are state-driven → conditional classes via clsx.
+  // Static styles live in autoLayout.css via utility classes on className.
+  var style = {
+    "--wm-dnd-transform": _utilities.CSS.Transform.toString(constrainedTransform),
+    "--wm-dnd-transition": transition
+  };
+  return __jsx("div", (0, _extends2["default"])({
+    ref: setNodeRef,
+    className: (0, _clsx["default"])("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: style
+  }, attributes, listeners, {
+    "data-draggable": enableReorder && !disableItem,
+    "data-dragging": isDragging,
+    "data-direction": direction
+  }), children);
+};
+
+// DnD wrapper component
+var DndWrapper = exports.DndWrapper = function DndWrapper(_ref2) {
+  var children = _ref2.children,
+    items = _ref2.items,
+    direction = _ref2.direction,
+    startIndex = _ref2.startIndex,
+    onDragEnd = _ref2.onDragEnd;
+  var _useState = (0, _react.useState)(null),
+    activeId = _useState[0],
+    setActiveId = _useState[1];
+
+  // Standard sensors - simplified
+  var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {
+    activationConstraint: {
+      distance: 5
+    }
+  }), (0, _core.useSensor)(_core.TouchSensor, {
+    activationConstraint: {
+      delay: 100,
+      tolerance: 5
+    }
+  }), (0, _core.useSensor)(_core.KeyboardSensor, {
+    coordinateGetter: _sortable.sortableKeyboardCoordinates
+  }));
+  var handleDragStart = function handleDragStart(event) {
+    setActiveId(event.active.id);
+  };
+  var handleDragEnd = function handleDragEnd(event) {
+    setActiveId(null);
+    onDragEnd(event);
+  };
+  return __jsx(_core.DndContext, {
+    sensors: sensors,
+    collisionDetection: _core.closestCenter,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd
+  }, __jsx(_sortable.SortableContext, {
+    items: items.map(function (item, index) {
+      return getItemId(item, startIndex + index);
+    }),
+    strategy: direction === "horizontal" ? _sortable.horizontalListSortingStrategy : _sortable.verticalListSortingStrategy
+  }, _react["default"].Children.map(children, function (child) {
+    if (/*#__PURE__*/_react["default"].isValidElement(child)) {
+      return /*#__PURE__*/_react["default"].cloneElement(child, {
+        direction: direction
+      });
+    }
+    return child;
+  })), __jsx(_core.DragOverlay, null, activeId ? __jsx(_react["default"].Fragment, null) : null));
+};
+
+// Hook for managing drag and drop state with performance optimizations
+var useDragAndDrop = exports.useDragAndDrop = function useDragAndDrop(initialItems, onReorder, orderby) {
+  var _useState2 = (0, _react.useState)(function () {
+      return initialItems || [];
+    }),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    hasBeenReordered = _useState3[0],
+    setHasBeenReordered = _useState3[1];
+  var previousOrderByRef = (0, _react.useRef)(orderby);
+  var previousItemsRef = (0, _react.useRef)(initialItems || []);
+  (0, _react.useEffect)(function () {
+    // Check if orderby has changed
+    var orderByChanged = orderby !== previousOrderByRef.current;
+    if (orderByChanged) {
+      // Reset everything when orderby changes
+      setItems(initialItems || []);
+      setHasBeenReordered(false);
+      previousOrderByRef.current = orderby;
+      previousItemsRef.current = initialItems || [];
+    } else if (!hasBeenReordered) {
+      // Only update items if they have actually changed
+      var newItems = initialItems || [];
+      var prevItems = previousItemsRef.current;
+      var itemsChanged = newItems.length !== prevItems.length || newItems.some(function (item, index) {
+        return item !== prevItems[index];
+      });
+      if (itemsChanged) {
+        setItems(newItems);
+        previousItemsRef.current = newItems;
+      }
+    }
+  }, [initialItems, orderby, hasBeenReordered]);
+  var handleDragEnd = (0, _react.useCallback)(function (event) {
+    var active = event.active,
+      over = event.over;
+    if (over && active.id !== over.id) {
+      setItems(function (currentItems) {
+        var oldIndex = currentItems.findIndex(function (item, index) {
+          return getItemId(item, index) === active.id;
+        });
+        var newIndex = currentItems.findIndex(function (item, index) {
+          return getItemId(item, index) === over.id;
+        });
+        if (oldIndex !== -1 && newIndex !== -1) {
+          var newItems = (0, _sortable.arrayMove)(currentItems, oldIndex, newIndex);
+          setHasBeenReordered(true);
+
+          // Call onReorder with the new items
+          if (onReorder) {
+            onReorder(event, newItems, {
+              item: currentItems[oldIndex],
+              oldIndex: oldIndex,
+              newIndex: newIndex
+            });
+          }
+          return newItems;
+        }
+        return currentItems;
+      });
+    }
+  }, [onReorder]);
+  return {
+    items: items,
+    setItems: setItems,
+    handleDragEnd: handleDragEnd,
+    hasBeenReordered: hasBeenReordered
+  };
+};

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,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListHeader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _dompurify = _interopRequireDefault(require("dompurify"));
+var __jsx = _react["default"].createElement;
+/**
+ * List Header Component
+ * Displays the header section of the list with title, subtitle, and icon
+ */
+var ListHeader = exports.ListHeader = function ListHeader(_ref) {
+  var title = _ref.title,
+    subheading = _ref.subheading,
+    iconclass = _ref.iconclass;
+  if (!title && !subheading && !iconclass) return null;
+  return __jsx(_Box["default"], {
+    component: "div",
+    className: "panel-heading"
+  }, __jsx(_Typography["default"], {
+    className: "panel-title wm-all-unset",
+    variant: "h6"
+  }, __jsx("span", {
+    className: "pull-left"
+  }, iconclass && __jsx("i", {
+    className: "app-icon panel-icon ".concat(iconclass),
+    "aria-hidden": "true"
+  })), __jsx("span", {
+    className: "pull-left"
+  }, title && __jsx(_Typography["default"], {
+    className: "heading wm-all-unset",
+    component: "span",
+    variant: "h6",
+    dangerouslySetInnerHTML: {
+      __html: _dompurify["default"].sanitize(title)
+    }
+  }), subheading && __jsx(_Typography["default"], {
+    className: "description wm-all-unset",
+    component: "span",
+    variant: "body2",
+    dangerouslySetInnerHTML: {
+      __html: _dompurify["default"].sanitize(subheading)
+    }
+  }))));
+};

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { ListItemContextType, WmListItemProps, ListItemData } from "../props";
+export declare const ListItemContext: React.Context<ListItemContextType<ListItemData>>;
+/**
+ * List Item Component
+ * Renders individual list items with context and drag-and-drop support
+ *
+ * Note: Widget naming (e.g., "Name_0", "Name_1") and internal widget flags
+ * are now handled at the codegen level. The renderItem function generates
+ * widgets with indexed names and data-internal-widget="true" directly.
+ */
+export declare const WmListItem: {
+    <T extends ListItemData = ListItemData>({ item, disableItem, itemClass, index, isFirst, isLast, children, trackId, onItemClick, onItemDoubleClick, onItemMouseEnter, onItemMouseLeave, tabIndex, isActive, enableReorder, id, direction, itemLayoutAttrs, }: WmListItemProps<T> & {
+        item: T;
+        direction?: "horizontal" | "vertical";
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/components/data/list/components/ListItem.js

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WmListItem = exports.ListItemContext = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _ListDND = require("./ListDND");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Create a default ref for the context
+var defaultItemRef = {
+  current: null
+};
+
+// Create context with better typing
+var ListItemContext = exports.ListItemContext = /*#__PURE__*/(0, _react.createContext)({
+  item: {},
+  index: -1,
+  itemRef: defaultItemRef,
+  isFirst: false,
+  isLast: false,
+  currentItemWidgets: {}
+});
+
+/**
+ * Builds CSS classes for the list item
+ */
+var buildItemClasses = function buildItemClasses(itemClass, isActive, disableItem, isFirst, isLast) {
+  return (0, _clsx["default"])("app-list-item", itemClass, {
+    active: isActive,
+    disabled: disableItem,
+    "disable-item": disableItem,
+    "first-item": isFirst,
+    "last-item": isLast
+  });
+};
+
+/**
+ * List Item Component
+ * Renders individual list items with context and drag-and-drop support
+ *
+ * Note: Widget naming (e.g., "Name_0", "Name_1") and internal widget flags
+ * are now handled at the codegen level. The renderItem function generates
+ * widgets with indexed names and data-internal-widget="true" directly.
+ */
+var WmListItem = exports.WmListItem = function WmListItem(_ref) {
+  var item = _ref.item,
+    _ref$disableItem = _ref.disableItem,
+    disableItem = _ref$disableItem === void 0 ? false : _ref$disableItem,
+    _ref$itemClass = _ref.itemClass,
+    itemClass = _ref$itemClass === void 0 ? "" : _ref$itemClass,
+    _ref$index = _ref.index,
+    index = _ref$index === void 0 ? 0 : _ref$index,
+    _ref$isFirst = _ref.isFirst,
+    isFirst = _ref$isFirst === void 0 ? false : _ref$isFirst,
+    _ref$isLast = _ref.isLast,
+    isLast = _ref$isLast === void 0 ? false : _ref$isLast,
+    children = _ref.children,
+    trackId = _ref.trackId,
+    onItemClick = _ref.onItemClick,
+    onItemDoubleClick = _ref.onItemDoubleClick,
+    onItemMouseEnter = _ref.onItemMouseEnter,
+    onItemMouseLeave = _ref.onItemMouseLeave,
+    tabIndex = _ref.tabIndex,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+    _ref$enableReorder = _ref.enableReorder,
+    enableReorder = _ref$enableReorder === void 0 ? false : _ref$enableReorder,
+    id = _ref.id,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "vertical" : _ref$direction,
+    itemLayoutAttrs = _ref.itemLayoutAttrs;
+  var itemRef = (0, _react.useRef)(null);
+
+  // Memoize event handlers to prevent unnecessary re-renders
+  // Capture phase: list row runs before nested template widgets (same as DOM trickling / capturing)
+  var handleClickCapture = (0, _react.useCallback)(function (event) {
+    if (!disableItem && onItemClick) {
+      onItemClick(event, item);
+    }
+  }, [disableItem, onItemClick, item]);
+  var handleDoubleClickCapture = (0, _react.useCallback)(function (event) {
+    if (!disableItem && onItemDoubleClick) {
+      onItemDoubleClick(event, item);
+    }
+  }, [disableItem, onItemDoubleClick, item]);
+  var handleMouseEnter = (0, _react.useCallback)(function (event) {
+    if (!disableItem && onItemMouseEnter) {
+      onItemMouseEnter(event, item);
+    }
+  }, [disableItem, onItemMouseEnter, item]);
+  var handleMouseLeave = (0, _react.useCallback)(function (event) {
+    if (!disableItem && onItemMouseLeave) {
+      onItemMouseLeave(event, item);
+    }
+  }, [disableItem, onItemMouseLeave, item]);
+
+  // Memoize CSS classes
+  var itemClasses = (0, _react.useMemo)(function () {
+    return buildItemClasses(itemClass, isActive, disableItem, isFirst, isLast);
+  }, [itemClass, isActive, disableItem, isFirst, isLast]);
+
+  // Memoize context value to prevent unnecessary re-renders
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      item: item,
+      index: index,
+      itemRef: itemRef,
+      isFirst: isFirst,
+      isLast: isLast,
+      currentItemWidgets: {}
+    };
+  }, [item, index, isFirst, isLast]);
+  var dynamicAutoLayoutStyles = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread(_objectSpread({}, itemLayoutAttrs !== null && itemLayoutAttrs !== void 0 && itemLayoutAttrs.positionvalue ? {
+      inset: itemLayoutAttrs.positionvalue
+    } : {}), itemLayoutAttrs !== null && itemLayoutAttrs !== void 0 && itemLayoutAttrs.zindex ? {
+      zIndex: itemLayoutAttrs.zindex
+    } : {}), itemLayoutAttrs !== null && itemLayoutAttrs !== void 0 && itemLayoutAttrs.position ? {
+      position: itemLayoutAttrs.position
+    } : {});
+  }, [itemLayoutAttrs]);
+  // Memoize the list item content
+  var listItemContent = (0, _react.useMemo)(function () {
+    return __jsx("li", {
+      ref: itemRef,
+      className: (0, _clsx["default"])(itemClasses, itemLayoutAttrs === null || itemLayoutAttrs === void 0 ? void 0 : itemLayoutAttrs.layoutClassName),
+      style: dynamicAutoLayoutStyles,
+      onClickCapture: handleClickCapture,
+      onDoubleClickCapture: handleDoubleClickCapture,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      tabIndex: tabIndex,
+      "data-track-id": trackId,
+      "data-item-index": index,
+      "data-item-active": isActive,
+      "aria-selected": isActive,
+      role: "option",
+      listitemindex: index
+    }, __jsx(ListItemContext.Provider, {
+      value: contextValue
+    }, children));
+  }, [itemClasses, handleClickCapture, handleDoubleClickCapture, handleMouseEnter, handleMouseLeave, tabIndex, trackId, index, isActive, contextValue, children, itemLayoutAttrs]);
+
+  // Wrap with SortableItem if enableReorder is true
+  if (enableReorder) {
+    var sortableId = id || trackId || "item_".concat(index);
+    return __jsx(_ListDND.SortableItem, {
+      id: sortableId,
+      enableReorder: enableReorder,
+      disableItem: disableItem,
+      direction: direction
+    }, listItemContent);
+  }
+  return listItemContent;
+};
+
+// Add display name for debugging
+WmListItem.displayName = "WmListItem";