@agility/plenum-ui 1.3.33 → 1.3.35

package/lib/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { HTMLAttributeAnchorTarget } from "react";
 import { IconName } from "../../util/DynamicIcons";
 export interface ButtonProps {
     /**
@@ -40,6 +40,14 @@ export interface ButtonProps {
     className?: string;
     iconObj?: React.ReactNode;
     title?: string;
+    /**
+     * Optionally render as anchor tag
+     */
+    asLink?: {
+        href: string;
+        target: HTMLAttributeAnchorTarget;
+        title?: string;
+    };
 }
 declare const _Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { _Button as Button };

package/lib/components/Forms/TextInputAddon/TextInputAddon.d.ts

@@ -34,8 +34,10 @@ export interface TextInputAddonProps {
     leadIcon?: IconName;
     /** Trailing icon displayed within the input  */
     trailIcon?: IconName;
-    /** Icon within the input field  */
+    /** Icon within the input field at the begining of the field*/
     inlineIcon?: IconName;
+    /** Icon within the input field at the end of the field*/
+    inlineTrailingIcon?: IconName;
     /** Trailing label for the input CTA */
     trailLabel?: string;
     /** Leading label for input CTA  */

package/lib/components/Forms/TextInputAddon/TextInputAddon.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/react/types-6-0';
-import { Story } from '@storybook/react';
-import { TextInputAddonProps } from './TextInputAddon';
+import { Meta } from "@storybook/react/types-6-0";
+import { Story } from "@storybook/react";
+import { TextInputAddonProps } from "./TextInputAddon";
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const AllVariations: Story<TextInputAddonProps>;

package/lib/index.esm.js

@@ -7020,10 +7020,12 @@ function Loader(_a) {
  * Primary UI component for user interaction
  */
 var Button = function (_a, ref) {
-    var _b = _a.type, type = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "base" : _c, onClick = _a.onClick, label = _a.label, isDisabled = _a.isDisabled, icon = _a.icon, iconObj = _a.iconObj, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.isSubmit, isSubmit = _e === void 0 ? false : _e, _f = _a.isWidthFull, isWidthFull = _f === void 0 ? false : _f, className = _a.className, title = _a.title;
+    var _b = _a.type, type = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "base" : _c, onClick = _a.onClick, label = _a.label, isDisabled = _a.isDisabled, icon = _a.icon, iconObj = _a.iconObj, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.isSubmit, isSubmit = _e === void 0 ? false : _e, _f = _a.isWidthFull, isWidthFull = _f === void 0 ? false : _f, className = _a.className, title = _a.title, asLink = _a.asLink;
     var iconStyles = cn("h-5 w-5", { "text-white": type === "primary" || type === "danger" }, { "text-purple-700": type === "secondary" }, { "text-gray-700": type === "alternative" });
-    return (React__default.createElement("button", { ref: ref, type: isSubmit ? "submit" : "button", title: title, className: cn("inline-flex items-center justify-center space-x-2 rounded border transition-all", { "w-full": isWidthFull === true }, { "px-4 py-2 text-sm": size === "sm" }, { "px-5 py-2 text-base": size === "base" }, { "px-5 py-2 text-lg": size === "lg" }, { "cursor-auto opacity-50": isDisabled }, {
-            "border-purple-600 bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 active:border-purple-800 active:bg-purple-800": type === "primary"
+    return !asLink ? (React__default.createElement("button", { ref: ref, type: isSubmit ? "submit" : "button", title: title, className: cn("inline-flex items-center justify-center space-x-2 rounded border transition-all", { "w-full": isWidthFull === true }, { "px-4 py-2 text-sm": size === "sm" }, { "px-5 py-2 text-base": size === "base" }, { "px-5 py-2 text-lg": size === "lg" }, {
+            "cursor-auto  opacity-50": isDisabled
+        }, {
+            "active: border-purple-600 bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 active:border-purple-800 active:bg-purple-800": type === "primary"
         }, {
             "border-purple-100 bg-purple-100 text-purple-700 hover:border-purple-200 hover:bg-purple-200 hover:text-purple-700 active:border-purple-300 active:bg-purple-300": type === "secondary"
         }, {
@@ -7033,11 +7035,28 @@ var Button = function (_a, ref) {
         }, className), onClick: !isDisabled
             ? onClick
             : function () {
-            } },
+            }, disabled: isDisabled, "aria-disabled": isDisabled },
+        iconObj &&
+            (isLoading ? (React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })) : (React__default.createElement(React__default.Fragment, null, iconObj))),
+        icon &&
+            (isLoading ? (React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })) : (React__default.createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
+        !icon && !iconObj && isLoading && (React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })),
+        label && React__default.createElement("span", null, label))) : (React__default.createElement("a", { type: isSubmit ? "submit" : "button", title: asLink.title || title, href: asLink.href, className: cn("inline-flex items-center justify-center space-x-2 rounded border transition-all", { "w-full": isWidthFull === true }, { "px-4 py-2 text-sm": size === "sm" }, { "px-5 py-2 text-base": size === "base" }, { "px-5 py-2 text-lg": size === "lg" }, {
+            "cursor-auto  opacity-50": isDisabled
+        }, {
+            "active: border-purple-600 bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 active:border-purple-800 active:bg-purple-800": type === "primary"
+        }, {
+            "border-purple-100 bg-purple-100 text-purple-700 hover:border-purple-200 hover:bg-purple-200 hover:text-purple-700 active:border-purple-300 active:bg-purple-300": type === "secondary"
+        }, {
+            "border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:text-gray-700 active:bg-gray-100": type === "alternative"
+        }, {
+            "border-red-300 bg-red-600 text-white hover:bg-red-700 hover:text-white": type === "danger"
+        }, className), "aria-disabled": isDisabled },
         iconObj &&
             (isLoading ? (React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })) : (React__default.createElement(React__default.Fragment, null, iconObj))),
-        icon && (isLoading ? (React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })) : (React__default.createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
-        !icon && !iconObj && (isLoading && React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })),
+        icon &&
+            (isLoading ? (React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })) : (React__default.createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
+        !icon && !iconObj && isLoading && (React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })),
         label && React__default.createElement("span", null, label)));
 };
 var _Button = forwardRef(Button);
