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

package/components/navigation/breadcrumb/index.js

@@ -1,67 +1,44 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmBreadcrumb = exports.BreadCrumb = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _link = _interopRequireDefault(require("next/link"));
-var _DataNav = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/DataNav"));
-var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
-var __jsx = _react["default"].createElement;
-var BreadCrumb = exports.BreadCrumb = function BreadCrumb(props) {
-  var className = props.className,
-    onBeforenavigate = props.onBeforenavigate,
-    itemtarget = props.itemtarget,
-    _props$navNodes = props.navNodes,
-    navNodes = _props$navNodes === void 0 ? [] : _props$navNodes;
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import Link from "next/link";
+import withDatasetAwareNavigation from "../../../higherOrder/DataNav";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+const BreadCrumb = (props) => {
+  const { className, onBeforenavigate, itemtarget, navNodes = [] } = props;
   function handleBeforeNavigate(e, node) {
     if (onBeforenavigate) {
       return onBeforenavigate(props, node);
     }
   }
-  var renderNavItem = function renderNavItem(node, index) {
-    var isLast = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    return __jsx("li", {
-      key: node.id || index,
-      className: (0, _clsx["default"])(node["class"], {
-        active: isLast
-      })
-    }, __jsx(_react["default"].Fragment, null, node.icon ? __jsx("i", {
-      className: node.icon
-    }) : __jsx("i", null), !isLast ? __jsx(_link["default"], {
-      href: node.link || "#",
-      title: node.hint || node.label,
-      onClick: function onClick(e) {
-        return handleBeforeNavigate(e, node);
-      },
-      className: (0, _clsx["default"])({
-        "disabled-link": !!node.action
-      })
-    }, node.label) : __jsx(_link["default"], {
-      title: node.hint || node.label,
-      className: "text-muted",
-      tabIndex: 0,
-      "aria-current": "page",
-      href: "#"
-    }, node.label)));
-  };
-  return __jsx("ol", {
-    className: (0, _clsx["default"])("breadcrumb app-breadcrumb", className)
-  }, navNodes.map(function (node, index) {
-    return renderNavItem(node, index, index === navNodes.length - 1);
-  }));
+  const renderNavItem = (node, index, isLast = false) => /* @__PURE__ */ jsx("li", { className: clsx(node.class, { active: isLast }), children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    node.icon ? /* @__PURE__ */ jsx("i", { className: node.icon }) : /* @__PURE__ */ jsx("i", {}),
+    !isLast ? /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: node.link || "#",
+        title: node.hint || node.label,
+        onClick: (e) => handleBeforeNavigate(e, node),
+        className: clsx({ "disabled-link": !!node.action }),
+        children: node.label
+      }
+    ) : /* @__PURE__ */ jsx(
+      Link,
+      {
+        title: node.hint || node.label,
+        className: "text-muted",
+        tabIndex: 0,
+        "aria-current": "page",
+        href: "#",
+        children: node.label
+      }
+    )
+  ] }) }, node.id || index);
+  return /* @__PURE__ */ jsx("ol", { className: clsx("breadcrumb app-breadcrumb", className), children: navNodes.map((node, index) => renderNavItem(node, index, index === navNodes.length - 1)) });
+};
+const BreadCrumbStandalone = withDatasetAwareNavigation(BreadCrumb);
+var breadcrumb_default = withBaseWrapper(withDatasetAwareNavigation(BreadCrumb));
+export {
+  BreadCrumb,
+  BreadCrumbStandalone as WmBreadcrumb,
+  breadcrumb_default as default
 };
