@agility/plenum-ui 1.3.41 → 1.3.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Forms/TextInput/TextInput.d.ts +2 -0
- package/lib/index.esm.js +8 -17
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +8 -17
- package/lib/index.js.map +1 -1
- package/lib/tailwind.css +8 -3
- package/package.json +1 -1
package/lib/index.js
CHANGED
|
@@ -12477,11 +12477,10 @@ var useId = function () {
|
|
|
12477
12477
|
};
|
|
12478
12478
|
|
|
12479
12479
|
var TextInput = function (_a, ref) {
|
|
12480
|
-
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, maxLength = _a.maxLength, onChange = _a.onChange, externalValue = _a.value, className = _a.className;
|
|
12480
|
+
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, maxLength = _a.maxLength, onChange = _a.onChange, placeholder = _a.placeholder, externalValue = _a.value, className = _a.className;
|
|
12481
12481
|
var uniqueID = useId();
|
|
12482
12482
|
var _b = React.useState(Boolean(isFocused)), isFocus = _b[0], setIsFocus = _b[1];
|
|
12483
|
-
var _c = React.useState(
|
|
12484
|
-
var _d = React.useState(externalValue || defaultValue || ""), value = _d[0], setValue = _d[1];
|
|
12483
|
+
var _c = React.useState(externalValue || defaultValue || ""), value = _c[0], setValue = _c[1];
|
|
12485
12484
|
var inputRef = React.useRef(null);
|
|
12486
12485
|
React.useEffect(function () {
|
|
12487
12486
|
//if the external value is updated by the parent component, reset the value in here...
|
|
@@ -12496,7 +12495,6 @@ var TextInput = function (_a, ref) {
|
|
|
12496
12495
|
return;
|
|
12497
12496
|
if (isFocus) {
|
|
12498
12497
|
input.focus();
|
|
12499
|
-
setIsActive(true);
|
|
12500
12498
|
}
|
|
12501
12499
|
else {
|
|
12502
12500
|
input.blur();
|
|
@@ -12507,28 +12505,21 @@ var TextInput = function (_a, ref) {
|
|
|
12507
12505
|
var input = inputRef.current;
|
|
12508
12506
|
if (!input || defaultValue === undefined || defaultValue === "")
|
|
12509
12507
|
return;
|
|
12510
|
-
setIsActive(true);
|
|
12511
12508
|
}, [defaultValue]);
|
|
12512
|
-
var handleInputFocus = function () {
|
|
12513
|
-
|
|
12514
|
-
|
|
12515
|
-
};
|
|
12516
|
-
var handleInputBlur = function () {
|
|
12517
|
-
var input = inputRef.current;
|
|
12518
|
-
setIsFocus(false);
|
|
12519
|
-
setIsActive(!(input && input.value === ""));
|
|
12520
|
-
};
|
|
12509
|
+
var handleInputFocus = function () { return setIsFocus(true); };
|
|
12510
|
+
// add other focus effects here
|
|
12511
|
+
var handleInputBlur = function () { return setIsFocus(false); };
|
|
12521
12512
|
if (!id)
|
|
12522
12513
|
id = "input-".concat(uniqueID);
|
|
12523
12514
|
if (!name)
|
|
12524
12515
|
name = id;
|
|
12525
|
-
return (React__default["default"].createElement(
|
|
12516
|
+
return (React__default["default"].createElement("div", { className: "relative" },
|
|
12526
12517
|
React__default["default"].createElement(InputLabel, { isPlaceholder: true, label: label, isRequired: isRequired, id: id, isError: isError, isActive: true, isDisabled: isDisabled }),
|
|
12527
12518
|
React__default["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 }, {
|
|
12528
|
-
"border-purple-500 shadow-none outline-purple-500 focus
|
|
12519
|
+
"!border-purple-500 shadow-none outline-purple-500 focus:!ring-purple-500": isFocus && !isError
|
|
12529
12520
|
}, {
|
|
12530
12521
|
"!border-red-500 shadow-none focus:ring-red-500": isError
|
|
12531
|
-
}, className), isDisabled: isDisabled, isReadonly: isReadonly, value: value, defaultValue: defaultValue, maxLength: maxLength }),
|
|
12522
|
+
}, className), isDisabled: isDisabled, isReadonly: isReadonly, value: value, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder }),
|
|
12532
12523
|
React__default["default"].createElement("div", { className: "flex flex-row space-x-3" },
|
|
12533
12524
|
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))),
|
|
12534
12525
|
isShowCounter && (React__default["default"].createElement("div", { className: "shrink-0" },
|