@form-eng/react-aria 1.5.0

package/dist/index.mjs

@@ -0,0 +1,675 @@
+// src/components/ReadOnlyText.tsx
+import { jsx } from "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__ */ jsx(
+    "span",
+    {
+      id: `${fieldName}-read-only`,
+      className: "df-read-only-text",
+      "data-field-type": "ReadOnlyText",
+      title: value,
+      children: displayValue
+    }
+  );
+};
+
+// src/helpers.ts
+import {
+  GetFieldDataTestId,
+  getFieldState,
+  formatDateTime,
+  DocumentLinksStrings,
+  convertBooleanToYesOrNoText,
+  isNull
+} from "@form-eng/core/adapter-utils";
+
+// src/fields/Textbox.tsx
+import { TextField, Input } from "react-aria-components";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Textbox = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, placeholder, setFieldValue } = props;
+  if (readOnly) {
+    return /* @__PURE__ */ jsx2(
+      ReadOnlyText,
+      {
+        fieldName,
+        value,
+        ellipsifyTextCharacters: config?.ellipsifyTextCharacters
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    TextField,
+    {
+      className: "df-textbox",
+      value: value ?? "",
+      onChange: (val) => setFieldValue(fieldName, val, false, 3e3),
+      isInvalid: !!error,
+      isRequired: required,
+      "data-field-type": "Textbox",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      children: /* @__PURE__ */ jsx2(
+        Input,
+        {
+          autoComplete: "off",
+          placeholder: placeholder ?? config?.placeHolder,
+          "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+        }
+      )
+    }
+  );
+};
+var Textbox_default = Textbox;
+
+// src/fields/Number.tsx
+import { NumberField, Input as Input2 } from "react-aria-components";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var NumberFieldComponent = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  if (readOnly) {
+    return /* @__PURE__ */ jsx3(ReadOnlyText, { fieldName, value: String(value) });
+  }
+  return /* @__PURE__ */ jsx3(
+    NumberField,
+    {
+      className: "df-number",
+      value: !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": getFieldState({ error, required, readOnly }),
+      children: /* @__PURE__ */ jsx3(
+        Input2,
+        {
+          autoComplete: "off",
+          "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+        }
+      )
+    }
+  );
+};
+var Number_default = NumberFieldComponent;
+
+// src/fields/Toggle.tsx
+import { Switch } from "react-aria-components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Toggle = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, label, setFieldValue } = props;
+  if (readOnly) {
+    return /* @__PURE__ */ jsx4(ReadOnlyText, { fieldName, value: convertBooleanToYesOrNoText(value) });
+  }
+  return /* @__PURE__ */ jsx4(
+    Switch,
+    {
+      className: "df-toggle",
+      isSelected: !!value,
+      onChange: (checked) => setFieldValue(fieldName, checked),
+      "data-field-type": "Toggle",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: /* @__PURE__ */ jsx4("span", { className: "df-toggle__label", children: label })
+    }
+  );
+};
+var Toggle_default = Toggle;
+
+// src/fields/Dropdown.tsx
+import React from "react";
+import { Select, SelectValue, Button, Popover, ListBox, ListBoxItem } from "react-aria-components";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var Dropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, options, placeholder, setFieldValue } = props;
+  React.useEffect(() => {
+    if (!value && !readOnly && config?.setDefaultKeyIfOnlyOneOption && options?.length === 1) {
+      setFieldValue(fieldName, String(options[0].value));
+    }
+  }, [options]);
+  if (readOnly) {
+    return /* @__PURE__ */ jsx5(ReadOnlyText, { fieldName, value });
+  }
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      className: "df-dropdown",
+      selectedKey: value || null,
+      onSelectionChange: (key) => setFieldValue(fieldName, String(key)),
+      isInvalid: !!error,
+      isRequired: required,
+      "data-field-type": "Dropdown",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: "df-dropdown__trigger",
+            "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+            children: [
+              /* @__PURE__ */ jsx5(SelectValue, { children: placeholder ?? config?.placeHolder ?? "" }),
+              /* @__PURE__ */ jsx5("span", { className: "df-dropdown__icon", "aria-hidden": "true", children: "\u25BC" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5(Popover, { className: "df-dropdown__popover", children: /* @__PURE__ */ jsx5(ListBox, { className: "df-dropdown__listbox", children: options?.map((option) => /* @__PURE__ */ jsx5(
+          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
+import { jsx as jsx6 } from "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__ */ jsx6(
+      "ul",
+      {
+        className: "df-multiselect-readonly",
+        "data-field-type": "MultiSelect",
+        "data-field-state": "readonly",
+        children: selectedValues.map((v, i) => /* @__PURE__ */ jsx6("li", { children: v }, i))
+      }
+    ) : /* @__PURE__ */ jsx6("span", { className: "df-read-only-text", children: "-" });
+  }
+  return /* @__PURE__ */ jsx6(
+    "select",
+    {
+      multiple: true,
+      className: "df-multiselect",
+      value: selectedValues,
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-field-type": "MultiSelect",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ jsx6("option", { 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 { 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 onClear = () => {
+    setFieldValue(fieldName, null);
+  };
+  const dateInputValue = value ? new Date(value).toISOString().split("T")[0] : "";
+  if (readOnly) {
+    return value ? /* @__PURE__ */ jsx7(
+      "time",
+      {
+        className: "df-read-only-date",
+        dateTime: value,
+        "data-field-type": "DateControl",
+        "data-field-state": "readonly",
+        children: formatDateTime(value, { hideTimestamp: true })
+      }
+    ) : /* @__PURE__ */ jsx7("span", { className: "df-read-only-text", children: "-" });
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "df-date-control",
+      "data-field-type": "DateControl",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            type: "date",
+            className: "df-date-control__input",
+            value: dateInputValue,
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: "df-date-control__clear",
+            onClick: onClear,
+            title: FormStrings.clickToClear,
+            "aria-label": `${fieldName} ${FormStrings.clear}`,
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+var DateControl_default = DateControl;
+
+// src/fields/Slider.tsx
+import { Slider as AriaSlider, SliderTrack, SliderThumb, SliderOutput } from "react-aria-components";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var Slider = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, setFieldValue } = props;
+  if (readOnly) {
+    return /* @__PURE__ */ jsx8(ReadOnlyText, { fieldName, value: String(value) });
+  }
+  return /* @__PURE__ */ jsxs3(
+    AriaSlider,
+    {
+      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": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: [
+        /* @__PURE__ */ jsx8(SliderTrack, { className: "df-slider__track", children: /* @__PURE__ */ jsx8(SliderThumb, { className: "df-slider__thumb" }) }),
+        /* @__PURE__ */ jsx8(SliderOutput, { className: "df-slider__value" })
+      ]
+    }
+  );
+};
+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 { Select as Select2, SelectValue as SelectValue2, Button as Button2, Popover as Popover2, ListBox as ListBox2, ListBoxItem as ListBoxItem2 } from "react-aria-components";
+import { jsx as jsx10, jsxs as jsxs4 } from "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__ */ jsx10(ReadOnlyText, { fieldName, value });
+  }
+  return /* @__PURE__ */ jsxs4(
+    Select2,
+    {
+      className: "df-simple-dropdown",
+      selectedKey: value || null,
+      onSelectionChange: (key) => setFieldValue(fieldName, String(key)),
+      isInvalid: !!error,
+      isRequired: required,
+      "data-field-type": "SimpleDropdown",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ jsxs4(
+          Button2,
+          {
+            className: "df-simple-dropdown__trigger",
+            "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+            children: [
+              /* @__PURE__ */ jsx10(SelectValue2, { children: placeholder ?? config?.placeHolder ?? "" }),
+              /* @__PURE__ */ jsx10("span", { className: "df-simple-dropdown__icon", "aria-hidden": "true", children: "\u25BC" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx10(Popover2, { className: "df-simple-dropdown__popover", children: /* @__PURE__ */ jsx10(ListBox2, { className: "df-simple-dropdown__listbox", children: simpleOptions.map((option) => /* @__PURE__ */ jsx10(ListBoxItem2, { id: option, className: "df-simple-dropdown__item", children: option }, option)) }) })
+      ]
+    }
+  );
+};
+var SimpleDropdown_default = SimpleDropdown;
+
+// src/fields/Textarea.tsx
+import { FormStrings as FormStrings3 } from "@form-eng/core";
+import React2, { useState } from "react";
+
+// src/components/StatusMessage.tsx
+import { FormStrings as FormStrings2 } from "@form-eng/core";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var StatusMessage = (props) => {
+  const { id, error, errorCount, savePending, saving } = props;
+  return /* @__PURE__ */ jsx11("div", { className: "df-status-message", "data-field-type": "StatusMessage", children: error ? /* @__PURE__ */ jsx11("span", { className: "df-status-error", id, role: "alert", children: error.message || "Error" }) : savePending ? /* @__PURE__ */ jsxs5("span", { className: "df-status-warning", id, role: "alert", children: [
+    FormStrings2.autoSavePending,
+    " (",
+    errorCount,
+    " ",
+    FormStrings2.remaining,
+    ")"
+  ] }) : saving ? /* @__PURE__ */ jsx11("span", { className: "df-status-saving", id, role: "status", children: FormStrings2.saving }) : null });
+};
+
+// src/fields/Textarea.tsx
+import { TextField as TextField2, TextArea } from "react-aria-components";
+import { Fragment, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var Textarea = (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 [confirmVisible, setConfirmVisible] = useState(false);
+  const dialogRef = React2.useRef(null);
+  const confirmRef = React2.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__ */ jsx12(
+      ReadOnlyText,
+      {
+        fieldName,
+        value: value ? `${value}` : "",
+        ellipsifyTextCharacters: config?.ellipsifyTextCharacters
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: "df-textarea",
+        "data-field-type": "Textarea",
+        "data-field-state": getFieldState({ error, required, readOnly }),
+        children: [
+          /* @__PURE__ */ jsx12(
+            TextField2,
+            {
+              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__ */ jsx12(
+                TextArea,
+                {
+                  className: "df-textarea__input",
+                  autoComplete: "off",
+                  rows: config?.numberOfRows ?? 4,
+                  "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              className: "df-textarea__expand",
+              onClick: onExpand,
+              "aria-label": FormStrings3.openExpandedTextEditor,
+              children: FormStrings3.expand
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs6("dialog", { ref: dialogRef, className: "df-textarea-dialog", "aria-label": `${label} editor`, children: [
+      /* @__PURE__ */ jsxs6("header", { className: "df-textarea-dialog__header", children: [
+        /* @__PURE__ */ jsxs6("h2", { className: "df-textarea-dialog__title", children: [
+          label,
+          required && /* @__PURE__ */ jsx12("span", { className: "df-required-indicator", children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: "df-textarea-dialog__close",
+            onClick: onCancel,
+            "aria-label": FormStrings3.closeExpandedTextEditor,
+            children: "\xD7"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx12("div", { className: "df-textarea-dialog__body", children: /* @__PURE__ */ jsx12(
+        "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__ */ jsxs6("footer", { className: "df-textarea-dialog__footer", children: [
+        config?.renderExtraModalFooter && /* @__PURE__ */ jsx12("div", { children: config.renderExtraModalFooter() }),
+        (savePending || saving) && /* @__PURE__ */ jsx12(StatusMessage, { savePending: !error ? savePending : void 0, saving, error }),
+        /* @__PURE__ */ jsx12("button", { type: "button", className: "df-btn df-btn--secondary", onClick: onCancel, children: FormStrings3.cancel }),
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: "df-btn df-btn--primary",
+            onClick: onSave,
+            disabled: !config?.saveCallback && modalValue === value,
+            "data-testid": `${programName}-${entityType}-${entityId}-save-note`,
+            children: FormStrings3.save
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6("dialog", { ref: confirmRef, className: "df-confirm-dialog", children: [
+      /* @__PURE__ */ jsx12("h2", { children: FormStrings3.unsavedChanges }),
+      /* @__PURE__ */ jsx12("p", { children: FormStrings3.saveChangesTo(label) }),
+      /* @__PURE__ */ jsxs6("footer", { className: "df-confirm-dialog__footer", children: [
+        /* @__PURE__ */ jsx12("button", { type: "button", className: "df-btn df-btn--secondary", onClick: onCancel, children: FormStrings3.dontSave }),
+        /* @__PURE__ */ jsx12("button", { type: "button", className: "df-btn df-btn--primary", onClick: onSave, children: FormStrings3.save })
+      ] })
+    ] })
+  ] });
+};
+var Textarea_default = Textarea;
+
+// src/fields/RadioGroup.tsx
+import { RadioGroup as AriaRadioGroup, Radio } from "react-aria-components";
+import { jsx as jsx13 } from "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__ */ jsx13(ReadOnlyText, { fieldName, value: label });
+  }
+  return /* @__PURE__ */ jsx13(
+    AriaRadioGroup,
+    {
+      className: "df-radio-group",
+      value: value ?? "",
+      onChange: (val) => setFieldValue(fieldName, val),
+      isInvalid: !!error,
+      isRequired: required,
+      "data-field-type": "RadioGroup",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ jsx13(
+        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
+import { CheckboxGroup as AriaCheckboxGroup, Checkbox } from "react-aria-components";
+import { jsx as jsx14 } from "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__ */ jsx14(ReadOnlyText, { fieldName, value: labels ?? "" });
+  }
+  return /* @__PURE__ */ jsx14(
+    AriaCheckboxGroup,
+    {
+      className: "df-checkbox-group",
+      value: selected,
+      onChange: (vals) => setFieldValue(fieldName, vals),
+      isInvalid: !!error,
+      isRequired: required,
+      "data-field-type": "CheckboxGroup",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ jsx14(
+        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
+import { jsx as jsx15 } from "react/jsx-runtime";
+var ReadOnly = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ jsx15(ReadOnlyText, { fieldName, value, ...config });
+};
+var ReadOnly_default = ReadOnly;
+
+// src/components/FormLoading.tsx
+import { FormConstants } from "@form-eng/core";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+var FormLoading = (props) => {
+  const { loadingShimmerCount, loadingFieldShimmerHeight, inPanel, hideTitleShimmer } = props;
+  const count = loadingShimmerCount || FormConstants.loadingShimmerCount;
+  const height = loadingFieldShimmerHeight || FormConstants.loadingFieldShimmerHeight;
+  return /* @__PURE__ */ jsx16(
+    "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__ */ jsxs7("div", { className: "df-form-loading__field", children: [
+        !hideTitleShimmer && /* @__PURE__ */ jsx16("div", { className: "df-skeleton df-skeleton--label", style: { width: "33%" } }),
+        /* @__PURE__ */ jsx16("div", { className: "df-skeleton df-skeleton--input", style: { height: `${height}px` } })
+      ] }, `df-loading-${i}`))
+    }
+  );
+};
+
+// src/registry.ts
+import { ComponentTypes } from "@form-eng/core";
+import React3 from "react";
+function createReactAriaFieldRegistry() {
+  return {
+    [ComponentTypes.Textbox]: React3.createElement(Textbox_default),
+    [ComponentTypes.Number]: React3.createElement(Number_default),
+    [ComponentTypes.Toggle]: React3.createElement(Toggle_default),
+    [ComponentTypes.Dropdown]: React3.createElement(Dropdown_default),
+    [ComponentTypes.MultiSelect]: React3.createElement(MultiSelect_default),
+    [ComponentTypes.DateControl]: React3.createElement(DateControl_default),
+    [ComponentTypes.Slider]: React3.createElement(Slider_default),
+    [ComponentTypes.Fragment]: React3.createElement(DynamicFragment_default),
+    [ComponentTypes.SimpleDropdown]: React3.createElement(SimpleDropdown_default),
+    [ComponentTypes.Textarea]: React3.createElement(Textarea_default),
+    [ComponentTypes.RadioGroup]: React3.createElement(RadioGroup_default),
+    [ComponentTypes.CheckboxGroup]: React3.createElement(CheckboxGroup_default),
+    [ComponentTypes.ReadOnly]: React3.createElement(ReadOnly_default)
+  };
+}
+export {
+  CheckboxGroup_default as CheckboxGroup,
+  DateControl_default as DateControl,
+  Dropdown_default as Dropdown,
+  DynamicFragment_default as DynamicFragment,
+  FormLoading,
+  GetFieldDataTestId,
+  MultiSelect_default as MultiSelect,
+  Number_default as Number,
+  RadioGroup_default as RadioGroup,
+  ReadOnly_default as ReadOnly,
+  ReadOnlyText,
+  SimpleDropdown_default as SimpleDropdown,
+  Slider_default as Slider,
+  StatusMessage,
+  Textarea_default as Textarea,
+  Textbox_default as Textbox,
+  Toggle_default as Toggle,
+  createReactAriaFieldRegistry,
+  formatDateTime,
+  getFieldState
+};
+//# sourceMappingURL=index.mjs.map