@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/input/default/checkbox/index.js

@@ -0,0 +1,362 @@
+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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, memo } from "react";
+import { Input } from "@base-ui-components/react/input";
+import Box from "@mui/material/Box";
+import { withBaseWrapper } from "../../../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../../../common/WmAppIcon";
+import withFormController from "../../../data/form/form-controller/withFormController";
+import clsx from "clsx";
+import withStandalone from "../../../../higherOrder/withStandalone";
+const DEFAULT_CLS = "app-checkbox checkbox";
+const WmCheckbox = memo(
+  (props) => {
+    var _b;
+    const _a = props, {
+      caption = "&nbsp;",
+      checkedvalue = true,
+      uncheckedvalue = false,
+      datavalue = null,
+      disabled: disabled = false,
+      hint,
+      arialabel,
+      name,
+      readonly = false,
+      required = false,
+      shortcutkey,
+      show = true,
+      tabindex = 0,
+      type,
+      selectedicon,
+      selectediconurl,
+      unselectedicon,
+      unselectediconurl,
+      onChange,
+      onBlur,
+      className,
+      listener,
+      onClick,
+      onFocus,
+      displayValue,
+      "item-id": itemId
+    } = _a, rest = __objRest(_a, [
+      "caption",
+      "checkedvalue",
+      "uncheckedvalue",
+      "datavalue",
+      // Changed default to null
+      "disabled",
+      "hint",
+      "arialabel",
+      "name",
+      "readonly",
+      "required",
+      "shortcutkey",
+      "show",
+      "tabindex",
+      "type",
+      "selectedicon",
+      "selectediconurl",
+      "unselectedicon",
+      "unselectediconurl",
+      "onChange",
+      "onBlur",
+      "className",
+      "listener",
+      "onClick",
+      "onFocus",
+      "displayValue",
+      "item-id"
+    ]);
+    const checkboxRef = useRef(null);
+    const prevRefValue = useRef(null);
+    const [actualValue, setActualValue] = React.useState(() => {
+      if (datavalue === null || datavalue === void 0) return null;
+      return datavalue === checkedvalue ? checkedvalue : uncheckedvalue;
+    });
+    const isChecked = useMemo(() => {
+      return actualValue === checkedvalue;
+    }, [actualValue, checkedvalue]);
+    useEffect(() => {
+      if (prevRefValue.current === datavalue) return;
+      if (datavalue === null || datavalue === void 0) {
+        setActualValue(null);
+      } else {
+        const isEqual = datavalue === checkedvalue || String(datavalue) === String(checkedvalue);
+        const newValue = isEqual ? checkedvalue : uncheckedvalue;
+        setActualValue(newValue);
+        prevRefValue.current = datavalue;
+      }
+    }, [datavalue, name]);
+    const handleChange = useCallback(
+      (event) => {
+        var _a2, _b2, _c;
+        const newValue = event.target.checked ? checkedvalue : uncheckedvalue;
+        setActualValue(newValue);
+        prevRefValue.current = newValue;
+        if (listener == null ? void 0 : listener.onChange) {
+          listener.onChange(itemId || props.fieldName || name, {
+            datavalue: newValue,
+            // Pass the actual value, not boolean
+            displayValue: newValue
+          });
+        }
+        if (onChange) {
+          const widgetKey = itemId || props.fieldName || name;
+          const widget = (_c = (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[widgetKey]) != null ? _c : (_b2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b2[name];
+          window == null ? void 0 : window.queueMicrotask(() => {
+            onChange(
+              event,
+              __spreadProps(__spreadValues({}, widget), { datavalue: newValue, displayValue: newValue }),
+              newValue,
+              actualValue != null ? actualValue : uncheckedvalue
+            );
+          });
+        }
+      },
+      [checkedvalue, uncheckedvalue, onChange, listener, name, itemId, props.fieldName, actualValue]
+    );
+    const handleBlur = useCallback(
+      (event) => {
+        onBlur == null ? void 0 : onBlur(event, listener == null ? void 0 : listener.Widgets[itemId || name]);
+      },
+      [onBlur]
+    );
+    const handleFocus = useCallback(
+      (event) => {
+        onFocus == null ? void 0 : onFocus(event, listener == null ? void 0 : listener.Widgets[itemId || name]);
+      },
+      [onFocus]
+    );
+    const handleKeyDown = useCallback((event) => {
+      var _a2;
+      if (disabled || readonly) {
+        return;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        (_a2 = checkboxRef.current) == null ? void 0 : _a2.click();
+      }
+    }, []);
+    const handleClick = (event) => {
+      if (disabled || readonly) {
+        return;
+      }
+      const newValue = event.target.checked ? checkedvalue : uncheckedvalue;
+      if (listener == null ? void 0 : listener.onChange) {
+        listener.onChange(name, {
+          datavalue: newValue,
+          // Pass the actual value
+          displayValue: newValue
+        });
+      }
+      if (onClick) {
+        onClick(event, listener == null ? void 0 : listener.Widgets[itemId || name], newValue, actualValue);
+      }
+    };
+    const checkboxClasses = [
+      type === "button" ? "app-iconbutton-toggle" : DEFAULT_CLS,
+      type === "toggle" ? "app-toggle" : "",
+      !isChecked ? "unchecked" : "",
+      disabled || readonly ? "disabled" : "",
+      required && caption ? "required" : "",
+      className || ""
+    ].filter(Boolean).join(" ");
+    const handleMouseEnter = (event) => {
+      if (props.onMouseEnter) {
+        props.onMouseEnter(
+          event,
+          props,
+          displayValue,
+          actualValue
+        );
+      }
+    };
+    const handleMouseLeave = (event) => {
+      if (props.onMouseLeave) {
+        props.onMouseLeave(
+          event,
+          props,
+          displayValue,
+          actualValue
+        );
+      }
+    };
+    const events = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, props.onMouseEnter ? { onMouseEnter: handleMouseEnter } : {}), props.onMouseLeave ? { onMouseLeave: handleMouseLeave } : {}), props.onClick ? { onClick: handleClick } : {}), props.onFocus ? { onFocus: handleFocus } : {});
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({
+        hidden: (_b = props.hidden) != null ? _b : false,
+        className: checkboxClasses
+      }, name ? { name } : {}), caption ? { caption } : {}), type === "toggle" ? { type: "toggle" } : type === "button" ? { type: "button" } : {}), {
+        "aria-disabled": disabled
+      }), disabled ? { disabled: "true" } : {}), {
+        style: props.styles
+      }), disabled ? { disabled: "true" } : {}), {
+        children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              component: "label",
+              className: clsx(
+                "wm-checkbox-label",
+                !isChecked && "unchecked",
+                (disabled || readonly) && "disabled",
+                required && caption && "required",
+                type === "button" && "icon-button-toggle"
+              ),
+              onKeyDown: handleKeyDown,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, events), {
+                    type: "checkbox",
+                    ref: checkboxRef,
+                    "aria-readonly": readonly,
+                    checked: isChecked
+                  }), !readonly && !disabled ? { onChange: handleChange, onClick: handleClick } : {}), {
+                    onBlur: handleBlur,
+                    disabled,
+                    required,
+                    name,
+                    "aria-label": arialabel,
+                    accessKey: shortcutkey,
+                    tabIndex: tabindex,
+                    title: hint,
+                    className: `${disabled || readonly ? "disabled" : ""}`,
+                    id: name
+                  })
+                ),
+                type === "toggle" ? /* @__PURE__ */ jsx(Box, { component: "span", className: "caption fa-xs text-center", children: !isChecked ? /* @__PURE__ */ jsx(
+                  WmAppIcon,
+                  {
+                    iconclass: unselectedicon,
+                    iconurl: unselectediconurl,
+                    prefabName: props.prefabName,
+                    defaultIconClass: "start-icon"
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  WmAppIcon,
+                  {
+                    iconclass: selectedicon,
+                    iconurl: selectediconurl,
+                    prefabName: props.prefabName,
+                    defaultIconClass: "end-icon"
+                  }
+                ) }) : type === "button" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  !isChecked && /* @__PURE__ */ jsx(
+                    WmAppIcon,
+                    {
+                      iconclass: unselectedicon,
+                      iconurl: unselectediconurl,
+                      prefabName: props.prefabName,
+                      defaultClasses: "toggle-icon",
+                      alt: "Unselected icon"
+                    }
+                  ),
+                  isChecked && /* @__PURE__ */ jsx(
+                    WmAppIcon,
+                    {
+                      iconclass: selectedicon,
+                      iconurl: selectediconurl,
+                      prefabName: props.prefabName,
+                      defaultClasses: "toggle-icon",
+                      alt: "Selected icon"
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "span",
+                    className: "caption",
+                    dangerouslySetInnerHTML: { __html: caption }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "img",
+                    alt: "Checkbox Image",
+                    "aria-hidden": "true",
+                    src: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
+                    className: "switch",
+                    width: "auto",
+                    height: "auto"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "hidden",
+              className: "ng-hide model-holder",
+              "aria-hidden": "true",
+              tabIndex: -1,
+              disabled,
+              value: actualValue === null || actualValue === void 0 ? "false" : String(actualValue)
+            }
+          )
+        ]
+      })
+    );
+  },
+  (prev, next) => {
+    const keys = [
+      "datavalue",
+      "checkedvalue",
+      "uncheckedvalue",
+      "disabled",
+      "readonly",
+      "required",
+      "shortcutkey",
+      "show",
+      "tabindex",
+      "type",
+      "selectedicon",
+      "unselectedicon",
+      "className",
+      "hidden"
+    ];
+    return keys.every((key) => prev[key] === next[key]);
+  }
+);
+WmCheckbox.displayName = "WmCheckbox";
+const WithFormController = withFormController(WmCheckbox);
+const WmCheckboxStandalone = withStandalone(WithFormController);
+var checkbox_default = withBaseWrapper(WithFormController);
+export {
+  WmCheckboxStandalone as WmCheckbox,
+  checkbox_default as default
+};

