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

package/components/data/form/form-field/props.d.ts

@@ -0,0 +1,206 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+export interface FormFieldProps {
+    /**
+     * Whether the field is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Display name of the field.
+     */
+    displayname?: string;
+    /**
+     * Type of the field.
+     */
+    type?: string;
+    /**
+     * Widget type for the field.
+     */
+    widget?: string;
+    /**
+     * Text alignment within the field.
+     */
+    textalign?: string;
+    /**
+     * Placeholder text for the field.
+     */
+    placeholder?: string;
+    /**
+     * Title of the field.
+     */
+    title?: string;
+    /**
+     * Whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * Current value of the field.
+     */
+    value?: string;
+    /**
+     * Mode of data entry.
+     */
+    dataentrymode?: string;
+    /**
+     * Debounce time for input changes.
+     */
+    debouncetime?: number;
+    /**
+     * Default value for the field.
+     */
+    defaultvalue?: string;
+    /**
+     * The underlying data field.
+     */
+    field?: string;
+    /**
+     * Filter expressions for the field.
+     */
+    filterexpressions?: string;
+    /**
+     * Generator for the field.
+     */
+    generator?: string;
+    /**
+     * Hint text for the field.
+     */
+    hint?: string;
+    /**
+     * Input type for the field.
+     */
+    inputtype?: string;
+    /**
+     * Whether this is a form field.
+     */
+    isformfield?: boolean;
+    /**
+     * Limit for field values.
+     */
+    limit?: number;
+    /**
+     * Type of lookup.
+     */
+    lookuptype?: string;
+    /**
+     * The field to use for lookups.
+     */
+    lookupfield?: string;
+    /**
+     * Match mode for filtering.
+     */
+    matchmode?: string;
+    /**
+     * Maximum default value.
+     */
+    maxdefaultvalue?: string;
+    /**
+     * Maximum placeholder text.
+     */
+    maxplaceholder?: string;
+    /**
+     * Whether to display on mobile devices.
+     */
+    mobileDisplay?: boolean;
+    /**
+     * Whether to use periodic updates.
+     */
+    period?: boolean;
+    /**
+     * Whether to display on PC.
+     */
+    pcDisplay?: boolean;
+    /**
+     * Whether this is a primary key field.
+     */
+    primaryKey?: boolean;
+    /**
+     * Name of the related entity.
+     */
+    relatedEntityName?: string;
+    /**
+     * Whether to display on tablet devices.
+     */
+    tabletDisplay?: boolean;
+    /**
+     * Validation message to display.
+     */
+    validationmessage?: string;
+    /**
+     * Widget to use in view mode.
+     */
+    viewmodewidget?: string;
+    /**
+     * The type of the widget.
+     */
+    widgettype?: string;
+    /**
+     * Property name to use for the data field.
+     */
+    datafield?: string;
+    /**
+     * Property name to use for the display field.
+     */
+    displayfield?: string;
+    /**
+     * Label for the display field.
+     */
+    displaylabel?: string;
+    /**
+     * The collection of data items for the field.
+     */
+    dataset?: any[];
+    /**
+     * Key to use for searching.
+     */
+    searchkey?: string;
+    /**
+     * Number of items to show per row.
+     */
+    itemsPerRow?: string;
+    /**
+     * Reference to the parent form.
+     */
+    formRef?: any;
+    /**
+     * Function to render the actual form fields.
+     */
+    renderFormFields?: (props: any) => React.ReactNode;
+    /**
+     * Unique ID for the field.
+     */
+    id?: string;
+    /**
+     * Position of the caption.
+     */
+    captionposition?: "left" | "right" | "top" | "floating";
+    /**
+     * The form key for this field.
+     */
+    formKey?: string;
+    /**
+     * Role of the field.
+     */
+    role?: string;
+    /**
+     * Status of when to update the field.
+     */
+    updateon?: string;
+    /**
+     * Function to update the widget's dataset.
+     */
+    updateFormWidgetDataset?: (dataset: any, displayField?: string) => void;
+    /**
+     * Function to set whether the dataset is bound.
+     */
+    setIsDataSetBound?: (isBound: boolean) => void;
+    validators?: [];
+    fieldName: string;
+    formName: string;
+    parentForm?: string;
+    destroy?: (names: string[]) => void;
+}
+/**
+ * Combined props for the WmFormField component, including base WaveMaker props.
+ */
+export type WmFormFieldProps = Prettify<FormFieldProps & BaseProps>;
+export interface FieldDataSetProps extends Pick<FormFieldProps, "dataset" | "datafield" | "displayfield" | "displaylabel" | "searchkey"> {
+}

package/components/data/form/form-field/props.js

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

package/components/data/form/form-footer/index.d.ts

@@ -0,0 +1,6 @@
+import BaseProps from "@wavemaker-ai/react-runtime/higherOrder/props";
+export declare const WmFormFooter: {
+    (props: BaseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default WmFormFooter;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmFormFooter = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+var _excluded = ["className", "children"];
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "basic-btn-grp form-action panel-footer clearfix";
+var WmFormFooter = exports.WmFormFooter = function WmFormFooter(props) {
+  var className = props.className,
+    children = props.children,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return __jsx(_Box["default"], (0, _extends2["default"])({
+    component: "div",
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className)
+  }, (0, _attr.removeInvalidAttributes)(rest)), children);
+};
+WmFormFooter.displayName = "WmFormFooter";
+var _default = exports["default"] = WmFormFooter;

package/components/data/form/form-header/index.d.ts

@@ -0,0 +1,12 @@
+import { WmFormProps } from "../props";
+type FormHeaderProps = Pick<WmFormProps, "title" | "subheading" | "iconclass" | "collapsible" | "expanded" | "headerActions" | "expandCollapsePanel" | "isViewMode">;
+declare const WmFormHeader: {
+    (props: FormHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The WmFormHeader component displays the header of a form, including title, icon, and actions.
+ *
+ * @param props - {@link FormHeaderProps}
+ */
+export default WmFormHeader;

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

@@ -0,0 +1,61 @@
+"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);
+    }
+  })))));
+};
+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;

