@gnwebsoft/ui 2.18.46 → 2.18.48

package/dist/{chunk-F6RJXISB.mjs → chunk-7HVI5RBL.mjs}

@@ -1096,7 +1096,6 @@ var Component8 = function SelectElement(props) {
     sx,
     variant,
     disabled,
-    initialValue,
     labelKey = "Label",
     valueKey = "Value",
     placeholder,
@@ -1109,8 +1108,7 @@ var Component8 = function SelectElement(props) {
     fieldState: { error }
   } = useController8({
     name,
-    control,
-    defaultValue: initialValue
+    control
   });
   const theme = useTheme6();
   const getOptionValue = useCallback4(
@@ -1133,20 +1131,16 @@ var Component8 = function SelectElement(props) {
     onChange?.(event, newValue, reason);
   };
   useEffect4(() => {
-    if (!isEdit && options.length === 1 && (field.value == null || field.value === "")) {
+    if (!isEdit && options.length === 1 && (field.value == null || field.value == void 0 || field.value === "")) {
       const defaultOption = options[0];
-      field.onChange(getOptionValue(defaultOption));
-    }
-    if (isEdit) {
-      if (field.value == null || field.value === "") {
-        return;
-      }
+      const defaultValue = getOptionValue(defaultOption);
+      field.onChange(defaultValue);
     }
-  }, [isEdit, options, field.value, getOptionValue, field.onChange]);
-  const autocompleteValue = useMemo3(() => {
-    if (!field.value) return null;
-    return options.find((option) => getOptionValue(option) === field.value) ?? null;
-  }, [field.value, options, getOptionValue]);
+  }, [isEdit, options]);
+  const autocompleteValue = useMemo3(
+    () => options.find((option) => getOptionValue(option) === field.value) ?? null,
+    [field.value, options, getOptionValue]
+  );
   return /* @__PURE__ */ jsx8(
     Autocomplete3,
     {
@@ -1186,7 +1180,7 @@ var Component8 = function SelectElement(props) {
   );
 };
 var SelectElement2 = ({
-  gridProps,
+  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
   ...props
 }) => {
   if (gridProps) {
@@ -1206,7 +1200,6 @@ var SelectElement_default = SelectElement2;
 // src/wrappers/SelectMultiElement/SelectMultiElement.tsx
 import { Fragment as Fragment3 } from "react";
 import { useController as useController9 } from "react-hook-form";
-import Chip from "@mui/material/Chip";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import {
@@ -1231,7 +1224,6 @@ var Component9 = function SelectMultiElement(props) {
     sx,
     labelKey = "Label",
     valueKey = "Value",
-    multiple = true,
     ...rest
   } = props;
   const {
@@ -1249,19 +1241,13 @@ var Component9 = function SelectMultiElement(props) {
     if (typeof option === "string") return option;
     return option ? option[labelKey] : "";
   };
-  const selectedValue = multiple ? Array.isArray(field.value) ? options.filter((option) => field.value.includes(getOptionValue(option))) : [] : 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 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 icon = /* @__PURE__ */ jsx9(CheckBoxOutlineBlankIcon, { fontSize: "small" });
@@ -1269,14 +1255,14 @@ var Component9 = function SelectMultiElement(props) {
   return /* @__PURE__ */ jsx9(
     Autocomplete4,
     {
-      multiple,
+      multiple: true,
       value: selectedValue,
       loading,
       options,
-      getOptionLabel: (option) => getOptionLabel(option),
+      getOptionLabel,
       isOptionEqualToValue: (option, value) => getOptionValue(option) === getOptionValue(value),
-      filterSelectedOptions: multiple,
-      disableCloseOnSelect: multiple,
+      filterSelectedOptions: true,
+      disableCloseOnSelect: true,
       ref: field.ref,
       disabled: disabled ?? field.disabled,
       onChange: handleChange,
@@ -1287,26 +1273,20 @@ var Component9 = function SelectMultiElement(props) {
         }
       },
       fullWidth: true,
-      renderOption: (props1, option, { selected }) => multiple ? /* @__PURE__ */ jsxs4("li", { ...props1, children: [
-        /* @__PURE__ */ jsx9(
-          Checkbox,
-          {
-            icon,
-            checkedIcon,
-            checked: selected
-          }
-        ),
-        getOptionLabel(option)
-      ] }) : /* @__PURE__ */ jsx9("li", { ...props1, children: getOptionLabel(option) }),
-      renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ jsx9(
-        Chip,
-        {
-          ...getTagProps({ index }),
-          label: getOptionLabel(option),
-          size: "small",
-          variant: "filled"
-        }
-      )),
+      renderOption: (props1, option, { selected }) => {
+        const { key, ...optionProps } = props1;
+        return /* @__PURE__ */ jsxs4("li", { ...optionProps, children: [
+          /* @__PURE__ */ jsx9(
+            Checkbox,
+            {
+              icon,
+              checkedIcon,
+              checked: selected
+            }
+          ),
+          getOptionLabel(option)
+        ] }, key);
+      },
       renderInput: (params) => /* @__PURE__ */ jsx9(
         TextField6,
         {
@@ -1378,7 +1358,6 @@ var Component10 = function SelectCascadeElement(props) {
     placeholder,
     label,
     dependsOn,
-    initialValue,
     textFieldProps = {},
     variant,
     sx,
@@ -1391,13 +1370,7 @@ var Component10 = function SelectCascadeElement(props) {
       if (typeof option === "string" || typeof option === "number")
         return option;
       const key = option ? option[valueKey] : void 0;
-      if (key === void 0 || key === null) {
-        return "";
-      }
-      if (typeof key === "string" || typeof key === "number") {
-        return key;
-      }
-      return String(key);
+      return key !== void 0 && key !== null ? String(key) : "";
     },
     [valueKey]
   );
@@ -1414,8 +1387,7 @@ var Component10 = function SelectCascadeElement(props) {
     fieldState: { error }
   } = useController10({
     name,
-    control,
-    defaultValue: initialValue
+    control
   });
   const theme = useTheme7();
   const { field: dependentField } = useController10({
@@ -1425,48 +1397,47 @@ var Component10 = function SelectCascadeElement(props) {
   const parentValueRef = useRef3(dependentField.value ?? null);
   const [hasAutoSelected, setHasAutoSelected] = useState4(false);
   useEffect5(() => {
-    if (parentValueRef.current !== dependentField.value) {
-      parentValueRef.current = dependentField.value;
+    if (!!dependentField.value && parentValueRef?.current !== dependentField.value || dependentField.value === null) {
       field.onChange(null);
       setHasAutoSelected(false);
     }
-  }, [dependentField.value, field]);
+  }, [dependentField.value]);
   useEffect5(() => {
-    if (!dependentField.value) return;
-    if (isEdit) {
-      if (field.value) return;
-      if (options.length === 1 && !hasAutoSelected) {
-        field.onChange(getOptionKey(options[0]));
-        setHasAutoSelected(true);
-      }
+    if (isEdit && !disabled && options.length === 1 && field.value == null && !hasAutoSelected) {
+      field.onChange(getOptionKey(options[0]));
+      setHasAutoSelected(true);
     } else {
-      if (options.length === 1 && !field.value && !hasAutoSelected) {
+      if (options.length === 1 && field.value == null && !hasAutoSelected) {
         field.onChange(getOptionKey(options[0]));
         setHasAutoSelected(true);
       }
     }
   }, [
-    isEdit,
     options,
     field.value,
-    dependentField.value,
-    getOptionKey,
+    field.onChange,
     hasAutoSelected,
-    field
+    isEdit,
+    disabled,
+    field,
+    getOptionKey,
+    dependentField.onChange
   ]);
-  const autocompleteValue = options.find((opt) => getOptionKey(opt) === field.value) ?? null;
   return /* @__PURE__ */ jsx10(
     Autocomplete5,
     {
       ...rest,
-      value: autocompleteValue,
+      value: options.map(
+        (option) => getOptionKey(option) === field.value ? option : null
+      ).find(Boolean) || null,
       size: "small",
       loading,
       options,
+      getOptionKey,
       getOptionLabel,
       isOptionEqualToValue,
       ref: field.ref,
-      disabled: !dependentField.value || disabled,
+      disabled: dependentField.value == null || disabled,
       onChange: (event, newValue, reason) => {
         field.onChange(newValue ? getOptionKey(newValue) : null);
         if (onChange && typeof onChange === "function") {
@@ -1479,6 +1450,7 @@ var Component10 = function SelectCascadeElement(props) {
           onBlur(event);
         }
       },
+      fullWidth: true,
       renderInput: (params) => /* @__PURE__ */ jsx10(
         TextField7,
         {
@@ -1489,14 +1461,14 @@ var Component10 = function SelectCascadeElement(props) {
           helperText: error ? error.message : "",
           placeholder,
           label,
-          variant: variant ?? "outlined",
+          variant: variant ? variant : "outlined",
           sx: {
             "& .MuiOutlinedInput-root": {
-              bgcolor: disabled || !dependentField.value ? theme.palette.action.disabledBackground : "transparent"
+              bgcolor: disabled || dependentField.value == null ? theme.palette.action.disabledBackground : "transparent"
             },
             "& .MuiInputLabel-asterisk": { color: "red" },
             "& .MuiInputBase-input": {
-              cursor: disabled || !dependentField.value ? "not-allowed" : "default"
+              cursor: disabled || dependentField.value == null ? "not-allowed" : "default"
             },
             ...sx
           }
@@ -1674,7 +1646,7 @@ import { useRef as useRef4, Fragment as Fragment4, useState as useState6, useEff
 import CheckBoxIcon2 from "@mui/icons-material/CheckBox";
 import CheckBoxOutlineBlankIcon2 from "@mui/icons-material/CheckBoxOutlineBlank";
 import {
-  Chip as Chip2,
+  Chip,
   Grid2 as Grid213,
   Checkbox as Checkbox4,
   TextField as TextField8,
@@ -1814,7 +1786,7 @@ var Component13 = function SelectMultiCascadeElement(props) {
         getOptionLabel(option)
       ] }) : /* @__PURE__ */ jsx13("li", { ...props1, children: getOptionLabel(option) }),
       renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ jsx13(
-        Chip2,
+        Chip,
         {
           ...getTagProps({ index }),
           label: getOptionLabel(option),

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

@@ -1096,7 +1096,6 @@ var Component8 = function SelectElement(props) {
     sx,
     variant,
     disabled,
-    initialValue,
     labelKey = "Label",
     valueKey = "Value",
     placeholder,
@@ -1109,8 +1108,7 @@ var Component8 = function SelectElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    defaultValue: initialValue
+    control
   });
   const theme = _material.useTheme.call(void 0, );
   const getOptionValue = _react.useCallback.call(void 0, 
@@ -1133,20 +1131,16 @@ 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 === "")) {
+    if (!isEdit && options.length === 1 && (field.value == null || field.value == void 0 || field.value === "")) {
       const defaultOption = options[0];
-      field.onChange(getOptionValue(defaultOption));
+      const defaultValue = getOptionValue(defaultOption);
+      field.onChange(defaultValue);
     }
-    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]);
+  }, [isEdit, options]);
+  const autocompleteValue = _react.useMemo.call(void 0, 
+    () => _nullishCoalesce(options.find((option) => getOptionValue(option) === field.value), () => ( null)),
+    [field.value, options, getOptionValue]
+  );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _material.Autocomplete,
     {
@@ -1186,7 +1180,7 @@ var Component8 = function SelectElement(props) {
   );
 };
 var SelectElement2 = ({
-  gridProps,
+  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
   ...props
 }) => {
   if (gridProps) {
@@ -1206,7 +1200,6 @@ 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);
 
@@ -1231,7 +1224,6 @@ var Component9 = function SelectMultiElement(props) {
     sx,
     labelKey = "Label",
     valueKey = "Value",
-    multiple = true,
     ...rest
   } = props;
   const {
@@ -1249,19 +1241,13 @@ var Component9 = function SelectMultiElement(props) {
     if (typeof option === "string") return option;
     return option ? option[labelKey] : "";
   };
-  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 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 icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckBoxOutlineBlank2.default, { fontSize: "small" });
@@ -1269,14 +1255,14 @@ var Component9 = function SelectMultiElement(props) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _material.Autocomplete,
     {
-      multiple,
+      multiple: true,
       value: selectedValue,
       loading,
       options,
-      getOptionLabel: (option) => getOptionLabel(option),
+      getOptionLabel,
       isOptionEqualToValue: (option, value) => getOptionValue(option) === getOptionValue(value),
-      filterSelectedOptions: multiple,
-      disableCloseOnSelect: multiple,
+      filterSelectedOptions: true,
+      disableCloseOnSelect: true,
       ref: field.ref,
       disabled: _nullishCoalesce(disabled, () => ( field.disabled)),
       onChange: handleChange,
@@ -1287,26 +1273,20 @@ var Component9 = function SelectMultiElement(props) {
         }
       },
       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, 
-        _Chip2.default,
-        {
-          ...getTagProps({ index }),
-          label: getOptionLabel(option),
-          size: "small",
-          variant: "filled"
-        }
-      )),
+      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);
+      },
       renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _material.TextField,
         {
@@ -1378,7 +1358,6 @@ var Component10 = function SelectCascadeElement(props) {
     placeholder,
     label,
     dependsOn,
-    initialValue,
     textFieldProps = {},
     variant,
     sx,
@@ -1391,13 +1370,7 @@ var Component10 = function SelectCascadeElement(props) {
       if (typeof option === "string" || typeof option === "number")
         return option;
       const key = option ? option[valueKey] : void 0;
-      if (key === void 0 || key === null) {
-        return "";
-      }
-      if (typeof key === "string" || typeof key === "number") {
-        return key;
-      }
-      return String(key);
+      return key !== void 0 && key !== null ? String(key) : "";
     },
     [valueKey]
   );
@@ -1414,8 +1387,7 @@ var Component10 = function SelectCascadeElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    defaultValue: initialValue
+    control
   });
   const theme = _material.useTheme.call(void 0, );
   const { field: dependentField } = _reacthookform.useController.call(void 0, {
@@ -1425,48 +1397,47 @@ 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 (parentValueRef.current !== dependentField.value) {
-      parentValueRef.current = dependentField.value;
+    if (!!dependentField.value && _optionalChain([parentValueRef, 'optionalAccess', _25 => _25.current]) !== dependentField.value || dependentField.value === null) {
       field.onChange(null);
       setHasAutoSelected(false);
     }
-  }, [dependentField.value, field]);
+  }, [dependentField.value]);
   _react.useEffect.call(void 0, () => {
-    if (!dependentField.value) return;
-    if (isEdit) {
-      if (field.value) return;
-      if (options.length === 1 && !hasAutoSelected) {
-        field.onChange(getOptionKey(options[0]));
-        setHasAutoSelected(true);
-      }
+    if (isEdit && !disabled && options.length === 1 && field.value == null && !hasAutoSelected) {
+      field.onChange(getOptionKey(options[0]));
+      setHasAutoSelected(true);
     } else {
-      if (options.length === 1 && !field.value && !hasAutoSelected) {
+      if (options.length === 1 && field.value == null && !hasAutoSelected) {
         field.onChange(getOptionKey(options[0]));
         setHasAutoSelected(true);
       }
     }
   }, [
-    isEdit,
     options,
     field.value,
-    dependentField.value,
-    getOptionKey,
+    field.onChange,
     hasAutoSelected,
-    field
+    isEdit,
+    disabled,
+    field,
+    getOptionKey,
+    dependentField.onChange
   ]);
-  const autocompleteValue = _nullishCoalesce(options.find((opt) => getOptionKey(opt) === field.value), () => ( null));
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _material.Autocomplete,
     {
       ...rest,
-      value: autocompleteValue,
+      value: options.map(
+        (option) => getOptionKey(option) === field.value ? option : null
+      ).find(Boolean) || null,
       size: "small",
       loading,
       options,
+      getOptionKey,
       getOptionLabel,
       isOptionEqualToValue,
       ref: field.ref,
-      disabled: !dependentField.value || disabled,
+      disabled: dependentField.value == null || disabled,
       onChange: (event, newValue, reason) => {
         field.onChange(newValue ? getOptionKey(newValue) : null);
         if (onChange && typeof onChange === "function") {
@@ -1479,6 +1450,7 @@ var Component10 = function SelectCascadeElement(props) {
           onBlur(event);
         }
       },
+      fullWidth: true,
       renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _material.TextField,
         {
@@ -1489,14 +1461,14 @@ var Component10 = function SelectCascadeElement(props) {
           helperText: error ? error.message : "",
           placeholder,
           label,
-          variant: _nullishCoalesce(variant, () => ( "outlined")),
+          variant: variant ? variant : "outlined",
           sx: {
             "& .MuiOutlinedInput-root": {
-              bgcolor: disabled || !dependentField.value ? theme.palette.action.disabledBackground : "transparent"
+              bgcolor: disabled || dependentField.value == null ? theme.palette.action.disabledBackground : "transparent"
             },
             "& .MuiInputLabel-asterisk": { color: "red" },
             "& .MuiInputBase-input": {
-              cursor: disabled || !dependentField.value ? "not-allowed" : "default"
+              cursor: disabled || dependentField.value == null ? "not-allowed" : "default"
             },
             ...sx
           }
@@ -1615,7 +1587,7 @@ var Component12 = function CheckboxGroup(props) {
     disabled: rest.disabled
   });
   const [selectedValues, setSelectedValues] = _react.useState.call(void 0, 
-    options.filter((c) => _optionalChain([field, 'access', _25 => _25.value, 'optionalAccess', _26 => _26.includes, 'call', _27 => _27(c.Value)])).map((c) => c.Value) || []
+    options.filter((c) => _optionalChain([field, 'access', _26 => _26.value, 'optionalAccess', _27 => _27.includes, 'call', _28 => _28(c.Value)])).map((c) => c.Value) || []
   );
   _react.useEffect.call(void 0, () => {
     field.onChange(selectedValues ? [...selectedValues] : []);