@form-eng/react-aria 1.5.0

package/dist/index.js

@@ -0,0 +1,723 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CheckboxGroup: () => CheckboxGroup_default,
+  DateControl: () => DateControl_default,
+  Dropdown: () => Dropdown_default,
+  DynamicFragment: () => DynamicFragment_default,
+  FormLoading: () => FormLoading,
+  GetFieldDataTestId: () => import_adapter_utils.GetFieldDataTestId,
+  MultiSelect: () => MultiSelect_default,
+  Number: () => Number_default,
+  RadioGroup: () => RadioGroup_default,
+  ReadOnly: () => ReadOnly_default,
+  ReadOnlyText: () => ReadOnlyText,
+  SimpleDropdown: () => SimpleDropdown_default,
+  Slider: () => Slider_default,
+  StatusMessage: () => StatusMessage,
+  Textarea: () => Textarea_default,
+  Textbox: () => Textbox_default,
+  Toggle: () => Toggle_default,
+  createReactAriaFieldRegistry: () => createReactAriaFieldRegistry,
+  formatDateTime: () => import_adapter_utils.formatDateTime,
+  getFieldState: () => import_adapter_utils.getFieldState
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/ReadOnlyText.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ReadOnlyText = (props) => {
+  const { value, fieldName, ellipsifyTextCharacters } = props;
+  const cutoff = (ellipsifyTextCharacters || 0) - 3;
+  const displayValue = value ? ellipsifyTextCharacters && value.length > ellipsifyTextCharacters ? `${value.substring(0, cutoff)}...` : value : "-";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      id: `${fieldName}-read-only`,
+      className: "df-read-only-text",
+      "data-field-type": "ReadOnlyText",
+      title: value,
+      children: displayValue
+    }
+  );
+};
+
+// src/helpers.ts
+var import_adapter_utils = require("@form-eng/core/adapter-utils");
+
+// src/fields/Textbox.tsx
+var import_react_aria_components = require("react-aria-components");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Textbox = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, placeholder, setFieldValue } = props;
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      ReadOnlyText,
+      {
+        fieldName,
+        value,
+        ellipsifyTextCharacters: config?.ellipsifyTextCharacters
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_aria_components.TextField,
+    {
+      className: "df-textbox",
+      value: value ?? "",
+      onChange: (val) => setFieldValue(fieldName, val, false, 3e3),
+      isInvalid: !!error,
+      isRequired: required,
+      "data-field-type": "Textbox",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_aria_components.Input,
+        {
+          autoComplete: "off",
+          placeholder: placeholder ?? config?.placeHolder,
+          "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+        }
+      )
+    }
+  );
+};
+var Textbox_default = Textbox;
+
+// src/fields/Number.tsx
+var import_react_aria_components2 = require("react-aria-components");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var NumberFieldComponent = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReadOnlyText, { fieldName, value: String(value) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_aria_components2.NumberField,
+    {
+      className: "df-number",
+      value: !(0, import_adapter_utils.isNull)(value) ? value : void 0,
+      onChange: (num) => {
+        if (!isNaN(num)) {
+          setFieldValue(fieldName, num, false, 1500);
+        }
+      },
+      isInvalid: !!error,
+      isRequired: required,
+      formatOptions: { useGrouping: false },
+      "data-field-type": "Number",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_aria_components2.Input,
+        {
+          autoComplete: "off",
+          "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+        }
+      )
+    }
+  );
+};
+var Number_default = NumberFieldComponent;
+
+// src/fields/Toggle.tsx
+var import_react_aria_components3 = require("react-aria-components");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Toggle = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, label, setFieldValue } = props;
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReadOnlyText, { fieldName, value: (0, import_adapter_utils.convertBooleanToYesOrNoText)(value) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_aria_components3.Switch,
+    {
+      className: "df-toggle",
+      isSelected: !!value,
+      onChange: (checked) => setFieldValue(fieldName, checked),
+      "data-field-type": "Toggle",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "df-toggle__label", children: label })
+    }
+  );
+};
+var Toggle_default = Toggle;
+
+// src/fields/Dropdown.tsx
+var import_react = __toESM(require("react"));
+var import_react_aria_components4 = require("react-aria-components");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Dropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, options, placeholder, setFieldValue } = props;
+  import_react.default.useEffect(() => {
+    if (!value && !readOnly && config?.setDefaultKeyIfOnlyOneOption && options?.length === 1) {
+      setFieldValue(fieldName, String(options[0].value));
+    }
+  }, [options]);
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ReadOnlyText, { fieldName, value });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_react_aria_components4.Select,
+    {
+      className: "df-dropdown",
+      selectedKey: value || null,
+      onSelectionChange: (key) => setFieldValue(fieldName, String(key)),
+      isInvalid: !!error,
+      isRequired: required,
+      "data-field-type": "Dropdown",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          import_react_aria_components4.Button,
+          {
+            className: "df-dropdown__trigger",
+            "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_aria_components4.SelectValue, { children: placeholder ?? config?.placeHolder ?? "" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "df-dropdown__icon", "aria-hidden": "true", children: "\u25BC" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_aria_components4.Popover, { className: "df-dropdown__popover", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_aria_components4.ListBox, { className: "df-dropdown__listbox", children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_react_aria_components4.ListBoxItem,
+          {
+            id: String(option.value),
+            className: "df-dropdown__item",
+            isDisabled: option.disabled,
+            children: option.label
+          },
+          String(option.value)
+        )) }) })
+      ]
+    }
+  );
+};
+var Dropdown_default = Dropdown;
+
+// src/fields/MultiSelect.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MultiSelect = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  const selectedValues = value ?? [];
+  const onChange = (event) => {
+    const selected = Array.from(event.target.selectedOptions, (opt) => opt.value);
+    setFieldValue(fieldName, selected, false, 1500);
+  };
+  if (readOnly) {
+    return selectedValues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "ul",
+      {
+        className: "df-multiselect-readonly",
+        "data-field-type": "MultiSelect",
+        "data-field-state": "readonly",
+        children: selectedValues.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: v }, i))
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "df-read-only-text", children: "-" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "select",
+    {
+      multiple: true,
+      className: "df-multiselect",
+      value: selectedValues,
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-field-type": "MultiSelect",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+    }
+  );
+};
+var MultiSelect_default = MultiSelect;
+
+// src/fields/DateControl.tsx
+var import_core = require("@form-eng/core");
+var import_jsx_runtime7 = require("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 onClear = () => {
+    setFieldValue(fieldName, null);
+  };
+  const dateInputValue = value ? new Date(value).toISOString().split("T")[0] : "";
+  if (readOnly) {
+    return value ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "time",
+      {
+        className: "df-read-only-date",
+        dateTime: value,
+        "data-field-type": "DateControl",
+        "data-field-state": "readonly",
+        children: (0, import_adapter_utils.formatDateTime)(value, { hideTimestamp: true })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "df-read-only-text", children: "-" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: "df-date-control",
+      "data-field-type": "DateControl",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            type: "date",
+            className: "df-date-control__input",
+            value: dateInputValue,
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "df-date-control__clear",
+            onClick: onClear,
+            title: import_core.FormStrings.clickToClear,
+            "aria-label": `${fieldName} ${import_core.FormStrings.clear}`,
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+var DateControl_default = DateControl;
+
+// src/fields/Slider.tsx
+var import_react_aria_components5 = require("react-aria-components");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Slider = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, setFieldValue } = props;
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ReadOnlyText, { fieldName, value: String(value) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    import_react_aria_components5.Slider,
+    {
+      className: "df-slider",
+      value: value ?? 0,
+      onChange: (num) => setFieldValue(fieldName, num),
+      maxValue: config?.max,
+      minValue: config?.min,
+      step: config?.step,
+      "data-field-type": "Slider",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_aria_components5.SliderTrack, { className: "df-slider__track", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_aria_components5.SliderThumb, { className: "df-slider__thumb" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_aria_components5.SliderOutput, { className: "df-slider__value" })
+      ]
+    }
+  );
+};
+var Slider_default = Slider;
+
+// src/fields/DynamicFragment.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DynamicFragment = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { type: "hidden", value });
+};
+var DynamicFragment_default = DynamicFragment;
+
+// src/fields/SimpleDropdown.tsx
+var import_react_aria_components6 = require("react-aria-components");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var SimpleDropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, placeholder, setFieldValue } = props;
+  const simpleOptions = config?.dropdownOptions ?? [];
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ReadOnlyText, { fieldName, value });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    import_react_aria_components6.Select,
+    {
+      className: "df-simple-dropdown",
+      selectedKey: value || null,
+      onSelectionChange: (key) => setFieldValue(fieldName, String(key)),
+      isInvalid: !!error,
+      isRequired: required,
+      "data-field-type": "SimpleDropdown",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          import_react_aria_components6.Button,
+          {
+            className: "df-simple-dropdown__trigger",
+            "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components6.SelectValue, { children: placeholder ?? config?.placeHolder ?? "" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "df-simple-dropdown__icon", "aria-hidden": "true", children: "\u25BC" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components6.Popover, { className: "df-simple-dropdown__popover", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components6.ListBox, { className: "df-simple-dropdown__listbox", children: simpleOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components6.ListBoxItem, { id: option, className: "df-simple-dropdown__item", children: option }, option)) }) })
+      ]
+    }
+  );
+};
+var SimpleDropdown_default = SimpleDropdown;
+
+// src/fields/Textarea.tsx
+var import_core3 = require("@form-eng/core");
+var import_react2 = __toESM(require("react"));
+
+// src/components/StatusMessage.tsx
+var import_core2 = require("@form-eng/core");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var StatusMessage = (props) => {
+  const { id, error, errorCount, savePending, saving } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "df-status-message", "data-field-type": "StatusMessage", children: error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "df-status-error", id, role: "alert", children: error.message || "Error" }) : savePending ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "df-status-warning", id, role: "alert", children: [
+    import_core2.FormStrings.autoSavePending,
+    " (",
+    errorCount,
+    " ",
+    import_core2.FormStrings.remaining,
+    ")"
+  ] }) : saving ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "df-status-saving", id, role: "status", children: import_core2.FormStrings.saving }) : null });
+};
+
+// src/fields/Textarea.tsx
+var import_react_aria_components7 = require("react-aria-components");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Textarea = (props) => {
+  const {
+    error,
+    fieldName,
+    programName,
+    entityType,
+    entityId,
+    config,
+    readOnly,
+    required,
+    savePending,
+    saving,
+    value,
+    label,
+    setFieldValue
+  } = props;
+  const [modalValue, setModalValue] = (0, import_react2.useState)();
+  const [modalVisible, setModalVisible] = (0, import_react2.useState)(false);
+  const [confirmVisible, setConfirmVisible] = (0, import_react2.useState)(false);
+  const dialogRef = import_react2.default.useRef(null);
+  const confirmRef = import_react2.default.useRef(null);
+  const onExpand = () => {
+    setModalVisible(true);
+    setModalValue(value ? `${value}` : "");
+    dialogRef.current?.showModal();
+  };
+  const onSave = () => {
+    setFieldValue(fieldName, modalValue, false);
+    setConfirmVisible(false);
+    setModalVisible(false);
+    dialogRef.current?.close();
+    confirmRef.current?.close();
+    config?.saveCallback?.();
+  };
+  const onCancel = () => {
+    if (confirmVisible) {
+      setConfirmVisible(false);
+      setModalVisible(false);
+      dialogRef.current?.close();
+      confirmRef.current?.close();
+    } else if (modalValue !== value) {
+      setConfirmVisible(true);
+      confirmRef.current?.showModal();
+    } else {
+      setModalVisible(false);
+      dialogRef.current?.close();
+    }
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      ReadOnlyText,
+      {
+        fieldName,
+        value: value ? `${value}` : "",
+        ellipsifyTextCharacters: config?.ellipsifyTextCharacters
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "div",
+      {
+        className: "df-textarea",
+        "data-field-type": "Textarea",
+        "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_react_aria_components7.TextField,
+            {
+              className: "df-textarea__field",
+              value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+              onChange: (val) => {
+                modalVisible ? setModalValue(val) : setFieldValue(fieldName, val, false, 3e3);
+              },
+              isInvalid: !!error,
+              isRequired: required,
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                import_react_aria_components7.TextArea,
+                {
+                  className: "df-textarea__input",
+                  autoComplete: "off",
+                  rows: config?.numberOfRows ?? 4,
+                  "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "df-textarea__expand",
+              onClick: onExpand,
+              "aria-label": import_core3.FormStrings.openExpandedTextEditor,
+              children: import_core3.FormStrings.expand
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("dialog", { ref: dialogRef, className: "df-textarea-dialog", "aria-label": `${label} editor`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: "df-textarea-dialog__header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("h2", { className: "df-textarea-dialog__title", children: [
+          label,
+          required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "df-required-indicator", children: " *" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "df-textarea-dialog__close",
+            onClick: onCancel,
+            "aria-label": import_core3.FormStrings.closeExpandedTextEditor,
+            children: "\xD7"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "df-textarea-dialog__body", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "textarea",
+        {
+          className: "df-textarea-dialog__input",
+          autoComplete: "off",
+          value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+          onChange: (e) => setModalValue(e.target.value),
+          rows: 12,
+          "aria-invalid": !!error
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("footer", { className: "df-textarea-dialog__footer", children: [
+        config?.renderExtraModalFooter && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: config.renderExtraModalFooter() }),
+        (savePending || saving) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StatusMessage, { savePending: !error ? savePending : void 0, saving, error }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "df-btn df-btn--secondary", onClick: onCancel, children: import_core3.FormStrings.cancel }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "df-btn df-btn--primary",
+            onClick: onSave,
+            disabled: !config?.saveCallback && modalValue === value,
+            "data-testid": `${programName}-${entityType}-${entityId}-save-note`,
+            children: import_core3.FormStrings.save
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("dialog", { ref: confirmRef, className: "df-confirm-dialog", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { children: import_core3.FormStrings.unsavedChanges }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: import_core3.FormStrings.saveChangesTo(label) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("footer", { className: "df-confirm-dialog__footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "df-btn df-btn--secondary", onClick: onCancel, children: import_core3.FormStrings.dontSave }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "df-btn df-btn--primary", onClick: onSave, children: import_core3.FormStrings.save })
+      ] })
+    ] })
+  ] });
+};
+var Textarea_default = Textarea;
+
+// src/fields/RadioGroup.tsx
+var import_react_aria_components8 = require("react-aria-components");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var RadioGroup = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  if (readOnly) {
+    const label = options?.find((o) => String(o.value) === String(value))?.label ?? value;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ReadOnlyText, { fieldName, value: label });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react_aria_components8.RadioGroup,
+    {
+      className: "df-radio-group",
+      value: value ?? "",
+      onChange: (val) => setFieldValue(fieldName, val),
+      isInvalid: !!error,
+      isRequired: required,
+      "data-field-type": "RadioGroup",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_react_aria_components8.Radio,
+        {
+          value: String(option.value),
+          className: "df-radio-group__option",
+          isDisabled: option.disabled,
+          children: option.label
+        },
+        String(option.value)
+      ))
+    }
+  );
+};
+var RadioGroup_default = RadioGroup;
+
+// src/fields/CheckboxGroup.tsx
+var import_react_aria_components9 = require("react-aria-components");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var CheckboxGroup = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  const selected = Array.isArray(value) ? value : [];
+  if (readOnly) {
+    const labels = options?.filter((o) => selected.includes(String(o.value))).map((o) => o.label).join(", ");
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ReadOnlyText, { fieldName, value: labels ?? "" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_aria_components9.CheckboxGroup,
+    {
+      className: "df-checkbox-group",
+      value: selected,
+      onChange: (vals) => setFieldValue(fieldName, vals),
+      isInvalid: !!error,
+      isRequired: required,
+      "data-field-type": "CheckboxGroup",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_react_aria_components9.Checkbox,
+        {
+          value: String(option.value),
+          className: "df-checkbox-group__option",
+          isDisabled: option.disabled,
+          children: option.label
+        },
+        String(option.value)
+      ))
+    }
+  );
+};
+var CheckboxGroup_default = CheckboxGroup;
+
+// src/fields/readonly/ReadOnly.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ReadOnly = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ReadOnlyText, { fieldName, value, ...config });
+};
+var ReadOnly_default = ReadOnly;
+
+// src/components/FormLoading.tsx
+var import_core4 = require("@form-eng/core");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var FormLoading = (props) => {
+  const { loadingShimmerCount, loadingFieldShimmerHeight, inPanel, hideTitleShimmer } = props;
+  const count = loadingShimmerCount || import_core4.FormConstants.loadingShimmerCount;
+  const height = loadingFieldShimmerHeight || import_core4.FormConstants.loadingFieldShimmerHeight;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      className: `df-form-loading ${inPanel ? "df-form-loading--panel" : ""}`,
+      "data-field-type": "FormLoading",
+      role: "status",
+      "aria-label": "Loading form",
+      children: [...Array(count)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "df-form-loading__field", children: [
+        !hideTitleShimmer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "df-skeleton df-skeleton--label", style: { width: "33%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "df-skeleton df-skeleton--input", style: { height: `${height}px` } })
+      ] }, `df-loading-${i}`))
+    }
+  );
+};
+
+// src/registry.ts
+var import_core5 = require("@form-eng/core");
+var import_react3 = __toESM(require("react"));
+function createReactAriaFieldRegistry() {
+  return {
+    [import_core5.ComponentTypes.Textbox]: import_react3.default.createElement(Textbox_default),
+    [import_core5.ComponentTypes.Number]: import_react3.default.createElement(Number_default),
+    [import_core5.ComponentTypes.Toggle]: import_react3.default.createElement(Toggle_default),
+    [import_core5.ComponentTypes.Dropdown]: import_react3.default.createElement(Dropdown_default),
+    [import_core5.ComponentTypes.MultiSelect]: import_react3.default.createElement(MultiSelect_default),
+    [import_core5.ComponentTypes.DateControl]: import_react3.default.createElement(DateControl_default),
+    [import_core5.ComponentTypes.Slider]: import_react3.default.createElement(Slider_default),
+    [import_core5.ComponentTypes.Fragment]: import_react3.default.createElement(DynamicFragment_default),
+    [import_core5.ComponentTypes.SimpleDropdown]: import_react3.default.createElement(SimpleDropdown_default),
+    [import_core5.ComponentTypes.Textarea]: import_react3.default.createElement(Textarea_default),
+    [import_core5.ComponentTypes.RadioGroup]: import_react3.default.createElement(RadioGroup_default),
+    [import_core5.ComponentTypes.CheckboxGroup]: import_react3.default.createElement(CheckboxGroup_default),
+    [import_core5.ComponentTypes.ReadOnly]: import_react3.default.createElement(ReadOnly_default)
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckboxGroup,
+  DateControl,
+  Dropdown,
+  DynamicFragment,
+  FormLoading,
+  GetFieldDataTestId,
+  MultiSelect,
+  Number,
+  RadioGroup,
+  ReadOnly,
+  ReadOnlyText,
+  SimpleDropdown,
+  Slider,
+  StatusMessage,
+  Textarea,
+  Textbox,
+  Toggle,
+  createReactAriaFieldRegistry,
+  formatDateTime,
+  getFieldState
+});
+//# sourceMappingURL=index.js.map