@agility/plenum-ui 1.3.40 → 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 +17 -26
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +17 -26
- package/lib/index.js.map +1 -1
- package/lib/tailwind.css +8 -3
- package/package.json +1 -1
package/lib/index.js
CHANGED
|
@@ -12445,7 +12445,7 @@ var InputCounter = function (_a) {
|
|
|
12445
12445
|
var defaultStyles = "border py-2 px-3 rounded text-sm leading-5 font-normal w-full border-gray-300 shadow-sm";
|
|
12446
12446
|
/** Base input field component */
|
|
12447
12447
|
var BaseField = function (_a, ref) {
|
|
12448
|
-
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,
|
|
12448
|
+
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, maxLength = _a.maxLength, placeholder = _a.placeholder, _b = _a.className, className = _b === void 0 ? defaultStyles : _b, onChange = _a.onChange, onValueChange = _a.onValueChange;
|
|
12449
12449
|
var handleChange = function (e) {
|
|
12450
12450
|
var targetValue = e.currentTarget.value;
|
|
12451
12451
|
onChange && onChange(targetValue);
|
|
@@ -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" },
|
|
@@ -12565,9 +12556,9 @@ var InputCta = function (_a) {
|
|
|
12565
12556
|
};
|
|
12566
12557
|
|
|
12567
12558
|
var TextInputAddon = function (_a, ref) {
|
|
12568
|
-
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,
|
|
12569
|
-
var
|
|
12570
|
-
var
|
|
12559
|
+
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, maxLength = _a.maxLength, placeholder = _a.placeholder, leadIcon = _a.leadIcon, trailIcon = _a.trailIcon, inlineIcon = _a.inlineIcon, inlineTrailingIcon = _a.inlineTrailingIcon, trailLabel = _a.trailLabel, leadLabel = _a.leadLabel, _b = _a.clearCta, clearCta = _b === void 0 ? "none" : _b, onChange = _a.onChange, onCtaClick = _a.onCtaClick, externalValue = _a.value, className = _a.className;
|
|
12560
|
+
var _c = React.useState(Boolean(isFocused)), isFocus = _c[0], setIsFocus = _c[1];
|
|
12561
|
+
var _d = React.useState(defaultValue || ""), value = _d[0], setValue = _d[1];
|
|
12571
12562
|
var inputRef = React.useRef(null);
|
|
12572
12563
|
var uniqueID = useId();
|
|
12573
12564
|
if (!id)
|
|
@@ -12655,9 +12646,9 @@ var InputSelect = function (_a) {
|
|
|
12655
12646
|
};
|
|
12656
12647
|
|
|
12657
12648
|
var TextInputSelect = function (_a) {
|
|
12658
|
-
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,
|
|
12659
|
-
var
|
|
12660
|
-
var
|
|
12649
|
+
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, maxLength = _a.maxLength, placeholder = _a.placeholder, inputOptions = _a.inputOptions, _b = _a.selectLocation, selectLocation = _b === void 0 ? "right" : _b, prefix = _a.prefix, onChange = _a.onChange, onSelectOption = _a.onSelectOption, externalValue = _a.value;
|
|
12650
|
+
var _c = React.useState(Boolean(isFocused)), isFocus = _c[0], setIsFocus = _c[1];
|
|
12651
|
+
var _d = React.useState(defaultValue || ""), value = _d[0], setValue = _d[1];
|
|
12661
12652
|
var inputRef = React.useRef(null);
|
|
12662
12653
|
var uniqueID = useId();
|
|
12663
12654
|
if (!id)
|
|
@@ -12754,9 +12745,9 @@ var Radio = function (_a) {
|
|
|
12754
12745
|
};
|
|
12755
12746
|
|
|
12756
12747
|
var Textarea = function (_a, ref) {
|
|
12757
|
-
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,
|
|
12748
|
+
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, maxLength = _a.maxLength, _b = _a.rows, rows = _b === void 0 ? 4 : _b, onChange = _a.onChange, externalValue = _a.value, placeholder = _a.placeholder, className = _a.className;
|
|
12758
12749
|
var uniqueID = useId();
|
|
12759
|
-
var
|
|
12750
|
+
var _c = React.useState(externalValue || defaultValue || ""), value = _c[0], setValue = _c[1];
|
|
12760
12751
|
var handleOnchange = function (e) {
|
|
12761
12752
|
var targetValue = e.currentTarget.value;
|
|
12762
12753
|
typeof onChange === "function" && onChange(targetValue);
|