@ballistix.digital/react-components 0.4.105 → 0.4.107

package/dist/index.d.ts

@@ -122,7 +122,7 @@ declare const IconElement: FC<TProps$b>;
 
 type TInputGroupFormProps = {
     name: string;
-    htmlType: HTMLInputTypeAttribute;
+    htmlType: HTMLInputTypeAttribute | 'area';
     label?: string | ReactNode;
     description?: string;
     placeholder?: string;
@@ -140,6 +140,7 @@ type TInputGroupFormProps = {
     min?: number;
     max?: number;
     maxLength?: number;
+    rows?: number;
     type: 'normal' | 'inset' | 'overlapping' | 'pill' | 'floored';
     isValid?: boolean;
     isDisabled?: boolean;

package/dist/index.esm.js

@@ -3439,7 +3439,7 @@ function p(){return u||(u=1,"production"!==process.env.NODE_ENV&&function(){var
 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, 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, onBlur = props.onBlur, 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, onBlur = props.onBlur, stylesOverrides = props.styles;
     var isValid = error === undefined;
     var ref = y({
         mask: mask === null || mask === void 0 ? void 0 : mask.mask,
@@ -3455,7 +3455,8 @@ var InputGroupForm = function (props) {
     };
     var styles = handleGenerateStyle();
     var invalidIcon = (jsx(ExclamationCircleIcon, { className: "h-5 w-5 text-red-500", "aria-hidden": "true" }));
-    return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: styles.head }, { children: [label && (jsx("label", __assign({ htmlFor: name, className: styles.label }, { children: label }))), !required && !isRequired && typeof label === 'string' && (jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))), required && required({ isRequired: isRequired })] })), jsxs("div", __assign({ className: styles.body }, { children: [leading && jsx("div", __assign({ className: styles.leading }, { children: leading })), jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref: mask && ref, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), 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", __assign({ className: styles.trailing }, { children: trailing }))), isTouched && !isValid && (jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon })))] })), jsxs("div", __assign({ className: styles.foot }, { children: [description && !(error && isTouched) && (jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && jsx("p", __assign({ className: styles.error }, { children: error }))] }))] })));
+    return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: styles.head }, { children: [label && (jsx("label", __assign({ htmlFor: name, className: styles.label }, { children: label }))), !required && !isRequired && typeof label === 'string' && (jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))), required && required({ isRequired: isRequired })] })), jsxs("div", __assign({ className: styles.body }, { children: [leading && jsx("div", __assign({ className: styles.leading }, { children: leading })), !htmlType ||
+                        (htmlType !== 'area' && (jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref: mask && ref, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }))), htmlType === 'area' && (jsx("textarea", { rows: rows, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur })), 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", __assign({ className: styles.trailing }, { children: trailing }))), isTouched && !isValid && (jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon })))] })), jsxs("div", __assign({ className: styles.foot }, { children: [description && !(error && isTouched) && (jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && jsx("p", __assign({ className: styles.error }, { children: error }))] }))] })));
 };
 
 var base$f = {
@@ -4302,7 +4303,7 @@ var TableList2 = function (props) {
                                                                     ((_c = (_b = table === null || table === void 0 ? void 0 : table.getState()) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) - 1 &&
                                                                 'border-b border-gray-200') }, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
                                                     }) }), row.id));
-                                            }) })))] })), isLoading && (jsx("div", __assign({ className: "flex flex-col gap-y-2 w-full pt-5" }, { children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx("div", { className: "w-20 h-14 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-14 rounded-md bg-gray-100 animate-pulse" })] }), index)); }) })))] })) })) })) })), jsx("div", __assign({ className: styles$a.foot }, { children: foot && foot(state) }))] })));
+                                            }) })))] })), isLoading && (jsx("div", __assign({ className: "flex flex-col gap-y-2 w-full pt-5" }, { children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }), index)); }) })))] })) })) })) })), jsx("div", __assign({ className: styles$a.foot }, { children: foot && foot(state) }))] })));
 };
 
 var styles$a = {
@@ -4612,7 +4613,7 @@ var List$1 = function (props) {
                         }) }))] })), jsx("div", __assign({ className: styles.list.body }, { children: jsx("nav", __assign({ className: styles.list.navigation }, { children: children })) }))] })));
 };
 var Item$2 = function (props) {
-    var children = props.children, _a = props.as, LinkComponent = _a === void 0 ? 'a' : _a, _b = props.type, type = _b === void 0 ? 'underline' : _b, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick, stylesOverrides = props.styles, _c = props.isLoading, isLoading = _c === void 0 ? true : _c;
+    var children = props.children, _a = props.as, LinkComponent = _a === void 0 ? 'a' : _a, _b = props.type, type = _b === void 0 ? 'underline' : _b, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick, stylesOverrides = props.styles, isLoading = props.isLoading;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$7.base);
         var keys = calculateNestedKeys(styles$7.base);
@@ -4623,7 +4624,7 @@ var Item$2 = function (props) {
     };
     var styles = handleGenerateStyle();
     if (href && LinkComponent) {
-        return (jsx(LinkComponent, __assign({ href: href, className: toClassName(styles.tab.base, isCurrent ? styles.tab.active : styles.tab.inactive), onClick: onClick }, { children: children })));
+        return (jsx(LinkComponent, __assign({ href: href, className: toClassName(styles.tab.base, isCurrent ? styles.tab.active : styles.tab.inactive, isLoading && 'opacity-30 !text-gray-300 !cursor-default', isLoading && styles.tab.inactive), onClick: onClick }, { children: children })));
     }
     return (jsx("div", __assign({ className: toClassName(styles.tab.base, isCurrent ? styles.tab.active : styles.tab.inactive, isLoading && 'opacity-30 !text-gray-300 !cursor-default', isLoading && styles.tab.inactive), onClick: !isLoading ? onClick : function () { return null; } }, { children: children })));
 };
@@ -9175,7 +9176,7 @@ var zh$1 = _mergeNamespaces({
 var DateMenuForm = function (props) {
     var _a;
     var _b = props.name, name = _b === void 0 ? 'date-menu-form' : _b, _c = props.size, size = _c === void 0 ? 'compact' : _c, label = props.label, _d = props.i18n, i18n = _d === void 0 ? 'en' : _d, description = props.description, placeholder = props.placeholder, separator = props.separator, startFrom = props.startFrom, _e = props.displayFormat, displayFormat = _e === void 0 ? 'DD.MM.YYYY' : _e, _f = props.direction, direction = _f === void 0 ? 'down' : _f, minDate = props.minDate, maxDate = props.maxDate, _g = props.startWeekOn, startWeekOn = _g === void 0 ? 'mon' : _g, _h = props.icon, icon = _h === void 0 ? function (isEmpty) {
-        return isEmpty ? (jsx(IconElement, { accessor: "calendar" })) : (jsx(IconElement, { accessor: "xmark" }));
+        return isEmpty ? (jsx(IconElement, { accessor: "calendar" })) : (jsx(IconElement, { accessor: "xmark", className: "text-black" }));
     } : _h, required = props.required, defaultValue = props.value, error = props.error, _j = props.type, type = _j === void 0 ? 'normal' : _j, _k = props.isRequired, isRequired = _k === void 0 ? false : _k, _l = props.isTouched, isTouched = _l === void 0 ? false : _l, isDisabled = props.isDisabled, _m = props.isSolo, isSolo = _m === void 0 ? false : _m, _o = props.isRanged, isRanged = _o === void 0 ? false : _o, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
     var isValid = error === undefined;
     var _p = useState(true), isFocus = _p[0], setIsFocus = _p[1];