@gnwebsoft/ui 2.18.24 → 2.18.26

package/dist/index.mjs

@@ -8,12 +8,12 @@ import {
   ListWrapper_default,
   SimpleButton_default,
   SimpleToolbar_default
-} from "./chunk-LSE3T3FT.mjs";
+} from "./chunk-N3AI2OIO.mjs";
 import "./chunk-2JFL7TS5.mjs";
 import "./chunk-EVPUCTZA.mjs";
 import {
   Field_default
-} from "./chunk-MZEAU4RQ.mjs";
+} from "./chunk-CCZOV6WK.mjs";
 import {
   useTransform
 } from "./chunk-GFSTK7KN.mjs";
@@ -28,10 +28,1432 @@ import {
   removeLeadingTrailingSlashes,
   schemaTools
 } from "./chunk-AVNKSUE5.mjs";
+
+// src/wrappers2/DatePickerElement/DatePickerElement.tsx
+import {
+  useController
+} from "react-hook-form";
+import { Grid2, useForkRef } from "@mui/material";
+import {
+  DatePicker
+} from "@mui/x-date-pickers";
+import { useLocalizationContext } from "@mui/x-date-pickers/internals";
+import { jsx } from "react/jsx-runtime";
+var Component = function DatePickerElement(props) {
+  const {
+    parseError,
+    name,
+    required,
+    rules = {},
+    inputProps,
+    control,
+    textReadOnly,
+    label,
+    placeholder,
+    gridProps,
+    slotProps,
+    transform,
+    datePickerProps = {},
+    ...rest
+  } = props;
+  const adapter = useLocalizationContext();
+  const { disabled, inputRef, onClose, ...restDatePickerProps } = datePickerProps;
+  const {
+    field,
+    fieldState: { error }
+  } = useController({
+    name,
+    control,
+    disabled,
+    defaultValue: null
+  });
+  const { value, onChange } = useTransform({
+    value: field.value,
+    onChange: field.onChange,
+    transform: {
+      input: typeof transform?.input === "function" ? transform.input : (newValue) => readValueAsDate(adapter, newValue),
+      output: typeof transform?.output === "function" ? transform.output : (newValue) => newValue
+    }
+  });
+  const handleInputRef = useForkRef(field.ref, inputRef);
+  return /* @__PURE__ */ jsx(
+    DatePicker,
+    {
+      ...rest,
+      ...restDatePickerProps,
+      ...field,
+      value,
+      label,
+      ...datePickerProps,
+      inputRef: handleInputRef,
+      onClose: (...args) => {
+        field.onBlur();
+        if (onClose) {
+          onClose(...args);
+        }
+      },
+      onChange: (newValue, context) => {
+        onChange(newValue, context);
+        if (typeof datePickerProps.onChange === "function") {
+          datePickerProps.onChange(newValue, context);
+        }
+      },
+      sx: {
+        "& .MuiInputBase-input": {
+          cursor: disabled ? "not-allowed" : "default"
+        },
+        bgcolor: disabled ? "#EEF1F5" : "transparent"
+      },
+      slotProps: {
+        ...slotProps,
+        textField: {
+          ...inputProps,
+          required,
+          placeholder,
+          fullWidth: true,
+          onBlur: (event) => {
+            field.onBlur();
+            if (typeof inputProps?.onBlur === "function") {
+              inputProps.onBlur(event);
+            }
+          },
+          error: !!error,
+          helperText: error ? error.message : inputProps?.helperText || rest.helperText,
+          inputProps: {
+            readOnly: !!textReadOnly,
+            ...inputProps?.inputProps
+          }
+        }
+      }
+    }
+  );
+};
+var DatePickerElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ jsx(Grid2, { ...gridProps, children: /* @__PURE__ */ jsx(Component, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx(Component, { ...props });
+};
+DatePickerElement2.displayName = "DatePickerElement";
+var DatePickerElement_default = DatePickerElement2;
+
+// src/wrappers2/PasswordElement/PasswordElement.tsx
+import { useState } from "react";
+import {
+  IconButton,
+  InputAdornment,
+  TextField,
+  useForkRef as useForkRef2,
+  Grid2 as Grid22
+} from "@mui/material";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import {
+  useController as useController2
+} from "react-hook-form";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Component2 = function PasswordEl(props) {
+  const {
+    type,
+    required,
+    iconColor,
+    renderIcon = (password2) => password2 ? /* @__PURE__ */ jsx2(Visibility, {}) : /* @__PURE__ */ jsx2(VisibilityOff, {}),
+    slotProps,
+    name,
+    control,
+    component: TextFieldComponent = TextField,
+    inputRef,
+    onBlur,
+    ...rest
+  } = props;
+  const [password, setPassword] = useState(true);
+  const endAdornment = /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx2(
+    IconButton,
+    {
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: () => setPassword(!password),
+      tabIndex: -1,
+      color: iconColor ?? "default",
+      children: renderIcon(password)
+    }
+  ) });
+  const {
+    field,
+    fieldState: { error }
+  } = useController2({
+    name,
+    control
+  });
+  const handleInputRef = useForkRef2(field.ref, inputRef);
+  return /* @__PURE__ */ jsx2(
+    TextField,
+    {
+      ...rest,
+      inputRef: handleInputRef,
+      type: password ? "password" : "text",
+      value: field.value,
+      fullWidth: true,
+      onChange: (event) => {
+        field.onChange(event);
+        if (typeof rest.onChange === "function") {
+          rest.onChange(event);
+        }
+      },
+      onBlur: (event) => {
+        field.onBlur();
+        if (typeof onBlur === "function") {
+          onBlur(event);
+        }
+      },
+      ...typeof slotProps === "undefined" ? {
+        InputProps: {
+          endAdornment
+        }
+      } : {
+        slotProps: {
+          ...slotProps,
+          input: {
+            endAdornment,
+            ...slotProps?.input
+          }
+        }
+      },
+      error: !!error,
+      helperText: error ? error.message : ""
+    }
+  );
+};
+var PasswordElement = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ jsx2(Grid22, { ...gridProps, children: /* @__PURE__ */ jsx2(Component2, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx2(Component2, { ...props });
+};
+PasswordElement.displayName = "PasswordElement";
+var PasswordElement_default = PasswordElement;
+
+// src/wrappers2/RadioButtonGroup/RadioButtonGroup.tsx
+import {
+  useController as useController3
+} from "react-hook-form";
+import {
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  useTheme,
+  Grid2 as Grid23
+} from "@mui/material";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+var Component3 = function RadioButtonGroup(props) {
+  const {
+    helperText,
+    options,
+    label,
+    name,
+    parseError,
+    labelKey = "label",
+    valueKey = "id",
+    disabledKey = "disabled",
+    required,
+    emptyOptionLabel,
+    returnObject,
+    row,
+    control,
+    type,
+    labelProps,
+    disabled,
+    formLabelProps,
+    radioProps,
+    transform,
+    rules = {},
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const {
+    field,
+    fieldState: { error }
+  } = useController3({
+    name,
+    disabled,
+    control
+  });
+  const { value, onChange } = useTransform({
+    value: field.value,
+    onChange: field.onChange,
+    transform: {
+      input: typeof transform?.input === "function" ? transform.input : (value2) => {
+        return value2 || "";
+      },
+      output: typeof transform?.output === "function" ? transform?.output : (_event, value2) => {
+        if (value2 && type === "number") {
+          return Number(value2);
+        }
+        return value2;
+      }
+    }
+  });
+  const onRadioChange = (event, radioValue) => {
+    const returnValue = returnObject ? options.find((items) => items[valueKey] === radioValue) : radioValue;
+    onChange(event, returnValue);
+    if (typeof rest.onChange === "function") {
+      rest.onChange(returnValue);
+    }
+  };
+  return /* @__PURE__ */ jsxs(FormControl, { error: !!error, children: [
+    label && /* @__PURE__ */ jsx3(FormLabel, { ...formLabelProps, required, error: !!error, children: label }),
+    /* @__PURE__ */ jsxs(RadioGroup, { onChange: onRadioChange, name, row, value, children: [
+      emptyOptionLabel && /* @__PURE__ */ jsx3(
+        FormControlLabel,
+        {
+          ...labelProps,
+          control: /* @__PURE__ */ jsx3(
+            Radio,
+            {
+              ...radioProps,
+              sx: {
+                color: error ? theme.palette.error.main : void 0
+              },
+              checked: !value
+            }
+          ),
+          label: emptyOptionLabel,
+          value: ""
+        }
+      ),
+      options.map((option) => {
+        const optionKey = option[valueKey];
+        const optionDisabled = option[disabledKey] || false;
+        if (optionKey === void 0) {
+          console.error(
+            `RadioButtonGroup: valueKey ${valueKey} does not exist on option`,
+            option
+          );
+        }
+        let val = returnObject ? value?.[valueKey] : value;
+        if (type === "number") {
+          val = Number(val);
+        }
+        const isChecked = val === optionKey;
+        return /* @__PURE__ */ createElement(
+          FormControlLabel,
+          {
+            ...labelProps,
+            control: /* @__PURE__ */ jsx3(
+              Radio,
+              {
+                ...radioProps,
+                sx: {
+                  color: error ? theme.palette.error.main : void 0
+                },
+                disabled: disabled || optionDisabled,
+                checked: isChecked
+              }
+            ),
+            value: optionKey,
+            label: option[labelKey],
+            key: optionKey
+          }
+        );
+      })
+    ] }),
+    error && /* @__PURE__ */ jsx3(FormHelperText, { children: error.message })
+  ] });
+};
+var RadioButtonGroup2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ jsx3(Grid23, { ...gridProps, children: /* @__PURE__ */ jsx3(Component3, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx3(Component3, { ...props });
+};
+RadioButtonGroup2.displayName = "RadioButtonGroup";
+var RadioButtonGroup_default = RadioButtonGroup2;
+
+// src/wrappers2/TextFieldElement/TextFieldElement.tsx
+import {
+  Grid2 as Grid24,
+  TextField as TextField2,
+  useForkRef as useForkRef3
+} from "@mui/material";
+import {
+  useController as useController4
+} from "react-hook-form";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Component4 = function TextFieldElement(props) {
+  const {
+    rules = {},
+    parseError,
+    name,
+    control,
+    component: TextFieldComponent = TextField2,
+    gridProps,
+    transform,
+    label,
+    placeholder,
+    textFieldProps = {},
+    ...rest
+  } = props;
+  const {
+    type,
+    required,
+    helperText,
+    inputRef,
+    onBlur,
+    disabled,
+    ...restTextProps
+  } = textFieldProps;
+  const {
+    field,
+    fieldState: { error }
+  } = useController4({
+    name,
+    control,
+    disabled
+  });
+  const { value, onChange } = useTransform({
+    value: field.value,
+    onChange: field.onChange,
+    transform: {
+      input: typeof transform?.input === "function" ? transform.input : (value2) => {
+        return value2 ?? "";
+      },
+      output: typeof transform?.output === "function" ? transform.output : (event) => {
+        const value2 = event.target.value;
+        if (type !== "number") {
+          return value2;
+        }
+        if (value2 === "") {
+          return null;
+        }
+        if (value2 == null) {
+          return value2;
+        }
+        return Number(value2);
+      }
+    }
+  });
+  const handleInputRef = useForkRef3(field.ref, inputRef);
+  return /* @__PURE__ */ jsx4(
+    TextFieldComponent,
+    {
+      ...rest,
+      ...restTextProps,
+      name: field.name,
+      value,
+      onChange: (event) => {
+        field.onChange(event);
+        if (typeof onChange === "function") {
+          onChange(event);
+        }
+      },
+      onBlur: (event) => {
+        field.onBlur();
+        if (typeof onBlur === "function") {
+          onBlur(event);
+        }
+      },
+      disabled,
+      label,
+      placeholder,
+      fullWidth: true,
+      required,
+      type,
+      error: !!error,
+      helperText: error ? error.message : helperText,
+      inputRef: handleInputRef,
+      size: "small",
+      sx: {
+        "& .MuiInputBase-input": {
+          cursor: disabled ? "not-allowed" : "default"
+        },
+        bgcolor: disabled ? "#EEF1F5" : "transparent"
+      }
+    }
+  );
+};
+var TextFieldElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ jsx4(Grid24, { ...gridProps, children: /* @__PURE__ */ jsx4(Component4, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx4(Component4, { ...props });
+};
+TextFieldElement2.displayName = "TextFieldElement";
+var TextFieldElement_default = TextFieldElement2;
+
+// src/wrappers2/TimePickerElement/TimePickerElement.tsx
+import {
+  TimePicker
+} from "@mui/x-date-pickers";
+import {
+  useController as useController5
+} from "react-hook-form";
+import { useForkRef as useForkRef4, Grid2 as Grid25 } from "@mui/material";
+import { useLocalizationContext as useLocalizationContext2 } from "@mui/x-date-pickers/internals";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Component5 = function TimePickerElement(props) {
+  const {
+    parseError,
+    name,
+    required,
+    rules = {},
+    inputProps,
+    control,
+    textReadOnly,
+    slotProps,
+    inputRef,
+    transform,
+    ...rest
+  } = props;
+  const adapter = useLocalizationContext2();
+  const {
+    field,
+    fieldState: { error }
+  } = useController5({
+    name,
+    control,
+    disabled: rest.disabled,
+    defaultValue: null
+  });
+  const { value, onChange } = useTransform({
+    value: field.value,
+    onChange: field.onChange,
+    transform: {
+      input: typeof transform?.input === "function" ? transform.input : (newValue) => readValueAsDate(adapter, newValue),
+      output: typeof transform?.output === "function" ? transform.output : (newValue) => newValue
+    }
+  });
+  const handleInputRef = useForkRef4(field.ref, inputRef);
+  return /* @__PURE__ */ jsx5(
+    TimePicker,
+    {
+      ...rest,
+      ...field,
+      value,
+      inputRef: handleInputRef,
+      onClose: (...args) => {
+        field.onBlur();
+        if (rest.onClose) {
+          rest.onClose(...args);
+        }
+      },
+      onChange: (value2, context) => {
+        onChange(value2, context);
+        if (typeof rest.onChange === "function") {
+          rest.onChange(value2, context);
+        }
+      },
+      slotProps: {
+        ...slotProps,
+        textField: {
+          ...inputProps,
+          required,
+          fullWidth: true,
+          error: !!error,
+          helperText: error ? error.message : inputProps?.helperText || rest.helperText,
+          inputProps: {
+            readOnly: textReadOnly,
+            ...inputProps?.inputProps
+          }
+        }
+      }
+    }
+  );
+};
+var TimePickerElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ jsx5(Grid25, { ...gridProps, children: /* @__PURE__ */ jsx5(Component5, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx5(Component5, { ...props });
+};
+TimePickerElement2.displayName = "TimePickerElement";
+var TimePickerElement_default = TimePickerElement2;
+
+// src/wrappers2/AsyncSelect/AsyncSelect.tsx
+import * as React from "react";
+import TextField3 from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+import { debounce } from "@mui/material/utils";
+import {
+  Fragment,
+  useCallback,
+  useEffect as useEffect2,
+  useMemo,
+  useRef,
+  useState as useState2
+} from "react";
+import { useController as useController6 } from "react-hook-form";
+import { CircularProgress, Grid2 as Grid26 } from "@mui/material";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var Component6 = function AsyncSelectElement(props) {
+  const {
+    name,
+    onBlur,
+    disabled,
+    control,
+    gridProps,
+    placeholder,
+    initialValue,
+    label,
+    queryFn,
+    ...rest
+  } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = useController6({
+    name,
+    control,
+    disabled
+  });
+  const [loading, setLoading] = useState2(false);
+  const [selectedOption, setSelectedOption] = useState2(null);
+  const [inputValue, setInputValue] = useState2("");
+  const inputValue2 = useMemo(() => inputValue, [inputValue]);
+  const setInputValue2 = useCallback(
+    (inputValue3) => setInputValue(inputValue3),
+    []
+  );
+  const [options, setOptions] = useState2([]);
+  const initialValueLoaded = useRef(
+    !initialValue ? true : !(initialValue != null && initialValue > 0)
+  );
+  const fieldValue = useRef(field.value);
+  const fetchData = useMemo(
+    () => debounce(
+      (payload, callback) => {
+        queryFn(payload).then((c) => callback(c));
+      },
+      400
+    ),
+    []
+  );
+  const fillOptions = (results) => {
+    let newOptions = [];
+    if (selectedOption) {
+      newOptions = [selectedOption];
+    }
+    if (results) {
+      newOptions = [...newOptions, ...results];
+    }
+    setOptions(newOptions);
+    setLoading(false);
+  };
+  useEffect2(() => {
+    if (initialValueLoaded.current) return void 0;
+    let active = true;
+    const payload = {
+      query: null,
+      initialValue
+    };
+    setLoading(true);
+    fetchData(payload, (results) => {
+      if (active) {
+        if (!!results && results.length > 0) {
+          fillOptions(results?.filter((c) => c.value == initialValue));
+          setSelectedOption(results[0]);
+          field.onChange(results[0].value);
+          fieldValue.current = results[0].value;
+        }
+        initialValueLoaded.current = true;
+        setLoading(false);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [initialValue]);
+  React.useEffect(() => {
+    let active = true;
+    if (inputValue2 === "" || initialValueLoaded.current === false) {
+      setOptions(selectedOption ? [selectedOption] : []);
+      return void 0;
+    }
+    if (!!fieldValue.current) {
+      if (field.value === fieldValue.current) {
+        return void 0;
+      }
+    }
+    setLoading(true);
+    const payload = {
+      query: inputValue2,
+      initialValue: null
+    };
+    fetchData(payload, (results) => {
+      if (active) {
+        fillOptions(results);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [initialValue, inputValue2, fetchData]);
+  const selectRef = useRef(null);
+  const handleChange = (_2, selectedOption2, reason) => {
+    if (reason === "clear") {
+      setSelectedOption(null);
+      field.onChange(null);
+    } else if (reason === "selectOption" || reason === "removeOption") {
+      if (selectedOption2) {
+        setSelectedOption(selectedOption2);
+        field.onChange(selectedOption2.value);
+        fieldValue.current = selectedOption2.value;
+      }
+    }
+    setOptions([]);
+  };
+  return /* @__PURE__ */ jsx6(
+    Autocomplete,
+    {
+      ...rest,
+      ref: selectRef,
+      fullWidth: true,
+      loading,
+      getOptionLabel: (option) => option.Label,
+      getOptionKey: (option) => option.value,
+      isOptionEqualToValue: (option, val) => option.value === val.value,
+      autoComplete: true,
+      includeInputInList: true,
+      disabled,
+      options,
+      value: selectedOption,
+      filterSelectedOptions: true,
+      onChange: handleChange,
+      onInputChange: (_2, newInputValue) => {
+        setInputValue2(newInputValue);
+      },
+      renderInput: (params) => /* @__PURE__ */ jsx6(
+        TextField3,
+        {
+          ...params,
+          label,
+          error: !!error,
+          helperText: error ? error.message : "",
+          placeholder,
+          slotProps: {
+            input: {
+              ...params.InputProps,
+              endAdornment: /* @__PURE__ */ jsxs2(Fragment, { children: [
+                loading ? /* @__PURE__ */ jsx6(CircularProgress, { color: "inherit", size: 20 }) : null,
+                params.InputProps.endAdornment
+              ] })
+            }
+          },
+          sx: {
+            "& .MuiInputBase-input": {
+              cursor: disabled ? "not-allowed" : "default"
+            },
+            bgcolor: disabled ? "#EEF1F5" : "transparent"
+          }
+        }
+      ),
+      renderOption: (props2, option) => {
+        const { key, ...optionProps } = props2;
+        return /* @__PURE__ */ jsx6("li", { ...optionProps, children: option.Label }, key);
+      }
+    }
+  );
+};
+var AsyncSelectElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ jsx6(Grid26, { ...gridProps, children: /* @__PURE__ */ jsx6(Component6, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx6(Component6, { ...props });
+};
+AsyncSelectElement2.displayName = "AsyncSelectElement";
+var AsyncSelect_default = AsyncSelectElement2;
+
+// src/wrappers2/AsyncMultiSelect/AsyncMultiSelect.tsx
+import _ from "lodash";
+import {
+  useState as useState3,
+  useRef as useRef2,
+  useMemo as useMemo2,
+  useEffect as useEffect3,
+  useCallback as useCallback2,
+  Fragment as Fragment2
+} from "react";
+import { debounce as debounce2 } from "lodash";
+import {
+  Autocomplete as Autocomplete2,
+  CircularProgress as CircularProgress2,
+  Grid2 as Grid27,
+  TextField as TextField4
+} from "@mui/material";
+import { useController as useController7 } from "react-hook-form";
+import match from "autosuggest-highlight/match";
+import parse from "autosuggest-highlight/parse";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var Component7 = function AsyncSelectMultiElement(props) {
+  const {
+    name,
+    onBlur,
+    disabled,
+    control,
+    gridProps,
+    placeholder,
+    initialValues,
+    label,
+    queryFn,
+    ...rest
+  } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = useController7({
+    name,
+    control,
+    disabled
+  });
+  const multiSelectRef = useRef2(null);
+  const [selectedOptions, setSelectedOptions] = useState3([]);
+  const [inputValue, setInputValue] = useState3("");
+  const [options, setOptions] = useState3([]);
+  const [loading, setLoading] = useState3(false);
+  const initialValuesLoaded = useRef2(
+    !(initialValues && initialValues.length > 0)
+  );
+  const inputValue2 = useMemo2(() => inputValue, [inputValue]);
+  const setInputValue2 = useCallback2(
+    (inputValue3) => setInputValue(inputValue3),
+    []
+  );
+  const fetchData = useMemo2(
+    () => debounce2(
+      (payload, callback) => {
+        queryFn(payload).then((c) => callback(c));
+      },
+      400
+    ),
+    []
+  );
+  const fillOptions = (results) => {
+    let newOptions = [];
+    if (selectedOptions) {
+      newOptions = [...selectedOptions];
+    }
+    if (results) {
+      const newlyAdded = _.differenceBy(
+        results,
+        selectedOptions,
+        (c) => c.value
+      );
+      newOptions = [...newOptions, ...newlyAdded];
+    }
+    setOptions(newOptions);
+    setLoading(false);
+  };
+  useEffect3(() => {
+    if (initialValuesLoaded.current) return void 0;
+    let active = true;
+    const payload = {
+      query: null,
+      initialValues
+    };
+    setLoading(true);
+    fetchData(payload, (results) => {
+      if (active) {
+        setSelectedOptions([...results]);
+        field.onChange([...results.map((c) => c.value)]);
+        initialValuesLoaded.current = true;
+        setLoading(false);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [initialValues]);
+  useEffect3(() => {
+    let active = true;
+    if (inputValue2 === "" || initialValuesLoaded.current === false) {
+      setOptions(selectedOptions ? [...selectedOptions] : []);
+      return void 0;
+    }
+    setLoading(true);
+    const payload = {
+      query: inputValue2,
+      initialValues: null
+    };
+    fetchData(payload, (results) => {
+      if (active) {
+        fillOptions(results);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [initialValues, inputValue2, fetchData]);
+  const handleChange = (_2, selectedOptions2, reason) => {
+    if (reason === "clear") {
+      setSelectedOptions([]);
+      field.onChange([]);
+    } else if (reason === "selectOption" || reason === "removeOption") {
+      setSelectedOptions(selectedOptions2);
+      field.onChange(selectedOptions2.map((c) => c.value));
+    }
+    setOptions([]);
+  };
+  return /* @__PURE__ */ jsx7(
+    Autocomplete2,
+    {
+      ref: multiSelectRef,
+      multiple: true,
+      loading,
+      getOptionLabel: (option) => option.Label,
+      getOptionKey: (option) => option.value,
+      isOptionEqualToValue: (option, val) => option.value === val.value,
+      options,
+      value: selectedOptions,
+      filterSelectedOptions: true,
+      disabled,
+      onChange: handleChange,
+      onInputChange: (_2, newInputValue) => {
+        setInputValue2(newInputValue);
+      },
+      renderInput: (params) => /* @__PURE__ */ jsx7(
+        TextField4,
+        {
+          ...params,
+          label,
+          error: !!error,
+          helperText: error ? error.message : "",
+          placeholder,
+          slotProps: {
+            input: {
+              ...params.InputProps,
+              endAdornment: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                loading ? /* @__PURE__ */ jsx7(CircularProgress2, { color: "inherit", size: 20 }) : null,
+                params.InputProps.endAdornment
+              ] })
+            }
+          },
+          sx: {
+            "& .MuiInputBase-input": {
+              cursor: disabled ? "not-allowed" : "default"
+            },
+            bgcolor: disabled ? "#EEF1F5" : "transparent"
+          }
+        }
+      ),
+      renderOption: (props2, option, { inputValue: inputValue3 }) => {
+        const { key, ...optionProps } = props2;
+        const matches = match(option.Label, inputValue3, { insideWords: true });
+        const parts = parse(option.Label, matches);
+        return /* @__PURE__ */ jsx7("li", { ...optionProps, children: /* @__PURE__ */ jsx7("div", { children: parts.map((part, index) => /* @__PURE__ */ jsx7(
+          "span",
+          {
+            style: {
+              fontWeight: part.highlight ? 700 : 400
+            },
+            children: part.text
+          },
+          index
+        )) }) }, key);
+      },
+      ...rest
+    }
+  );
+};
+var AsyncSelectMultiElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ jsx7(Grid27, { ...gridProps, children: /* @__PURE__ */ jsx7(Component7, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx7(Component7, { ...props });
+};
+AsyncSelectMultiElement2.displayName = "AsyncSelectMulti";
+var AsyncMultiSelect_default = AsyncSelectMultiElement2;
+
+// src/wrappers2/SelectElement/SelectElement.tsx
+import {
+  Autocomplete as Autocomplete3,
+  Grid2 as Grid28,
+  TextField as TextField5
+} from "@mui/material";
+import {
+  useController as useController8
+} from "react-hook-form";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Component8 = function SelectElement(props) {
+  const {
+    name,
+    onBlur,
+    onChange,
+    disabled,
+    options,
+    control,
+    gridProps,
+    loading = false,
+    placeholder,
+    label,
+    ...rest
+  } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = useController8({
+    name,
+    control,
+    disabled
+  });
+  if (options.length === 1 && field.value == null) {
+    field.onChange(options[0].value);
+  }
+  return /* @__PURE__ */ jsx8(
+    Autocomplete3,
+    {
+      ...rest,
+      value: field.value !== null ? options.find((option) => {
+        return field.value === option.value;
+      }) ?? null : options.length === 1 ? options[0] : null,
+      size: "small",
+      loading,
+      options,
+      getOptionLabel: (c) => c.label,
+      isOptionEqualToValue: (option, value) => option.value === value.value,
+      ref: field.ref,
+      disabled: field.disabled,
+      onChange: (event, newValue, reason) => {
+        field.onChange(newValue ? newValue.value : null);
+        if (onChange && typeof onChange === "function") {
+          onChange(event, newValue, reason);
+        }
+      },
+      onBlur: (event) => {
+        field.onBlur();
+        if (typeof onBlur === "function") {
+          onBlur(event);
+        }
+      },
+      fullWidth: true,
+      renderInput: (params) => /* @__PURE__ */ jsx8(
+        TextField5,
+        {
+          ...params,
+          fullWidth: true,
+          error: !!error,
+          helperText: error ? error.message : "",
+          placeholder,
+          label,
+          variant: "outlined",
+          sx: {
+            "& .MuiInputBase-input": {
+              cursor: disabled ? "not-allowed" : "default"
+            },
+            bgcolor: disabled ? "#EEF1F5" : "transparent"
+          }
+        }
+      )
+    }
+  );
+};
+var SelectElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ jsx8(Grid28, { ...gridProps, children: /* @__PURE__ */ jsx8(Component8, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx8(Component8, { ...props });
+};
+SelectElement2.displayName = "SelectElement";
+var SelectElement_default = SelectElement2;
+
+// src/wrappers2/SelectMultiElement/SelectMultiElement.tsx
+import {
+  Autocomplete as Autocomplete4,
+  CircularProgress as CircularProgress3,
+  Grid2 as Grid29,
+  TextField as TextField6
+} from "@mui/material";
+import {
+  useController as useController9
+} from "react-hook-form";
+import { Fragment as Fragment3, useState as useState4 } from "react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var Component9 = function SelectMultiElement(props) {
+  const {
+    name,
+    onBlur,
+    disabled,
+    options,
+    control,
+    loading = false,
+    placeholder,
+    label,
+    ...rest
+  } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = useController9({
+    name,
+    control,
+    disabled
+  });
+  const [selectedOptions, setSelectedOptions] = useState4([]);
+  const handleChange = (_2, selectedOptions2, reason) => {
+    if (reason === "clear") {
+      setSelectedOptions([]);
+      field.onChange([]);
+    } else if (reason === "selectOption" || reason === "removeOption") {
+      setSelectedOptions(selectedOptions2);
+      field.onChange(selectedOptions2.map((c) => c.value));
+    }
+  };
+  return /* @__PURE__ */ jsx9(
+    Autocomplete4,
+    {
+      multiple: true,
+      value: selectedOptions,
+      loading,
+      options,
+      getOptionLabel: (c) => c.Label,
+      filterSelectedOptions: true,
+      ref: field.ref,
+      disabled: field.disabled,
+      onChange: handleChange,
+      onBlur: (event) => {
+        field.onBlur();
+        if (typeof onBlur === "function") {
+          onBlur(event);
+        }
+      },
+      fullWidth: true,
+      renderInput: (params) => /* @__PURE__ */ jsx9(
+        TextField6,
+        {
+          ...params,
+          label,
+          error: !!error,
+          helperText: error ? error.message : "",
+          placeholder,
+          slotProps: {
+            input: {
+              ...params.InputProps,
+              endAdornment: /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                loading ? /* @__PURE__ */ jsx9(CircularProgress3, { color: "inherit", size: 20 }) : null,
+                params.InputProps.endAdornment
+              ] })
+            }
+          }
+        }
+      ),
+      ...rest
+    }
+  );
+};
+var SelectMultiElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ jsx9(Grid29, { ...gridProps, children: /* @__PURE__ */ jsx9(Component9, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx9(Component9, { ...props });
+};
+SelectMultiElement2.displayName = "SelectMultiElement";
+var SelectMultiElement_default = SelectMultiElement2;
+
+// src/wrappers2/SelectCascadeElement/SelectCascadeElement.tsx
+import {
+  Autocomplete as Autocomplete5,
+  Grid2 as Grid210,
+  TextField as TextField7
+} from "@mui/material";
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
+import {
+  useController as useController10
+} from "react-hook-form";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Component10 = function SelectCascadeElement(props) {
+  const {
+    name,
+    onBlur,
+    onChange,
+    disabled,
+    options,
+    control,
+    gridProps,
+    loading = false,
+    placeholder,
+    label,
+    dependsOn,
+    initialValue,
+    ...rest
+  } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = useController10({
+    name,
+    control,
+    disabled
+  });
+  const { field: dependentField } = useController10({
+    name: dependsOn,
+    control,
+    disabled
+  });
+  const parentValueRef = useRef3(dependentField.value ?? null);
+  useEffect4(() => {
+    if (!!dependentField.value && parentValueRef?.current?.value !== dependentField.value || dependentField.value === null) {
+      field.onChange(null);
+    }
+  }, [dependentField.value]);
+  useEffect4(() => {
+    if (initialValue) {
+      field.onChange(initialValue);
+    }
+  }, [initialValue]);
+  return /* @__PURE__ */ jsx10(
+    Autocomplete5,
+    {
+      ...rest,
+      value: field.value !== null ? options.find((option) => {
+        return field.value === option.value;
+      }) ?? null : null,
+      size: "small",
+      loading,
+      options,
+      getOptionLabel: (c) => c.label,
+      isOptionEqualToValue: (option, value) => option.value === value.value,
+      ref: field.ref,
+      disabled: field.disabled,
+      onChange: (event, newValue, reason) => {
+        field.onChange(newValue ? newValue.value : null);
+        if (onChange && typeof onChange === "function") {
+          onChange(event, newValue, reason);
+        }
+      },
+      onBlur: (event) => {
+        field.onBlur();
+        if (typeof onBlur === "function") {
+          onBlur(event);
+        }
+      },
+      fullWidth: true,
+      renderInput: (params) => /* @__PURE__ */ jsx10(
+        TextField7,
+        {
+          ...params,
+          fullWidth: true,
+          error: !!error,
+          helperText: error ? error.message : "",
+          placeholder,
+          label,
+          variant: "outlined",
+          sx: {
+            "& .MuiInputBase-input": {
+              cursor: disabled ? "not-allowed" : "default"
+            },
+            bgcolor: disabled ? "#EEF1F5" : "transparent"
+          }
+        }
+      )
+    }
+  );
+};
+var SelectCascadeElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ jsx10(Grid210, { ...gridProps, children: /* @__PURE__ */ jsx10(Component10, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx10(Component10, { ...props });
+};
+SelectCascadeElement2.displayName = "SelectCascadeElement";
+var SelectCascadeElement_default = SelectCascadeElement2;
+
+// src/wrappers2/CheckboxElement/CheckboxElement.tsx
+import {
+  Checkbox,
+  FormControl as FormControl2,
+  FormControlLabel as FormControlLabel2,
+  FormGroup,
+  FormHelperText as FormHelperText2,
+  Grid2 as Grid211
+} from "@mui/material";
+import {
+  useController as useController11
+} from "react-hook-form";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var Component11 = function CheckboxElement(props) {
+  const { name, control, label, labelProps, inputRef, ...rest } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = useController11({
+    name,
+    control,
+    disabled: rest.disabled
+  });
+  return /* @__PURE__ */ jsxs5(FormControl2, { error: !!error, children: [
+    /* @__PURE__ */ jsx11(FormGroup, { row: true, children: /* @__PURE__ */ jsx11(
+      FormControlLabel2,
+      {
+        label: label || "",
+        ...labelProps,
+        control: /* @__PURE__ */ jsx11(
+          Checkbox,
+          {
+            ...rest,
+            color: rest.color || "primary",
+            sx: [
+              ...Array.isArray(rest.sx) ? rest.sx : [rest.sx],
+              {
+                color: error ? "error.main" : void 0
+              }
+            ],
+            value: field.value,
+            checked: !!field.value,
+            onChange: (event, newValue) => {
+              field.onChange(event, newValue);
+              if (typeof rest.onChange === "function") {
+                rest.onChange(event, newValue);
+              }
+            }
+          }
+        )
+      }
+    ) }),
+    error && /* @__PURE__ */ jsx11(FormHelperText2, { error: !!error, children: error.message })
+  ] });
+};
+var CheckboxElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ jsx11(Grid211, { ...gridProps, children: /* @__PURE__ */ jsx11(Component11, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx11(Component11, { ...props });
+};
+CheckboxElement2.displayName = "CheckboxElement";
+var CheckboxElement_default = CheckboxElement2;
+
+// src/wrappers2/CheckboxGroup/CheckboxGroup.tsx
+import {
+  Checkbox as Checkbox2,
+  FormControl as FormControl3,
+  FormControlLabel as FormControlLabel3,
+  FormGroup as FormGroup2,
+  FormHelperText as FormHelperText3,
+  Grid2 as Grid212
+} from "@mui/material";
+import { useEffect as useEffect5, useState as useState5 } from "react";
+import {
+  useController as useController12
+} from "react-hook-form";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var Component12 = function CheckboxGroup(props) {
+  const { name, control, label, labelProps, inputRef, options, ...rest } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = useController12({
+    name,
+    control,
+    disabled: rest.disabled
+  });
+  const [selectedValues, setSelectedValues] = useState5(
+    options.filter((c) => field.value?.includes(c.value)).map((c) => c.value) || []
+  );
+  useEffect5(() => {
+    field.onChange(selectedValues ? [...selectedValues] : []);
+  }, [selectedValues]);
+  const handleChange = (event) => {
+    const value = parseInt(event.target.value, 10);
+    if (event.target.checked) {
+      setSelectedValues([...selectedValues, value]);
+    } else {
+      setSelectedValues(selectedValues.filter((item) => item !== value));
+    }
+  };
+  return /* @__PURE__ */ jsxs6(FormControl3, { error: !!error, children: [
+    /* @__PURE__ */ jsx12(FormGroup2, { row: true, children: options.map((option) => /* @__PURE__ */ jsx12(
+      FormControlLabel3,
+      {
+        label: option.label,
+        ...labelProps,
+        control: /* @__PURE__ */ jsx12(
+          Checkbox2,
+          {
+            ...rest,
+            color: rest.color || "primary",
+            sx: [
+              ...Array.isArray(rest.sx) ? rest.sx : [rest.sx],
+              {
+                color: error ? "error.main" : void 0
+              }
+            ],
+            value: option.value,
+            checked: selectedValues.includes(option.value),
+            onChange: handleChange
+          }
+        )
+      },
+      `${option.value}`
+    )) }),
+    error && /* @__PURE__ */ jsx12(FormHelperText3, { error: !!error, children: error.message })
+  ] });
+};
+var CheckboxGroup2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ jsx12(Grid212, { ...gridProps, children: /* @__PURE__ */ jsx12(Component12, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx12(Component12, { ...props });
+};
+CheckboxGroup2.displayName = "CheckboxGroup";
+var CheckboxGroup_default = CheckboxGroup2;
+
+// src/wrappers2/Field/index.ts
+var Field2 = {
+  Text: TextFieldElement_default,
+  Checkbox: CheckboxElement_default,
+  Date: DatePickerElement_default,
+  RadioGroup: RadioButtonGroup_default,
+  Password: PasswordElement_default,
+  Time: TimePickerElement_default,
+  Select: SelectElement_default,
+  SelectMulti: SelectMultiElement_default,
+  SelectCascade: SelectCascadeElement_default,
+  AsyncSelect: AsyncSelect_default,
+  AsyncMultiSelect: AsyncMultiSelect_default,
+  CheckboxGroup: CheckboxGroup_default
+};
+var Field_default2 = Field2;
 export {
   AuthorizedView_default as AuthorizedView,
   ClearButton_default as ClearButton,
   Field_default as Field,
+  Field_default2 as Field2,
   FilterButton_default as FilterButton,
   FilterWrapper_default as FilterWrapper,
   FormWrapper_default as FormWrapper,