@ballistix.digital/react-components 8.2.0 → 8.2.1-rc-86.0

package/dist/index.js

@@ -1471,7 +1471,7 @@ var $dfbd7d015eae4218$var$InputFooter = function(props) {
         errorDataCy,
         isTouched
     ]);
-    if (isHidden && (0, $iA2ta$lodash.isNil)(errorElement) && (0, $iA2ta$lodash.isNil)(hintElement)) return null;
+    if (isHidden || (0, $iA2ta$lodash.isNil)(errorElement) && (0, $iA2ta$lodash.isNil)(hintElement)) return null;
     return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
         className: styles.foot,
         children: [
@@ -2255,6 +2255,7 @@ https://www.npmjs.com/package/react-tailwindcss-select
 
 
 
+
 var $f32ee84b87891376$var$base = {
     container: '',
     body: 'relative rounded-md',
@@ -2276,9 +2277,7 @@ var $f32ee84b87891376$var$base = {
     searchIcon: '',
     closeIcon: '',
     emptyState: 'w-full inline-flex items-start justify-start px-4',
-    trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
-    description: 'text-gray-400 text-xs mt-1',
-    error: 'text-red-500 text-xs ml-5 mt-1'
+    trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center'
 };
 var $f32ee84b87891376$var$leading = {
     input: 'pl-10'
@@ -2287,35 +2286,29 @@ var $f32ee84b87891376$var$trailing = {};
 var $f32ee84b87891376$var$normal = {
     leading: 'pl-3',
     input: 'rounded-md border-gray-200 shadow-xs focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300',
-    trailing: '',
-    description: 'mt-2 text-sm'
+    trailing: ''
 };
 var $f32ee84b87891376$var$inset = {
     container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-xs ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
-    input: 'border-0 ring-0! p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
-    description: 'hidden'
+    input: 'border-0 ring-0! p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0'
 };
 var $f32ee84b87891376$var$overlapping = {
     container: 'relative',
-    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    description: 'hidden'
+    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6'
 };
 var $f32ee84b87891376$var$pill = {
     foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
     input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    trailing: 'pr-2',
-    description: 'text-xs'
+    trailing: 'pr-2'
 };
 var $f32ee84b87891376$var$floored = {
     body: 'relative mt-2',
-    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
-    description: 'text-xs mt-2'
+    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0'
 };
 var $f32ee84b87891376$var$invalid = {
     container: 'ring-red-500',
     input: // 'block w-full border border-transparent text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:leading-6 pr-10',
-    'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500',
-    description: 'text-sm text-red-600'
+    'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500'
 };
 var $f32ee84b87891376$var$disabled = {
     input: 'block w-full rounded-md border-0 text-gray-900 shadow-xs ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200'
@@ -2337,12 +2330,11 @@ var $f32ee84b87891376$export$2e2bcd8739ae039 = $f32ee84b87891376$var$styles;
 
 var $f3fccf014e1f10d5$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, _j = props.isOptionalLabelHidden, isOptionalLabelHidden = _j === void 0 ? false : _j, onChange = props.onChange, onSearchInputChange = props.onSearchInputChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
+    var _b = props.name, name = _b === void 0 ? 'select-menu-form' : _b, label = props.label, description = props.description, hint = props.hint, 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, _j = props.isOptionalLabelHidden, isOptionalLabelHidden = _j === void 0 ? false : _j, onChange = props.onChange, onSearchInputChange = props.onSearchInputChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
     var _k = (0, $iA2ta$react.useState)(true), isFocus = _k[0], setIsFocus = _k[1];
     var _l = (0, $iA2ta$react.useState)(value !== null && value !== void 0 ? value : null), state = _l[0], setState = _l[1];
     var isValid = error === undefined;
     var selectDataCy = "form-select-".concat(name);
-    var errorDataCy = "form-select-error-".concat(name);
     var handleGenerateStyle = function() {
         var result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $f32ee84b87891376$export$2e2bcd8739ae039).base);
         var keys = (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $f32ee84b87891376$export$2e2bcd8739ae039).base);
@@ -2377,17 +2369,11 @@ var $f3fccf014e1f10d5$var$SelectMenuForm = function(props) {
     }, [
         value
     ]);
-    var descriptionElement = (0, $iA2ta$react.useMemo)(function() {
-        if (!description || error && isTouched) return null;
-        return (0, $iA2ta$reactjsxruntime.jsx)("p", {
-            className: styles.description,
-            children: description
-        });
+    var formattedError = (0, $iA2ta$react.useMemo)(function() {
+        if (error) return JSON.stringify(error).replaceAll('"', '');
+        return null;
     }, [
-        description,
-        error,
-        isTouched,
-        styles.description
+        error
     ]);
     return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
         className: styles.container,
@@ -2398,7 +2384,8 @@ var $f3fccf014e1f10d5$var$SelectMenuForm = function(props) {
                 required: required,
                 isRequired: isRequired,
                 isOptionalLabelHidden: isOptionalLabelHidden,
-                styles: styles
+                styles: styles,
+                description: description
             }),
             (0, $iA2ta$reactjsxruntime.jsxs)("div", {
                 className: styles.container,
@@ -2451,16 +2438,13 @@ var $f3fccf014e1f10d5$var$SelectMenuForm = function(props) {
                             }
                         })
                     }),
-                    !isSolo && (0, $iA2ta$reactjsxruntime.jsxs)("div", {
-                        className: styles.foot,
-                        children: [
-                            descriptionElement,
-                            error && isTouched && (0, $iA2ta$reactjsxruntime.jsx)("p", {
-                                className: styles.error,
-                                "data-cy": errorDataCy,
-                                children: JSON.stringify(error).replaceAll('"', '')
-                            })
-                        ]
+                    (0, $iA2ta$reactjsxruntime.jsx)((0, $dfbd7d015eae4218$export$2e2bcd8739ae039), {
+                        isHidden: isSolo,
+                        name: name,
+                        error: formattedError,
+                        isTouched: isTouched,
+                        hint: hint,
+                        styles: styles
                     })
                 ]
             })