@scheels-softdev/kendoreact-generics 4.0.0 → 4.0.1

package/GenericDropdown.d.ts

@@ -4,6 +4,8 @@ interface GenericDropdownProps<T> extends ComboBoxProps {
     selectedData?: T;
     selectedId?: number;
     idField?: keyof T;
+    pageSize?: number;
+    onClear?: () => void;
 }
-export declare function GenericDropdown<T>({ data, selectedData, selectedId, idField, ...props }: GenericDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function GenericDropdown<T>({ data, selectedData, selectedId, idField, onClear, ...props }: GenericDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
 export default GenericDropdown;

package/GenericDropdown.js

@@ -9,26 +9,35 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { ComboBox } from "@progress/kendo-react-dropdowns";
-// Create the GenericDropdown component
 export function GenericDropdown(_a) {
-    var { data, selectedData, selectedId, idField } = _a, props = __rest(_a, ["data", "selectedData", "selectedId", "idField"]);
-    // Determine the actual selected item based on id or direct data
-    const selectedItem = React.useMemo(() => {
+    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) {
-            return selectedData;
+            setSelectedItem(selectedData);
         }
-        if (selectedId !== undefined && idField) {
-            return data.find((item) => item[idField] === selectedId);
+        else if (selectedId !== undefined && idField) {
+            const foundItem = data.find((item) => item[idField] === selectedId);
+            setSelectedItem(foundItem || null);
         }
-        return undefined;
-    }, [selectedId, idField, selectedData, data]);
-    return (_jsx(ComboBox, Object.assign({ data: data, value: selectedItem, virtual: {
-            pageSize: 20,
-            skip: 0,
-            total: data.length,
-        } }, props)));
+        else {
+            setSelectedItem(null);
+        }
+    }, [selectedData, selectedId, idField, data]);
+    // Handle clearing the selection
+    const handleClear = () => {
+        setSelectedItem(null);
+        if (onClear)
+            onClear();
+    };
+    return (_jsxs("div", { children: [_jsx(ComboBox, Object.assign({ data: data, value: selectedItem, virtual: {
+                    pageSize: props.pageSize || 6,
+                    skip: 0,
+                    total: data.length,
+                } }, props)), _jsx("button", Object.assign({ onClick: handleClear }, { children: "Clear" })), " "] }));
 }
 export default GenericDropdown;

package/package.json

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