@gnwebsoft/ui 2.18.29 → 2.18.31

package/dist/{chunk-A6OSZDDG.mjs → chunk-34X2YRTY.mjs}

@@ -40,7 +40,6 @@ var Component = function DatePickerElement(props) {
   } = useController({
     name,
     control,
-    disabled,
     defaultValue: null
   });
   const { value, onChange } = useTransform({
@@ -60,6 +59,7 @@ var Component = function DatePickerElement(props) {
       ...field,
       value,
       label,
+      disabled,
       ...datePickerProps,
       inputRef: handleInputRef,
       onClose: (...args) => {
@@ -77,8 +77,7 @@ var Component = function DatePickerElement(props) {
       sx: {
         "& .MuiInputBase-input": {
           cursor: disabled ? "not-allowed" : "default"
-        },
-        bgcolor: disabled ? "#EEF1F5" : "transparent"
+        }
       },
       slotProps: {
         ...slotProps,
@@ -395,8 +394,7 @@ var Component4 = function TextFieldElement(props) {
     fieldState: { error }
   } = useController4({
     name,
-    control,
-    disabled
+    control
   });
   const { value, onChange } = useTransform({
     value: field.value,
@@ -453,8 +451,7 @@ var Component4 = function TextFieldElement(props) {
       sx: {
         "& .MuiInputBase-input": {
           cursor: disabled ? "not-allowed" : "default"
-        },
-        bgcolor: disabled ? "#EEF1F5" : "transparent"
+        }
       }
     }
   );
@@ -596,8 +593,7 @@ var Component6 = function AsyncSelectElement(props) {
     fieldState: { error }
   } = useController6({
     name,
-    control,
-    disabled
+    control
   });
   const [loading, setLoading] = useState2(false);
   const [selectedOption, setSelectedOption] = useState2(null);
@@ -702,7 +698,7 @@ var Component6 = function AsyncSelectElement(props) {
       ref: selectRef,
       fullWidth: true,
       loading,
-      getOptionLabel: (option) => option.Label,
+      getOptionLabel: (option) => option.label,
       getOptionKey: (option) => option.value,
       isOptionEqualToValue: (option, val) => option.value === val.value,
       autoComplete: true,
@@ -735,14 +731,13 @@ var Component6 = function AsyncSelectElement(props) {
           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);
+        return /* @__PURE__ */ jsx6("li", { ...optionProps, children: option.label }, key);
       }
     }
   );
@@ -798,8 +793,7 @@ var Component7 = function AsyncSelectMultiElement(props) {
     fieldState: { error }
   } = useController7({
     name,
-    control,
-    disabled
+    control
   });
   const multiSelectRef = useRef2(null);
   const [selectedOptions, setSelectedOptions] = useState3([]);
@@ -926,8 +920,7 @@ var Component7 = function AsyncSelectMultiElement(props) {
           sx: {
             "& .MuiInputBase-input": {
               cursor: disabled ? "not-allowed" : "default"
-            },
-            bgcolor: disabled ? "#EEF1F5" : "transparent"
+            }
           }
         }
       ),
@@ -971,6 +964,7 @@ import {
 import {
   useController as useController8
 } from "react-hook-form";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var Component8 = function SelectElement(props) {
   const {
@@ -991,19 +985,22 @@ var Component8 = function SelectElement(props) {
     fieldState: { error }
   } = useController8({
     name,
-    control,
-    disabled
+    control
   });
-  if (options.length === 1 && field.value == null) {
-    field.onChange(options[0].value);
-  }
+  const [hasAutoSelected, setHasAutoSelected] = useState4(false);
+  useEffect4(() => {
+    if (options.length === 1 && field.value == null && !hasAutoSelected) {
+      field.onChange(options[0].value);
+      setHasAutoSelected(true);
+    }
+  }, [options, field.value, field.onChange, hasAutoSelected]);
   return /* @__PURE__ */ jsx8(
     Autocomplete3,
     {
       ...rest,
       value: field.value !== null ? options.find((option) => {
         return field.value === option.value;
-      }) ?? null : options.length === 1 ? options[0] : null,
+      }) ?? null : null,
       size: "small",
       loading,
       options,
@@ -1012,10 +1009,14 @@ var Component8 = function SelectElement(props) {
       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);
+        if (reason === "clear") {
+          field.onChange(null);
+          setHasAutoSelected(true);
+        } else {
+          field.onChange(newValue?.value ?? null);
+          setHasAutoSelected(true);
         }
+        onChange?.(event, newValue, reason);
       },
       onBlur: (event) => {
         field.onBlur();
@@ -1037,8 +1038,7 @@ var Component8 = function SelectElement(props) {
           sx: {
             "& .MuiInputBase-input": {
               cursor: disabled ? "not-allowed" : "default"
-            },
-            bgcolor: disabled ? "#EEF1F5" : "transparent"
+            }
           }
         }
       )
@@ -1067,7 +1067,7 @@ import {
 import {
   useController as useController9
 } from "react-hook-form";
-import { Fragment as Fragment3, useState as useState4 } from "react";
+import { Fragment as Fragment3, useState as useState5 } from "react";
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var Component9 = function SelectMultiElement(props) {
   const {
@@ -1086,10 +1086,9 @@ var Component9 = function SelectMultiElement(props) {
     fieldState: { error }
   } = useController9({
     name,
-    control,
-    disabled
+    control
   });
-  const [selectedOptions, setSelectedOptions] = useState4([]);
+  const [selectedOptions, setSelectedOptions] = useState5([]);
   const handleChange = (_2, selectedOptions2, reason) => {
     if (reason === "clear") {
       setSelectedOptions([]);
@@ -1109,7 +1108,7 @@ var Component9 = function SelectMultiElement(props) {
       getOptionLabel: (c) => c.Label,
       filterSelectedOptions: true,
       ref: field.ref,
-      disabled: field.disabled,
+      disabled,
       onChange: handleChange,
       onBlur: (event) => {
         field.onBlur();
@@ -1159,7 +1158,7 @@ import {
   Grid2 as Grid210,
   TextField as TextField7
 } from "@mui/material";
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useEffect as useEffect5, useRef as useRef3 } from "react";
 import {
   useController as useController10
 } from "react-hook-form";
@@ -1185,21 +1184,19 @@ var Component10 = function SelectCascadeElement(props) {
     fieldState: { error }
   } = useController10({
     name,
-    control,
-    disabled
+    control
   });
   const { field: dependentField } = useController10({
     name: dependsOn,
-    control,
-    disabled
+    control
   });
   const parentValueRef = useRef3(dependentField.value ?? null);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!!dependentField.value && parentValueRef?.current?.value !== dependentField.value || dependentField.value === null) {
       field.onChange(null);
     }
   }, [dependentField.value]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (initialValue) {
       field.onChange(initialValue);
     }
@@ -1217,7 +1214,7 @@ var Component10 = function SelectCascadeElement(props) {
       getOptionLabel: (c) => c.label,
       isOptionEqualToValue: (option, value) => option.value === value.value,
       ref: field.ref,
-      disabled: field.disabled,
+      disabled,
       onChange: (event, newValue, reason) => {
         field.onChange(newValue ? newValue.value : null);
         if (onChange && typeof onChange === "function") {
@@ -1244,8 +1241,7 @@ var Component10 = function SelectCascadeElement(props) {
           sx: {
             "& .MuiInputBase-input": {
               cursor: disabled ? "not-allowed" : "default"
-            },
-            bgcolor: disabled ? "#EEF1F5" : "transparent"
+            }
           }
         }
       )
@@ -1340,7 +1336,7 @@ import {
   FormHelperText as FormHelperText3,
   Grid2 as Grid212
 } from "@mui/material";
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect6, useState as useState6 } from "react";
 import {
   useController as useController12
 } from "react-hook-form";
@@ -1355,10 +1351,10 @@ var Component12 = function CheckboxGroup(props) {
     control,
     disabled: rest.disabled
   });
-  const [selectedValues, setSelectedValues] = useState5(
+  const [selectedValues, setSelectedValues] = useState6(
     options.filter((c) => field.value?.includes(c.value)).map((c) => c.value) || []
   );
-  useEffect5(() => {
+  useEffect6(() => {
     field.onChange(selectedValues ? [...selectedValues] : []);
   }, [selectedValues]);
   const handleChange = (event) => {

package/dist/{chunk-JP67273T.js → chunk-4E6AXVK7.js}

@@ -9,6 +9,9 @@ var _chunkDKBPCLECjs = require('./chunk-DKBPCLEC.js');
 
 
 var _reacthookform = require('react-hook-form');
+
+
+
 var _material = require('@mui/material');
 
 
@@ -30,6 +33,8 @@ var Component = function DatePickerElement(props) {
     slotProps,
     transform,
     datePickerProps = {},
+    variant,
+    sx,
     ...rest
   } = props;
   const adapter = _internals.useLocalizationContext.call(void 0, );
@@ -40,7 +45,6 @@ var Component = function DatePickerElement(props) {
   } = _reacthookform.useController.call(void 0, {
     name,
     control,
-    disabled,
     defaultValue: null
   });
   const { value, onChange } = _chunk6JZ35VQJjs.useTransform.call(void 0, {
@@ -60,6 +64,7 @@ var Component = function DatePickerElement(props) {
       ...field,
       value,
       label,
+      disabled,
       ...datePickerProps,
       inputRef: handleInputRef,
       onClose: (...args) => {
@@ -74,6 +79,7 @@ var Component = function DatePickerElement(props) {
           datePickerProps.onChange(newValue, context);
         }
       },
+      sx,
       slotProps: {
         ...slotProps,
         textField: {
@@ -361,6 +367,7 @@ var RadioButtonGroup_default = RadioButtonGroup2;
 
 
 
+
 var Component4 = function TextFieldElement(props) {
   const {
     rules = {},
@@ -373,6 +380,8 @@ var Component4 = function TextFieldElement(props) {
     label,
     placeholder,
     textFieldProps = {},
+    variant,
+    sx,
     ...rest
   } = props;
   const {
@@ -389,9 +398,9 @@ var Component4 = function TextFieldElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
+  const theme = _material.useTheme.call(void 0, );
   const { value, onChange } = _chunk6JZ35VQJjs.useTransform.call(void 0, {
     value: field.value,
     onChange: field.onChange,
@@ -443,13 +452,15 @@ var Component4 = function TextFieldElement(props) {
       error: !!error,
       helperText: error ? error.message : helperText,
       inputRef: handleInputRef,
+      variant: variant ? variant : "outlined",
       size: "small",
       sx: {
+        ...sx,
         "& .MuiInputLabel-asterisk": { color: "red" },
         "& .MuiInputBase-input": {
           cursor: disabled ? "not-allowed" : "default"
         },
-        bgcolor: disabled ? "#EEF1F5" : "transparent"
+        bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent"
       }
     }
   );
@@ -584,6 +595,8 @@ var Component6 = function AsyncSelectElement(props) {
     initialValue,
     label,
     queryFn,
+    variant,
+    sx,
     ...rest
   } = props;
   const {
@@ -591,8 +604,7 @@ var Component6 = function AsyncSelectElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
   const [loading, setLoading] = _react.useState.call(void 0, false);
   const [selectedOption, setSelectedOption] = _react.useState.call(void 0, null);
@@ -739,11 +751,12 @@ var Component6 = function AsyncSelectElement(props) {
               ] })
             }
           },
+          variant: variant ? variant : "outlined",
           sx: {
+            ...sx,
             "& .MuiInputBase-input": {
               cursor: disabled ? "not-allowed" : "default"
-            },
-            bgcolor: disabled ? "#EEF1F5" : "transparent"
+            }
           }
         }
       ),
@@ -798,6 +811,8 @@ var Component7 = function AsyncSelectMultiElement(props) {
     initialValues,
     label,
     queryFn,
+    variant,
+    sx,
     ...rest
   } = props;
   const {
@@ -805,8 +820,7 @@ var Component7 = function AsyncSelectMultiElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
   const multiSelectRef = _react.useRef.call(void 0, null);
   const [selectedOptions, setSelectedOptions] = _react.useState.call(void 0, []);
@@ -907,6 +921,7 @@ var Component7 = function AsyncSelectMultiElement(props) {
       isOptionEqualToValue: (option, val) => option.Value === val.Value,
       options,
       value: selectedOptions,
+      disabled,
       filterSelectedOptions: true,
       onChange: handleChange,
       onInputChange: (_2, newInputValue) => {
@@ -929,11 +944,12 @@ var Component7 = function AsyncSelectMultiElement(props) {
               ] })
             }
           },
+          variant: variant ? variant : "outlined",
           sx: {
+            ...sx,
             "& .MuiInputBase-input": {
               cursor: disabled ? "not-allowed" : "default"
-            },
-            bgcolor: disabled ? "#EEF1F5" : "transparent"
+            }
           }
         }
       ),
@@ -978,6 +994,8 @@ var AsyncMultiSelect_default = AsyncSelectMultiElement2;
 
 
 
+
+
 var Component8 = function SelectElement(props) {
   const {
     name,
@@ -990,6 +1008,8 @@ var Component8 = function SelectElement(props) {
     loading = false,
     placeholder,
     label,
+    variant,
+    sx,
     ...rest
   } = props;
   const {
@@ -997,14 +1017,21 @@ var Component8 = function SelectElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
+  const theme = _material.useTheme.call(void 0, );
+  const [hasAutoSelected, setHasAutoSelected] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    if (options.length === 1 && field.value == null && !hasAutoSelected) {
+      field.onChange(options[0].Value);
+      setHasAutoSelected(true);
+    }
+  }, [options, field.value, field.onChange, hasAutoSelected]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _material.Autocomplete,
     {
       ...rest,
-      value: field.value ? _nullishCoalesce(options.find((option) => {
+      value: field.value !== null ? _nullishCoalesce(options.find((option) => {
         return field.value === option.Value;
       }), () => ( null)) : null,
       loading,
@@ -1012,12 +1039,16 @@ var Component8 = function SelectElement(props) {
       getOptionLabel: (c) => c.Label,
       isOptionEqualToValue: (option, Value) => option.Value === Value.Value,
       ref: field.ref,
-      disabled: field.disabled,
+      disabled,
       onChange: (event, newValue, reason) => {
-        field.onChange(newValue ? newValue.Value : null);
-        if (onChange && typeof onChange === "function") {
-          onChange(event, newValue, reason);
+        if (reason === "clear") {
+          field.onChange(null);
+          setHasAutoSelected(true);
+        } else {
+          field.onChange(_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _21 => _21.Value]), () => ( null)));
+          setHasAutoSelected(true);
         }
+        _optionalChain([onChange, 'optionalCall', _22 => _22(event, newValue, reason)]);
       },
       onBlur: (event) => {
         field.onBlur();
@@ -1035,12 +1066,13 @@ var Component8 = function SelectElement(props) {
           helperText: error ? error.message : "",
           placeholder,
           label,
-          variant: "outlined",
+          variant: variant ? variant : "outlined",
           sx: {
+            ...sx,
             "& .MuiInputBase-input": {
               cursor: disabled ? "not-allowed" : "default"
             },
-            bgcolor: disabled ? "#EEF1F5" : "transparent"
+            bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent"
           }
         }
       )
@@ -1081,6 +1113,8 @@ var Component9 = function SelectMultiElement(props) {
     loading = false,
     placeholder,
     label,
+    variant,
+    sx,
     ...rest
   } = props;
   const {
@@ -1088,8 +1122,7 @@ var Component9 = function SelectMultiElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
   const [selectedOptions, setSelectedOptions] = _react.useState.call(void 0, []);
   const handleChange = (_2, selectedOptions2, reason) => {
@@ -1136,6 +1169,10 @@ var Component9 = function SelectMultiElement(props) {
                 params.InputProps.endAdornment
               ] })
             }
+          },
+          variant: variant ? variant : "outlined",
+          sx: {
+            ...sx
           }
         }
       ),
@@ -1180,6 +1217,8 @@ var Component10 = function SelectCascadeElement(props) {
     label,
     dependsOn,
     initialValue,
+    variant,
+    sx,
     ...rest
   } = props;
   const {
@@ -1187,17 +1226,15 @@ var Component10 = function SelectCascadeElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
   const { field: dependentField } = _reacthookform.useController.call(void 0, {
     name: dependsOn,
-    control,
-    disabled
+    control
   });
   const parentValueRef = _react.useRef.call(void 0, _nullishCoalesce(dependentField.value, () => ( null)));
   _react.useEffect.call(void 0, () => {
-    if (!!dependentField.value && _optionalChain([parentValueRef, 'optionalAccess', _21 => _21.current, 'optionalAccess', _22 => _22.Value]) !== dependentField.value || dependentField.value === null) {
+    if (!!dependentField.value && _optionalChain([parentValueRef, 'optionalAccess', _23 => _23.current, 'optionalAccess', _24 => _24.Value]) !== dependentField.value || dependentField.value === null) {
       field.onChange(null);
     }
   }, [dependentField.value]);
@@ -1219,7 +1256,7 @@ var Component10 = function SelectCascadeElement(props) {
       getOptionLabel: (c) => c.Label,
       isOptionEqualToValue: (option, value) => option.Value === value.Value,
       ref: field.ref,
-      disabled: field.disabled,
+      disabled,
       onChange: (event, newValue, reason) => {
         field.onChange(newValue ? newValue.Value : null);
         if (onChange && typeof onChange === "function") {
@@ -1242,12 +1279,12 @@ var Component10 = function SelectCascadeElement(props) {
           helperText: error ? error.message : "",
           placeholder,
           label,
-          variant: "outlined",
+          variant: variant ? variant : "outlined",
           sx: {
+            ...sx,
             "& .MuiInputBase-input": {
               cursor: disabled ? "not-allowed" : "default"
-            },
-            bgcolor: disabled ? "#EEF1F5" : "transparent"
+            }
           }
         }
       )
@@ -1358,7 +1395,7 @@ var Component12 = function CheckboxGroup(props) {
     disabled: rest.disabled
   });
   const [selectedValues, setSelectedValues] = _react.useState.call(void 0, 
-    options.filter((c) => _optionalChain([field, 'access', _23 => _23.value, 'optionalAccess', _24 => _24.includes, 'call', _25 => _25(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] : []);