@agilant/toga-blox 1.0.42 → 1.0.44

package/dist/components/InputAndCheck/InputAndCheck.d.ts

@@ -1,47 +1,3 @@
-import React from "react";
-import { ColumnInstance } from "react-table";
-/** A single search criterion used by InputAndCheck. */
-export type SearchCriterion<T extends object> = {
-    searchColumn: ColumnInstance<T>;
-    submittedSearchText: string;
-};
-/** The props needed by <InputAndCheck>. */
-export type InputAndCheckProps<T extends object> = {
-    closeOutSearch: (value: number | null) => void;
-    setResetSearch: React.Dispatch<React.SetStateAction<boolean>>;
-    setEditingHeader: (value: number | null) => void;
-    /** The column we’re editing/searching on. */
-    column: ColumnInstance<T>;
-    /** The search criteria state we manage. */
-    searchCriteria: SearchCriterion<T>[];
-    setSearchCriteria: React.Dispatch<React.SetStateAction<SearchCriterion<T>[]>>;
-    /** Optional styling or icons. */
-    badgeColor?: string;
-    badgeIcon?: {
-        icon: string;
-        weight: string;
-    };
-    iconBadgeContainerClasses?: string;
-    searchIcon?: {
-        icon: string;
-        weight: string;
-    };
-    cancelIcon?: {
-        icon: string;
-        weight: string;
-    };
-    initialIcon?: {
-        icon: string;
-        weight: string;
-    };
-    initialIconClasses?: string;
-    searchIconClasses?: string;
-    additionalInputClasses?: string;
-    secondIconClasses?: string;
-};
-/**
- * Renders an input field for column-based searching,
- * maintaining local text and updating searchCriteria on submit.
- */
+import { InputAndCheckProps } from "./types";
 declare function InputAndCheck<T extends object>({ closeOutSearch, setResetSearch, setEditingHeader, column, searchCriteria, setSearchCriteria, badgeColor, badgeIcon, cancelIcon, iconBadgeContainerClasses, searchIcon, searchIconClasses, additionalInputClasses, secondIconClasses, initialIcon, initialIconClasses, }: InputAndCheckProps<T>): import("react/jsx-runtime").JSX.Element;
 export default InputAndCheck;

package/dist/components/InputAndCheck/InputAndCheck.js

@@ -1,17 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// src/components/InputAndCheck/InputAndCheck.tsx
+// In your NPM library @agilant/toga-blox/dist/components/InputAndCheck/InputAndCheck
+// EXACTLY as you showed (with Badge, TableHeaderInput, etc.):
 import { useEffect, useRef, useState } from "react";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import Badge from "../Badge";
 import TableHeaderInput from "../TableHeaderInput";
