@ballistix.digital/react-components 4.3.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.d.ts +2 -1
- package/dist/index.esm.js +9 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +9 -4
- package/dist/index.js.map +1 -1
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -784,12 +784,14 @@ var styles$q = {
|
|
|
784
784
|
var InputGroupForm = function (props) {
|
|
785
785
|
var _a;
|
|
786
786
|
var _b;
|
|
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, stylesOverrides = props.styles;
|
|
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);
|
|
@@ -803,8 +805,12 @@ var InputGroupForm = function (props) {
|
|
|
803
805
|
var isClearable = !trailing && isValid && onClear && value !== '' && value;
|
|
804
806
|
var inputDataCy = "form-input-".concat(name);
|
|
805
807
|
var errorDataCy = "form-input-error-".concat(name);
|
|
808
|
+
React.useEffect(function () {
|
|
809
|
+
if (ref.current && ref.current !== null && setRefOnLoad)
|
|
810
|
+
setRefOnLoad(ref);
|
|
811
|
+
}, [ref, setRefOnLoad]);
|
|
806
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 ||
|
|
807
|
-
(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 }))] })] }));
|
|
808
814
|
};
|
|
809
815
|
|
|
810
816
|
var base$m = {
|
|
@@ -7212,7 +7218,6 @@ var Switch = function (props) {
|
|
|
7212
7218
|
return result;
|
|
7213
7219
|
};
|
|
7214
7220
|
var styles = handleGenerateStyle();
|
|
7215
|
-
console.log(styles);
|
|
7216
7221
|
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.jsx("div", { className: styles.container, "data-cy": inputDataCy, children: jsxRuntime.jsxs(react$1.Switch, { checked: value, disabled: isDisabled, onChange: onChange, className: toClassName(styles.switch.base, value ? styles.switch.checked : styles.switch.unchecked, isDisabled && styles.switch.disabled), children: [jsxRuntime.jsxs("span", { className: styles.switch.screenreader, children: ["Switch setting for ", name] }), jsxRuntime.jsx("span", { className: toClassName(styles.toggle.base, value ? styles.toggle.checked : styles.toggle.unchecked), children: iconAccessorChecked && iconAccessorUnchecked && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: toClassName(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base), "aria-hidden": "true", children: jsxRuntime.jsx(IconElement, { accessor: iconAccessorUnchecked, className: styles.icon.icon }) }), jsxRuntime.jsx("span", { className: toClassName(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base), "aria-hidden": "true", children: jsxRuntime.jsx(IconElement, { accessor: iconAccessorChecked, className: styles.icon.icon }) })] })) })] }) }), 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 }))] })] }));
|
|
7217
7222
|
};
|
|
7218
7223
|
|