@agility/plenum-ui 1.1.6 → 1.1.71

package/lib/index.esm.js

@@ -12201,6 +12201,61 @@ var TreeView = function (_a, ref) {
 };
 var _TreeView = forwardRef(TreeView);
 
+/**
+ * Avatar component that shows profile image or name initials of the user
+ */
+var Avatar = function (_a) {
+    var src = _a.src, status = _a.status, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.alt, alt = _c === void 0 ? 'Avatar image' : _c, initials = _a.initials;
+    var imageStyles = cn$1('rounded-full', {
+        'h-6 w-6': size === 'xxs',
+        'h-8 w-8': size === 'xs',
+        'h-10 w-10': size === 'sm',
+        'h-12 w-12': size === 'md',
+        'h-14 w-14': size === 'lg',
+        'h-16 w-16': size === 'xl'
+    });
+    var initialsStyles = cn$1('inline-flex items-center justify-center rounded-full bg-gray-500', {
+        'h-6 w-6': size === 'xxs',
+        'h-8 w-8': size === 'xs',
+        'h-10 w-10': size === 'sm',
+        'h-12 w-12': size === 'md',
+        'h-14 w-14': size === 'lg',
+        'h-16 w-16': size === 'xl'
+    });
+    var fontStyles = cn$1('font-medium leading-none text-white uppercase', {
+        'text-xs': size === 'xxs' || size === 'xs',
+        'text-sm': size === 'sm',
+        'text-base': size === 'md',
+        'text-lg': size === 'lg',
+        'text-xl': size === 'xl'
+    });
+    var defaultAvatarStyles = cn$1('inline-block rounded-full overflow-hidden bg-gray-100', {
+        'h-6 w-6': size === 'xxs',
+        'h-8 w-8': size === 'xs',
+        'h-10 w-10': size === 'sm',
+        'h-12 w-12': size === 'md',
+        'h-14 w-14': size === 'lg',
+        'h-16 w-16': size === 'xl'
+    });
+    var statusStyles = cn$1('absolute top-0 right-0 block rounded-full ring-2 ring-white', {
+        'h-1.5 w-1.5': size === 'xxs',
+        'h-2 w-2': size === 'xs',
+        'h-2.5 w-2.5': size === 'sm',
+        'h-3 w-3': size === 'md',
+        'h-3.5 w-3.5': size === 'lg',
+        'h-4 w-4': size === 'xl',
+        'bg-gray-300': status === 'offline',
+        'bg-red-400': status === 'busy',
+        'bg-green-400': status === 'online'
+    });
+    return (React__default.createElement("span", { className: "inline-block relative" },
+        src ? (React__default.createElement("img", { className: imageStyles, src: src, alt: alt })) : initials ? (React__default.createElement("span", { className: initialsStyles },
+            React__default.createElement("span", { className: fontStyles }, initials))) : (React__default.createElement("span", { className: defaultAvatarStyles },
+            React__default.createElement("svg", { className: "h-full w-full text-gray-300", fill: "currentColor", viewBox: "0 0 24 24" },
+                React__default.createElement("path", { d: "M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" })))),
+        status && React__default.createElement("span", { className: statusStyles })));
+};
+
 /** Primary UI component for user interaction */
 var InputCounter = function (_a) {
     var _b = _a.current, current = _b === void 0 ? 0 : _b, limit = _a.limit;
@@ -12218,7 +12273,7 @@ var InputCounter = function (_a) {
 var defaultStyles = 'border py-2 px-3 rounded-md text-sm leading-5 font-normal w-full border-gray-300 shadow-sm';
 /** Base input field component */
 var BaseField = function (_a, ref) {
-    var onFocus = _a.onFocus, onBlur = _a.onBlur, id = _a.id, name = _a.name, type = _a.type, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, placeholder = _a.placeholder, _c = _a.inputStyles, inputStyles = _c === void 0 ? defaultStyles : _c, onChange = _a.onChange, onValueChange = _a.onValueChange;
+    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, _b = _a.maxLength, maxLength = _b === void 0 ? 100 : _b, placeholder = _a.placeholder, _c = _a.inputStyles, inputStyles = _c === void 0 ? defaultStyles : _c, onChange = _a.onChange, onValueChange = _a.onValueChange;
     var handleChange = function (e) {
         var targetValue = e.currentTarget.value;
         onChange && onChange(targetValue);
@@ -12236,16 +12291,19 @@ var BaseField = function (_a, ref) {
     });
     return (React__default.createElement("input", { onFocus: handleFocus, onBlur: handleBlur, onChange: function (e) {
             handleChange(e);
-        }, placeholder: placeholder, ref: ref, type: type, name: name, id: id, className: scopedtyles, disabled: isDisabled, defaultValue: defaultValue, maxLength: maxLength, autoComplete: "off" }));
+        }, placeholder: placeholder, ref: ref, type: type, name: name, id: id, className: scopedtyles, disabled: isDisabled, value: value, defaultValue: defaultValue, maxLength: maxLength, autoComplete: "off" }));
 };
 var _BaseField = forwardRef(BaseField);
 
