@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/basic/tree/utils.d.ts

@@ -0,0 +1,39 @@
+import { TreeNodeData, TreeItem, TreePartialNodeApi } from "./props";
+/** Whether the dataset row (`node.data`) is disabled via its `disabled` property. */
+export declare const isTreeNodeDisabled: (data: TreeNodeData | undefined | null) => boolean;
+export declare const getNestedPropertyLocal: (obj: any, path: string) => any;
+export declare const generateUniqueNodeId: (baseId: string, usedNodeIds: Set<string>) => string;
+export declare const processNode: (item: TreeNodeData, depth: number, parent: TreeItem | undefined, rootDataset: any[] | undefined, nodeIndex: number | undefined, treeName: string | undefined, options: {
+    levels: number;
+    nodelabel: string;
+    nodeicon: string;
+    nodechildren: string;
+    nodeid: string;
+    generateUniqueNodeId: (baseId: string) => string;
+}) => TreeItem;
+export declare const findNodeById: (nodes: TreeItem[], id: string) => TreeItem | null;
+/**
+ * Toggle `open` on the node matching `nodeId` using the **current** tree snapshot.
+ * Used so partial templates can expand/collapse by id even when the passed-in `TreeItem`
+ */
+export declare const toggleExpansionInTree: (nodes: TreeItem[], nodeId: string) => TreeItem[];
+/**
+ * Dataset row fields for `pageParams.item` (no methods — those are merged in the hook as {@link TreePartialNodeApi}).
+ */
+export declare const getTreePartialRowPayload: (node: TreeItem) => Record<string, unknown>;
+/**
+ * Depth of the node from the tree root (root depth = 0).
+ */
+export declare const computeTreeNodeDepthFromRoot: (node: TreeItem) => number;
+/**
+ * Slash-separated path from root to this node (`/a/b/c`).
+ */
+export declare const buildTreePathFromRoot: (node: TreeItem) => string;
+/**
+ * Plain zTree-shaped snapshot for `item._node`. Nested `children` are data-only; methods are merged in {@link useTreePartialNodeApi}.
+ */
+export declare const buildTreePartialSnapshot: (node: TreeItem, selectedTreeNodeId: string | null | undefined) => Record<string, unknown>;
+/**
+ * Full `item` for wm-tree partials (`params: ['item']`).
+ */
+export declare const assembleTreePartialItem: (node: TreeItem, partialNodeApi: TreePartialNodeApi) => Record<string, unknown>;

package/components/basic/tree/utils.js

