dropdowns-js 1.1.6 → 2.0.0

package/dist/types/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/types/MultiSelectionDropdownObjTest.d.ts

@@ -0,0 +1,29 @@
+/**File: ./src/MultiSelectionDropdownTest.jsx
+ * Author: ITA
+ * MultiSelectionDropdownTest: A sample component demonstrating the use of the MultiSelectionDropdown.
+ *
+ * Change Log
+ * =========================================================
+ * Start Date  End Date    Version   Dev     Description
+ * =========================================================
+ * 2025/12/19              1.0.0     ITA     Genesis.
+ * 2026/01/11  2026/01/16  1.0.1     ITA     Working with MultiSelectionObj dropdown no longer requires a Collections context provider.
+ * 2026/01/20  2026/01/27  1.0.2     ITA     Added a test for selReset prop.
+ * 2026/05/11  2026/05/15  2.0.0     ITA     Changed the file extension to .tsx and migrated to Typescript.
+ * ==========================================================
+*/
+/** VERY IMPORTANT!!!
+ * Depending on how you are testing the components, you need to uncomment the appropriate import statements below.
+ *
+ * Test type 1:
+ * If you are testing the dropdown components as part of this project,
+ * then import MultiSelectionDropdown from the local filepath of this project.
+ *
+ * Test type 2:
+ * If you are testing the component as an npm package, then import from 'dropdowns-js'.
+ *
+ *
+ * Based on the above, please comment/uncomment the appropriate import statements below.
+ */
+import 'dropdowns-js/style.css';
+export default function MultiSelectionDropdownObjTest(): import("react/jsx-runtime").JSX.Element;

package/dist/types/dropdowns/Dropdown.d.ts

@@ -0,0 +1,51 @@
+/**
+ * File: ./src/dropdowns/Dropdown.tsx
+ * ------------------------------------------------------------------------------------------------------
+ * Description:
+ * Provide a single selection searchable dropdown that takes an array of primitive types.
+ * * ----------------------------------------------------------------------------------------------------
+ * Start Date  End Date      Dev     Version   Description
+ * 2023/12/19                ITA     1.00      Genesis.
+ * 2024/06/18                ITA     1.01      Add the version number.
+ * 2024/09/17                ITA     1.02      Toggle (add/remove) class name (w3-show) for displaying list items. Remove the style attribute.
+ *                                             Adjust width and add borders.
+ *                                             Import context directly.
+ * 2024/10/11                ITA     1.04      Reduce the width of the text box so that it appears side by side with the drop-down on even smaller screens.
+ * 2024/10/28                ITA     1.05      Improve the responsiveness of the Dropdown.
+ * 2025/12/18                ITA     1.06      Performed further tweaks and tests, preparing this component for npm publishing.
+ * 2025/12/26                ITA     1.07      Changed the arrow symbols to + and - for better visibility across different platforms.
+ * 2025/12/29                ITA     1.08      Placeholder must show the name of the data, as provided by the label attribute.
+ * 2026/01/11  2026/01/16    ITA     1.09      Improved the component so that it stores its own data instead of relying on the Collections context provider.
+ * 2026/01/17  2026/01/17    ITA     1.10      Removed attributes that do no apply to this component.
+ *                                             Corrected the description of 'selected' attribute in the function header.
+ * 2026/01/17  2026/01/17    ITA     1.11      Corrected the component proptypes to include onItemSelected, instead of onItemsSelected.
+ * 2026/01/19  2026/01/19    ITA     1.12      Used useId() to ensure the uniqueness of ids of the concerned html elements even when the component is used multiple times in the same page.
+ * 2026/01/20  2026/02/01    ITA     1.13      Added a 'selReset' attribute. When set to true, the dropdown updates to the default selected item when this value changes in the parent component.
+ *                                             Combined searchItems and list state variables into a single variable: list.
+ *                                             Improved the logic for setting selected items.
+ * 2026/05/11  2026/05/15    ITA     2.0.0     Changed the file extension to .tsx and migrated to Typescript.
+ */
+import { JSX } from 'react';
+import './dropdown.css';
+import { DropdownStyle, ButtonStyle } from './dropdowns.models.js';
+interface DropdownPropTypes<T> {
+    label: string;
+    data: NonNullable<T>[];
+    sortOrder?: 'asc' | 'desc';
+    onItemSelected?: (selectedItem: T) => void;
+    selected?: T | null;
+    selReset?: boolean;
+    isDisabled?: boolean;
+    dropdownStyle: DropdownStyle;
+    buttonStyle?: ButtonStyle;
+}
+/**Single selection dropdown component.
+ */
+export declare function Dropdown<T extends number | string | bigint | boolean>({ label, // label with which to describe the dropdown.
+data, // Primitive type array.
+sortOrder, onItemSelected, // Function to pass on the value of the selected item to the parent component
+selected, // Initial selected item.
+selReset, // If true, selected item via parent component.
+dropdownStyle, // Styling object with fields {color, backgroundColor, borderColor (optional), fontSize}.
+isDisabled }: DropdownPropTypes<T>): JSX.Element;
+export {};

