@agilant/toga-blox 1.0.32 → 1.0.34

package/dist/components/Page/ViewPageTemplate.stories.js

@@ -5,7 +5,6 @@ import PageSection from "../PageSection/PageSection";
 import Badge from "../Badge/Badge";
 import Text from "../Text/Text";
 import Image from "../Image/Image";
-import Input from "../Input/Input";
 import Nav from "../Nav/Nav";
 import Card from "../Card/Card";
 import BaseButton from "../BaseButton";
@@ -45,7 +44,7 @@ ViewWithHeroAndCardsWithGlassHeader.args = {
     children: [
         //the div acts as a spacer for the header because the header is fixed
         _jsx("div", { className: "h-16" }, "spacer"),
-        _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { mobileLeft: true, hasIcons: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, hasMobileMenu: true, logoBorderRadius: true, logoHoverColor: "hover:bg-blue-500", backgroundColor: "bg-gray-500", bottomBorderColor: "border-black", mobileOpenIcon: getFontAwesomeIcon("hamburger"), mobileCloseIcon: getFontAwesomeIcon("x"), mobileMenuBackground: "bg-blue-500", hasMobileIcons: true, hasMobileNavItems: true, hasMobileBadge: false, hasMobileSearchBar: true, hasAnimatedHamburgerButton: true, icons: _jsx(_Fragment, {}), badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-blue-500", borderColor: "border-none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), logo: _jsx(Image, { src: "../../../assets/Logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "text-black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "rounded", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "bg-white", submenuHoverBackground: "hover:bg-blue-500", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "border-blue-500", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "rounded p-2 w-full border-b-2 border-b-blue-700 text-black", accordionExpandedStyle: "pl-2 py-3" }), input: _jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "border-gray-500", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "bg-white", additionalClasses: "bg-blue-500", button: _jsx(BaseButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "bg-blue-500", hoverBackground: "hover:bg-black", hoverFontColor: "hover:text-white", additionalClasses: "h-full w-8 justify-center", shape: "none" }), inputWidth: "w-full" }) }) }, "header"),
+        _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { mobileLeft: true, hasIcons: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, hasMobileMenu: true, logoBorderRadius: true, logoHoverColor: "hover:bg-blue-500", backgroundColor: "bg-gray-500", bottomBorderColor: "border-black", mobileOpenIcon: getFontAwesomeIcon("hamburger"), mobileCloseIcon: getFontAwesomeIcon("x"), mobileMenuBackground: "bg-blue-500", hasMobileIcons: true, hasMobileNavItems: true, hasMobileBadge: false, hasMobileSearchBar: true, hasAnimatedHamburgerButton: true, icons: _jsx(_Fragment, {}), badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-blue-500", borderColor: "border-none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), logo: _jsx(Image, { src: "../../../assets/Logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "text-black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "rounded", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "bg-white", submenuHoverBackground: "hover:bg-blue-500", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "border-blue-500", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "rounded p-2 w-full border-b-2 border-b-blue-700 text-black", accordionExpandedStyle: "pl-2 py-3" }), input: _jsx(_Fragment, {}) }) }, "header"),
         _jsx(Hero, { textAlignment: "center", background: "image" }, "hero"),
         _jsx(PageSection, { sectionContainerClasses: "flex flex-col w-full h-full bg-slate-100 p-6\n      justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "unordered", hasVirtualization: false, containerClasses: "w-full h-[100%] grid grid-cols-4 gap-y-12 gap-x-8 max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center", renderItem: (item) => (_jsx(Card, { containerClasses: "w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: { ...item, title: "" } }) }, item.id)) }) }, "pageSectionOne"),
     ],
