@gnwebsoft/ui 2.18.29 → 2.18.31

package/dist/{chunk-6Q6446Q3.mjs → chunk-MRZZQRKX.mjs}

@@ -9,7 +9,10 @@ import {
 import {
   useController
 } from "react-hook-form";
-import { Grid2, useForkRef } from "@mui/material";
+import {
+  Grid2,
+  useForkRef
+} from "@mui/material";
 import {
   DatePicker
 } from "@mui/x-date-pickers";
@@ -30,6 +33,8 @@ var Component = function DatePickerElement(props) {
     slotProps,
     transform,
     datePickerProps = {},
+    variant,
+    sx,
     ...rest
   } = props;
   const adapter = useLocalizationContext();
@@ -40,7 +45,6 @@ var Component = function DatePickerElement(props) {
   } = useController({
     name,
     control,
-    disabled,
     defaultValue: null
   });
   const { value, onChange } = useTransform({
@@ -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: {
@@ -355,7 +361,8 @@ var RadioButtonGroup_default = RadioButtonGroup2;
 import {
   Grid2 as Grid24,
   TextField as TextField2,
-  useForkRef as useForkRef3
+  useForkRef as useForkRef3,
+  useTheme as useTheme2
 } from "@mui/material";
 import {
   useController as useController4
@@ -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 }
   } = useController4({
     name,
-    control,
-    disabled
+    control
   });
+  const theme = useTheme2();
   const { value, onChange } = useTransform({
     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 }
   } = useController6({
     name,
-    control,
-    disabled
+    control
   });
   const [loading, setLoading] = useState2(false);
   const [selectedOption, setSelectedOption] = useState2(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 }
   } = useController7({
     name,
-    control,
-    disabled
+    control
   });
   const multiSelectRef = useRef2(null);
   const [selectedOptions, setSelectedOptions] = useState3([]);
@@ -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"
+            }
           }
         }
       ),
@@ -972,11 +988,13 @@ var AsyncMultiSelect_default = AsyncSelectMultiElement2;
 import {
   Autocomplete as Autocomplete3,
   Grid2 as Grid28,
-  TextField as TextField5
+  TextField as TextField5,
+  useTheme as useTheme3
 } from "@mui/material";
 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 {
@@ -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 }
   } = useController8({
     name,
-    control,
-    disabled
+    control
   });
+  const theme = useTheme3();
+  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 ? options.find((option) => {
+      value: field.value !== null ? 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(newValue?.Value ?? null);
+          setHasAutoSelected(true);
         }
+        onChange?.(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"
           }
         }
       )
@@ -1069,7 +1101,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 {
@@ -1081,6 +1113,8 @@ var Component9 = function SelectMultiElement(props) {
     loading = false,
     placeholder,
     label,
+    variant,
+    sx,
     ...rest
   } = props;
   const {
@@ -1088,10 +1122,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([]);
@@ -1136,6 +1169,10 @@ var Component9 = function SelectMultiElement(props) {
                 params.InputProps.endAdornment
               ] })
             }
+          },
+          variant: variant ? variant : "outlined",
+          sx: {
+            ...sx
           }
         }
       ),
@@ -1161,7 +1198,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";
@@ -1180,6 +1217,8 @@ var Component10 = function SelectCascadeElement(props) {
     label,
     dependsOn,
     initialValue,
+    variant,
+    sx,
     ...rest
   } = props;
   const {
@@ -1187,21 +1226,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);
     }
@@ -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"
+            }
           }
         }
       )
@@ -1342,7 +1379,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";
@@ -1357,10 +1394,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-IXBVE2GN.js → chunk-STC2BZ2L.js}

@@ -40,7 +40,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 +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 }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
   const { value, onChange } = _chunk6JZ35VQJjs.useTransform.call(void 0, {
     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 }
   } = _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);
@@ -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__ */ _jsxruntime.jsx.call(void 0, "li", { ...optionProps, children: option.Label }, key);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { ...optionProps, children: option.label }, key);
       }
     }
   );
@@ -798,8 +793,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, []);
@@ -926,8 +920,7 @@ var Component7 = function AsyncSelectMultiElement(props) {
           sx: {
             "& .MuiInputBase-input": {
               cursor: disabled ? "not-allowed" : "default"
-            },
-            bgcolor: disabled ? "#EEF1F5" : "transparent"
+            }
           }
         }
       ),
