@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.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { FC, ReactNode, RefObject, MouseEvent as MouseEvent$1, ReactElement, ChangeEventHandler, FocusEventHandler, MouseEventHandler, KeyboardEventHandler, HTMLInputTypeAttribute, Dispatch, SetStateAction, ElementType, ChangeEvent } from 'react';
|
|
1
|
+
import React, { FC, ReactNode, RefObject, MouseEvent as MouseEvent$1, ReactElement, MutableRefObject, ChangeEventHandler, FocusEventHandler, MouseEventHandler, KeyboardEventHandler, HTMLInputTypeAttribute, Dispatch, SetStateAction, ElementType, ChangeEvent } from 'react';
|
|
2
2
|
import { DeepPartialType } from 'types/DeepPartialType';
|
|
3
3
|
import { IconName } from '@fortawesome/fontawesome-svg-core';
|
|
4
4
|
import { Placement } from '@floating-ui/react';
|
|
@@ -202,6 +202,7 @@ type TInputGroupFormProps = {
|
|
|
202
202
|
isRequired?: boolean;
|
|
203
203
|
isTouched?: boolean;
|
|
204
204
|
isSolo?: boolean;
|
|
205
|
+
setRefOnLoad?: (ref: MutableRefObject<HTMLInputElement | null>) => void;
|
|
205
206
|
styles?: TInputGroupStyles;
|
|
206
207
|
} & ({
|
|
207
208
|
htmlType: 'area';
|
package/dist/index.esm.js
CHANGED
|
@@ -782,12 +782,14 @@ var styles$q = {
|
|
|
782
782
|
var InputGroupForm = function (props) {
|
|
783
783
|
var _a;
|
|
784
784
|
var _b;
|
|
785
|
-
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;
|
|
785
|
+
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;
|
|
786
786
|
var isValid = error === undefined;
|
|
787
|
-
var
|
|
787
|
+
var maskRef = useMask({
|
|
788
788
|
mask: mask === null || mask === void 0 ? void 0 : mask.mask,
|
|
789
789
|
replacement: (_a = {}, _a[(_b = mask === null || mask === void 0 ? void 0 : mask.replacementCharacter) !== null && _b !== void 0 ? _b : 'X'] = /\d|\D/, _a),
|
|
790
790
|
});
|
|
791
|
+
var defaultRef = useRef(null);
|
|
792
|
+
var ref = mask ? maskRef : defaultRef;
|
|
791
793
|
var handleGenerateStyle = function () {
|
|
792
794
|
var result = deepCopyObject(styles$p.base);
|
|
793
795
|
var keys = calculateNestedKeys(styles$p.base);
|
|
@@ -801,8 +803,12 @@ var InputGroupForm = function (props) {
|
|
|
801
803
|
var isClearable = !trailing && isValid && onClear && value !== '' && value;
|
|
802
804
|
var inputDataCy = "form-input-".concat(name);
|
|
803
805
|
var errorDataCy = "form-input-error-".concat(name);
|
|
806
|
+
useEffect(function () {
|
|
807
|
+
if (ref.current && ref.current !== null && setRefOnLoad)
|
|
808
|
+
setRefOnLoad(ref);
|
|
809
|
+
}, [ref, setRefOnLoad]);
|
|
804
810
|
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 ||
|
|
805
|
-
(htmlType !== 'area' && (jsxs("div", { className: "flex items-center", children: [jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref:
|
|
811
|
+
(htmlType !== 'area' && (jsxs("div", { className: "flex items-center", children: [jsx("input", { type: mask !== 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 && (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 }))] })] }));
|
|
806
812
|
};
|
|
807
813
|
|
|
808
814
|
var base$m = {
|
|
@@ -7210,7 +7216,6 @@ var Switch = function (props) {
|
|
|
7210
7216
|
return result;
|
|
7211
7217
|
};
|
|
7212
7218
|
var styles = handleGenerateStyle();
|
|
7213
|
-
console.log(styles);
|
|
7214
7219
|
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 }))] })] }));
|
|
7215
7220
|
};
|
|
7216
7221
|
|