@agility/plenum-ui 1.3.9 → 1.3.12

package/lib/index.js

@@ -7350,7 +7350,7 @@ var Switch = function (_a) {
     }, [enabled]);
     var switchStyles = cn("relative inline-flex flex-shrink-0", "border-2 border-transparent rounded-full cursor-pointer", "transition-colors ease-in-out duration-200 focus:outline-none", "focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75", { "bg-purple-600": enabled }, { "bg-gray-200": !enabled }, { "h-[38px] w-[74px]": size === "lg" }, { "h-[28px] w-[64px]": size === "md" }, { "h-[18px] w-[34px]": size === "sm" });
     // the circular button inside the switch
-    var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", "shadow-lg transform ring-0 transition ease-in-out duration-200", { "translate-x-9": enabled }, { "translate-x-0": !enabled }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && enabled }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !enabled });
+    var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", " transform ring-0 transition ease-in-out duration-200", { "translate-x-9": enabled }, { "translate-x-0": !enabled }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && enabled }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !enabled });
     return (React__default["default"].createElement("div", { className: "text-center" },
         React__default["default"].createElement(ue, { checked: enabled, onChange: setEnabled, className: switchStyles },
             React__default["default"].createElement("span", { className: "sr-only" }, "Use setting"),
@@ -12448,15 +12448,26 @@ var BaseField = function (_a, ref) {
 };
 var _BaseField = React.forwardRef(BaseField);
 
+var id = 0;
+function generateId() {
+    return ++id;
+}
+var useId = function () {
+    var _a = React.useState(generateId), id = _a[0], setId = _a[1];
+    React.useLayoutEffect(function () {
+        if (id === null)
+            setId(generateId());
+    }, [id]);
+    return id != null ? '' + id : undefined;
+};
+
 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 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 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];
-    var _e = React.useState(defaultValue || ""), value = _e[0], setValue = _e[1];
+    var _e = React.useState(externalValue || 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;
@@ -12486,16 +12497,22 @@ var TextInput = function (_a, ref) {
         setIsFocus(false);
         setIsActive(!(input && input.value === ""));
     };
-    var className = cn("border py-2 px-3 rounded 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("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
+    if (!id)
+        id = "input-".concat(uniqueID);
+    if (!name)
+        name = id;
+    console.log();
     return (React__default["default"].createElement("div", null,
         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: ref, type: type, name: name, id: id, className: className, isDisabled: isDisabled, value: value, 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, className: cn("w-full rounded border py-2 px-3 text-sm font-normal leading-5", { "border-gray-300": !isFocus && !isError }, {
+                    "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 }),
             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)),
+                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 })))))));
 };
@@ -12530,17 +12547,25 @@ var InputCta = function (_a) {
 };
 
 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 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);
+    var uniqueID = useId();
+    if (!id)
+        id = "input-".concat(uniqueID);
+    if (!name)
+        name = id;
     React.useEffect(function () {
         setValue(externalValue);
     }, [externalValue]);
     // set force focus
     React.useEffect(function () {
         var input = inputRef.current;
-        if (!input || isFocus === undefined || isFocused === undefined || isDisabled)
+        if (!input ||
+            isFocus === undefined ||
+            isFocused === undefined ||
+            isDisabled)
             return;
         if (isFocus || isFocused) {
             input.focus();
@@ -12552,7 +12577,7 @@ var TextInputAddon = function (_a, ref) {
     // set label as active if default value is set
     React.useEffect(function () {
         var input = inputRef.current;
-        if (!input || defaultValue === undefined || defaultValue === '')
+        if (!input || defaultValue === undefined || defaultValue === "")
             return;
     }, [defaultValue]);
     var handleInputFocus = function () {
@@ -12563,19 +12588,25 @@ var TextInputAddon = function (_a, ref) {
         setIsFocus(false);
         // add other focus effects here
     };
-    var className = cn('border py-2 px-3 rounded text-sm leading-5 font-normal w-full border-gray-300 outline-purple-500 shadow-sm focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500 ', { 'focus:ring-red-500 !border-red-500 !outline-red-500 shadow-none': isError }, { 'pl-10': inlineIcon }, { '!rounded-r-none !rounded-l': (trailIcon || trailLabel) && !(leadIcon || leadLabel) }, { '!rounded-r-none !rounded-r': !(trailIcon || trailLabel) && (leadIcon || leadLabel) }, { 'rounded-none': (trailIcon || trailLabel) && (leadIcon || leadLabel) });
-    var discriptionStyles = cn('text-sm mt-1 block', { 'text-gray-500': !isError }, { 'text-red-500': isError });
+    var className = cn("border py-2 px-3 rounded text-sm leading-5 font-normal w-full border-gray-300 outline-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500 ", {
+        "focus:ring-red-500 !border-red-500 !outline-red-500 shadow-none": isError
+    }, { "pl-10": inlineIcon }, {
+        "!rounded-r-none !rounded-l": (trailIcon || trailLabel) && !(leadIcon || leadLabel)
+    }, {
+        "!rounded-r-none !rounded-r": !(trailIcon || trailLabel) && (leadIcon || leadLabel)
+    }, { "rounded-none": (trailIcon || trailLabel) && (leadIcon || leadLabel) });
+    var discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
     return (React__default["default"].createElement("div", null,
         label && (React__default["default"].createElement(InputLabel, { label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled })),
         React__default["default"].createElement("div", { className: "flex" },
-            (leadIcon || leadLabel) && (React__default["default"].createElement(InputCta, { icon: leadIcon, ctaLabel: leadLabel, align: "left", isClear: clearCta === 'left' || clearCta === 'both' })),
-            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" },
+            (leadIcon || leadLabel) && (React__default["default"].createElement(InputCta, { icon: leadIcon, ctaLabel: leadLabel, align: "left", isClear: clearCta === "left" || clearCta === "both" })),
+            React__default["default"].createElement("div", { className: "relative flex-grow focus-within:z-20" },
+                inlineIcon && (React__default["default"].createElement("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3" },
                     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: ref, type: type, name: name, id: id, className: className, 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 }))),
+            (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)),
+            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 }))))));
 };
