@ballistix.digital/react-components 4.3.0 → 4.4.0

package/dist/index.js

@@ -784,7 +784,7 @@ var styles$q = {
 var InputGroupForm = function (props) {
     var _a;
     var _b;
-    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;
+    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;
     var isValid = error === undefined;
     var ref = mask.useMask({
         mask: mask$1 === null || mask$1 === void 0 ? void 0 : mask$1.mask,
@@ -803,6 +803,10 @@ var InputGroupForm = function (props) {
     var isClearable = !trailing && isValid && onClear && value !== '' && value;
     var inputDataCy = "form-input-".concat(name);
     var errorDataCy = "form-input-error-".concat(name);
+    React.useEffect(function () {
+        if (ref.current && ref.current !== null && setRefOnLoad)
+            setRefOnLoad(ref);
+    }, [ref, setRefOnLoad]);
     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 ||
                         (htmlType !== 'area' && (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx("input", { type: mask$1 !== undefined ? 'text' : htmlType, ref: mask$1 && 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 }))] })] }));
 };
@@ -7212,7 +7216,6 @@ var Switch = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    console.log(styles);
     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 }))] })] }));
 };