@agility/plenum-ui 1.1.61 → 1.1.71

package/lib/index.esm.js

@@ -12273,7 +12273,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);
@@ -12291,16 +12291,19 @@ 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: 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 = 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 = useState(Boolean(isFocused)), isFocus = _c[0], setIsFocus = _c[1];
-    var _d = useState(false), isActive = _d[0], setIsActive = _d[1];
-    var _e = useState(defaultValue), value = _e[0], setValue = _e[1];
+    var _d = useState(false); _d[0]; var setIsActive = _d[1];
+    var _e = useState(defaultValue || ''), value = _e[0], setValue = _e[1];
     var inputRef = useRef(null);
+    useEffect(function () {
+        setValue(externalValue);
+    }, [externalValue]);
     // set force focus
     useEffect(function () {
         var input = inputRef.current;
@@ -12333,14 +12336,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.createElement("div", null,
-        React__default.createElement(InputLabel, { isPlaceholder: true, label: label, isRequired: isRequired, id: id, isError: isError, isActive: isActive, isDisabled: isDisabled }),
+        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: inputRef, type: type, name: name, id: id, inputStyles: inputStyles, isDisabled: isDisabled, defaultValue: defaultValue, maxLength: maxLength }),
+            React__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.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" },
                     React__default.createElement(InputCounter, { current: Number(value === null || value === void 0 ? void 0 : value.length), limit: maxLength })))))));
-};
+};
+var _TextInput = forwardRef(TextInput);
 
 /** Comment */
 var InputCta = function (_a) {
@@ -12370,11 +12374,14 @@ var InputCta = function (_a) {
         ctaLabel && React__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 = useState(Boolean(isFocused)), isFocus = _d[0], setIsFocus = _d[1];
-    var _e = useState(defaultValue), value = _e[0], setValue = _e[1];
+    var _e = useState(defaultValue || ''), value = _e[0], setValue = _e[1];
     var inputRef = useRef(null);
+    useEffect(function () {
+        setValue(externalValue);
+    }, [externalValue]);
     // set force focus
     useEffect(function () {
         var input = inputRef.current;
@@ -12410,13 +12417,14 @@ var TextInputAddon = function (_a) {
             React__default.createElement("div", { className: "flex-grow focus-within:z-20 relative" },
                 inlineIcon && (React__default.createElement("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" },
                     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: inputRef, type: type, name: name, id: id, inputStyles: inputStyles, isDisabled: isDisabled, 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, inputStyles: inputStyles, 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)),
             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 }))))));
-};
+};
+var _TextInputAddon = forwardRef(TextInputAddon);
 
 /** Comment */
 var InputSelect = function (_a) {
@@ -12434,10 +12442,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 = useState(Boolean(isFocused)), isFocus = _d[0], setIsFocus = _d[1];
-    var _e = useState(defaultValue), value = _e[0], setValue = _e[1];
+    var _e = useState(defaultValue || ''), value = _e[0], setValue = _e[1];
     var inputRef = useRef(null);
+    useEffect(function () {
+        setValue(externalValue);
+    }, [externalValue]);
     // set force focus
     useEffect(function () {
         var input = inputRef.current;
@@ -12478,7 +12489,7 @@ var TextInputSelect = function (_a) {
             React__default.createElement("div", { className: "flex-grow focus-within:z-20 relative" },
                 prefix && (React__default.createElement("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" },
                     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, inputStyles: inputStyles, isDisabled: isDisabled, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder })),
+                React__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.createElement(InputSelect, { inputOptions: inputOptions, align: 'right', onSelectOption: onSelectOption }))),
         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)),
@@ -12577,5 +12588,5 @@ var Checkbox = function (_a) {
             message && (React__default.createElement("p", { id: "".concat(id, "-description"), className: "text-gray-500" }, message)))));
 };
 
-export { Avatar, Button, Checkbox, Combobox, Dropdown, Placeholder, Radio, Select, Switch, TextInput, TextInputAddon, TextInputSelect, _Textarea as Textarea, _TreeView as TreeView };
+export { Avatar, Button, Checkbox, Combobox, Dropdown, Placeholder, Radio, Select, Switch, _TextInput as TextInput, _TextInputAddon as TextInputAddon, TextInputSelect, _Textarea as Textarea, _TreeView as TreeView };
 //# sourceMappingURL=index.esm.js.map