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

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

@@ -0,0 +1,253 @@
+"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.WmCheckbox = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _input = require("@base-ui-components/react/input");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
+var _excluded = ["caption", "checkedvalue", "uncheckedvalue", "datavalue", "disabled", "hint", "arialabel", "name", "readonly", "required", "shortcutkey", "show", "tabindex", "type", "selectedicon", "unselectedicon", "onChange", "onBlur", "className", "listener", "onClick", "onFocus", "displayValue"];
+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;
+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 DEFAULT_CLS = "app-checkbox checkbox";
+var WmCheckbox = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$hidden;
+  var _props$caption = props.caption,
+    caption = _props$caption === void 0 ? "&nbsp;" : _props$caption,
+    _props$checkedvalue = props.checkedvalue,
+    checkedvalue = _props$checkedvalue === void 0 ? true : _props$checkedvalue,
+    _props$uncheckedvalue = props.uncheckedvalue,
+    uncheckedvalue = _props$uncheckedvalue === void 0 ? false : _props$uncheckedvalue,
+    _props$datavalue = props.datavalue,
+    datavalue = _props$datavalue === void 0 ? null : _props$datavalue,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    hint = props.hint,
+    arialabel = props.arialabel,
+    name = props.name,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    shortcutkey = props.shortcutkey,
+    _props$show = props.show,
+    show = _props$show === void 0 ? true : _props$show,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    type = props.type,
+    selectedicon = props.selectedicon,
+    unselectedicon = props.unselectedicon,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    className = props.className,
+    listener = props.listener,
+    onClick = props.onClick,
+    onFocus = props.onFocus,
+    displayValue = props.displayValue,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var checkboxRef = (0, _react.useRef)(null);
+  var prevRefValue = (0, _react.useRef)(null);
+
+  // Keep track of the actual value (not just boolean state)
+  var _React$useState = _react["default"].useState(function () {
+      // Initialize with null/undefined when datavalue is null/undefined
+      if (datavalue === null || datavalue === undefined) return null;
+      return datavalue === checkedvalue ? checkedvalue : uncheckedvalue;
+    }),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    actualValue = _React$useState2[0],
+    setActualValue = _React$useState2[1];
+
+  // Determine if checkbox should be visually checked
+  var isChecked = (0, _react.useMemo)(function () {
+    // Only check if actualValue explicitly matches checkedvalue
+    return actualValue === checkedvalue;
+  }, [actualValue, checkedvalue]);
+
+  // Update actual value when datavalue prop changes
+  (0, _react.useEffect)(function () {
+    if (prevRefValue.current === datavalue) return;
+    if (datavalue === null || datavalue === undefined) {
+      setActualValue(null);
+    } else {
+      var isEqual = datavalue === checkedvalue || String(datavalue) === String(checkedvalue);
+      var newValue = isEqual ? checkedvalue : uncheckedvalue;
+      setActualValue(newValue);
+      prevRefValue.current = datavalue;
+    }
+  }, [datavalue]);
+  var handleChange = (0, _react.useCallback)(function (event) {
+    // Determine the new actual value based on checkbox state
+    var newValue = event.target.checked ? checkedvalue : uncheckedvalue;
+
+    // Update our internal state with the actual value
+    setActualValue(newValue);
+    prevRefValue.current = newValue;
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(props.fieldName || name, {
+        datavalue: newValue,
+        // Pass the actual value, not boolean
+        displayValue: newValue
+      });
+    }
+    if (onChange) {
+      var _window;
+      (_window = window) === null || _window === void 0 || _window.queueMicrotask(function () {
+        // Pass the actual value in the onChange callback
+        onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], newValue, actualValue !== null && actualValue !== void 0 ? actualValue : uncheckedvalue);
+      });
+    }
+  }, [checkedvalue, uncheckedvalue, onChange, listener, name, actualValue]);
+  var handleBlur = (0, _react.useCallback)(function (event) {
+    onBlur === null || onBlur === void 0 || onBlur(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+  }, [onBlur]);
+  var handleFocus = (0, _react.useCallback)(function (event) {
+    onFocus === null || onFocus === void 0 || onFocus(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+  }, [onFocus]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (disabled || readonly) {
+      return;
+    }
+    if (event.key === "Enter") {
+      var _checkboxRef$current;
+      event.preventDefault();
+      (_checkboxRef$current = checkboxRef.current) === null || _checkboxRef$current === void 0 || _checkboxRef$current.click();
+    }
+  }, []);
+  var handleClick = function handleClick(event) {
+    // Determine the new actual value based on checkbox state
+    if (disabled || readonly) {
+      return;
+    }
+    var newValue = event.target.checked ? checkedvalue : uncheckedvalue;
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, {
+        datavalue: newValue,
+        // Pass the actual value
+        displayValue: newValue
+      });
+    }
+    if (onClick) {
+      // Pass the actual value in the onClick callback
+      onClick(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], newValue, actualValue);
+    }
+  };
+  var checkboxClasses = [type === "button" ? "app-iconbutton-toggle" : DEFAULT_CLS, type === "toggle" ? "app-toggle" : "", !isChecked ? "unchecked" : "", disabled || readonly ? "disabled" : "", required && caption ? "required" : "", className || ""].filter(Boolean).join(" ");
+  var handleMouseEnter = function handleMouseEnter(event) {
+    if (props.onMouseEnter) {
+      props.onMouseEnter(event, props, displayValue, actualValue);
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave(event) {
+    if (props.onMouseLeave) {
+      props.onMouseLeave(event, props, displayValue, actualValue);
+    }
+  };
+  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props.onMouseEnter ? {
+    onMouseEnter: handleMouseEnter
+  } : {}), props.onMouseLeave ? {
+    onMouseLeave: handleMouseLeave
+  } : {}), props.onClick ? {
+    onClick: handleClick
+  } : {}), props.onFocus ? {
+    onFocus: handleFocus
+  } : {});
+  return __jsx("div", (0, _extends2["default"])({
+    hidden: (_props$hidden = props.hidden) !== null && _props$hidden !== void 0 ? _props$hidden : false,
+    className: checkboxClasses
+  }, name ? {
+    name: name
+  } : {}, caption ? {
+    caption: caption
+  } : {}, type === "toggle" ? {
+    type: "toggle"
+  } : type === "button" ? {
+    type: "button"
+  } : {}, {
+    "aria-disabled": disabled,
+    style: props.styles
+  }), __jsx(_Box["default"], {
+    component: "label",
+    className: (0, _clsx["default"])("wm-checkbox-label", !isChecked && "unchecked", (disabled || readonly) && "disabled", required && caption && "required", type === "button" && "icon-button-toggle"),
+    onKeyDown: handleKeyDown
+  }, __jsx(_input.Input, (0, _extends2["default"])({}, events, {
+    type: "checkbox",
+    ref: checkboxRef,
+    "aria-readonly": readonly,
+    checked: isChecked // Use the computed isChecked value
+  }, !readonly && !disabled ? {
+    onChange: handleChange,
+    onClick: handleClick
+  } : {}, {
+    onBlur: handleBlur,
+    disabled: disabled,
+    required: required,
+    name: name,
+    "aria-label": arialabel,
+    accessKey: shortcutkey,
+    tabIndex: tabindex,
+    title: hint,
+    className: "".concat(disabled || readonly ? "disabled" : "")
+  })), type === "toggle" ? __jsx(_Box["default"], {
+    component: "span",
+    className: "caption fa-xs text-center"
+  }, __jsx(_Box["default"], {
+    component: "span",
+    className: (0, _clsx["default"])(isChecked ? "end-icon" : "start-icon", isChecked ? selectedicon : unselectedicon)
+  })) : type === "button" ? __jsx(_Box["default"], {
+    component: "span",
+    className: (0, _clsx["default"])("toggle-icon", isChecked ? selectedicon : unselectedicon)
+  }) : __jsx(_Box["default"], {
+    component: "span",
+    className: "caption",
+    dangerouslySetInnerHTML: {
+      __html: caption
+    }
+  }), __jsx(_Box["default"], {
+    component: "img",
+    alt: "Checkbox Image",
+    "aria-hidden": "true",
+    src: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
+    className: "switch",
+    width: "auto",
+    height: "auto"
+  })), __jsx(_input.Input, {
+    type: "hidden",
+    className: "ng-hide model-holder",
+    "aria-hidden": "true",
+    tabIndex: -1,
+    disabled: disabled,
+    value: actualValue === null || actualValue === undefined ? "false" : String(actualValue) // Handle null/undefined values
+  }));
+}, function (prev, next) {
+  var keys = ["datavalue", "checkedvalue", "uncheckedvalue", "disabled", "readonly", "required", "shortcutkey", "show", "tabindex", "type", "selectedicon", "unselectedicon", "className", "hidden"];
+  return keys.every(function (key) {
+    return prev[key] === next[key];
+  });
+});
+WmCheckbox.displayName = "WmCheckbox";
+var WithFormController = (0, _withFormController["default"])(WmCheckbox);
+var WmCheckboxStandalone = exports.WmCheckbox = (0, _withStandalone["default"])(WithFormController);
+/**
+ * The WmCheckbox component provides a single checkbox input with customizable checked/unchecked values.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-checkbox--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-checkbox--docs)
+ *
+ * @param props - {@link WmCheckboxProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithFormController);

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

@@ -0,0 +1,78 @@
+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;
+    /**
+     * CSS class for the unselected state icon.
+     */
+    unselectedicon?: 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/checkbox/props.js

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

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

@@ -0,0 +1,191 @@
+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;
+    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;
+} & 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;
+    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;
+}>;
+export default _default;