@gnwebsoft/ui 2.18.44 → 2.18.46

package/dist/{chunk-BBDVHJQ3.js → chunk-22MN4IPU.js}

@@ -3,7 +3,7 @@
 var _chunk6JZ35VQJjs = require('./chunk-6JZ35VQJ.js');
 
 
-var _chunkFYN7F5WJjs = require('./chunk-FYN7F5WJ.js');
+var _chunkI7EIUZKKjs = require('./chunk-I7EIUZKK.js');
 
 // src/wrappers/DatePickerElement/DatePickerElement.tsx
 var _react = require('react'); var React = _interopRequireWildcard(_react);
@@ -54,6 +54,7 @@ var Component = function DatePickerElement(props) {
     ...rest
   } = props;
   const adapter = _internals.useLocalizationContext.call(void 0, );
+  const theme = _material.useTheme.call(void 0, );
   const { disabled, inputRef, onClose, ...restDatePickerProps } = datePickerProps;
   const {
     field,
@@ -98,7 +99,16 @@ var Component = function DatePickerElement(props) {
           datePickerProps.onChange(newValue, context);
         }
       },
-      sx,
+      sx: {
+        "& .MuiOutlinedInput-root": {
+          bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent"
+        },
+        "& .MuiInputLabel-asterisk": { color: "red" },
+        "& .MuiInputBase-input": {
+          cursor: disabled ? "not-allowed" : "default"
+        },
+        ...sx
+      },
       slotProps: {
         ...slotProps,
         actionBar: {
@@ -127,11 +137,17 @@ var Component = function DatePickerElement(props) {
   );
 };
 var DatePickerElement2 = ({
-  gridProps,
+  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
   ...props
 }) => {
   if (gridProps) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...gridProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, { ...props }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, { ...props })
+      }
+    );
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, { ...props });
 };
@@ -225,11 +241,17 @@ var Component2 = function PasswordEl(props) {
   );
 };
 var PasswordElement = ({
-  gridProps,
+  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
   ...props
 }) => {
   if (gridProps) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component2, { ...props }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component2, { ...props })
+      }
+    );
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component2, { ...props });
 };
@@ -368,11 +390,17 @@ var Component3 = function RadioButtonGroup(props) {
   ] });
 };
 var RadioButtonGroup2 = ({
-  gridProps,
+  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
   ...props
 }) => {
   if (gridProps) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component3, { ...props }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component3, { ...props })
+      }
+    );
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component3, { ...props });
 };
@@ -488,11 +516,17 @@ var Component4 = function TextFieldElement(props) {
   );
 };
 var TextFieldElement2 = ({
-  gridProps,
+  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
   ...props
 }) => {
   if (gridProps) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component4, { ...props }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component4, { ...props })
+      }
+    );
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component4, { ...props });
 };
@@ -537,7 +571,7 @@ var Component5 = function TimePickerElement(props) {
     value: field.value,
     onChange: field.onChange,
     transform: {
-      input: typeof _optionalChain([transform, 'optionalAccess', _18 => _18.input]) === "function" ? transform.input : (newValue) => _chunkFYN7F5WJjs.readValueAsDate.call(void 0, adapter, newValue),
+      input: typeof _optionalChain([transform, 'optionalAccess', _18 => _18.input]) === "function" ? transform.input : (newValue) => _chunkI7EIUZKKjs.readValueAsDate.call(void 0, adapter, newValue),
       output: typeof _optionalChain([transform, 'optionalAccess', _19 => _19.output]) === "function" ? transform.output : (newValue) => newValue
     }
   });
@@ -579,11 +613,17 @@ var Component5 = function TimePickerElement(props) {
   );
 };
 var TimePickerElement2 = ({
-  gridProps,
+  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
   ...props
 }) => {
   if (gridProps) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component5, { ...props }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component5, { ...props })
+      }
+    );
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component5, { ...props });
 };
@@ -594,6 +634,13 @@ var TimePickerElement_default = TimePickerElement2;
 
 
 