package/components/input/default/checkbox/props.d.ts

@@ -0,0 +1,86 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Props specific to the WmCheckbox component.
+ */
+export interface CheckboxProps {
+    /**
+     * Label text displayed alongside the checkbox.
+     */
+    caption?: string;
+    /**
+     * The value used when the checkbox is checked.
+     */
+    checkedvalue?: string | boolean | number;
+    /**
+     * The value used when the checkbox is unchecked.
+     */
+    uncheckedvalue?: string | boolean | number;
+    /**
+     * The current data value of the checkbox.
+     */
+    datavalue?: string | boolean | number;
+    /**
+     * Whether the checkbox is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The unique name of the checkbox widget (required).
+     */
+    name: string;
+    /**
+     * Whether the checkbox is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Whether the checkbox is required.
+     */
+    required?: boolean;
+    /**
+     * Keyboard shortcut key to toggle the checkbox.
+     */
+    shortcutkey?: string;
+    /**
+     * The type of the underlying input.
+     */
+    type?: string;
+    /**
+     * Callback invoked when the checkbox value changes.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | undefined, widget: Record<string, unknown>, newVal: string | number | boolean, oldVal: string | number | boolean) => void;
+    /**
+     * Callback invoked when the checkbox is clicked.
+     */
+    onClick?: (event?: React.MouseEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>, widget?: Record<string, unknown>, newVal?: string | number | boolean | null, oldVal?: string | number | boolean | null) => void;
+    /**
+     * Callback invoked when the checkbox receives focus.
+     */
+    onFocus?: (event: React.FocusEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>, widget?: Record<string, unknown>, newVal?: string | number | boolean | null, oldVal?: string | number | boolean | null) => void;
+    /**
+     * Formatted display value.
+     */
+    displayValue?: string;
+    /**
+     * CSS class for the selected state icon.
+     */
+    selectedicon?: string;
+    /**
+     * URL for the selected state icon.
+     */
+    selectediconurl?: string;
+    /**
+     * CSS class for the unselected state icon.
+     */
+    unselectedicon?: string;
+    /**
+     * URL for the unselected state icon.
+     */
+    unselectediconurl?: string;
+    /**
+     * Field name used by the form controller.
+     */
+    fieldName?: string;
+}
+/**
+ * Combined props for the WmCheckbox component, including base WaveMaker props.
+ */
+export type WmCheckboxProps = Prettify<CheckboxProps & BaseProps>;

