@ballistix.digital/react-components 4.3.0 → 4.4.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, RefObject, MouseEvent as MouseEvent$1, ReactElement, ChangeEventHandler, FocusEventHandler, MouseEventHandler, KeyboardEventHandler, HTMLInputTypeAttribute, Dispatch, SetStateAction, ElementType, ChangeEvent } from 'react';
+import React, { FC, ReactNode, RefObject, MouseEvent as MouseEvent$1, ReactElement, MutableRefObject, ChangeEventHandler, FocusEventHandler, MouseEventHandler, KeyboardEventHandler, HTMLInputTypeAttribute, Dispatch, SetStateAction, ElementType, ChangeEvent } from 'react';
 import { DeepPartialType } from 'types/DeepPartialType';
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { Placement } from '@floating-ui/react';
@@ -202,6 +202,7 @@ type TInputGroupFormProps = {
     isRequired?: boolean;
     isTouched?: boolean;
     isSolo?: boolean;
+    setRefOnLoad?: (ref: MutableRefObject<HTMLInputElement | null>) => void;
     styles?: TInputGroupStyles;
 } & ({
     htmlType: 'area';

package/dist/index.esm.js

@@ -782,7 +782,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 = 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 = 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 = useMask({
         mask: mask === null || mask === void 0 ? void 0 : mask.mask,
@@ -801,6 +801,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);
+    useEffect(function () {
+        if (ref.current && ref.current !== null && setRefOnLoad)
+            setRefOnLoad(ref);
+    }, [ref, setRefOnLoad]);
     return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxs("div", { className: styles.body, children: [leading && jsx("div", { className: styles.leading, children: leading }), !htmlType ||
                         (htmlType !== 'area' && (jsxs("div", { className: "flex items-center", children: [jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref: mask && 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 && (jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && isClearable && (jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), htmlType === 'area' && (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' && (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 && (jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
 };
@@ -7210,7 +7214,6 @@ var Switch = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    console.log(styles);
     return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsx("div", { className: styles.container, "data-cy": inputDataCy, children: jsxs(Switch$1, { checked: value, disabled: isDisabled, onChange: onChange, className: toClassName(styles.switch.base, value ? styles.switch.checked : styles.switch.unchecked, isDisabled && styles.switch.disabled), children: [jsxs("span", { className: styles.switch.screenreader, children: ["Switch setting for ", name] }), jsx("span", { className: toClassName(styles.toggle.base, value ? styles.toggle.checked : styles.toggle.unchecked), children: iconAccessorChecked && iconAccessorUnchecked && (jsxs(Fragment, { children: [jsx("span", { className: toClassName(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorUnchecked, className: styles.icon.icon }) }), jsx("span", { className: toClassName(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorChecked, className: styles.icon.icon }) })] })) })] }) }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
 };