package/dist/types/dropdowns/DropdownObj.d.ts

@@ -0,0 +1,48 @@
+/**
+ * File: ./src/dropdowns/DropdownObj.tsx
+ * --------------------------------------------------------------------------------
+ * Description:
+ * Provide a single selection, searchable dropdown that takes an array of objects.
+ * A developer must specify which field name to use for displaying (the displayName), and which field name to use as value (valueName).
+ * * --------------------------------------------------------------------------------
+ * Start Date  End Date      Dev    Version Description
+ * 2023/12/19                ITA    1.00    Genesis.
+ * 2024/06/18                ITA    1.01    Add version number.
+ * 2024/07/14                ITA    1.02    Use the underlying field value (valueName) as the key when displaying collection items.
+ * 2024/09/17                ITA    1.03    Toggle (add/remove) class name (w3-show) for displaying list items. Remove the extra style attribute.
+ *                                          Adjust width and add borders.
+ *                                          Import context directly.
+ * 2024/10/11                ITA    1.04    Reduce the width of the text box so that it appears side by side with the drop-down on even smaller screens.
+ * 2024/10/28                ITA    1.05    Improve the responsiveness of the dropdown.
+ * 2025/12/18                ITA    1.06    Renamed to from Dropdown2 to DropdownObj, and performed further tweaks and tests towards preparing this component
+ *                                          for npm publishing.
+ * 2025/12/26                ITA    1.07    Changed the arrow symbols to + and - for better visibility across different platforms.
+ * 2025/12/29                ITA    1.08    Placeholder must show the name of the data as provided by the label attribute.
+ * 2026/01/11   2026/01/16   ITA    1.09    Improved the component so that it stores its own data instead of relying on the Collections context provider.
+ * 2026/01/19   2026/01/19   ITA    1.10    Used useId() to ensure the uniqueness of ids of the concerned html elements even when the component is used multiple times in the same page.
+ * 2026/01/20   2026/02/01   ITA    1.11    Added a 'selReset' attribute. When set to true, the dropdown updates to the default selected item when this value changes in the parent component.
+ *                                          Combined searchItems and list state variables into one: list.
+ *                                          Improved the logic for setting selected items.
+ * 2026/05/11   2026/05/15   ITA    2.0.0   Changed the file extension to .tsx and migrated to Typescript.
+*/
+import { JSX } from 'react';
+import './dropdown.css';
+import { DropdownStyle } from './dropdowns.models.js';
+interface DropdownObjPropTypes<T extends object> {
+    label: string;
+    data: NonNullable<T>[];
+    sortFields: string[];
+    selected?: T | null;
+    selReset?: boolean;
+    displayName: string;
+    valueName: string;
+    isDisabled?: boolean;
+    onItemSelected?: (selItem: T) => void;
+    dropdownStyle: DropdownStyle;
+}
+/** Provide a multi-selection, searchable dropdown that takes an array of objects.**/
+export declare function DropdownObj<T extends object>({ label, // label with which to describe the dropdown.
+data, sortFields, selected, selReset, displayName, // the name of the field that will be used for displaying the list items to the user.
+valueName, // the name of the field that will be used as the underlying unique value of each list item.
+isDisabled, onItemSelected, dropdownStyle }: DropdownObjPropTypes<T>): JSX.Element;
+export {};

package/dist/types/dropdowns/MultiSelectionDropdown.d.ts

