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

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

@@ -1,26 +1,28 @@
-"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
+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;
 };
-
-// Create context with better typing
-var ListItemContext = exports.ListItemContext = /*#__PURE__*/(0, _react.createContext)({
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import { createContext, useRef, useMemo, useCallback } from "react";
+import clsx from "clsx";
+import { SortableItem } from "./ListDND";
+const defaultItemRef = { current: null };
+const ListItemContext = createContext({
   item: {},
   index: -1,
   itemRef: defaultItemRef,
@@ -28,12 +30,8 @@ var ListItemContext = exports.ListItemContext = /*#__PURE__*/(0, _react.createCo
   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, {
+const buildItemClasses = (itemClass, isActive, disableItem, isFirst, isLast) => {
+  return clsx("app-list-item", itemClass, {
     active: isActive,
     disabled: disableItem,
     "disable-item": disableItem,
@@ -41,126 +39,135 @@ var buildItemClasses = function buildItemClasses(itemClass, isActive, disableIte
     "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,
+const WmListItem = ({
+  item,
+  disableItem = false,
+  itemClass = "",
+  index = 0,
+  isFirst = false,
+  isLast = false,
+  children,
+  trackId,
+  onItemClick,
+  onItemDoubleClick,
+  onItemMouseEnter,
+  onItemMouseLeave,
+  tabIndex,
+  isActive = false,
+  enableReorder = false,
+  id,
+  direction = "vertical",
+  itemLayoutAttrs
+}) => {
+  const itemRef = useRef(null);
+  const handleClickCapture = useCallback(
+    (event) => {
+      if (!disableItem && onItemClick) {
+        onItemClick(event, item);
+      }
+    },
+    [disableItem, onItemClick, item]
+  );
+  const handleDoubleClickCapture = useCallback(
+    (event) => {
+      if (!disableItem && onItemDoubleClick) {
+        onItemDoubleClick(event, item);
+      }
+    },
+    [disableItem, onItemDoubleClick, item]
+  );
+  const handleMouseEnter = useCallback(
+    (event) => {
+      if (!disableItem && onItemMouseEnter) {
+        onItemMouseEnter(event, item);
+      }
+    },
+    [disableItem, onItemMouseEnter, item]
+  );
+  const handleMouseLeave = useCallback(
+    (event) => {
+      if (!disableItem && onItemMouseLeave) {
+        onItemMouseLeave(event, item);
+      }
+    },
+    [disableItem, onItemMouseLeave, item]
+  );
+  const itemClasses = useMemo(
+    () => buildItemClasses(itemClass, isActive, disableItem, isFirst, isLast),
+    [itemClass, isActive, disableItem, isFirst, isLast]
+  );
+  const contextValue = useMemo(
+    () => ({
+      item,
+      index,
+      itemRef,
+      isFirst,
+      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
+    }),
+    [item, index, isFirst, isLast]
+  );
+  const dynamicAutoLayoutStyles = useMemo(
+    () => __spreadValues(__spreadValues(__spreadValues({}, (itemLayoutAttrs == null ? void 0 : itemLayoutAttrs.positionvalue) ? { inset: itemLayoutAttrs.positionvalue } : {}), (itemLayoutAttrs == null ? void 0 : itemLayoutAttrs.zindex) ? { zIndex: itemLayoutAttrs.zindex } : {}), (itemLayoutAttrs == null ? void 0 : itemLayoutAttrs.position) ? { position: itemLayoutAttrs.position } : {}),
+    [itemLayoutAttrs]
+  );
+  const listItemContent = useMemo(
+    () => /* @__PURE__ */ jsx(
+      "li",
+      __spreadProps(__spreadValues({
+        ref: itemRef,
+        className: clsx(
+          itemClasses,
+          itemLayoutAttrs == null ? void 0 : itemLayoutAttrs.layoutClassName,
+          itemLayoutAttrs == null ? void 0 : itemLayoutAttrs.className
+        ),
+        style: dynamicAutoLayoutStyles,
+        onClickCapture: handleClickCapture,
+        onDoubleClickCapture: handleDoubleClickCapture,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        tabIndex,
+        "data-track-id": trackId,
+        "data-item-index": index,
+        "data-item-active": isActive,
+        "aria-selected": isActive,
+        role: "option"
+      }, { listitemindex: index }), {
+        children: /* @__PURE__ */ jsx(ListItemContext.Provider, { value: contextValue, children })
+      })
+    ),
+    [
+      itemClasses,
+      handleClickCapture,
+      handleDoubleClickCapture,
+      handleMouseEnter,
+      handleMouseLeave,
+      tabIndex,
+      trackId,
+      index,
+      isActive,
+      contextValue,
+      children,
+      itemLayoutAttrs
+    ]
+  );
   if (enableReorder) {
-    var sortableId = id || trackId || "item_".concat(index);
-    return __jsx(_ListDND.SortableItem, {
-      id: sortableId,
-      enableReorder: enableReorder,
-      disableItem: disableItem,
-      direction: direction
-    }, listItemContent);
+    const sortableId = id || trackId || `item_${index}`;
+    return /* @__PURE__ */ jsx(
+      SortableItem,
+      {
+        id: sortableId,
+        enableReorder,
+        disableItem,
+        direction,
+        children: listItemContent
+      }
+    );
   }
   return listItemContent;
 };
-
-// Add display name for debugging
-WmListItem.displayName = "WmListItem";
+WmListItem.displayName = "WmListItem";
+export {
+  ListItemContext,
+  WmListItem
+};

package/components/data/list/components/ListItemWithTemplate.js

@@ -1,113 +1,95 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItemWithTemplate = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _ListItem = require("./ListItem");
-var _mediaTemplate = require("../templates/media-template");
-var _WidgetProvider = require("../../../../context/WidgetProvider");
-var _isPlainObject = _interopRequireDefault(require("lodash-es/isPlainObject"));
-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;
-/**
- * Single list item component with template rendering
- */
-var ListItemWithTemplate = exports.ListItemWithTemplate = function ListItemWithTemplate(_ref) {
-  var item = _ref.item,
-    index = _ref.index,
-    globalIndex = _ref.globalIndex,
-    itemId = _ref.itemId,
-    isFirst = _ref.isFirst,
-    isLast = _ref.isLast,
-    disableitem = _ref.disableitem,
-    itemclass = _ref.itemclass,
-    itemsPerRowClass = _ref.itemsPerRowClass,
-    name = _ref.name,
-    tabIndex = _ref.tabIndex,
-    isActive = _ref.isActive,
-    enablereorder = _ref.enablereorder,
-    _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? "vertical" : _ref$direction,
-    renderItem = _ref.renderItem,
-    itemTemplate = _ref.itemTemplate,
-    onItemClick = _ref.onItemClick,
-    onItemDoubleClick = _ref.onItemDoubleClick,
-    onItemMouseEnter = _ref.onItemMouseEnter,
-    onItemMouseLeave = _ref.onItemMouseLeave,
-    itemAttrs = _ref.itemAttrs,
-    _ref$standalone = _ref.standalone,
-    standalone = _ref$standalone === void 0 ? false : _ref$standalone;
-  var WidgetProxy = (0, _WidgetProvider.useWidgetProxy)(undefined, standalone);
-  var widgetCacheRef = (0, _react.useRef)(new Map());
-
-  // Clear widget cache when WidgetProxy or name changes
-  (0, _react.useEffect)(function () {
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useEffect, useMemo } from "react";
+import clsx from "clsx";
+import { WmListItem } from "./ListItem";
+import { MediaWmListtemplate } from "../templates/media-template";
+import { useWidgetProxy } from "../../../../context/WidgetProvider";
+import isPlainObject from "lodash-es/isPlainObject";
+const ListItemWithTemplate = ({
+  item,
+  index,
+  globalIndex,
+  itemId,
+  isFirst,
+  isLast,
+  disableitem,
+  itemclass,
+  itemsPerRowClass,
+  name,
+  tabIndex,
+  isActive,
+  enablereorder,
+  direction = "vertical",
+  renderItem,
+  itemTemplate,
+  onItemClick,
+  onItemDoubleClick,
+  onItemMouseEnter,
+  onItemMouseLeave,
+  itemAttrs,
+  standalone = false
+}) => {
+  const WidgetProxy = useWidgetProxy(void 0, standalone);
+  const widgetCacheRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
     widgetCacheRef.current.clear();
   }, [WidgetProxy, name]);
-  var getCurrentItemWidgets = (0, _react.useCallback)(function ($index) {
-    // Return cached result if available
-    var cached = widgetCacheRef.current.get($index);
-    if (cached) {
-      return cached;
-    }
-    var items = {};
-    var prefix = "".concat(name, "_").concat($index, "_");
-
-    // Use for...in for better performance than Object.keys + filter
-    for (var key in WidgetProxy) {
-      var _key$split = key.split("_"),
-        _key$split2 = (0, _slicedToArray2["default"])(_key$split, 2),
-        listName = _key$split2[0],
-        idx = _key$split2[1];
-      if (key.startsWith(prefix)) {
-        var widget = WidgetProxy[key];
-        if (parseInt(idx) === $index && listName === name) {
-          items[widget.name] = widget;
+  const getCurrentItemWidgets = useCallback(
+    ($index) => {
+      const cached = widgetCacheRef.current.get($index);
+      if (cached) {
+        return cached;
+      }
+      const items = {};
+      const prefix = `${name}_${$index}_`;
+      for (const key in WidgetProxy) {
+        const [listName, idx] = key.split("_");
+        if (key.startsWith(prefix)) {
+          const widget = WidgetProxy[key];
+          if (parseInt(idx) === $index && listName === name) {
+            items[widget.name] = widget;
+          }
         }
       }
-    }
-
-    // Cache the result
-    widgetCacheRef.current.set($index, items);
-    return items;
-  }, [WidgetProxy, name]);
-  if ((0, _isPlainObject["default"])(item)) {
+      widgetCacheRef.current.set($index, items);
+      return items;
+    },
+    [WidgetProxy, name]
+  );
+  if (isPlainObject(item)) {
     item.selected = isActive;
   }
-  var templateContent = renderItem ? renderItem(item, globalIndex !== null && globalIndex !== void 0 ? globalIndex : index, WidgetProxy[name], getCurrentItemWidgets) : itemTemplate || __jsx(_mediaTemplate.MediaWmListtemplate, null);
-
-  // Resolve item class: support string or function callback
-  var resolvedItemClass = (0, _react.useMemo)(function () {
+  const templateContent = renderItem ? renderItem(item, globalIndex != null ? globalIndex : index, WidgetProxy[name], getCurrentItemWidgets) : itemTemplate || /* @__PURE__ */ jsx(MediaWmListtemplate, {});
+  const resolvedItemClass = useMemo(() => {
     return typeof itemclass === "function" ? itemclass(item) : itemclass;
   }, [itemclass, item]);
-
-  // Apply list template attrs to li (itemAttrs → layoutClassName on li)
-  var itemLayoutAttrs = itemAttrs ? itemAttrs(item, globalIndex !== null && globalIndex !== void 0 ? globalIndex : index) : undefined;
-  return __jsx(_ListItem.WmListItem, {
-    key: itemId,
-    item: item,
-    disableItem: disableitem,
-    itemClass: (0, _clsx["default"])(resolvedItemClass, itemsPerRowClass),
-    index: globalIndex !== null && globalIndex !== void 0 ? globalIndex : index,
-    isFirst: isFirst,
-    isLast: isLast,
-    trackId: itemId,
-    onItemClick: onItemClick,
-    onItemDoubleClick: onItemDoubleClick,
-    onItemMouseEnter: onItemMouseEnter,
-    onItemMouseLeave: onItemMouseLeave,
-    tabIndex: tabIndex,
-    isActive: isActive,
-    name: "".concat(name, "_item_").concat(globalIndex !== null && globalIndex !== void 0 ? globalIndex : index),
-    enableReorder: enablereorder,
-    id: itemId,
-    direction: direction,
-    itemLayoutAttrs: itemLayoutAttrs
-  }, templateContent);
-};
+  const itemLayoutAttrs = itemAttrs ? itemAttrs(item, globalIndex != null ? globalIndex : index) : void 0;
+  return /* @__PURE__ */ jsx(
+    WmListItem,
+    {
+      item,
+      disableItem: disableitem,
+      itemClass: clsx(resolvedItemClass, itemsPerRowClass),
+      index: globalIndex != null ? globalIndex : index,
+      isFirst,
+      isLast,
+      trackId: itemId,
+      onItemClick,
+      onItemDoubleClick,
+      onItemMouseEnter,
+      onItemMouseLeave,
+      tabIndex,
+      isActive,
+      name: `${name}_item_${globalIndex != null ? globalIndex : index}`,
+      enableReorder: enablereorder,
+      id: itemId,
+      direction,
+      itemLayoutAttrs,
+      children: templateContent
+    },
+    itemId
+  );
+};
+export {
+  ListItemWithTemplate
+};