@aatulwork/customform-renderer 1.10.0 → 1.12.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
+import { useState, useId, useMemo, useEffect, useRef, useCallback } from 'react';
 import { Controller, useWatch, useForm } from 'react-hook-form';
-import { FormControl, FormLabel, TextField as TextField$1, InputLabel, Select, ListSubheader, MenuItem, Box, Chip, CircularProgress, InputAdornment, IconButton, OutlinedInput, FormHelperText, FormControlLabel, Checkbox, RadioGroup, Radio, Typography, Switch, Input, useTheme, alpha, useMediaQuery, Tooltip, Accordion, AccordionSummary, AccordionDetails, Alert, Stepper, Step, StepLabel, Button, Stack } from '@mui/material';
+import { FormControl, FormLabel, TextField as TextField$1, Select, ListSubheader, MenuItem, Box, Chip, CircularProgress, InputAdornment, IconButton, OutlinedInput, FormHelperText, FormControlLabel, Checkbox, RadioGroup, Radio, Typography, Switch, useTheme, alpha, useMediaQuery, Tooltip, Accordion, AccordionSummary, AccordionDetails, Alert, Stepper, Step, StepLabel, Button, Stack } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import DoubleArrowOutlinedIcon from '@mui/icons-material/DoubleArrowOutlined';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
@@ -279,12 +279,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(
@@ -297,14 +294,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
         },
@@ -506,40 +514,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
   );
@@ -1757,7 +1773,7 @@ var FormRenderer = ({
       );
       if (sectionDisplayMode === "stepper") {
         return /* @__PURE__ */ jsxs(Box, { sx: { border: "1px solid", borderColor: formColors.divider, p: 5, backgroundColor: formColors.backgroundPaper }, children: [
-          /* @__PURE__ */ jsx(Stepper, { activeStep, orientation: "horizontal", children: formSchema.sections.map((section) => /* @__PURE__ */ jsx(Step, { children: /* @__PURE__ */ jsx(StepLabel, { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { fontWeight: 600 }, children: section.title }) }) }, section.id)) }),
+          /* @__PURE__ */ jsx(Stepper, { activeStep, orientation: "horizontal", children: formSchema.sections.map((section) => /* @__PURE__ */ jsx(Step, { children: /* @__PURE__ */ jsx(StepLabel, { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: section.title }) }) }, section.id)) }),
           /* @__PURE__ */ jsx(Box, { sx: { mt: 5 }, children: formSchema.sections.map((section, sectionIndex) => {
             const sectionsLength = formSchema.sections?.length || 0;
             return /* @__PURE__ */ jsxs(
@@ -1813,7 +1829,7 @@ var FormRenderer = ({
             id: `panel-${section.id}-header`,
             children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
               /* @__PURE__ */ jsx(DoubleArrowOutlinedIcon, { fontSize: "small", sx: { color: formColors.primary } }),
-              /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { fontWeight: 600, color: formColors.primary }, children: section.title })
+              /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { color: formColors.primary }, children: section.title })
             ] })
           }
         ),