package/components/data/form/index.d.ts

@@ -0,0 +1,4 @@
+declare const WmFormStandalone: import("react").ComponentType<import("./base-form/props").default & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
+export { WmFormStandalone as WmForm };
+declare const _default: (FormProps: import("./base-form/props").default) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/components/data/form/index.js

@@ -0,0 +1,76 @@
+"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);
+};
+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);

package/components/data/form/props.d.ts

@@ -0,0 +1,130 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+export interface FormProps {
+    /**
+     * The default mode of the form.
+     */
+    defaultmode?: "create" | "edit" | "view";
+    /**
+     * Error message to display when form submission fails.
+     */
+    errormessage?: string;
+    /**
+     * Position of the captions for form fields.
+     */
+    captionposition?: "left" | "right" | "top" | "bottom";
+    /**
+     * Title of the form.
+     */
+    title?: string;
+    /**
+     * Encoding type for the form.
+     */
+    enctype?: string;
+    /**
+     * HTTP method for form submission.
+     */
+    method?: "post" | "put" | "delete";
+    /**
+     * The alignment of the captions.
+     */
+    captionalign?: "left" | "center" | "right";
+    /**
+     * Subheading of the form.
+     */
+    subheading?: string;
+    /**
+     * CSS class for the form icon.
+     */
+    iconclass?: string;
+    /**
+     * Whether to enable autocomplete for the form.
+     */
+    autocomplete?: boolean;
+    /**
+     * Whether the form is collapsible.
+     */
+    collapsible?: boolean;
+    /**
+     * Whether the form is expanded by default (if collapsible).
+     */
+    expanded?: boolean;
+    /**
+     * Data source for the form.
+     */
+    formdatasource?: string;
+    /**
+     * Number of fields/columns in the form layout.
+     */
+    numberoffields?: number;
+    /**
+     * Type of the form.
+     */
+    formType?: string;
+    /**
+     * Whether the form is currently in view mode.
+     */
+    isViewMode?: boolean;
+    /**
+     * Whether the form is part of a layout dialog.
+     */
+    isLayoutDialog?: boolean;
+    /**
+     * Whether the form is inside a wizard component.
+     */
+    isInsideWizard?: boolean;
+    /**
+     * Type of validation to apply.
+     */
+    validationtype?: string;
+    /**
+     * The unique ID for the form.
+     */
+    id?: string;
+    /**
+     * Metadata for the form fields.
+     */
+    metadata?: any[];
+    /**
+     * Callback for form submission.
+     */
+    submit?: (e?: any) => Promise<boolean | undefined>;
+    /**
+     * Callback for resetting the form.
+     */
+    formreset?: () => Promise<void>;
+    /**
+     * Ref for the HTML form element.
+     */
+    formElementRef?: React.Ref<HTMLFormElement>;
+    /**
+     * Actions to display in the form header.
+     */
+    headerActions?: any[];
+    /**
+     * Function to handle expansion/collapse of the form.
+     */
+    expandCollapsePanel?: () => void;
+    /**
+     * Whether to show the status message.
+     */
+    showmessage?: boolean;
+    /**
+     * Layout for the status message.
+     */
+    messagelayout?: "Inline" | "Toaster";
+    /**
+     * The status message to display.
+     */
+    statusMessage?: {
+        caption?: string;
+        type?: string;
+    };
+    /**
+     * Callback to clear the status message.
+     */
+    clearMessage?: () => void;
+}
+/**
+ * Combined props for the WmForm component, including base WaveMaker props.
+ */
+export type WmFormProps = Prettify<FormProps & BaseProps>;

package/components/data/form/props.js

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

package/components/data/list/components/GroupHeader.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { GroupHeaderProps } from "./props";
+/**
+ * Group header component for grouped lists
+ */
+export declare const GroupHeader: React.FC<GroupHeaderProps>;

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

@@ -0,0 +1,35 @@
+"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", {
+      "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))));
+};

package/components/data/list/components/GroupedListItems.d.ts

@@ -0,0 +1,6 @@
+import { ListItemData } from "../props";
+import { GroupedListItemsProps } from "./props";
+/**
+ * Grouped list items renderer for grouped lists
+ */
+export declare const GroupedListItems: <T extends ListItemData = ListItemData>({ groupedData, paginatedGroupedData, direction, disableitem, itemclass, itemsPerRowClass, name, tabIndex, activeItems, collapsible, showcount, groupCollapsed, renderItem, itemTemplate, nodatamessage, onItemClick, onItemDoubleClick, onItemMouseEnter, onItemMouseLeave, onHeaderClick, itemAttrs, hasListGroupAutoLayout, standalone, }: GroupedListItemsProps<T>) => import("react/jsx-runtime").JSX.Element;