@form-eng/mui 1.0.0

package/dist/index.mjs

@@ -0,0 +1,995 @@
+// src/fields/Textbox.tsx
+import { TextField } from "@mui/material";
+
+// src/components/ReadOnlyText.tsx
+import { Typography } from "@mui/material";
+import { Fragment, jsx } from "react/jsx-runtime";
+var ReadOnlyText = (props) => {
+  const { value, fieldName, valueClassName, showControlOnSide, containerClassName, ellipsifyTextCharacters } = props;
+  const classNameValue = valueClassName === void 0 ? "read-only-field" : valueClassName;
+  const cutoff = (ellipsifyTextCharacters || 0) - 3;
+  return /* @__PURE__ */ jsx("div", { className: `${showControlOnSide ? "flexBox" : ""} ${containerClassName ?? ""}`, children: /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "body2",
+      id: `${fieldName}-read-only`,
+      className: classNameValue,
+      title: value,
+      component: "span",
+      children: value ? /* @__PURE__ */ jsx(Fragment, { children: ellipsifyTextCharacters && value.length > ellipsifyTextCharacters ? `${value.substring(0, cutoff)}...` : value }) : /* @__PURE__ */ jsx(Fragment, { children: "-" })
+    }
+  ) });
+};
+
+// src/helpers.ts
+var FieldClassName = (className, error) => {
+  return error ? `${className} error` : className;
+};
+var GetFieldDataTestId = (fieldName, programName, entityType, entityId) => {
+  return `${programName}-${entityType}-${entityId}-${fieldName}`;
+};
+function formatDateTime(dateStr, options) {
+  if (!dateStr) return "";
+  const date = new Date(dateStr);
+  if (isNaN(date.getTime())) return dateStr;
+  if (options?.hideTimestamp) {
+    return date.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+  }
+  return date.toLocaleString(void 0, { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+}
+var DocumentLinksStrings = {
+  link: "Link",
+  addLink: "Add Link",
+  addAnotherLink: "Add Another Link",
+  deleteLink: "Delete Link",
+  confirmDeleteLink: "Are you sure you want to delete",
+  delete: "Delete",
+  cancel: "Cancel",
+  saveChanges: "Save Changes",
+  save: "Save"
+};
+
+// src/fields/Textbox.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Textbox = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, placeholder, setFieldValue } = props;
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value, false, 3e3);
+  };
+  return readOnly ? /* @__PURE__ */ jsx2(
+    ReadOnlyText,
+    {
+      fieldName,
+      value,
+      ellipsifyTextCharacters: config?.ellipsifyTextCharacters
+    }
+  ) : /* @__PURE__ */ jsx2(
+    TextField,
+    {
+      className: FieldClassName("hook-textbox", error),
+      autoComplete: "off",
+      value: value ?? "",
+      onChange,
+      size: "small",
+      fullWidth: true,
+      error: !!error,
+      required,
+      placeholder: placeholder ?? config?.placeHolder,
+      helperText: error?.message,
+      inputProps: {
+        "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+      }
+    }
+  );
+};
+var Textbox_default = Textbox;
+
+// src/fields/Number.tsx
+import { isNull } from "@form-eng/core";
+import { TextField as TextField2 } from "@mui/material";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var NumberField = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, setFieldValue } = props;
+  const onChange = (event) => {
+    const number = Number(event.target.value);
+    if (!isNaN(number)) {
+      setFieldValue(fieldName, number, false, 1500);
+    }
+  };
+  return readOnly ? /* @__PURE__ */ jsx3(ReadOnlyText, { fieldName, value: String(value) }) : /* @__PURE__ */ jsx3(
+    TextField2,
+    {
+      className: FieldClassName("hook-number", error),
+      autoComplete: "off",
+      type: "number",
+      value: !isNull(value) ? String(value) : "",
+      onChange,
+      size: "small",
+      fullWidth: true,
+      error: !!error,
+      required,
+      helperText: error?.message,
+      inputProps: {
+        "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+      }
+    }
+  );
+};
+var Number_default = NumberField;
+
+// src/fields/Toggle.tsx
+import { convertBooleanToYesOrNoText } from "@form-eng/core";
+import { Switch, FormControlLabel } from "@mui/material";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Toggle = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  const onChange = (_, checked) => {
+    setFieldValue(fieldName, checked);
+  };
+  return readOnly ? /* @__PURE__ */ jsx4(ReadOnlyText, { fieldName, value: convertBooleanToYesOrNoText(value) }) : /* @__PURE__ */ jsx4(
+    FormControlLabel,
+    {
+      className: "hook-toggle",
+      control: /* @__PURE__ */ jsx4(
+        Switch,
+        {
+          checked: value,
+          onChange,
+          "aria-invalid": !!error,
+          "aria-required": required,
+          "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+        }
+      ),
+      label: ""
+    }
+  );
+};
+var Toggle_default = Toggle;
+
+// src/fields/Dropdown.tsx
+import { FormControl, Select, MenuItem } from "@mui/material";
+import React from "react";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var Dropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, placeholder, options, setFieldValue } = props;
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value);
+  };
+  React.useEffect(() => {
+    if (!value && !readOnly && config?.setDefaultKeyIfOnlyOneOption && options?.length === 1) {
+      setFieldValue(fieldName, String(options[0].value));
+    }
+  }, [options]);
+  return readOnly ? /* @__PURE__ */ jsx5(ReadOnlyText, { fieldName, value }) : /* @__PURE__ */ jsx5(FormControl, { fullWidth: true, size: "small", error: !!error, required, children: /* @__PURE__ */ jsxs(
+    Select,
+    {
+      className: FieldClassName("hook-dropdown", error),
+      value: value ? String(value) : "",
+      onChange,
+      displayEmpty: true,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: [
+        !value && (placeholder ?? config?.placeHolder) && /* @__PURE__ */ jsx5(MenuItem, { value: "", disabled: true, children: placeholder ?? config?.placeHolder }),
+        options?.map((option) => /* @__PURE__ */ jsx5(MenuItem, { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+      ]
+    }
+  ) });
+};
+var Dropdown_default = Dropdown;
+
+// src/fields/MultiSelect.tsx
+import { FormControl as FormControl2, Select as Select2, MenuItem as MenuItem2, Chip, Box } from "@mui/material";
+import { useFormContext } from "react-hook-form";
+import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
+var MultiSelect = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  const { watch } = useFormContext();
+  const selectedOptions = watch(`${fieldName}`) ?? [];
+  const onChange = (event) => {
+    const newValue = event.target.value;
+    setFieldValue(fieldName, typeof newValue === "string" ? newValue.split(",") : newValue, false, 1500);
+  };
+  return readOnly ? /* @__PURE__ */ jsx6(Fragment2, { children: value && value.length > 0 ? /* @__PURE__ */ jsx6(Box, { className: "hook-multi-select-read-only", sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: value.map((v) => /* @__PURE__ */ jsx6(Chip, { label: v, size: "small" }, v)) }) : null }) : /* @__PURE__ */ jsx6(FormControl2, { fullWidth: true, size: "small", error: !!error, required, children: /* @__PURE__ */ jsx6(
+    Select2,
+    {
+      className: FieldClassName("hook-multi-select", error),
+      multiple: true,
+      value: selectedOptions,
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      renderValue: (selected) => /* @__PURE__ */ jsx6(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: selected.map((val) => /* @__PURE__ */ jsx6(Chip, { label: val, size: "small" }, val)) }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ jsx6(MenuItem2, { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+    }
+  ) });
+};
+var MultiSelect_default = MultiSelect;
+
+// src/fields/DateControl.tsx
+import { FormStrings } from "@form-eng/core";
+import { TextField as TextField3, IconButton } from "@mui/material";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var DateControl = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  const onChange = (event) => {
+    const date = new Date(event.target.value);
+    if (!isNaN(date.getTime())) {
+      setFieldValue(fieldName, date.toISOString());
+    }
+  };
+  const onClearDate = () => {
+    setFieldValue(fieldName, null);
+  };
+  const dateInputValue = value ? new Date(value).toISOString().split("T")[0] : "";
+  return readOnly ? /* @__PURE__ */ jsx7(Fragment3, { children: value ? /* @__PURE__ */ jsx7("span", { className: "hook-read-only-date", children: formatDateTime(value, { hideTimestamp: true }) }) : /* @__PURE__ */ jsx7(Fragment3, { children: "-" }) }) : /* @__PURE__ */ jsxs2("div", { className: "hook-date-control-container", style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+    /* @__PURE__ */ jsx7(
+      TextField3,
+      {
+        className: FieldClassName("hook-date-control", error),
+        type: "date",
+        value: dateInputValue,
+        onChange,
+        size: "small",
+        fullWidth: true,
+        error: !!error,
+        required,
+        helperText: error?.message,
+        InputLabelProps: { shrink: true },
+        inputProps: {
+          "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      IconButton,
+      {
+        size: "small",
+        onClick: onClearDate,
+        title: FormStrings.clickToClear,
+        "aria-label": `${fieldName} ${FormStrings.clear}`,
+        children: "\u2715"
+      }
+    )
+  ] });
+};
+var DateControl_default = DateControl;
+
+// src/fields/Slider.tsx
+import { Slider as MuiSlider } from "@mui/material";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Slider = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, setFieldValue } = props;
+  const onChange = (_, newValue) => {
+    setFieldValue(fieldName, newValue);
+  };
+  return readOnly ? /* @__PURE__ */ jsx8(ReadOnlyText, { fieldName, value: String(value) }) : /* @__PURE__ */ jsx8(
+    MuiSlider,
+    {
+      className: FieldClassName("hook-slider", error),
+      value: value ?? 0,
+      onChange,
+      max: config?.max,
+      min: config?.min,
+      step: config?.step,
+      valueLabelDisplay: "auto",
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Slider_default = Slider;
+
+// src/fields/DynamicFragment.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var DynamicFragment = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ jsx9("input", { type: "hidden", value });
+};
+var DynamicFragment_default = DynamicFragment;
+
+// src/fields/SimpleDropdown.tsx
+import { FormControl as FormControl3, Select as Select3, MenuItem as MenuItem3 } from "@mui/material";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var SimpleDropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, placeholder, setFieldValue } = props;
+  const simpleOptions = config?.dropdownOptions ?? [];
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value);
+  };
+  return readOnly ? /* @__PURE__ */ jsx10(ReadOnlyText, { fieldName, value }) : /* @__PURE__ */ jsx10(FormControl3, { fullWidth: true, size: "small", error: !!error, required, children: /* @__PURE__ */ jsxs3(
+    Select3,
+    {
+      className: FieldClassName("hook-dropdown", error),
+      value: value ?? "",
+      onChange,
+      displayEmpty: true,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: [
+        !value && (placeholder ?? config?.placeHolder) && /* @__PURE__ */ jsx10(MenuItem3, { value: "", disabled: true, children: placeholder ?? config?.placeHolder }),
+        simpleOptions.map((option) => /* @__PURE__ */ jsx10(MenuItem3, { value: option, children: option }, option))
+      ]
+    }
+  ) });
+};
+var SimpleDropdown_default = SimpleDropdown;
+
+// src/fields/MultiSelectSearch.tsx
+import { Autocomplete, TextField as TextField4, Chip as Chip2, Box as Box2 } from "@mui/material";
+import { Fragment as Fragment4, jsx as jsx11 } from "react/jsx-runtime";
+import { createElement } from "react";
+var MultiSelectSearch = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options: dropdownOptions, setFieldValue } = props;
+  const selectedValues = value ?? [];
+  const mappedOptions = dropdownOptions?.map((o) => ({
+    value: String(o.value),
+    label: o.label,
+    disabled: !!o.disabled
+  })) ?? [];
+  const onChange = (_, newValue) => {
+    setFieldValue(fieldName, newValue.map((v) => v.value), false, 3e3);
+  };
+  return readOnly ? /* @__PURE__ */ jsx11(Fragment4, { children: value && value.length > 0 ? /* @__PURE__ */ jsx11(Box2, { className: "hook-multi-select-search-read-only", sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: value.map((v) => /* @__PURE__ */ jsx11(Chip2, { label: v, size: "small" }, v)) }) : null }) : /* @__PURE__ */ jsx11(
+    Autocomplete,
+    {
+      className: FieldClassName("hook-multi-select-search", error),
+      multiple: true,
+      freeSolo: true,
+      "aria-required": required,
+      options: mappedOptions,
+      getOptionLabel: (option) => typeof option === "string" ? option : option.label,
+      getOptionDisabled: (option) => typeof option === "string" ? false : !!option.disabled,
+      value: mappedOptions.filter((o) => selectedValues.includes(o.value)),
+      onChange,
+      renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ createElement(
+        Chip2,
+        {
+          size: "small",
+          label: typeof option === "string" ? option : option.label,
+          ...getTagProps({ index }),
+          key: typeof option === "string" ? option : option.value
+        }
+      )),
+      renderInput: (params) => /* @__PURE__ */ jsx11(
+        TextField4,
+        {
+          ...params,
+          size: "small",
+          error: !!error,
+          required,
+          helperText: error?.message,
+          inputProps: {
+            ...params.inputProps,
+            "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+          }
+        }
+      )
+    }
+  );
+};
+var MultiSelectSearch_default = MultiSelectSearch;
+
+// src/fields/PopOutEditor.tsx
+import { FormStrings as FormStrings3 } from "@form-eng/core";
+import {
+  TextField as TextField5,
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  IconButton as IconButton2
+} from "@mui/material";
+import { useState } from "react";
+
+// src/components/StatusMessage.tsx
+import { FormStrings as FormStrings2 } from "@form-eng/core";
+import { CircularProgress } from "@mui/material";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var StatusMessage = (props) => {
+  const { id, error, errorCount, savePending, saving } = props;
+  return /* @__PURE__ */ jsx12("div", { className: "message", children: error ? /* @__PURE__ */ jsxs4(Fragment5, { children: [
+    /* @__PURE__ */ jsx12("span", { className: "error-icon", style: { color: "#d32f2f", fontSize: "16px" }, children: "\u26A0" }),
+    /* @__PURE__ */ jsx12("span", { className: "error-message", id, role: "alert", children: error.message || "Error" })
+  ] }) : savePending ? /* @__PURE__ */ jsxs4(Fragment5, { children: [
+    /* @__PURE__ */ jsx12("span", { className: "warning-icon", style: { color: "#ed6c02", fontSize: "16px" }, children: "\u26A0" }),
+    /* @__PURE__ */ jsxs4("span", { className: "warning-message", id, role: "alert", children: [
+      FormStrings2.autoSavePending,
+      " (",
+      errorCount,
+      " ",
+      FormStrings2.remaining,
+      ")"
+    ] })
+  ] }) : saving ? /* @__PURE__ */ jsxs4(Fragment5, { children: [
+    /* @__PURE__ */ jsx12(CircularProgress, { size: 16 }),
+    /* @__PURE__ */ jsx12("span", { className: "save-message", id, role: "alert", children: FormStrings2.saving })
+  ] }) : null });
+};
+
+// src/fields/PopOutEditor.tsx
+import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var PopOutEditor = (props) => {
+  const {
+    error,
+    fieldName,
+    programName,
+    entityType,
+    entityId,
+    config,
+    readOnly,
+    required,
+    savePending,
+    saving,
+    value,
+    label,
+    setFieldValue
+  } = props;
+  const [modalValue, setModalValue] = useState();
+  const [modalVisible, setModalVisible] = useState(false);
+  const [dialogVisible, setDialogVisible] = useState(false);
+  const onChange = (event) => {
+    const newValue = event.target.value;
+    modalVisible ? setModalValue(newValue) : setFieldValue(fieldName, newValue, false, 3e3);
+  };
+  const onExpandButtonClick = () => {
+    setModalVisible(true);
+    setModalValue(value ? `${value}` : "");
+  };
+  const onSaveButtonClick = () => {
+    setFieldValue(fieldName, modalValue, false);
+    setDialogVisible(false);
+    setModalVisible(false);
+    config?.saveCallback?.();
+  };
+  const onCancelButtonClick = () => {
+    if (dialogVisible) {
+      setDialogVisible(false);
+      setModalVisible(false);
+    } else if (modalValue !== value) {
+      setDialogVisible(true);
+    } else {
+      setModalVisible(false);
+    }
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ jsx13(
+      ReadOnlyText,
+      {
+        fieldName,
+        value: value ? `${value}` : "",
+        ellipsifyTextCharacters: config?.ellipsifyTextCharacters
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5(Fragment6, { children: [
+    /* @__PURE__ */ jsxs5("div", { className: "hook-textarea", children: [
+      /* @__PURE__ */ jsx13(
+        TextField5,
+        {
+          className: FieldClassName("hook-text-area", error),
+          autoComplete: "off",
+          multiline: true,
+          rows: config?.numberOfRows ?? 4,
+          value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+          onChange,
+          size: "small",
+          fullWidth: true,
+          error: !!error,
+          helperText: error?.message,
+          inputProps: {
+            "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        Button,
+        {
+          className: "expand-button",
+          variant: "outlined",
+          size: "small",
+          onClick: onExpandButtonClick,
+          "aria-label": FormStrings3.openExpandedTextEditor,
+          sx: { mt: 1 },
+          children: FormStrings3.expand
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5(
+      Dialog,
+      {
+        open: modalVisible,
+        onClose: onCancelButtonClick,
+        maxWidth: "md",
+        fullWidth: true,
+        children: [
+          /* @__PURE__ */ jsxs5(DialogTitle, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsxs5("span", { children: [
+              label,
+              required && /* @__PURE__ */ jsx13("span", { className: "required-indicator", children: " *" })
+            ] }),
+            /* @__PURE__ */ jsx13(
+              IconButton2,
+              {
+                size: "small",
+                onClick: onCancelButtonClick,
+                "aria-label": FormStrings3.closeExpandedTextEditor,
+                children: "\u2715"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx13(DialogContent, { children: /* @__PURE__ */ jsx13(
+            TextField5,
+            {
+              className: FieldClassName("hook-text-area", error),
+              autoComplete: "off",
+              multiline: true,
+              rows: 12,
+              value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+              onChange,
+              fullWidth: true,
+              error: !!error,
+              sx: { mt: 1 }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs5(DialogActions, { children: [
+            config?.renderExtraModalFooter && /* @__PURE__ */ jsx13("div", { className: "custom-footer", children: config.renderExtraModalFooter() }),
+            /* @__PURE__ */ jsx13("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (savePending || saving) && /* @__PURE__ */ jsx13(StatusMessage, { savePending: !error ? savePending : void 0, saving, error }) }),
+            /* @__PURE__ */ jsx13(Button, { variant: "outlined", onClick: onCancelButtonClick, children: FormStrings3.cancel }),
+            /* @__PURE__ */ jsx13(
+              Button,
+              {
+                variant: "contained",
+                onClick: onSaveButtonClick,
+                disabled: !config?.saveCallback && modalValue === value,
+                "data-testid": `${programName}-${entityType}-${entityId}-save-note`,
+                children: FormStrings3.save
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs5(Dialog, { open: dialogVisible, onClose: () => setDialogVisible(false), children: [
+      /* @__PURE__ */ jsx13(DialogTitle, { children: FormStrings3.unsavedChanges }),
+      /* @__PURE__ */ jsx13(DialogContent, { children: FormStrings3.saveChangesTo(label) }),
+      /* @__PURE__ */ jsxs5(DialogActions, { children: [
+        /* @__PURE__ */ jsx13(Button, { variant: "outlined", onClick: onCancelButtonClick, children: FormStrings3.dontSave }),
+        /* @__PURE__ */ jsx13(Button, { variant: "contained", onClick: onSaveButtonClick, children: FormStrings3.save })
+      ] })
+    ] })
+  ] });
+};
+var PopOutEditor_default = PopOutEditor;
+
+// src/fields/DocumentLinks.tsx
+import { FormStrings as FormStrings4, FormConstants } from "@form-eng/core";
+import {
+  Button as Button2,
+  IconButton as IconButton3,
+  TextField as TextField6,
+  Dialog as Dialog2,
+  DialogTitle as DialogTitle2,
+  DialogContent as DialogContent2,
+  DialogActions as DialogActions2,
+  List,
+  ListItem,
+  ListItemText,
+  Tooltip,
+  Typography as Typography2
+} from "@mui/material";
+import React3 from "react";
+import { Controller, useForm, useFormContext as useFormContext2 } from "react-hook-form";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var DocumentLinkItem = (props) => {
+  const {
+    fieldName,
+    programName,
+    entityType,
+    entityId,
+    readOnly,
+    index,
+    title,
+    url,
+    addNewLink,
+    saveLinks,
+    onCancelAddLink,
+    onConfirmDeleteLink
+  } = props;
+  const { confirm, cancel, linkTitleLabel, linkUrlLabel, add, edit, deleteLabel } = FormStrings4;
+  const [editingLink, setEditingLink] = React3.useState(false);
+  const { control, handleSubmit, setValue, reset, trigger } = useForm({
+    mode: "onChange",
+    defaultValues: { title: addNewLink ? "" : title, url: addNewLink ? "" : url }
+  });
+  const onSubmit = (data) => {
+    saveLinks({ title: data.title, url: data.url }, addNewLink, index);
+    setEditingLink(false);
+  };
+  React3.useEffect(() => {
+    setEditingLink(addNewLink);
+  }, [title, url, addNewLink]);
+  const onLinkTitleChange = (e) => {
+    setValue("title", e.target.value);
+    trigger("title");
+  };
+  const onLinkUrlChange = (e) => {
+    setValue("url", e.target.value);
+    trigger("url");
+  };
+  const onEditDocumentLink = () => setEditingLink(true);
+  const onCancelFormChanges = () => {
+    reset();
+    setEditingLink(false);
+    onCancelAddLink?.();
+  };
+  const onDelete = () => onConfirmDeleteLink(index);
+  return editingLink ? /* @__PURE__ */ jsx14("div", { className: "editing-link", children: /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit(onSubmit), children: [
+    /* @__PURE__ */ jsxs6("div", { className: "header", style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "8px" }, children: [
+      /* @__PURE__ */ jsxs6(Typography2, { variant: "subtitle2", children: [
+        addNewLink ? add : edit,
+        " ",
+        DocumentLinksStrings.link
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: "4px" }, children: [
+        /* @__PURE__ */ jsx14(IconButton3, { size: "small", "aria-label": confirm, onClick: handleSubmit(onSubmit), children: "\u2713" }),
+        /* @__PURE__ */ jsx14(IconButton3, { size: "small", "aria-label": cancel, onClick: onCancelFormChanges, children: "\u2715" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx14(
+      Controller,
+      {
+        name: "title",
+        control,
+        rules: { required: { value: true, message: FormStrings4.required } },
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx14("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx14(
+          TextField6,
+          {
+            label: linkTitleLabel,
+            value: field.value,
+            onChange: onLinkTitleChange,
+            required: true,
+            size: "small",
+            fullWidth: true,
+            error: !!error,
+            helperText: error?.message,
+            inputProps: {
+              "data-testid": `${GetFieldDataTestId(fieldName, programName, entityType, entityId)}-link-title`
+            }
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      Controller,
+      {
+        name: "url",
+        control,
+        rules: {
+          required: { value: true, message: FormStrings4.required },
+          pattern: { value: FormConstants.urlRegex, message: FormStrings4.urlRequired }
+        },
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx14("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx14(
+          TextField6,
+          {
+            label: linkUrlLabel,
+            value: field.value,
+            onChange: onLinkUrlChange,
+            required: true,
+            size: "small",
+            fullWidth: true,
+            error: !!error,
+            helperText: error?.message,
+            inputProps: {
+              "data-testid": `${GetFieldDataTestId(fieldName, programName, entityType, entityId)}-link-url`
+            }
+          }
+        ) })
+      }
+    )
+  ] }) }) : addNewLink ? null : /* @__PURE__ */ jsx14(
+    ListItem,
+    {
+      className: "document-link-item",
+      disableGutters: true,
+      secondaryAction: !readOnly ? /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: "2px" }, children: [
+        /* @__PURE__ */ jsx14(Tooltip, { title: edit, children: /* @__PURE__ */ jsx14(IconButton3, { size: "small", "aria-label": edit, onClick: onEditDocumentLink, children: "\u270E" }) }),
+        /* @__PURE__ */ jsx14(Tooltip, { title: deleteLabel, children: /* @__PURE__ */ jsx14(IconButton3, { size: "small", "aria-label": deleteLabel, onClick: onDelete, children: "\u{1F5D1}" }) })
+      ] }) : void 0,
+      children: /* @__PURE__ */ jsx14(
+        ListItemText,
+        {
+          primary: /* @__PURE__ */ jsx14("a", { className: "link", href: url, target: "_blank", rel: "noopener noreferrer", children: title })
+        }
+      )
+    }
+  );
+};
+var DocumentLinks = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, setFieldValue } = props;
+  const { watch } = useFormContext2();
+  const documentLinks = watch(`${fieldName}`);
+  const [addNewLink, setAddNewLink] = React3.useState(false);
+  const [deleteLinkIndex, setDeleteLinkIndex] = React3.useState(void 0);
+  const onUpdateLinks = (newLink, addNew, index) => {
+    let newDocumentLinks = [];
+    if (addNew && !documentLinks) {
+      newDocumentLinks = [newLink];
+    } else if (addNew) {
+      newDocumentLinks = [...documentLinks, newLink];
+    } else {
+      newDocumentLinks = [...documentLinks];
+      newDocumentLinks[index] = newLink;
+    }
+    setFieldValue(fieldName, newDocumentLinks);
+  };
+  const onDeleteLink = (index) => {
+    const newDocumentLinks = [...documentLinks];
+    newDocumentLinks.splice(index, 1);
+    setFieldValue(fieldName, newDocumentLinks);
+  };
+  const onAddNewLink = () => setAddNewLink(true);
+  const onCancelAddLink = () => setAddNewLink(false);
+  const onConfirmDeleteLink = (index) => setDeleteLinkIndex(index);
+  const onCloseDeleteDialog = () => setDeleteLinkIndex(void 0);
+  const commitDeleteLink = () => {
+    onDeleteLink(deleteLinkIndex);
+    setDeleteLinkIndex(void 0);
+  };
+  const saveLinks = (newLink, addNew, index) => {
+    onUpdateLinks(newLink, addNew, index);
+    setAddNewLink(false);
+  };
+  const links = value;
+  return /* @__PURE__ */ jsxs6("div", { className: FieldClassName("hook-document-links", readOnly ? void 0 : error), children: [
+    /* @__PURE__ */ jsx14(List, { disablePadding: true, children: links?.length > 0 ? links.map((link, index) => /* @__PURE__ */ jsx14(
+      DocumentLinkItem,
+      {
+        fieldName,
+        programName,
+        entityType,
+        entityId,
+        index,
+        title: link.title,
+        url: link.url,
+        saveLinks,
+        onConfirmDeleteLink,
+        readOnly
+      },
+      `${link.url}-${index}`
+    )) : null }),
+    addNewLink ? /* @__PURE__ */ jsx14(
+      DocumentLinkItem,
+      {
+        fieldName,
+        programName,
+        entityType,
+        entityId,
+        addNewLink: true,
+        saveLinks,
+        onCancelAddLink
+      }
+    ) : !readOnly ? /* @__PURE__ */ jsx14("div", { className: "add-link", style: { marginTop: "8px" }, children: /* @__PURE__ */ jsx14(Tooltip, { title: DocumentLinksStrings.addAnotherLink, children: /* @__PURE__ */ jsx14(
+      Button2,
+      {
+        variant: "outlined",
+        size: "small",
+        onClick: onAddNewLink,
+        "data-testid": `${GetFieldDataTestId(fieldName, programName, entityType, entityId)}-add-link`,
+        children: links?.length > 0 ? DocumentLinksStrings.addAnotherLink : DocumentLinksStrings.addLink
+      }
+    ) }) }) : null,
+    /* @__PURE__ */ jsxs6(Dialog2, { open: deleteLinkIndex !== void 0, onClose: onCloseDeleteDialog, children: [
+      /* @__PURE__ */ jsx14(DialogTitle2, { children: DocumentLinksStrings.deleteLink }),
+      /* @__PURE__ */ jsx14(DialogContent2, { children: `${DocumentLinksStrings.confirmDeleteLink} ${links?.[deleteLinkIndex]?.title || ""}?` }),
+      /* @__PURE__ */ jsxs6(DialogActions2, { children: [
+        /* @__PURE__ */ jsx14(Button2, { variant: "outlined", onClick: onCloseDeleteDialog, children: DocumentLinksStrings.cancel }),
+        /* @__PURE__ */ jsx14(Button2, { variant: "contained", onClick: commitDeleteLink, children: DocumentLinksStrings.delete })
+      ] })
+    ] })
+  ] });
+};
+var DocumentLinks_default = DocumentLinks;
+
+// src/fields/StatusDropdown.tsx
+import { FormControl as FormControl4, Select as Select4, MenuItem as MenuItem4 } from "@mui/material";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var StatusDot = ({ color }) => /* @__PURE__ */ jsx15(
+  "span",
+  {
+    className: "status-color",
+    style: {
+      display: "inline-block",
+      backgroundColor: color || "transparent",
+      width: "12px",
+      height: "12px",
+      borderRadius: "50%",
+      flexShrink: 0,
+      marginRight: "8px"
+    }
+  }
+);
+var StatusDropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, config, options, setFieldValue } = props;
+  const statusColors = config?.statusColors ?? {};
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value);
+  };
+  return readOnly ? /* @__PURE__ */ jsxs7("div", { className: "hook-read-only-status-dropdown", style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ jsx15(StatusDot, { color: statusColors && value ? statusColors[value] : void 0 }),
+    /* @__PURE__ */ jsx15(ReadOnlyText, { fieldName, value })
+  ] }) : /* @__PURE__ */ jsxs7("div", { className: FieldClassName("hook-status-dropdown", error), style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ jsx15(StatusDot, { color: statusColors && value ? statusColors[value] : void 0 }),
+    /* @__PURE__ */ jsx15(FormControl4, { fullWidth: true, size: "small", error: !!error, children: /* @__PURE__ */ jsx15(
+      Select4,
+      {
+        value: value ? String(value) : "",
+        onChange,
+        displayEmpty: true,
+        "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+        renderValue: (selected) => {
+          const option = options?.find((o) => String(o.value) === selected);
+          return option?.label ?? "";
+        },
+        children: options?.map((option) => /* @__PURE__ */ jsxs7(MenuItem4, { value: String(option.value), disabled: option.disabled, children: [
+          /* @__PURE__ */ jsx15(StatusDot, { color: statusColors[String(option.value)] }),
+          option.label
+        ] }, String(option.value)))
+      }
+    ) })
+  ] });
+};
+var StatusDropdown_default = StatusDropdown;
+
+// src/fields/readonly/ReadOnly.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var ReadOnly = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ jsx16(ReadOnlyText, { fieldName, value, ...config });
+};
+var ReadOnly_default = ReadOnly;
+
+// src/fields/readonly/ReadOnlyArray.tsx
+import { Fragment as Fragment7, jsx as jsx17 } from "react/jsx-runtime";
+var ReadOnlyArray = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ jsx17(Fragment7, { children: value?.map((v, i) => /* @__PURE__ */ jsx17(ReadOnlyText, { fieldName, value: v, ...config }, i)) });
+};
+var ReadOnlyArray_default = ReadOnlyArray;
+
+// src/fields/readonly/ReadOnlyDateTime.tsx
+import { Typography as Typography3 } from "@mui/material";
+import { Fragment as Fragment8, jsx as jsx18 } from "react/jsx-runtime";
+var ReadOnlyDateTime = (props) => {
+  const { config, value } = props;
+  return /* @__PURE__ */ jsx18(Fragment8, { children: value ? /* @__PURE__ */ jsx18(Typography3, { variant: "body2", className: "hook-read-only-date-time", component: "span", children: formatDateTime(value, { hideTimestamp: config?.hidetimeStamp }) }) : /* @__PURE__ */ jsx18(Fragment8, { children: "-" }) });
+};
+var ReadOnlyDateTime_default = ReadOnlyDateTime;
+
+// src/fields/readonly/ReadOnlyCumulativeNumber.tsx
+import { isEmpty } from "@form-eng/core";
+import React4 from "react";
+import { useFormContext as useFormContext3 } from "react-hook-form";
+import { Fragment as Fragment9, jsx as jsx19 } from "react/jsx-runtime";
+var ReadOnlyCumulativeNumber = (props) => {
+  const { fieldName, config } = props;
+  const { formState, getValues } = useFormContext3();
+  const [value, setValue] = React4.useState();
+  const { dependencyFields } = config || {};
+  React4.useEffect(() => {
+    const formValues = getValues();
+    if (!isEmpty(dependencyFields)) {
+      let totalCount = 0;
+      dependencyFields.map((fn) => {
+        totalCount += Number(formValues[fn]) || 0;
+      });
+      setValue(totalCount);
+    }
+  }, [formState]);
+  return fieldName ? /* @__PURE__ */ jsx19(ReadOnlyText, { fieldName, value: String(value), ...config }) : /* @__PURE__ */ jsx19(Fragment9, {});
+};
+var ReadOnlyCumulativeNumber_default = ReadOnlyCumulativeNumber;
+
+// src/fields/readonly/ReadOnlyRichText.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var ReadOnlyRichText = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className: "hook-read-only-rich-text-editor",
+      dangerouslySetInnerHTML: { __html: value || "" }
+    }
+  );
+};
+var ReadOnlyRichText_default = ReadOnlyRichText;
+
+// src/fields/readonly/ReadOnlyWithButton.tsx
+import { Button as Button3 } from "@mui/material";
+import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+var ReadOnlyWithButton = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, className: config?.containerClassName, children: [
+    /* @__PURE__ */ jsx21(ReadOnlyText, { fieldName, value: `${value}` }),
+    config?.buttonText && /* @__PURE__ */ jsx21(Button3, { variant: "outlined", size: "small", onClick: config.onButtonClick, children: config.buttonText })
+  ] });
+};
+var ReadOnlyWithButton_default = ReadOnlyWithButton;
+
+// src/components/FormLoading.tsx
+import { FormConstants as FormConstants2 } from "@form-eng/core";
+import { Skeleton } from "@mui/material";
+import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+var FormLoading = (props) => {
+  const { loadingShimmerCount, loadingFieldShimmerHeight, inPanel, hideTitleShimmer } = props;
+  return /* @__PURE__ */ jsx22("div", { className: `fe-loading ${inPanel ? "in-panel" : ""}`, children: [...Array(loadingShimmerCount || FormConstants2.loadingShimmerCount)].map((_, i) => /* @__PURE__ */ jsxs9("div", { className: "form-field-loading", style: { marginBottom: "16px" }, children: [
+    !hideTitleShimmer && /* @__PURE__ */ jsx22(Skeleton, { variant: "text", width: "33%" }),
+    /* @__PURE__ */ jsx22(
+      Skeleton,
+      {
+        variant: "rectangular",
+        height: loadingFieldShimmerHeight || FormConstants2.loadingFieldShimmerHeight
+      }
+    )
+  ] }, `fe-loading-${i}`)) });
+};
+
+// src/registry.ts
+import { ComponentTypes } from "@form-eng/core";
+import React5 from "react";
+function createMuiFieldRegistry() {
+  return {
+    [ComponentTypes.Textbox]: React5.createElement(Textbox_default),
+    [ComponentTypes.Number]: React5.createElement(Number_default),
+    [ComponentTypes.Toggle]: React5.createElement(Toggle_default),
+    [ComponentTypes.Dropdown]: React5.createElement(Dropdown_default),
+    [ComponentTypes.MultiSelect]: React5.createElement(MultiSelect_default),
+    [ComponentTypes.DateControl]: React5.createElement(DateControl_default),
+    [ComponentTypes.Slider]: React5.createElement(Slider_default),
+    [ComponentTypes.Fragment]: React5.createElement(DynamicFragment_default),
+    [ComponentTypes.SimpleDropdown]: React5.createElement(SimpleDropdown_default),
+    [ComponentTypes.MultiSelectSearch]: React5.createElement(MultiSelectSearch_default),
+    [ComponentTypes.Textarea]: React5.createElement(PopOutEditor_default),
+    [ComponentTypes.DocumentLinks]: React5.createElement(DocumentLinks_default),
+    [ComponentTypes.StatusDropdown]: React5.createElement(StatusDropdown_default),
+    [ComponentTypes.ReadOnly]: React5.createElement(ReadOnly_default),
+    [ComponentTypes.ReadOnlyArray]: React5.createElement(ReadOnlyArray_default),
+    [ComponentTypes.ReadOnlyDateTime]: React5.createElement(ReadOnlyDateTime_default),
+    [ComponentTypes.ReadOnlyCumulativeNumber]: React5.createElement(ReadOnlyCumulativeNumber_default),
+    [ComponentTypes.ReadOnlyRichText]: React5.createElement(ReadOnlyRichText_default),
+    [ComponentTypes.ReadOnlyWithButton]: React5.createElement(ReadOnlyWithButton_default)
+  };
+}
+export {
+  DateControl_default as DateControl,
+  DocumentLinks_default as DocumentLinks,
+  DocumentLinksStrings,
+  Dropdown_default as Dropdown,
+  DynamicFragment_default as DynamicFragment,
+  FieldClassName,
+  FormLoading,
+  GetFieldDataTestId,
+  MultiSelect_default as MultiSelect,
+  MultiSelectSearch_default as MultiSelectSearch,
+  Number_default as Number,
+  PopOutEditor_default as PopOutEditor,
+  ReadOnly_default as ReadOnly,
+  ReadOnlyArray_default as ReadOnlyArray,
+  ReadOnlyCumulativeNumber_default as ReadOnlyCumulativeNumber,
+  ReadOnlyDateTime_default as ReadOnlyDateTime,
+  ReadOnlyRichText_default as ReadOnlyRichText,
+  ReadOnlyText,
+  ReadOnlyWithButton_default as ReadOnlyWithButton,
+  SimpleDropdown_default as SimpleDropdown,
+  Slider_default as Slider,
+  StatusDropdown_default as StatusDropdown,
+  StatusMessage,
+  Textbox_default as Textbox,
+  Toggle_default as Toggle,
+  createMuiFieldRegistry,
+  formatDateTime
+};
+//# sourceMappingURL=index.mjs.map