@@ -68,6 +67,6 @@ ViewWithTableAndTitle.args = {
 export const CompassPageView = Template.bind({});
 CompassPageView.args = {
     children: [
-        _jsxs("div", { children: [_jsx("div", { className: "h-16" }), _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { mobileLeft: true, icons: _jsx(_Fragment, {}), hasIcons: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, hasMobileMenu: true, hasAnimatedHamburgerButton: true, logoBorderRadius: true, logoHoverColor: "hover:bg-green-500", backgroundColor: "bg-gray-500", bottomBorderColor: "border-green-500", mobileOpenIcon: getFontAwesomeIcon("hamburger"), mobileCloseIcon: getFontAwesomeIcon("x"), mobileMenuBackground: "bg-green-500", hasMobileIcons: true, hasMobileNavItems: true, hasMobileBadge: false, hasMobileSearchBar: true, badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-green-500", borderColor: "border-none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "text-black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "rounded", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "bg-white", submenuHoverBackground: "hover:bg-green-500", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "border-green-500", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "rounded p-2 w-full border-b-2 border-b-teal-700 text-black", accordionExpandedStyle: "pl-2 py-3" }), input: _jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "border-gray-500", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "bg-white", additionalClasses: "bg-blue-500", button: _jsx(BaseButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "bg-green-500", hoverBackground: "hover:bg-black", hoverFontColor: "hover:text-white", additionalClasses: "h-full w-8 justify-center", shape: "none" }), inputWidth: "w-full" }) }) }), _jsx(Hero, { textAlignment: "left", background: "image", src: "../../../assets/compass-tech-hero-bg.png", text: _jsx(Text, { size: "text-2xl", color: "text-white", fontFamily: "font-serif", text: "Equip your team with exactly what they need", tag: "h1", additionalClasses: "w-3/4 max-sm:text-xl max-sm:w-3/4" }) }, "hero"), _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n      justify-center items-center h-[100%]", children: _jsx(Text, { size: "text-2xl", color: "text-black", fontFamily: "font-serif", text: "Kits", tag: "h2", additionalClasses: "my-4  max-sm:text-xl" }) }, "pageSection"), _jsx(PageSection, { sectionContainerClasses: "flex flex-col w-full h-full bg-slate-100 p-6\n      justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, hasVirtualization: false, listType: "unordered", containerClasses: "w-full grid grid-cols-4 gap-y-12 gap-x-8 max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center", renderItem: (item) => (_jsx(Card, { containerClasses: "w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: { ...item, title: "" } }) }, item.id)) }) }, "pageSectionOne"), _jsxs(PageSection, { sectionContainerClasses: "flex w-full bg-yellow-400 flex p-6 justify-center items-center h-[100%] mt-6 max-sm:flex-col", children: [_jsx(Text, { size: "text-xl", color: "text-black", fontFamily: "font-serif", text: "Help us improve your experience:", tag: "h2", additionalClasses: "p-6 max-sm:p-2 max-sm:text-lg" }), _jsx(BaseButton, { text: _jsx(Text, { size: "", color: "", text: "Take the Survey!", fontFamily: "" }), backgroundColor: "bg-green-500", shape: "rounded", borderColor: "border-none", hoverBackground: "hover:bg-green-500", hoverFontColor: "hover:text-green-500", hoverBorderColor: "hover:border-green-500", hoverUnderline: true, onClick: () => alert("Button clicked!"), as: "a" })] }), _jsx(Footer, { logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Compass Logo.", background: false, additionalClasses: " w-40 p-2" }), title: _jsx(Text, { size: "text-xl", color: "", text: "Compass Website", fontFamily: "", tag: "h2", additionalClasses: "font-bold uppercase pl-2 mt-2" }), slogan: _jsx(Text, { size: "text-md", color: "", text: "Great slogan goes here.", fontFamily: "", tag: "p", additionalClasses: "pl-2" }), copyRightText: _jsx(Text, { size: "md", color: "text-black", text: "Copyright \u00A9 2024 - All right reserved by Generic Company", fontFamily: "", additionalClasses: "text-center" }), socialTitle: _jsx(Text, { size: "md", color: "text-black", text: "Connect", fontFamily: "", additionalClasses: "font-bold uppercase w-full" }), contactTitle: _jsx(Text, { size: "md", color: "text-black", text: "Contact Us:", fontFamily: "", additionalClasses: "font-bold uppercase" }), logoBorderRadius: true, hasNavItems: true, hasSocial: true, logoHoverColor: "hover:bg-green-500", backgroundColor: "bg-green-500", accordionGap: "gap-1", copyRightTextPlacement: "center", socialPlacement: "center", accordionParentStyle: "border-b border-black p-2 w-full", accordionExpandedStyle: "pl-3 py-3" })] }, "randomNumberOne"),
+        _jsxs("div", { children: [_jsx("div", { className: "h-16" }), _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { mobileLeft: true, icons: _jsx(_Fragment, {}), hasIcons: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, hasMobileMenu: true, hasAnimatedHamburgerButton: true, logoBorderRadius: true, logoHoverColor: "hover:bg-green-500", backgroundColor: "bg-gray-500", bottomBorderColor: "border-green-500", mobileOpenIcon: getFontAwesomeIcon("hamburger"), mobileCloseIcon: getFontAwesomeIcon("x"), mobileMenuBackground: "bg-green-500", hasMobileIcons: true, hasMobileNavItems: true, hasMobileBadge: false, hasMobileSearchBar: true, badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-green-500", borderColor: "border-none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "text-black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "rounded", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "bg-white", submenuHoverBackground: "hover:bg-green-500", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "border-green-500", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "rounded p-2 w-full border-b-2 border-b-teal-700 text-black", accordionExpandedStyle: "pl-2 py-3" }), input: _jsx(_Fragment, {}) }) }), _jsx(Hero, { textAlignment: "left", background: "image", src: "../../../assets/compass-tech-hero-bg.png", text: _jsx(Text, { size: "text-2xl", color: "text-white", fontFamily: "font-serif", text: "Equip your team with exactly what they need", tag: "h1", additionalClasses: "w-3/4 max-sm:text-xl max-sm:w-3/4" }) }, "hero"), _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n      justify-center items-center h-[100%]", children: _jsx(Text, { size: "text-2xl", color: "text-black", fontFamily: "font-serif", text: "Kits", tag: "h2", additionalClasses: "my-4  max-sm:text-xl" }) }, "pageSection"), _jsx(PageSection, { sectionContainerClasses: "flex flex-col w-full h-full bg-slate-100 p-6\n      justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, hasVirtualization: false, listType: "unordered", containerClasses: "w-full grid grid-cols-4 gap-y-12 gap-x-8 max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center", renderItem: (item) => (_jsx(Card, { containerClasses: "w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: { ...item, title: "" } }) }, item.id)) }) }, "pageSectionOne"), _jsxs(PageSection, { sectionContainerClasses: "flex w-full bg-yellow-400 flex p-6 justify-center items-center h-[100%] mt-6 max-sm:flex-col", children: [_jsx(Text, { size: "text-xl", color: "text-black", fontFamily: "font-serif", text: "Help us improve your experience:", tag: "h2", additionalClasses: "p-6 max-sm:p-2 max-sm:text-lg" }), _jsx(BaseButton, { text: _jsx(Text, { size: "", color: "", text: "Take the Survey!", fontFamily: "" }), backgroundColor: "bg-green-500", shape: "rounded", borderColor: "border-none", hoverBackground: "hover:bg-green-500", hoverFontColor: "hover:text-green-500", hoverBorderColor: "hover:border-green-500", hoverUnderline: true, onClick: () => alert("Button clicked!"), as: "a" })] }), _jsx(Footer, { logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Compass Logo.", background: false, additionalClasses: " w-40 p-2" }), title: _jsx(Text, { size: "text-xl", color: "", text: "Compass Website", fontFamily: "", tag: "h2", additionalClasses: "font-bold uppercase pl-2 mt-2" }), slogan: _jsx(Text, { size: "text-md", color: "", text: "Great slogan goes here.", fontFamily: "", tag: "p", additionalClasses: "pl-2" }), copyRightText: _jsx(Text, { size: "md", color: "text-black", text: "Copyright \u00A9 2024 - All right reserved by Generic Company", fontFamily: "", additionalClasses: "text-center" }), socialTitle: _jsx(Text, { size: "md", color: "text-black", text: "Connect", fontFamily: "", additionalClasses: "font-bold uppercase w-full" }), contactTitle: _jsx(Text, { size: "md", color: "text-black", text: "Contact Us:", fontFamily: "", additionalClasses: "font-bold uppercase" }), logoBorderRadius: true, hasNavItems: true, hasSocial: true, logoHoverColor: "hover:bg-green-500", backgroundColor: "bg-green-500", accordionGap: "gap-1", copyRightTextPlacement: "center", socialPlacement: "center", accordionParentStyle: "border-b border-black p-2 w-full", accordionExpandedStyle: "pl-3 py-3" })] }, "randomNumberOne"),
     ],
 };