+
+
+
+
+
+
+
 var _utils = require('@mui/material/utils');
 var _TextField = require('@mui/material/TextField'); var _TextField2 = _interopRequireDefault(_TextField);
 var _Autocomplete = require('@mui/material/Autocomplete'); var _Autocomplete2 = _interopRequireDefault(_Autocomplete);
@@ -628,16 +675,22 @@ var Component6 = function AsyncSelectElement(props) {
   const [selectedOption, setSelectedOption] = _react.useState.call(void 0, null);
   const [inputValue, setInputValue] = _react.useState.call(void 0, "");
   const inputValue2 = _react.useMemo.call(void 0, () => inputValue, [inputValue]);
-  const setInputValue2 = _react.useCallback.call(void 0, (newValue) => setInputValue(newValue), []);
+  const setInputValue2 = _react.useCallback.call(void 0, 
+    (newValue) => setInputValue(newValue),
+    []
+  );
   const [options, setOptions] = _react.useState.call(void 0, []);
   const initialValueLoaded = _react.useRef.call(void 0, 
     !initialValue ? true : !(initialValue != null)
   );
   const fieldValue = _react.useRef.call(void 0, field.value);
   const fetchData = _react.useMemo.call(void 0, 
-    () => _utils.debounce.call(void 0, (payload, callback) => {
-      queryFn(payload).then((c) => callback(c));
-    }, 400),
+    () => _utils.debounce.call(void 0, 
+      (payload, callback) => {
+        queryFn(payload).then((c) => callback(c));
+      },
+      400
+    ),
     []
   );
   const fillOptions = (results) => {
@@ -790,11 +843,17 @@ var Component6 = function AsyncSelectElement(props) {
   );
 };
 var AsyncSelectElement2 = ({
-  gridProps,
+  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
   ...props
 }) => {
   if (gridProps) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component6, { ...props }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component6, { ...props })
+      }
+    );
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component6, { ...props });
 };