-/**
- * Renders an input field for column-based searching,
- * maintaining local text and updating searchCriteria on submit.
- */
 function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, column, searchCriteria, setSearchCriteria, badgeColor = "bg-blue-400", badgeIcon = { icon: "x", weight: "regular" }, cancelIcon = { icon: "xmark", weight: "regular" }, iconBadgeContainerClasses = "mr-2 rounded-full p-2 text-white cursor-pointer my-2 text-sm", searchIcon = { icon: "search", weight: "regular" }, searchIconClasses = " text-md absolute right-3 top-2 text-gray-400 hover:cursor-pointer hover:text-blue-500 ", additionalInputClasses = "min-w-[300px] max-w-[250px] border-b border-t-0 border-r-0 rounded-tl-none rounded-tr-lg bg-gray-50 text-gray-800 flex", secondIconClasses = "flex absolute right-6 top-0.5 items-center text-gray-400 hover:cursor-pointer hover:text-blue-400", initialIcon = { icon: "search", weight: "regular" }, initialIconClasses = "text-gray-400", }) {
     const containerRef = useRef(null);
     const [localSearchText, setLocalSearchText] = useState("");
-    // On mount/update, see if we already have a search criterion for this column
+    // Load initial text from searchCriteria:
     useEffect(() => {
         const existing = searchCriteria.find((criterion) => criterion.searchColumn.id === column.id);
         if (existing) {
@@ -21,28 +18,28 @@ function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, colum
             setLocalSearchText("");
         }
     }, [searchCriteria, column.id]);
-    // Update local text as user types
+    // Handle changes
     const handleInputChange = (e) => {
         setLocalSearchText(e.target.value);
     };
-    // Submit the final text to searchCriteria
+    // Submit
     const handleSubmit = () => {
         const trimmed = localSearchText.trim();
         if (!trimmed) {
-            // Clear from search criteria if empty
+            // remove criterion
             setSearchCriteria((prev) => prev.filter((c) => c.searchColumn.id !== column.id));
         }
         else {
-            // Insert or update existing
+            // add or update
             setSearchCriteria((prev) => {
                 const existingIndex = prev.findIndex((c) => c.searchColumn.id === column.id);
                 if (existingIndex >= 0) {
-                    const updated = [...prev];
-                    updated[existingIndex] = {
+                    const clone = [...prev];
+                    clone[existingIndex] = {
                         searchColumn: column,
                         submittedSearchText: trimmed,
                     };
-                    return updated;
+                    return clone;
                 }
                 else {
                     return [
@@ -52,10 +49,9 @@ function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, colum
                 }
             });
         }
-        // Close out
         setEditingHeader(null);
     };
-    // Clears search from parent's state
+    // Clear
     const handleClearSearch = () => {
         setSearchCriteria((prev) => prev.filter((c) => c.searchColumn.id !== column.id));
         setLocalSearchText("");
@@ -69,6 +65,6 @@ function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, colum
             handleSubmit();
         }
     };
-    return (_jsxs("div", { ref: containerRef, className: "relative", "data-testid": "icon-search-regular", children: [_jsxs("div", { className: "flex flex-col border rounded-md shadow-md", children: [_jsx("div", { className: "flex", children: _jsx(TableHeaderInput, { hasAutoFocus: true, value: localSearchText, onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: additionalInputClasses, placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx("span", { className: initialIconClasses, children: getFontAwesomeIcon(initialIcon.icon) })) : undefined, iconPosition: "both", secondIcon: localSearchText !== "" && (_jsx("div", { className: secondIconClasses, onClick: handleClearSearch, children: getFontAwesomeIcon(cancelIcon.icon) })) }) }), localSearchText && (_jsx("div", { className: "bg-white flex flex-start px-2", children: _jsx(Badge, { text: localSearchText, type: "span", cursorPointer: true, onClick: handleClearSearch, hasRightIcon: true, backgroundColor: badgeColor, badgeContainerClasses: iconBadgeContainerClasses, icon: getFontAwesomeIcon(badgeIcon.icon) }) }))] }), localSearchText && (_jsx("div", { onClick: handleSubmit, className: searchIconClasses, children: getFontAwesomeIcon(searchIcon.icon) }))] }));
+    return (_jsxs("div", { "data-testid": "icon-search-regular", ref: containerRef, className: "relative", children: [_jsxs("div", { className: "flex flex-col border rounded-md shadow-md", children: [_jsx("div", { className: "flex", children: _jsx(TableHeaderInput, { hasAutoFocus: true, value: localSearchText, onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: additionalInputClasses, placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx("span", { className: initialIconClasses, children: getFontAwesomeIcon(initialIcon.icon) })) : undefined, iconPosition: "both", secondIcon: localSearchText !== "" && (_jsx("div", { className: secondIconClasses, onClick: handleClearSearch, children: getFontAwesomeIcon(cancelIcon.icon) })) }) }), localSearchText && (_jsx("div", { className: "bg-white flex flex-start px-2", children: _jsx(Badge, { text: localSearchText, type: "span", cursorPointer: true, onClick: handleClearSearch, hasRightIcon: true, backgroundColor: badgeColor, badgeContainerClasses: iconBadgeContainerClasses, icon: getFontAwesomeIcon(badgeIcon.icon) }) }))] }), localSearchText && (_jsx("div", { onClick: handleSubmit, className: searchIconClasses, children: getFontAwesomeIcon(searchIcon.icon) }))] }));
 }
 export default InputAndCheck;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.42",
+	"version": "1.0.44",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",