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

package/components/data/form/form-header/index.js

@@ -1,61 +1,64 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _icon = require("@wavemaker-ai/react-runtime/components/basic/icon");
-var _formAction = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-action"));
-var _button = require("@wavemaker-ai/react-runtime/components/form/button");
-var __jsx = _react["default"].createElement;
-var WmFormHeader = function WmFormHeader(props) {
-  return __jsx("div", {
-    className: "panel-heading"
-  }, __jsx("h3", {
-    className: "panel-title"
-  }, __jsx("div", {
-    className: "pull-left"
-  }, props.iconclass && __jsx(_icon.WmIcon, {
-    name: "",
-    listener: {},
-    iconclass: props.iconclass
-  })), __jsx("div", {
-    className: "pull-left"
-  }, __jsx("div", {
-    className: "heading"
-  }, props.title), __jsx("div", {
-    className: "description"
-  }, props.subheading)), __jsx("div", {
-    className: "form-action panel-actions basic-btn-grp"
-  }, (props === null || props === void 0 ? void 0 : props.headerActions) && Object.keys(props.headerActions).map(function (actionName, index) {
-    return __jsx(_formAction["default"], (0, _extends2["default"])({
-      key: index
-    }, props.headerActions[actionName], {
-      headeraction: true
-    }));
-  }), props.collapsible && __jsx("div", {
-    className: "form-action panel-actions basic-btn-grp"
-  }, __jsx(_button.WmButton, {
-    name: "",
-    listener: {},
-    type: "button",
-    className: (0, _clsx["default"])("app-icon wi panel-action", props.expanded ? "wi-minus" : "wi-plus"),
-    hint: props.expanded ? "Collapse" : "Expand",
-    onClick: function onClick() {
-      var _props$expandCollapse;
-      (_props$expandCollapse = props.expandCollapsePanel) === null || _props$expandCollapse === void 0 || _props$expandCollapse.call(props);
+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 { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { WmIcon } from "../../../basic/icon";
+import WmFormActions from "../form-action";
+import { WmButton } from "../../../form/button";
+const WmFormHeader = (props) => {
+  return /* @__PURE__ */ jsx("div", { className: "panel-heading", children: /* @__PURE__ */ jsxs("h3", { className: "panel-title", children: [
+    /* @__PURE__ */ jsx("div", { className: "pull-left", children: props.iconclass && /* @__PURE__ */ jsx(WmIcon, { name: "", listener: {}, iconclass: props.iconclass }) }),
+    /* @__PURE__ */ jsxs("div", { className: "pull-left", children: [
+      /* @__PURE__ */ jsx("div", { className: "heading", children: props.title }),
+      /* @__PURE__ */ jsx("div", { className: "description", children: props.subheading })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "form-action panel-actions basic-btn-grp", children: [
+      (props == null ? void 0 : props.headerActions) && Object.keys(props.headerActions).map((actionName, index) => /* @__PURE__ */ jsx(
+        WmFormActions,
+        __spreadProps(__spreadValues({}, props.headerActions[actionName]), {
+          headeraction: true
+        }),
+        index
+      )),
+      props.collapsible && /* @__PURE__ */ jsx("div", { className: "form-action panel-actions basic-btn-grp", children: /* @__PURE__ */ jsx(
+        WmButton,
+        {
+          name: "",
+          listener: {},
+          type: "button",
+          className: clsx(
+            "app-icon wi panel-action",
+            props.expanded ? "wi-minus" : "wi-plus"
+          ),
+          hint: props.expanded ? "Collapse" : "Expand",
+          onClick: () => {
+            var _a;
+            (_a = props.expandCollapsePanel) == null ? void 0 : _a.call(props);
+          }
+        }
+      ) })
+    ] })
+  ] }) });
 };
 WmFormHeader.displayName = "WmFormHeader";
-
-/**
- * The WmFormHeader component displays the header of a form, including title, icon, and actions.
- *
- * @param props - {@link FormHeaderProps}
- */
-var _default = exports["default"] = WmFormHeader;
+var form_header_default = WmFormHeader;
+export {
+  form_header_default as default
+};

package/components/data/form/index.js

@@ -1,76 +1,97 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmForm = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
-var _message = require("@wavemaker-ai/react-runtime/components/basic/message");
-var _baseForm = _interopRequireDefault(require("./base-form"));
-var _formHeader = _interopRequireDefault(require("./form-header"));
-var _formDynamicSection = _interopRequireDefault(require("./form-dynamic-section"));
-var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
-var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-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; }
-var WmForm = function WmForm(props) {
-  var _props$statusMessage, _props$statusMessage2, _props$statusMessage3, _props$statusMessage4;
-  var shouldHideHeader = props.isLayoutDialog || props.isInsideWizard;
-  var shouldInjectDynamicFields = Array.isArray(props.metadata) && props.metadata.length > 0;
-  return __jsx("form", (0, _extends2["default"])({}, (0, _attr.removeInvalidAttributes)(props), {
-    hidden: props.hidden || false,
-    name: props.name,
-    defaultmode: props.defaultmode,
-    captionposition: props.captionposition,
-    captionalign: props.captionalign,
-    numberoffields: props.numberoffields,
-    className: props.className,
-    id: props.id,
-    onSubmit: props.submit,
-    style: _objectSpread(_objectSpread({}, props.styles), props.conditionalstyle),
-    onReset: props.formreset,
-    ref: props.formElementRef,
-    noValidate: props.validationtype !== "html"
-  }), !shouldHideHeader && ((props === null || props === void 0 ? void 0 : props.title) || (props === null || props === void 0 ? void 0 : props.subheading) || (props === null || props === void 0 ? void 0 : props.iconclass) || (props === null || props === void 0 ? void 0 : props.headerActions) && props.headerActions.length > 0 || (props === null || props === void 0 ? void 0 : props.collapsible)) && __jsx(_formHeader["default"], {
-    title: props.title,
-    subheading: props.subheading,
-    iconclass: props.iconclass,
-    collapsible: props.collapsible,
-    expanded: props.expanded,
-    headerActions: props.headerActions,
-    expandCollapsePanel: props.expandCollapsePanel,
-    isViewMode: props.isViewMode
-  }), (props === null || props === void 0 ? void 0 : props.showmessage) && (props === null || props === void 0 ? void 0 : props.messagelayout) === "Inline" && __jsx(_message.WmMessage, {
-    "aria-hidden": !(props !== null && props !== void 0 && (_props$statusMessage = props.statusMessage) !== null && _props$statusMessage !== void 0 && _props$statusMessage.caption),
-    "aria-label": (props === null || props === void 0 || (_props$statusMessage2 = props.statusMessage) === null || _props$statusMessage2 === void 0 ? void 0 : _props$statusMessage2.caption) || "",
-    caption: (props === null || props === void 0 || (_props$statusMessage3 = props.statusMessage) === null || _props$statusMessage3 === void 0 ? void 0 : _props$statusMessage3.caption) || "",
-    type: props === null || props === void 0 || (_props$statusMessage4 = props.statusMessage) === null || _props$statusMessage4 === void 0 ? void 0 : _props$statusMessage4.type,
-    open: props === null || props === void 0 ? void 0 : props.showmessage,
-    close: props === null || props === void 0 ? void 0 : props.clearMessage,
-    name: "",
-    listener: {}
-  }), shouldInjectDynamicFields && __jsx(_formDynamicSection["default"], {
-    formName: props.name,
-    metadata: props.metadata,
-    listener: props.listener
-  }), props.children);
+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 { jsx, jsxs } from "react/jsx-runtime";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import { WmMessage } from "../../basic/message";
+import BaseForm from "./base-form";
+import WmFormHeader from "./form-header";
+import FormDynamicFieldsSection from "./form-dynamic-section";
+import { removeInvalidAttributes } from "../../../utils/attr";
+import withStandalone from "../../../higherOrder/withStandalone";
+const WmForm = (props) => {
+  var _a, _b, _c, _d;
+  const shouldHideHeader = props.isLayoutDialog || props.isInsideWizard;
+  const shouldInjectDynamicFields = Array.isArray(props.metadata) && props.metadata.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "form",
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, removeInvalidAttributes(props)), {
+      hidden: props.hidden || false,
+      name: props.name
+    }), {
+      defaultmode: props.defaultmode,
+      captionposition: props.captionposition,
+      captionalign: props.captionalign,
+      numberoffields: props.numberoffields
+    }), {
+      className: props.className,
+      id: props.id,
+      onSubmit: props.submit,
+      style: __spreadValues(__spreadValues({}, props.styles), props.conditionalstyle),
+      onReset: props.formreset,
+      ref: props.formElementRef,
+      noValidate: props.validationtype !== "html",
+      children: [
+        !shouldHideHeader && ((props == null ? void 0 : props.title) || (props == null ? void 0 : props.subheading) || (props == null ? void 0 : props.iconclass) || (props == null ? void 0 : props.headerActions) && props.headerActions.length > 0 || (props == null ? void 0 : props.collapsible)) && /* @__PURE__ */ jsx(
+          WmFormHeader,
+          {
+            title: props.title,
+            subheading: props.subheading,
+            iconclass: props.iconclass,
+            collapsible: props.collapsible,
+            expanded: props.expanded,
+            headerActions: props.headerActions,
+            expandCollapsePanel: props.expandCollapsePanel,
+            isViewMode: props.isViewMode
+          }
+        ),
+        (props == null ? void 0 : props.showmessage) && (props == null ? void 0 : props.messagelayout) === "Inline" && /* @__PURE__ */ jsx(
+          WmMessage,
+          {
+            "aria-hidden": !((_a = props == null ? void 0 : props.statusMessage) == null ? void 0 : _a.caption),
+            "aria-label": ((_b = props == null ? void 0 : props.statusMessage) == null ? void 0 : _b.caption) || "",
+            caption: ((_c = props == null ? void 0 : props.statusMessage) == null ? void 0 : _c.caption) || "",
+            type: (_d = props == null ? void 0 : props.statusMessage) == null ? void 0 : _d.type,
+            open: props == null ? void 0 : props.showmessage,
+            close: props == null ? void 0 : props.clearMessage,
+            name: "",
+            listener: {}
+          }
+        ),
+        shouldInjectDynamicFields && /* @__PURE__ */ jsx(
+          FormDynamicFieldsSection,
+          {
+            formName: props.name,
+            metadata: props.metadata,
+            listener: props.listener
+          }
+        ),
+        props.children
+      ]
+    })
+  );
 };
 WmForm.displayName = "WmForm";
-var WmFormStandalone = exports.WmForm = (0, _withStandalone["default"])((0, _baseForm["default"])(WmForm));
-/**
- * The WmForm component is used to create and manage forms.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-form--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-form--docs)
- *
- * @param props - {@link WmFormProps}
- */
-
-var WmFormWithBaseWrapper = (0, _withBaseWrapper["default"])(WmForm);
-var _default = exports["default"] = (0, _baseForm["default"])(WmFormWithBaseWrapper);
+const WmFormStandalone = withStandalone(BaseForm(WmForm));
+const WmFormWithBaseWrapper = withBaseWrapper(WmForm);
+var form_default = BaseForm(WmFormWithBaseWrapper);
+export {
+  WmFormStandalone as WmForm,
+  form_default as default
+};

package/components/data/form/props.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

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

@@ -1,35 +1,36 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GroupHeader = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var __jsx = _react["default"].createElement;
-/**
- * Group header component for grouped lists
- */
-var GroupHeader = exports.GroupHeader = function GroupHeader(_ref) {
-  var groupKey = _ref.groupKey,
-    displayCount = _ref.displayCount,
-    isCollapsed = _ref.isCollapsed,
-    collapsible = _ref.collapsible,
-    showcount = _ref.showcount,
-    onHeaderClick = _ref.onHeaderClick;
-  return __jsx("li", {
-    className: (0, _clsx["default"])("app-list-item-header list-item list-group-header", {
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+const GroupHeader = ({
+  groupKey,
+  displayCount,
+  isCollapsed,
+  collapsible,
+  showcount,
+  onHeaderClick
+}) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    className: clsx("app-list-item-header list-item list-group-header", {
       "collapsible-content": collapsible
     }),
-    onClick: function onClick() {
-      return onHeaderClick(groupKey);
-    }
-  }, __jsx("h4", null, groupKey, __jsx("div", {
-    className: "header-action"
-  }, collapsible && __jsx("i", {
-    className: (0, _clsx["default"])("app-icon wi action", isCollapsed ? "wi-chevron-down" : "wi-chevron-up")
-  }), showcount && __jsx("span", {
-    className: "label label-default"
-  }, displayCount))));
-};
+    onClick: () => onHeaderClick(groupKey),
+    children: /* @__PURE__ */ jsxs("h4", { children: [
+      groupKey,
+      /* @__PURE__ */ jsxs("div", { className: "header-action", children: [
+        collapsible && /* @__PURE__ */ jsx(
+          "i",
+          {
+            className: clsx(
+              "app-icon wi action",
+              isCollapsed ? "wi-chevron-down" : "wi-chevron-up"
+            )
+          }
+        ),
+        showcount && /* @__PURE__ */ jsx("span", { className: "label label-default", children: displayCount })
+      ] })
+    ] })
+  }
+);
+export {
+  GroupHeader
+};

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

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