package/dist/components/PrimaryTableHeader/PrimaryTableHeader.d.ts

@@ -0,0 +1,3 @@
+import { PrimaryTableHeaderProps } from "./types";
+declare const PrimaryTableHeader: <T extends object>({ headerGroups, editingHeader, searchText, setSearchText, setSortColumn, setEditingHeader, setHeaderValue, setResetSearch, columnMappings, setSearchColumn, isNested, parentIndex, onHeaderSortClick, PortalComponent, containerRef, magnifyingIconRef, }: PrimaryTableHeaderProps<T>) => JSX.Element;
+export default PrimaryTableHeader;

package/dist/components/PrimaryTableHeader/PrimaryTableHeader.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useRef, useState, useMemo } from "react";
+import MagnifyingIcon from "../MagnifyingIcon";
+import TableHeaderContent from "../TableHeaderContent/TableHeaderContent";
+import InputAndCheck from "../InputAndCheck/InputAndCheck";
+import SortArrows from "../SortArrows";
+const PrimaryTableHeader = ({ headerGroups, editingHeader, searchText, setSearchText, setSortColumn, setEditingHeader, setHeaderValue, setResetSearch, columnMappings, setSearchColumn, isNested, parentIndex, onHeaderSortClick, PortalComponent, containerRef, magnifyingIconRef, }) => {
+    const [searchCriteria, setSearchCriteria] = useState([]);
+    const [_, setActiveColumnFromSearch] = useState("");
+    const [activeColumn, setActiveColumn] = useState(null);
+    const [__, setActiveSortColumn] = useState(null);
+    const [___, setSortDirection] = useState(null);
+    const { headerNames, mappingFields } = useMemo(() => {
+        const headerNames = [];
+        headerGroups.forEach((headerGroup) => {
+            headerGroup.headers.forEach((col) => {
+                let headerName = "";
+                if (typeof col.Header === "string") {
+                    headerName = col.Header;
+                }
+                else if (typeof col.Header === "function" &&
+                    col.Header.displayName) {
+                    headerName = col.Header.displayName;
+                }
+                headerNames.push(headerName);
+            });
+        });
+        let mappingFields = [];
+        if (columnMappings && Array.isArray(columnMappings)) {
+            const sortedColumnMapping = [...columnMappings].sort((a, b) => (a.index ?? 0) - (b.index ?? 0));
+            mappingFields = sortedColumnMapping.map((cm) => cm.slug);
+        }
+        return { headerNames, mappingFields };
+    }, [headerGroups, columnMappings]);
+    const handleSortChange = (columnId, direction) => {
+        onHeaderSortClick(columnId, direction);
+    };
+    function handleMagnifyingSetSearchColumn(col) {
+        setSearchColumn(String(col.id));
+    }
+    const inputRef = useRef(null);
+    const divClassNames = "items-center text-sm px-1 min-h-8 flex break-words whitespace-normal px-5 overflow- rounded-lg";
+    const theadStyles = "bg-supply-blue-50 w-full sticky top-0 z-10";
+    const textStyles = "text-navy-500 font-light text-sm text-nowrap";
+    return (_jsx("thead", { className: theadStyles, children: headerGroups.map((headerGroup, headerGroupIndex) => (_createElement("tr", { className: "", ...headerGroup.getHeaderGroupProps(), key: `header-group-${headerGroupIndex}` }, headerGroup.headers.map((column, columnIndex) => {
+            const isFirstColumn = columnIndex === 0;
+            const isLastColumn = columnIndex === headerGroup.headers.length - 1;
+            const roundedClasses = isFirstColumn
+                ? "rounded-tl-lg "
+                : isLastColumn
+                    ? "rounded-tr-lg "
+                    : "";
+            const headerName = headerNames[columnIndex];
+            const mappingField = mappingFields[columnIndex];
+            const updatedColumn = {
+                ...column,
+                id: column.id,
+                accessor: mappingField,
+            };
+            const shouldRenderMagnifyingIcon = !isLastColumn;
+            return (_createElement("th", { className: `${textStyles} ${roundedClasses}`, ...column.getHeaderProps(), key: `header-${headerGroupIndex}-column-${columnIndex}` },
+                _jsxs("div", { className: `${divClassNames} relative`, children: [editingHeader === columnIndex ? (_jsxs(_Fragment, { children: [_jsx(TableHeaderContent, { column: updatedColumn }), _jsx("div", { className: "absolute w-full top-[-5px] bottom-4", ref: containerRef, children: _jsxs("div", { className: "absolute top-10 z-20", children: [_jsx(InputAndCheck, { column: updatedColumn, setEditingHeader: setEditingHeader, closeOutSearch: () => setEditingHeader(null), setResetSearch: setResetSearch, searchCriteria: searchCriteria, setSearchCriteria: setSearchCriteria }), (() => {
+                                                inputRef.current?.focus();
+                                                return null;
+                                            })()] }) }), PortalComponent] })) : (_jsx(TableHeaderContent, { column: updatedColumn })), _jsx("div", { className: "ml-1", children: _jsx(SortArrows, { slug: mappingField || "", parentIndex: parentIndex, isNested: isNested, column: {
+                                    ...updatedColumn,
+                                    accessor: updatedColumn.id,
+                                }, setSortColumn: setSortColumn, onSortChange: handleSortChange }) }), shouldRenderMagnifyingIcon && (_jsx(MagnifyingIcon, { ref: magnifyingIconRef, column: updatedColumn, setSearchColumn: handleMagnifyingSetSearchColumn, editingHeader: editingHeader, columnIndex: columnIndex, setEditingHeader: setEditingHeader, setHeaderValue: setHeaderValue, isActive: activeColumn === columnIndex, setActiveColumn: setActiveColumn, setActiveColumnFromSearch: setActiveColumnFromSearch, setSearchText: setSearchText, searchText: searchText, isSearchOpen: editingHeader !== null }))] })));
+        })))) }));
+};
+export default PrimaryTableHeader;

