@ballistix.digital/react-components 0.5.4 → 0.5.6

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { ArrowPathIcon, ChevronDownIcon, EllipsisVerticalIcon, ExclamationCircleIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronUpDownIcon, HomeIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
-import { set, get, noop as noop$1, indexOf, pick, isEmpty, some, forEach, assign, map } from 'lodash';
+import { isArray, map, set, get, noop as noop$1, indexOf, pick, isEmpty, some, forEach, assign } from 'lodash';
 import get$1 from 'lodash/get';
 import React, { useState, useMemo, Children, Fragment, useEffect, useCallback, forwardRef, useImperativeHandle, useRef, useReducer, createElement, PureComponent, Component } from 'react';
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -138,11 +138,13 @@ var toClassName = function () {
     }
     return values.filter(Boolean).join(' ');
 };
-var fromSelectMenuOptionToStringValue = function (options) {
-    if (options === null || options === void 0 ? void 0 : options.length) {
-        return options === null || options === void 0 ? void 0 : options.map(function (option) { return option === null || option === void 0 ? void 0 : option.value; });
+var fromSelectMenuOptionToStringValue = function (value) {
+    if (value === null)
+        return null;
+    if (isArray(value)) {
+        return map(value, 'value');
     }
-    return options === null || options === void 0 ? void 0 : options.value;
+    return value === null || value === void 0 ? void 0 : value.value;
 };
 
 var deepCopyObject = function (object) {
@@ -713,8 +715,9 @@ var InputGroupForm = function (props) {
     };
     var styles = handleGenerateStyle();
     var invalidIcon = (jsx(ExclamationCircleIcon, { className: "h-5 w-5 text-red-500", "aria-hidden": "true" }));
+    var isClearable = !trailing && isValid && onClear && 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.body, children: [leading && jsx("div", { className: styles.leading, children: leading }), !htmlType ||
-                        (htmlType !== 'area' && (jsxs("div", { className: "flex items-center", children: [jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref: mask && ref, name: name, id: name, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), htmlType === 'text' && !trailing && isValid && onClear && (jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && !trailing && isValid && onClear && (jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), 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", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && jsx("p", { className: styles.error, children: error })] })] }));
+                        (htmlType !== 'area' && (jsxs("div", { className: "flex items-center", children: [jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref: mask && ref, name: name, id: name, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), htmlType === 'text' && isClearable && (jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && isClearable && (jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), 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", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && jsx("p", { className: styles.error, children: error })] })] }));
 };
 
 var base$k = {
@@ -1203,13 +1206,13 @@ var PanelPaginationNavigation = function (props) {
     }, [onChange]);
     var pageType = useMemo(function () {
         var result = 'center';
-        if (current < min + 3) {
+        if (current < min + 2) {
             result = 'first';
         }
-        if (current > max - 3) {
+        if (current > max - 2) {
             result = 'last';
         }
-        if (max <= 3) {
+        if (max <= 4) {
             result = 'simple';
         }
         return result;
@@ -1220,13 +1223,13 @@ var PanelPaginationNavigation = function (props) {
             component = (jsxs(Fragment$1, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); }, children: min }), jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); }, children: min + 1 }), jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); }, children: min + 2 }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
             break;
         case 'center':
-            component = (jsxs(Fragment$1, { children: [jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(min); }, children: min }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(current - 1); }, children: current - 1 }), jsx("button", { className: toClassName(styles.button.default, styles.button.active), onClick: function () { return handleChangeCurrent(current); }, children: current }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(current + 1); }, children: current + 1 }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
+            component = (jsxs(Fragment$1, { children: [jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(min); }, children: min }), current - 2 !== min && jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(current - 1); }, children: current - 1 }), jsx("button", { className: toClassName(styles.button.default, styles.button.active), onClick: function () { return handleChangeCurrent(current); }, children: current }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(current + 1); }, children: current + 1 }), current + 2 !== max && jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
             break;
         case 'last':
             component = (jsxs(Fragment$1, { children: [jsx("button", { className: styles.button.default, onClick: function () { return handleChangeCurrent(min); }, children: min }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: toClassName(styles.button.default, current === max - 2 && styles.button.active), onClick: function () { return handleChangeCurrent(max - 2); }, children: max - 2 }), jsx("button", { className: toClassName(styles.button.default, current === max - 1 && styles.button.active), onClick: function () { return handleChangeCurrent(max - 1); }, children: max - 1 }), jsx("button", { className: toClassName(styles.button.default, current === max && styles.button.active), onClick: function () { return handleChangeCurrent(max); }, children: max })] }));
             break;
         case 'simple':
-            component = (jsxs(Fragment$1, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); }, children: min }), max >= min + 1 && (jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); }, children: min + 1 })), max >= min + 2 && (jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); }, children: min + 2 }))] }));
+            component = (jsxs(Fragment$1, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); }, children: min }), max >= min + 1 && (jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); }, children: min + 1 })), max >= min + 2 && (jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); }, children: min + 2 })), max >= min + 3 && (jsx("button", { className: toClassName(styles.button.default, current === min + 3 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 3); }, children: min + 3 }))] }));
             break;
     }
     return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsx("button", { className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: "Previous" }), jsx("button", { className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: "Next" })] }), jsxs("div", { className: styles.desktop.container, children: [jsx("div", { children: jsx("div", { className: "text-sm text-gray-700", children: children && children({ min: min, max: max, current: current }) }) }), jsx("div", { children: jsxs("nav", { className: styles.desktop.navigation, "aria-label": "Pagination", children: [jsxs("button", { className: toClassName(styles.desktop.leftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: [jsx("span", { className: styles.label, children: "Previous" }), jsx(ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), component, jsxs("button", { className: toClassName(styles.desktop.rightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: [jsx("span", { className: styles.label, children: "Next" }), jsx(ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] })] }) })] })] }));
@@ -1879,12 +1882,15 @@ var PagePaginationNavigation = function (props) {
     var styles = handleGenerateStyle();
     var pageType = useMemo(function () {
         var result = 'center';
-        if (current < min + 3) {
+        if (current < min + 2) {
             result = 'first';
         }
-        if (current > max - 3) {
+        if (current > max - 2) {
             result = 'last';
         }
+        if (max <= 4) {
+            result = 'simple';
+        }
         return result;
     }, [current, min, max]);
     var component;
@@ -1893,11 +1899,14 @@ var PagePaginationNavigation = function (props) {
             component = (jsxs(Fragment$1, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return setCurrent(min); }, children: min }), jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return setCurrent(min + 1); }, children: min + 1 }), jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return setCurrent(min + 2); }, children: min + 2 }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(max); }, children: max })] }));
             break;
         case 'center':