@@ -972,6 +965,7 @@ var AsyncMultiSelect_default = AsyncSelectMultiElement2;
 
 
 
+
 var Component8 = function SelectElement(props) {
   const {
     name,
@@ -991,19 +985,22 @@ var Component8 = function SelectElement(props) {
     fieldState: { error }
   } = _reacthookform.useController.call(void 0, {
     name,
-    control,
-    disabled
+    control
   });
-  if (options.length === 1 && field.value == null) {
-    field.onChange(options[0].value);
-  }
+  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 !== null ? _nullishCoalesce(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(_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _21 => _21.value]), () => ( null)));
+          setHasAutoSelected(true);
         }
+        _optionalChain([onChange, 'optionalCall', _22 => _22(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"
+            }
           }
         }
       )
@@ -1086,8 +1086,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) => {
@@ -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();
@@ -1185,17 +1184,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]);
@@ -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"
+            }
           }
         }
       )
@@ -1356,7 +1352,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] : []);

package/dist/components/index.d.mts

@@ -1,32 +1,41 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PropsWithChildren } from 'react';
-import { ButtonTypeMap } from '@mui/material';
+import { SxProps, ButtonTypeMap } from '@mui/material';
+import { PropsWithChildren, ReactNode } from 'react';
 import { OverrideProps } from '@mui/material/OverridableComponent';
 
 type ClearButtonProps = {
     isSubmitting: boolean;
     handleClear: () => void;
+    sx?: SxProps;
 };
-declare const ClearButton: ({ isSubmitting, handleClear }: ClearButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ClearButton: ({ isSubmitting, handleClear, sx }: ClearButtonProps) => react_jsx_runtime.JSX.Element;
 
 type FilterButtonProps = {
     isSubmitting: boolean;
     show?: boolean;
     title?: string;
     icon?: React.ReactNode;
+    sx?: SxProps;
 };
-declare const FilterButton: ({ isSubmitting, show, title, icon, }: FilterButtonProps) => react_jsx_runtime.JSX.Element;
+declare const FilterButton: ({ isSubmitting, show, title, icon, sx, }: FilterButtonProps) => react_jsx_runtime.JSX.Element;
 
 type FilterWrapperProps = PropsWithChildren<{
     title: string;
+    cardSx?: SxProps;
+    textSx?: SxProps;
+    icon?: ReactNode;
 }>;
-declare const FilterWrapper: ({ children, title }: FilterWrapperProps) => react_jsx_runtime.JSX.Element;
+declare const FilterWrapper: ({ children, title, cardSx, textSx, icon, }: FilterWrapperProps) => react_jsx_runtime.JSX.Element;
 
 type FormWrapper = PropsWithChildren<{
     title: string;
     editMode: boolean;
+    icon?: ReactNode;
+    cardSx?: SxProps;
+    textSx?: SxProps;
+    actionButton?: ReactNode;
 }>;
-declare const FormWrapper: ({ children, title, editMode }: FormWrapper) => react_jsx_runtime.JSX.Element;
+declare const FormWrapper: ({ children, title, editMode, cardSx, textSx, icon, actionButton, }: FormWrapper) => react_jsx_runtime.JSX.Element;
 
 type LabelTextProps = {
     label: string;
@@ -48,16 +57,22 @@ type LabelTextProps = {
         sm: number;
         md: number;
     };
+    labelSx?: SxProps;
+    valueSx?: SxProps;
 };
-declare const LabelText: ({ label, value, gridSize, containerSize, }: LabelTextProps) => react_jsx_runtime.JSX.Element;
+declare const LabelText: ({ label, value, gridSize, containerSize, labelSx, valueSx, }: LabelTextProps) => react_jsx_runtime.JSX.Element;
 
 type ListWrapperProps = PropsWithChildren<{
     title: string;
     count: number;
     show?: boolean;
-    actionButton?: React.ReactNode;
+    actionButton?: ReactNode;
+    cardSx?: SxProps;
+    textSx?: SxProps;
+    icon?: ReactNode;
+    showCount?: boolean;
 }>;
-declare const ListWrapper: ({ children, title, count, show, actionButton, }: ListWrapperProps) => react_jsx_runtime.JSX.Element;
+declare const ListWrapper: ({ children, title, count, show, actionButton, cardSx, textSx, icon, showCount, }: ListWrapperProps) => react_jsx_runtime.JSX.Element;
 
 declare const SimpleToolbar: () => react_jsx_runtime.JSX.Element;