@hexure/ui 1.6.2 → 1.6.4

package/dist/cjs/types/Theme.d.ts

@@ -31,6 +31,10 @@ export declare const Colors: {
         Hex: string;
         Rgb: string;
     };
+    SUBTLE_GRAY: {
+        Hex: string;
+        Rgb: string;
+    };
 };
 export declare const FontStyles: {
     DEFAULT: string;

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/cjs/types/components/Tag/Tag.d.ts

@@ -1,10 +1,11 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { AccessibleProps } from '../../utils/Accessibility';
 export interface TagProps extends AccessibleProps {
     /** It is used to select tag-type either default or removable. */
-    color?: 'PRIMARY' | 'GREEN' | 'RED' | 'YELLOW' | 'BLACK';
+    color?: 'PRIMARY' | 'GREEN' | 'RED' | 'YELLOW' | 'BLACK' | 'SUBTLE_GRAY';
     /** It is used to give label to tag. */
-    children: string | number;
+    children: string | React.ReactNode;
+    /** Method to run when the tag is clicked */
     onClick?: (e?: any) => void;
     /** It is callback function called when user wants to close the tag. */
     removable?: boolean;

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';
 
@@ -2024,6 +2024,10 @@ var Colors = {
         Hex: '#E7E6E6',
         Rgb: '231, 230, 230',
     },
+    SUBTLE_GRAY: {
+        Hex: '#f5f5f5',
+        Rgb: '245, 245, 245',
+    },
 };
 var FontStyles = {
     DEFAULT: '"Roboto", Helvetica, Arial, sans-serif',
@@ -2100,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;
@@ -2147,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;
 
@@ -3150,15 +3145,15 @@ var templateObject_1$3, templateObject_2$3, templateObject_3$2;
 
 var Wrapper$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: inline-block;\n  border-radius: 4px;\n  padding: 4px 6px;\n  background: ", ";\n  color: #ffffff;\n  box-sizing: border-box;\n  cursor: ", ";\n"], ["\n  display: inline-block;\n  border-radius: 4px;\n  padding: 4px 6px;\n  background: ", ";\n  color: #ffffff;\n  box-sizing: border-box;\n  cursor: ", ";\n"])), function (props) { return Colors[props.$color].Hex; }, function (props) { return (props.$removable ? 'pointer' : 'default'); });
 var Content = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var Label = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  color: #ffffff;\n  font-size: ", ";\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1.2em;\n"], ["\n  color: #ffffff;\n  font-size: ", ";\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1.2em;\n"])), FontSizes.SMALL, FontStyles.DEFAULT);
+var Label = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1.2em;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1.2em;\n"])), function (props) { return (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff'); }, FontSizes.SMALL, FontStyles.DEFAULT);
 var Remove = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 10px;\n  display: flex;\n  align-items: center;\n"], ["\n  margin-left: 10px;\n  display: flex;\n  align-items: center;\n"])));
 var Tag = function (_a) {
     var children = _a.children, _b = _a.color, color = _b === void 0 ? 'PRIMARY' : _b, removable = _a.removable, onClick = _a.onClick, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
     return (React.createElement(Wrapper$1, __assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
         React.createElement(Content, null,
-            React.createElement(Label, null, children),
+            React.createElement(Label, { "$color": color }, children),
             removable ? (React.createElement(Remove, null,
-                React.createElement(Icon, { color: '#ffffff', path: mdiClose, size: '15px' }))) : null)));
+                React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
 };
 var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4;