@wavemaker-ai/react-runtime 1.0.0-rc.647502 → 1.0.0-rc.647565

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

@@ -1,27 +1,22 @@
-"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);
-};
+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.js

@@ -1,52 +1,65 @@
-"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);
+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 || item === void 0 ? void 0 : item._wmListItemId) !== undefined) {
-    return "item_".concat(item._wmListItemId, "_").concat(index);
+  if ((item == null ? void 0 : item._wmListItemId) !== void 0) {
+    return `item_${item._wmListItemId}_${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);
+  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("_");
-
-    // Always include index for uniqueness
-    return hashStr ? "item_".concat(hashStr, "_idx").concat(index) : "item_idx".concat(index);
+    return hashStr ? `item_${hashStr}_idx${index}` : `item_idx${index}`;
   }
-  return "item_idx".concat(index);
+  return `item_idx${index}`;
 };
-
-// Enhanced styles for drag and drop - simplified
-var dragStyles = exports.dragStyles = {
+const dragStyles = {
   draggable: {
     touchAction: "none",
     userSelect: "none"
@@ -61,40 +74,28 @@ var dragStyles = exports.dragStyles = {
     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() {
+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") {
-      // For horizontal lists, allow horizontal movement but minimal vertical drift
-      return _objectSpread(_objectSpread({}, transform), {}, {
+      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 {
-      // For vertical lists, allow vertical movement but minimal horizontal drift
-      return _objectSpread(_objectSpread({}, transform), {}, {
+      return __spreadProps(__spreadValues({}, transform), {
         x: Math.max(-5, Math.min(5, transform.x)),
         // Minimal horizontal drift
         scaleX: transform.scaleX || 1,
@@ -102,145 +103,152 @@ var SortableItem = exports.SortableItem = function SortableItem(_ref) {
       });
     }
   };
-  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),
+  const constrainedTransform = getConstrainedTransform();
+  const style = {
+    "--wm-dnd-transform": 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);
+  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
+    })
+  );
 };
-
-// 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) {
+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);
   };
-  var handleDragEnd = function handleDragEnd(event) {
+  const 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 /* @__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 })
+      ]
     }
-    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;
+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) {
-      // 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];
-      });
+      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]);
-  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
-            });
+  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 newItems;
-        }
-        return currentItems;
-      });
-    }
-  }, [onReorder]);
+          return currentItems;
+        });
+      }
+    },
+    [onReorder]
+  );
   return {
-    items: items,
-    setItems: setItems,
-    handleDragEnd: handleDragEnd,
-    hasBeenReordered: hasBeenReordered
+    items,
+    setItems,
+    handleDragEnd,
+    hasBeenReordered
   };
-};
+};
+export {
+  DndWrapper,
+  SortableItem,
+  dragStyles,
+  getItemId,
+  useDragAndDrop
+};

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

@@ -1,50 +1,33 @@
-"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;
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import DOMPurify from "dompurify";
+const ListHeader = ({ title, subheading, 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)
-    }
-  }))));
-};
+  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: iconclass && /* @__PURE__ */ jsx("i", { className: `app-icon panel-icon ${iconclass}`, "aria-hidden": "true" }) }),
+    /* @__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
+};