-var TextInput = function (_a) {
-    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;
+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 _c = useState(Boolean(isFocused)), isFocus = _c[0], setIsFocus = _c[1];
-    var _d = useState(false), isActive = _d[0], setIsActive = _d[1];
-    var _e = useState(defaultValue), value = _e[0], setValue = _e[1];
+    var _d = useState(false); _d[0]; var setIsActive = _d[1];
+    var _e = useState(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;
@@ -12278,14 +12336,15 @@ var TextInput = function (_a) {
     var inputStyles = cn$1('border py-2 px-3 rounded-md 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$1('text-sm mt-1 block', { 'text-gray-500': !isError }, { 'text-red-500': isError });
     return (React__default.createElement("div", null,
-        React__default.createElement(InputLabel, { isPlaceholder: true, label: label, isRequired: isRequired, id: id, isError: isError, isActive: isActive, isDisabled: isDisabled }),
+        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: inputRef, type: type, name: name, id: id, inputStyles: inputStyles, isDisabled: isDisabled, defaultValue: defaultValue, maxLength: maxLength }),
+            React__default.createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: ref, type: type, name: name, id: id, inputStyles: inputStyles, 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)),
                 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 })))))));
-};
+};
+var _TextInput = forwardRef(TextInput);
 
 /** Comment */
 var InputCta = function (_a) {
@@ -12315,11 +12374,14 @@ var InputCta = function (_a) {
         ctaLabel && React__default.createElement("span", null, ctaLabel)));
 };
 
-var TextInputAddon = function (_a) {
-    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;
+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 _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);
+    useEffect(function () {
+        setValue(externalValue);
+    }, [externalValue]);
     // set force focus
     useEffect(function () {
         var input = inputRef.current;
@@ -12355,13 +12417,14 @@ var TextInputAddon = function (_a) {
             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" },
                     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: inputRef, type: type, name: name, id: id, inputStyles: inputStyles, isDisabled: isDisabled, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder })),
+                React__default.createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: ref, type: type, name: name, id: id, inputStyles: inputStyles, 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 }))),
         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)),
             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 }))))));
-};
+};
+var _TextInputAddon = forwardRef(TextInputAddon);
 
 /** Comment */
 var InputSelect = function (_a) {
@@ -12379,10 +12442,13 @@ var InputSelect = function (_a) {
 };
 
 var TextInputSelect = function (_a) {
-    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, inputOptions = _a.inputOptions, _c = _a.selectLocation, selectLocation = _c === void 0 ? 'right' : _c, prefix = _a.prefix, onChange = _a.onChange, onSelectOption = _a.onSelectOption;
+    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, inputOptions = _a.inputOptions, _c = _a.selectLocation, selectLocation = _c === void 0 ? 'right' : _c, prefix = _a.prefix, onChange = _a.onChange, onSelectOption = _a.onSelectOption, 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);
+    useEffect(function () {
+        setValue(externalValue);
+    }, [externalValue]);
     // set force focus
     useEffect(function () {
         var input = inputRef.current;
@@ -12423,7 +12489,7 @@ var TextInputSelect = function (_a) {
             React__default.createElement("div", { className: "flex-grow focus-within:z-20 relative" },
                 prefix && (React__default.createElement("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" },
                     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, inputStyles: inputStyles, isDisabled: isDisabled, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder })),
+                React__default.createElement(_BaseField, { onFocus: handleInputFocus, onBlur: handleInputBlur, onChange: onChange, onValueChange: setValue, ref: inputRef, type: type, name: name, id: id, inputStyles: inputStyles, 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 }))),
         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)),
@@ -12522,5 +12588,5 @@ var Checkbox = function (_a) {
             message && (React__default.createElement("p", { id: "".concat(id, "-description"), className: "text-gray-500" }, message)))));
 };
 
-export { Button, Checkbox, Combobox, Dropdown, Placeholder, Radio, Select, Switch, TextInput, TextInputAddon, TextInputSelect, _Textarea as Textarea, _TreeView as TreeView };
+export { Avatar, Button, Checkbox, Combobox, Dropdown, Placeholder, Radio, Select, Switch, _TextInput as TextInput, _TextInputAddon as TextInputAddon, TextInputSelect, _Textarea as Textarea, _TreeView as TreeView };
 //# sourceMappingURL=index.esm.js.map