@agility/plenum-ui 1.1.61 → 1.1.71

package/lib/index.js

@@ -12299,7 +12299,7 @@ var InputCounter = function (_a) {
 var defaultStyles = 'border py-2 px-3 rounded-md 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, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, placeholder = _a.placeholder, _c = _a.inputStyles, inputStyles = _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, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, placeholder = _a.placeholder, _c = _a.inputStyles, inputStyles = _c === void 0 ? defaultStyles : _c, onChange = _a.onChange, onValueChange = _a.onValueChange;
     var handleChange = function (e) {
         var targetValue = e.currentTarget.value;
         onChange && onChange(targetValue);
@@ -12317,16 +12317,19 @@ 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: scopedtyles, disabled: isDisabled, defaultValue: defaultValue, maxLength: maxLength, autoComplete: "off" }));
+        }, placeholder: placeholder, ref: ref, type: type, name: name, id: id, className: scopedtyles, disabled: isDisabled, value: value, defaultValue: defaultValue, maxLength: maxLength, autoComplete: "off" }));
 };
 var _BaseField = React.forwardRef(BaseField);
 
-var TextInput = function (_a) {
-    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;
+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 _c = React.useState(Boolean(isFocused)), isFocus = _c[0], setIsFocus = _c[1];
-    var _d = React.useState(false), isActive = _d[0], setIsActive = _d[1];
-    var _e = React.useState(defaultValue), value = _e[0], setValue = _e[1];
+    var _d = React.useState(false); _d[0]; var setIsActive = _d[1];
+    var _e = React.useState(defaultValue || ''), value = _e[0], setValue = _e[1];
     var inputRef = React.useRef(null);
+    React.useEffect(function () {
+        setValue(externalValue);
+    }, [externalValue]);
     // set force focus
     React.useEffect(function () {
         var input = inputRef.current;
@@ -12359,14 +12362,15 @@ var TextInput = function (_a) {
     var inputStyles = cn$1('border py-2 px-3 rounded-md 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$1('text-sm mt-1 block', { 'text-gray-500': !isError }, { 'text-red-500': isError });
     return (React__default["default"].createElement("div", null,
-        React__default["default"].createElement(InputLabel, { isPlaceholder: true, label: label, isRequired: isRequired, id: id, isError: isError, isActive: isActive, isDisabled: isDisabled }),
+        React__default["default"].createElement(InputLabel, { isPlaceholder: true, label: label, isRequired: isRequired, id: id, isError: isError, isActive: true, isDisabled: isDisabled }),
         React__default["default"].createElement("div", null,
-            React__default["default"].createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: inputRef, type: type, name: name, id: id, inputStyles: inputStyles, isDisabled: isDisabled, defaultValue: defaultValue, maxLength: maxLength }),
+            React__default["default"].createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: ref, type: type, name: name, id: id, inputStyles: inputStyles, isDisabled: isDisabled, 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: discriptionStyles }, message)),
                 isShowCounter && (React__default["default"].createElement("div", { className: "shrink-0" },
                     React__default["default"].createElement(InputCounter, { current: Number(value === null || value === void 0 ? void 0 : value.length), limit: maxLength })))))));
-};
+};
+var _TextInput = React.forwardRef(TextInput);
 
 /** Comment */
 var InputCta = function (_a) {
@@ -12396,11 +12400,14 @@ var InputCta = function (_a) {
         ctaLabel && React__default["default"].createElement("span", null, ctaLabel)));
 };
 
