@gnwebsoft/ui 2.18.30 → 2.18.32

package/dist/{chunk-TXO5AC4B.mjs → chunk-MRZZQRKX.mjs}

@@ -45,7 +45,6 @@ var Component = function DatePickerElement(props) {
   } = useController({
     name,
     control,
-    disabled,
     defaultValue: null
   });
   const { value, onChange } = useTransform({
@@ -65,6 +64,7 @@ var Component = function DatePickerElement(props) {
       ...field,
       value,
       label,
+      disabled,
       ...datePickerProps,
       inputRef: handleInputRef,
       onClose: (...args) => {
@@ -361,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
@@ -397,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,
@@ -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 }
   } = useController6({
     name,
-    control,
-    disabled
+    control
   });
   const [loading, setLoading] = useState2(false);
   const [selectedOption, setSelectedOption] = useState2(null);
@@ -819,8 +820,7 @@ var Component7 = function AsyncSelectMultiElement(props) {
     fieldState: { error }
   } = useController7({
     name,
-    control,
-    disabled
+    control
   });
   const multiSelectRef = useRef2(null);
   const [selectedOptions, setSelectedOptions] = useState3([]);
@@ -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) => {
@@ -987,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 {
@@ -1016,16 +1019,21 @@ var Component8 = function SelectElement(props) {
     name,
     control
   });
-  if (options.length === 1 && !field.value) {
-    field.onChange(options[0].Value);
-  }
+  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 !== null ? 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(newValue?.Value ?? null);
+          setHasAutoSelected(true);
         }
+        onChange?.(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"
           }
         }
       )
@@ -1088,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 {
@@ -1109,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([]);
@@ -1186,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";
@@ -1221,12 +1233,12 @@ var Component10 = function SelectCascadeElement(props) {
     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);
     }
@@ -1367,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";
@@ -1382,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-VNMKBB4P.mjs → chunk-OS5KT6UM.mjs}

@@ -1,8 +1,17 @@
 // src/components/ClearButton/ClearButton.tsx
 import { Button } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