@@ -0,0 +1,44 @@
+/**
+ * File: ./src/components/MultiSelectionDropdown.js
+ * --------------------------------------------------------------------------------
+ * Description:
+ * Provide a multi-selection, searchable dropdown that takes an array of primitve types.
+ * * --------------------------------------------------------------------------------
+ * Start Date  End Date      Dev    Version   Description
+ * 2024/02/27                ITA    1.00      Genesis.
+ * 2024/09/17                ITA    1.02      Toggle (add/remove) class name (w3-show) for displaying list items. Remove the style attribute.
+ *                                            Adjust width and add borders.
+ *                                            Import context directly. Variable names moved to VarNames object.
+ * 2024/10/28                ITA    1.03      Improve the responsiveness of the dropdown.
+ * 2025/12/18                ITA    1.06      Performed further tweaks and tests, to prepare this component for npm publishing.
+ * 2025/12/26                ITA    1.07      Changed the arrow symbols to + and - for better cross-platform rendering.
+ * 2025/12/29                ITA    1.09      Placeholder to show the name of the data, as provided by the label attribute.
+ * 2026/01/11  2026/01/16    ITA    1.10      Improved the component so that it stores its own data instead of relying on the Collections context provider.
+ * 2026/01/17  2026/01/17    ITA    1.11      Renamed sortDirection to sortOrder, so as to maintain attribute naming consistency across the dropdowns.
+ * 2026/01/19  2026/01/19    ITA    1.12      Used useId() to ensure the uniqueness of ids of the concerned html elements even when the component is used multiple times in the same page.
+ * 2026/01/19  2026/01/19    ITA    1.13      SelectedData attribute is meant to be optional. Updated accordingly.
+ * 2026/01/20  2026/02/01    ITA    1.14      Added a 'selReset' attribute. When set to true, the dropdown updates to the default selected items when this value changes in the parent component.
+ *                                            Combined searchItems and list state variables into one: list.
+ *                                            Improved the logic for setting selected items.
+ * 2026/05/11  2026/05/15    ITA    2.0.0     Changed the file extension to .tsx and migrated to Typescript.
+ */
+import { JSX } from 'react';
+import { DropdownStyle, ButtonStyle } from './dropdowns.models.js';
+import './dropdown.css';
+/** Provide a multi-selection, searchable dropdown that takes an array of primitve types.*/
+interface MultiselectionDropdownPropTypes<T> {
+    label: string;
+    data: NonNullable<T>[];
+    sortOrder?: 'asc' | 'desc';
+    selectedData?: NonNullable<T>[];
+    selReset?: boolean;
+    maxNumSelections?: number;
+    isDisabled?: boolean;
+    onItemsSelected?: (selItems: T[]) => void;
+    dropdownStyle: DropdownStyle;
+    buttonStyle: ButtonStyle;
+}
+export declare function MultiSelectionDropdown<T extends number | string | bigint | boolean>({ label, // label with which to describe the dropdown.
+data, sortOrder, selectedData, selReset, maxNumSelections, isDisabled, onItemsSelected, dropdownStyle, // Styling object with fields {color, backgroundColor, borderColor (optional), fontSize}.
+buttonStyle }: MultiselectionDropdownPropTypes<T>): JSX.Element;
+export {};

package/dist/types/dropdowns/MultiSelectionDropdownObj.d.ts

@@ -0,0 +1,46 @@
+/**
+ * File: ./src/dropdowns/MultiSelectionDropdownObj.jsx
+ * --------------------------------------------------------------------------------
+ * Description:
+ * Provide a multi-selection, searchable dropdown that takes an array of objects.
+ * A developer must specify which field name to use for displaying (the displayName), and which field name  (valueName) to use as value selected.
+ * * --------------------------------------------------------------------------------
+ * Start Date  End Date    Dev    Version Description
+ * 2024/02/07              ITA    1.00    Genesis.
+ * 2024/09/18              ITA    1.01    Toggle (add/remove) class name (w3-show) for displaying list items. Remove the style attribute.
+ *                                        Adjust width and add borders.
+ *                                        Import context directly. Variable names moved to VarNames object.
+ * 2024/10/28              ITA    1.02    Improve the responsiveness of the dropdown.
+ * 2025/12/21              ITA    1.03    Performed further tweaks and tests, preparing this component for npm publishing.
+ * 2025/12/26              ITA    1.04    Changed the arrow symbols to + and - for better cross-platform rendering.
+ * 2025/12/29              ITA    1.05    Placeholder to show the name of the data, as provided by the label attribute.
+ * 2026/01/11  2026/01/16  ITA    1.06    Improved the component so that it stores its own data instead of relying on the Collections context provider.
+ * 2026/01/19  2026/01/19  ITA    1.07    Used useId() to ensure the uniqueness of ids of the concerned html elements even when the component is used multiple times in the same page.
+ * 2026/01/20  2026/02/01  ITA    1.08    Added a 'selReset' attribute. When set to true, the dropdown updates to the default selected items when this value changes in the parent component.
+ *                                        Combined list and searchItems state variables into one: list.
+ *                                        Improved the logic for setting selected items.
+ * 2026/05/11  2026/05/15  ITA    2.0.0   Changed the file extension to .tsx and migrated to Typescript.
+ */
+import { JSX } from 'react';
+import './dropdown.css';
+import type { ButtonStyle, DropdownStyle } from './dropdowns.models.js';
+interface MultiSelectionDropdownObjPropType<T> {
+    label: string;
+    data: NonNullable<T>[];
+    sortFields: string[];
+    selectedData?: NonNullable<T>[];
+    selReset?: boolean;
+    displayName: string;
+    valueName: string;
+    maxNumSelections?: number | null;
+    isDisabled?: boolean;
+    onItemsSelected?: (selItems: T[]) => void;
+    dropdownStyle: DropdownStyle;
+    buttonStyle: ButtonStyle;
+}
+/** Provide a multi-selection, searchable dropdown that takes an array of plain objects. */
+export declare function MultiSelectionDropdownObj<T extends object>({ label, // label with which to describe the dropdown.
+data, sortFields, selectedData, selReset, maxNumSelections, displayName, // the name of the field that will be used for displaying the list items to the user.
+valueName, // the name of the field that will be used as the underlying unique value of each list item.
+isDisabled, onItemsSelected, dropdownStyle, buttonStyle }: MultiSelectionDropdownObjPropType<T>): JSX.Element;
+export {};