-var BreadCrumbStandalone = exports.WmBreadcrumb = (0, _DataNav["default"])(BreadCrumb);
-/**
- * The BreadCrumb component renders a navigation breadcrumb trail from navNodes.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/navigation-breadcrumb--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/navigation-breadcrumb--docs)
- *
- * @param props - {@link BreadCrumbProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper["default"])((0, _DataNav["default"])(BreadCrumb));

package/components/navigation/breadcrumb/props.js

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

package/components/navigation/menu/components/ListItems.js

@@ -1,71 +1,80 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.buildMenuListClasses = exports.MenuList = exports.CollapsibleMenu = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _clsx = _interopRequireDefault(require("clsx"));
-var _constants = require("../constants");
-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;
-var getAnimationClass = function getAnimationClass(type, position) {
-  if (!type || !position || !_constants.ANIMATION_CLASSES[type]) return "";
-  return _constants.ANIMATION_CLASSES[type][position] || _constants.ANIMATION_CLASSES[type].name;
+import { jsx } from "react/jsx-runtime";
+import React, { memo } from "react";
+import { List } from "@mui/material";
+import clsx from "clsx";
+import { ANIMATION_CLASSES } from "../constants";
+const getAnimationClass = (type, position) => {
+  if (!type || !position || !ANIMATION_CLASSES[type]) return "";
+  return ANIMATION_CLASSES[type][position] || ANIMATION_CLASSES[type].name;
 };
-
-// Reusable menu list class builder
-var buildMenuListClasses = exports.buildMenuListClasses = function buildMenuListClasses(iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuposition, isHovered) {
-  return (0, _clsx["default"])("icon-position-".concat(iconposition), "menu-layout-".concat(menulayout), "dropdown-menu", horizontalPos === "left" && isHovered || panelPosition === "left" ? "pull-right" : "", !panelPosition && horizontalPos === "left" ? "pull-right" : "", menulayout === "horizontal" ? "horizontal" : "", animateitems && "animated ".concat(getAnimationClass(animateitems, menuposition)));
+const buildMenuListClasses = (iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuposition, isHovered) => {
+  return clsx(
+    `icon-position-${iconposition}`,
+    `menu-layout-${menulayout}`,
+    "dropdown-menu",
+    horizontalPos === "left" && isHovered || panelPosition === "left" ? "pull-right" : "",
+    !panelPosition && horizontalPos === "left" ? "pull-right" : "",
+    menulayout === "horizontal" ? "horizontal" : "",
+    animateitems && `animated ${getAnimationClass(animateitems, menuposition)}`
+  );
 };
-
-// Reusable Menu List Component
-var MenuList = exports.MenuList = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var className = _ref.className,
-    style = _ref.style,
-    _ref$role = _ref.role,
-    role = _ref$role === void 0 ? "menu" : _ref$role,
-    _ref$iconposition = _ref.iconposition,
-    iconposition = _ref$iconposition === void 0 ? "left" : _ref$iconposition,
-    children = _ref.children,
-    onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave,
-    onClick = _ref.onClick;
-  if (_react["default"].Children.count(children) === 0) {
-    return null;
+const MenuList = memo(
+  ({
+    className,
+    style,
+    role = "menu",
+    iconposition = "left",
+    children,
+    onMouseEnter,
+    onMouseLeave,
+    onClick
+  }) => {
+    if (React.Children.count(children) === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      List,
+      {
+        className: `${className} icon-position-${iconposition}`,
+        role,
+        style,
+        onMouseEnter,
+        onMouseLeave,
+        onClick,
+        children
+      }
+    );
   }
-  return __jsx(_material.List, {
-    className: "".concat(className, " icon-position-").concat(iconposition),
-    role: role,
-    style: style,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: onClick
-  }, children);
-});
+);
 MenuList.displayName = "MenuList";
-
-// Reusable Collapsible Menu Component
-var CollapsibleMenu = exports.CollapsibleMenu = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
-  var isOpen = _ref2.isOpen,
-    verticalPos = _ref2.verticalPos,
-    children = _ref2.children,
-    className = _ref2.className,
-    style = _ref2.style,
-    onMouseEnter = _ref2.onMouseEnter,
-    onMouseLeave = _ref2.onMouseLeave,
-    onClick = _ref2.onClick;
-  // Don't render anything if not open
-  if (!isOpen) return null;
-  return __jsx(MenuList, {
-    className: className,
-    style: style,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: onClick
-  }, children);
-});
-CollapsibleMenu.displayName = "CollapsibleMenu";
+const CollapsibleMenu = memo(
+  ({
+    isOpen,
+    verticalPos,
+    children,
+    className,
+    style,
+    onMouseEnter,
+    onMouseLeave,
+    onClick
+  }) => {
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsx(
+      MenuList,
+      {
+        className,
+        style,
+        onMouseEnter,
+        onMouseLeave,
+        onClick,
+        children
+      }
+    );
+  }
+);
+CollapsibleMenu.displayName = "CollapsibleMenu";
+export {
+  CollapsibleMenu,
+  MenuList,
+  buildMenuListClasses
+};

package/components/navigation/menu/constants.js

@@ -1,11 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.menuAlignClass = exports.TOOLTIP_ENTER_DELAY = exports.POSITION = exports.LAYOUT = exports.KEYBOARD_MOVEMENTS = exports.DEFAULT_DATASET = exports.CARET_CLS = exports.AUTO_OPEN = exports.AUTO_CLOSE = exports.ANIMATION_CLASSES = void 0;
-// Define keyboard movement constants
-var KEYBOARD_MOVEMENTS = exports.KEYBOARD_MOVEMENTS = {
+const KEYBOARD_MOVEMENTS = {
   MOVE_UP: "UP-ARROW",
   MOVE_LEFT: "LEFT-ARROW",
   MOVE_RIGHT: "RIGHT-ARROW",
@@ -17,32 +10,24 @@ var KEYBOARD_MOVEMENTS = exports.KEYBOARD_MOVEMENTS = {
   ON_SHIFT_TAB: "SHIFT-TAB",
   ON_ESCAPE: "ESC"
 };
-
-// Define position constants
-var POSITION = exports.POSITION = {
+const POSITION = {
   DOWN_RIGHT: "down,right",
   DOWN_LEFT: "down,left",
   UP_RIGHT: "up,right",
   UP_LEFT: "up,left",
   INLINE: "inline"
 };
-
-// Define layout constants
-var LAYOUT = exports.LAYOUT = {
+const LAYOUT = {
   HORIZONTAL: "horizontal",
   VERTICAL: "vertical",
   GRID: "grid"
 };
-
-// Define autoopen constants
-var AUTO_OPEN = exports.AUTO_OPEN = {
+const AUTO_OPEN = {
   NEVER: "never",
   ACTIVE_PAGE: "activepage",
   ALWAYS: "always"
 };
-
-// Define autoclose constants - FIXED to match exactly the string passed as prop
-var AUTO_CLOSE = exports.AUTO_CLOSE = {
+const AUTO_CLOSE = {
   ALWAYS: "always",
   OUTSIDE_CLICK: "outsideClick",
   // Now matches exactly the string "outsideClick"
@@ -50,24 +35,12 @@ var AUTO_CLOSE = exports.AUTO_CLOSE = {
   NEVER: "never",
   DISABLED: "disabled"
 };
-
-// Default dataset to use when none is provided
-var DEFAULT_DATASET = exports.DEFAULT_DATASET = [{
-  label: "Menu Item 1",
-  link: "#item1",
-  expanded: false
-}, {
-  label: "Menu Item 2",
-  link: "#item2",
-  expanded: false
-}, {
-  label: "Menu Item 3",
-  link: "#item3",
-  expanded: false
-}];
-
-// Constants
-var ANIMATION_CLASSES = exports.ANIMATION_CLASSES = {
+const DEFAULT_DATASET = [
+  { label: "Menu Item 1", link: "#item1", expanded: false },
+  { label: "Menu Item 2", link: "#item2", expanded: false },
+  { label: "Menu Item 3", link: "#item3", expanded: false }
+];
+const ANIMATION_CLASSES = {
   scale: {
     name: "wmScaleInLeft",
     "down,right": "wmScaleInLeft",
@@ -90,13 +63,25 @@ var ANIMATION_CLASSES = exports.ANIMATION_CLASSES = {
     "up,left": "wmSlideInUp"
   }
 };
-var TOOLTIP_ENTER_DELAY = exports.TOOLTIP_ENTER_DELAY = 1500;
-var CARET_CLS = exports.CARET_CLS = {
+const TOOLTIP_ENTER_DELAY = 1500;
+const CARET_CLS = {
   UP: "fa-caret-up",
   DOWN: "fa-caret-down"
 };
-var menuAlignClass = exports.menuAlignClass = {
+const menuAlignClass = {
   "pull-right": "fa-caret-left",
   "dropinline-menu": "fa-caret-down",
   "pull-left": "fa-caret-right"
-};
+};
+export {
+  ANIMATION_CLASSES,
+  AUTO_CLOSE,
+  AUTO_OPEN,
+  CARET_CLS,
+  DEFAULT_DATASET,
+  KEYBOARD_MOVEMENTS,
+  LAYOUT,
+  POSITION,
+  TOOLTIP_ENTER_DELAY,
+  menuAlignClass
+};

package/components/navigation/menu/hooks/useHoverState.hook.js

@@ -1,48 +1,21 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useHoverState = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = require("react");
-/**
- * Custom hook to manage menu hover state using path-based tracking.
- *
- * Uses string paths (e.g., "0", "0-0", "1-0") instead of node objects to avoid
- * reference equality issues. Each menu item gets a unique, stable path identifier.
- *
- * The submenu stays open because:
- * 1. Parent item has hover handlers
- * 2. Submenu container ALSO has hover handlers for the SAME parent path
- * 3. When mouse moves from parent to submenu, the submenu's onMouseEnter
- *    re-adds the parent path before the visual update completes
- */
-var useHoverState = exports.useHoverState = function useHoverState() {
-  // Track which menu paths are currently hovered using their string identifiers
-  var _useState = (0, _react.useState)(new Set()),
-    hoveredPaths = _useState[0],
-    setHoveredPaths = _useState[1];
-
-  // Add path to hover state when mouse enters a menu item or its submenu
-  var handlePathMouseEnter = (0, _react.useCallback)(function (path) {
-    setHoveredPaths(function (prev) {
-      return new Set([].concat((0, _toConsumableArray2["default"])(prev), [path]));
-    });
+import { useCallback, useState } from "react";
+const useHoverState = () => {
+  const [hoveredPaths, setHoveredPaths] = useState(/* @__PURE__ */ new Set());
+  const handlePathMouseEnter = useCallback((path) => {
+    setHoveredPaths((prev) => /* @__PURE__ */ new Set([...prev, path]));
   }, []);
-
-  // Remove path from hover state immediately when mouse leaves
-  var handlePathMouseLeave = (0, _react.useCallback)(function (path, _event) {
-    setHoveredPaths(function (prev) {
-      var newSet = new Set(prev);
-      newSet["delete"](path);
-      return newSet;
-    });
-  }, []);
-  return {
-    hoveredPaths: hoveredPaths,
-    handlePathMouseEnter: handlePathMouseEnter,
-    handlePathMouseLeave: handlePathMouseLeave
-  };
-};
+  const handlePathMouseLeave = useCallback(
+    (path, _event) => {
+      setHoveredPaths((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(path);
+        return newSet;
+      });
+    },
+    []
+  );
+  return { hoveredPaths, handlePathMouseEnter, handlePathMouseLeave };
+};
+export {
+  useHoverState
+};

package/components/navigation/menu/hooks/useKeyboardMovements.hook.js

@@ -1,37 +1,43 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useKeyboardMovements = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _constants = require("../constants");
-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 useKeyboardMovements = exports.useKeyboardMovements = function useKeyboardMovements(menuposition) {
-  return (0, _react.useMemo)(function () {
+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 { useMemo } from "react";
+import { KEYBOARD_MOVEMENTS, POSITION } from "../constants";
+const useKeyboardMovements = (menuposition) => {
+  return useMemo(() => {
     switch (menuposition) {
-      case _constants.POSITION.UP_RIGHT:
-        return _objectSpread(_objectSpread({}, _constants.KEYBOARD_MOVEMENTS), {}, {
-          MOVE_UP: "DOWN-ARROW",
-          MOVE_DOWN: "UP-ARROW"
-        });
-      case _constants.POSITION.UP_LEFT:
-        return _objectSpread(_objectSpread({}, _constants.KEYBOARD_MOVEMENTS), {}, {
+      case POSITION.UP_RIGHT:
+        return __spreadProps(__spreadValues({}, KEYBOARD_MOVEMENTS), { MOVE_UP: "DOWN-ARROW", MOVE_DOWN: "UP-ARROW" });
+      case POSITION.UP_LEFT:
+        return __spreadProps(__spreadValues({}, KEYBOARD_MOVEMENTS), {
           MOVE_UP: "DOWN-ARROW",
           MOVE_DOWN: "UP-ARROW",
           MOVE_LEFT: "RIGHT-ARROW",
           MOVE_RIGHT: "LEFT-ARROW"
         });
-      case _constants.POSITION.DOWN_LEFT:
-        return _objectSpread(_objectSpread({}, _constants.KEYBOARD_MOVEMENTS), {}, {
-          MOVE_LEFT: "RIGHT-ARROW",
-          MOVE_RIGHT: "LEFT-ARROW"
-        });
+      case POSITION.DOWN_LEFT:
+        return __spreadProps(__spreadValues({}, KEYBOARD_MOVEMENTS), { MOVE_LEFT: "RIGHT-ARROW", MOVE_RIGHT: "LEFT-ARROW" });
       default:
-        return _constants.KEYBOARD_MOVEMENTS;
+        return KEYBOARD_MOVEMENTS;
     }
   }, [menuposition]);
-};
+};
+export {
+  useKeyboardMovements
+};

package/components/navigation/menu/hooks/useTransformedDataset.hook.js

@@ -1,15 +1,22 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTransformedDataset = void 0;
-var _react = require("react");
-var _constants = require("../constants");
-var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transformedDataset-utils");
-var useTransformedDataset = exports.useTransformedDataset = function useTransformedDataset(dataset, itemlabel, orderby, itemchildren, dataPath) {
-  return (0, _react.useMemo)(function () {
-    if (!dataset) return _constants.DEFAULT_DATASET;
-    return (0, _transformedDatasetUtils.transformDataset)(dataset, undefined, itemlabel, undefined, undefined, orderby, null, dataPath, itemchildren);
+import { useMemo } from "react";
+import { DEFAULT_DATASET } from "../constants";
+import { transformDataset } from "../../../../utils/transformedDataset-utils";
+const useTransformedDataset = (dataset, itemlabel, orderby, itemchildren, dataPath) => {
+  return useMemo(() => {
+    if (!dataset) return DEFAULT_DATASET;
+    return transformDataset(
+      dataset,
+      void 0,
+      itemlabel,
+      void 0,
+      void 0,
+      orderby,
+      null,
+      dataPath,
+      itemchildren
+    );
   }, [dataset, itemlabel, orderby]);
-};
+};
+export {
+  useTransformedDataset
+};