@ballistix.digital/react-components 0.5.6 → 0.5.8

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 = {
@@ -2481,7 +2483,7 @@ var SelectMenuForm = function (props) {
     var styles = handleGenerateStyle();
     // Simulate onClear event.
     useEffect(function () {
-        if (state === null) {
+        if (state === null && !isFocus) {
             onClear && onClear(name);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2493,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, 
@@ -9563,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 = {