@scheels-softdev/kendoreact-generics 2.2.4 → 2.2.6

package/FilterCellDropdown.d.ts

@@ -0,0 +1,8 @@
+import { GridFilterCellProps } from "@progress/kendo-react-grid";
+interface DropdownFilterCellProps<T> extends GridFilterCellProps {
+    data: T[];
+    textFields: (keyof T)[];
+    separator?: string;
+}
+export declare function FilterCellDropdown<T>(props: DropdownFilterCellProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/FilterCellDropdown.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@progress/kendo-react-buttons";
+import { GenericDropdown } from "./GenericDropdown";
+// Define the DropdownFilterCell component with props of type DropdownFilterCellProps
+export function FilterCellDropdown(props) {
+    // Define a function that returns true if a value is not undefined or null, and is different from the default item
+    let hasValue = (value) => Boolean(value);
+    // Define an onChange function that will be called when the ComboBox value changes
+    const onChange = (event) => {
+        var _a, _b;
+        // Update the hasValue variable based on the new value of the ComboBox
+        hasValue = hasValue((_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.id);
+        // Call the onChange function passed down as a prop, passing a filter object with the new value and operator
+        props.onChange({
+            value: hasValue ? event.target.value.id : "",
+            operator: hasValue ? "eq" : "",
+            syntheticEvent: event.syntheticEvent,
+        });
+    };
+    // Define an onClearButtonClick function that will be called when the Clear button is clicked
+    const onClearButtonClick = (event) => {
+        event.preventDefault();
+        // Call the onChange function passed down as a prop, passing a filter object with empty values
+        props.onChange({
+            value: "",
+            operator: "",
+            syntheticEvent: event,
+        });
+    };
+    // 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" })] })));
+}

package/GenericDropdown.d.ts

@@ -0,0 +1,30 @@
+import { CSSProperties } from "react";
+/**
+ * JSX Component for displaying selected images in a fullscreen Modal
+ * @param {object} props
+ * @param {T[]} props.data array of data objects
+ * @param {number} [props.selectedId] id of the selected data object
+ * @param {T} [props.selectedData] if there is no identity key in the object and you need to compare the entire object, use this instead of selectedId
+ * @param {Function} props.onChange function to call when the selected value changes
+ * @param {(keyof T)[] } props.textFields array of field names to use for text values
+ * @param {string} [props.separator] optional separator to use for concatenating text values
+ * @param {object} [props.disabled] boolean to disable the dropdown
+ * @param {keyof T} [props.idField] if the id field to look at isn't 'id', what is it?
+ * @param {string} [props.title] the label of the dropdown
+ * @param {boolean} [props.showClearButton] set to false if you want to hide clear button
+ * @param {CSSProperties} [props.style] the CSS Properties you want to use. It is generally recommended to do styling in your App.css file but if necessary this prop is available to you
+ * @returns
+ */
+export declare function GenericDropdown<T>({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, }: {
+    data: T[];
+    selectedId?: number;
+    selectedData?: T;
+    onChange: Function;
+    textFields: (keyof T)[];
+    separator?: string;
+    idField?: keyof T;
+    disabled?: boolean;
+    title?: string;
+    hideClearButton?: boolean;
+    style?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;

package/GenericDropdown.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComboBox } from "@progress/kendo-react-dropdowns";
+import { filterBy } from "@progress/kendo-data-query";
+import { useEffect, useRef, useState } from "react";
+import { getTextValue } from "./Utility";
+//TODO add a style property
+//TODO add metadata documentation
+// component that renders a dropdown with a search filter
+/**
+ * JSX Component for displaying selected images in a fullscreen Modal
+ * @param {object} props
+ * @param {T[]} props.data array of data objects
+ * @param {number} [props.selectedId] id of the selected data object
+ * @param {T} [props.selectedData] if there is no identity key in the object and you need to compare the entire object, use this instead of selectedId
+ * @param {Function} props.onChange function to call when the selected value changes
+ * @param {(keyof T)[] } props.textFields array of field names to use for text values
+ * @param {string} [props.separator] optional separator to use for concatenating text values
+ * @param {object} [props.disabled] boolean to disable the dropdown
+ * @param {keyof T} [props.idField] if the id field to look at isn't 'id', what is it?
+ * @param {string} [props.title] the label of the dropdown
+ * @param {boolean} [props.showClearButton] set to false if you want to hide clear button
+ * @param {CSSProperties} [props.style] the CSS Properties you want to use. It is generally recommended to do styling in your App.css file but if necessary this prop is available to you
+ * @returns
+ */
+export function GenericDropdown({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, }) {
+    if (selectedId !== undefined && selectedData !== undefined) {
+        throw new Error("You cannot provide both selectedData and selectedId to GenericDropdown.");
+    }
+    useEffect(() => {
+        console.log(selectedId);
+    }, [selectedId]);
+    //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),
+    });
+    //external function variables
+    const filteredData = useRef(dataList.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);
+        else
+            filteredData.current = dataList;
+        const newData = filteredData.current.slice(0, pageSize);
+        setState({
+            subsetData: newData,
+            skip: 0,
+            total: filteredData.current.length,
+        });
+    };
+    // function to handle page changes for virtualization
+    const pageChange = (event) => {
+        const skip = event.page.skip;
+        const take = event.page.take;
+        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]);
+    const findByIndex = (id, idKey, data) => {
+        console.log(id, data, idField);
+        const item = data.find((item) => id === item[idKey || "id"]);
+        console.log(item);
+        return item;
+    };
+    const findByValue = (item, data) => {
+        console.log(item, data);
+        const returnVal = data.find((x) => JSON.stringify(Object.assign(Object.assign({}, x), selectedData)) === JSON.stringify(Object.assign({}, x)));
+        console.log(returnVal);
+        return returnVal;
+    };
+    return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: _jsx(ComboBox, { style: style, label: title, disabled: disabled, data: state.subsetData, textField: "textValue", virtual: {
+                // enable virtualization for large datasets
+                total: state.total,
+                pageSize: pageSize,
+                skip: state.skip,
+            }, suggest: true, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
+                height: "210px",
+            }, onChange: (e) => onChange(e), onBlur: (e) => e.nativeEvent.preventDefault(), clearButton: !hideClearButton, value: !selectedId && !selectedData ? null : findByIndex(selectedId, idField, dataList) || findByValue(selectedData, dataList) || null }) })));
+}

