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

package/components/input/upload/index.js

@@ -0,0 +1,133 @@
+"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.WmUpload = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _link = _interopRequireDefault(require("next/link"));
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _withFormController = _interopRequireDefault(require("../../data/form/form-controller/withFormController"));
+var _image = _interopRequireDefault(require("next/image"));
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+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 WmUpload = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var name = props.name,
+    formField = props.formField,
+    datavalue = props.datavalue,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    type = props.type,
+    onChange = props.onChange,
+    className = props.className,
+    styles = props.styles,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    listener = props.listener;
+  var fileInputRef = (0, _react.useRef)(null);
+  var prevDatavalue = (0, _react.useRef)(datavalue);
+
+  // Check if we have existing file data
+  var isImage = (formField === null || formField === void 0 ? void 0 : formField.filetype) === "image";
+  var handleFileChange = function handleFileChange(event) {
+    var _event$target$files;
+    var file = ((_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files[0]) || null;
+
+    // For blob type, we need to call listener.onChange to update the form data
+    // The form controller will handle the actual value from the event.target.value
+    if (type === "file") {
+      var _listener$onChange;
+      listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, props.fieldName || props.name, {
+        datavalue: file
+      });
+    } else {
+      var _listener$onChange2;
+      // For blob type, pass the file name/path from the input value
+      listener === null || listener === void 0 || (_listener$onChange2 = listener.onChange) === null || _listener$onChange2 === void 0 || _listener$onChange2.call(listener, props.fieldName || props.name, {
+        datavalue: event.target.value
+      });
+    }
+    if (onChange) {
+      onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], type === "file" ? file : event.target.value, prevDatavalue.current);
+    }
+    prevDatavalue.current = file;
+  };
+  var handleFileFocus = function handleFileFocus(event) {
+    if (onFocus) {
+      onFocus(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    }
+  };
+  var handleFileBlur = function handleFileBlur(event) {
+    if (onBlur) {
+      onBlur(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    }
+  };
+
+  // Render existing file display
+  var renderExistingFile = (0, _react.useCallback)(function () {
+    var fileUrl = (formField === null || formField === void 0 ? void 0 : formField.href) || (formField === null || formField === void 0 ? void 0 : formField.datavalue);
+    if (!fileUrl || type !== "file") return null;
+    return __jsx("div", {
+      className: "existing-file-display"
+    }, isImage ? __jsx(_link["default"], {
+      className: "form-control-static",
+      href: fileUrl
+    }, __jsx(_image["default"], {
+      className: "wi wi-file wm-upload-existing-image",
+      src: fileUrl,
+      alt: "Existing file"
+    })) : __jsx(_link["default"], {
+      className: "form-control-static",
+      href: fileUrl
+    }, __jsx("i", {
+      className: "wi wi-file"
+    })));
+  }, [formField === null || formField === void 0 ? void 0 : formField.href, formField === null || formField === void 0 ? void 0 : formField.datavalue, isImage, type]);
+  (0, _react.useEffect)(function () {
+    if (!datavalue) {
+      // clear field input value
+      fileInputRef.current && (fileInputRef.current.value = "");
+    }
+  }, [datavalue]);
+  return __jsx("div", {
+    className: className,
+    style: styles
+  }, renderExistingFile(), __jsx("input", (0, _extends2["default"])({}, (0, _attr.removeInvalidAttributes)(props), {
+    hidden: props.hidden,
+    ref: fileInputRef,
+    type: "file",
+    name: "".concat(name, "_formWidget"),
+    className: "app-blob-upload",
+    required: required,
+    readOnly: readonly,
+    disabled: disabled,
+    onChange: handleFileChange,
+    onFocus: handleFileFocus,
+    onBlur: handleFileBlur
+  })));
+}, function (prev, current) {
+  var keys = ["name", "formField", "datavalue", "readonly", "required", "type", "onChange", "className", "styles"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmUpload.displayName = "WmUpload";
+var WithForm = exports.WmUpload = (0, _withFormController["default"])(WmUpload);
+/**
+ * The WmUpload component provides a file upload input for form fields with blob support.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-fileupload--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-fileupload--docs)
+ *
+ * @param props - {@link WmUploadProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithForm);

package/components/input/upload/props.d.ts

@@ -0,0 +1,61 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Props specific to the WmUpload component.
+ */
+export interface UploadProps {
+    /**
+     * Form field reference injected by the form controller.
+     */
+    formField?: Record<string, unknown>;
+    /**
+     * The bound data value (file or blob data).
+     */
+    datavalue?: string | File | Blob | null;
+    /**
+     * Whether the upload is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Whether a file upload is required.
+     */
+    required?: boolean;
+    /**
+     * Accepted file types (MIME types or extensions).
+     * @example "image/*,.pdf"
+     */
+    accept?: string;
+    /**
+     * The type of data to store.
+     * - `"blob"`: Stores as a Blob URL.
+     * - `"file"`: Stores as a File object.
+     */
+    type?: "blob" | "file";
+    /**
+     * Whether the upload is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Field name used by the form controller.
+     */
+    fieldName?: string;
+    /**
+     * Callback invoked when the selected file changes.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newDatavalue: string | File | Blob | null, oldVal: string | File | Blob | null) => void;
+    /**
+     * Original onChange callback (before form controller wrapping).
+     */
+    originalOnChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newDatavalue: string | File | Blob | null, oldVal: string | File | Blob | null) => void;
+    /**
+     * Callback invoked when the upload receives focus.
+     */
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the upload loses focus.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget: Record<string, unknown>) => void;
+}
+/**
+ * Combined props for the WmUpload component, including base WaveMaker props.
+ */
+export type WmUploadProps = Prettify<UploadProps & BaseProps>;

package/components/input/upload/props.js

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

package/components/input/util/index.d.ts

@@ -0,0 +1 @@
+export declare const sanitizeInputValue: (value: any) => string;

package/components/input/util/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sanitizeInputValue = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var sanitizeInputValue = exports.sanitizeInputValue = function sanitizeInputValue(value) {
+  return value === null || value === undefined ? "" : (0, _typeof2["default"])(value) === "object" || Array.isArray(value) ? "" : String(value) === "[object Object]" || String(value).startsWith("[object ") ? "" : String(value);
+};

package/components/layout/footer/index.d.ts

@@ -0,0 +1,15 @@
+import { WmFooterProps } from "./props";
+export declare const WmFooter: {
+    (props: WmFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The WmFooter component is used to create a footer area for the application.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/layout-footer--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/layout-footer--docs)
+ *
+ * @param props - {@link WmFooterProps}
+ */
+export default WmFooter;

package/components/layout/footer/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmFooter = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _material = require("@mui/material");
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "app-footer clearfix";
+var WmFooter = exports.WmFooter = function WmFooter(props) {
+  var styles = props.styles,
+    children = props.children,
+    render = props.render,
+    className = props.className,
+    id = props.id;
+  return __jsx(_material.Box, {
+    component: "div",
+    sx: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    id: id
+  }, render ? render(props) : children);
+};
+WmFooter.displayName = "WmFooter";
+
+/**
+ * The WmFooter component is used to create a footer area for the application.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/layout-footer--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/layout-footer--docs)
+ *
+ * @param props - {@link WmFooterProps}
+ */
+var _default = exports["default"] = WmFooter;

package/components/layout/footer/props.d.ts

@@ -0,0 +1,8 @@
+export interface FooterProps {
+    children?: React.ReactNode;
+    className?: string;
+    styles?: React.CSSProperties;
+    id?: string;
+    render?: (props: Record<string, any>) => React.ReactNode;
+}
+export type WmFooterProps = FooterProps;

package/components/layout/footer/props.js

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

package/components/layout/header/index.d.ts

@@ -0,0 +1,15 @@
+import { WmHeaderProps } from "./props";
+export declare const WmHeader: {
+    (props: WmHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The WmHeader component is used to create a header area for the application.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/layout-header--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/layout-header--docs)
+ *
+ * @param props - {@link WmHeaderProps}
+ */
+export default WmHeader;

package/components/layout/header/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmHeader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "app-header clearfix app-header-shrink";
+var WmHeader = exports.WmHeader = function WmHeader(props) {
+  var styles = props.styles,
+    children = props.children,
+    render = props.render,
+    className = props.className,
+    id = props.id;
+  return __jsx(_Box["default"], {
+    component: "header",
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    id: id,
+    sx: styles
+  }, __jsx(_Box["default"], {
+    component: "div",
+    className: "app-header-container"
+  }, render ? render(props) : children));
+};
+WmHeader.displayName = "WmHeader";
+
+/**
+ * The WmHeader component is used to create a header area for the application.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/layout-header--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/layout-header--docs)
+ *
+ * @param props - {@link WmHeaderProps}
+ */
+var _default = exports["default"] = WmHeader;

package/components/layout/header/props.d.ts

@@ -0,0 +1,8 @@
+export interface HeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+    styles?: React.CSSProperties;
+    id?: string;
+    render?: (props: Record<string, any>) => React.ReactNode;
+}
+export type WmHeaderProps = HeaderProps;

package/components/layout/header/props.js

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

package/components/layout/leftnav/index.d.ts

@@ -0,0 +1,15 @@
+import { WmLeftNavProps } from "./props";
+export declare const WmLeftPanel: {
+    (props: WmLeftNavProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The WmLeftPanel component is used to create a left navigation panel.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/layout-leftnav--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/layout-leftnav--docs)
+ *
+ * @param props - {@link WmLeftNavProps}
+ */
+export default WmLeftPanel;

package/components/layout/leftnav/index.js

@@ -0,0 +1,54 @@
+"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.WmLeftPanel = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+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-nav-drawer app-left-panel left-panel-collapsed ";
+var WmLeftPanel = exports.WmLeftPanel = function WmLeftPanel(props) {
+  var styles = props.styles,
+    children = props.children,
+    render = props.render,
+    className = props.className,
+    _props$columnwidth = props.columnwidth,
+    columnwidth = _props$columnwidth === void 0 ? 2 : _props$columnwidth,
+    id = props.id,
+    navtype = props.navtype,
+    navheight = props.navheight,
+    onNavHeightChange = props.onNavHeightChange;
+  (0, _react.useEffect)(function () {
+    if (onNavHeightChange) {
+      onNavHeightChange(navheight === "full");
+    }
+    return function () {
+      if (onNavHeightChange) {
+        onNavHeightChange(false);
+      }
+    };
+  }, [navheight, onNavHeightChange]);
+  return __jsx(_Box["default"], {
+    id: id,
+    component: "div",
+    sx: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className, "col-sm-".concat(columnwidth, " ").concat(navtype ? "app-nav-".concat(navtype) : "", " ").concat(navheight ? "app-nav-".concat(navheight) : ""))
+  }, render ? render(props) : children);
+};
+WmLeftPanel.displayName = "WmLeftPanel";
+
+/**
+ * The WmLeftPanel component is used to create a left navigation panel.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/layout-leftnav--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/layout-leftnav--docs)
+ *
+ * @param props - {@link WmLeftNavProps}
+ */
+var _default = exports["default"] = WmLeftPanel;

package/components/layout/leftnav/props.d.ts

@@ -0,0 +1,25 @@
+export interface LeftNavProps {
+    /**
+     * The number of columns the left panel should span.
+     * @default 2
+     */
+    columnwidth?: number | string;
+    /**
+     * The height of the navigation panel.
+     */
+    navheight?: string;
+    /**
+     * The type of the navigation panel.
+     */
+    navtype?: string;
+    /**
+     * Callback function that is called when the navigation height changes.
+     */
+    onNavHeightChange?: (isFull: boolean) => void;
+    children?: React.ReactNode;
+    className?: string;
+    styles?: React.CSSProperties;
+    id?: string;
+    render?: (props: Record<string, any>) => React.ReactNode;
+}
+export type WmLeftNavProps = LeftNavProps;

package/components/layout/leftnav/props.js

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

package/components/layout/rightnav/index.d.ts

@@ -0,0 +1,15 @@
+import { WmRightNavProps } from "./props";
+export declare const WmRightPanel: {
+    (props: WmRightNavProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The WmRightPanel component is used to create a right navigation panel.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/layout-rightnav--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/layout-rightnav--docs)
+ *
+ * @param props - {@link WmRightNavProps}
+ */
+export default WmRightPanel;

package/components/layout/rightnav/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmRightPanel = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "app-right-panel";
+var WmRightPanel = exports.WmRightPanel = function WmRightPanel(props) {
+  var styles = props.styles,
+    children = props.children,
+    render = props.render,
+    className = props.className,
+    _props$columnwidth = props.columnwidth,
+    columnwidth = _props$columnwidth === void 0 ? 2 : _props$columnwidth,
+    id = props.id;
+  return __jsx(_Box["default"], {
+    id: id,
+    sx: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className, "col-sm-".concat(columnwidth))
+  }, render ? render(props) : children);
+};
+WmRightPanel.displayName = "WmRightPanel";
+
+/**
+ * The WmRightPanel component is used to create a right navigation panel.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/layout-rightnav--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/layout-rightnav--docs)
+ *
+ * @param props - {@link WmRightNavProps}
+ */
+var _default = exports["default"] = WmRightPanel;

package/components/layout/rightnav/props.d.ts

@@ -0,0 +1,13 @@
+export interface RightNavProps {
+    /**
+     * The number of columns the right panel should span.
+     * @default 2
+     */
+    columnwidth?: number | string;
+    children?: React.ReactNode;
+    className?: string;
+    styles?: React.CSSProperties;
+    id?: string;
+    render?: (props: Record<string, any>) => React.ReactNode;
+}
+export type WmRightNavProps = RightNavProps;

package/components/layout/rightnav/props.js

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

package/components/layout/topnav/index.d.ts

@@ -0,0 +1,15 @@
+import { WmTopNavProps } from "./props";
+export declare const WmTopNav: {
+    (props: WmTopNavProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The WmTopNav component is used to create a top navigation area.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/layout-topnav--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/layout-topnav--docs)
+ *
+ * @param props - {@link WmTopNavProps}
+ */
+export default WmTopNav;

package/components/layout/topnav/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmTopNav = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "app-top-nav";
+var WmTopNav = exports.WmTopNav = function WmTopNav(props) {
+  var styles = props.styles,
+    children = props.children,
+    render = props.render,
+    className = props.className,
+    id = props.id;
+  return __jsx(_Box["default"], {
+    component: "section",
+    sx: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    id: id,
+    role: "navigation",
+    "aria-label": "Second level navigation",
+    "data-role": "page-topnav"
+  }, render ? render(props) : children);
+};
+WmTopNav.displayName = "WmTopNav";
+
+/**
+ * The WmTopNav component is used to create a top navigation area.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/layout-topnav--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/layout-topnav--docs)
+ *
+ * @param props - {@link WmTopNavProps}
+ */
+var _default = exports["default"] = WmTopNav;

package/components/layout/topnav/props.d.ts

@@ -0,0 +1,8 @@
+export interface TopNavProps {
+    children?: React.ReactNode;
+    className?: string;
+    styles?: React.CSSProperties;
+    id?: string;
+    render?: (props: Record<string, any>) => React.ReactNode;
+}
+export type WmTopNavProps = TopNavProps;

package/components/layout/topnav/props.js

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