@wavemaker/react-runtime 11.14.1-rc.236

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

@@ -0,0 +1,241 @@
+"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 _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 ((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();
+  var style = {
+    transform: _utilities.CSS.Transform.toString(constrainedTransform),
+    transition: transition,
+    opacity: isDragging ? 0.5 : 1,
+    cursor: enableReorder && !disableItem ? "grab" : undefined,
+    touchAction: "none",
+    position: "relative",
+    willChange: "transform"
+  };
+  return __jsx("div", (0, _extends2["default"])({
+    ref: setNodeRef,
+    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.js

@@ -0,0 +1,59 @@
+"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",
+    variant: "h6",
+    sx: {
+      all: "unset"
+    }
+  }, __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",
+    component: "span",
+    variant: "h6",
+    sx: {
+      all: "unset"
+    },
+    dangerouslySetInnerHTML: {
+      __html: _dompurify["default"].sanitize(title)
+    }
+  }), subheading && __jsx(_Typography["default"], {
+    className: "description",
+    component: "span",
+    variant: "body2",
+    sx: {
+      all: "unset"
+    },
+    dangerouslySetInnerHTML: {
+      __html: _dompurify["default"].sanitize(subheading)
+    }
+  }))));
+};

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

@@ -0,0 +1,148 @@
+"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 _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;
+// 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
+ */
+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,
+    name = _ref.name,
+    _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;
+  var itemRef = (0, _react.useRef)(null);
+
+  // Memoize event handlers to prevent unnecessary re-renders
+  var handleClick = (0, _react.useCallback)(function (event) {
+    if (!disableItem && onItemClick) {
+      onItemClick(event, item);
+    }
+  }, [disableItem, onItemClick, item]);
+  var handleDoubleClick = (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]);
+
+  // Memoize the list item content
+  var listItemContent = (0, _react.useMemo)(function () {
+    return __jsx("li", {
+      ref: itemRef,
+      className: itemClasses,
+      onClick: handleClick,
+      onDoubleClick: handleDoubleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      tabIndex: tabIndex,
+      "data-track-id": trackId,
+      "data-item-index": index,
+      "data-item-active": isActive,
+      "aria-selected": isActive,
+      role: "option"
+    }, __jsx(ListItemContext.Provider, {
+      value: contextValue
+    }, children));
+  }, [itemClasses, handleClick, handleDoubleClick, handleMouseEnter, handleMouseLeave, tabIndex, trackId, index, isActive, contextValue, children]);
+
+  // 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";

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

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItemWithTemplate = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _ListItem = require("./ListItem");
+var _mediaTemplate = require("../templates/media-template");
+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;
+  var templateContent = renderItem ? renderItem(item, globalIndex !== null && globalIndex !== void 0 ? globalIndex : index) : itemTemplate || __jsx(_mediaTemplate.MediaWmListtemplate, null);
+  return __jsx(_ListItem.WmListItem, {
+    key: itemId,
+    item: item,
+    disableItem: disableitem,
+    itemClass: (0, _clsx["default"])(itemclass, 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
+  }, templateContent);
+};