@scheels-softdev/kendoreact-generics 2.6.0 → 2.6.2

package/FilterCellDropdown.d.ts

@@ -3,7 +3,7 @@ interface DropdownFilterCellProps<T> extends GridFilterCellProps {
     /** The data to populate the dropdown options */
     data: T[];
     /** The field names used to extract text values for display */
-    textFields: (keyof T)[];
+    textField: keyof T;
     /** The separator to use when concatenating multiple text values */
     separator?: string;
 }

package/FilterCellDropdown.js

@@ -28,5 +28,5 @@ export function FilterCellDropdown(props) {
         });
     };
     // Render a div containing a GenericDropdownWithSearch component and a Clear button
-    return (_jsxs("div", Object.assign({ className: "k-filtercell", "data-testid": "dropdownFilter" }, { children: [_jsx(GenericDropdown, { data: props.data, onChange: onChange, selectedId: props.value, textFields: [...props.textFields], separator: props.separator }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
+    return (_jsxs("div", Object.assign({ className: "k-filtercell", "data-testid": "dropdownFilter" }, { children: [_jsx(GenericDropdown, { data: props.data, onChange: onChange, selectedId: props.value, textField: props.textField, separator: props.separator }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
 }

package/GenericDropdown.d.ts

@@ -14,7 +14,7 @@ type GenericDDProps<T> = {
     /** Callback function triggered when the selected value changes*/
     onChange: Function;
     /**  The field names used to extract text values for display */
-    textFields: (keyof T)[];
+    textField: keyof T;
     /**  The separator to use when concatenating multiple text values. (optional)*/
     separator?: string;
     /**  Determines whether the dropdown is disabled. (optional)*/
@@ -29,5 +29,5 @@ type GenericDDProps<T> = {
     style?: CSSProperties;
     isLoading?: boolean;
 };
-export declare function GenericDropdown<T>({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, isLoading, }: GenericDDProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function GenericDropdown<T>({ data, selectedId, selectedData, onChange, textField, disabled, idField, title, hideClearButton, style, isLoading, }: GenericDDProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/GenericDropdown.js

@@ -1,31 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ComboBox } from "@progress/kendo-react-dropdowns";
-import { filterBy } from "@progress/kendo-data-query";
+import { filterBy, process } from "@progress/kendo-data-query";
 import { useEffect, useRef, useState } from "react";
-import { getTextValue } from "./Utility";
 import { Skeleton } from "@progress/kendo-react-indicators";
-export function GenericDropdown({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, isLoading, }) {
+export function GenericDropdown({ data, selectedId, selectedData, onChange, textField, disabled, idField, title, hideClearButton, style, isLoading, }) {
     if (selectedId !== undefined && selectedData !== undefined) {
         throw new Error("You cannot provide both selectedData and selectedId to GenericDropdown.");
     }
     //local state
     const pageSize = 8;
-    const [dataList, setDataList] = useState([]);
     const [state, setState] = useState({
         skip: 0,
-        total: dataList.length,
-        subsetData: dataList.slice(0, pageSize),
+        total: data.length,
+        subsetData: data.slice(0, pageSize),
     });
     //external function variables
-    let filteredData = useRef(dataList.slice());
+    let filteredData = useRef(data.slice());
     //function creation
     // function to handle filter changes
     const onFilterChange = (event) => {
         var _a;
         if ((_a = event.filter.value) === null || _a === void 0 ? void 0 : _a.length)
-            filteredData.current = filterBy(dataList.slice(), event.filter);
+            filteredData.current = filterBy(data.slice(), event.filter);
         else
-            filteredData.current = dataList;
+            filteredData.current = data;
         const newData = filteredData.current.slice(0, pageSize);
         setState({
             subsetData: newData,
@@ -38,36 +36,21 @@ export function GenericDropdown({ data, selectedId, selectedData, onChange, text
         console.log("page change data: ", event.page, filteredData.current);
         const skip = event.page.skip;
         const take = event.page.take;
-        const newSubsetData = filteredData.current.length ? filteredData.current.slice(skip, skip + take) : dataList.slice(skip, skip + take);
+        const newSubsetData = filteredData.current.length ? filteredData.current.slice(skip, skip + take) : data.slice(skip, skip + take);
         setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
     };
-    //change event listeners
-    useEffect(() => {
-        dataList;
-    });
-    useEffect(() => {
-        if (data.length) {
-            setDataList(data.map((x) => {
-                return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
-            }));
-            setState(Object.assign(Object.assign({}, state), { total: data.length, subsetData: data.map((x) => {
-                    return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
-                }) }));
-        }
-    }, [data, textFields, separator]);
     const findByIndex = (id, idKey) => {
-        console.log(id, data, idField);
-        const item = dataList.find((item) => id === item[idKey || "id"]);
-        console.log(item);
+        const item = data.find((item) => id === item[idKey || "id"]);
         return item;
     };
     const findByValue = (item) => {
-        console.log(item, data);
-        const returnVal = dataList.find((x) => JSON.stringify(Object.assign(Object.assign({}, x), selectedData)) === JSON.stringify(Object.assign({}, x)));
-        console.log(returnVal);
+        const returnVal = data.find((x) => JSON.stringify(Object.assign(Object.assign({}, x), selectedData)) === JSON.stringify(Object.assign({}, x)));
         return returnVal;
     };
-    return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: dataList.length && !isLoading ? (_jsx(ComboBox, { style: style, label: title, disabled: disabled, data: state.subsetData, textField: "textValue", virtual: {
+    useEffect(() => {
+        setState((current) => (Object.assign(Object.assign({}, current), { subsetData: process(data, current).data })));
+    }, [data]);
+    return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: data.length && !isLoading ? (_jsx(ComboBox, { style: style, label: title, disabled: disabled, data: state.subsetData, textField: textField.toString(), virtual: {
                 // enable virtualization for large datasets
                 total: state.total,
                 pageSize: pageSize,

package/MultiSelectDropdown.d.ts

@@ -1,16 +1,14 @@
-export declare function MultiSelectDropdown<T>({ data, selectedData, textFields, selectEvent, title, separator, limit, }: {
+export declare function MultiSelectDropdown<T>({ data, selectedData, textField, onSelect, title, limit, }: {
     /** The data array for the dropdown options. */
     data: T[];
     /** The array of selected data items. */
     selectedData: T[];
     /** The field names to use for text values in the dropdown. */
-    textFields: (keyof T)[];
+    textField: keyof T;
     /** The function to call when an item is selected or deselected. */
-    selectEvent: Function;
+    onSelect: Function;
     /** The optional title of the dropdown. */
     title?: string;
-    /** The optional separator to use for concatenating text values. */
-    separator?: string;
     /** The optional limit of the maximum number of selected items. */
     limit?: number;
 }): import("react/jsx-runtime").JSX.Element;

package/MultiSelectDropdown.js

@@ -1,29 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { filterBy } from "@progress/kendo-data-query";
 import { MultiSelect } from "@progress/kendo-react-dropdowns";
-import { getTextValue } from "./Utility";
-export function MultiSelectDropdown({ data, selectedData, textFields, selectEvent, title, separator, limit, }) {
+export function MultiSelectDropdown({ data, selectedData, textField, onSelect, title, limit, }) {
     //local state
     const pageSize = 8;
-    const [dataList, setDataList] = useState(data.map((x) => {
-        return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
-    }));
     const [state, setState] = useState({
         skip: 0,
-        total: dataList.length,
-        subsetData: dataList.slice(0, pageSize),
+        total: data.length,
+        subsetData: data.slice(0, pageSize),
     });
     //external function variables
-    const filteredData = useRef(dataList.slice());
+    const filteredData = useRef(data.slice());
     //function creation
     // function to handle filter changes
     const onFilterChange = (event) => {
         var _a;
         if ((_a = event.filter.value) === null || _a === void 0 ? void 0 : _a.length)
-            filteredData.current = filterBy(dataList.slice(), event.filter);
+            filteredData.current = filterBy(data.slice(), event.filter);
         else
-            filteredData.current = dataList;
+            filteredData.current = data;
         const newData = filteredData.current.slice(0, pageSize);
         setState({
             subsetData: newData,
@@ -38,17 +34,11 @@ export function MultiSelectDropdown({ data, selectedData, textFields, selectEven
         const newSubsetData = filteredData.current.slice(skip, skip + take);
         setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
     };
-    //change event listeners
-    useEffect(() => {
-        setDataList(data.map((x) => {
-            return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
-        }));
-    }, [data, textFields, separator]);
-    return (_jsx("div", Object.assign({ "data-testid": "multiselect", style: { width: "100%" } }, { children: _jsx(MultiSelect, { label: title, data: state.subsetData, textField: "textValue", style: { width: "100%" }, virtual: {
+    return (_jsx("div", Object.assign({ "data-testid": "multiselect", style: { width: "100%" } }, { children: _jsx(MultiSelect, { label: title, data: state.subsetData, textField: textField.toString(), style: { width: "100%" }, virtual: {
                 total: state.total,
                 pageSize: pageSize,
                 skip: state.skip,
             }, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
                 height: "210px",
-            }, onChange: (e) => selectEvent(limit && e.value.length ? e.value.slice(0, limit) : e.value), autoClose: false, value: selectedData }) })));
+            }, onChange: (e) => onSelect(limit && e.value.length ? e.value.slice(0, limit) : e.value), autoClose: false, value: selectedData }) })));
 }

package/README.md

@@ -36,56 +36,59 @@ Note: This package has only been tested with typescript. if you're using javascr
     selectedId: number;
     selectedData?: T;
     onChange: event: (ComboBoxChangeEvent) => void;
-    textFields: (keyof T)[];
-    separator?: string;
-    idField?: keyof T;
+    textField: keyof T;
     disabled?: boolean;
+    idField?: keyof T;
     title?: string;
-    showClearButton?: boolean;
+    hideClearButton?: boolean;
+    style?: React.CSSProperties;
+    isLoading?: boolean;
 
 #### data
 
 -   Array of T. the Definition of what T is matters for the "textFields" prop
 
-#### onChange
-
--   Event passed is a ComboBoxChangeEvent (from kendo-react-dropdowns)
-
-#### selectedId
+#### selectedId OR selectedData
 
--   The id of the item selected. By default the dropdown will assume your item has an "id" property. if it doesn't have an Id but has a unique identifier, see optional keys (idField)
+-   selectedId is the unique identifier of the item selected. By default the dropdown will assume your item has an "id" property. if it doesn't have an Id but has a unique identifier, see optional keys (idField)
+-   selectedData is a reference to the full selected object.
+-   Only one of these 2 is needed. it will just use selectedId if both are provided
 
-#### selectedData
+#### onChange
 
--   The item selected. the dropdown will compare this object to the list of objects you gave it for the data prop to try to find the right index
+-   Event passed is a ComboBoxChangeEvent (from kendo-react-dropdowns)
 
-#### textFields
+#### textField
 
--   This is defined as (keyof T)[].
--   For example, if my dropdown is fed a list of employee objects with a firstName, lastName, and id key, I would pass ["firstName","lastName"] to see "John Williams", or ["firstName","lastName","id"] to see "John Doe 19382032141"
+-   The field of each object to actually display
+-   For example, if my dropdown is fed a list of employee objects with a firstName, lastName, and id key, I would pass "firstName" to see "John" or "lastName" to see "Doe".
+    If you need to include multiple fields of the object, see https://www.npmjs.com/package/@scheels-softdev/frontend-utility-functions?activeTab=readme
 
-#### separator (optional)
+#### disabled (optional)
 
--   This defines what your text fields are separated by. by default, it is assumed you only want a space between them. Use this prop if you want to change this
--   For example, if we want our employee's names separated by a comma, we would pass ", " here
+-   If you want to conditionally disable the dropdown you can do that here
 
 #### idField (optional)
 
 -   IdField is a keyof T, much like textFields. while textFields determines what's displayed in the dropdown, idField overrides what field of each object the dropdown looks at to compare against the selectedId prop
 -   For example, if our employee's id field is employeeId instead of just id, we would pass "employeeId" here
 
-#### disabled (optional)
-
--   If you want to conditionally disable the dropdown you can do that here
-
 #### title (optional)
 
 -   The label that appears in your multiselect when there aren't any options selected, or just above the multiselect when there are
 -   For example, if we want to use it to send a letter to an employee, we would pass "Selected Employee" here
 
-#### showClearButton (optional)
+#### hideClearButton (optional)
+
+-   A boolean indicating whether the clear button should be hidden. by default it will be shown
+
+#### style (optional)
 
--   A boolean indicating whether the clear button should show up or not
+-   An override to the default styling that ships with kendo
+
+#### isLoading (optional)
+
+-   A boolean indicating whether your data is still loading or not
 
 ---
 
@@ -95,10 +98,9 @@ Note: This package has only been tested with typescript. if you're using javascr
 
     data: T[];
     selectedData: T[];
-    textFields: (keyof T)[];
-    selectEvent: Function;
+    textField: keyof T;
+    onSelect: Function;
     title?: string;
-    separator?: string;
     limit?: number;
 
 #### data
@@ -109,12 +111,13 @@ Note: This package has only been tested with typescript. if you're using javascr
 
 -   The id of the item selected. By default the dropdown will assume your item has an "id" property. if it doesn't, see optional parameters
 
-#### textFields
+#### textField
 
--   This is defined as (keyof T)[].
--   For example, if my dropdown is fed a list of employee objects with a firstName, lastName, and id key, I would pass ["firstName","lastName"] to see "John Williams", or ["firstName","lastName","id"] to see "John Doe 19382032141"
+-   The field of each object to actually display
+-   For example, if my dropdown is fed a list of employee objects with a firstName, lastName, and id key, I would pass "firstName" to see "John" or "lastName" to see "Doe".
+    If you need to include multiple fields of the object, see https://www.npmjs.com/package/@scheels-softdev/frontend-utility-functions?activeTab=readme
 
-#### selectEvent
+#### onSelect
 
 -   "Event" you're given should just be your new array of selected Items
 
@@ -123,11 +126,6 @@ Note: This package has only been tested with typescript. if you're using javascr
 -   The label that appears in your multiselect when there aren't any options selected, or just above the multiselect when there are
 -   For example, if we want to use it to send work anniversary letters to multiple employees, we would pass "Selected Employees" here
 
-#### separator (optional)
-
--   This defines what your text fields are separated by. by default, it is assumed you only want a space between them. Use this prop if you want to change this
--   For example, if we want our employee's names separated by a comma, we would pass ", " here
-
 #### limit (optional)
 
 -   The upper limit of how many items the user can select at once.
@@ -141,7 +139,7 @@ Note: This package has only been tested with typescript. if you're using javascr
 
     {...GridFilterCellProps} (from @progress/kendo-react-grid)
     data: T[];
-    textFields: (keyof T)[];
+    textField: keyof T;
     separator?: string;
 
 #### {...FilterCellProps}
@@ -152,10 +150,11 @@ Note: This package has only been tested with typescript. if you're using javascr
 
 -   Array of T. What you want to display in the dropdown. the Definition of what T is matters for the "textFields" prop
 
-#### textFields
+#### textField
 
--   This is defined as (keyof T)[].
--   For example, if my dropdown is fed a list of employee Statuses, I could feed it a "StatusName" field (assuming my Status objects have that key) and it could display something like "Active", "Terminated", or "On Leave"
+-   The field of each object to actually display
+-   For example, if my dropdown is fed a list of employee objects with a firstName, lastName, and id key, I would pass "firstName" to see "John" or "lastName" to see "Doe".
+    If you need to include multiple fields of the object, see https://www.npmjs.com/package/@scheels-softdev/frontend-utility-functions?activeTab=readme
 
 #### separator (optional)
 
@@ -164,172 +163,6 @@ Note: This package has only been tested with typescript. if you're using javascr
 
 ---
 
-## Command Cell Dropdown
-
-### Props
-
-    data: T[];
-    selectedId: number;
-    textFields: (keyof T)[];
-    onChange: (e: ComboBoxChangeEvent) => void;
-    separator?: string;
-    checkEditField?: boolean;
-    isEditing?: boolean;
-
-#### data
-
--   Array of T. What you want to display in the dropdown. the Definition of what T is matters for the "textFields" prop
-
-#### selectedId
-
--   all of the default props that are passed from kendo grid when trying to override the filter cell
-
-#### textFields
-
--   This is defined as (keyof T)[].
--   For example, if my dropdown is fed a list of employee Statuses, I could feed it a "StatusName" field (assuming my Status objects have that key) and it could display something like "Active", "Terminated", or "On Leave"
-
-#### onChange
-
--   Pass what you want the event to do. the event you will be passed is a ComboBoxChangeEvent. The relevant information you're likely to need is stored in e.target.value
-
-#### separator (optional)
-
--   This defines what your text fields are separated by. by default, it is assumed you only want a space between them. Use this prop if you want to change this
--   For example, if some of our associates only know the status IDs for Active, Terminated, or On Leave and we want to display them side by side, we might want to add a "dash" seporator. to do this we would pass " - " here
-
-#### checkEditField (optional)
-
--   This is for optional conditional rendering. If this is true, it will only render a dropdown if isEditing is true. if this is false, it will always render a dropdown
-
-#### isEditing (optional)
-
--   This goes along with the checkEditField prop. If both are true, it will render a dropdown. Otherwise, only text containing the selected value will be displayed
-
----
-
-## Command Cell Date
-
-### Props
-
-    dataItem: T;
-    chgFn: (e: GridChangeEvent) => void;
-    field: keyof T;
-
-#### dataItem
-
--   an object containing a date. if used per Telerik(Kendo)'s documentation, the value will come from props.dataItem
-
-#### field
-
--   which key in your dataItem object is a date?
-
-#### chgFn
-
--   A handler function for a gridchangeevent.
-
----
-
-## Command Cell Checkbox
-
-### Props
-
-    checked: boolean;
-    onCheck: Function;
-    onUncheck: Function;
-
-#### checked
-
--   boolean value for whether or not the checkbox should display a checkmark
-
-#### onCheck
-
--   what function do you want to run when checking the checkbox. I highly recommend a function that actually changes your value passed into `checked` to true.
-
-#### onUncheck
-
--   what function do you want to run when unchecking the checkbox. I highly recommend a function that actually changes your value passed into `checked` to false.
-
----
-
-## Command Cell Switch
-
-### Props
-
-props: GridCellProps
-changeFunction: Function
-
-### props
-
--   this component will assume you have an isEditing key in your object, otherwise it will just generate a string (in the current version)
-
-### changeFunction
-
--   what function do you want to run on change? I highly recommend a function that actually toggles the value of the field you're trying to change.
-
----
-
-## CommandCellPrice
-
-### Props
-
-cost: number
-
-### cost
-
--   the number you want formatted to USD. support for other currencies or for thousandths will come eventually with optional props, but those don't exist yet
-
----
-
-## Command Cell Dropdown Without ID
-
-### Props
-
-data: T[]
-selectedData: T
-textFields: (keyof T)[]
-onChange: (e: ComboBoxChangeEvent) => void
-separator?: string
-checkEditField?: boolean
-isEditing?: boolean
-showClearButton?: boolean
-
-#### data
-
--   Array of T. What you want to display in the dropdown. The definition of what T is matters for the "textFields" prop.
-
-#### selectedData
-
--   The item selected. The dropdown will compare this object to the list of objects you gave it for the data prop to try to find the right index.
-
-#### textFields
-
--   This is defined as (keyof T)[].
--   For example, if my dropdown is fed a list of employee objects with a `firstName`, `lastName`, and `id` key, I would pass `["firstName","lastName"]` to see "John Williams", or `["firstName","lastName","id"]` to see "John Doe 19382032141".
-
-#### onChange
-
--   Pass what you want the event to do. The event you will be passed is a ComboBoxChangeEvent. The relevant information you're likely to need is stored in `e.target.value`.
-
-#### separator (optional)
-
--   This defines what your text fields are separated by. By default, it is assumed you only want a space between them. Use this prop if you want to change this.
--   For example, if some of our associates only know the status IDs for Active, Terminated, or On Leave and we want to display them side by side, we might want to add a "dash" separator. To do this, we would pass " - " here.
-
-#### checkEditField (optional)
-
--   This is for optional conditional rendering. If this is true, it will only render a dropdown if `isEditing` is true. If this is false, it will always render a dropdown.
-
-#### isEditing (optional)
-
--   This goes along with the `checkEditField` prop. If both are true, it will render a dropdown. Otherwise, only text containing the selected value will be displayed.
-
-#### showClearButton (optional)
-
--   A boolean indicating whether the clear button should show up or not.
-
----
-
 ## ToolbarButton
 
 ### Props

package/_index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/_index.test.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GenericDropdown } from "./GenericDropdown";
+import { fireEvent, render } from "@testing-library/react";
+describe("GenericDropdown", () => {
+    const data = [];
+    for (let i = 1; i < 20; i++) {
+        data.push({ id: i, name: `Option ${i}` });
+    }
+    test("renders virtualized ordering by index when passed selectedData", () => {
+        // Set initial selectedData to the second item in the data array
+        let selectedData = data[1];
+        // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: () => { }, textField: "name", selectedData: selectedData }));
+        // Get the input element by its role of "combobox"
+        const input = result.getByRole("combobox");
+        expect(input.getAttribute("value")).toBe("Option 2");
+        // Simulate a change event on the input element by setting its target value to "O"
+        fireEvent.change(input, { target: { value: "O" } });
+        // Simulate a key down event on the input element with the key value of "ArrowDown"
+        fireEvent.keyDown(input, { key: "ArrowDown" });
+        // Query the rendered result for elements with the text "Option 1", "Option 2", and "Option 3"
+        let item1 = result.queryByText("Option 1");
+        let item2 = result.queryByText("Option 2");
+        let item3 = result.queryByText("Option 3");
+        // Ensure that item1, item2, and item3 are not undefined (i.e., they are rendered)
+        expect(item1).not.toBeUndefined();
+        expect(item2).not.toBeUndefined();
+        expect(item3).not.toBeUndefined();
+        // Ensure that there are no elements with the text "Option 9" (i.e., it is not rendered)
+        expect(result.queryAllByText("Option 9")).toHaveLength(0);
+    });
+    test("renders virtualized ordering by index when passed selectedId", () => {
+        // Set initial selectedData to the second item in the data array
+        let selectedId = 2;
+        // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: () => { }, textField: "name", selectedId: selectedId }));
+        // Get the input element by its role of "combobox"
+        const input = result.getByRole("combobox");
+        expect(input.getAttribute("value")).toBe("Option 2");
+        // Simulate a change event on the input element by setting its target value to "O"
+        fireEvent.change(input, { target: { value: "O" } });
+        // Simulate a key down event on the input element with the key value of "ArrowDown"
+        fireEvent.keyDown(input, { key: "ArrowDown" });
+        // Query the rendered result for elements with the text "Option 1", "Option 2", and "Option 3"
+        let item1 = result.queryByText("Option 1");
+        let item2 = result.queryByText("Option 2");
+        let item3 = result.queryByText("Option 3");
+        // Ensure that item1, item2, and item3 are not undefined (i.e., they are rendered)
+        expect(item1).not.toBeUndefined();
+        expect(item2).not.toBeUndefined();
+        expect(item3).not.toBeUndefined();
+        // Ensure that there are no elements with the text "Option 9" (i.e., it is not rendered)
+        expect(result.queryAllByText("Option 9")).toHaveLength(0);
+    });
+    test("handles change event when selecting by object", () => {
+        // Set initial selectedData to the second item in the data array
+        let selectedData = data[1];
+        // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = data[e.value]), textField: "name", selectedData: selectedData }));
+        // Get the input element by its role of "combobox"
+        // Simulate a change event on the input element by setting its target value to "O"
+        let input = result.getByRole("combobox");
+        fireEvent.change(input, { target: { value: "O" } });
+        // Get the item element with the text "Option 2"
+        let item2 = result.getByText("Option 2");
+        // Simulate a click event on the item element
+        fireEvent.click(item2);
+        // Ensure that the input element's value attribute is set to "Option 2"
+        expect(selectedData.id).toBe(2);
+    });
+    test("handles change event when selecting by id", () => {
+        // Set initial selectedData to the second item in the data array
+        let selectedId = 1;
+        // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedId = e.value.id), textField: "name", selectedId: selectedId, idField: "id" }));
+        // Get the input element by its role of "combobox"
+        // Simulate a change event on the input element by setting its target value to "O"
+        let input = result.getByRole("combobox");
+        fireEvent.change(input, { target: { value: "O" } });
+        // Get the item element with the text "Option 2"
+        let item2 = result.getByText("Option 2");
+        // Simulate a click event on the item element
+        fireEvent.click(item2);
+        // Ensure that the input element's value attribute is set to "Option 2"
+        expect(selectedId).toBe(2);
+    });
+    test("only displays items that match the search", () => {
+        // Set initial selectedData to the second item in the data array
+        let selectedData = data[1];
+        // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = data[e.value]), textField: "name", selectedData: selectedData }));
+        let input = result.getByRole("combobox"); // Get the input element by its role of "combobox"
+        fireEvent.change(input, { target: { value: "9" } }); //simulate a change event on the input element
+        // Query the rendered result for elements with the text "Option 1" and "Option 9", and store the results in variables
+        let item1 = result.queryAllByText("Option 1");
+        let item9 = result.queryAllByText("Option 9");
+        // Ensure that there are no elements with the text "Option 1" and at least one element with the text "Option 9"
+        expect(item1).toHaveLength(0);
+        expect(item9.length).toBeGreaterThan(0);
+    });
+});

package/commandCell/CommandCellDDWithoutId.d.ts

@@ -5,7 +5,7 @@ export declare function CommandCellDDWithoutId<T>(props: {
     /** The currently selected data item. */
     selectedData: T;
     /** The field names to use for text values in the dropdown. */
-    textFields: (keyof T)[];
+    textField: keyof T;
     /** Callback function to be called when the selected value changes. */
     onChange: (e: ComboBoxChangeEvent) => void;
     /** Optional separator to use for concatenating text values. */

package/commandCell/CommandCellDDWithoutId.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { GenericDropdown } from "../GenericDropdown";
 export function CommandCellDDWithoutId(props) {
     // Function implementation...
-    return (_jsx("td", { children: props.checkEditField && !props.isEditing ? (props.textFields.map((x) => props.data.find((y) => y === props.selectedData)[x]).join(props.separator || " ")) : (
+    return (_jsx("td", { children: props.checkEditField && !props.isEditing ? (_jsx(_Fragment, {}) //TODO remove this from Marketing display
+        ) : (
         // If "props.checkEditField" is false or "props.isEditing" is true, render the GenericDropdownWithSearch component with the "props" passed to it
         _jsx(GenericDropdown, Object.assign({}, props))) }));
 }

package/commandCell/CommandCellDropdown.d.ts

@@ -5,7 +5,7 @@ export declare function CommandCellDropdown<T>(props: {
     /** The ID of the currently selected item. */
     selectedId: number;
     /** The field names to use for text values in the dropdown. */
-    textFields: (keyof T)[];
+    textField: keyof T;
     /** Callback function to be called when the selected value changes. */
     onChange: (e: ComboBoxChangeEvent) => void;
     /** Optional separator to use for concatenating text values. */

package/commandCell/CommandCellDropdown.js

@@ -1,11 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { GenericDropdown } from "../GenericDropdown";
 // This exports a function component called "CommandCellDropdown"
 // It takes in various props that are used to render a dropdown in a table cell
 export function CommandCellDropdown(props) {
-    return (_jsx("td", { children: props.checkEditField && !props.isEditing && props.data.length ? (props.textFields
-            .map((x) => props.data.find((y) => y[props.idField ? props.idField : "id"] === props.selectedId)[x])
-            .join(props.separator || " ")) : (
+    return (_jsx("td", { children: props.checkEditField && !props.isEditing && props.data.length ? (_jsx(_Fragment, {}) //TODO remove this from Marketing display
+        ) : (
         // If "props.checkEditField" is false or "props.isEditing" is true, render the GenericDropdownWithSearch component with the "props" passed to it
         _jsx(GenericDropdown, Object.assign({}, props))) }));
 }

package/package.json

@@ -1,9 +1,9 @@
 {
     "name": "@scheels-softdev/kendoreact-generics",
-    "version": "2.6.0",
+    "version": "2.6.2",
     "main": "index.js",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
+        "test": "jest",
         "clean": "rmdir /S /Q dist && mkdir dist",
         "build": "npm run clean && tsc && copy package.json .\\dist && copy README.md .\\dist "
     },
@@ -19,8 +19,12 @@
         "@progress/kendo-react-grid": "latest",
         "@progress/kendo-react-indicators": "^5.14.1",
         "@progress/kendo-react-inputs": "latest",
+        "@testing-library/react": "^14.0.0",
+        "@types/jest": "^29.5.3",
         "@types/moment": "latest",
         "@types/react": "latest",
+        "jest": "^29.6.2",
+        "jest-environment-jsdom": "^29.6.2",
         "moment": "latest",
         "npmrc": "latest",
         "react": "latest",
@@ -37,6 +41,7 @@
         "moment": "^2.29.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "ts-jest": "^29.1.1",
         "typescript": "^4.9.5"
     },
     "description": ""