package/components/input/default/checkboxset/index.d.ts

@@ -0,0 +1,199 @@
+import React from "react";
+import { DatasetItem, GroupedDataset } from "./props";
+declare const WmCheckboxsetStandalone: React.ComponentType<import("../../../data/form/form-controller/props").WithFormControllerProps & {
+    layout?: "inline" | "stacked";
+    itemclass?: string;
+    listclass?: string;
+    showcount?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    type?: "button" | "submit" | "reset";
+    dataset?: any;
+    datafield?: string;
+    displayfield?: string;
+    getDisplayExpression?: (data: Record<string, unknown>) => string;
+    datavalue?: any;
+    usekeys?: boolean;
+    groupby?: string;
+    match?: string;
+    orderby?: string;
+    name: string;
+    onClick?: ((event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>, widget?: Record<string, unknown>, newVal?: string | number | null, oldVal?: string | number | null) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.SyntheticEvent, widget: Record<string, unknown>, value: unknown[] | unknown, target: Record<string, unknown>) => void;
+    onMouseEnter?: ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, unknown>, newVal?: string | number | null, oldVal?: string | number | null) => void) & ((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, unknown>, newVal?: string | number | null, oldVal?: string | number | null) => void) & ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    required?: boolean;
+    label?: string;
+    collapsed?: boolean;
+    collapsible?: boolean;
+    compareby?: string[];
+    datasetItems?: DatasetItem[];
+    selectedItems?: DatasetItem[];
+    transformFormData?: (containerWidget: Record<string, unknown>, dataset: DatasetItem[], options: Record<string, unknown>) => DatasetItem[];
+    groupedData?: GroupedDataset[];
+    onchange?: (value: unknown) => void;
+    onblur?: () => void;
+    validation?: Record<string, unknown>;
+    isDestroyed?: boolean;
+    height: string | number;
+    width: string | number;
+    dataPath?: string;
+    itemsperrow?: string;
+    tabIndex?: number;
+    displayValue?: string;
+    fieldName?: string;
+    content?: string;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onDoubleClick?: (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;
+    id?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+} & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
+export { WmCheckboxsetStandalone as WmCheckboxset };
+/**
+ * The WmCheckboxset component provides a group of checkboxes with dataset binding and grouping support.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-checkboxset--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-checkboxset--docs)
+ *
+ * @param props - {@link WmCheckboxsetProps}
+ */
+declare const _default: React.ComponentType<{
+    [x: string]: any;
+    standalone?: boolean;
+    formRef?: any;
+    formKey?: string;
+    name: string;
+    datavalue?: any;
+    defaultvalue?: any;
+    validators?: import("../../../data/form/form-controller/props").ValidatorConfig[];
+    asyncValidators?: import("../../../data/form/form-controller/props").ValidatorConfig[];
+    required?: boolean;
+    maxchars?: number;
+    regexp?: string | RegExp;
+    validationmessage?: string;
+    hint?: string;
+    type?: "reset" | "submit" | "button";
+    observe?: string[];
+    onBlur?: ((e: any) => void) & ((event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    layout?: "inline" | "stacked";
+    itemclass?: string;
+    listclass?: string;
+    showcount?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    dataset?: any;
+    datafield?: string;
+    displayfield?: string;
+    getDisplayExpression?: (data: Record<string, unknown>) => string;
+    usekeys?: boolean;
+    groupby?: string;
+    match?: string;
+    orderby?: string;
+    onClick?: ((event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>, widget?: Record<string, unknown>, newVal?: string | number | null, oldVal?: string | number | null) => void) & ((event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.SyntheticEvent, widget: Record<string, unknown>, value: unknown[] | unknown, target: Record<string, unknown>) => void;
+    onMouseEnter?: ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, unknown>, newVal?: string | number | null, oldVal?: string | number | null) => void) & ((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, unknown>, newVal?: string | number | null, oldVal?: string | number | null) => void) & ((event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    label?: string;
+    collapsed?: boolean;
+    collapsible?: boolean;
+    compareby?: string[];
+    datasetItems?: DatasetItem[];
+    selectedItems?: DatasetItem[];
+    transformFormData?: (containerWidget: Record<string, unknown>, dataset: DatasetItem[], options: Record<string, unknown>) => DatasetItem[];
+    groupedData?: GroupedDataset[];
+    onchange?: (value: unknown) => void;
+    onblur?: () => void;
+    validation?: Record<string, unknown>;
+    isDestroyed?: boolean;
+    height: string | number;
+    width: string | number;
+    dataPath?: string;
+    itemsperrow?: string;
+    tabIndex?: number;
+    displayValue?: string;
+    fieldName?: string;
+    content?: string;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onDoubleClick?: (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;
+    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);
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>;
+export default _default;