package/MultiSelectDropdown.d.ts

@@ -0,0 +1,9 @@
+export declare function MultiSelectDropdown<T>({ data, selectedData, textFields, selectEvent, title, separator, limit, }: {
+    data: T[];
+    selectedData: T[];
+    textFields: (keyof T)[];
+    selectEvent: Function;
+    title?: string;
+    separator?: string;
+    limit?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/MultiSelectDropdown.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, 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, }) {
+    //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),
+    });
+    //external function variables
+    const filteredData = useRef(dataList.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);
+        else
+            filteredData.current = dataList;
+        const newData = filteredData.current.slice(0, pageSize);
+        setState({
+            subsetData: newData,
+            skip: 0,
+            total: filteredData.current.length,
+        });
+    };
+    // function to handle page changes for virtualization
+    const pageChange = (event) => {
+        const skip = event.page.skip;
+        const take = event.page.take;
+        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: {
+                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 }) })));
+}

package/{src/PropTypes.ts → PropTypes.d.ts}

@@ -2,7 +2,6 @@ export type CommonProps = {
     isEditing?: boolean;
     id?: number;
 };
-
 export type GridChangeEvent = {
     value: any;
     field?: string;

package/PropTypes.js

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

package/Toolbar.d.ts

@@ -0,0 +1,10 @@
+type CommonProps = {
+    id: number;
+    isEditing?: boolean;
+};
+export declare function ToolbarButton<T extends CommonProps>({ item, data, setData }: {
+    item: T;
+    data: T[];
+    setData: Function;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/Toolbar.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ToolbarButton({ item, data, setData }) {
+    return (_jsx("button", Object.assign({ title: "Add new", className: "k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary", onClick: () => setData([Object.assign(Object.assign({}, item), { isEditing: true, id: 0 }), ...data]), disabled: data.find((x) => x.isEditing) ? true : false }, { children: "Add Another" })));
+}

package/Utility.d.ts

@@ -0,0 +1 @@
+export declare const getTextValue: (dataItem: any, fields: string[], separator?: string) => string;

package/{src/Utility.ts → Utility.js}

@@ -1,5 +1,5 @@
 // function to concatenate text values from dataItem using specified fields and separator
-export const getTextValue = (dataItem: any, fields: string[], separator?: string) => {
+export const getTextValue = (dataItem, fields, separator) => {
     let textValue = "";
     fields.forEach((field, index) => (textValue += index > 0 ? (separator ? separator : " ") + dataItem[field] : dataItem[field]));
     return textValue;

package/commandCell/CommandCellCheckbox.d.ts

@@ -0,0 +1,5 @@
+export declare function CommandCellCheckBox({ checked, onCheck, onUncheck }: {
+    checked: boolean;
+    onCheck: Function;
+    onUncheck: Function;
+}): import("react/jsx-runtime").JSX.Element;

package/commandCell/CommandCellCheckbox.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from "@progress/kendo-react-inputs";
+export function CommandCellCheckBox({ checked, onCheck, onUncheck }) {
+    const functionToRun = () => {
+        if (checked) {
+            onUncheck();
+        }
+        else {
+            onCheck();
+        }
+    };
+    return (_jsx("td", Object.assign({ className: "justify-content-center", "data-testid": "checkbox" }, { children: _jsx(Checkbox, { checked: checked, onChange: functionToRun }) })));
+}

package/commandCell/CommandCellDDWithoutId.d.ts

@@ -0,0 +1,11 @@
+import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
+export declare function CommandCellDDWithoutId<T>(props: {
+    data: T[];
+    selectedData: T;
+    textFields: (keyof T)[];
+    onChange: (e: ComboBoxChangeEvent) => void;
+    separator?: string;
+    checkEditField?: boolean;
+    isEditing?: boolean;
+    showClearButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/commandCell/CommandCellDDWithoutId.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GenericDropdown } from "../GenericDropdown";
+export function CommandCellDDWithoutId(props) {
+    return (_jsx("td", { children: props.checkEditField && !props.isEditing ? (props.textFields.map((x) => props.data.find((y) => y === props.selectedData)[x]).join(props.separator || " ")) : (
+        // 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/CommandCellDate.d.ts

@@ -0,0 +1,6 @@
+import { CommonProps, GridChangeEvent } from "../PropTypes";
+export declare function CommandCellDate<T extends CommonProps>({ dataItem, chgFn: changeFunction, field, }: {
+    dataItem: T;
+    chgFn: (e: GridChangeEvent) => void;
+    field: keyof T;
+}): import("react/jsx-runtime").JSX.Element;

package/commandCell/CommandCellDate.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatePicker } from "@progress/kendo-react-dateinputs";
+import moment from "moment";
+export function CommandCellDate({ dataItem, chgFn: changeFunction, field, }) {
+    let valString = "" + dataItem[field];
+    let date = moment(valString).format("MM/DD/YY");
+    return (_jsx("td", Object.assign({ "data-testid": "date" }, { children: valString === undefined || dataItem.isEditing ? (_jsx(DatePicker, { value: new Date(moment(valString).format("MMMM, DD YYYY")), onChange: (e) => changeFunction({
+                field: field.toString(),
+                value: moment(e.value),
+                dataItem: dataItem,
+            }) })) : (date) })));
+}

package/commandCell/CommandCellDropdown.d.ts

@@ -0,0 +1,12 @@
+import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
+export declare function CommandCellDropdown<T>(props: {
+    data: T[];
+    selectedId: number;
+    textFields: (keyof T)[];
+    onChange: (e: ComboBoxChangeEvent) => void;
+    separator?: string;
+    checkEditField?: boolean;
+    isEditing?: boolean;
+    idField?: keyof T;
+    showClearButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/commandCell/CommandCellDropdown.js

@@ -0,0 +1,11 @@
+import { 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.textFields
+            .map((x) => props.data.find((y) => y[props.idField ? props.idField : "id"] === props.selectedId)[x])
+            .join(props.separator || " ")) : (
+        // 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/CommandCellPrice.d.ts

@@ -0,0 +1,3 @@
+export declare function CommandCellPrice({ cost }: {
+    cost: number;
+}): import("react/jsx-runtime").JSX.Element;

package/commandCell/CommandCellPrice.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CommandCellPrice({ cost }) {
+    let formattedCost = new Intl.NumberFormat("en", {
+        style: "currency",
+        currency: "USD",
+        minimumSignificantDigits: 2,
+        maximumFractionDigits: 3,
+    }).format(cost);
+    return _jsx("td", Object.assign({ "data-testid": "price" }, { children: formattedCost }));
+}

package/commandCell/CommandCellSwitch.d.ts

@@ -0,0 +1,5 @@
+import { GridCellProps } from "@progress/kendo-react-grid";
+export declare function CommandCellSwitch({ props, changeFunction }: {
+    props: GridCellProps;
+    changeFunction: Function;
+}): import("react/jsx-runtime").JSX.Element;

package/commandCell/CommandCellSwitch.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch } from "@progress/kendo-react-inputs";
+export function CommandCellSwitch({ props, changeFunction }) {
+    return (_jsx("td", Object.assign({ "data-testid": "switch" }, { children: props.dataItem.isEditing ? (_jsx(Switch, { onChange: () => changeFunction(), checked: props.dataItem[props.field] })) : (props.dataItem[props.field].toString()) })));
+}

package/index.js

@@ -0,0 +1,10 @@
+export { CommandCellCheckBox } from "./commandCell/CommandCellCheckbox";
+export { CommandCellDate } from "./commandCell/CommandCellDate";
+export { CommandCellDropdown } from "./commandCell/CommandCellDropdown";
+export { CommandCellDDWithoutId } from "./commandCell/CommandCellDDWithoutId";
+export { CommandCellPrice } from "./commandCell/CommandCellPrice";
+export { CommandCellSwitch } from "./commandCell/CommandCellSwitch";
+export { FilterCellDropdown } from "./FilterCellDropdown";
+export { ToolbarButton } from "./Toolbar";
+export { GenericDropdown } from "./GenericDropdown";
+export { MultiSelectDropdown } from "./MultiSelectDropdown";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@scheels-softdev/kendoreact-generics",
-    "version": "2.2.4",
+    "version": "2.2.6",
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",

package/src/FilterCellDropdown.tsx

@@ -1,47 +0,0 @@
-import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
-import { GridFilterCellProps } from "@progress/kendo-react-grid";
-import { Button } from "@progress/kendo-react-buttons";
-import { GenericDropdown } from "./GenericDropdown";
-
-interface DropdownFilterCellProps<T> extends GridFilterCellProps {
-    data: T[];
-    textFields: (keyof T)[];
-    separator?: string;
-}
-
-// Define the DropdownFilterCell component with props of type DropdownFilterCellProps
-export function FilterCellDropdown<T>(props: DropdownFilterCellProps<T>) {
-    // Define a function that returns true if a value is not undefined or null, and is different from the default item
-    let hasValue: any = (value: string) => Boolean(value);
-
-    // Define an onChange function that will be called when the ComboBox value changes
-    const onChange = (event: ComboBoxChangeEvent) => {
-        // Update the hasValue variable based on the new value of the ComboBox
-        hasValue = hasValue(event?.target?.value?.id);
-        // Call the onChange function passed down as a prop, passing a filter object with the new value and operator
-        props.onChange({
-            value: hasValue ? event.target.value.id : "", // Use the ID of the selected value as the filter value
-            operator: hasValue ? "eq" : "", // Use the "eq" operator if the value is non-empty, otherwise use an empty string
-            syntheticEvent: event.syntheticEvent,
-        });
-    };
-
-    // Define an onClearButtonClick function that will be called when the Clear button is clicked
-    const onClearButtonClick = (event: any) => {
-        event.preventDefault();
-        // Call the onChange function passed down as a prop, passing a filter object with empty values
-        props.onChange({
-            value: "", // Set the filter value to an empty string
-            operator: "", // Set the operator to an empty string
-            syntheticEvent: event,
-        });
-    };
-
-    // Render a div containing a GenericDropdownWithSearch component and a Clear button
-    return (
-        <div className="k-filtercell" data-testid="dropdownFilter">
-            <GenericDropdown data={props.data} onChange={onChange} selectedId={props.value} textFields={[...props.textFields]} separator={props.separator} />
-            <Button title="Clear" disabled={!hasValue(props.value)} onClick={onClearButtonClick} icon="filter-clear" />
-        </div>
-    );
-}

package/src/GenericDropdown.tsx

@@ -1,152 +0,0 @@
-import { ComboBox, ComboBoxFilterChangeEvent, ComboBoxPageChangeEvent } from "@progress/kendo-react-dropdowns";
-import { filterBy } from "@progress/kendo-data-query";
-import { CSSProperties, useEffect, useRef, useState } from "react";
-import { getTextValue } from "./Utility";
-//TODO add a style property
-//TODO add metadata documentation
-// component that renders a dropdown with a search filter
-/**
- * JSX Component for displaying selected images in a fullscreen Modal
- * @param {object} props
-    @param {T[]} [props.data] array of data objects
-    @param {number | undefined} [props.selectedId] id of the selected data object
-    @param {T | undefined} [props.selectedData] if there is no identity key in the object and you need to compare the entire object, use this instead of selectedId
-    @param {Function} [props.onChange] function to call when the selected value changes
-    @param {(keyof T)[] } [props.textFields] array of field names to use for text values
-    @param {string | undefined} [props.separator] optional separator to use for concatenating text values
-    @param {object | undefined} [props.disabled] boolean to disable the dropdown
-    @param {keyof T | undefined} [props.idField] if the id field to look at isn't 'id', what is it?
-    @param {string | undefined} [props.title] the label of the dropdown
-    @param {boolean | undefined} [props.showClearButton] set to false if you want to hide clear button
-    @param {CSSProperties | undefined} [props.style] the CSS Properties you want to use. It is generally recommended to do styling in your App.css file but if necessary this prop is available to you
- * @returns
- */
-export function GenericDropdown<T>({
-    data,
-    selectedId,
-    selectedData,
-    onChange,
-    textFields,
-    separator,
-    disabled,
-    idField,
-    title,
-    hideClearButton,
-    style,
-}: {
-    data: T[];
-    selectedId?: number;
-    selectedData?: T;
-    onChange: Function;
-    textFields: (keyof T)[];
-    separator?: string;
-    idField?: keyof T;
-    disabled?: boolean;
-    title?: string;
-    hideClearButton?: boolean;
-    style?: CSSProperties;
-}) {
-    if (selectedId !== undefined && selectedData !== undefined) {
-        throw new Error("You cannot provide both selectedData and selectedId to GenericDropdown.");
-    }
-    useEffect(() => {
-        console.log(selectedId);
-    }, [selectedId]);
-    //local state
-    const pageSize = 8;
-    const [dataList, setDataList] = useState(
-        data.map((x) => {
-            return {
-                ...x,
-                textValue: getTextValue(
-                    x,
-                    textFields.map((x) => x.toString()),
-                    separator
-                ),
-            };
-        })
-    );
-    const [state, setState] = useState({
-        skip: 0,
-        total: dataList.length,
-        subsetData: dataList.slice(0, pageSize),
-    });
-
-    //external function variables
-    const filteredData = useRef(dataList.slice());
-    //function creation
-    // function to handle filter changes
-    const onFilterChange = (event: ComboBoxFilterChangeEvent) => {
-        if (event.filter.value?.length) filteredData.current = filterBy(dataList.slice(), event.filter);
-        else filteredData.current = dataList;
-        const newData = filteredData.current.slice(0, pageSize);
-        setState({
-            subsetData: newData,
-            skip: 0,
-            total: filteredData.current.length,
-        });
-    };
-    // function to handle page changes for virtualization
-    const pageChange = (event: ComboBoxPageChangeEvent) => {
-        const skip = event.page.skip;
-        const take = event.page.take;
-        const newSubsetData = filteredData.current.slice(skip, skip + take);
-        setState({ ...state, subsetData: newSubsetData, skip: skip });
-    };
-
-    //change event listeners
-    useEffect(() => {
-        setDataList(
-            data.map((x) => {
-                return {
-                    ...x,
-                    textValue: getTextValue(
-                        x,
-                        textFields.map((x) => x.toString()),
-                        separator
-                    ),
-                };
-            })
-        );
-    }, [data, textFields, separator]);
-    const findByIndex = (id: number | undefined, idKey: keyof T | undefined, data: T[]) => {
-        console.log(id, data, idField);
-        const item = data.find((item: any) => id === item[idKey || "id"]);
-        console.log(item);
-        return item;
-    };
-    const findByValue = (item: T | undefined, data: T[]) => {
-        console.log(item, data);
-        const returnVal = data.find((x) => JSON.stringify({ ...x, ...selectedData }) === JSON.stringify({ ...x }));
-        console.log(returnVal);
-        return returnVal;
-    };
-    return (
-        <div data-testid={"dropdown"}>
-            <ComboBox
-                style={style}
-                label={title}
-                disabled={disabled}
-                data={state.subsetData} // data to display in the dropdown
-                textField={"textValue"} // name of the field to use for display text
-                virtual={{
-                    // enable virtualization for large datasets
-                    total: state.total,
-                    pageSize: pageSize,
-                    skip: state.skip,
-                }}
-                suggest
-                onPageChange={pageChange} // handle page changes for virtualization
-                filterable={true} // enable filter
-                onFilterChange={onFilterChange} // handle filter changes
-                popupSettings={{
-                    height: "210px",
-                }}
-                onChange={(e) => onChange(e)}
-                onBlur={(e) => e.nativeEvent.preventDefault()}
-                clearButton={!hideClearButton}
-                value={!selectedId && !selectedData ? null : findByIndex(selectedId, idField, dataList) || findByValue(selectedData, dataList) || null}
-            />
-        </div>
-    );
-}

package/src/MultiSelectDropdown.tsx

@@ -1,105 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { filterBy } from "@progress/kendo-data-query";
-import { MultiSelect, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent } from "@progress/kendo-react-dropdowns";
-import { getTextValue } from "./Utility";
-
-export function MultiSelectDropdown<T>({
-    data,
-    selectedData,
-    textFields,
-    selectEvent,
-    title,
-    separator,
-    limit,
-}: {
-    data: T[];
-    selectedData: T[];
-    textFields: (keyof T)[];
-    selectEvent: Function;
-    title?: string;
-    separator?: string;
-    limit?: number;
-}) {
-    //local state
-    const pageSize = 8;
-    const [dataList, setDataList] = useState(
-        data.map((x) => {
-            return {
-                ...x,
-                textValue: getTextValue(
-                    x,
-                    textFields.map((x) => x.toString()),
-                    separator
-                ),
-            };
-        })
-    );
-    const [state, setState] = useState({
-        skip: 0,
-        total: dataList.length,
-        subsetData: dataList.slice(0, pageSize),
-    });
-
-    //external function variables
-    const filteredData = useRef(dataList.slice());
-    //function creation
-    // function to handle filter changes
-    const onFilterChange = (event: MultiSelectFilterChangeEvent) => {
-        if (event.filter.value?.length) filteredData.current = filterBy(dataList.slice(), event.filter);
-        else filteredData.current = dataList;
-        const newData = filteredData.current.slice(0, pageSize);
-        setState({
-            subsetData: newData,
-            skip: 0,
-            total: filteredData.current.length,
-        });
-    };
-    // function to handle page changes for virtualization
-    const pageChange = (event: MultiSelectPageChangeEvent) => {
-        const skip = event.page.skip;
-        const take = event.page.take;
-        const newSubsetData = filteredData.current.slice(skip, skip + take);
-        setState({ ...state, subsetData: newSubsetData, skip: skip });
-    };
-
-    //change event listeners
-    useEffect(() => {
-        setDataList(
-            data.map((x) => {
-                return {
-                    ...x,
-                    textValue: getTextValue(
-                        x,
-                        textFields.map((x) => x.toString()),
-                        separator
-                    ),
-                };
-            })
-        );
-    }, [data, textFields, separator]);
-
-    return (
-        <div data-testid={"multiselect"} style={{ width: "100%" }}>
-            <MultiSelect
-                label={title}
-                data={state.subsetData}
-                textField={"textValue"} // name of the field to use for display text
-                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} ///right now: clears selected values whenever selected Vendor Value changes. This will need to be changed to something better in the future
-            />
-        </div>
-    );
-}

package/src/Toolbar.tsx

@@ -1,16 +0,0 @@
-type CommonProps = {
-    id: number;
-    isEditing?: boolean;
-};
-export function ToolbarButton<T extends CommonProps>({ item, data, setData }: { item: T; data: T[]; setData: Function }) {
-    return (
-        <button
-            title="Add new"
-            className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary"
-            onClick={() => setData([{ ...item, isEditing: true, id: 0 }, ...data])}
-            disabled={data.find((x) => x.isEditing) ? true : false}
-        >
-            Add Another
-        </button>
-    );
-}

package/src/commandCell/CommandCellCheckbox.tsx

@@ -1,17 +0,0 @@
-import { Checkbox } from "@progress/kendo-react-inputs";
-
-export function CommandCellCheckBox({ checked, onCheck, onUncheck }: { checked: boolean; onCheck: Function; onUncheck: Function }) {
-    const functionToRun = () => {
-        if (checked) {
-            onUncheck();
-        } else {
-            onCheck();
-        }
-    };
-
-    return (
-        <td className="justify-content-center" data-testid="checkbox">
-            <Checkbox checked={checked} onChange={functionToRun} />
-        </td>
-    );
-}

package/src/commandCell/CommandCellDDWithoutId.tsx

@@ -1,24 +0,0 @@
-import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
-import { GenericDropdown } from "../GenericDropdown";
-
-export function CommandCellDDWithoutId<T>(props: {
-    data: T[];
-    selectedData: T;
-    textFields: (keyof T)[];
-    onChange: (e: ComboBoxChangeEvent) => void;
-    separator?: string;
-    checkEditField?: boolean;
-    isEditing?: boolean;
-    showClearButton?: boolean;
-}) {
-    return (
-        <td>
-            {props.checkEditField && !props.isEditing ? (
-                props.textFields.map((x) => props.data.find((y) => y === props.selectedData)![x]).join(props.separator || " ")
-            ) : (
-                // If "props.checkEditField" is false or "props.isEditing" is true, render the GenericDropdownWithSearch component with the "props" passed to it
-                <GenericDropdown {...props} />
-            )}
-        </td>
-    );
-}

package/src/commandCell/CommandCellDate.tsx

@@ -1,33 +0,0 @@
-import { DatePicker } from "@progress/kendo-react-dateinputs";
-import moment from "moment";
-import { CommonProps, GridChangeEvent } from "../PropTypes";
-export function CommandCellDate<T extends CommonProps>({
-    dataItem,
-    chgFn: changeFunction,
-    field,
-}: {
-    dataItem: T;
-    chgFn: (e: GridChangeEvent) => void;
-    field: keyof T;
-}) {
-    let valString = "" + dataItem[field];
-    let date = moment(valString).format("MM/DD/YY");
-    return (
-        <td data-testid="date">
-            {valString === undefined || dataItem.isEditing ? (
-                <DatePicker
-                    value={new Date(moment(valString).format("MMMM, DD YYYY"))}
-                    onChange={(e) =>
-                        changeFunction({
-                            field: field.toString(),
-                            value: moment(e.value),
-                            dataItem: dataItem,
-                        })
-                    }
-                />
-            ) : (
-                date
-            )}
-        </td>
-    );
-}

package/src/commandCell/CommandCellDropdown.tsx

@@ -1,30 +0,0 @@
-import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
-import { GenericDropdown } from "../GenericDropdown";
-import { CommonProps } from "../PropTypes";
-
-// 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<T>(props: {
-    data: T[];
-    selectedId: number;
-    textFields: (keyof T)[];
-    onChange: (e: ComboBoxChangeEvent) => void;
-    separator?: string;
-    checkEditField?: boolean;
-    isEditing?: boolean;
-    idField?: keyof T;
-    showClearButton?: boolean;
-}) {
-    return (
-        <td>
-            {props.checkEditField && !props.isEditing ? (
-                props.textFields
-                    .map((x) => props.data.find((y: any) => y[props.idField ? props.idField : "id"] === props.selectedId)![x])
-                    .join(props.separator || " ")
-            ) : (
-                // If "props.checkEditField" is false or "props.isEditing" is true, render the GenericDropdownWithSearch component with the "props" passed to it
-                <GenericDropdown {...props} />
-            )}
-        </td>
-    );
-}

package/src/commandCell/CommandCellPrice.tsx

@@ -1,9 +0,0 @@
-export function CommandCellPrice({ cost }: { cost: number }) {
-    let formattedCost: any = new Intl.NumberFormat("en", {
-        style: "currency",
-        currency: "USD",
-        minimumSignificantDigits: 2,
-        maximumFractionDigits: 3,
-    }).format(cost);
-    return <td data-testid="price">{formattedCost}</td>;
-}

package/src/commandCell/CommandCellSwitch.tsx

@@ -1,14 +0,0 @@
-import { GridCellProps } from "@progress/kendo-react-grid";
-import { Switch } from "@progress/kendo-react-inputs";
-
-export function CommandCellSwitch({ props, changeFunction }: { props: GridCellProps; changeFunction: Function }) {
-    return (
-        <td data-testid="switch">
-            {props.dataItem.isEditing ? (
-                <Switch onChange={() => changeFunction()} checked={props.dataItem[props.field!]} />
-            ) : (
-                props.dataItem[props.field!].toString()
-            )}
-        </td>
-    );
-}

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-    "compilerOptions": {
-        "strict": true,
-        "jsx": "react-jsx",
-        "declaration": true,
-        "esModuleInterop": true,
-        "outDir": "dist",
-        "target": "es6",
-        "module": "es6",
-        "moduleResolution": "node"
-    },
-    "include": ["src"]
-}