@agility/plenum-ui 1.3.10 → 1.3.13

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

@@ -29,6 +29,7 @@ export interface TextInputProps {
     onChange?(value: string): void;
     /** input value */
     value?: string;
+    className?: string;
 }
 declare const _TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 export { _TextInput as TextInput };

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

@@ -25,6 +25,8 @@ export interface TextareaProps {
     onChange?(value: string): void;
     /** Number of rows */
     rows?: number;
+    placeholder?: string;
+    className?: string;
 }
 declare const _Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { _Textarea as Textarea };

package/lib/index.esm.js

@@ -7324,7 +7324,7 @@ var Switch = function (_a) {
     }, [enabled]);
     var switchStyles = cn("relative inline-flex flex-shrink-0", "border-2 border-transparent rounded-full cursor-pointer", "transition-colors ease-in-out duration-200 focus:outline-none", "focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75", { "bg-purple-600": enabled }, { "bg-gray-200": !enabled }, { "h-[38px] w-[74px]": size === "lg" }, { "h-[28px] w-[64px]": size === "md" }, { "h-[18px] w-[34px]": size === "sm" });
     // the circular button inside the switch
-    var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", "shadow-lg transform ring-0 transition ease-in-out duration-200", { "translate-x-9": enabled }, { "translate-x-0": !enabled }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && enabled }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !enabled });
+    var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", " transform ring-0 transition ease-in-out duration-200", { "translate-x-9": enabled }, { "translate-x-0": !enabled }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && enabled }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !enabled });
     return (React__default.createElement("div", { className: "text-center" },
         React__default.createElement(ue, { checked: enabled, onChange: setEnabled, className: switchStyles },
             React__default.createElement("span", { className: "sr-only" }, "Use setting"),
@@ -12436,7 +12436,7 @@ var useId = function () {
 };
 
 var TextInput = 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, onChange = _a.onChange, 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, onChange = _a.onChange, externalValue = _a.value, className = _a.className;
     var uniqueID = useId();
     var _c = useState(Boolean(isFocused)), isFocus = _c[0], setIsFocus = _c[1];
     var _d = useState(false); _d[0]; var setIsActive = _d[1];
@@ -12471,9 +12471,6 @@ var TextInput = function (_a, ref) {
         setIsFocus(false);
         setIsActive(!(input && input.value === ""));
     };
-    var className = cn("border py-2 px-3 rounded text-sm leading-5 font-normal w-full", { "border-gray-300 shadow-sm": !isFocus && !isError }, {
-        "focus:ring-purple-500 border-purple-500 outline-purple-500 shadow-none": isFocus && !isError
-    }, { "focus:ring-red-500 !border-red-500 shadow-none": isError });
     var discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
     if (!id)
         id = "input-".concat(uniqueID);
@@ -12483,9 +12480,13 @@ var TextInput = function (_a, ref) {
     return (React__default.createElement("div", null,
         React__default.createElement(InputLabel, { isPlaceholder: true, label: label, isRequired: isRequired, id: id, isError: isError, isActive: true, isDisabled: isDisabled }),
         React__default.createElement("div", null,
-            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 }),
+            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 py-2 px-3 text-sm font-normal leading-5", { "border-gray-300": !isFocus && !isError }, {
+                    "border-purple-500 shadow-none outline-purple-500 focus:ring-purple-500": isFocus && !isError
+                }, {
+                    "!border-red-500 shadow-none focus:ring-red-500": isError
+                }, className), isDisabled: isDisabled, value: value, defaultValue: defaultValue, maxLength: maxLength }),
             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)),
+                React__default.createElement("div", { className: "grow" }, message && (React__default.createElement("span", { className: discriptionStyles }, message))),
                 isShowCounter && (React__default.createElement("div", { className: "shrink-0" },
                     React__default.createElement(InputCounter, { current: Number(value === null || value === void 0 ? void 0 : value.length), limit: maxLength })))))));
 };
@@ -12561,7 +12562,7 @@ 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 shadow-sm focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500 ", {
+    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)
@@ -12658,7 +12659,7 @@ var TextInputSelect = function (_a) {
             React__default.createElement("div", { className: "relative flex-grow focus-within:z-20" },
                 prefix && (React__default.createElement("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3" },
                     React__default.createElement("span", { className: "text-gray-500 sm:text-sm" }, prefix))),
-                React__default.createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: inputRef, type: type, name: name, id: id, className: cn("w-full border border-gray-300 py-2 px-3 text-sm font-normal leading-5 shadow-sm", "focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm", selectLocation === "right"
+                React__default.createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: inputRef, type: type, name: name, id: id, className: cn("w-full border border-gray-300 py-2 px-3 text-sm font-normal leading-5", "focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm", selectLocation === "right"
                         ? "rounded-l"
                         : "rounded-r", isError ? "border-red-500" : "", prefix ? "pl-7" : ""), isDisabled: isDisabled, defaultValue: defaultValue, value: value, maxLength: maxLength, placeholder: placeholder })),
             (inputOptions === null || inputOptions === void 0 ? void 0 : inputOptions.length) && selectLocation === "right" && (React__default.createElement(InputSelect, { inputOptions: inputOptions, align: "right", onSelectOption: onSelectOption, isDisabled: isDisabled, className: cn(isError ? "border-red-500" : "") }))),
@@ -12703,7 +12704,7 @@ var Radio = function (_a) {
 };
 
 var Textarea = function (_a, ref) {
-    var id = _a.id, name = _a.name, label = _a.label, isError = _a.isError, isRequired = _a.isRequired, isDisabled = _a.isDisabled, defaultValue = _a.defaultValue, message = _a.message, isShowCounter = _a.isShowCounter, _b = _a.maxLength, maxLength = _b === void 0 ? 500 : _b, _c = _a.rows, rows = _c === void 0 ? 4 : _c, onChange = _a.onChange, externalValue = _a.value;
+    var id = _a.id, name = _a.name, label = _a.label, isError = _a.isError, isRequired = _a.isRequired, isDisabled = _a.isDisabled, defaultValue = _a.defaultValue, message = _a.message, isShowCounter = _a.isShowCounter, _b = _a.maxLength, maxLength = _b === void 0 ? 500 : _b, _c = _a.rows, rows = _c === void 0 ? 4 : _c, onChange = _a.onChange, externalValue = _a.value, placeholder = _a.placeholder, className = _a.className;
     var uniqueID = useId();
     var _d = useState(externalValue || defaultValue || ""), value = _d[0], setValue = _d[1];
     var handleOnchange = function (e) {
@@ -12711,14 +12712,15 @@ var Textarea = function (_a, ref) {
         typeof onChange === "function" && onChange(targetValue);
         setValue(targetValue);
     };
-    var className = cn("shadow-sm focus:ring-purple-500 focus:border-purple-500 block w-full sm:text-sm rounded", { "border-gray-300 ": !isError }, { "focus:ring-red-500 border-red-500 outline-red-500 shadow-none": isError });
     var discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
     if (!id)
         id = "ta-".concat(uniqueID);
     return (React__default.createElement("div", { className: cn({ "opacity-50": isDisabled }) },
         label && (React__default.createElement(InputLabel, { isPlaceholder: true, isActive: true, label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled })),
         React__default.createElement("div", null,
-            React__default.createElement("textarea", { ref: ref, maxLength: maxLength, onChange: handleOnchange, rows: rows, name: name, id: id, className: className, defaultValue: defaultValue, value: value })),
+            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 })),
         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" },