@@ -12604,6 +12635,11 @@ var TextInputSelect = function (_a) {
     var _d = React.useState(Boolean(isFocused)), isFocus = _d[0], setIsFocus = _d[1];
     var _e = React.useState(defaultValue || ""), value = _e[0], setValue = _e[1];
     var inputRef = React.useRef(null);
+    var uniqueID = useId();
+    if (!id)
+        id = "select-".concat(uniqueID);
+    if (!name)
+        name = id;
     React.useEffect(function () {
         setValue(externalValue);
     }, [externalValue]);
@@ -12649,7 +12685,7 @@ var TextInputSelect = function (_a) {
             React__default["default"].createElement("div", { className: "relative flex-grow focus-within:z-20" },
                 prefix && (React__default["default"].createElement("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3" },
                     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, className: cn("w-full border border-gray-300 py-2 px-3 text-sm font-normal leading-5 shadow-sm", "focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm", selectLocation === "right"
+                React__default["default"].createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: inputRef, type: type, name: name, id: id, className: cn("w-full border border-gray-300 py-2 px-3 text-sm font-normal leading-5", "focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm", selectLocation === "right"
                         ? "rounded-l"
                         : "rounded-r", isError ? "border-red-500" : "", prefix ? "pl-7" : ""), 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, isDisabled: isDisabled, className: cn(isError ? "border-red-500" : "") }))),
@@ -12662,6 +12698,11 @@ var TextInputSelect = function (_a) {
 /** Comment */
 var Radio = function (_a) {
     var label = _a.label, id = _a.id, name = _a.name, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = _a.isChecked, isChecked = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, _e = _a.isError, isError = _e === void 0 ? false : _e, message = _a.message, onChange = _a.onChange, onClick = _a.onClick, value = _a.value;
+    var uniqueID = useId();
+    if (!id)
+        id = "input-".concat(uniqueID);
+    if (!name)
+        name = id;
     var checboxStyles = cn('focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300', {
         'border-red-500 shadow-none': isError
     });
@@ -12689,22 +12730,24 @@ var Radio = function (_a) {
 };
 
 var Textarea = function (_a, ref) {
-    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, _b = _a.maxLength, maxLength = _b === void 0 ? 500 : _b, _c = _a.rows, rows = _c === void 0 ? 4 : _c, onChange = _a.onChange;
-    var _d = React.useState(defaultValue), value = _d[0], setValue = _d[1];
+    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, _b = _a.maxLength, maxLength = _b === void 0 ? 500 : _b, _c = _a.rows, rows = _c === void 0 ? 4 : _c, onChange = _a.onChange, externalValue = _a.value, placeholder = _a.placeholder;
+    var uniqueID = useId();
+    var _d = React.useState(externalValue || defaultValue || ""), value = _d[0], setValue = _d[1];
     var handleOnchange = function (e) {
         var targetValue = e.currentTarget.value;
         typeof onChange === "function" && onChange(targetValue);
         setValue(targetValue);
     };
-    var className = cn("shadow-sm focus:ring-purple-500 focus:border-purple-500 block w-full sm:text-sm rounded", { "border-gray-300 ": !isError }, { "focus:ring-red-500 border-red-500 outline-red-500 shadow-none": isError });
+    var className = cn("focus:ring-purple-500 focus:border-purple-500 block w-full sm:text-sm rounded", { "border-gray-300 ": !isError }, { "focus:ring-red-500 border-red-500 outline-red-500": isError });
     var discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
-    var wrapperStyles = cn({ "opacity-50": isDisabled });
-    return (React__default["default"].createElement("div", { className: wrapperStyles },
+    if (!id)
+        id = "ta-".concat(uniqueID);
+    return (React__default["default"].createElement("div", { className: cn({ "opacity-50": isDisabled }) },
         label && (React__default["default"].createElement(InputLabel, { isPlaceholder: true, isActive: true, label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled })),
         React__default["default"].createElement("div", null,
-            React__default["default"].createElement("textarea", { ref: ref, maxLength: maxLength, onChange: handleOnchange, rows: rows, name: name, id: id, className: className, defaultValue: defaultValue })),
+            React__default["default"].createElement("textarea", { ref: ref, maxLength: maxLength, onChange: handleOnchange, rows: rows, name: name, id: id, className: className, defaultValue: defaultValue, value: value, placeholder: placeholder })),
         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)),
+            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 }))))));
 };
@@ -12714,6 +12757,11 @@ var _Textarea = React.forwardRef(Textarea);
 var Select = function (_a) {
     var label = _a.label, id = _a.id, name = _a.name, options = _a.options, onChange = _a.onChange, isDisabled = _a.isDisabled, isError = _a.isError, isRequired = _a.isRequired;
     var _b = React.useState(options[0].value), selectedOption = _b[0], setSelectedOption = _b[1];
+    var uniqueID = useId();
+    if (!id)
+        id = "select-".concat(uniqueID);
+    if (!name)
+        name = id;
     var handleChange = function (e) {
         var targetValue = e.target.value;
         typeof onChange == "function" && onChange(targetValue);