package/dist/components/PrimaryTableHeader/PrimaryTableHeader.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;

package/dist/components/PrimaryTableHeader/PrimaryTableHeader.stories.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/components/PrimaryTableHeader.stories.tsx
+import React, { useRef, useState } from "react";
+import { useTable } from "react-table";
+import PrimaryTableHeader from "./PrimaryTableHeader";
+const MockPortal = ({ children, onClose }) => {
+    return (_jsx("div", { onClick: () => {
+            onClose?.();
+        }, className: "z-10", style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            background: "rgba(0,0,0,0.5)",
+        }, children: children }));
+};
+export default {
+    title: "Table/PrimaryTableHeader",
+    component: PrimaryTableHeader,
+};
+/**
+ * Template for PrimaryTableHeader component.
+ */
+const Template = (args) => {
+    const containerRef = useRef(null);
+    const magnifyingIconRef = useRef(null);
+    const [editingHeader, setEditingHeader] = useState(null);
+    const [searchText, setSearchText] = useState("");
+    /** 1) Three columns now: "Name", "Age", "City" */
+    const columns = React.useMemo(() => [
+        {
+            Header: "Name",
+            accessor: "name",
+            id: "name",
+        },
+        {
+            Header: "Age",
+            accessor: "age",
+            id: "age",
+        },
+        {
+            Header: "City",
+            accessor: "city",
+            id: "city",
+        },
+    ], []);
+    /** 2) Sample data with 3 properties */
+    const data = React.useMemo(() => [
+        { name: "John Doe", age: 30, city: "New York" },
+        { name: "Jane Smith", age: 25, city: "Los Angeles" },
+    ], []);
+    /** 3) Generate headerGroups via react-table */
+    const { headerGroups: tableHeaderGroups } = useTable({
+        columns,
+        data,
+    });
+    /** 4) ColumnMappings for each: name, age, city */
+    const columnMappings = React.useMemo(() => [
+        { slug: "name", index: 0, name: "Name" },
+        { slug: "age", index: 1, name: "Age" },
+        { slug: "city", index: 2, name: "City" },
+    ], []);
+    /** Sort with direction (two-arg) */
+    const handleSortColumnWithDirection = (columnId, direction) => {
+        console.log(`Sort column: ${columnId}, direction: ${direction}`);
+    };
+    /** Single-arg function for setSortColumn */
+    const handleSortColumnSingleArg = (col) => {
+        handleSortColumnWithDirection(col, "asc");
+    };
+    const handleSearchColumn = (columnSlug) => {
+        console.log("Search column:", columnSlug);
+    };
+    /** Other event handlers */
+    const handleHeaderValue = (value) => {
+        console.log("Set header value:", value);
+    };
+    const handleResetSearch = (reset) => {
+        console.log("Reset search:", reset);
+    };
+    const handleSubmittedSearchText = (text) => {
+        console.log("Submitted Search Text:", text);
+    };
+    const handleClearSearch = (clear) => {
+        console.log("Clear Search:", clear);
+    };
+    return (_jsxs("table", { children: [_jsx(PrimaryTableHeader, { ...args, headerGroups: tableHeaderGroups, editingHeader: editingHeader, setEditingHeader: setEditingHeader, searchText: searchText, setSearchText: setSearchText, setSubmittedSearchText: handleSubmittedSearchText, setSortColumn: handleSortColumnSingleArg, setHeaderValue: handleHeaderValue, setResetSearch: handleResetSearch, columnMappings: columnMappings, setSearchColumn: handleSearchColumn, isNested: false, parentIndex: 0, onHeaderSortClick: handleSortColumnWithDirection, containerRef: containerRef, magnifyingIconRef: magnifyingIconRef, PortalComponent: _jsx(MockPortal, { onClose: () => {
+                        console.log("Overlay clicked -> closing");
+                        setEditingHeader(null);
+                    } }), setClearSearch: handleClearSearch, slug: "primary-table-header" }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "John Doe" }), _jsx("td", { children: "30" }), _jsx("td", { children: "New York" })] }), _jsxs("tr", { children: [_jsx("td", { children: "Jane Smith" }), _jsx("td", { children: "25" }), _jsx("td", { children: "Los Angeles" })] })] })] }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    searchText: "",
+    isNested: false,
+    parentIndex: 0,
+    slug: "primary-table-header",
+};