package/dist/types/dropdowns/dropdowns.models.d.ts

@@ -0,0 +1,24 @@
+/**
+ * File: ./src/dropdowns/dropdowns.models.tsx
+ * --------------------------------------------------------------------------------
+ * Description:
+ * For definition of interfaces and type aliases that are common among the dropdowns.
+ * --------------------------------------------------------------------------------
+ * Change log
+ * Start Date  End Date    Version   Dev     Description
+ * 2026/05/11  2026/05/15  1.00      ITA     Genesis
+ */
+interface DropdownStyle {
+    color: string;
+    backgroundColor: string;
+    fontSize?: string;
+    borderColor?: string;
+}
+export type { DropdownStyle };
+interface ButtonStyle {
+    color: string;
+    backgroundColor: string;
+    fontSize?: string;
+    borderColor?: string;
+}
+export type { ButtonStyle };

package/dist/types/index.d.ts

@@ -0,0 +1,16 @@
+/** ./src/index.js
+ * Start Date  End Date    Dev    Version  Description
+ * 2025/12/18              ITA    1.0.0    Genesis
+ * 2026/01/11  2026/01/16  ITA    1.0.1    Collections context and provider no longer required
+ * 2026/05/11  2026/05/15  ITA    2.0.0    Changed the file extension to .tsx and migrated to Typescript.
+ */
+/**
+ * @reference ./declarations.d.ts
+ */
+import './dropdowns/dropdown.css';
+import { Dropdown } from './dropdowns/Dropdown.jsx';
+import { DropdownObj } from './dropdowns/DropdownObj.jsx';
+import { MultiSelectionDropdownObj } from './dropdowns/MultiSelectionDropdownObj.jsx';
+import { MultiSelectionDropdown } from './dropdowns/MultiSelectionDropdown.jsx';
+import type { DropdownStyle, ButtonStyle } from './dropdowns/dropdowns.models.js';
+export { Dropdown, DropdownObj, MultiSelectionDropdown, MultiSelectionDropdownObj, DropdownStyle, ButtonStyle };

package/dist/types/main.d.ts

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

package/package.json

@@ -3,7 +3,7 @@
   "author": "ITA",
   "description": "A React library providing customizable search dropdown components with single and multi-selection capabilities.",
   "private": false,
-  "version": "1.1.6",
+  "version": "2.0.0",
   "type": "module",
   "main": "./dist/dropdowns-js.cjs.js",
   "module": "./dist/dropdowns-js.es.js",
@@ -23,19 +23,22 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && tsc -p ./tsconfig.build.json --emitDeclarationOnly",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
     "prop-types": "^15.8.1",
-    "some-common-functions-js": "^1.2.1"
+    "some-common-functions-js": "^2.0.1"
   },
   "devDependencies": {
+    "@types/node": "^25.6.2",
+    "@types/react": "^19.2.14",
     "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "typescript": "^6.0.3",
     "vite": "^7.2.4"
   },
   "peerDependencies": {