@aatulwork/customform-renderer 1.10.0 → 1.12.0

package/dist/fields.js

@@ -164,12 +164,9 @@ var SimpleSelect = ({
   onRefresh
 }) => {
   const [filterText, setFilterText] = react.useState("");
+  const selectId = react.useId();
   const handleChange = (event) => {
     const val = event.target.value;
-    if (val === "__refresh__") {
-      onRefresh?.();
-      return;
-    }
     onChange(val);
   };
   const filteredOptions = filterable && filterText ? options.filter(
@@ -182,14 +179,25 @@ var SimpleSelect = ({
     setFilterText("");
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth, size, required, error, disabled, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.FormLabel,
+      {
+        component: "label",
+        htmlFor: selectId,
+        required,
+        error,
+        sx: { mb: 0.5, display: "block" },
+        children: label
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       material.Select,
       {
+        id: selectId,
         value: value ?? (multiple ? [] : ""),
         onChange: handleChange,
         onClose: handleClose,
-        input: /* @__PURE__ */ jsxRuntime.jsx(material.OutlinedInput, { label }),
+        input: /* @__PURE__ */ jsxRuntime.jsx(material.OutlinedInput, {}),
         MenuProps: {
           autoFocus: false
         },
@@ -391,40 +399,48 @@ var ColorField = ({ field, control, defaultValue, rules, errors }) => {
       control,
       defaultValue,
       rules,
-      render: ({ field: formField }) => /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 2, width: "100%" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          material.FormLabel,
-          {
-            required: field.required,
-            error: !!errors[field.name],
-            children: field.label
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", flex: 1, maxWidth: 200 }, children: [
+      render: ({ field: formField }) => {
+        const inputId = `color-field-${field.name}`;
+        return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 2, width: "100%" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            material.Input,
+            material.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__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "error", sx: { mt: 0.5 }, children: errors[field.name]?.message })
-        ] })
-      ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", flex: 1, maxWidth: 200 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.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__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "error", sx: { mt: 0.5 }, children: errors[field.name]?.message })
+          ] })
+        ] });
+      }
     },
     field.name
   );