@@ -12500,7 +12519,7 @@ var InputCta = function (_a) {
 };
 
 var TextInputAddon = function (_a, ref) {
-    var label = _a.label, isFocused = _a.isFocused, isError = _a.isError, id = _a.id, name = _a.name, isRequired = _a.isRequired, type = _a.type, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, message = _a.message, isShowCounter = _a.isShowCounter, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, placeholder = _a.placeholder, leadIcon = _a.leadIcon, trailIcon = _a.trailIcon, inlineIcon = _a.inlineIcon, trailLabel = _a.trailLabel, leadLabel = _a.leadLabel, _c = _a.clearCta, clearCta = _c === void 0 ? "none" : _c, onChange = _a.onChange, onCtaClick = _a.onCtaClick, externalValue = _a.value, className = _a.className;
+    var label = _a.label, isFocused = _a.isFocused, isError = _a.isError, id = _a.id, name = _a.name, isRequired = _a.isRequired, type = _a.type, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, message = _a.message, isShowCounter = _a.isShowCounter, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, placeholder = _a.placeholder, leadIcon = _a.leadIcon, trailIcon = _a.trailIcon, inlineIcon = _a.inlineIcon, inlineTrailingIcon = _a.inlineTrailingIcon, trailLabel = _a.trailLabel, leadLabel = _a.leadLabel, _c = _a.clearCta, clearCta = _c === void 0 ? "none" : _c, onChange = _a.onChange, onCtaClick = _a.onCtaClick, externalValue = _a.value, className = _a.className;
     var _d = useState(Boolean(isFocused)), isFocus = _d[0], setIsFocus = _d[1];
     var _e = useState(defaultValue || ""), value = _e[0], setValue = _e[1];
     var inputRef = useRef(null);
@@ -12560,7 +12579,9 @@ var TextInputAddon = function (_a, ref) {
                     }, {
                         "rounded-none": (trailIcon || trailLabel) &&
                             (leadIcon || leadLabel)
-                    }, className), isDisabled: isDisabled, value: value, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder })),
+                    }, className), isDisabled: isDisabled, value: value, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder }),
+                inlineTrailingIcon && (React__default.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3" },
+                    React__default.createElement(DynamicIcons, { icon: inlineTrailingIcon, className: "h-5 w-5 bg-white text-gray-400", outline: false })))),
             (trailIcon || trailLabel) && (React__default.createElement(InputCta, { icon: trailIcon, ctaLabel: trailLabel, align: "right", isClear: clearCta === "right" || clearCta === "both", onClickHandler: onCtaClick }))),
         React__default.createElement("div", { className: "flex flex-row space-x-3" },
             React__default.createElement("div", { className: "grow" }, message && (React__default.createElement("span", { className: discriptionStyles }, message))),