-var ClearButton = ({ isSubmitting, handleClear }) => {
-  return /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: handleClear, disabled: isSubmitting, children: "Clear" });
+var ClearButton = ({ isSubmitting, handleClear, sx }) => {
+  return /* @__PURE__ */ jsx(
+    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__ */ jsx2(
     LoadingButton,
@@ -26,11 +37,11 @@ var FilterButton = ({
       disabled: !show,
       disableRipple: true,
       sx: {
-        bgcolor: "#3caed7 !important",
         display: "flex",
-        alignItems: "center"
+        alignItems: "center",
+        ...sx
       },
-      startIcon: /* @__PURE__ */ jsx2(Badge, { color: "error", variant: "standard", children: icon ? icon : /* @__PURE__ */ jsx2(FilterAltIcon, { width: "20", height: "20" }) }),
+      startIcon: /* @__PURE__ */ jsx2(Badge, { color: "error", variant: "standard", children: icon ? icon : /* @__PURE__ */ jsx2(FilterAltIcon, { width: "20", height: "20", sx: iconSx }) }),
       children: title?.trim() === "" || !title ? "Filter" : title
     }
   );
@@ -45,18 +56,29 @@ import {
   CardHeader,
   Divider,
   Grid2,
-  Typography
+  Typography,
+  useTheme as useTheme2
 } from "@mui/material";
 import ManageSearchIcon from "@mui/icons-material/ManageSearch";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var FilterWrapper = ({ children, title }) => {
+var FilterWrapper = ({
+  children,
+  title,
+  filterCount,
+  cardSx,
+  textSx,
+  icon,
+  iconSx
+}) => {
+  const theme = useTheme2();
   return /* @__PURE__ */ jsxs(
     Card,
     {
       sx: {
         position: "relative",
         borderRadius: "0px",
-        mb: 2
+        mb: 2,
+        ...cardSx
       },
       children: [
         /* @__PURE__ */ jsx3(
@@ -73,13 +95,31 @@ var FilterWrapper = ({ children, title }) => {
               alignItems: "center"
             },
             title: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-              /* @__PURE__ */ jsx3(ManageSearchIcon, { sx: { color: "#4db3a2", height: "2.5rem" } }),
-              /* @__PURE__ */ jsx3(
+              icon ? icon : /* @__PURE__ */ jsx3(
+                ManageSearchIcon,
+                {
+                  sx: {
+                    height: "2.5rem",
+                    color: theme.palette.primary.main,
+                    ...iconSx
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs(
                 Typography,
                 {
                   variant: "h5",
-                  sx: { color: "#4db3a2", fontWeight: "bold" },
-                  children: title
+                  sx: {
+                    fontWeight: "bold",
+                    color: theme.palette.primary.main,
+                    ...textSx
+                  },
+                  children: [
+                    title,
+                    " (",
+                    filterCount,
+                    ")"
+                  ]
                 }
               )
             ] })
@@ -95,6 +135,7 @@ var FilterWrapper_default = FilterWrapper;
 
 // src/components/FormWrapper/FormWrapper.tsx
 import {
+  Box as Box2,
   Card as Card2,
   CardContent as CardContent2,
   CardHeader as CardHeader2,
@@ -108,15 +149,17 @@ var FormWrapper = ({
   title,
   editMode,
   cardSx,
-  textSx
+  textSx,
+  icon,
+  actionButton
 }) => {
   return /* @__PURE__ */ jsxs2(
     Card2,
     {
       sx: {
-        ...cardSx,
         position: "relative",
-        borderRadius: "0px"
+        borderRadius: "0px",
+        ...cardSx
       },
       children: [
         /* @__PURE__ */ jsx4(
@@ -131,7 +174,23 @@ var FormWrapper = ({
                 alignSelf: "center"
               }
             },
-            title: title ?? /* @__PURE__ */ jsx4(Typography2, { color: "primary", sx: textSx, children: editMode ? `Edit ${title}` : `Create ${title}` })
+            title: /* @__PURE__ */ jsxs2(
+              Box2,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    icon ?? icon,
+                    /* @__PURE__ */ jsx4(Typography2, { color: "primary", sx: textSx, children: editMode ? `Edit ${title}` : `Create ${title}` })
+                  ] }),
+                  actionButton
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx4(Divider2, { 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__ */ jsx5(Tooltip, { title: value, arrow: true, children: /* @__PURE__ */ jsx5(
               Typography3,
               {
-                color: "#3598dc",
-                fontSize: "14px",
                 sx: {
+                  ...valueSx,
+                  fontSize: "14px",
                   wordBreak: "break-word",
                   overflow: "hidden",
                   display: "-webkit-box",
@@ -214,13 +276,14 @@ var LabelText_default = LabelText;
 
 // src/components/ListWrapper/ListWrapper.tsx
 import {
-  Box as Box2,
+  Box as Box3,
   Card as Card3,
   CardContent as CardContent3,
   CardHeader as CardHeader3,
   Divider as Divider3,
   Grid2 as Grid24,
-  Typography as Typography4
+  Typography as Typography4,
+  useTheme as useTheme3
 } from "@mui/material";
 import ManageSearchIcon2 from "@mui/icons-material/ManageSearch";
 import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -229,15 +292,22 @@ var ListWrapper = ({
   title,
   count,
   show = true,
-  actionButton
+  actionButton,
+  cardSx,
+  textSx,
+  icon,
+  iconSx,
+  showCount = true
 }) => {
+  const theme = useTheme3();
   if (!show) return /* @__PURE__ */ jsx6(Fragment, {});
   return /* @__PURE__ */ jsxs4(
     Card3,
     {
       sx: {
         position: "relative",
-        borderRadius: "0px"
+        borderRadius: "0px",
+        ...cardSx
       },
       children: [
         /* @__PURE__ */ jsx6(
@@ -254,7 +324,7 @@ var ListWrapper = ({
               alignItems: "center"
             },
             title: /* @__PURE__ */ jsxs4(
-              Box2,
+              Box3,
               {
                 sx: {
                   display: "flex",
@@ -262,14 +332,31 @@ var ListWrapper = ({
                   justifyContent: "space-between"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-                    /* @__PURE__ */ jsx6(ManageSearchIcon2, { sx: { color: "#4db3a2", height: "2.5rem" } }),
-                    /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    icon ? icon : /* @__PURE__ */ jsx6(
+                      ManageSearchIcon2,
+                      {
+                        sx: {
+                          height: "2.5rem",
+                          color: theme.palette.primary.main,
+                          ...iconSx
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs4(
                       Typography4,
                       {
                         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__ */ jsx6(Fragment, {})
+                        ]
                       }
                     )
                   ] }),
@@ -295,7 +382,7 @@ import {
   GridToolbarFilterButton,
   GridToolbarQuickFilter
 } from "@mui/x-data-grid";
-import { Box as Box3 } from "@mui/material";
+import { Box as Box4 } from "@mui/material";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var SimpleToolbar = () => /* @__PURE__ */ jsxs5(GridToolbarContainer, { children: [
   /* @__PURE__ */ jsx7(
@@ -304,22 +391,17 @@ var SimpleToolbar = () => /* @__PURE__ */ jsxs5(GridToolbarContainer, { children
       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"
       }
     }
   ),
-  /* @__PURE__ */ jsx7(Box3, { sx: { flexGrow: 1 } }),
+  /* @__PURE__ */ jsx7(Box4, { sx: { flexGrow: 1 } }),
   /* @__PURE__ */ jsx7(GridToolbarColumnsButton, {}),
   /* @__PURE__ */ jsx7(GridToolbarFilterButton, {}),
   /* @__PURE__ */ jsx7(GridToolbarExport, {})

package/dist/{chunk-CKJEER4L.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) => {
@@ -394,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,
@@ -594,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);
@@ -795,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, []);
@@ -968,6 +965,7 @@ var AsyncMultiSelect_default = AsyncSelectMultiElement2;
 
 
 
+
 var Component8 = function SelectElement(props) {
   const {
     name,
@@ -987,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,
@@ -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(_nullishCoalesce(_optionalChain([newValue, 'optionalAccess', _21 => _21.value]), () => ( null)));
+          setHasAutoSelected(true);
         }
+        _optionalChain([onChange, 'optionalCall', _22 => _22(event, newValue, reason)]);
       },
       onBlur: (event) => {
         field.onBlur();
@@ -1081,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) => {
@@ -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();
@@ -1180,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]);
@@ -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") {
@@ -1350,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] : []);