@@ -0,0 +1,272 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleExpansionInTree = exports.processNode = exports.isTreeNodeDisabled = exports.getTreePartialRowPayload = exports.getNestedPropertyLocal = exports.generateUniqueNodeId = exports.findNodeById = exports.computeTreeNodeDepthFromRoot = exports.buildTreePathFromRoot = exports.buildTreePartialSnapshot = exports.assembleTreePartialItem = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
+var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
+var _get = _interopRequireDefault(require("lodash-es/get"));
+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; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/** Whether the dataset row (`node.data`) is disabled via its `disabled` property. */
+var isTreeNodeDisabled = exports.isTreeNodeDisabled = function isTreeNodeDisabled(data) {
+  if (!data) return false;
+  var disabled_node = data.disabled;
+  if (disabled_node === false || disabled_node === "false") {
+    return false;
+  }
+  return Boolean(disabled_node);
+};
+
+// Helper function to get nested property (local version for processNode)
+var getNestedPropertyLocal = exports.getNestedPropertyLocal = function getNestedPropertyLocal(obj, path) {
+  if (!path || !obj) return undefined;
+  try {
+    var normalizedPath = path.replace(/\[(\d+)\]/g, ".$1").replace(/^\./, "");
+    return (0, _get["default"])(obj, normalizedPath);
+  } catch (error) {
+    return undefined;
+  }
+};
+
+// Function to generate unique nodeId
+var generateUniqueNodeId = exports.generateUniqueNodeId = function generateUniqueNodeId(baseId, usedNodeIds) {
+  var uniqueId = baseId;
+  var counter = 1;
+  while (usedNodeIds.has(uniqueId)) {
+    uniqueId = "".concat(baseId, "_").concat(counter);
+    counter++;
+  }
+  usedNodeIds.add(uniqueId);
+  return uniqueId;
+};
+
+// Process a single node and its children with depth tracking
+var _processNode = exports.processNode = function processNode(item, depth, parent, rootDataset, nodeIndex, treeName, options) {
+  var levels = options.levels,
+    nodelabel = options.nodelabel,
+    nodeicon = options.nodeicon,
+    nodechildren = options.nodechildren,
+    nodeid = options.nodeid,
+    generateUniqueNodeId = options.generateUniqueNodeId;
+
+  // Helper functions for property resolution
+  var getLabelValue = function getLabelValue() {
+    var _ref, _ref2, _ref3, _item$nodelabel;
+    if (nodelabel && (nodelabel.includes("[") || nodelabel.includes("."))) {
+      // Try to get the property from the current item only (like Angular's getEvaluatedData)
+      var currentItemValue = getNestedPropertyLocal(item, nodelabel);
+      if (currentItemValue !== undefined) {
+        return currentItemValue;
+      }
+      // If not found on current item, fall back to default values (don't do global search)
+    }
+    return (_ref = (_ref2 = (_ref3 = (_item$nodelabel = item[nodelabel]) !== null && _item$nodelabel !== void 0 ? _item$nodelabel : item.label) !== null && _ref3 !== void 0 ? _ref3 : item.name) !== null && _ref2 !== void 0 ? _ref2 : String(item)) !== null && _ref !== void 0 ? _ref : nodelabel;
+  };
+  var getIconValue = function getIconValue() {
+    var _ref4, _item$nodeicon;
+    if (nodeicon && (nodeicon.includes("[") || nodeicon.includes("."))) {
+      // Try to get the property from the current item only (like Angular's getEvaluatedData)
+      var currentItemValue = getNestedPropertyLocal(item, nodeicon);
+      if (currentItemValue !== undefined) {
+        return currentItemValue;
+      }
+      // If not found on current item, fall back to default values (don't do global search)
+    }
+    return (_ref4 = (_item$nodeicon = item[nodeicon]) !== null && _item$nodeicon !== void 0 ? _item$nodeicon : item.icon) !== null && _ref4 !== void 0 ? _ref4 : nodeicon;
+  };
+  var getNodeIdValue = function getNodeIdValue() {
+    if (nodeid && (nodeid.includes("[") || nodeid.includes("."))) {
+      // Try to get the property from the current item only (like Angular's getEvaluatedData)
+      var currentItemValue = getNestedPropertyLocal(item, nodeid);
+      if (currentItemValue !== undefined) {
+        return String(currentItemValue);
+      }
+      // If not found on current item, return undefined (no fallback like Angular)
+      return undefined;
+    }
+
+    // For direct properties, return the value or undefined (no fallback like Angular)
+    var directValue = item[nodeid];
+    if (directValue !== undefined) {
+      return String(directValue);
+    }
+
+    // If no nodeid specified or found, generate a fallback for React's internal use
+    if (!nodeid) {
+      var _ref5, _item$nodeId;
+      var fallbackId = (_ref5 = (_item$nodeId = item.nodeId) !== null && _item$nodeId !== void 0 ? _item$nodeId : item.id) !== null && _ref5 !== void 0 ? _ref5 : "node_".concat(Date.now(), "_").concat(Math.random());
+      return String(fallbackId);
+    }
+    return undefined;
+  };
+  var getChildrenValue = function getChildrenValue() {
+    if (nodechildren && (nodechildren.includes("[") || nodechildren.includes("."))) {
+      // Try to get the property from the current item only (like Angular's getEvaluatedData)
+      var currentItemValue = getNestedPropertyLocal(item, nodechildren);
+      if (currentItemValue !== undefined) {
+        return currentItemValue;
+      }
+      // If not found on current item, fall back to default values (don't do global search)
+    }
+    // Use logical OR (||) like Angular to fall back to item.children only if the result is falsy
+    return item[nodechildren] || item.children;
+  };
+  var labelValue = getLabelValue();
+  var iconValue = getIconValue();
+  var nodeIdValue = getNodeIdValue();
+  var childrenData = getChildrenValue();
+
+  // Ensure we have a unique nodeId for React's internal use
+  // If nodeIdValue is undefined (like Angular), generate a fallback
+  var finalNodeId = nodeIdValue || generateUniqueNodeId("node_".concat(Date.now(), "_").concat(nodeIndex || 0));
+  var node = {
+    name: String(labelValue || ""),
+    label: String(labelValue || ""),
+    icon: iconValue,
+    nodeId: String(finalNodeId),
+    data: (0, _cloneDeep["default"])(item),
+    open: depth < levels,
+    checked: item.checked || false,
+    parent: parent,
+    tId: treeName ? "".concat(treeName, "_").concat(finalNodeId) : "tree_node_".concat(finalNodeId),
+    isParent: (0, _isArray["default"])(childrenData) && childrenData.length > 0
+  };
+  if ((0, _isArray["default"])(childrenData) && childrenData.length > 0) {
+    node.children = childrenData.map(function (child, index) {
+      return _processNode(child, depth + 1, node, rootDataset, index, treeName, options);
+    });
+  }
+  return node;
+};
+var _findNodeById = exports.findNodeById = function findNodeById(nodes, id) {
+  var _iterator = _createForOfIteratorHelper(nodes),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _node$children;
+      var node = _step.value;
+      if (String(node.nodeId) === String(id)) return node;
+      if ((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length) {
+        var found = _findNodeById(node.children, id);
+        if (found) return found;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return null;
+};
+
+/**
+ * Toggle `open` on the node matching `nodeId` using the **current** tree snapshot.
+ * Used so partial templates can expand/collapse by id even when the passed-in `TreeItem`
+ */
+var _toggleExpansionInTree = exports.toggleExpansionInTree = function toggleExpansionInTree(nodes, nodeId) {
+  return nodes.map(function (n) {
+    var _n$children;
+    if (n.nodeId === nodeId) {
+      return _objectSpread(_objectSpread({}, n), {}, {
+        open: !n.open
+      });
+    }
+    if ((_n$children = n.children) !== null && _n$children !== void 0 && _n$children.length) {
+      return _objectSpread(_objectSpread({}, n), {}, {
+        children: _toggleExpansionInTree(n.children, nodeId)
+      });
+    }
+    return n;
+  });
+};
+
+/**
+ * Dataset row fields for `pageParams.item` (no methods — those are merged in the hook as {@link TreePartialNodeApi}).
+ */
+var getTreePartialRowPayload = exports.getTreePartialRowPayload = function getTreePartialRowPayload(node) {
+  var _node$label;
+  var raw = node.data;
+  var row = raw && (0, _typeof2["default"])(raw) === "object" && !Array.isArray(raw) ? _objectSpread({}, raw) : {};
+  return _objectSpread(_objectSpread({}, row), {}, {
+    name: (_node$label = node.label) !== null && _node$label !== void 0 ? _node$label : node.name
+  });
+};
+
+/**
+ * Depth of the node from the tree root (root depth = 0).
+ */
+var computeTreeNodeDepthFromRoot = exports.computeTreeNodeDepthFromRoot = function computeTreeNodeDepthFromRoot(node) {
+  var depthFromRoot = 0;
+  var ancestor = node.parent;
+  while (ancestor) {
+    depthFromRoot += 1;
+    ancestor = ancestor.parent;
+  }
+  return depthFromRoot;
+};
+
+/**
+ * Slash-separated path from root to this node (`/a/b/c`).
+ */
+var buildTreePathFromRoot = exports.buildTreePathFromRoot = function buildTreePathFromRoot(node) {
+  if (!node) return "";
+  var segments = [];
+  var current = node;
+  while (current) {
+    segments.unshift(current.name);
+    current = current.parent;
+  }
+  return "/".concat(segments.join("/"));
+};
+
+/**
+ * Plain zTree-shaped snapshot for `item._node`. Nested `children` are data-only; methods are merged in {@link useTreePartialNodeApi}.
+ */
+var _buildTreePartialSnapshot = exports.buildTreePartialSnapshot = function buildTreePartialSnapshot(node, selectedTreeNodeId) {
+  var _node$parent, _node$parent$nodeId, _node$parent2, _node$tId, _node$name, _node$label2, _siblings$length;
+  var siblings = (_node$parent = node.parent) === null || _node$parent === void 0 ? void 0 : _node$parent.children;
+  var rawSiblingIndex = siblings !== null && siblings !== void 0 && siblings.length ? siblings.findIndex(function (child) {
+    return String(child.nodeId) === String(node.nodeId);
+  }) : 0;
+  var siblingIndex = rawSiblingIndex < 0 ? 0 : rawSiblingIndex;
+  var level = computeTreeNodeDepthFromRoot(node);
+  var hasChildren = !!(node.children && node.children.length > 0);
+  var selectedId = selectedTreeNodeId != null ? String(selectedTreeNodeId) : "";
+  return {
+    data: node.data,
+    nodeId: node.nodeId,
+    parentId: (_node$parent$nodeId = (_node$parent2 = node.parent) === null || _node$parent2 === void 0 ? void 0 : _node$parent2.nodeId) !== null && _node$parent$nodeId !== void 0 ? _node$parent$nodeId : null,
+    tId: (_node$tId = node.tId) !== null && _node$tId !== void 0 ? _node$tId : "",
+    name: (_node$name = node.name) !== null && _node$name !== void 0 ? _node$name : "",
+    label: (_node$label2 = node.label) !== null && _node$label2 !== void 0 ? _node$label2 : "",
+    level: level,
+    children: hasChildren ? node.children.map(function (child) {
+      return _buildTreePartialSnapshot(child, selectedTreeNodeId);
+    }) : [],
+    isParent: hasChildren,
+    isFirstNode: siblings ? siblingIndex === 0 : true,
+    isLastNode: siblings ? siblingIndex === ((_siblings$length = siblings === null || siblings === void 0 ? void 0 : siblings.length) !== null && _siblings$length !== void 0 ? _siblings$length : 1) - 1 : true,
+    open: !!node.open,
+    checked: !!node.checked,
+    checkedOld: !!node.checked,
+    isSelected: selectedId !== "" && selectedId === String(node.nodeId)
+  };
+};
+
+/**
+ * Full `item` for wm-tree partials (`params: ['item']`).
+ */
+var assembleTreePartialItem = exports.assembleTreePartialItem = function assembleTreePartialItem(node, partialNodeApi) {
+  return _objectSpread(_objectSpread({}, getTreePartialRowPayload(node)), {}, {
+    node: partialNodeApi,
+    _node: partialNodeApi
+  });
+};

package/components/basic/video/index.d.ts

@@ -0,0 +1,79 @@
+import React from "react";
+import { WmVideoProps } from "./props";
+export declare const WmVideo: React.MemoExoticComponent<(props: WmVideoProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmVideo component is used to play video files in various formats (MP4, WebM, OGG).
+ * It supports subtitles, posters, and various playback controls.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-video--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-video--docs)
+ *
+ * @param props - {@link WmVideoProps}
+ */
+declare const _default: React.ComponentType<{
+    autoplay?: boolean;
+    variant?: "standard";
+    controls?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    oggformat?: string;
+    poster?: string;
+    mp4format?: string;
+    subtitlelang?: string;
+    subtitlesource?: string;
+    videosupportmessage?: string;
+    videopreload?: "auto" | "metadata" | "none";
+    webmformat?: string;
+    prefabName?: string;
+    id?: string;
+    videoposter?: string;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+}>;
+export default _default;

package/components/basic/video/index.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmVideo = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _resourceUrl = require("@wavemaker-ai/react-runtime/utils/resource-url");
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+var _excluded = ["subtitlelang", "videoposter", "className", "controls", "muted", "loop", "autoplay", "videopreload", "tabindex", "hint", "arialabel", "styles", "name", "mp4format", "webmformat", "oggformat", "subtitlesource", "videosupportmessage", "prefabName"];
+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 DEFAULT_CLASS = "app-video";
+var WmVideo = exports.WmVideo = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$subtitlelang = props.subtitlelang,
+    subtitlelang = _props$subtitlelang === void 0 ? "en" : _props$subtitlelang,
+    _props$videoposter = props.videoposter,
+    videoposter = _props$videoposter === void 0 ? "resources/images/imagelists/default-image.png" : _props$videoposter,
+    className = props.className,
+    controls = props.controls,
+    muted = props.muted,
+    loop = props.loop,
+    autoplay = props.autoplay,
+    videopreload = props.videopreload,
+    tabindex = props.tabindex,
+    hint = props.hint,
+    arialabel = props.arialabel,
+    styles = props.styles,
+    name = props.name,
+    mp4format = props.mp4format,
+    webmformat = props.webmformat,
+    oggformat = props.oggformat,
+    subtitlesource = props.subtitlesource,
+    videosupportmessage = props.videosupportmessage,
+    prefabName = props.prefabName,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var computedPoster = (0, _react.useMemo)(function () {
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(videoposter, prefabName);
+  }, [videoposter, prefabName]);
+  var computedMp4 = (0, _react.useMemo)(function () {
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(mp4format || "", prefabName);
+  }, [mp4format, prefabName]);
+  var computedWebm = (0, _react.useMemo)(function () {
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(webmformat || "", prefabName);
+  }, [webmformat, prefabName]);
+  var computedOgg = (0, _react.useMemo)(function () {
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(oggformat || "", prefabName);
+  }, [oggformat, prefabName]);
+  var computedSubtitles = (0, _react.useMemo)(function () {
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(subtitlesource || "", prefabName);
+  }, [subtitlesource, prefabName]);
+  return __jsx(_Box["default"], (0, _extends2["default"])({
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    title: hint,
+    "aria-label": arialabel,
+    style: styles
+  }, (0, _attr.removeInvalidAttributes)(restProps)), __jsx("video", {
+    className: "wm-video-media",
+    controls: controls,
+    poster: computedPoster,
+    muted: muted,
+    loop: loop,
+    autoPlay: autoplay,
+    preload: videopreload,
+    tabIndex: tabindex,
+    name: name
+  }, computedMp4 && __jsx("source", {
+    src: computedMp4,
+    type: "video/mp4"
+  }), computedWebm && __jsx("source", {
+    src: computedWebm,
+    type: "video/webm"
+  }), computedOgg && __jsx("source", {
+    src: computedOgg,
+    type: "video/ogg"
+  }), computedSubtitles && __jsx("track", {
+    kind: "subtitles",
+    label: subtitlelang,
+    srcLang: subtitlelang,
+    src: computedSubtitles,
+    "default": true
+  }), videosupportmessage || "Your browser does not support the video tag."));
+}, function (prev, current) {
+  var keys = ["mp4format", "webmformat", "oggformat", "subtitlelang", "subtitlesource", "poster", "hint"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmVideo.displayName = "WmVideo";
+
+/**
+ * The WmVideo component is used to play video files in various formats (MP4, WebM, OGG).
+ * It supports subtitles, posters, and various playback controls.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-video--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-video--docs)
+ *
+ * @param props - {@link WmVideoProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmVideo);

package/components/basic/video/props.d.ts

@@ -0,0 +1,77 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Base props specific to the WmVideo component.
+ */
+export interface VideoProps {
+    /**
+     * If true, the video will start playing automatically.
+     * @default false
+     */
+    autoplay?: boolean;
+    /**
+     * The variant of the video.
+     * @default "default:standard"
+     */
+    variant?: "standard";
+    /**
+     * If true, video controls will be displayed.
+     * @default false
+     */
+    controls?: boolean;
+    /**
+     * If true, the video will loop back to the start when finished.
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * If true, the video will be muted.
+     * @default false
+     */
+    muted?: boolean;
+    /**
+     * The URL for the OGG format video source.
+     */
+    oggformat?: string;
+    /**
+     * The URL for the poster image to display before the video plays.
+     */
+    poster?: string;
+    /**
+     * The URL for the MP4 format video source.
+     */
+    mp4format?: string;
+    /**
+     * The language for the subtitles.
+     */
+    subtitlelang?: string;
+    /**
+     * The URL for the subtitle source file.
+     */
+    subtitlesource?: string;
+    /**
+     * Message to display if the browser does not support the video element.
+     */
+    videosupportmessage?: string;
+    /**
+     * Specifies if and how the video should be preloaded.
+     * @default "auto"
+     */
+    videopreload?: "auto" | "metadata" | "none";
+    /**
+     * The URL for the WebM format video source.
+     */
+    webmformat?: string;
+    prefabName?: string;
+    /**
+     * The unique ID for the video element.
+     */
+    id?: string;
+    /**
+     * The URL for the video poster image.
+     */
+    videoposter?: string;
+}
+/**
+ * Combined props for the WmVideo component, including base WaveMaker props.
+ */
+export type WmVideoProps = Prettify<VideoProps & BaseProps>;

package/components/basic/video/props.js

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