@aatulwork/customform-renderer 1.10.0 → 1.12.0

package/dist/fields.mjs

@@ -1,7 +1,7 @@
 import { Controller, useWatch } from 'react-hook-form';
-import { FormControl, FormLabel, TextField as TextField$1, FormControlLabel, Checkbox, RadioGroup, Radio, Box, Typography, Switch, Input, useTheme, FormHelperText, alpha, useMediaQuery, CircularProgress, Tooltip, IconButton, InputLabel, Select, ListSubheader, MenuItem, Chip, InputAdornment, OutlinedInput } from '@mui/material';
+import { FormControl, FormLabel, TextField as TextField$1, FormControlLabel, Checkbox, RadioGroup, Radio, Box, Typography, Switch, useTheme, FormHelperText, alpha, useMediaQuery, CircularProgress, Tooltip, IconButton, Select, ListSubheader, MenuItem, Chip, InputAdornment, OutlinedInput } from '@mui/material';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo, useRef, useEffect, useCallback, useState } from 'react';
+import { useMemo, useRef, useEffect, useCallback, useState, useId } from 'react';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
@@ -154,12 +154,9 @@ var SimpleSelect = ({
   onRefresh
 }) => {
   const [filterText, setFilterText] = useState("");
+  const selectId = useId();
   const handleChange = (event) => {
     const val = event.target.value;
-    if (val === "__refresh__") {
-      onRefresh?.();
-      return;
-    }
     onChange(val);
   };
   const filteredOptions = filterable && filterText ? options.filter(
@@ -172,14 +169,25 @@ var SimpleSelect = ({
     setFilterText("");
   };
   return /* @__PURE__ */ jsxs(FormControl, { fullWidth, size, required, error, disabled, children: [
-    /* @__PURE__ */ jsx(InputLabel, { children: label }),
+    /* @__PURE__ */ jsx(
+      FormLabel,
+      {
+        component: "label",
+        htmlFor: selectId,
+        required,
+        error,
+        sx: { mb: 0.5, display: "block" },
+        children: label
+      }
+    ),
     /* @__PURE__ */ jsxs(
       Select,
       {
+        id: selectId,
         value: value ?? (multiple ? [] : ""),
         onChange: handleChange,
         onClose: handleClose,
-        input: /* @__PURE__ */ jsx(OutlinedInput, { label }),
+        input: /* @__PURE__ */ jsx(OutlinedInput, {}),
         MenuProps: {
           autoFocus: false
         },
@@ -381,40 +389,48 @@ var ColorField = ({ field, control, defaultValue, rules, errors }) => {
       control,
       defaultValue,
       rules,
-      render: ({ field: formField }) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, width: "100%" }, children: [
-        /* @__PURE__ */ jsx(
-          FormLabel,
-          {
-            required: field.required,
-            error: !!errors[field.name],
-            children: field.label
-          }
-        ),
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1, maxWidth: 200 }, children: [
+      render: ({ field: formField }) => {
+        const inputId = `color-field-${field.name}`;
+        return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, width: "100%" }, children: [
           /* @__PURE__ */ jsx(
-            Input,
+            FormLabel,
             {
-              ...formField,
-              type: "color",
-              sx: {
-                width: "20%",
-                height: "40px",
-                cursor: "pointer",
-                border: errors[field.name] ? "1px solid red" : "1px solid rgba(0, 0, 0, 0.23)",
-                borderRadius: "4px",
-                padding: "1px"
-              },
-              inputProps: {
-                style: {
-                  height: "100%",
-                  cursor: "pointer"
-                }
-              }
+              component: "label",
+              htmlFor: inputId,
+              required: field.required,
+              error: !!errors[field.name],
+              children: field.label
             }
           ),
-          errors[field.name] && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", sx: { mt: 0.5 }, children: errors[field.name]?.message })
-        ] })
-      ] })
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1, maxWidth: 200 }, children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "input",
+                type: "color",
+                id: inputId,
+                ref: formField.ref,
+                name: formField.name,
+                value: formField.value ?? "#000000",
+                onChange: formField.onChange,
+                onBlur: formField.onBlur,
+                sx: {
+                  width: 30,
+                  height: 30,
+                  padding: 0,
+                  cursor: "pointer",
+                  backgroundColor: "transparent",
+                  border: "none",
+                  "&::-webkit-color-swatch-wrapper": { padding: 0 },
+                  "&::-webkit-color-swatch": { border: "none", borderRadius: "4px" },
+                  "&::-moz-color-swatch": { border: "none", borderRadius: "4px" }
+                }
+              }
+            ),
+            errors[field.name] && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", sx: { mt: 0.5 }, children: errors[field.name]?.message })
+          ] })
+        ] });
+      }
     },
     field.name
   );