@ballistix.digital/react-components 0.3.4 → 0.4.0

package/dist/index.d.ts

@@ -126,6 +126,7 @@ declare const base$d: {
     input: string;
     trailing: string;
     description: string;
+    error: string;
 };
 type TInputGroupStyles = DeepPartial$1<typeof base$d>;
 
@@ -138,11 +139,16 @@ type TProps$b = {
     leading?: string;
     trailing?: string;
     value: string;
+    map?: string;
+    error?: string;
     type: 'normal' | 'inset' | 'overlapping' | 'pill' | 'floored';
     isValid?: boolean;
     isDisabled?: boolean;
     isRequired?: boolean;
+    isTouched?: boolean;
+    isSolo?: boolean;
     onChange: any;
+    onBlur: any;
     styles?: TInputGroupStyles;
 };
 declare const InputGroupForm: FC<TProps$b>;

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { ArrowPathIcon, ExclamationCircleIcon, CheckIcon, ChevronDownIcon, EllipsisVerticalIcon, ChevronLeftIcon, ChevronRightIcon, HomeIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
 import { set, get } from 'lodash';
 import get$1 from 'lodash/get';
-import React, { Children, Fragment, useState, useCallback, useMemo, useEffect } from 'react';
+import React, { Children, Fragment, useState, useEffect, useCallback, useMemo } from 'react';
 import { Menu, Transition, Dialog } from '@headlessui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ViewColumnsIcon, ChevronDownIcon as ChevronDownIcon$1, TableCellsIcon } from '@heroicons/react/24/outline';
@@ -502,8 +502,36 @@ var IconElement = function (props) {
     return component;
 };
 
+var useMappedValue = function (format) {
+    var _a = useState(''), mappedValue = _a[0], setMappedValue = _a[1];
+    useEffect(function () {
+        setMappedValue('');
+    }, [format]);
+    var handleMapValue = function (inputValue) {
+        var strippedValue = inputValue.replace(/\D/g, ''); // remove all non-numeric characters
+        var formattedNumber = '';
+        var valueIndex = 0;
+        for (var i = 0; i < format.length; i++) {
+            if (format[i] === 'X') {
+                if (valueIndex >= strippedValue.length) {
+                    break;
+                }
+                formattedNumber += strippedValue[valueIndex];
+                valueIndex++;
+            }
+            else {
+                formattedNumber += format[i];
+            }
+        }
+        setMappedValue(formattedNumber);
+    };
+    return [mappedValue, handleMapValue];
+};
+
 var InputGroupForm = function (props) {
-    var name = props.name, _a = props.htmlType, htmlType = _a === void 0 ? 'text' : _a, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, value = props.value, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.isValid, isValid = _c === void 0 ? true : _c, isDisabled = props.isDisabled, isRequired = props.isRequired, onChange = props.onChange, stylesOverrides = props.styles;
+    var name = props.name, _a = props.htmlType, htmlType = _a === void 0 ? 'text' : _a, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, value = props.value, map = props.map, error = props.error, _b = props.type, type = _b === void 0 ? 'normal' : _b, isDisabled = props.isDisabled, isRequired = props.isRequired, isTouched = props.isTouched, _c = props.isSolo, isSolo = _c === void 0 ? false : _c, onChange = props.onChange, onBlur = props.onBlur, stylesOverrides = props.styles;
+    var _d = useMappedValue(map !== null && map !== void 0 ? map : ''), mappedValue = _d[0], setMappedValue = _d[1];
+    var isValid = error === undefined;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$e.base);
         var keys = calculateNestedKeys(styles$e.base);
@@ -514,7 +542,19 @@ 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 }))), !isRequired && jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))] })), jsxs("div", __assign({ className: styles.body }, { children: [leading && jsx("div", __assign({ className: styles.leading }, { children: leading })), jsx("input", { type: htmlType, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: value, disabled: isDisabled, onChange: onChange }), 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 }))), !isValid && jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon }))] })), jsx("div", __assign({ className: styles.foot }, { children: description && jsx("p", __assign({ className: styles.description }, { children: description })) }))] })));
+    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 }))), !isRequired && jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))] })), jsxs("div", __assign({ className: styles.body }, { children: [leading && jsx("div", __assign({ className: styles.leading }, { children: leading })), jsx("input", { type: htmlType, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, disabled: isDisabled, onChange: function (e) {
+                            if (map) {
+                                setMappedValue(e.currentTarget.value);
+                            }
+                            onChange(e);
+                        }, onBlur: function (e) {
+                            if (map) {
+                                var result = e.currentTarget;
+                                result.value = mappedValue;
+                                onChange(result);
+                            }
+                            onBlur(e);
+                        } }), 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 }))), !isValid && jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon }))] })), jsxs("div", __assign({ className: styles.foot }, { children: [description && !error && (jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && jsx("p", __assign({ className: styles.error }, { children: error }))] }))] })));
 };
 
 var base$d = {
@@ -527,7 +567,8 @@ var base$d = {
     leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
     input: 'block w-full',
     trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
-    description: 'text-gray-500 text-xs',
+    description: 'text-gray-400 text-xs mt-1',
+    error: 'text-red-500 text-xs ml-5 mt-1',
 };
 var leading = {
     input: 'pl-10',