@gnwebsoft/ui 2.18.30 → 2.18.32

package/dist/{chunk-LWAM2GIC.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) => {
@@ -394,8 +394,7 @@ var Component4 = function TextFieldElement(props) {
     fieldState: { error }
   } = useController4({
     name,
-    control,
-    disabled
+    control
   });
   const { value, onChange } = useTransform({
     value: field.value,
@@ -594,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);
@@ -795,8 +793,7 @@ var Component7 = function AsyncSelectMultiElement(props) {
     fieldState: { error }
   } = useController7({
     name,
-    control,
-    disabled
+    control
   });
   const multiSelectRef = useRef2(null);
   const [selectedOptions, setSelectedOptions] = useState3([]);
@@ -967,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 {
@@ -987,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,
@@ -1008,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();
@@ -1062,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 {
@@ -1081,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([]);
@@ -1104,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();
@@ -1154,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";
@@ -1180,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);
     }
@@ -1212,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") {
@@ -1334,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";
@@ -1349,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-AZOXVTXB.js → chunk-4E6AXVK7.js}

@@ -45,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, {
@@ -65,6 +64,7 @@ var Component = function DatePickerElement(props) {
       ...field,
       value,
       label,
+      disabled,
       ...datePickerProps,
       inputRef: handleInputRef,
       onClose: (...args) => {
@@ -367,6 +367,7 @@ var RadioButtonGroup_default = RadioButtonGroup2;
 
 
 
+
 var Component4 = function TextFieldElement(props) {
   const {
     rules = {},
@@ -397,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,
@@ -458,7 +459,8 @@ var Component4 = function TextFieldElement(props) {
         "& .MuiInputLabel-asterisk": { color: "red" },
         "& .MuiInputBase-input": {
           cursor: disabled ? "not-allowed" : "default"
-        }
+        },
+        bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent"
       }
     }
   );
@@ -602,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);
@@ -819,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, []);
@@ -921,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) => {
@@ -993,6 +994,8 @@ var AsyncMultiSelect_default = AsyncSelectMultiElement2;
 
 
 
+
+
 var Component8 = function SelectElement(props) {
   const {
     name,
@@ -1016,16 +1019,21 @@ var Component8 = function SelectElement(props) {
     name,
     control
   });
-  if (options.length === 1 && !field.value) {
-    field.onChange(options[0].Value);
-  }
+  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 !== null ? _nullishCoalesce(options.find((option) => {
         return field.value === option.Value;
-      }), () => ( null)) : options.length === 1 ? options[0] : null,
+      }), () => ( null)) : null,
       loading,
       options,
       getOptionLabel: (c) => c.Label,
@@ -1033,10 +1041,14 @@ var Component8 = function SelectElement(props) {
       ref: field.ref,
       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();
@@ -1059,7 +1071,8 @@ var Component8 = function SelectElement(props) {
             ...sx,
             "& .MuiInputBase-input": {
               cursor: disabled ? "not-allowed" : "default"
-            }
+            },
+            bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent"
           }
         }
       )
@@ -1109,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) => {
@@ -1222,7 +1234,7 @@ var Component10 = function SelectCascadeElement(props) {
   });
   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]);
@@ -1383,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] : []);

package/dist/{chunk-LNMCA2OM.js → chunk-HTRRCH33.js}

@@ -1,8 +1,17 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/ClearButton/ClearButton.tsx
 var _material = require('@mui/material');
 var _jsxruntime = require('react/jsx-runtime');
-var ClearButton = ({ isSubmitting, handleClear }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { variant: "outlined", onClick: handleClear, disabled: isSubmitting, children: "Clear" });
+var ClearButton = ({ isSubmitting, handleClear, sx }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Button,
+    {
+      variant: "outlined",
+      onClick: handleClear,
+      disabled: isSubmitting,
+      sx,
+      children: "Clear"
+    }
+  );
 };
 var ClearButton_default = ClearButton;
 
@@ -15,7 +24,9 @@ var FilterButton = ({
   isSubmitting,
   show,
   title,
-  icon
+  icon,
+  sx,
+  iconSx
 }) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _lab.LoadingButton,
@@ -26,11 +37,11 @@ var FilterButton = ({
       disabled: !show,
       disableRipple: true,
       sx: {
-        bgcolor: "#3caed7 !important",
         display: "flex",
-        alignItems: "center"
+        alignItems: "center",
+        ...sx
       },
-      startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Badge, { color: "error", variant: "standard", children: icon ? icon : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FilterAlt2.default, { width: "20", height: "20" }) }),
+      startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Badge, { color: "error", variant: "standard", children: icon ? icon : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FilterAlt2.default, { width: "20", height: "20", sx: iconSx }) }),
       children: _optionalChain([title, 'optionalAccess', _ => _.trim, 'call', _2 => _2()]) === "" || !title ? "Filter" : title
     }
   );
@@ -47,16 +58,27 @@ var FilterButton_default = FilterButton;
 
 
 
+
 var _ManageSearch = require('@mui/icons-material/ManageSearch'); var _ManageSearch2 = _interopRequireDefault(_ManageSearch);
 