-var TextInputAddon = function (_a) {
-    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;
+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 _d = React.useState(Boolean(isFocused)), isFocus = _d[0], setIsFocus = _d[1];
-    var _e = React.useState(defaultValue), value = _e[0], setValue = _e[1];
+    var _e = React.useState(defaultValue || ''), value = _e[0], setValue = _e[1];
     var inputRef = React.useRef(null);
+    React.useEffect(function () {
+        setValue(externalValue);
+    }, [externalValue]);
     // set force focus
     React.useEffect(function () {
         var input = inputRef.current;
@@ -12436,13 +12443,14 @@ var TextInputAddon = function (_a) {
             React__default["default"].createElement("div", { className: "flex-grow focus-within:z-20 relative" },
                 inlineIcon && (React__default["default"].createElement("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" },
                     React__default["default"].createElement(DynamicIcons, { icon: inlineIcon, className: "h-5 w-5 text-gray-400", outline: false }))),
-                React__default["default"].createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: inputRef, type: type, name: name, id: id, inputStyles: inputStyles, isDisabled: isDisabled, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder })),
+                React__default["default"].createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: ref, type: type, name: name, id: id, inputStyles: inputStyles, isDisabled: isDisabled, value: value, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder })),
             (trailIcon || trailLabel) && (React__default["default"].createElement(InputCta, { icon: trailIcon, ctaLabel: trailLabel, align: "right", isClear: clearCta === 'right' || clearCta === 'both', onClickHandler: onCtaClick }))),
         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: discriptionStyles }, message)),
             isShowCounter && (React__default["default"].createElement("div", { className: "shrink-0" },
                 React__default["default"].createElement(InputCounter, { current: Number(value === null || value === void 0 ? void 0 : value.length), limit: maxLength }))))));
-};
+};
+var _TextInputAddon = React.forwardRef(TextInputAddon);
 
 /** Comment */
 var InputSelect = function (_a) {
@@ -12460,10 +12468,13 @@ var InputSelect = function (_a) {
 };
 
 var TextInputSelect = function (_a) {
-    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, inputOptions = _a.inputOptions, _c = _a.selectLocation, selectLocation = _c === void 0 ? 'right' : _c, prefix = _a.prefix, onChange = _a.onChange, onSelectOption = _a.onSelectOption;
+    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, inputOptions = _a.inputOptions, _c = _a.selectLocation, selectLocation = _c === void 0 ? 'right' : _c, prefix = _a.prefix, onChange = _a.onChange, onSelectOption = _a.onSelectOption, externalValue = _a.value;
     var _d = React.useState(Boolean(isFocused)), isFocus = _d[0], setIsFocus = _d[1];
-    var _e = React.useState(defaultValue), value = _e[0], setValue = _e[1];
+    var _e = React.useState(defaultValue || ''), value = _e[0], setValue = _e[1];
     var inputRef = React.useRef(null);
+    React.useEffect(function () {
+        setValue(externalValue);
+    }, [externalValue]);
     // set force focus
     React.useEffect(function () {
         var input = inputRef.current;
@@ -12504,7 +12515,7 @@ var TextInputSelect = function (_a) {
             React__default["default"].createElement("div", { className: "flex-grow focus-within:z-20 relative" },
                 prefix && (React__default["default"].createElement("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" },
                     React__default["default"].createElement("span", { className: "text-gray-500 sm:text-sm" }, prefix))),
-                React__default["default"].createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: inputRef, type: type, name: name, id: id, inputStyles: inputStyles, isDisabled: isDisabled, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder })),
+                React__default["default"].createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: inputRef, type: type, name: name, id: id, inputStyles: inputStyles, isDisabled: isDisabled, defaultValue: defaultValue, value: value, maxLength: maxLength, placeholder: placeholder })),
             (inputOptions === null || inputOptions === void 0 ? void 0 : inputOptions.length) && selectLocation === 'right' && (React__default["default"].createElement(InputSelect, { inputOptions: inputOptions, align: 'right', onSelectOption: onSelectOption }))),
         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: discriptionStyles }, message)),
@@ -12612,8 +12623,8 @@ exports.Placeholder = Placeholder;
 exports.Radio = Radio;
 exports.Select = Select;
 exports.Switch = Switch;
-exports.TextInput = TextInput;
-exports.TextInputAddon = TextInputAddon;
+exports.TextInput = _TextInput;
+exports.TextInputAddon = _TextInputAddon;
 exports.TextInputSelect = TextInputSelect;
 exports.Textarea = _Textarea;
 exports.TreeView = _TreeView;