@@ -1037,6 +1096,7 @@ var Component8 = function SelectElement(props) {
     sx,
     variant,
     disabled,
+    initialValue,
     labelKey = "Label",
     valueKey = "Value",
     placeholder,
@@ -1049,7 +1109,8 @@ var Component8 = function SelectElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control
+    control,
+    defaultValue: initialValue
   });
   const theme = _material.useTheme.call(void 0, );
   const getOptionValue = _react.useCallback.call(void 0, 
@@ -1072,16 +1133,20 @@ var Component8 = function SelectElement(props) {
     _optionalChain([onChange, 'optionalCall', _24 => _24(event, newValue, reason)]);
   };
   _react.useEffect.call(void 0, () => {
-    if (!isEdit && options.length === 1 && (field.value == null || field.value == void 0 || field.value === "")) {
+    if (!isEdit && options.length === 1 && (field.value == null || field.value === "")) {
       const defaultOption = options[0];
-      const defaultValue = getOptionValue(defaultOption);
-      field.onChange(defaultValue);
+      field.onChange(getOptionValue(defaultOption));
     }
-  }, [isEdit, options]);
-  const autocompleteValue = _react.useMemo.call(void 0, 
-    () => _nullishCoalesce(options.find((option) => getOptionValue(option) === field.value), () => ( null)),
-    [field.value, options, getOptionValue]
-  );
+    if (isEdit) {
+      if (field.value == null || field.value === "") {
+        return;
+      }
+    }
+  }, [isEdit, options, field.value, getOptionValue, field.onChange]);
+  const autocompleteValue = _react.useMemo.call(void 0, () => {
+    if (!field.value) return null;
+    return _nullishCoalesce(options.find((option) => getOptionValue(option) === field.value), () => ( null));
+  }, [field.value, options, getOptionValue]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _material.Autocomplete,
     {
@@ -1141,10 +1206,17 @@ var SelectElement_default = SelectElement2;
 // src/wrappers/SelectMultiElement/SelectMultiElement.tsx
 
 
+var _Chip = require('@mui/material/Chip'); var _Chip2 = _interopRequireDefault(_Chip);
 var _CheckBox = require('@mui/icons-material/CheckBox'); var _CheckBox2 = _interopRequireDefault(_CheckBox);
 var _CheckBoxOutlineBlank = require('@mui/icons-material/CheckBoxOutlineBlank'); var _CheckBoxOutlineBlank2 = _interopRequireDefault(_CheckBoxOutlineBlank);
 
 
+
+
+
+
+
+
 var Component9 = function SelectMultiElement(props) {
   const {
     name,
@@ -1159,6 +1231,7 @@ var Component9 = function SelectMultiElement(props) {
     sx,
     labelKey = "Label",
     valueKey = "Value",
+    multiple = true,
     ...rest
   } = props;
   const {
@@ -1176,13 +1249,19 @@ var Component9 = function SelectMultiElement(props) {
     if (typeof option === "string") return option;
     return option ? option[labelKey] : "";
   };
-  const selectedValue = field.value && Array.isArray(field.value) ? options.filter((option) => field.value.includes(getOptionValue(option))) : [];
-  const handleChange = (_2, selectedOptions, reason) => {
-    if (reason === "clear") {
-      field.onChange([]);
-    } else if (reason === "selectOption" || reason === "removeOption") {
-      const newValues = selectedOptions.map((option) => getOptionValue(option));
-      field.onChange(newValues);
+  const selectedValue = multiple ? Array.isArray(field.value) ? options.filter((option) => field.value.includes(getOptionValue(option))) : [] : _nullishCoalesce(options.find((option) => getOptionValue(option) === field.value), () => ( null));
+  const handleChange = (_2, selected, reason) => {
+    if (multiple) {
+      if (reason === "clear") {
+        field.onChange([]);
+      } else {
+        const newValues = selected.map(
+          (option) => getOptionValue(option)
+        );
+        field.onChange(newValues);
+      }
+    } else {
+      field.onChange(selected ? getOptionValue(selected) : null);
     }
   };
   const icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckBoxOutlineBlank2.default, { fontSize: "small" });
@@ -1190,14 +1269,14 @@ var Component9 = function SelectMultiElement(props) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _material.Autocomplete,
     {
-      multiple: true,
+      multiple,
       value: selectedValue,
       loading,
       options,
-      getOptionLabel,
+      getOptionLabel: (option) => getOptionLabel(option),
       isOptionEqualToValue: (option, value) => getOptionValue(option) === getOptionValue(value),
-      filterSelectedOptions: true,
-      disableCloseOnSelect: true,
+      filterSelectedOptions: multiple,
+      disableCloseOnSelect: multiple,
       ref: field.ref,
       disabled: _nullishCoalesce(disabled, () => ( field.disabled)),
       onChange: handleChange,
@@ -1208,13 +1287,26 @@ var Component9 = function SelectMultiElement(props) {
         }
       },
       fullWidth: true,
-      renderOption: (props1, option, { selected }) => {
-        const { key, ...optionProps } = props1;
-        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { ...optionProps, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Checkbox, { icon, checkedIcon, checked: selected }),
-          getOptionLabel(option)
-        ] }, key);
-      },
+      renderOption: (props1, option, { selected }) => multiple ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { ...props1, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Checkbox,
+          {
+            icon,
+            checkedIcon,
+            checked: selected
+          }
+        ),
+        getOptionLabel(option)
+      ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { ...props1, children: getOptionLabel(option) }),
+      renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _Chip2.default,
+        {
+          ...getTagProps({ index }),
+          label: getOptionLabel(option),
+          size: "small",
+          variant: "filled"
+        }
+      )),
       renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _material.TextField,
         {
@@ -1243,11 +1335,17 @@ var Component9 = function SelectMultiElement(props) {
   );
 };
 var SelectMultiElement2 = ({
-  gridProps,
+  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
   ...props
 }) => {
   if (gridProps) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component9, { ...props }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component9, { ...props })
