@form-eng/fluent 1.0.0

package/dist/index.mjs

@@ -0,0 +1,968 @@
+// src/fields/Textbox.tsx
+import { Input } from "@fluentui/react-components";
+
+// src/components/ReadOnlyText.tsx
+import { Label } from "@fluentui/react-components";
+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(Label, { id: `${fieldName}-read-only`, className: classNameValue, title: value, 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(
+    Input,
+    {
+      className: FieldClassName("hook-textbox", error),
+      autoComplete: "off",
+      value: value ?? "",
+      onChange,
+      placeholder,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Textbox_default = Textbox;
+
+// src/fields/Number.tsx
+import { isNull } from "@form-eng/core";
+import { Input as Input2 } from "@fluentui/react-components";
+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(
+    Input2,
+    {
+      className: FieldClassName("hook-number", error),
+      autoComplete: "off",
+      type: "number",
+      value: !isNull(value) ? String(value) : "",
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Number_default = NumberField;
+
+// src/fields/Toggle.tsx
+import { convertBooleanToYesOrNoText } from "@form-eng/core";
+import { Switch } from "@fluentui/react-components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Toggle = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  const onChange = (_, data) => {
+    setFieldValue(fieldName, data.checked);
+  };
+  return readOnly ? /* @__PURE__ */ jsx4(ReadOnlyText, { fieldName, value: convertBooleanToYesOrNoText(value) }) : /* @__PURE__ */ jsx4(
+    Switch,
+    {
+      className: "hook-toggle",
+      checked: value,
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Toggle_default = Toggle;
+
+// src/fields/Dropdown.tsx
+import { Dropdown, Option } from "@fluentui/react-components";
+import React from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DropdownField = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, placeholder, options, setFieldValue } = props;
+  const onOptionSelect = (_, data) => {
+    setFieldValue(fieldName, data.optionValue);
+  };
+  React.useEffect(() => {
+    if (!value && !readOnly && config?.setDefaultKeyIfOnlyOneOption && options?.length === 1) {
+      setFieldValue(fieldName, String(options[0].value));
+    }
+  }, [options]);
+  const selectedText = options?.find((o) => String(o.value) === String(value))?.label;
+  return readOnly ? /* @__PURE__ */ jsx5(ReadOnlyText, { fieldName, value }) : /* @__PURE__ */ jsx5(
+    Dropdown,
+    {
+      className: FieldClassName("hook-dropdown", error),
+      value: selectedText ?? "",
+      selectedOptions: value ? [String(value)] : [],
+      onOptionSelect,
+      placeholder,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ jsx5(Option, { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+    }
+  );
+};
+var Dropdown_default = DropdownField;
+
+// src/fields/MultiSelect.tsx
+import { Dropdown as Dropdown2, Option as Option2 } from "@fluentui/react-components";
+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 onOptionSelect = (_, data) => {
+    setFieldValue(fieldName, data.selectedOptions, false, 1500);
+  };
+  return readOnly ? /* @__PURE__ */ jsx6(Fragment2, { children: value && value.length > 0 ? /* @__PURE__ */ jsx6(
+    Dropdown2,
+    {
+      className: "hook-multi-select-read-only",
+      multiselect: true,
+      value: value.join(", "),
+      selectedOptions: value,
+      children: value.map((v) => /* @__PURE__ */ jsx6(Option2, { value: v, children: v }, v))
+    }
+  ) : null }) : /* @__PURE__ */ jsx6(
+    Dropdown2,
+    {
+      className: FieldClassName("hook-multi-select", error),
+      multiselect: true,
+      value: selectedOptions.join(", "),
+      selectedOptions,
+      onOptionSelect,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ jsx6(Option2, { 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 { Input as Input3, Button } from "@fluentui/react-components";
+import { DismissRegular } from "@fluentui/react-icons";
+import { Fragment as Fragment3, jsx as jsx7, jsxs } 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__ */ jsxs("div", { className: "hook-date-control-container", style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+    /* @__PURE__ */ jsx7(
+      Input3,
+      {
+        className: FieldClassName("hook-date-control", error),
+        type: "date",
+        value: dateInputValue,
+        onChange,
+        "aria-invalid": !!error,
+        "aria-required": required,
+        "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      Button,
+      {
+        appearance: "subtle",
+        icon: /* @__PURE__ */ jsx7(DismissRegular, {}),
+        onClick: onClearDate,
+        title: FormStrings.clickToClear,
+        "aria-label": `${fieldName} ${FormStrings.clear}`
+      }
+    ),
+    error?.message && /* @__PURE__ */ jsx7("span", { className: "hook-date-control-error", role: "alert", style: { color: "var(--colorPaletteRedForeground1, #bc2f32)", fontSize: "12px" }, children: error.message })
+  ] });
+};
+var DateControl_default = DateControl;
+
+// src/fields/Slider.tsx
+import { Slider } from "@fluentui/react-components";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var SliderField = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, setFieldValue } = props;
+  const onChange = (_, data) => {
+    setFieldValue(fieldName, data.value);
+  };
+  return readOnly ? /* @__PURE__ */ jsx8(ReadOnlyText, { fieldName, value: String(value) }) : /* @__PURE__ */ jsx8(
+    Slider,
+    {
+      className: FieldClassName("hook-slider", error),
+      value: value ?? 0,
+      onChange,
+      max: config?.max,
+      min: config?.min,
+      step: config?.step,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Slider_default = SliderField;
+
+// src/fields/DynamicFragment.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Fragment4 = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ jsx9("input", { type: "hidden", value });
+};
+var DynamicFragment_default = Fragment4;
+
+// src/fields/SimpleDropdown.tsx
+import { Dropdown as Dropdown3, Option as Option3 } from "@fluentui/react-components";
+import { jsx as jsx10 } 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 onOptionSelect = (_, data) => {
+    setFieldValue(fieldName, data.optionValue);
+  };
+  return readOnly ? /* @__PURE__ */ jsx10(ReadOnlyText, { fieldName, value }) : /* @__PURE__ */ jsx10(
+    Dropdown3,
+    {
+      className: FieldClassName("hook-dropdown", error),
+      value: value ?? "",
+      selectedOptions: value ? [String(value)] : [],
+      onOptionSelect,
+      placeholder,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: simpleOptions.map((option) => /* @__PURE__ */ jsx10(Option3, { value: option, children: option }, option))
+    }
+  );
+};
+var SimpleDropdown_default = SimpleDropdown;
+
+// src/fields/MultiSelectSearch.tsx
+import { Combobox, Option as Option4 } from "@fluentui/react-components";
+import { Dropdown as Dropdown4 } from "@fluentui/react-components";
+import { Fragment as Fragment5, jsx as jsx11 } from "react/jsx-runtime";
+var MultiSelectSearch = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  const onOptionSelect = (_, data) => {
+    setFieldValue(fieldName, data.selectedOptions, false, 3e3);
+  };
+  return readOnly ? /* @__PURE__ */ jsx11(Fragment5, { children: value && value.length > 0 ? /* @__PURE__ */ jsx11(
+    Dropdown4,
+    {
+      className: "hook-multi-select-search-read-only",
+      multiselect: true,
+      value: value.join(", "),
+      selectedOptions: value,
+      children: value.map((v) => /* @__PURE__ */ jsx11(Option4, { value: v, children: v }, v))
+    }
+  ) : null }) : /* @__PURE__ */ jsx11(
+    Combobox,
+    {
+      className: FieldClassName("hook-multi-select-search", error),
+      multiselect: true,
+      freeform: true,
+      value: void 0,
+      selectedOptions: value ?? [],
+      onOptionSelect,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ jsx11(Option4, { value: String(option.value), children: option.label }, String(option.value)))
+    }
+  );
+};
+var MultiSelectSearch_default = MultiSelectSearch;
+
+// src/fields/PopOutEditor.tsx
+import { FormStrings as FormStrings3 } from "@form-eng/core";
+import { Button as Button2, Textarea, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions } from "@fluentui/react-components";
+import { FullScreenMaximizeRegular, DismissRegular as DismissRegular2 } from "@fluentui/react-icons";
+import { useState } from "react";
+
+// src/components/StatusMessage.tsx
+import { FormStrings as FormStrings2 } from "@form-eng/core";
+import { Spinner } from "@fluentui/react-components";
+import { ErrorCircleRegular, WarningRegular } from "@fluentui/react-icons";
+import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
+var StatusMessage = (props) => {
+  const { id, error, errorCount, savePending, saving } = props;
+  return /* @__PURE__ */ jsx12("div", { className: "message", children: error ? /* @__PURE__ */ jsxs2(Fragment6, { children: [
+    /* @__PURE__ */ jsx12(ErrorCircleRegular, { className: "error-icon" }),
+    /* @__PURE__ */ jsx12("span", { className: "error-message", id, role: "alert", children: error.message || "Error" })
+  ] }) : savePending ? /* @__PURE__ */ jsxs2(Fragment6, { children: [
+    /* @__PURE__ */ jsx12(WarningRegular, { className: "warning-icon" }),
+    /* @__PURE__ */ jsxs2("span", { className: "warning-message", id, role: "alert", children: [
+      FormStrings2.autoSavePending,
+      " (",
+      errorCount,
+      " ",
+      FormStrings2.remaining,
+      ")"
+    ] })
+  ] }) : saving ? /* @__PURE__ */ jsxs2(Fragment6, { children: [
+    /* @__PURE__ */ jsx12(Spinner, { size: "tiny" }),
+    /* @__PURE__ */ jsx12("span", { className: "save-message", id, role: "alert", children: FormStrings2.saving })
+  ] }) : null });
+};
+
+// src/fields/PopOutEditor.tsx
+import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs3 } 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__ */ jsxs3(Fragment7, { children: [
+    /* @__PURE__ */ jsxs3("div", { className: "hook-textarea", children: [
+      /* @__PURE__ */ jsx13(
+        Textarea,
+        {
+          className: FieldClassName("hook-text-area", error),
+          resize: "none",
+          autoComplete: "off",
+          value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+          onChange,
+          "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+          rows: config?.numberOfRows ?? 4
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        Button2,
+        {
+          className: "expand-button",
+          appearance: "secondary",
+          icon: /* @__PURE__ */ jsx13(FullScreenMaximizeRegular, {}),
+          onClick: onExpandButtonClick,
+          "aria-label": FormStrings3.openExpandedTextEditor,
+          children: FormStrings3.expand
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx13(Dialog, { open: modalVisible, onOpenChange: (_, data) => {
+      if (!data.open) onCancelButtonClick();
+    }, children: /* @__PURE__ */ jsx13(DialogSurface, { className: "hook-expanded-textarea", style: { maxWidth: "90vw", width: "800px" }, children: /* @__PURE__ */ jsxs3(DialogBody, { children: [
+      /* @__PURE__ */ jsxs3(
+        DialogTitle,
+        {
+          action: /* @__PURE__ */ jsx13(
+            Button2,
+            {
+              appearance: "subtle",
+              icon: /* @__PURE__ */ jsx13(DismissRegular2, {}),
+              onClick: onCancelButtonClick,
+              "aria-label": FormStrings3.closeExpandedTextEditor
+            }
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx13("span", { className: "required-indicator", children: " *" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx13(DialogContent, { children: /* @__PURE__ */ jsx13(
+        Textarea,
+        {
+          className: FieldClassName("hook-text-area", error),
+          resize: "vertical",
+          autoComplete: "off",
+          value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+          onChange,
+          rows: 12,
+          style: { width: "100%" }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs3(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(Button2, { appearance: "secondary", onClick: onCancelButtonClick, children: FormStrings3.cancel }),
+        /* @__PURE__ */ jsx13(
+          Button2,
+          {
+            appearance: "primary",
+            onClick: onSaveButtonClick,
+            disabled: !config?.saveCallback && modalValue === value,
+            "data-testid": `${programName}-${entityType}-${entityId}-save-note`,
+            children: config?.saveCallback ? FormStrings3.save : FormStrings3.save
+          }
+        )
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx13(Dialog, { open: dialogVisible, onOpenChange: (_, data) => {
+      if (!data.open) setDialogVisible(false);
+    }, children: /* @__PURE__ */ jsx13(DialogSurface, { children: /* @__PURE__ */ jsxs3(DialogBody, { children: [
+      /* @__PURE__ */ jsx13(DialogTitle, { children: FormStrings3.unsavedChanges }),
+      /* @__PURE__ */ jsx13(DialogContent, { children: FormStrings3.saveChangesTo(label) }),
+      /* @__PURE__ */ jsxs3(DialogActions, { children: [
+        /* @__PURE__ */ jsx13(Button2, { appearance: "secondary", onClick: onCancelButtonClick, children: FormStrings3.dontSave }),
+        /* @__PURE__ */ jsx13(Button2, { appearance: "primary", onClick: onSaveButtonClick, children: FormStrings3.save })
+      ] })
+    ] }) }) })
+  ] });
+};
+var PopOutEditor_default = PopOutEditor;
+
+// src/fields/DocumentLinks.tsx
+import { useFormContext as useFormContext2 } from "react-hook-form";
+
+// src/components/DocumentLinks/DocumentLinks.tsx
+import { Button as Button4, Dialog as Dialog2, DialogSurface as DialogSurface2, DialogBody as DialogBody2, DialogTitle as DialogTitle2, DialogContent as DialogContent2, DialogActions as DialogActions2, Tooltip as Tooltip2 } from "@fluentui/react-components";
+import { AddRegular } from "@fluentui/react-icons";
+import React4 from "react";
+
+// src/components/DocumentLinks/DocumentLink.tsx
+import { FormStrings as FormStrings4, FormConstants } from "@form-eng/core";
+import { Input as Input4, Button as Button3, Tooltip } from "@fluentui/react-components";
+import { CheckmarkRegular, DismissRegular as DismissRegular3, EditRegular, DeleteRegular } from "@fluentui/react-icons";
+import React3 from "react";
+import { Controller, useForm } from "react-hook-form";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+var DocumentLink = (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__ */ jsxs4("form", { onSubmit: handleSubmit(onSubmit), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "header", style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxs4("div", { className: "header-label", children: [
+        addNewLink ? add : edit,
+        " ",
+        DocumentLinksStrings.link
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "4px" }, children: [
+        /* @__PURE__ */ jsx14(Button3, { appearance: "subtle", icon: /* @__PURE__ */ jsx14(CheckmarkRegular, {}), "aria-label": confirm, onClick: handleSubmit(onSubmit) }),
+        /* @__PURE__ */ jsx14(Button3, { appearance: "subtle", icon: /* @__PURE__ */ jsx14(DismissRegular3, {}), "aria-label": cancel, onClick: onCancelFormChanges })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx14(
+      Controller,
+      {
+        name: "title",
+        control,
+        rules: { required: { value: true, message: FormStrings4.required } },
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs4("div", { children: [
+          /* @__PURE__ */ jsx14("label", { children: linkTitleLabel }),
+          /* @__PURE__ */ jsx14(
+            Input4,
+            {
+              value: field.value,
+              onChange: onLinkTitleChange,
+              required: true,
+              "data-testid": `${GetFieldDataTestId(fieldName, programName, entityType, entityId)}-link-title`
+            }
+          ),
+          error && /* @__PURE__ */ jsx14("span", { className: "error-message", children: error.message })
+        ] })
+      }
+    ),
+    /* @__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__ */ jsxs4("div", { children: [
+          /* @__PURE__ */ jsx14("label", { children: linkUrlLabel }),
+          /* @__PURE__ */ jsx14(
+            Input4,
+            {
+              value: field.value,
+              onChange: onLinkUrlChange,
+              required: true,
+              "data-testid": `${GetFieldDataTestId(fieldName, programName, entityType, entityId)}-link-url`
+            }
+          ),
+          error && /* @__PURE__ */ jsx14("span", { className: "error-message", children: error.message })
+        ] })
+      }
+    )
+  ] }) }) : addNewLink ? null : /* @__PURE__ */ jsxs4("div", { className: "document-link-item", style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ jsx14("a", { className: "link", href: url, target: "_blank", rel: "noopener noreferrer", children: title }),
+    !readOnly && /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "2px" }, children: [
+      /* @__PURE__ */ jsx14(Tooltip, { content: edit, relationship: "label", children: /* @__PURE__ */ jsx14(Button3, { appearance: "subtle", icon: /* @__PURE__ */ jsx14(EditRegular, {}), "aria-label": edit, onClick: onEditDocumentLink }) }),
+      /* @__PURE__ */ jsx14(Tooltip, { content: deleteLabel, relationship: "label", children: /* @__PURE__ */ jsx14(Button3, { appearance: "subtle", icon: /* @__PURE__ */ jsx14(DeleteRegular, {}), "aria-label": deleteLabel, onClick: onDelete }) })
+    ] })
+  ] });
+};
+var DocumentLink_default = DocumentLink;
+
+// src/components/DocumentLinks/DocumentLinks.tsx
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+var DocumentLinks = (props) => {
+  const { fieldName, programName, entityType, entityId, className, readOnly, links, onUpdateLinks, onDeleteLink } = props;
+  const [addNewLink, setAddNewLink] = React4.useState(false);
+  const [deleteLinkIndex, setDeleteLinkIndex] = React4.useState(void 0);
+  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);
+  };
+  return /* @__PURE__ */ jsxs5("div", { className, children: [
+    links?.length > 0 ? links.map((link, index) => /* @__PURE__ */ jsx15(
+      DocumentLink_default,
+      {
+        fieldName,
+        programName,
+        entityType,
+        entityId,
+        index,
+        title: link.title,
+        url: link.url,
+        saveLinks,
+        onConfirmDeleteLink,
+        readOnly
+      },
+      `${link.url}-${index}`
+    )) : null,
+    addNewLink ? /* @__PURE__ */ jsx15(
+      DocumentLink_default,
+      {
+        fieldName,
+        programName,
+        entityType,
+        entityId,
+        addNewLink: true,
+        saveLinks,
+        onCancelAddLink
+      }
+    ) : !readOnly ? /* @__PURE__ */ jsx15("div", { className: "add-link", children: /* @__PURE__ */ jsx15(Tooltip2, { content: DocumentLinksStrings.addAnotherLink, relationship: "label", children: /* @__PURE__ */ jsx15(
+      Button4,
+      {
+        appearance: "secondary",
+        icon: /* @__PURE__ */ jsx15(AddRegular, {}),
+        onClick: onAddNewLink,
+        "data-testid": `${GetFieldDataTestId(fieldName, programName, entityType, entityId)}-add-link`,
+        children: links?.length > 0 ? DocumentLinksStrings.addAnotherLink : DocumentLinksStrings.addLink
+      }
+    ) }) }) : null,
+    /* @__PURE__ */ jsx15(Dialog2, { open: deleteLinkIndex !== void 0, onOpenChange: (_, data) => {
+      if (!data.open) onCloseDeleteDialog();
+    }, children: /* @__PURE__ */ jsx15(DialogSurface2, { children: /* @__PURE__ */ jsxs5(DialogBody2, { children: [
+      /* @__PURE__ */ jsx15(DialogTitle2, { children: DocumentLinksStrings.deleteLink }),
+      /* @__PURE__ */ jsx15(DialogContent2, { children: `${DocumentLinksStrings.confirmDeleteLink} ${links?.[deleteLinkIndex]?.title || ""}?` }),
+      /* @__PURE__ */ jsxs5(DialogActions2, { children: [
+        /* @__PURE__ */ jsx15(Button4, { appearance: "secondary", onClick: onCloseDeleteDialog, children: DocumentLinksStrings.cancel }),
+        /* @__PURE__ */ jsx15(Button4, { appearance: "primary", onClick: commitDeleteLink, children: DocumentLinksStrings.delete })
+      ] })
+    ] }) }) })
+  ] });
+};
+var DocumentLinks_default = DocumentLinks;
+
+// src/fields/DocumentLinks.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var DocumentLinksField = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, setFieldValue } = props;
+  const { watch } = useFormContext2();
+  const documentLinks = watch(`${fieldName}`);
+  const onUpdateLinks = (newLink, addNewLink, index) => {
+    let newDocumentLinks = [];
+    if (addNewLink && !documentLinks) {
+      newDocumentLinks = [newLink];
+    } else if (addNewLink) {
+      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);
+  };
+  return readOnly ? /* @__PURE__ */ jsx16(
+    DocumentLinks_default,
+    {
+      fieldName,
+      programName,
+      entityType,
+      entityId,
+      className: "hook-document-links",
+      links: value,
+      readOnly: true
+    }
+  ) : /* @__PURE__ */ jsx16(
+    DocumentLinks_default,
+    {
+      fieldName,
+      programName,
+      entityType,
+      entityId,
+      className: FieldClassName("hook-document-links", error),
+      links: value,
+      onUpdateLinks,
+      onDeleteLink
+    }
+  );
+};
+var DocumentLinks_default2 = DocumentLinksField;
+
+// src/components/StatusDropdown/StatusColor.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var StatusColor = (props) => {
+  const { statusColors, status } = props;
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: "status-color",
+      style: {
+        backgroundColor: statusColors && status && statusColors[status],
+        width: "12px",
+        height: "12px",
+        borderRadius: "50%",
+        flexShrink: 0
+      }
+    }
+  );
+};
+var StatusColor_default = StatusColor;
+
+// src/components/StatusDropdown/StatusDropdown.tsx
+import { Dropdown as Dropdown5, Option as Option5 } from "@fluentui/react-components";
+import { jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
+var StatusDropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, className, status, meta, dropdownOptions, onOptionSelect } = props;
+  const statusColors = meta?.statusColors ?? {};
+  const selectedText = dropdownOptions?.find((o) => String(o.value) === status)?.label;
+  return /* @__PURE__ */ jsxs6("div", { className, style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ jsx18(StatusColor_default, { statusColors, status }),
+    /* @__PURE__ */ jsx18(
+      Dropdown5,
+      {
+        value: selectedText ?? "",
+        selectedOptions: status ? [status] : [],
+        onOptionSelect,
+        "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+        children: dropdownOptions?.map((option) => /* @__PURE__ */ jsx18(Option5, { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+      }
+    )
+  ] });
+};
+var StatusDropdown_default = StatusDropdown;
+
+// src/fields/StatusDropdown.tsx
+import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
+var StatusDropdownField = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, config, options, setFieldValue } = props;
+  const onOptionSelect = (_, data) => {
+    setFieldValue(fieldName, data.optionValue);
+  };
+  return readOnly ? /* @__PURE__ */ jsxs7("div", { className: "hook-read-only-status-dropdown", style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ jsx19(StatusColor_default, { statusColors: config?.statusColors, status: value }),
+    /* @__PURE__ */ jsx19(ReadOnlyText, { fieldName, value })
+  ] }) : /* @__PURE__ */ jsx19(
+    StatusDropdown_default,
+    {
+      className: FieldClassName("hook-status-dropdown", error),
+      fieldName,
+      programName,
+      entityType,
+      entityId,
+      dropdownOptions: options,
+      status: value,
+      onOptionSelect,
+      meta: config
+    }
+  );
+};
+var StatusDropdown_default2 = StatusDropdownField;
+
+// src/fields/readonly/ReadOnly.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var ReadOnly = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ jsx20(ReadOnlyText, { fieldName, value, ...config });
+};
+var ReadOnly_default = ReadOnly;
+
+// src/fields/readonly/ReadOnlyArray.tsx
+import { Fragment as Fragment8, jsx as jsx21 } from "react/jsx-runtime";
+var ReadOnlyArray = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ jsx21(Fragment8, { children: value?.map((v, i) => /* @__PURE__ */ jsx21(ReadOnlyText, { fieldName, value: v, ...config }, i)) });
+};
+var ReadOnlyArray_default = ReadOnlyArray;
+
+// src/fields/readonly/ReadOnlyDateTime.tsx
+import { Fragment as Fragment9, jsx as jsx22 } from "react/jsx-runtime";
+var ReadOnlyDateTime = (props) => {
+  const { config, value } = props;
+  return /* @__PURE__ */ jsx22(Fragment9, { children: value ? /* @__PURE__ */ jsx22("span", { className: "hook-read-only-date-time", children: formatDateTime(value, { hideTimestamp: config?.hidetimeStamp }) }) : /* @__PURE__ */ jsx22(Fragment9, { children: "-" }) });
+};
+var ReadOnlyDateTime_default = ReadOnlyDateTime;
+
+// src/fields/readonly/ReadOnlyCumulativeNumber.tsx
+import { isEmpty } from "@form-eng/core";
+import React5 from "react";
+import { useFormContext as useFormContext3 } from "react-hook-form";
+import { Fragment as Fragment10, jsx as jsx23 } from "react/jsx-runtime";
+var ReadOnlyCumulativeNumber = (props) => {
+  const { fieldName, config } = props;
+  const { formState, getValues } = useFormContext3();
+  const [value, setValue] = React5.useState();
+  const { dependencyFields } = config || {};
+  React5.useEffect(() => {
+    const formValues = getValues();
+    if (!isEmpty(dependencyFields)) {
+      let totalCount = 0;
+      dependencyFields.map((fn) => {
+        totalCount += Number(formValues[fn]) || 0;
+      });
+      setValue(totalCount);
+    }
+  }, [formState]);
+  return fieldName ? /* @__PURE__ */ jsx23(ReadOnlyText, { fieldName, value: String(value), ...config }) : /* @__PURE__ */ jsx23(Fragment10, {});
+};
+var ReadOnlyCumulativeNumber_default = ReadOnlyCumulativeNumber;
+
+// src/fields/readonly/ReadOnlyRichText.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var ReadOnlyRichText = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ jsx24(
+    "div",
+    {
+      className: "hook-read-only-rich-text-editor",
+      dangerouslySetInnerHTML: { __html: value || "" }
+    }
+  );
+};
+var ReadOnlyRichText_default = ReadOnlyRichText;
+
+// src/fields/readonly/ReadOnlyWithButton.tsx
+import { Button as Button5 } from "@fluentui/react-components";
+import { jsx as jsx25, 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__ */ jsx25(ReadOnlyText, { fieldName, value: `${value}` }),
+    config?.buttonText && /* @__PURE__ */ jsx25(Button5, { onClick: config.onButtonClick, children: config.buttonText })
+  ] });
+};
+var ReadOnlyWithButton_default = ReadOnlyWithButton;
+
+// src/components/FormLoading.tsx
+import { FormConstants as FormConstants2 } from "@form-eng/core";
+import { Skeleton, SkeletonItem } from "@fluentui/react-components";
+import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
+var FormLoading = (props) => {
+  const { loadingShimmerCount, loadingFieldShimmerHeight, inPanel, hideTitleShimmer } = props;
+  return /* @__PURE__ */ jsx26("div", { className: `fe-loading ${inPanel ? "in-panel" : ""}`, children: [...Array(loadingShimmerCount || FormConstants2.loadingShimmerCount)].map((_, i) => /* @__PURE__ */ jsx26("div", { className: "form-field-loading", children: /* @__PURE__ */ jsxs9(Skeleton, { children: [
+    !hideTitleShimmer && /* @__PURE__ */ jsx26(SkeletonItem, { style: { width: "33%" } }),
+    /* @__PURE__ */ jsx26(SkeletonItem, { style: { height: `${loadingFieldShimmerHeight || FormConstants2.loadingFieldShimmerHeight}px` } })
+  ] }) }, `fe-loading-${i}`)) });
+};
+
+// src/registry.ts
+import { ComponentTypes } from "@form-eng/core";
+import React6 from "react";
+function createFluentFieldRegistry() {
+  return {
+    [ComponentTypes.Textbox]: React6.createElement(Textbox_default),
+    [ComponentTypes.Number]: React6.createElement(Number_default),
+    [ComponentTypes.Toggle]: React6.createElement(Toggle_default),
+    [ComponentTypes.Dropdown]: React6.createElement(Dropdown_default),
+    [ComponentTypes.MultiSelect]: React6.createElement(MultiSelect_default),
+    [ComponentTypes.DateControl]: React6.createElement(DateControl_default),
+    [ComponentTypes.Slider]: React6.createElement(Slider_default),
+    [ComponentTypes.Fragment]: React6.createElement(DynamicFragment_default),
+    [ComponentTypes.SimpleDropdown]: React6.createElement(SimpleDropdown_default),
+    [ComponentTypes.MultiSelectSearch]: React6.createElement(MultiSelectSearch_default),
+    [ComponentTypes.Textarea]: React6.createElement(PopOutEditor_default),
+    [ComponentTypes.DocumentLinks]: React6.createElement(DocumentLinks_default2),
+    [ComponentTypes.StatusDropdown]: React6.createElement(StatusDropdown_default2),
+    [ComponentTypes.ReadOnly]: React6.createElement(ReadOnly_default),
+    [ComponentTypes.ReadOnlyArray]: React6.createElement(ReadOnlyArray_default),
+    [ComponentTypes.ReadOnlyDateTime]: React6.createElement(ReadOnlyDateTime_default),
+    [ComponentTypes.ReadOnlyCumulativeNumber]: React6.createElement(ReadOnlyCumulativeNumber_default),
+    [ComponentTypes.ReadOnlyRichText]: React6.createElement(ReadOnlyRichText_default),
+    [ComponentTypes.ReadOnlyWithButton]: React6.createElement(ReadOnlyWithButton_default)
+  };
+}
+export {
+  DateControl_default as DateControl,
+  DocumentLink_default as DocumentLink,
+  DocumentLinks_default as DocumentLinks,
+  DocumentLinks_default2 as DocumentLinksField,
+  DocumentLinksStrings,
+  Dropdown_default as DropdownField,
+  FieldClassName,
+  FormLoading,
+  DynamicFragment_default as Fragment,
+  GetFieldDataTestId,
+  MultiSelect_default as MultiSelect,
+  MultiSelectSearch_default as MultiSelectSearch,
+  Number_default as NumberField,
+  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 SliderField,
+  StatusColor_default as StatusColor,
+  StatusDropdown_default as StatusDropdown,
+  StatusDropdown_default2 as StatusDropdownField,
+  StatusMessage,
+  Textbox_default as Textbox,
+  Toggle_default as Toggle,
+  createFluentFieldRegistry,
+  formatDateTime
+};
+//# sourceMappingURL=index.mjs.map