@ballistix.digital/react-components 0.5.5 → 0.5.7

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, RefObject, ReactElement, ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, Dispatch, SetStateAction, ElementType, ChangeEvent } from 'react';
+import React, { FC, ReactNode, RefObject, MouseEvent as MouseEvent$1, ReactElement, ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, Dispatch, SetStateAction, ElementType, ChangeEvent } from 'react';
 import { DeepPartialType as DeepPartialType$1 } from 'types/DeepPartialType';
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { Menu } from '@headlessui/react';
@@ -92,7 +92,7 @@ type TButtonElementProps = {
     status?: 'idle' | 'loading' | 'success' | 'error';
     isDisabled?: boolean;
     styles?: TButtonElementStyles;
-    onClick?: () => void;
+    onClick?: (e?: MouseEvent$1<HTMLButtonElement>) => void;
 };
 declare const ButtonElement: FC<TButtonElementProps>;
 

package/dist/index.esm.js

@@ -538,7 +538,9 @@ var ButtonElement = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    return (jsxs("button", { type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef, children: [status === 'idle' && children, status === 'loading' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsx("div", { children: children })] })), status === 'error' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsx("div", { children: children })] })), status === 'success' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsx("div", { children: children })] }))] }));
+    return (jsxs("button", { type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: function (e) {
+            onClick && onClick(e);
+        }, ref: innerRef, children: [status === 'idle' && children, status === 'loading' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsx("div", { children: children })] })), status === 'error' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsx("div", { children: children })] })), status === 'success' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsx("div", { children: children })] }))] }));
 };
 
 var base$n = {
@@ -715,8 +717,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 = {
@@ -1205,13 +1208,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;
@@ -1222,13 +1225,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" })] })] }) })] })] }));
@@ -1881,12 +1884,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;
@@ -1895,11 +1901,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) {
@@ -2486,6 +2495,10 @@ var SelectMenuForm = function (props) {
         }
         // 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(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, 
@@ -2616,15 +2629,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);
@@ -2642,13 +2656,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, 
@@ -9562,7 +9569,7 @@ var OpeningHourItem = function (props) {
                                 };
                                 onUpdate && onUpdate(params);
                             }
-                        }, className: toClassName(styles$2.control.action, form.values.closed ? 'bg-primary-500' : 'bg-gray-200'), children: [jsx("span", { className: styles$2.control.sr, children: "Toggle closed" }), jsx("span", { "aria-hidden": "true", className: toClassName(styles$2.control.span, form.values.closed ? 'translate-x-5' : 'translate-x-0') })] })] }), !isCreating ? (jsx(ButtonElement, { size: "sm", type: "outline", onClick: function () { return onDelete && onDelete(form.values.id); }, children: jsx(XMarkIcon, { className: "w-4 h-4" }) })) : (jsx(ButtonElement, { size: "sm", type: "secondary", onClick: form.handleSubmit, children: jsx(PlusIcon, { className: "w-4 h-4" }) }))] }));
+                        }, className: toClassName(styles$2.control.action, form.values.closed ? 'bg-primary-500' : 'bg-gray-200'), children: [jsx("span", { className: styles$2.control.sr, children: "Toggle closed" }), jsx("span", { "aria-hidden": "true", className: toClassName(styles$2.control.span, form.values.closed ? 'translate-x-5' : 'translate-x-0') })] })] }), !isCreating ? (jsx(ButtonElement, { size: "sm", type: "outline", onClick: function () { return onDelete && onDelete(form.values.id); }, children: jsx(XMarkIcon, { className: "w-4 h-4" }) })) : (jsx(ButtonElement, { size: "sm", type: "secondary", onClick: function () { return form.handleSubmit(); }, children: jsx(PlusIcon, { className: "w-4 h-4" }) }))] }));
 };
 
 var styles$2 = {