@ballistix.digital/react-components 8.0.0 → 8.1.0

package/dist/index.js

@@ -1435,7 +1435,7 @@ var $3369f7d596d23d58$export$2e2bcd8739ae039 = $3369f7d596d23d58$var$styles;
 
 
 var $dfbd7d015eae4218$var$InputFooter = function(props) {
-    var name = props.name, hint = props.hint, error = props.error, isTouched = props.isTouched, stylesOverrides = props.styles, _a = props.type, type = _a === void 0 ? 'normal' : _a;
+    var name = props.name, hint = props.hint, error = props.error, isTouched = props.isTouched, _a = props.isHidden, isHidden = _a === void 0 ? false : _a, stylesOverrides = props.styles, _b = props.type, type = _b === void 0 ? 'normal' : _b;
     var errorDataCy = "form-input-error-".concat(name);
     var handleGenerateStyle = function() {
         var result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $3369f7d596d23d58$export$2e2bcd8739ae039).base);
@@ -1459,7 +1459,7 @@ var $dfbd7d015eae4218$var$InputFooter = function(props) {
         isTouched
     ]);
     var errorElement = (0, $iA2ta$react.useMemo)(function() {
-        if (!error) return null;
+        if (!error || !isTouched) return null;
         return (0, $iA2ta$reactjsxruntime.jsx)("p", {
             className: styles.error,
             "data-cy": errorDataCy,
@@ -1468,8 +1468,10 @@ var $dfbd7d015eae4218$var$InputFooter = function(props) {
     }, [
         error,
         styles.error,
-        errorDataCy
+        errorDataCy,
+        isTouched
     ]);
+    if (isHidden && (0, $iA2ta$lodash.isNil)(errorElement) && (0, $iA2ta$lodash.isNil)(hintElement)) return null;
     return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
         className: styles.foot,
         children: [
@@ -1497,7 +1499,7 @@ var $65bb4d593718fcda$var$base = {
         label: '',
         required: '',
         optional: 'ml-auto text-xs text-gray-500',
-        description: 'text-xs'
+        description: 'text-xs font-light'
     }
 };
 var $65bb4d593718fcda$var$normal = {
@@ -1573,7 +1575,7 @@ var $9314e0aa7f1e874e$var$InputHeader = function(props) {
         styles.header.optional
     ]);
     var labelElement = (0, $iA2ta$react.useMemo)(function() {
-        if (!label && (0, $iA2ta$lodash.isNull)(requiredLabel)) return null;
+        if (!label && (0, $iA2ta$lodash.isNil)(requiredLabel)) return null;
         return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
             className: styles.header.labelWrapper,
             children: [
@@ -1602,7 +1604,7 @@ var $9314e0aa7f1e874e$var$InputHeader = function(props) {
         description,
         styles.header.description
     ]);
-    if ((0, $iA2ta$lodash.isNull)(labelElement) && (0, $iA2ta$lodash.isNull)(descriptionElement)) return null;
+    if ((0, $iA2ta$lodash.isNil)(labelElement) && (0, $iA2ta$lodash.isNil)(descriptionElement)) return null;
     return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
         className: styles.header.container,
         children: [
@@ -5598,63 +5600,33 @@ var $dbcba7ef8eeead3b$export$8649d02bd537ff66 = function(dates) {
 https://github.com/onesine/react-tailwindcss-datepicker
 */ var $0255f3e4133715cf$var$base = {
     container: '',
-    head: 'flex justify-between',
-    body: 'relative rounded-md',
-    foot: '',
-    label: 'block font-medium text-gray-900',
-    hint: 'text-xs text-gray-500',
-    leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
     inputWrapper: '',
-    input: 'w-full inline-flex',
-    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'
+    input: 'w-full inline-flex'
 };
 var $0255f3e4133715cf$var$leading = {
     input: 'pl-10'
 };
 var $0255f3e4133715cf$var$trailing = {};
 var $0255f3e4133715cf$var$normal = {
-    label: 'leading-6 text-sm mb-2',
-    hint: 'leading-6',
-    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: 'pr-3',
-    description: 'mt-2 text-sm'
+    input: 'rounded-md border-gray-200 shadow-xs focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300'
 };
 var $0255f3e4133715cf$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',
-    label: 'text-xs',
-    hint: 'text-xs',
-    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 $0255f3e4133715cf$var$overlapping = {
     container: 'relative',
-    head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
-    label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
-    hint: 'text-xs mr-4 bg-white px-1',
-    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 $0255f3e4133715cf$var$pill = {
-    head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
-    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'
+    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'
 };
 var $0255f3e4133715cf$var$floored = {
-    body: 'relative mt-2',
-    label: 'block text-sm font-medium leading-6 text-gray-900',
-    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 $0255f3e4133715cf$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 pr-10',
-    description: 'text-sm text-red-600'
+    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 pr-10'
 };
 var $0255f3e4133715cf$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 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200'
@@ -5683,21 +5655,22 @@ var $0255f3e4133715cf$export$2e2bcd8739ae039 = $0255f3e4133715cf$var$styles;
 
 
 
+
+
 var $7d3977a96c400c32$var$DateRangeMenu = 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) {
+    var _a = props.name, name = _a === void 0 ? 'date-menu-form' : _a, _b = props.size, size = _b === void 0 ? 'compact' : _b, label = props.label, _c = props.i18n, i18n = _c === void 0 ? 'en' : _c, description = props.description, hint = props.hint, placeholder = props.placeholder, separator = props.separator, startFrom = props.startFrom, _d = props.displayFormat, displayFormat = _d === void 0 ? 'DD.MM.YYYY' : _d, _e = props.direction, direction = _e === void 0 ? 'down' : _e, minDate = props.minDate, maxDate = props.maxDate, _f = props.startWeekOn, startWeekOn = _f === void 0 ? 'mon' : _f, _g = props.icon, icon = _g === void 0 ? function(isEmpty) {
         return isEmpty ? (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
             accessor: "calendar"
         }) : (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
             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 ? true : _o, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, onClick = props.onClick, stylesOverrides = props.styles;
+    } : _g, required = props.required, defaultValue = props.value, error = props.error, _h = props.type, type = _h === void 0 ? 'normal' : _h, _j = props.isRequired, isRequired = _j === void 0 ? false : _j, _k = props.isTouched, isTouched = _k === void 0 ? false : _k, isDisabled = props.isDisabled, _l = props.isSolo, isSolo = _l === void 0 ? false : _l, _m = props.isRanged, isRanged = _m === void 0 ? true : _m, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, onClick = props.onClick, stylesOverrides = props.styles;
     var isValid = error === undefined;
-    var _p = (0, $iA2ta$react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {
+    var _o = (0, $iA2ta$react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {
         startDate: null,
         endDate: null
-    }), state = _p[0], setState = _p[1];
+    }), state = _o[0], setState = _o[1];
     var $datepickerInputRef = (0, $iA2ta$react.useRef)(null);
     var handleValueChange = (0, $iA2ta$react.useCallback)(function(newValue) {
         setState(newValue);
@@ -5714,15 +5687,14 @@ var $7d3977a96c400c32$var$DateRangeMenu = function(props) {
     ]);
     var handleGenerateStyle = function() {
         var result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $0255f3e4133715cf$export$2e2bcd8739ae039).base);
-        var keys = (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $0255f3e4133715cf$export$2e2bcd8739ae039).base);
+        var keys = (0, $iA2ta$lodash.concat)((0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $0255f3e4133715cf$export$2e2bcd8739ae039).base), (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $3369f7d596d23d58$export$2e2bcd8739ae039).base), (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $65bb4d593718fcda$export$2e2bcd8739ae039).base));
         keys.forEach(function(key) {
             (0, $iA2ta$lodash.set)(result, key, (0, $622cd2936b18c771$export$4370d69198e9314a)((0, $iA2ta$lodash.get)((0, $0255f3e4133715cf$export$2e2bcd8739ae039).base, key), type && (0, $iA2ta$lodash.get)((0, $0255f3e4133715cf$export$2e2bcd8739ae039)[type], key), isTouched === true && !isValid && (0, $iA2ta$lodash.get)((0, $0255f3e4133715cf$export$2e2bcd8739ae039).invalid, key), isDisabled && (0, $iA2ta$lodash.get)((0, $0255f3e4133715cf$export$2e2bcd8739ae039).disabled, key), (0, $iA2ta$lodash.get)(stylesOverrides, key)));
         });
         return result;
     };
     var styles = handleGenerateStyle();
-    var inputDataCy = "form-date-".concat(name);
-    var errorDataCy = "form-date-error-".concat(name);
+    var inputDataCy = "form-input-".concat(name);
     // listen to value changes.
     (0, $iA2ta$react.useEffect)(function() {
         setState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {
@@ -5768,22 +5740,14 @@ var $7d3977a96c400c32$var$DateRangeMenu = function(props) {
     return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
         className: styles.container,
         children: [
-            (0, $iA2ta$reactjsxruntime.jsxs)("div", {
-                className: styles.head,
-                children: [
-                    label && (0, $iA2ta$reactjsxruntime.jsx)("label", {
-                        htmlFor: name,
-                        className: styles.label,
-                        children: label
-                    }),
-                    !required && !isRequired && typeof label === 'string' && (0, $iA2ta$reactjsxruntime.jsx)("span", {
-                        className: styles.hint,
-                        children: "Optional"
-                    }),
-                    required && required({
-                        isRequired: isRequired
-                    })
-                ]
+            (0, $iA2ta$reactjsxruntime.jsx)((0, $9314e0aa7f1e874e$export$2e2bcd8739ae039), {
+                name: name,
+                type: type,
+                label: label,
+                description: description,
+                required: required,
+                isRequired: isRequired,
+                styles: styles
             }),
             (0, $iA2ta$reactjsxruntime.jsxs)("div", {
                 className: styles.inputWrapper,
@@ -5814,19 +5778,13 @@ var $7d3977a96c400c32$var$DateRangeMenu = function(props) {
                         inputClassName: styles.input,
                         startWeekOn: startWeekOn
                     }),
-                    !isSolo && (0, $iA2ta$reactjsxruntime.jsxs)("div", {
-                        className: styles.foot,
-                        children: [
-                            description && !(error && isTouched) && (0, $iA2ta$reactjsxruntime.jsx)("p", {
-                                className: styles.description,
-                                children: description
-                            }),
-                            error && isTouched && (0, $iA2ta$reactjsxruntime.jsx)("p", {
-                                className: styles.error,
-                                "data-cy": errorDataCy,
-                                children: typeof error === 'string' ? error : (_a = error === null || error === void 0 ? void 0 : error.startDate) !== null && _a !== void 0 ? _a : error === null || error === void 0 ? void 0 : error.endDate
-                            })
-                        ]
+                    (0, $iA2ta$reactjsxruntime.jsx)((0, $dfbd7d015eae4218$export$2e2bcd8739ae039), {
+                        isHidden: isSolo,
+                        name: name,
+                        error: error,
+                        isTouched: isTouched,
+                        hint: hint,
+                        styles: styles
                     })
                 ]
             })
@@ -6261,7 +6219,7 @@ var $341e1fbf5ffaef7b$export$2e2bcd8739ae039 = $341e1fbf5ffaef7b$var$Switch;
 var $8d406a8542925512$var$base = {
     container: '',
     head: 'flex justify-between',
-    body: 'relative rounded-md py-2',
+    body: 'relative rounded-md my-2 cursor-pointer',
     foot: '',
     label: 'block font-medium text-gray-900',
     hint: 'text-xs text-gray-500',