@availity/form
Version:
Form Wrapper around formik using reactstrap components
787 lines (774 loc) • 26.7 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
// src/Form.js
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { v4 as uuid } from "uuid";
import { Form as RsForm } from "reactstrap";
import { Formik, Form as FForm, useFormikContext } from "formik";
var useFormikFocusFirstInvalidField = (id, focusInvalidField, invalidInputSelectors) => {
const formik = useFormikContext();
const [submitCount, setSubmitCount] = useState(formik.submitCount);
useEffect(() => {
if (focusInvalidField && !formik.isValid && formik.submitCount > submitCount) {
const form = document.getElementById(id);
const firstInvalidInput = form.querySelector(invalidInputSelectors);
firstInvalidInput == null ? void 0 : firstInvalidInput.focus();
setSubmitCount(formik.submitCount);
}
}, [id, focusInvalidField, formik.isValid, formik.submitCount, invalidInputSelectors, submitCount, formik.errors]);
};
var FocusableForm = (_a) => {
var _b = _a, { children, focusProps } = _b, rest = __objRest(_b, ["children", "focusProps"]);
useFormikFocusFirstInvalidField(...focusProps);
return /* @__PURE__ */ React.createElement(RsForm, __spreadValues({}, rest), children);
};
var Form = (_a) => {
var _b = _a, {
initialValues,
enableReinitialize,
onSubmit,
initialStatus,
initialErrors,
initialTouched,
onReset,
validationSchema,
validate,
focusInvalidField,
id,
innerRef,
invalidInputSelectors,
children
} = _b, rest = __objRest(_b, [
"initialValues",
"enableReinitialize",
"onSubmit",
"initialStatus",
"initialErrors",
"initialTouched",
"onReset",
"validationSchema",
"validate",
"focusInvalidField",
"id",
"innerRef",
"invalidInputSelectors",
"children"
]);
const formId = id || uuid();
const focusProps = [id = formId, focusInvalidField, invalidInputSelectors];
return /* @__PURE__ */ React.createElement(Formik, {
initialValues,
enableReinitialize,
onSubmit,
onReset,
initialStatus,
initialErrors,
initialTouched,
validationSchema,
validate,
innerRef
}, (props) => /* @__PURE__ */ React.createElement(FocusableForm, __spreadValues({
"data-testid": "form-container",
tag: FForm,
id: formId,
focusProps
}, rest), typeof children === "function" ? children(props) : children));
};
Form.propTypes = {
children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
enableReinitialize: PropTypes.bool,
focusInvalidField: PropTypes.bool,
id: PropTypes.string,
initialErrors: PropTypes.object,
initialStatus: PropTypes.any,
initialTouched: PropTypes.object,
initialValues: PropTypes.object.isRequired,
innerRef: PropTypes.any,
invalidInputSelectors: PropTypes.string,
onReset: PropTypes.func,
onSubmit: PropTypes.func,
validate: PropTypes.func,
validationSchema: PropTypes.object
};
Form.defaultProps = {
focusInvalidField: true,
invalidInputSelectors: 'input[aria-invalid="true"], div.is-invalid input:first-of-type:not([hidden]):not([style*="display:none"]):not([style*="display: none"])',
onSubmit: () => {
}
};
FocusableForm.propTypes = {
children: PropTypes.node,
focusProps: PropTypes.array
};
var Form_default = Form;
// src/Field.js
import React6 from "react";
import PropTypes6 from "prop-types";
import { Col, FormText, Input as RsInput2, InputGroup, InputGroupAddon, InputGroupText } from "reactstrap";
import { v4 as uuid3 } from "uuid";
// src/Feedback.js
import React2 from "react";
import PropTypes2 from "prop-types";
import { FormFeedback } from "reactstrap";
import { ErrorMessage } from "formik";
var AvFeedback = (_a) => {
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
return /* @__PURE__ */ React2.createElement(FormFeedback, __spreadValues({}, rest), /* @__PURE__ */ React2.createElement("i", {
className: "icon icon-attention",
"aria-hidden": true
}), /* @__PURE__ */ React2.createElement("div", {
className: "sr-only"
}, "Error:"), children);
};
var Feedback = (_a) => {
var _b = _a, { name } = _b, rest = __objRest(_b, ["name"]);
const feedbackId = `${name}-feedback`.toLowerCase();
return /* @__PURE__ */ React2.createElement(ErrorMessage, __spreadValues({
id: feedbackId,
component: AvFeedback,
name
}, rest));
};
AvFeedback.propTypes = {
children: PropTypes2.node
};
Feedback.propTypes = {
name: PropTypes2.string.isRequired
};
var Feedback_default = Feedback;
// src/FormGroup.js
import React3 from "react";
import PropTypes3 from "prop-types";
import { FormGroup as RsFormGroup } from "reactstrap";
import classNames from "classnames";
import { useField } from "formik";
var FormGroup = (_a) => {
var _b = _a, { className, for: For } = _b, props = __objRest(_b, ["className", "for"]);
const [, metadata] = useField(For);
const classname = classNames(className, metadata.touched && metadata.error && `text-danger`);
return /* @__PURE__ */ React3.createElement(RsFormGroup, __spreadValues({
className: classname
}, props));
};
FormGroup.propTypes = {
className: PropTypes3.string,
for: PropTypes3.string
};
var FormGroup_default = FormGroup;
// src/Input.js
import React4 from "react";
import PropTypes4 from "prop-types";
import classNames2 from "classnames";
import { Input as RsInput } from "reactstrap";
import { useField as useField2 } from "formik";
var Input = (_a) => {
var _b = _a, { tag: Tag, className, onChange: propsOnChange, validate, name, feedback, help, required } = _b, rest = __objRest(_b, ["tag", "className", "onChange", "validate", "name", "feedback", "help", "required"]);
const [_a2, ..._b2] = useField2({
name,
validate
}), _c = _a2, { onChange } = _c, field = __objRest(_c, ["onChange"]), [metadata] = _b2;
const classes = classNames2(className, metadata.touched ? "is-touched" : "is-untouched", metadata.error ? "av-invalid" : "av-valid", metadata.touched && metadata.error && "is-invalid", rest.type === "checkbox" && metadata.touched && metadata.error && "was-validated");
const error = !!metadata.touched && !!metadata.error;
const feedbackId = error && feedback ? `${name}-feedback`.toLowerCase() : "";
const helpMessageId = help ? ` ${name}-helpmessage`.toLowerCase() : "";
const extraProps = {};
if (rest.type === "checkbox") {
extraProps.checked = !!field.value;
}
return /* @__PURE__ */ React4.createElement(Tag, __spreadValues(__spreadValues(__spreadValues({
className: classes,
onChange: (e) => {
onChange(e);
if (propsOnChange) {
propsOnChange(e);
}
},
name,
invalid: error,
"aria-describedby": feedbackId + helpMessageId,
"aria-required": required
}, field), extraProps), rest));
};
Input.propTypes = {
className: PropTypes4.string,
feedback: PropTypes4.bool,
help: PropTypes4.bool,
name: PropTypes4.string.isRequired,
onChange: PropTypes4.func,
required: PropTypes4.bool,
tag: PropTypes4.oneOfType([PropTypes4.func, PropTypes4.string]),
validate: PropTypes4.func
};
Input.defaultProps = {
tag: RsInput
};
var Input_default = Input;
// src/Label.js
import React5 from "react";
import PropTypes5 from "prop-types";
import { v4 as uuid2 } from "uuid";
import { Label as RSLabel } from "reactstrap";
import { FieldHelpIcon } from "@availity/help";
var RequiredAsterisk = () => /* @__PURE__ */ React5.createElement("strong", {
className: "text-danger d-inline align-text-top",
"data-testid": "required-asterisk",
style: {
fontSize: "130%",
lineHeight: "100%"
}
}, "*");
var RequiredKey = () => /* @__PURE__ */ React5.createElement("div", null, "Fields marked with an asterisk ", /* @__PURE__ */ React5.createElement(RequiredAsterisk, null), " are required.");
var Label = (_a) => {
var _b = _a, { helpId, id, required, children } = _b, attributes = __objRest(_b, ["helpId", "id", "required", "children"]);
const labelId = id || uuid2();
const Wrapper = ({ children: children2 }) => {
if (helpId && (attributes.className || attributes.style)) {
return /* @__PURE__ */ React5.createElement("div", {
className: attributes.className,
style: attributes.style
}, children2);
}
return /* @__PURE__ */ React5.createElement(React5.Fragment, null, children2);
};
return /* @__PURE__ */ React5.createElement(Wrapper, null, /* @__PURE__ */ React5.createElement(RSLabel, __spreadValues({
id: labelId,
"data-testid": "label"
}, attributes), required ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(RequiredAsterisk, null), " ") : null, children), helpId ? /* @__PURE__ */ React5.createElement(FieldHelpIcon, {
labelId,
id: helpId
}) : null);
};
Label.propTypes = {
id: PropTypes5.string,
helpId: PropTypes5.string,
required: PropTypes5.bool,
children: PropTypes5.oneOfType([PropTypes5.func, PropTypes5.node])
};
var Label_default = Label;
// src/Field.js
var colSizes = ["xs", "sm", "md", "lg", "xl"];
var Field = (_a) => {
var _b = _a, {
helpMessage,
helpId,
required,
label,
labelHidden,
inputClass,
labelClass,
name: id,
size,
disabled,
readOnly,
grid,
labelAttrs,
groupAttrs,
prepend,
append,
children
} = _b, attributes = __objRest(_b, [
"helpMessage",
"helpId",
"required",
"label",
"labelHidden",
"inputClass",
"labelClass",
"name",
"size",
"disabled",
"readOnly",
"grid",
"labelAttrs",
"groupAttrs",
"prepend",
"append",
"children"
]);
let row = false;
const inputId = attributes.id || uuid3();
const col = {};
const labelCol = {};
if (grid) {
for (const colSize of colSizes) {
if (grid[colSize]) {
row = true;
const sizeNum = Number.parseInt(grid[colSize], 10);
col[colSize] = sizeNum;
labelCol[colSize] = 12 - sizeNum;
}
}
}
let input = /* @__PURE__ */ React6.createElement(Input_default, __spreadValues({
name: id,
id: inputId,
className: inputClass,
size,
required,
disabled,
readOnly,
feedback: true,
help: !!helpMessage
}, attributes));
if (prepend || append) {
input = /* @__PURE__ */ React6.createElement(InputGroup, null, prepend && /* @__PURE__ */ React6.createElement(InputGroupAddon, {
addonType: "prepend"
}, typeof prepend === "string" ? /* @__PURE__ */ React6.createElement(InputGroupText, null, prepend) : prepend), input, append && /* @__PURE__ */ React6.createElement(InputGroupAddon, {
addonType: "append"
}, typeof append === "string" ? /* @__PURE__ */ React6.createElement(InputGroupText, null, append) : append), /* @__PURE__ */ React6.createElement(Feedback_default, {
name: id
}));
}
const help = helpMessage ? /* @__PURE__ */ React6.createElement(FormText, {
id: `${id}-helpmessage`.toLowerCase()
}, helpMessage) : null;
const feedback = /* @__PURE__ */ React6.createElement(Feedback_default, {
name: id
});
let inputRow = row ? /* @__PURE__ */ React6.createElement(Col, __spreadValues({}, col), input, !prepend && !append && /* @__PURE__ */ React6.createElement(Feedback_default, {
name: id
}), help) : input;
if (children && typeof children === "function") {
inputRow = children({ input: inputRow, feedback });
}
const check = attributes.type === "checkbox";
return /* @__PURE__ */ React6.createElement(FormGroup_default, __spreadValues({
for: id,
check,
disabled,
row
}, groupAttrs), check && inputRow, label && /* @__PURE__ */ React6.createElement(Label_default, __spreadValues(__spreadValues({
id: `${inputId}-label`,
for: inputId,
className: labelClass,
hidden: labelHidden,
size,
required: !!required,
helpId,
disabled
}, labelCol), labelAttrs), label), !check && inputRow, !row && !prepend && !append && feedback, !row && help);
};
Field.propTypes = {
name: PropTypes6.string.isRequired,
append: PropTypes6.node,
children: PropTypes6.func,
disabled: PropTypes6.bool,
grid: PropTypes6.object,
groupAttrs: PropTypes6.object,
helpId: PropTypes6.string,
helpMessage: PropTypes6.node,
inputClass: PropTypes6.string,
label: PropTypes6.node,
labelAttrs: PropTypes6.object,
labelClass: PropTypes6.string,
labelHidden: PropTypes6.bool,
prepend: PropTypes6.node,
readOnly: PropTypes6.bool,
required: PropTypes6.bool,
size: PropTypes6.string,
tag: PropTypes6.oneOfType([PropTypes6.func, PropTypes6.string])
};
Field.defaultProps = {
tag: RsInput2
};
var Field_default = Field;
// src/CheckboxGroup.js
import React7, { createContext, useContext } from "react";
import PropTypes7 from "prop-types";
import classNames3 from "classnames";
import { useField as useField3, useFormikContext as useFormikContext2 } from "formik";
var CheckboxGroupContext = createContext();
var useCheckboxGroup = (name) => {
const { setFieldValue } = useFormikContext2();
const _a = useContext(CheckboxGroupContext), { name: groupName, groupOnChange, value = [] } = _a, rest = __objRest(_a, ["name", "groupOnChange", "value"]);
const toggle = () => {
const valueArray = [...value];
const indexOfVal = valueArray.indexOf(name);
if (indexOfVal === -1) {
valueArray.push(name);
} else {
valueArray.splice(indexOfVal, 1);
}
setFieldValue(groupName, valueArray);
if (groupOnChange) {
groupOnChange(valueArray);
}
};
return __spreadValues({ toggle, value: value.indexOf(name) > -1 }, rest);
};
var CheckboxGroup = (_a) => {
var _b = _a, {
name,
children,
onChange: groupOnChange,
groupClassName,
label,
labelClassName,
required,
helpId
} = _b, rest = __objRest(_b, [
"name",
"children",
"onChange",
"groupClassName",
"label",
"labelClassName",
"required",
"helpId"
]);
const [field, metadata] = useField3(name);
const classes = classNames3(groupClassName, "form-control border-0 p-0 h-auto", metadata.touched ? "is-touched" : "is-untouched", metadata.touched && metadata.error && "is-invalid");
let tag = "div";
let legend = null;
if (label) {
tag = "fieldset";
const legendId = `${name}-legend`.toLowerCase();
const srRequiredAsterisk = required ? "* " : null;
const styles = { cursor: "default", lineHeight: "inherit", color: "#000" };
const labelClasses = classNames3("form-inline", labelClassName, !labelClassName && "h4 font-weight-normal");
legend = /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("legend", {
id: legendId,
className: "sr-only"
}, srRequiredAsterisk, label), /* @__PURE__ */ React7.createElement("div", {
className: labelClasses,
style: styles
}, /* @__PURE__ */ React7.createElement(Label_default, {
tag: "div",
"aria-hidden": true,
helpId,
required
}, label)));
}
return /* @__PURE__ */ React7.createElement(CheckboxGroupContext.Provider, {
value: __spreadProps(__spreadValues({}, field), { groupOnChange, metadata })
}, /* @__PURE__ */ React7.createElement(FormGroup_default, __spreadValues({
tag,
for: name
}, rest), legend, /* @__PURE__ */ React7.createElement("div", {
className: classes,
"data-testid": `check-items-${name}`
}, children), /* @__PURE__ */ React7.createElement(Feedback_default, {
name
})));
};
CheckboxGroup.propTypes = {
children: PropTypes7.node,
groupClassName: PropTypes7.string,
helpId: PropTypes7.string,
label: PropTypes7.node,
name: PropTypes7.string.isRequired,
onChange: PropTypes7.func,
labelClassName: PropTypes7.string,
required: PropTypes7.bool
};
var CheckboxGroup_default = CheckboxGroup;
// src/Checkbox.js
import React8, { useState as useState2 } from "react";
import PropTypes8 from "prop-types";
import { Input as Input2 } from "reactstrap";
import { v4 as uuid4 } from "uuid";
import classNames4 from "classnames";
var Checkbox = (_a) => {
var _b = _a, {
className,
groupClassName,
groupName,
helpId,
id,
inline,
label,
value: checkValue
} = _b, attributes = __objRest(_b, [
"className",
"groupClassName",
"groupName",
"helpId",
"id",
"inline",
"label",
"value"
]);
const { value, toggle, metadata } = useCheckboxGroup(checkValue);
const [inputId] = useState2(id || uuid4());
const classes = classNames4(className, metadata.touched ? "is-touched" : "is-untouched", metadata.touched && metadata.error && "is-invalid");
const errorIndicated = !!metadata.touched && !!metadata.error;
const groupFeedbackId = errorIndicated && groupName ? `${groupName}-feedback`.toLowerCase() : "";
const labelId = `${inputId}-label`.toLowerCase();
return /* @__PURE__ */ React8.createElement(FormGroup_default, {
for: inputId,
className: groupClassName,
check: true,
inline,
disabled: attributes.disabled
}, /* @__PURE__ */ React8.createElement(Input2, __spreadProps(__spreadValues({
id: inputId,
name: inputId,
className: classes,
type: "checkbox",
invalid: errorIndicated,
"aria-describedby": groupFeedbackId
}, attributes), {
value: checkValue,
checked: value,
onChange: toggle
})), /* @__PURE__ */ React8.createElement(Label_default, {
check: true,
id: labelId,
for: inputId,
helpId
}, label));
};
Checkbox.propTypes = {
className: PropTypes8.string,
disabled: PropTypes8.bool,
groupClassName: PropTypes8.string,
groupName: PropTypes8.string,
helpId: PropTypes8.string,
id: PropTypes8.string,
inline: PropTypes8.bool,
label: PropTypes8.string,
value: PropTypes8.oneOfType([PropTypes8.string, PropTypes8.bool, PropTypes8.object])
};
Checkbox.defaultProps = {
inline: true
};
var Checkbox_default = Checkbox;
// src/RadioGroup.js
import React9, { createContext as createContext2, useContext as useContext2 } from "react";
import PropTypes9 from "prop-types";
import classNames5 from "classnames";
import { useField as useField4, useFormikContext as useFormikContext3 } from "formik";
var RadioGroupContext = createContext2();
var useRadioGroup = (radioValue) => {
const { setFieldValue } = useFormikContext3();
const _a = useContext2(RadioGroupContext), { name: groupName, value = "", groupOnChange } = _a, rest = __objRest(_a, ["name", "value", "groupOnChange"]);
const setValue = () => {
setFieldValue(groupName, radioValue);
if (groupOnChange) {
groupOnChange(radioValue);
}
};
return __spreadValues({ groupName, setValue, value: value === radioValue }, rest);
};
var RadioGroup = (_a) => {
var _b = _a, {
name,
children,
label,
onChange: groupOnChange,
groupClassName,
inline = false,
helpId,
labelClassName,
required
} = _b, rest = __objRest(_b, [
"name",
"children",
"label",
"onChange",
"groupClassName",
"inline",
"helpId",
"labelClassName",
"required"
]);
const [field, metadata] = useField4(name);
const classes = classNames5(groupClassName, "form-control border-0 p-0 h-auto", metadata.touched ? "is-touched" : "is-untouched", metadata.touched && metadata.error && "is-invalid");
let tag = "div";
let legend = null;
if (label) {
tag = "fieldset";
const legendId = `${name}-legend`.toLowerCase();
const styles = { cursor: "default", lineHeight: "inherit", color: "#000" };
const labelClasses = classNames5("form-inline", labelClassName, !labelClassName && "h4 font-weight-normal");
legend = /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("legend", {
id: legendId,
className: "sr-only"
}, required ? "* " : null, label), /* @__PURE__ */ React9.createElement("div", {
className: labelClasses,
style: styles
}, /* @__PURE__ */ React9.createElement(Label_default, {
tag: "div",
"aria-hidden": true,
helpId,
required
}, label)));
}
return /* @__PURE__ */ React9.createElement(RadioGroupContext.Provider, {
value: __spreadProps(__spreadValues({}, field), { groupOnChange, metadata, inline })
}, /* @__PURE__ */ React9.createElement(FormGroup_default, __spreadValues({
tag,
for: name
}, rest), legend, /* @__PURE__ */ React9.createElement("div", {
className: classes,
"data-testid": `radio-items-${name}`
}, children), /* @__PURE__ */ React9.createElement(Feedback_default, {
name
})));
};
RadioGroup.propTypes = {
children: PropTypes9.node,
groupClassName: PropTypes9.string,
helpId: PropTypes9.string,
inline: PropTypes9.bool,
label: PropTypes9.node,
name: PropTypes9.string,
onChange: PropTypes9.func,
labelClassName: PropTypes9.string,
required: PropTypes9.bool
};
var RadioGroup_default = RadioGroup;
// src/Radio.js
import React10, { useState as useState3 } from "react";
import PropTypes10 from "prop-types";
import { Input as Input3 } from "reactstrap";
import { v4 as uuid5 } from "uuid";
import classNames6 from "classnames";
var Radio = (_a) => {
var _b = _a, { label, id, name, value: checkValue, className, groupClassName, children, helpId } = _b, attributes = __objRest(_b, ["label", "id", "name", "value", "className", "groupClassName", "children", "helpId"]);
const { value, setValue, metadata, inline } = useRadioGroup(checkValue);
const [inputId] = useState3(id || uuid5());
const classes = classNames6(className, metadata.touched ? "is-touched" : "is-untouched", metadata.touched && metadata.error && "is-invalid");
const errorIndicated = !!metadata.touched && !!metadata.error;
const feedbackId = errorIndicated && name ? `${name}-feedback`.toLowerCase() : "";
const labelId = `${inputId}-label`.toLowerCase();
return /* @__PURE__ */ React10.createElement(FormGroup_default, {
for: inputId,
check: true,
className: groupClassName,
inline,
disabled: attributes.disabled
}, /* @__PURE__ */ React10.createElement(Input3, __spreadProps(__spreadValues({
id: inputId,
name: name || inputId,
className: classes,
type: "radio",
invalid: errorIndicated,
"aria-describedby": feedbackId
}, attributes), {
value: checkValue,
checked: value,
onChange: setValue
})), /* @__PURE__ */ React10.createElement(Label_default, {
check: true,
id: labelId,
for: inputId,
helpId
}, label || children));
};
Radio.propTypes = {
children: PropTypes10.node,
className: PropTypes10.string,
disabled: PropTypes10.bool,
groupClassName: PropTypes10.string,
helpId: PropTypes10.string,
id: PropTypes10.string,
label: PropTypes10.node,
name: PropTypes10.string,
value: PropTypes10.oneOfType([PropTypes10.string, PropTypes10.bool, PropTypes10.object])
};
var Radio_default = Radio;
// src/CurrencyInput.tsx
import React11 from "react";
import ReactCurrencyInput from "react-currency-input-field";
import classnames from "classnames";
import { useField as useField5, useFormikContext as useFormikContext4 } from "formik";
var CurrencyInput = (_a) => {
var _b = _a, { id, name, value, placeholder, disabled, onValueChanged } = _b, attributes = __objRest(_b, ["id", "name", "value", "placeholder", "disabled", "onValueChanged"]);
const { setFieldValue, setFieldTouched } = useFormikContext4();
const [, metadata] = useField5({
name
});
const classes = classnames(metadata.touched ? "is-touched" : "is-untouched", metadata.error ? "av-invalid" : "av-valid", metadata.touched && metadata.error && "is-invalid", "form-control");
const formatDecimals = async (value2) => {
setFieldTouched(name, true);
if (value2 === "") {
setFieldValue(name, void 0);
if (onValueChanged) {
onValueChanged(void 0);
}
return;
}
const noCommasValue = value2 == null ? void 0 : value2.replace(/,/g, "");
const number = Number(noCommasValue);
const options = {
minimumFractionDigits: 2,
maximumFractionDigits: 2
};
const decimalValue = number.toLocaleString(void 0, options).replace(/,/g, "");
setFieldValue(name, decimalValue);
if (onValueChanged) {
onValueChanged(decimalValue);
}
};
return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(ReactCurrencyInput, __spreadValues({
id,
name,
className: classes,
prefix: "$",
placeholder,
disabled,
decimalsLimit: 2,
value,
"aria-invalid": !!metadata.error,
onBlur: async (event) => {
formatDecimals(event.target.value.replace("$", ""));
},
onValueChange: onValueChanged,
allowNegativeValue: false,
transformRawValue: (rawValue) => {
if (rawValue && rawValue.startsWith(".")) {
return `0${rawValue}`;
}
return rawValue;
}
}, attributes)), /* @__PURE__ */ React11.createElement(Feedback_default, {
name
}));
};
var CurrencyInput_default = CurrencyInput;
export {
Checkbox_default as Checkbox,
CheckboxGroup_default as CheckboxGroup,
CurrencyInput_default as CurrencyInput,
Feedback_default as Feedback,
Field_default as Field,
Form_default as Form,
FormGroup_default as FormGroup,
Input_default as Input,
Label_default as Label,
Radio_default as Radio,
RadioGroup_default as RadioGroup,
RequiredAsterisk,
RequiredKey
};