@hexure/ui 1.6.3 → 1.6.4

package/dist/cjs/types/components/ActionDialog/ActionDialog.d.ts

@@ -11,9 +11,12 @@ export interface ActionDialogProps extends AccessibleProps {
     title?: string;
     /** It is used to give description. */
     description?: string;
+    /** Set the primary action for the dialog */
     primaryButton?: ButtonProps;
+    /** Set the secondary action for the dialog. This should only be defined after a primary action is defined */
     secondaryButton?: ButtonProps;
-    onClose: (e?: any) => void;
+    /** Set the tertiary action for the dialog. This should only be defined after a secondary action is defined */
+    tertiaryButton?: ButtonProps;
 }
 declare const ActionDialog: FC<ActionDialogProps>;
 export default ActionDialog;

package/dist/cjs/types/components/Button/Button.d.ts

@@ -11,6 +11,8 @@ export interface ButtonProps extends AccessibleProps {
     icon?: string;
     /** Adjust the button to work within a <form> tag. Ignores onClick, sets type='form'  */
     isForm?: boolean;
+    /** Displays a loading state for the button */
+    loading?: boolean;
     /** Set the margin of the button as needed */
     margin?: string;
     /** Prop to pass a that fires when the user does a click. */

package/dist/esm/index.js

@@ -1,6 +1,6 @@
-import React, { useRef, useDebugValue, useContext, createElement, useEffect, useState } from 'react';
+import React, { useRef, useDebugValue, useContext, createElement, useState, useEffect } from 'react';
 import Icon from '@mdi/react';
-import { mdiChevronUp, mdiChevronDown, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiMinusCircle, mdiFolderPlusOutline, mdiChevronLeft, mdiChevronRight, mdiCheck } from '@mdi/js';
+import { mdiChevronUp, mdiChevronDown, mdiLoading, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiMinusCircle, mdiFolderPlusOutline, mdiChevronLeft, mdiChevronRight, mdiCheck } from '@mdi/js';
 import Numeral from 'numeral';
 import 'moment';
 
@@ -2104,12 +2104,12 @@ var Badge$1 = styled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemp
     return props.$format ? button_type_mapping[props.$format].badge_content_color : Colors.PRIMARY.Hex;
 }, function (props) { return (props.$small ? '10px' : '12px'); }, FontStyles.DEFAULT, function (props) { return (props.$small ? '5px' : '10px'); }, function (props) { return (props.$small ? '-5px' : '-10px'); });
 var Button = function (_a) {
-    var badge = _a.badge, children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isForm, isForm = _c === void 0 ? false : _c, _d = _a.margin, margin = _d === void 0 ? '' : _d, onClick = _a.onClick, _e = _a.small, small = _e === void 0 ? false : _e, _f = _a.format, format = _f === void 0 ? 'primary' : _f, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "margin", "onClick", "small", "format"]);
+    var badge = _a.badge, children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isForm, isForm = _c === void 0 ? false : _c, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.margin, margin = _e === void 0 ? '' : _e, onClick = _a.onClick, _f = _a.small, small = _f === void 0 ? false : _f, _g = _a.format, format = _g === void 0 ? 'primary' : _g, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format"]);
     var has_children = children && children.length > 0;
-    return (React.createElement(StyledButton, __assign({ "$disabled": disabled, "$format": format, "$hasChildren": !!has_children, "$margin": margin, "$small": small, onClick: disabled ? undefined : onClick, type: isForm ? 'submit' : undefined }, accessibleProps),
+    return (React.createElement(StyledButton, __assign({ "$disabled": disabled || loading, "$format": format, "$hasChildren": !!has_children, "$margin": margin, "$small": small, onClick: disabled || loading ? undefined : onClick, type: isForm ? 'submit' : undefined }, accessibleProps),
         children ? (React.createElement(Label$4, { "$format": format, "$small": small }, children)) : null,
         icon && !badge ? (React.createElement(StyledIcon$2, { "$hasChildren": !!has_children },
-            React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null,
+            React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: loading ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
         badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
 };
 var templateObject_1$o, templateObject_2$l, templateObject_3$i, templateObject_4$9;
@@ -2151,26 +2151,17 @@ var templateObject_1$m, templateObject_2$k, templateObject_3$h;
 
 var Wrapper$f = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n"], ["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n"])));
 var Container$3 = styled.dialog(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  max-width: 600px;\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 40px;\n  text-align: center;\n  box-sizing: border-box;\n"], ["\n  max-width: 600px;\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 40px;\n  text-align: center;\n  box-sizing: border-box;\n"])));
-var Buttons = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"])));
+var Buttons = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"])));
 var ActionDialog = function (_a) {
-    var description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, accessibleProps = __rest(_a, ["description", "title", "onClose", "primaryButton", "secondaryButton"]);
-    useEffect(function () {
-        document.onkeydown = function (e) {
-            if (e.key === 'Escape') {
-                onClose();
-            }
-        };
-        return function cleanup() {
-            document.onkeydown = null;
-        };
-    }, []);
+    var description = _a.description, title = _a.title, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton"]);
     return (React.createElement(Wrapper$f, __assign({}, accessibleProps),
         React.createElement(Container$3, { open: true },
             title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
             description ? React.createElement(Copy, { align: 'center' }, description) : null,
-            primaryButton || secondaryButton ? (React.createElement(Buttons, null,
-                secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary', margin: '0px 5px' }))) : null,
-                primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 5px' })) : null)) : null)));
+            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(Buttons, null,
+                tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { format: 'secondary' })) : null,
+                secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
+                primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null)));
 };
 var templateObject_1$l, templateObject_2$j, templateObject_3$g;