@agilant/toga-blox 1.0.43 → 1.0.45

package/dist/components/InputAndCheck/InputAndCheck.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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";
@@ -6,6 +8,7 @@ import TableHeaderInput from "../TableHeaderInput";
 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("");
+    // Load initial text from searchCriteria:
     useEffect(() => {
         const existing = searchCriteria.find((criterion) => criterion.searchColumn.id === column.id);
         if (existing) {
@@ -15,24 +18,28 @@ function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, colum
             setLocalSearchText("");
         }
     }, [searchCriteria, column.id]);
+    // Handle changes
     const handleInputChange = (e) => {
         setLocalSearchText(e.target.value);
     };
+    // Submit
     const handleSubmit = () => {
         const trimmed = localSearchText.trim();
         if (!trimmed) {
+            // remove criterion
             setSearchCriteria((prev) => prev.filter((c) => c.searchColumn.id !== column.id));
         }
         else {
+            // 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 [
@@ -44,12 +51,14 @@ function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, colum
         }
         setEditingHeader(null);
     };
+    // Clear
     const handleClearSearch = () => {
         setSearchCriteria((prev) => prev.filter((c) => c.searchColumn.id !== column.id));
         setLocalSearchText("");
         setResetSearch((prev) => !prev);
         closeOutSearch(null);
     };
+    // Let user press Enter
     const handleKeyDown = (e) => {
         if (e.key === "Enter") {
             e.preventDefault();

package/dist/components/MagnifyingIcon/types.d.ts

@@ -5,8 +5,8 @@ export interface MagnifyingIconProps<T extends object> {
     setEditingHeader: (index: number | null) => void;
     setHeaderValue: (value: string) => void;
     column: ColumnInstance<T>;
-    setSearchColumn: (col: Column<T>) => void;
-    setActiveColumnFromSearch: (id: string) => void;
+    setSearchColumn?: (col: Column<T>) => void;
+    setActiveColumnFromSearch?: (id: string) => void;
     setActiveColumn: (index: number) => void;
     iconColor?: string;
     iconBackgroundColor?: string;

package/dist/components/SortArrows/SortArrows.d.ts

@@ -1,5 +1,3 @@
 import { SortArrowsProps } from "./types";
-declare const SortArrows: <T extends object>({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon, directionContainerClassNames, }: SortArrowsProps<T> & {
-    getFontAwesomeIconFn?: (iconName: string, iconStyle: string) => React.ReactElement | null;
-}) => JSX.Element | null;
+declare const SortArrows: <T extends object>({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon, directionContainerClassNames, }: SortArrowsProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SortArrows;

package/dist/components/SortArrows/SortArrows.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// src/components/SortArrows/SortArrows.tsx
 import { useRef } from "react";
 import { motion } from "framer-motion";
 import { useSortArrowsViewModel } from "./useSortArrowsViewModel";
@@ -26,7 +27,7 @@ const SortArrows = ({ column, setSortColumn, slug, isNested, parentIndex, onSort
         setShowArrowContainer(false);
         onRequestClose?.();
     };
-    return (_jsxs("div", { "data-testid": `sort-arrows-${slug}`, ref: containerRef, className: arrowContainerClassNames, onClick: handleParentClick, children: [isActive && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: `${counterIcon.iconClassNames} ${activeDirection === "desc" ? "rotate-180" : ""}`, children: _jsx("span", { className: `${counterIcon?.numberSize}`, children: getFontAwesomeIcon(counterIcon.icon, counterIcon.weight) }) }), _jsx("span", { className: `${counterIcon.numberClassNames} ${activeDirection === "desc" && " pb-0.5"}`, children: sortOrderNumber })] })), !isActive && (_jsxs(_Fragment, { children: [_jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "up", setColumn: () => { }, isActive: false }), _jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "down", setColumn: () => { }, isActive: false })] })), showArrowContainer && (_jsxs(motion.div, { className: `${directionContainerClassNames} ${column.id === "col1" ? "left-[5px]" : ""}`, initial: "initial", animate: "animate", exit: "exit", children: [activeDirection !== "asc" && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: () => handleClick("up"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowUp", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Ascending" })] })), activeDirection !== "desc" && (_jsxs("div", { className: "flex p-1 hover:bg-blue-50 border-b-1", onClick: () => handleClick("down"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowDown", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Descending" })] })), isActive && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: handleResetSort, children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("rotateLeft", "solid") }), _jsx("span", { className: "flex-1 text-left pl-3", children: "Reset" })] }))] })), showArrowContainer &&
+    return (_jsxs("div", { "data-testid": `sort-arrows-${slug}`, ref: containerRef, className: arrowContainerClassNames, onClick: handleParentClick, children: [isActive && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: `${counterIcon.iconClassNames} ${activeDirection === "desc" ? "rotate-180" : ""}`, children: _jsx("span", { className: counterIcon.numberSize, children: getFontAwesomeIcon(counterIcon.icon, counterIcon.weight) }) }), _jsx("span", { className: `${counterIcon.numberClassNames} ${activeDirection === "desc" && " pb-0.5"}`, children: sortOrderNumber })] })), !isActive && (_jsxs(_Fragment, { children: [_jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "up", setColumn: () => { }, isActive: false }), _jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "down", setColumn: () => { }, isActive: false })] })), showArrowContainer && (_jsxs(motion.div, { className: `${directionContainerClassNames} ${column.id === "col1" ? "left-[5px]" : ""}`, initial: "initial", animate: "animate", exit: "exit", children: [activeDirection !== "asc" && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: () => handleClick("up"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowUp", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Ascending" })] })), activeDirection !== "desc" && (_jsxs("div", { className: "flex p-1 hover:bg-blue-50 border-b-1", onClick: () => handleClick("down"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowDown", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Descending" })] })), isActive && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: handleResetSort, children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("rotateLeft", "solid") }), _jsx("span", { className: "flex-1 text-left pl-3", children: "Reset" })] }))] })), showArrowContainer &&
                 renderPortalOverlay &&
                 renderPortalOverlay(handleClose)] }));
 };

package/dist/components/SortArrows/types.d.ts

@@ -1,4 +1,8 @@
 import { ColumnInstance } from "react-table";
+export interface CustomColumnInstance<T extends object> extends ColumnInstance<T> {
+    /** We want to guarantee an accessor exists and can be a string or function, etc. */
+    accessor: string | number | symbol | ((row: T) => any);
+}
 export interface SortArrowsProps<T extends object> {
     column: CustomColumnInstance<T>;
     setSortColumn: any;
@@ -17,6 +21,3 @@ export interface SortArrowsProps<T extends object> {
     };
     directionContainerClassNames?: string;
 }
-export interface CustomColumnInstance<T extends object> extends ColumnInstance<T> {
-    accessor: string | number | symbol | ((row: T) => any);
-}

package/package.json

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