@scheels-softdev/kendoreact-generics 4.0.3 → 4.0.4

package/GenericDropdown.d.ts

@@ -1,11 +1,16 @@
 import { ComboBoxProps } from "@progress/kendo-react-dropdowns";
-interface GenericDropdownProps<T> extends ComboBoxProps {
+interface BaseProps<T> extends ComboBoxProps {
     data: T[];
-    selectedData?: T;
-    selectedId?: number;
-    idField?: keyof T;
     pageSize?: number;
     onClear?: () => void;
 }
-export declare function GenericDropdown<T>({ data, selectedData, selectedId, idField, onClear, ...props }: GenericDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+interface SelectedDataProps<T> {
+    selectedData: T;
+}
+interface SelectedIdProps<T> {
+    selectedId: number;
+    idField: keyof T;
+}
+type GenericDropdownProps<T> = BaseProps<T> & (SelectedDataProps<T> | SelectedIdProps<T>);
+export declare function GenericDropdown<T>({ data, pageSize, onClear, ...props }: GenericDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
 export default GenericDropdown;

package/GenericDropdown.js

@@ -10,28 +10,25 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useMemo } from "react";
 import { ComboBox } from "@progress/kendo-react-dropdowns";
+// GenericDropdown component definition
 export function GenericDropdown(_a) {
-    var { data, selectedData, selectedId, idField, onClear } = _a, props = __rest(_a, ["data", "selectedData", "selectedId", "idField", "onClear"]);
-    const [selectedItem, setSelectedItem] = useState(null);
-    // Effect to update the selectedItem when external ids or data change
-    useEffect(() => {
-        if (selectedData) {
-            setSelectedItem(selectedData);
+    var { data, pageSize = 6, onClear } = _a, props = __rest(_a, ["data", "pageSize", "onClear"]);
+    // Compute selected item based on the provided props using type guards
+    const selectedItem = useMemo(() => {
+        if ("selectedData" in props) {
+            return props.selectedData;
         }
-        else if (selectedId !== undefined && idField) {
-            const foundItem = data.find((item) => item[idField] === selectedId);
-            setSelectedItem(foundItem || null);
+        else if ("selectedId" in props && "idField" in props) {
+            return data.find((item) => item[props.idField] === props.selectedId);
         }
-        else {
-            setSelectedItem(null);
-        }
-    }, [selectedData, selectedId, idField, data]);
-    return (_jsx("div", { children: _jsx(ComboBox, Object.assign({ data: data, value: selectedItem, virtual: {
-                pageSize: props.pageSize || 6,
-                skip: 0,
-                total: data.length,
-            } }, props)) }));
+        return undefined;
+    }, [props, data]);
+    return (_jsx(ComboBox, Object.assign({ data: data, value: selectedItem, virtual: {
+            pageSize,
+            skip: 0,
+            total: data.length,
+        } }, props)));
 }
 export default GenericDropdown;

package/_index.test.js

@@ -33,7 +33,7 @@ describe("GenericDropdown", () => {
         // 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 }));
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: () => { }, textField: "name", selectedId: selectedId, idField: "id" }));
         // Get the input element by its role of "combobox"
         const input = result.getByRole("combobox");
         expect(input.getAttribute("value")).toBe("Option 2");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@scheels-softdev/kendoreact-generics",
-    "version": "4.0.3",
+    "version": "4.0.4",
     "main": "index.js",
     "scripts": {
         "test": "jest",