package/dist/components/PrimaryTableHeader/PrimaryTableHeader.test.d.ts

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

package/dist/components/PrimaryTableHeader/PrimaryTableHeader.test.js

@@ -0,0 +1,124 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import PrimaryTableHeader from "./PrimaryTableHeader";
+describe("PrimaryTableHeader", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    const nameColumn = {
+        Header: "Name",
+        accessor: "name",
+        id: "name",
+        getHeaderProps: () => ({ className: "header-props-name" }),
+        render: (type) => type === "Header" ? _jsx(_Fragment, { children: "Name" }) : _jsx(_Fragment, { children: "Unknown" }),
+    };
+    const ageColumn = {
+        Header: "Age",
+        accessor: "age",
+        id: "age",
+        getHeaderProps: () => ({ className: "header-props-age" }),
+        render: (type) => (type === "Header" ? _jsx(_Fragment, { children: "Age" }) : _jsx(_Fragment, { children: "Unknown" })),
+    };
+    const mockHeaderGroups = [
+        {
+            headers: [nameColumn, ageColumn],
+            getHeaderGroupProps: () => ({ className: "header-group-props" }),
+        },
+    ];
+    function renderComponent(overrideProps = {}) {
+        const defaultProps = {
+            headerGroups: mockHeaderGroups,
+            editingHeader: null,
+            searchText: "",
+            setSearchText: vi.fn(),
+            setSubmittedSearchText: vi.fn(),
+            setSortColumn: vi.fn(),
+            setEditingHeader: vi.fn(),
+            setHeaderValue: vi.fn(),
+            setResetSearch: vi.fn(),
+            setClearSearch: vi.fn(),
+            columnMappings: [
+                { slug: "name", index: 0, name: "Name" },
+                { slug: "age", index: 1, name: "Age" },
+            ],
+            setSearchColumn: vi.fn(),
+            isNested: false,
+            parentIndex: 0,
+            onHeaderSortClick: vi.fn(),
+            PortalComponent: null,
+            containerRef: null,
+            magnifyingIconRef: null,
+            slug: "test-header",
+            ...overrideProps,
+        };
+        return render(_jsx("table", { children: _jsx(PrimaryTableHeader, { ...defaultProps }) }));
+    }
+    it("1) Renders the header text", () => {
+        renderComponent();
+        expect(screen.getByText("Name")).toBeInTheDocument();
+        expect(screen.getByText("Age")).toBeInTheDocument();
+    });
+    it("2) Renders a search input when editingHeader is set", () => {
+        renderComponent({ editingHeader: 0 });
+        const textboxes = screen.getAllByRole("textbox");
+        expect(textboxes.length).toBeGreaterThan(0);
+    });
+    it("3) Does not render a search input when editingHeader is null", () => {
+        renderComponent({ editingHeader: null });
+        expect(screen.queryAllByRole("textbox")).toHaveLength(0);
+    });
+    it("4) Shows only 1 magnifying icon if code excludes the last column", () => {
+        renderComponent();
+        const icons = screen.queryAllByTestId("magnifying-icon-test-id");
+        expect(icons.length).toBe(1);
+    });
+    it("5) Sort ascending: opens SortArrows -> click Ascending -> calls setSortColumn function + onHeaderSortClick", () => {
+        const mockSetSortColumn = vi.fn();
+        const mockOnHeaderSortClick = vi.fn();
+        renderComponent({
+            setSortColumn: mockSetSortColumn,
+            onHeaderSortClick: mockOnHeaderSortClick,
+            columnMappings: [
+                { slug: "name", index: 0, name: "Name" },
+                { slug: "age", index: 1, name: "Age" },
+            ],
+        });
+        fireEvent.click(screen.getByTestId("sort-arrows-name"));
+        fireEvent.click(screen.getByText("Ascending"));
+        expect(mockSetSortColumn).toHaveBeenCalledTimes(1);
+        const updateFn = mockSetSortColumn.mock.calls[0][0];
+        expect(typeof updateFn).toBe("function");
+        const prevState = {};
+        const newState = updateFn(prevState);
+        expect(newState).toEqual({
+            ...prevState,
+            name: ["name"],
+        });
+        expect(mockOnHeaderSortClick).toHaveBeenCalledWith("name", "asc");
+    });
+    it("Sort descending: opens SortArrows -> click Descending -> calls setSortColumn + onHeaderSortClick", () => {
+        const mockSetSortColumn = vi.fn();
+        const mockOnHeaderSortClick = vi.fn();
+        renderComponent({
+            setSortColumn: mockSetSortColumn,
+            onHeaderSortClick: mockOnHeaderSortClick,
+            columnMappings: [
+                { slug: "name", index: 0, name: "Name" },
+                { slug: "age", index: 1, name: "Age" },
+            ],
+        });
+        fireEvent.click(screen.getByTestId("sort-arrows-name"));
+        fireEvent.click(screen.getByText("Descending"));
+        expect(mockSetSortColumn).toHaveBeenCalledTimes(1);
+        const updateFn = mockSetSortColumn.mock.calls[0][0];
+        expect(typeof updateFn).toBe("function");
+        const prevState = {};
+        const newState = updateFn(prevState);
+        expect(newState).toEqual({
+            ...prevState,
+            name: ["-name"],
+        });
+        expect(mockOnHeaderSortClick).toHaveBeenCalledWith("name", "desc");
+    });
+});

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

