@scheels-softdev/kendoreact-generics 2.9.8 → 3.0.1

package/GenericDropdown.d.ts

@@ -1,29 +1,14 @@
-import { CSSProperties } from "react";
-/**
- * JSX Component for displaying items in a virtualized combobox
- * @template T - The type of the data objects in the dropdown.
- * @param {object} props - The component props.
- * @returns {JSX.Element}
- */
+import React from "react";
 type GenericDDProps<T> = {
     data: T[];
-    /** The ID of the currently selected item. (optional)*/
-    selectedId?: number;
-    /** The currently selected data object. (optional)*/
+    selectedId?: string | number;
     selectedData?: T;
-    /** Callback function triggered when the selected value changes*/
-    onChange: Function;
-    /**  The field names used to extract text values for display */
+    onChange: (selectedItem: T | null) => void;
     textField: keyof T;
-    /**  Determines whether the dropdown is disabled. (optional)*/
     idField?: keyof T;
-    /** The Determines whether the clear button is hidden from the dropdown. (optional)*/
-    hideClearButton?: boolean;
-    /** Custom CSS properties for the component. (optional)*/
-    style?: CSSProperties;
+    style?: React.CSSProperties;
     isLoading?: boolean;
-    suggest?: boolean;
     title?: string;
 };
-export declare function GenericDropdown<T>(props: GenericDDProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function GenericDropdown<T extends Record<string, any>>({ data, selectedId, selectedData, onChange, textField, idField, isLoading, title, }: GenericDDProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/GenericDropdown.js

@@ -1,36 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { filterBy } from "@progress/kendo-data-query";
-import { ComboBox } from "@progress/kendo-react-dropdowns";
-import { useState, useRef } from "react";
-const pageSize = 12;
-export function GenericDropdown(props) {
-    var _a, _b, _c, _d;
-    const filteredData = useRef(props.data.slice());
-    const [state, setState] = useState({
-        subsetData: props.data.slice(0, pageSize),
-        skip: 0,
-        total: props.data.length,
-    });
-    const filterChange = (event) => {
-        filteredData.current = filterBy(props.data.slice(), event.filter);
-        const data = filteredData.current.slice(0, pageSize);
-        setState({
-            subsetData: data,
-            skip: 0,
-            total: filteredData.current.length,
-        });
+import Select from "react-select";
+export function GenericDropdown({ data, selectedId, selectedData, onChange, textField, idField, isLoading, title, }) {
+    const options = data.map((item) => ({
+        value: item,
+        label: item[textField].toString(),
+    }));
+    const selectedOption = selectedId
+        ? options.find((option) => option.value.id === (selectedId === null || selectedId === void 0 ? void 0 : selectedId.toString()))
+        : options.find((option) => option.value === selectedData);
+    const handleChange = (selectedOption) => {
+        if (selectedOption) {
+            const selectedItem = idField
+                ? data.find((item) => item[idField].toString() === selectedOption.value.id)
+                : data.find((item) => item === selectedOption.value);
+            onChange(selectedItem || null);
+        }
+        else {
+            onChange(null);
+        }
     };
-    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 }));
-    };
-    return (_jsx(ComboBox, { data: state.subsetData, dataItemKey: (_b = (_a = props.idField) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : undefined, textField: props.textField.toString(), virtual: {
-            total: state.total,
-            pageSize: pageSize,
-            skip: state.skip,
-        }, label: (_c = props.title) !== null && _c !== void 0 ? _c : "Select an option", onPageChange: pageChange, onFilterChange: filterChange, filterable: true, popupSettings: {
-            height: "250px",
-        }, defaultValue: props, style: Object.assign({ width: "300px" }, props.style), onChange: (event) => props.onChange(event), disabled: props.isLoading, value: (_d = props.selectedData) !== null && _d !== void 0 ? _d : props.data.find((d) => d[props.idField] === props.selectedId), clearButton: props.hideClearButton ? undefined : true }));
+    return (_jsx(Select, { options: options, onChange: handleChange, value: selectedOption, isLoading: isLoading, isDisabled: isLoading, placeholder: title || "Select an option" }));
 }

package/_index.test.js

@@ -56,7 +56,7 @@ describe("GenericDropdown", () => {
         // 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 result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = e), 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");
@@ -72,7 +72,7 @@ describe("GenericDropdown", () => {
         // 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" }));
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedId = (e === null || e === void 0 ? void 0 : e.id) || null), 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");
@@ -88,7 +88,7 @@ describe("GenericDropdown", () => {
         // 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 result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = e), 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

package/index.d.ts

@@ -1,9 +1,7 @@
 export { CommandCellCheckBox } from "./commandCell/CommandCellCheckbox";
 export { CommandCellDate } from "./commandCell/CommandCellDate";
-export { CommandCellDropdown } from "./commandCell/CommandCellDropdown";
 export { CommandCellPrice } from "./commandCell/CommandCellPrice";
 export { CommandCellSwitch } from "./commandCell/CommandCellSwitch";
-export { FilterCellDropdown } from "./FilterCellDropdown";
 export { ToolbarButton } from "./Toolbar";
 export { GenericDropdown } from "./GenericDropdown";
 export { GridChangeEvent, CommonProps } from "./PropTypes";

package/index.js

@@ -1,9 +1,7 @@
 export { CommandCellCheckBox } from "./commandCell/CommandCellCheckbox";
 export { CommandCellDate } from "./commandCell/CommandCellDate";
-export { CommandCellDropdown } from "./commandCell/CommandCellDropdown";
 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.9.8",
+    "version": "3.0.1",
     "main": "index.js",
     "scripts": {
         "test": "jest",
@@ -23,12 +23,15 @@
         "@testing-library/react": "^14.0.0",
         "@types/jest": "^29.5.3",
         "@types/react": "latest",
+        "framer-motion": "^11.0.23",
         "jest": "^29.6.2",
         "jest-environment-jsdom": "^29.6.2",
         "moment": "latest",
         "npmrc": "latest",
         "react": "latest",
         "react-dom": "latest",
+        "react-icons": "^5.0.1",
+        "react-select": "^5.8.0",
         "typescript": "latest"
     },
     "devDependencies": {

package/FilterCellDropdown.d.ts

@@ -1,9 +0,0 @@
-import { GridFilterCellProps } from "@progress/kendo-react-grid";
-interface DropdownFilterCellProps<T> extends GridFilterCellProps {
-    /** The data to populate the dropdown options */
-    data: T[];
-    /** The field names used to extract text values for display */
-    textField: keyof T;
-}
-export declare function FilterCellDropdown<T>(props: DropdownFilterCellProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

package/FilterCellDropdown.js

@@ -1,32 +0,0 @@
-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, textField: props.textField }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
-}

package/commandCell/CommandCellDDWithoutId.d.ts

@@ -1,19 +0,0 @@
-import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
-export declare function CommandCellDDWithoutId<T>(props: {
-    /** The data array for the dropdown options. */
-    data: T[];
-    /** The currently selected data item. */
-    selectedData: T;
-    /** The field names to use for text values in the dropdown. */
-    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. */
-    separator?: string;
-    /** Determines if the edit field should be checked. */
-    checkEditField?: boolean;
-    /** Determines if the cell is in an editing state. */
-    isEditing?: boolean;
-    /** Determines if the clear button should be displayed in the dropdown. */
-    showClearButton?: boolean;
-}): import("react/jsx-runtime").JSX.Element;

package/commandCell/CommandCellDDWithoutId.js

@@ -1,9 +0,0 @@
-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 ? (_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

@@ -1,20 +0,0 @@
-export declare function CommandCellDropdown<T>(props: {
-    /** The data array for the dropdown options. */
-    data: T[];
-    /** The ID of the currently selected item. */
-    selectedId: number;
-    /** The field names to use for text values in the dropdown. */
-    textField: keyof T;
-    /** Callback function to be called when the selected value changes. */
-    onChange: () => void;
-    /** Optional separator to use for concatenating text values. */
-    separator?: string;
-    /** Determines if the edit field should be checked. */
-    checkEditField?: boolean;
-    /** Determines if the cell is in an editing state. */
-    isEditing?: boolean;
-    /** The field to use as the identity key. */
-    idField?: keyof T;
-    /** Determines if the clear button should be displayed in the dropdown. */
-    showClearButton?: boolean;
-}): import("react/jsx-runtime").JSX.Element;

package/commandCell/CommandCellDropdown.js

@@ -1,10 +0,0 @@
-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 ? (_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))) }));
-}