@ballistix.digital/react-components 1.1.0 → 2.0.0

package/dist/index.esm.js

@@ -1194,6 +1194,79 @@ var useExcel = function () {
     };
 };
 
+var SelectMenuForm = function (props) {
+    var _a;
+    var _b = props.name, name = _b === void 0 ? 'select-menu-form' : _b, label = props.label, description = props.description, placeholder = props.placeholder, options = props.options, required = props.required, value = props.value, error = props.error, _c = props.isRequired, isRequired = _c === void 0 ? false : _c, isLoading = props.isLoading, _d = props.isTouched, isTouched = _d === void 0 ? false : _d, isDisabled = props.isDisabled, _e = props.isClearable, isClearable = _e === void 0 ? true : _e, _f = props.isMultiple, isMultiple = _f === void 0 ? false : _f, _g = props.isSearchable, isSearchable = _g === void 0 ? true : _g, _h = props.isSolo, isSolo = _h === void 0 ? false : _h, onChange = props.onChange, onSearchInputChange = props.onSearchInputChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
+    var _j = useState(true), isFocus = _j[0], setIsFocus = _j[1];
+    var _k = useState(value !== null && value !== void 0 ? value : null), state = _k[0], setState = _k[1];
+    var isValid = error === undefined;
+    var selectDataCy = "form-select-".concat(name);
+    var errorDataCy = "form-select-error-".concat(name);
+    var handleGenerateStyle = function () {
+        var result = deepCopyObject(styles$i.base);
+        var keys = calculateNestedKeys(styles$i.base);
+        keys.forEach(function (key) {
+            set(result, key, toClassName(get(styles$i.base, key), get(styles$i['normal'], key), isTouched === true && !isValid && get(styles$i.invalid, key), isDisabled && get(styles$i.disabled, key), get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var handleChange = function (selectValue) {
+        setState(selectValue);
+        onChange && onChange(selectValue);
+        setIsFocus(false);
+    };
+    var styles = handleGenerateStyle();
+    // Simulate onClear event.
+    useEffect(function () {
+        if (state === null && !isFocus) {
+            onClear && onClear(name);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state]);
+    // Simulate onBlur event.
+    useEffect(function () {
+        if (!isFocus) {
+            onBlur && onBlur();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFocus]);
+    // listen to value changes.
+    useEffect(function () {
+        setState(value);
+    }, [value]);
+    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.container, children: [jsx("div", { "data-cy": selectDataCy, children: jsx(Select, { primaryColor: "primary", 
+                            //
+                            placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (jsx("p", { className: styles.emptyState, children: (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder.emptyState) !== null && _a !== void 0 ? _a : 'No results found' })), searchInputPlaceholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.searchInput, 
+                            //
+                            loading: isLoading, isDisabled: isDisabled, isClearable: isClearable, isMultiple: isMultiple, isSearchable: isSearchable, 
+                            //
+                            options: options, 
+                            //
+                            value: state, onChange: handleChange, onSearchInputChange: onSearchInputChange, 
+                            //
+                            classNames: {
+                                menuButton: function () {
+                                    return toClassName(styles.input, state === null && '[&>*]:!text-gray-300 ', state === null &&
+                                        !isValid &&
+                                        isTouched &&
+                                        '[&>*]:!text-red-300');
+                                },
+                                menu: styles.menu,
+                                tagItem: function () { return styles.tagItem; },
+                                tagItemText: styles.tagItemText,
+                                tagItemIconContainer: styles.tagItemIconContainer,
+                                tagItemIcon: styles.tagItemIcon,
+                                list: styles.list,
+                                listItem: function () { return styles.listItem; },
+                                listDisabledItem: styles.listDisabledItem,
+                                listGroupLabel: styles.listGroupLabel,
+                                searchContainer: styles.searchContainer,
+                                searchBox: styles.searchBox,
+                                searchIcon: styles.searchIcon,
+                                closeIcon: styles.closeIcon,
+                            } }) }), !isSolo && (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: JSON.stringify(error).replaceAll('"', '') }))] }))] })] }));
+};
+
 var base$f = {
     container: '',
     head: 'flex justify-between',
@@ -1285,79 +1358,6 @@ var styles$i = {
     disabled: disabled$6,
 };
 
-var SelectMenuForm = function (props) {
-    var _a;
-    var _b = props.name, name = _b === void 0 ? 'select-menu-form' : _b, label = props.label, description = props.description, placeholder = props.placeholder, options = props.options, required = props.required, value = props.value, error = props.error, _c = props.isRequired, isRequired = _c === void 0 ? false : _c, isLoading = props.isLoading, _d = props.isTouched, isTouched = _d === void 0 ? false : _d, isDisabled = props.isDisabled, _e = props.isClearable, isClearable = _e === void 0 ? true : _e, _f = props.isMultiple, isMultiple = _f === void 0 ? false : _f, _g = props.isSearchable, isSearchable = _g === void 0 ? true : _g, _h = props.isSolo, isSolo = _h === void 0 ? false : _h, onChange = props.onChange, onSearchInputChange = props.onSearchInputChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
-    var _j = useState(true), isFocus = _j[0], setIsFocus = _j[1];
-    var _k = useState(value !== null && value !== void 0 ? value : null), state = _k[0], setState = _k[1];
-    var isValid = error === undefined;
-    var selectDataCy = "form-select-".concat(name);
-    var errorDataCy = "form-select-error-".concat(name);
-    var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$i.base);
-        var keys = calculateNestedKeys(styles$i.base);
-        keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$i.base, key), get(styles$i['normal'], key), isTouched === true && !isValid && get(styles$i.invalid, key), isDisabled && get(styles$i.disabled, key), get(stylesOverrides, key)));
-        });
-        return result;
-    };
-    var handleChange = function (selectValue) {
-        setState(selectValue);
-        onChange && onChange(selectValue);
-        setIsFocus(false);
-    };
-    var styles = handleGenerateStyle();
-    // Simulate onClear event.
-    useEffect(function () {
-        if (state === null && !isFocus) {
-            onClear && onClear(name);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state]);
-    // Simulate onBlur event.
-    useEffect(function () {
-        if (!isFocus) {
-            onBlur && onBlur();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFocus]);
-    // listen to value changes.
-    useEffect(function () {
-        setState(value);
-    }, [value]);
-    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.container, children: [jsx("div", { "data-cy": selectDataCy, children: jsx(Select, { primaryColor: "primary", 
-                            //
-                            placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (jsx("p", { className: styles.emptyState, children: (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder.emptyState) !== null && _a !== void 0 ? _a : 'No results found' })), searchInputPlaceholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.searchInput, 
-                            //
-                            loading: isLoading, isDisabled: isDisabled, isClearable: isClearable, isMultiple: isMultiple, isSearchable: isSearchable, 
-                            //
-                            options: options, 
-                            //
-                            value: state, onChange: handleChange, onSearchInputChange: onSearchInputChange, 
-                            //
-                            classNames: {
-                                menuButton: function () {
-                                    return toClassName(styles.input, state === null && '[&>*]:!text-gray-300 ', state === null &&
-                                        !isValid &&
-                                        isTouched &&
-                                        '[&>*]:!text-red-300');
-                                },
-                                menu: styles.menu,
-                                tagItem: function () { return styles.tagItem; },
-                                tagItemText: styles.tagItemText,
-                                tagItemIconContainer: styles.tagItemIconContainer,
-                                tagItemIcon: styles.tagItemIcon,
-                                list: styles.list,
-                                listItem: function () { return styles.listItem; },
-                                listDisabledItem: styles.listDisabledItem,
-                                listGroupLabel: styles.listGroupLabel,
-                                searchContainer: styles.searchContainer,
-                                searchBox: styles.searchBox,
-                                searchIcon: styles.searchIcon,
-                                closeIcon: styles.closeIcon,
-                            } }) }), !isSolo && (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: JSON.stringify(error).replaceAll('"', '') }))] }))] })] }));
-};
-
 var PanelPaginationNavigation = function (props) {
     var defaultValue = props.current, _a = props.min, min = _a === void 0 ? 1 : _a, _b = props.max, max = _b === void 0 ? 20 : _b, stylesOverrides = props.styles, pageSizeOptions = props.pageSizeOptions, defaultPageSize = props.defaultPageSize, _c = props.onChangePageSize, onChangePageSize = _c === void 0 ? noop$1 : _c, children = props.children, onChange = props.onChange;
     var _d = useState(1), current = _d[0], setCurrent = _d[1];
@@ -2921,9 +2921,7 @@ var CheckboxInputForm = function (props) {
         var result = deepCopyObject(styles$4.base);
         var keys = calculateNestedKeys(styles$4.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$4.base, key), 
-            // isTouched === true && !isValid && get(defaultStyles.invalid, key),
-            isDisabled && get(styles$4.disabled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$4.base, key), isDisabled && get(styles$4.disabled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2952,7 +2950,7 @@ var CheckboxInputForm = function (props) {
             inputRef.current.indeterminate = value === null;
         }
     }, [isIndeterminable, value]);
-    return (jsxs("div", { className: styles.container, children: [jsx("div", { className: styles.head, children: jsx("input", { ref: inputRef, name: name, "data-cy": "form-".concat(name, "-checkbox"), "aria-describedby": "".concat(name, "-description"), type: "checkbox", checked: !!value, className: styles.input, disabled: isDisabled, onChange: handleToggle }) }), jsxs("div", { className: styles.body, children: [jsx("label", { htmlFor: "comments", className: styles.label, children: title }), description && (jsx("p", { id: "comments-description", className: styles.description, children: description }))] })] }));
+    return (jsxs("div", { className: styles.container, children: [jsx("div", { className: styles.head, children: jsx("input", { ref: inputRef, name: name, "data-cy": "form-".concat(name, "-checkbox"), "aria-describedby": "".concat(name, "-description"), type: "checkbox", checked: !!value, className: styles.input, disabled: isDisabled, onChange: handleToggle }) }), jsxs("div", { className: styles.body, children: [jsx("label", { htmlFor: name, className: styles.label, children: title }), description && (jsx("p", { id: "".concat(name, "-description"), className: styles.description, children: description }))] })] }));
 };
 
 var base$3 = {