@@ -0,0 +1,35 @@
+import { Dispatch, SetStateAction } from "react";
+import { HeaderGroup } from "react-table";
+export interface ColumnMapping<T extends object> {
+    name: string;
+    slug: keyof T;
+    index?: number;
+    settings?: {
+        field: string;
+    };
+}
+export interface PrimaryTableHeaderProps<T extends object> {
+    headerGroups: HeaderGroup<T>[];
+    editingHeader: number | null;
+    searchText: string;
+    setSearchText: (text: string) => void;
+    setSubmittedSearchText: Dispatch<SetStateAction<string>>;
+    setSortColumn: (column: string) => void;
+    setSearchColumn: (column: string) => void;
+    setEditingHeader: (headerIndex: number | null) => void;
+    setHeaderValue: (headerValue: string) => void;
+    setResetSearch: Dispatch<SetStateAction<boolean>>;
+    showSlideMenu?: boolean;
+    columnMappings: ColumnMapping<T>[];
+    setClearSearch: Dispatch<SetStateAction<boolean>>;
+    hasBorder?: boolean;
+    showHeaderOptions?: boolean;
+    slug: string;
+    isNested?: boolean;
+    parentIndex?: number;
+    searchResultsPillColor?: string;
+    onHeaderSortClick: (columnId: keyof T, direction: string) => void;
+    PortalComponent?: React.ReactNode;
+    containerRef?: React.RefObject<HTMLDivElement>;
+    magnifyingIconRef?: React.RefObject<HTMLDivElement>;
+}

