@agility/plenum-ui 1.1.2 → 1.1.5

package/lib/index.js

@@ -7115,9 +7115,9 @@ function classNames() {
     }
     return classes.filter(Boolean).join(' ');
 }
-/** Comment */
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 var Combobox = function (_a) {
-    var label = _a.label, items = _a.items, onChange = _a.onChange, placeholder = _a.placeholder, isDisabled = _a.isDisabled, isError = _a.isError, isRequired = _a.isRequired, id = _a.id;
+    var label = _a.label, items = _a.items, displayProperty = _a.displayProperty, keyProperty = _a.keyProperty, onChange = _a.onChange, placeholder = _a.placeholder, isDisabled = _a.isDisabled, isError = _a.isError, isRequired = _a.isRequired, id = _a.id;
     var _b = React.useState(''), query = _b[0], setQuery = _b[1];
     var _c = React.useState(), selectedItem = _c[0], setSelectedItem = _c[1];
     React.useEffect(function () {
@@ -7126,7 +7126,7 @@ var Combobox = function (_a) {
     var filteredItems = query === ''
         ? items
         : items.filter(function (item) {
-            return item.value.toLowerCase().includes(query.toLowerCase());
+            return "".concat(item[displayProperty]).toLowerCase().includes(query.toLowerCase());
         });
     var inputStyles = cn$1('w-full rounded-md border bg-white py-2 pl-3 pr-10 shadow-sm sm:text-sm', 'focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500', { 'border-red-500': isError }, { 'border-gray-300': !isError });
     var labelStyles = cn$1('block text-sm font-medium text-gray-700');
@@ -7136,16 +7136,16 @@ var Combobox = function (_a) {
         label && (React__default["default"].createElement(Na.Label, { className: labelStyles },
             React__default["default"].createElement(InputLabel, { isPlaceholder: true, isActive: true, label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled }))),
         React__default["default"].createElement("div", { className: "relative" },
-            React__default["default"].createElement(Na.Input, { className: inputStyles, onChange: function (event) { return setQuery(event.target.value); }, displayValue: function (item) { return item.value; }, placeholder: placeholder }),
+            React__default["default"].createElement(Na.Input, { className: inputStyles, onChange: function (event) { return setQuery(event.target.value); }, displayValue: function (item) { return "".concat(item[displayProperty]); }, placeholder: placeholder }),
             React__default["default"].createElement(Na.Button, { className: buttonStyles },
                 React__default["default"].createElement(DynamicIcons, { icon: "SelectorIcon", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" })),
-            filteredItems.length > 0 && (React__default["default"].createElement(Na.Options, { className: optionStyles }, filteredItems.map(function (item, index) { return (React__default["default"].createElement(Na.Option, { key: index, value: item, className: function (_a) {
+            filteredItems.length > 0 && (React__default["default"].createElement(Na.Options, { className: optionStyles }, filteredItems.map(function (item, index) { return (React__default["default"].createElement(Na.Option, { key: "".concat(item[keyProperty], "-").concat(index), value: item, className: function (_a) {
                     var active = _a.active;
                     return classNames('relative cursor-default select-none py-2 pl-3 pr-9', active ? 'bg-purple-600 text-white' : 'text-gray-900');
                 } }, function (_a) {
                 var active = _a.active, selected = _a.selected;
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement("span", { className: classNames('block truncate', selected ? 'font-semibold' : '') }, item.value),
+                    React__default["default"].createElement("span", { className: classNames('block truncate', selected ? 'font-semibold' : '') }, "".concat(item[displayProperty])),
                     selected && (React__default["default"].createElement("span", { className: classNames('absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-purple-600') },
                         React__default["default"].createElement(DynamicIcons, { icon: "CheckIcon", className: "h-5 w-5", "aria-hidden": "true" })))));
             })); }))))));
@@ -12459,22 +12459,24 @@ 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;
+    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 checboxStyles = cn$1('focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300', {
         'border-red-500 shadow-none': isError
     });
     var wrapperStyles = cn$1('relative flex items-start', { 'opacity-50': isDisabled });
     var handleChange = function (e) {
         var targetValue = e.currentTarget.value;
-        typeof onChange === 'function' && onChange(targetValue);
+        var targetChecked = e.currentTarget.checked;
+        typeof onChange === 'function' && onChange(targetValue, targetChecked);
     };
     var handleClick = function (e) {
         var targetValue = e.currentTarget.value;
-        typeof onClick === 'function' && onClick(targetValue);
+        var targetChecked = e.currentTarget.checked;
+        typeof onClick === 'function' && onClick(targetValue, targetChecked);
     };
     return (React__default["default"].createElement("div", { className: wrapperStyles },
         React__default["default"].createElement("div", { className: "flex items-center h-5" },
-            React__default["default"].createElement("input", { id: id, "aria-describedby": "".concat(id, "-description"), name: name, type: "radio", className: checboxStyles, disabled: isDisabled, defaultChecked: isChecked, onChange: function (e) {
+            React__default["default"].createElement("input", { id: id, "aria-describedby": "".concat(id, "-description"), name: name, type: "radio", value: value, className: checboxStyles, disabled: isDisabled, defaultChecked: isChecked, onChange: function (e) {
                     handleChange(e);
                 }, onClick: function (e) {
                     handleClick(e);
@@ -12527,16 +12529,17 @@ var Select = function (_a) {
 
 /** Comment */
 var Checkbox = function (_a) {
-    var label = _a.label, id = _a.id, isDisabled = _a.isDisabled, isChecked = _a.isChecked, isRequired = _a.isRequired, isError = _a.isError, message = _a.message, onChange = _a.onChange;
+    var label = _a.label, id = _a.id, isDisabled = _a.isDisabled, isChecked = _a.isChecked, isRequired = _a.isRequired, isError = _a.isError, message = _a.message, value = _a.value, onChange = _a.onChange;
     var checboxStyles = cn$1('focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300 rounded', { 'border-red-500 shadow-none': isError });
     var wrapperStyles = cn$1('relative flex items-start', { 'opacity-50': isDisabled });
     var handleChange = function (e) {
         var targetValue = e.currentTarget.value;
-        typeof onChange === 'function' && onChange(targetValue);
+        var targetChecked = e.currentTarget.checked;
+        typeof onChange === 'function' && onChange(targetValue, targetChecked);
     };
     return (React__default["default"].createElement("div", { className: wrapperStyles },
         React__default["default"].createElement("div", { className: "flex items-center h-5" },
-            React__default["default"].createElement("input", { id: id, "aria-describedby": "".concat(id, "-description"), name: id, type: "checkbox", className: checboxStyles, disabled: isDisabled, defaultChecked: isChecked, onChange: function (e) {
+            React__default["default"].createElement("input", { id: id, "aria-describedby": "".concat(id, "-description"), name: id, value: value, type: "checkbox", className: checboxStyles, disabled: isDisabled, defaultChecked: isChecked, onChange: function (e) {
                     handleChange(e);
                 } })),
         React__default["default"].createElement("div", { className: "ml-3 text-sm" },