@ballistix.digital/react-components 4.4.0 → 4.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +4 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -786,10 +786,12 @@ var InputGroupForm = function (props) {
|
|
|
786
786
|
var _b;
|
|
787
787
|
var name = props.name, _c = props.htmlType, htmlType = _c === void 0 ? 'text' : _c, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, required = props.required, value = props.value, mask$1 = props.mask, min = props.min, max = props.max, maxLength = props.maxLength, rows = props.rows, error = props.error, _d = props.type, type = _d === void 0 ? 'normal' : _d, isDisabled = props.isDisabled, _e = props.isRequired, isRequired = _e === void 0 ? false : _e, _f = props.isTouched, isTouched = _f === void 0 ? false : _f, _g = props.isSolo, isSolo = _g === void 0 ? false : _g, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, onClick = props.onClick, onKeyDown = props.onKeyDown, setRefOnLoad = props.setRefOnLoad, stylesOverrides = props.styles;
|
|
788
788
|
var isValid = error === undefined;
|
|
789
|
-
var
|
|
789
|
+
var maskRef = mask.useMask({
|
|
790
790
|
mask: mask$1 === null || mask$1 === void 0 ? void 0 : mask$1.mask,
|
|
791
791
|
replacement: (_a = {}, _a[(_b = mask$1 === null || mask$1 === void 0 ? void 0 : mask$1.replacementCharacter) !== null && _b !== void 0 ? _b : 'X'] = /\d|\D/, _a),
|
|
792
792
|
});
|
|
793
|
+
var defaultRef = React.useRef(null);
|
|
794
|
+
var ref = mask$1 ? maskRef : defaultRef;
|
|
793
795
|
var handleGenerateStyle = function () {
|
|
794
796
|
var result = deepCopyObject(styles$p.base);
|
|
795
797
|
var keys = calculateNestedKeys(styles$p.base);
|
|
@@ -808,7 +810,7 @@ var InputGroupForm = function (props) {
|
|
|
808
810
|
setRefOnLoad(ref);
|
|
809
811
|
}, [ref, setRefOnLoad]);
|
|
810
812
|
return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.body, children: [leading && jsxRuntime.jsx("div", { className: styles.leading, children: leading }), !htmlType ||
|
|
811
|
-
(htmlType !== 'area' && (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx("input", { type: mask$1 !== undefined ? 'text' : htmlType, ref:
|
|
813
|
+
(htmlType !== 'area' && (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx("input", { type: mask$1 !== undefined ? 'text' : htmlType, ref: ref, name: name, id: name, "data-cy": inputDataCy, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur, onClick: onClick, onKeyDown: onKeyDown }), htmlType === 'text' && isClearable && (jsxRuntime.jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && isClearable && (jsxRuntime.jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), htmlType === 'area' && (jsxRuntime.jsx("textarea", { rows: rows, name: name, id: name, "data-cy": inputDataCy, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur, onClick: onClick, onKeyDown: onKeyDown })), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
|
|
812
814
|
};
|
|
813
815
|
|
|
814
816
|
var base$m = {
|