package/dist/components/PrimaryTableHeader/types.js

@@ -0,0 +1,2 @@
+// src/components/types.ts
+export {};

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { SearchInputProps } from "./SearchInput.types";
-declare const SearchInput: React.FC<SearchInputProps>;
+declare const SearchInput: <T extends object>({ closeOutSearch, setResetSearch, setEditingHeader, pillColor, textHighlight, column, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, control, valueKey, dynamicDefaultValue, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchInput;

package/dist/components/SearchInput/SearchInput.js

@@ -1,17 +1,67 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import BaseButton from "../BaseButton/BaseButton";
-const SearchInput = ({ label, inputName, inputType, hasPlaceholder, placeholder, inputTextSize, inputShape, backgroundColor, inputWidth, inputBorderClasses, buttonClasses, buttonText, buttonIcon, buttonIconClasses, containerClasses, onButtonClick, role, ariaLabel, }) => {
-    const [inputValue, setInputValue] = useState("");
-    const handleInputChange = (e) => {
-        setInputValue(e.target.value);
+import { useEffect, useRef, useState } from "react";
+import SearchTextInput from "./SearchTextInput";
+import SearchNumberInput from "./SearchNumberInput";
+import { Controller } from "react-hook-form";
+// A simple helper function for default values
+function getDefaultValue(dynamicDefaultValue, valueKey) {
+    if (typeof dynamicDefaultValue !== "undefined") {
+        return dynamicDefaultValue;
+    }
+    return "";
+}
+const SearchInput = ({ closeOutSearch, setResetSearch, setEditingHeader, pillColor = "bg-sky-500", textHighlight = "text-sky-500", column, inputType = "text", dropdownIconProp = {
+    name: "chevronDown",
+    weight: "bold",
+    iconClasses: "text-black",
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, control, valueKey, dynamicDefaultValue, }) => {
+    const containerRef = useRef(null);
+    const [localSearchText, setLocalSearchText] = useState("");
+    const inputRef = useRef(null);
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    const handleInputChange = (event) => {
+        setLocalSearchText(event.target.value);
     };
-    const handleButtonClick = (event) => {
-        event.preventDefault();
-        if (event.currentTarget instanceof HTMLButtonElement) {
-            onButtonClick(inputValue);
+    const handleSubmitClick = () => {
+        const trimmedSearchText = localSearchText.trim();
+        let safeHeader;
+        if (typeof column.Header === "string") {
+            safeHeader = column.Header;
         }
+        else {
+            safeHeader = column.accessor || "Unnamed Column";
+        }
+        if (trimmedSearchText === "") {
+            // Remove criterion if text is empty
+        }
+        else {
+            // Update or add criterion
+        }
+        setEditingHeader(null);
     };
-    return (_jsx("div", { className: containerClasses, role: role, "aria-label": ariaLabel, children: _jsxs("form", { className: "w-full", children: [_jsx("label", { htmlFor: inputName, className: `sr-only`, children: label }), _jsx("div", { className: "flex w-full", children: _jsxs("div", { className: "flex w-full", children: [_jsx("input", { type: inputType, placeholder: hasPlaceholder ? placeholder : undefined, name: inputName, id: inputName, value: inputValue, onChange: handleInputChange, className: `flex p-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputWidth} ${inputBorderClasses}` }), _jsx("div", { className: `flex items-center justify-center h-full`, children: _jsx(BaseButton, { text: buttonText, icon: buttonIcon, iconClasses: buttonIconClasses, as: "button", additionalClasses: buttonClasses, onClick: handleButtonClick }) })] }) })] }) }));
+    return (_jsx("div", { ref: containerRef, className: "", children: (() => {
+            switch (inputType) {
+                case "text":
+                    return (_jsx(SearchTextInput, { closeOutSearch: () => { }, setResetSearch: () => { }, setEditingHeader: () => { }, column: undefined, dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems }));
+                case "number":
+                    return (_jsx(SearchNumberInput, { closeOutSearch: () => { }, setResetSearch: () => { }, setEditingHeader: () => { }, column: undefined, dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue }));
+                case "multiSelect":
+                case "boolean":
+                case "date":
+                    // Make sure control & valueKey exist before using them
+                    if (!control || !valueKey) {
+                        return (_jsxs("div", { className: "text-red-500", children: ["Missing ", _jsx("code", { children: "control" }), " or", " ", _jsx("code", { children: "valueKey" }), " prop for React Hook Form"] }));
+                    }
+                    return (_jsx(Controller, { name: valueKey, control: control, defaultValue: getDefaultValue(dynamicDefaultValue, valueKey), render: ({ field }) => (_jsx("div", { className: "inline-flex items-center", children: _jsxs("label", { className: "flex items-center cursor-pointer relative", children: [_jsx("input", { type: "checkbox", className: "peer h-5 w-5 cursor-pointer transition-all appearance-none rounded border border-stroke", id: valueKey, checked: !!field.value, onChange: (e) => {
+                                            // You can log the value here:
+                                            console.log("Checkbox changed to:", e.target.checked);
+                                            field.onChange(e.target.checked);
+                                        } }), _jsx("span", { className: "absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3.5 w-3.5", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })] }) })) }));
+                default:
+                    return null;
+            }
+        })() }));
 };
 export default SearchInput;

package/dist/components/SearchInput/SearchInput.stories.d.ts

@@ -2,8 +2,6 @@ import { Meta } from "@storybook/react";
 declare const _default: Meta;
 export default _default;
 export declare const Default: any;
-export declare const CommerceSearchInput: any;
-export declare const WithIconButton: any;
-export declare const WithoutButton: any;
-export declare const CustomizedButton: any;
+export declare const TextInput: any;
+export declare const NumberInput: any;
 export declare const DisabledInput: any;