@agility/plenum-ui 1.3.24 → 1.3.25

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

@@ -11,6 +11,8 @@ export interface BaseFieldProps {
     placeholder?: string;
     /** Disabled state */
     isDisabled?: boolean;
+    /** Readonly state */
+    isReadonly?: boolean;
     /** Set value */
     value?: string;
     /** Set default value */

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

@@ -17,6 +17,8 @@ export interface TextInputProps {
     isRequired?: boolean;
     /** Disabled state */
     isDisabled?: boolean;
+    /** Readonly state */
+    isReadonly?: boolean;
     /** Set default value */
     defaultValue?: string;
     /** Message shown under the text field */

package/lib/index.esm.js

@@ -12410,7 +12410,7 @@ var InputCounter = function (_a) {
 var defaultStyles = "border py-2 px-3 rounded text-sm leading-5 font-normal w-full border-gray-300 shadow-sm";
 /** Base input field component */
 var BaseField = function (_a, ref) {
-    var onFocus = _a.onFocus, onBlur = _a.onBlur, id = _a.id, name = _a.name, type = _a.type, value = _a.value, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, placeholder = _a.placeholder, _c = _a.className, className = _c === void 0 ? defaultStyles : _c, onChange = _a.onChange, onValueChange = _a.onValueChange;
+    var onFocus = _a.onFocus, onBlur = _a.onBlur, id = _a.id, name = _a.name, type = _a.type, value = _a.value, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, isReadonly = _a.isReadonly, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, placeholder = _a.placeholder, _c = _a.className, className = _c === void 0 ? defaultStyles : _c, onChange = _a.onChange, onValueChange = _a.onValueChange;
     var handleChange = function (e) {
         var targetValue = e.currentTarget.value;
         onChange && onChange(targetValue);
@@ -12424,7 +12424,7 @@ var BaseField = function (_a, ref) {
     };
     return (React__default.createElement("input", { onFocus: handleFocus, onBlur: handleBlur, onChange: function (e) {
             handleChange(e);
-        }, placeholder: placeholder, ref: ref, type: type, name: name, id: id, className: cn(className, isDisabled ? "opacity-50" : ""), disabled: isDisabled, value: value, defaultValue: defaultValue, maxLength: maxLength, autoComplete: "off" }));
+        }, placeholder: placeholder, ref: ref, type: type, name: name, id: id, className: cn(isDisabled ? "opacity-50" : "", className), disabled: isDisabled, readOnly: isReadonly, value: value, defaultValue: defaultValue, maxLength: maxLength, autoComplete: "off" }));
 };
 var _BaseField = forwardRef(BaseField);
 
@@ -12442,7 +12442,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, 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, isReadonly = _a.isReadonly, 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];
@@ -12493,7 +12493,7 @@ var TextInput = function (_a, ref) {
                 "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 }),
+            }, className), isDisabled: isDisabled, isReadonly: isReadonly, 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: cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500") }, message))),
             isShowCounter && (React__default.createElement("div", { className: "shrink-0" },

package/lib/index.js

@@ -12436,7 +12436,7 @@ var InputCounter = function (_a) {
 var defaultStyles = "border py-2 px-3 rounded text-sm leading-5 font-normal w-full border-gray-300 shadow-sm";
 /** Base input field component */
 var BaseField = function (_a, ref) {
-    var onFocus = _a.onFocus, onBlur = _a.onBlur, id = _a.id, name = _a.name, type = _a.type, value = _a.value, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, placeholder = _a.placeholder, _c = _a.className, className = _c === void 0 ? defaultStyles : _c, onChange = _a.onChange, onValueChange = _a.onValueChange;
+    var onFocus = _a.onFocus, onBlur = _a.onBlur, id = _a.id, name = _a.name, type = _a.type, value = _a.value, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, isReadonly = _a.isReadonly, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, placeholder = _a.placeholder, _c = _a.className, className = _c === void 0 ? defaultStyles : _c, onChange = _a.onChange, onValueChange = _a.onValueChange;
     var handleChange = function (e) {
         var targetValue = e.currentTarget.value;
         onChange && onChange(targetValue);
@@ -12450,7 +12450,7 @@ var BaseField = function (_a, ref) {
     };
     return (React__default["default"].createElement("input", { onFocus: handleFocus, onBlur: handleBlur, onChange: function (e) {
             handleChange(e);
-        }, placeholder: placeholder, ref: ref, type: type, name: name, id: id, className: cn(className, isDisabled ? "opacity-50" : ""), disabled: isDisabled, value: value, defaultValue: defaultValue, maxLength: maxLength, autoComplete: "off" }));
+        }, placeholder: placeholder, ref: ref, type: type, name: name, id: id, className: cn(isDisabled ? "opacity-50" : "", className), disabled: isDisabled, readOnly: isReadonly, value: value, defaultValue: defaultValue, maxLength: maxLength, autoComplete: "off" }));
 };
 var _BaseField = React.forwardRef(BaseField);
 
@@ -12468,7 +12468,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, 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, isReadonly = _a.isReadonly, 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 = React.useState(Boolean(isFocused)), isFocus = _c[0], setIsFocus = _c[1];
     var _d = React.useState(false); _d[0]; var setIsActive = _d[1];
@@ -12519,7 +12519,7 @@ var TextInput = function (_a, ref) {
                 "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 }),
+            }, className), isDisabled: isDisabled, isReadonly: isReadonly, value: value, defaultValue: defaultValue, maxLength: maxLength }),
         React__default["default"].createElement("div", { className: "flex flex-row space-x-3" },
             React__default["default"].createElement("div", { className: "grow" }, message && (React__default["default"].createElement("span", { className: cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500") }, message))),
             isShowCounter && (React__default["default"].createElement("div", { className: "shrink-0" },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "1.3.24",
+	"version": "1.3.25",
 	"description": "Components that are part of the Agility CMS design system.",
 	"main": "lib/index.js",
 	"module": "lib/index.esm.js",