@agility/plenum-ui 1.3.9 → 1.3.12

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 */
@@ -29,6 +29,7 @@ export interface TextInputProps {
     onChange?(value: string): void;
     /** input value */
     value?: string;
+    className?: string;
 }
 declare const _TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 export { _TextInput as TextInput };

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 */
@@ -24,6 +25,7 @@ export interface TextareaProps {
     onChange?(value: string): void;
     /** Number of rows */
     rows?: number;
+    placeholder?: string;
 }
 declare const _Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { _Textarea as Textarea };

package/lib/index.esm.js

@@ -7324,7 +7324,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.createElement("div", { className: "text-center" },
         React__default.createElement(ue, { checked: enabled, onChange: setEnabled, className: switchStyles },
             React__default.createElement("span", { className: "sr-only" }, "Use setting"),
@@ -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 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 = 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;
@@ -12460,16 +12471,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.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,
-            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 }),
+            React__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.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 })))))));
 };
@@ -12504,17 +12521,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 +12551,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 +12562,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.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 +12609,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]);
@@ -12623,7 +12659,7 @@ var TextInputSelect = function (_a) {
             React__default.createElement("div", { className: "relative flex-grow focus-within:z-20" },
                 prefix && (React__default.createElement("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3" },
                     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, 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.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.createElement(InputSelect, { inputOptions: inputOptions, align: "right", onSelectOption: onSelectOption, isDisabled: isDisabled, className: cn(isError ? "border-red-500" : "") }))),
@@ -12636,6 +12672,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,22 +12704,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 = 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 = 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.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, placeholder: placeholder })),
         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 +12731,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);