-var FilterWrapper = ({ children, title }) => {
+var FilterWrapper = ({
+  children,
+  title,
+  filterCount,
+  cardSx,
+  textSx,
+  icon,
+  iconSx
+}) => {
+  const theme = _material.useTheme.call(void 0, );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _material.Card,
     {
       sx: {
         position: "relative",
         borderRadius: "0px",
-        mb: 2
+        mb: 2,
+        ...cardSx
       },
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -73,13 +95,31 @@ var FilterWrapper = ({ children, title }) => {
               alignItems: "center"
             },
             title: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ManageSearch2.default, { sx: { color: "#4db3a2", height: "2.5rem" } }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              icon ? icon : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _ManageSearch2.default,
+                {
+                  sx: {
+                    height: "2.5rem",
+                    color: theme.palette.primary.main,
+                    ...iconSx
+                  }
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                 _material.Typography,
                 {
                   variant: "h5",
-                  sx: { color: "#4db3a2", fontWeight: "bold" },
-                  children: title
+                  sx: {
+                    fontWeight: "bold",
+                    color: theme.palette.primary.main,
+                    ...textSx
+                  },
+                  children: [
+                    title,
+                    " (",
+                    filterCount,
+                    ")"
+                  ]
                 }
               )
             ] })
@@ -103,20 +143,23 @@ var FilterWrapper_default = FilterWrapper;
 
 
 
+
 var FormWrapper = ({
   children,
   title,
   editMode,
   cardSx,
-  textSx
+  textSx,
+  icon,
+  actionButton
 }) => {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _material.Card,
     {
       sx: {
-        ...cardSx,
         position: "relative",
-        borderRadius: "0px"
+        borderRadius: "0px",
+        ...cardSx
       },
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -131,7 +174,23 @@ var FormWrapper = ({
                 alignSelf: "center"
               }
             },
-            title: _nullishCoalesce(title, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { color: "primary", sx: textSx, children: editMode ? `Edit ${title}` : `Create ${title}` })))
+            title: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              _material.Box,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    _nullishCoalesce(icon, () => ( icon)),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { color: "primary", sx: textSx, children: editMode ? `Edit ${title}` : `Create ${title}` })
+                  ] }),
+                  actionButton
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, { sx: { mt: 0 } }),
@@ -149,7 +208,9 @@ var LabelText = ({
   label,
   value,
   gridSize,
-  containerSize
+  containerSize,
+  labelSx,
+  valueSx
 }) => {
   const defaultGridSize = {
     labelSize: { xs: 6, sm: 6, md: 6 },
@@ -173,6 +234,7 @@ var LabelText = ({
           {
             size: size.labelSize,
             sx: {
+              ...labelSx,
               padding: "5px",
               fontSize: "14px",
               textAlign: { xs: "left", sm: "right", md: "right" }
@@ -191,9 +253,9 @@ var LabelText = ({
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: value, arrow: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               _material.Typography,
               {
-                color: "#3598dc",
-                fontSize: "14px",
                 sx: {
+                  ...valueSx,
+                  fontSize: "14px",
                   wordBreak: "break-word",
                   overflow: "hidden",
                   display: "-webkit-box",
@@ -224,20 +286,28 @@ var LabelText_default = LabelText;
 
 
 
+
 var ListWrapper = ({
   children,
   title,
   count,
   show = true,
-  actionButton
+  actionButton,
+  cardSx,
+  textSx,
+  icon,
+  iconSx,
+  showCount = true
 }) => {
+  const theme = _material.useTheme.call(void 0, );
   if (!show) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {});
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _material.Card,
     {
       sx: {
         position: "relative",
-        borderRadius: "0px"
+        borderRadius: "0px",
+        ...cardSx
       },
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -263,13 +333,30 @@ var ListWrapper = ({
                 },
                 children: [
                   /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ManageSearch2.default, { sx: { color: "#4db3a2", height: "2.5rem" } }),
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    icon ? icon : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      _ManageSearch2.default,
+                      {
+                        sx: {
+                          height: "2.5rem",
+                          color: theme.palette.primary.main,
+                          ...iconSx
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                       _material.Typography,
                       {
                         variant: "h5",
-                        sx: { color: "#4db3a2", fontWeight: "bold" },
-                        children: `${title} (${count ? count : 0})`
+                        sx: {
+                          fontWeight: "bold",
+                          color: theme.palette.primary.main,
+                          ...textSx
+                        },
+                        children: [
+                          title,
+                          " ",
+                          showCount ? `(${count ? count : 0})` : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {})
+                        ]
                       }
                     )
                   ] }),
@@ -304,18 +391,13 @@ var SimpleToolbar = () => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _xdatagr
       sx: {
         "& .MuiInputBase-root": {
           borderRadius: "8px",
-          padding: "6px 10px",
-          backgroundColor: "#f6f7f8"
+          padding: "6px 10px"
         },
         "& input": {
           fontSize: "14px",
           color: "#333"
         },
-        borderRadius: "8px",
-        ".css-hzgntl-MuiOutlinedInput-notchedOutline": {
-          borderRadius: "8px",
-          border: "1px solid #efefef !important"
-        }
+        borderRadius: "8px"
       }
     }
   ),