+      }
+    );
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component9, { ...props });
 };
@@ -1280,6 +1378,7 @@ var Component10 = function SelectCascadeElement(props) {
     placeholder,
     label,
     dependsOn,
+    initialValue,
     textFieldProps = {},
     variant,
     sx,
@@ -1289,9 +1388,16 @@ var Component10 = function SelectCascadeElement(props) {
   const { required } = textFieldProps;
   const getOptionKey = _react.useCallback.call(void 0, 
     (option) => {
-      if (typeof option === "string" || typeof option === "number") return option;
+      if (typeof option === "string" || typeof option === "number")
+        return option;
       const key = option ? option[valueKey] : void 0;
-      return key !== void 0 && key !== null ? String(key) : "";
+      if (key === void 0 || key === null) {
+        return "";
+      }
+      if (typeof key === "string" || typeof key === "number") {
+        return key;
+      }
+      return String(key);
     },
     [valueKey]
   );
@@ -1308,7 +1414,8 @@ var Component10 = function SelectCascadeElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control
+    control,
+    defaultValue: initialValue
   });
   const theme = _material.useTheme.call(void 0, );
   const { field: dependentField } = _reacthookform.useController.call(void 0, {
@@ -1318,45 +1425,48 @@ var Component10 = function SelectCascadeElement(props) {
   const parentValueRef = _react.useRef.call(void 0, _nullishCoalesce(dependentField.value, () => ( null)));
   const [hasAutoSelected, setHasAutoSelected] = _react.useState.call(void 0, false);
   _react.useEffect.call(void 0, () => {
-    if (!!dependentField.value && _optionalChain([parentValueRef, 'optionalAccess', _25 => _25.current]) !== dependentField.value || dependentField.value === null) {
+    if (parentValueRef.current !== dependentField.value) {
+      parentValueRef.current = dependentField.value;
       field.onChange(null);
       setHasAutoSelected(false);
     }
-  }, [dependentField.value]);
+  }, [dependentField.value, field]);
   _react.useEffect.call(void 0, () => {
-    if (isEdit && !disabled && options.length === 1 && field.value == null && !hasAutoSelected) {
-      field.onChange(getOptionKey(options[0]));
-      setHasAutoSelected(true);
+    if (!dependentField.value) return;
+    if (isEdit) {
+      if (field.value) return;
+      if (options.length === 1 && !hasAutoSelected) {
+        field.onChange(getOptionKey(options[0]));
+        setHasAutoSelected(true);
+      }
     } else {
-      if (options.length === 1 && field.value == null && !hasAutoSelected) {
+      if (options.length === 1 && !field.value && !hasAutoSelected) {
         field.onChange(getOptionKey(options[0]));
         setHasAutoSelected(true);
       }
     }
   }, [
+    isEdit,
     options,
     field.value,
-    field.onChange,
-    hasAutoSelected,
-    isEdit,
-    disabled,
-    field,
+    dependentField.value,
     getOptionKey,
-    dependentField.onChange
+    hasAutoSelected,
+    field
   ]);
+  const autocompleteValue = _nullishCoalesce(options.find((opt) => getOptionKey(opt) === field.value), () => ( null));
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _material.Autocomplete,
     {
       ...rest,
-      value: options.map((option) => getOptionKey(option) === field.value ? option : null).find(Boolean) || null,
+      value: autocompleteValue,
       size: "small",
       loading,
       options,
-      getOptionKey,
       getOptionLabel,
       isOptionEqualToValue,
       ref: field.ref,
-      disabled: dependentField.value == null || disabled,
+      disabled: !dependentField.value || disabled,
       onChange: (event, newValue, reason) => {
         field.onChange(newValue ? getOptionKey(newValue) : null);
         if (onChange && typeof onChange === "function") {
@@ -1369,7 +1479,6 @@ var Component10 = function SelectCascadeElement(props) {
           onBlur(event);
         }
       },
-      fullWidth: true,
       renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _material.TextField,
         {
@@ -1380,14 +1489,14 @@ var Component10 = function SelectCascadeElement(props) {
           helperText: error ? error.message : "",
           placeholder,
           label,
-          variant: variant ? variant : "outlined",
+          variant: _nullishCoalesce(variant, () => ( "outlined")),
           sx: {
             "& .MuiOutlinedInput-root": {
-              bgcolor: disabled || dependentField.value == null ? theme.palette.action.disabledBackground : "transparent"
+              bgcolor: disabled || !dependentField.value ? theme.palette.action.disabledBackground : "transparent"
             },
             "& .MuiInputLabel-asterisk": { color: "red" },
             "& .MuiInputBase-input": {
-              cursor: disabled || dependentField.value == null ? "not-allowed" : "default"
+              cursor: disabled || !dependentField.value ? "not-allowed" : "default"
             },
             ...sx
           }
@@ -1401,7 +1510,13 @@ var SelectCascadeElement2 = ({
   ...props
 }) => {
   if (gridProps) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component10, { ...props }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component10, { ...props })
+      }
+    );
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component10, { ...props });
 };
@@ -1500,7 +1615,7 @@ var Component12 = function CheckboxGroup(props) {
     disabled: rest.disabled
   });
   const [selectedValues, setSelectedValues] = _react.useState.call(void 0, 
-    options.filter((c) => _optionalChain([field, 'access', _26 => _26.value, 'optionalAccess', _27 => _27.includes, 'call', _28 => _28(c.Value)])).map((c) => c.Value) || []
+    options.filter((c) => _optionalChain([field, 'access', _25 => _25.value, 'optionalAccess', _26 => _26.includes, 'call', _27 => _27(c.Value)])).map((c) => c.Value) || []
   );
   _react.useEffect.call(void 0, () => {
     field.onChange(selectedValues ? [...selectedValues] : []);
@@ -1553,6 +1668,205 @@ var CheckboxGroup2 = ({
 CheckboxGroup2.displayName = "CheckboxGroup";
 var CheckboxGroup_default = CheckboxGroup2;
 
+// src/wrappers/SelectMultiCascadeElement/SelectMultiCascadeElement.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+var Component13 = function SelectMultiCascadeElement(props) {
+  const {
+    name,
+    control,
+    dependsOn,
+    onBlur,
+    disabled,
+    options,
+    loading = false,
+    placeholder,
+    label,
+    variant,
+    sx,
+    labelKey = "Label",
+    valueKey = "Value",
+    multiple = true,
+    isEdit = false,
+    initialValue,
+    ...rest
+  } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    defaultValue: initialValue
+  });
+  const { field: dependentField } = _reacthookform.useController.call(void 0, {
+    name: dependsOn,
+    control
+  });
+  const parentValueRef = _react.useRef.call(void 0, _nullishCoalesce(dependentField.value, () => ( null)));
+  const [hasAutoSelected, setHasAutoSelected] = _react.useState.call(void 0, false);
+  const getOptionValue = _react.useCallback.call(void 0, 
+    (option) => {
+      if (typeof option === "string") return option;
+      return option ? option[valueKey] : null;
+    },
+    [valueKey]
+  );
+  const getOptionLabel = _react.useCallback.call(void 0, 
+    (option) => {
+      if (typeof option === "string") return option;
+      return option ? option[labelKey] : "";
+    },
+    [labelKey]
+  );
+  _react.useEffect.call(void 0, () => {
+    if (parentValueRef.current !== dependentField.value) {
+      parentValueRef.current = dependentField.value;
+      field.onChange(multiple ? [] : null);
+      setHasAutoSelected(false);
+    }
+  }, [dependentField.value, field, multiple]);
+  _react.useEffect.call(void 0, () => {
+    if (!dependentField.value) return;
+    if (isEdit) {
+      if (field.value && (multiple ? field.value.length > 0 : field.value))
+        return;
+      if (options.length === 1 && !hasAutoSelected) {
+        field.onChange(
+          multiple ? [getOptionValue(options[0])] : getOptionValue(options[0])
+        );
+        setHasAutoSelected(true);
+      }
+    } else {
+      if (options.length === 1 && (!field.value || field.value.length === 0) && !hasAutoSelected) {
+        field.onChange(
+          multiple ? [getOptionValue(options[0])] : getOptionValue(options[0])
+        );
+        setHasAutoSelected(true);
+      }
+    }
+  }, [
+    isEdit,
+    options,
+    field.value,
+    dependentField.value,
+    multiple,
+    getOptionValue,
+    hasAutoSelected,
+    field
+  ]);
+  const selectedValue = multiple ? Array.isArray(field.value) ? options.filter((opt) => field.value.includes(getOptionValue(opt))) : [] : _nullishCoalesce(options.find((opt) => getOptionValue(opt) === field.value), () => ( null));
+  const handleChange = (_2, selected, reason) => {
+    if (multiple) {
+      if (reason === "clear") {
+        field.onChange([]);
+      } else {
+        const newValues = selected.map((opt) => getOptionValue(opt));
+        field.onChange(newValues);
+      }
+    } else {
+      field.onChange(selected ? getOptionValue(selected) : null);
+    }
+  };
+  const icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckBoxOutlineBlank2.default, { fontSize: "small" });
+  const checkedIcon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckBox2.default, { fontSize: "small" });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Autocomplete,
+    {
+      multiple,
+      value: selectedValue,
+      loading,
+      options,
+      getOptionLabel,
+      isOptionEqualToValue: (option, value) => getOptionValue(option) === getOptionValue(value),
+      filterSelectedOptions: multiple,
+      disableCloseOnSelect: multiple,
+      ref: field.ref,
+      disabled: !dependentField.value || disabled,
+      onChange: handleChange,
+      onBlur: (event) => {
+        field.onBlur();
+        if (typeof onBlur === "function") {
+          onBlur(event);
+        }
+      },
+      fullWidth: true,
+      renderOption: (props1, option, { selected }) => multiple ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { ...props1, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Checkbox,
+          {
+            icon,
+            checkedIcon,
+            checked: selected
+          }
+        ),
+        getOptionLabel(option)
+      ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { ...props1, children: getOptionLabel(option) }),
+      renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.Chip,
+        {
+          ...getTagProps({ index }),
+          label: getOptionLabel(option),
+          size: "small",
+          variant: "filled"
+        }
+      )),
+      renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.TextField,
+        {
+          ...params,
+          label,
+          error: !!error,
+          helperText: error ? error.message : "",
+          placeholder,
+          slotProps: {
+            input: {
+              ...params.InputProps,
+              endAdornment: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
+                loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CircularProgress, { color: "inherit", size: 20 }) : null,
+                params.InputProps.endAdornment
+              ] })
+            }
+          },
+          variant: variant ? variant : "outlined",
+          sx: {
+            ...sx
+          }
+        }
+      ),
+      ...rest
+    }
+  );
+};
+var SelectMultiCascadeElement2 = ({
+  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component13, { ...props })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component13, { ...props });
+};
+SelectMultiCascadeElement2.displayName = "SelectMultiCascadeElement";
+var SelectMultiCascadeElement_default = SelectMultiCascadeElement2;
+
 // src/wrappers/Field/index.ts
 var Field = {
   Text: TextFieldElement_default,
@@ -1566,7 +1880,8 @@ var Field = {
   SelectCascade: SelectCascadeElement_default,
   AsyncSelect: AsyncSelectElement_default,
   AsyncMultiSelect: AsyncMultiSelect_default,
-  CheckboxGroup: CheckboxGroup_default
+  CheckboxGroup: CheckboxGroup_default,
+  SelectMultiCascadeElement: SelectMultiCascadeElement_default
 };
 var Field_default = Field;