-            component = (jsxs(Fragment$1, { children: [jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(min); }, children: min }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(current - 1); }, children: current - 1 }), jsx("button", { className: toClassName(styles.button.default, styles.button.active), onClick: function () { return setCurrent(current); }, children: current }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(current + 1); }, children: current + 1 }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(max); }, children: max })] }));
+            component = (jsxs(Fragment$1, { children: [jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(min); }, children: min }), current - 2 !== min && jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(current - 1); }, children: current - 1 }), jsx("button", { className: toClassName(styles.button.default, styles.button.active), onClick: function () { return setCurrent(current); }, children: current }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(current + 1); }, children: current + 1 }), current + 2 !== max && jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(max); }, children: max })] }));
             break;
         case 'last':
             component = (jsxs(Fragment$1, { children: [jsx("button", { className: styles.button.default, onClick: function () { return setCurrent(min); }, children: min }), jsx("span", { className: styles.divider, children: "..." }), jsx("button", { className: toClassName(styles.button.default, current === max - 2 && styles.button.active), onClick: function () { return setCurrent(max - 2); }, children: max - 2 }), jsx("button", { className: toClassName(styles.button.default, current === max - 1 && styles.button.active), onClick: function () { return setCurrent(max - 1); }, children: max - 1 }), jsx("button", { className: toClassName(styles.button.default, current === max && styles.button.active), onClick: function () { return setCurrent(max); }, children: max })] }));
             break;
+        case 'simple':
+            component = (jsxs(Fragment$1, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return setCurrent(min); }, children: min }), max >= min + 1 && (jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return setCurrent(min + 1); }, children: min + 1 })), max >= min + 2 && (jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return setCurrent(min + 2); }, children: min + 2 })), max >= min + 3 && (jsx("button", { className: toClassName(styles.button.default, current === min + 3 && styles.button.active), onClick: function () { return setCurrent(min + 3); }, children: min + 3 }))] }));
+            break;
     }
     useEffect(function () {
         if (current) {
@@ -2614,15 +2623,16 @@ var DateMenuForm = function (props) {
         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];
-    var _q = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {
+    var _p = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {
         startDate: null,
         endDate: null,
-    }), state = _q[0], setState = _q[1];
+    }), state = _p[0], setState = _p[1];
     var handleValueChange = function (newValue) {
         setState(newValue);
         onChange && onChange(newValue);
-        setIsFocus(false);
+        setTimeout(function () {
+            onBlur && onBlur();
+        }, 50);
     };
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$5.base);
@@ -2640,13 +2650,6 @@ var DateMenuForm = function (props) {
         }
         // 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]);
     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(Datepicker, { inputName: name, inputId: name, i18n: i18n, useRange: size === 'expanded', placeholder: placeholder, asSingle: !isRanged, separator: separator, startFrom: startFrom, displayFormat: displayFormat, disabled: isDisabled, popoverDirection: direction, minDate: minDate, maxDate: maxDate, toggleIcon: icon, 
                         //
                         value: state,