@agility/plenum-ui 1.3.9 → 1.3.10

package/lib/components/Forms/Radio/Radio.d.ts

@@ -1,11 +1,11 @@
 import { FC } from 'react';
 export interface RadioProps {
     /** group name */
-    name: string;
+    name?: string;
     /** Radio label */
     label: string;
     /** Radio ID */
-    id: string;
+    id?: string;
     /** Disabled state */
     isDisabled?: boolean;
     /** Check state */

package/lib/components/Forms/Select/Select.d.ts

@@ -7,9 +7,9 @@ export interface SimpleSelectProps {
     /** Label */
     label?: string;
     /** Select ID prop */
-    id: string;
+    id?: string;
     /** Select name prop */
-    name: string;
+    name?: string;
     /** List of options to display in the select menu */
     options: SimpleSelectOptions[];
     /** Select name prop */

package/lib/components/Forms/TextInput/TextInput.d.ts

@@ -4,9 +4,9 @@ export interface TextInputProps {
     /** Input type*/
     type: Type;
     /** Input ID */
-    id: string;
+    id?: string;
     /** Input Name */
-    name: string;
+    name?: string;
     /** Label for the input */
     label: string;
     /** Force the focus state on the input */

package/lib/components/Forms/TextInputAddon/TextInputAddon.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-import { IconName } from '../../../util/DynamicIcons';
-export declare type Type = 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' | 'currency';
+import React from "react";
+import { IconName } from "../../../util/DynamicIcons";
+export declare type Type = "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "month" | "time" | "week" | "currency";
 export interface TextInputAddonProps {
     /** Input type*/
     type: Type;
     /** Input ID */
-    id: string;
+    id?: string;
     /** Input Name */
-    name: string;
+    name?: string;
     /** Label for the input */
     label?: string;
     /** placeholder for the input */
@@ -41,7 +41,7 @@ export interface TextInputAddonProps {
     /** Leading label for input CTA  */
     leadLabel?: string;
     /** Remove bg and border from CTA  */
-    clearCta?: 'left' | 'right' | 'both' | 'none';
+    clearCta?: "left" | "right" | "both" | "none";
     /** Callback on change */
     onChange?(value: string): void;
     /** Callback on Cta click */

package/lib/components/Forms/TextInputSelect/TextInputSelect.d.ts

@@ -8,9 +8,9 @@ export interface TextInputSelectProps {
     /** Input type*/
     type: Type;
     /** Input ID */
-    id: string;
+    id?: string;
     /** Input Name */
-    name: string;
+    name?: string;
     /** Label for the input */
     label?: string;
     /** placeholder for the input */

package/lib/components/Forms/Textarea/Textarea.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 export interface TextareaProps {
     /** Input ID */
-    id: string;
+    id?: string;
     /** Input Name */
-    name: string;
+    name?: string;
     /** Label for the input */
-    label: string;
+    label?: string;
     /** Error state */
     isError?: boolean;
     /** If field is required */
@@ -14,6 +14,7 @@ export interface TextareaProps {
     isDisabled?: boolean;
     /** Set default value */
     defaultValue?: string;
+    value?: string;
     /** Message shown under the text field */
     message?: string;
     /** Input character counter */

package/lib/index.esm.js

@@ -12422,15 +12422,26 @@ var BaseField = function (_a, ref) {
 };
 var _BaseField = forwardRef(BaseField);
 
+var id = 0;
+function generateId() {
+    return ++id;
+}
+var useId = function () {
+    var _a = useState(generateId), id = _a[0], setId = _a[1];
+    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 uniqueID = useId();
     var _c = useState(Boolean(isFocused)), isFocus = _c[0], setIsFocus = _c[1];
     var _d = useState(false); _d[0]; var setIsActive = _d[1];
-    var _e = useState(defaultValue || ""), value = _e[0], setValue = _e[1];
+    var _e = useState(externalValue || 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;
@@ -12464,6 +12475,11 @@ var TextInput = function (_a, ref) {
         "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.createElement("div", null,
         React__default.createElement(InputLabel, { isPlaceholder: true, label: label, isRequired: isRequired, id: id, isError: isError, isActive: true, isDisabled: isDisabled }),
         React__default.createElement("div", null,
@@ -12504,17 +12520,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 = 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);
+    var uniqueID = useId();
+    if (!id)
+        id = "input-".concat(uniqueID);
+    if (!name)
+        name = id;
     useEffect(function () {
         setValue(externalValue);
     }, [externalValue]);
     // set force focus
     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();
@@ -12526,7 +12550,7 @@ var TextInputAddon = function (_a, ref) {
     // set label as active if default value is set
     useEffect(function () {
         var input = inputRef.current;
-        if (!input || defaultValue === undefined || defaultValue === '')
+        if (!input || defaultValue === undefined || defaultValue === "")
             return;
     }, [defaultValue]);
     var handleInputFocus = function () {
@@ -12537,19 +12561,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 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 });
     return (React__default.createElement("div", null,
         label && (React__default.createElement(InputLabel, { label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled })),
         React__default.createElement("div", { className: "flex" },
-            (leadIcon || leadLabel) && (React__default.createElement(InputCta, { icon: leadIcon, ctaLabel: leadLabel, align: "left", isClear: clearCta === 'left' || clearCta === 'both' })),
-            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" },
+            (leadIcon || leadLabel) && (React__default.createElement(InputCta, { icon: leadIcon, ctaLabel: leadLabel, align: "left", isClear: clearCta === "left" || clearCta === "both" })),
+            React__default.createElement("div", { className: "relative flex-grow focus-within:z-20" },
+                inlineIcon && (React__default.createElement("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3" },
                     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: ref, type: type, name: name, id: id, className: className, 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 }))),
+            (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)),
+            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 }))))));
 };
@@ -12578,6 +12608,11 @@ var TextInputSelect = function (_a) {
     var _d = useState(Boolean(isFocused)), isFocus = _d[0], setIsFocus = _d[1];
     var _e = useState(defaultValue || ""), value = _e[0], setValue = _e[1];
     var inputRef = useRef(null);
+    var uniqueID = useId();
+    if (!id)
+        id = "select-".concat(uniqueID);
+    if (!name)
+        name = id;
     useEffect(function () {
         setValue(externalValue);
     }, [externalValue]);
@@ -12636,6 +12671,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
     });
@@ -12663,8 +12703,9 @@ 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 = 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;
+    var uniqueID = useId();
+    var _d = useState(externalValue || defaultValue || ""), value = _d[0], setValue = _d[1];
     var handleOnchange = function (e) {
         var targetValue = e.currentTarget.value;
         typeof onChange === "function" && onChange(targetValue);
@@ -12672,13 +12713,14 @@ var Textarea = function (_a, ref) {
     };
     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 discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
-    var wrapperStyles = cn({ "opacity-50": isDisabled });
-    return (React__default.createElement("div", { className: wrapperStyles },
+    if (!id)
+        id = "ta-".concat(uniqueID);
+    return (React__default.createElement("div", { className: cn({ "opacity-50": isDisabled }) },
         label && (React__default.createElement(InputLabel, { isPlaceholder: true, isActive: true, label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled })),
         React__default.createElement("div", null,
-            React__default.createElement("textarea", { ref: ref, maxLength: maxLength, onChange: handleOnchange, rows: rows, name: name, id: id, className: className, defaultValue: defaultValue })),
+            React__default.createElement("textarea", { ref: ref, maxLength: maxLength, onChange: handleOnchange, rows: rows, name: name, id: id, className: className, defaultValue: defaultValue, value: value })),
         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)),
+            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 }))))));
 };
@@ -12688,6 +12730,11 @@ var _Textarea = 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 = 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);