@agility/plenum-ui 1.1.2 → 1.1.5

package/lib/components/Combobox/Combobox.d.ts

@@ -1,18 +1,19 @@
-import { FC } from 'react';
-export declare type ComboboxItemProps = {
-    value: string;
-};
-export interface ComboboxProps {
+/// <reference types="react" />
+export interface ComboboxProps<T extends Record<string, unknown>> {
     /** Label */
     label?: string;
     /** ID */
     id: string;
     /** Array of items to display */
-    items: ComboboxItemProps[];
+    items: T[];
+    /** the item property to use as the key */
+    keyProperty: string;
+    /** the item property to use as the display */
+    displayProperty: string;
     /** Placeholder */
     placeholder?: string;
     /** Callback to trigger on change */
-    onChange?(value: string): void;
+    onChange?(value: T): void;
     /** Select disabled state */
     isDisabled?: boolean;
     /** Select error state */
@@ -20,5 +21,4 @@ export interface ComboboxProps {
     /** Select required state */
     isRequired?: boolean;
 }
-/** Comment */
-export declare const Combobox: FC<ComboboxProps>;
+export declare const Combobox: <T extends Record<string, unknown>>({ label, items, displayProperty, keyProperty, onChange, placeholder, isDisabled, isError, isRequired, id }: ComboboxProps<T>) => JSX.Element;

package/lib/components/Combobox/Combobox.stories.d.ts

@@ -3,9 +3,12 @@ import { Story } from '@storybook/react';
 import { ComboboxProps } from './Combobox';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const AllVariations: Story<ComboboxProps>;
-export declare const Default: Story<ComboboxProps>;
-export declare const Label: Story<ComboboxProps>;
-export declare const Disabled: Story<ComboboxProps>;
-export declare const Required: Story<ComboboxProps>;
-export declare const Error: Story<ComboboxProps>;
+interface ComboItem {
+    [value: string]: string;
+}
+export declare const AllVariations: Story<ComboboxProps<ComboItem>>;
+export declare const Default: Story<ComboboxProps<ComboItem>>;
+export declare const Label: Story<ComboboxProps<ComboItem>>;
+export declare const Disabled: Story<ComboboxProps<ComboItem>>;
+export declare const Required: Story<ComboboxProps<ComboItem>>;
+export declare const Error: Story<ComboboxProps<ComboItem>>;

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

@@ -6,6 +6,8 @@ export interface CheckboxProps {
     id: string;
     /** Disabled state */
     isDisabled?: boolean;
+    /** value */
+    value?: string;
     /** Check state */
     isChecked?: boolean;
     /** If field is required */
@@ -15,7 +17,7 @@ export interface CheckboxProps {
     /** Message or description */
     message?: string;
     /** Callback on input change */
-    onChange?(value: string): void;
+    onChange?(value: string, isChecked: boolean): void;
 }
 /** Comment */
 export declare const Checkbox: FC<CheckboxProps>;

package/lib/components/Forms/Checkbox/Checkbox.stories.d.ts

@@ -10,3 +10,4 @@ export declare const Required: Story<CheckboxProps>;
 export declare const Checked: Story<CheckboxProps>;
 export declare const ErrorState: Story<CheckboxProps>;
 export declare const Disabled: Story<CheckboxProps>;
+export declare const Events: Story<CheckboxProps>;

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

@@ -16,10 +16,12 @@ export interface RadioProps {
     isError?: boolean;
     /** Message or description */
     message?: string;
+    /** value */
+    value?: string;
     /** Callback on input change */
-    onChange?(value: string): void;
+    onChange?(value: string, isChecked: boolean): void;
     /** Callback on click */
-    onClick?(value: string): void;
+    onClick?(value: string, isChecked: boolean): void;
 }
 /** Comment */
 export declare const Radio: FC<RadioProps>;

package/lib/index.esm.js

@@ -7089,9 +7089,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 = useState(''), query = _b[0], setQuery = _b[1];
     var _c = useState(), selectedItem = _c[0], setSelectedItem = _c[1];
     useEffect(function () {
@@ -7100,7 +7100,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');
@@ -7110,16 +7110,16 @@ var Combobox = function (_a) {
         label && (React__default.createElement(Na.Label, { className: labelStyles },
             React__default.createElement(InputLabel, { isPlaceholder: true, isActive: true, label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled }))),
         React__default.createElement("div", { className: "relative" },
-            React__default.createElement(Na.Input, { className: inputStyles, onChange: function (event) { return setQuery(event.target.value); }, displayValue: function (item) { return item.value; }, placeholder: placeholder }),
+            React__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.createElement(Na.Button, { className: buttonStyles },
                 React__default.createElement(DynamicIcons, { icon: "SelectorIcon", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" })),
-            filteredItems.length > 0 && (React__default.createElement(Na.Options, { className: optionStyles }, filteredItems.map(function (item, index) { return (React__default.createElement(Na.Option, { key: index, value: item, className: function (_a) {
+            filteredItems.length > 0 && (React__default.createElement(Na.Options, { className: optionStyles }, filteredItems.map(function (item, index) { return (React__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.createElement(React__default.Fragment, null,
-                    React__default.createElement("span", { className: classNames('block truncate', selected ? 'font-semibold' : '') }, item.value),
+                    React__default.createElement("span", { className: classNames('block truncate', selected ? 'font-semibold' : '') }, "".concat(item[displayProperty])),
                     selected && (React__default.createElement("span", { className: classNames('absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-purple-600') },
                         React__default.createElement(DynamicIcons, { icon: "CheckIcon", className: "h-5 w-5", "aria-hidden": "true" })))));
             })); }))))));
@@ -12433,22 +12433,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.createElement("div", { className: wrapperStyles },
         React__default.createElement("div", { className: "flex items-center h-5" },
-            React__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.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);
@@ -12501,16 +12503,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.createElement("div", { className: wrapperStyles },
         React__default.createElement("div", { className: "flex items-center h-5" },
-            React__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.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.createElement("div", { className: "ml-3 text-sm" },