@agility/plenum-ui 1.3.25 → 1.3.28

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

@@ -42,6 +42,7 @@ export interface TextInputAddonProps {
     leadLabel?: string;
     /** Remove bg and border from CTA  */
     clearCta?: "left" | "right" | "both" | "none";
+    className?: string;
     /** Callback on change */
     onChange?(value: string): void;
     /** Callback on Cta click */

package/lib/index.esm.js

@@ -12507,10 +12507,10 @@ var InputCta = function (_a) {
     var handleClick = function () {
         onClickHandler && onClickHandler();
     };
-    var buttonStyle = cn('relative z-10 inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500', {
+    var buttonStyle = cn('relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500', {
         'rounded-r text-gray-700 -ml-px': align === 'right'
     }, {
-        'rounded-l text-gray-500 -mr-px focus-within:z-10': align === 'left'
+        'rounded-l text-gray-500 -mr-px': align === 'left'
     }, {
         'cursor-default': !onClickHandler
     }, {
@@ -12530,7 +12530,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;
+    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 _d = useState(Boolean(isFocused)), isFocus = _d[0], setIsFocus = _d[1];
     var _e = useState(defaultValue || ""), value = _e[0], setValue = _e[1];
     var inputRef = useRef(null);
@@ -12571,22 +12571,26 @@ var TextInputAddon = function (_a, ref) {
         setIsFocus(false);
         // add other focus effects here
     };
-    var className = cn("border py-2 px-3 rounded text-sm leading-5 font-normal w-full border-gray-300 outline-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500 ", {
-        "focus:ring-red-500 !border-red-500 !outline-red-500 shadow-none": isError
-    }, { "pl-10": inlineIcon }, {
-        "!rounded-r-none !rounded-l": (trailIcon || trailLabel) && !(leadIcon || leadLabel)
-    }, {
-        "!rounded-r-none !rounded-r": !(trailIcon || trailLabel) && (leadIcon || leadLabel)
-    }, { "rounded-none": (trailIcon || trailLabel) && (leadIcon || leadLabel) });
     var discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
     return (React__default.createElement("div", null,
         label && (React__default.createElement(InputLabel, { label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled })),
         React__default.createElement("div", { className: "flex" },
             (leadIcon || leadLabel) && (React__default.createElement(InputCta, { icon: leadIcon, ctaLabel: leadLabel, align: "left", isClear: clearCta === "left" || clearCta === "both" })),
-            React__default.createElement("div", { className: "relative flex-grow focus-within:z-20" },
+            React__default.createElement("div", { className: "relative flex-grow" },
                 inlineIcon && (React__default.createElement("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3" },
                     React__default.createElement(DynamicIcons, { icon: inlineIcon, className: "h-5 w-5 text-gray-400", outline: false }))),
-                React__default.createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: ref, type: type, name: name, id: id, className: className, isDisabled: isDisabled, value: value, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder })),
+                React__default.createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: ref, type: type, name: name, id: id, className: cn("w-full rounded border border-gray-300 py-2 px-3 text-sm font-normal leading-5 outline-purple-500 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 ", {
+                        "!border-red-500 shadow-none !outline-red-500 focus:ring-red-500": isError
+                    }, { "pl-10": inlineIcon }, {
+                        "!rounded-r-none !rounded-l": (trailIcon || trailLabel) &&
+                            !(leadIcon || leadLabel)
+                    }, {
+                        "!rounded-r-none !rounded-r": !(trailIcon || trailLabel) &&
+                            (leadIcon || leadLabel)
+                    }, {
+                        "rounded-none": (trailIcon || trailLabel) &&
+                            (leadIcon || leadLabel)
+                    }, className), isDisabled: isDisabled, value: value, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder })),
             (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))),
@@ -12729,7 +12733,7 @@ var Textarea = function (_a, ref) {
         React__default.createElement("div", null,
             React__default.createElement("textarea", { ref: ref, maxLength: maxLength, onChange: handleOnchange, rows: rows, name: name, id: id, className: cn("block w-full rounded focus:border-purple-500 focus:ring-purple-500 sm:text-sm", { "border-gray-300 ": !isError }, {
                     "border-red-500 outline-red-500 focus:ring-red-500": isError
-                }, className), defaultValue: defaultValue, value: value, placeholder: placeholder })),
+                }, className), disabled: isDisabled, defaultValue: defaultValue, value: value, placeholder: placeholder })),
         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))),
             isShowCounter && (React__default.createElement("div", { className: "shrink-0" },