@agilant/toga-blox 1.0.319-beta.82 → 1.0.319-beta.83

package/dist/components/Table/components/columnFiltersAndSorts/HeaderFilterSearch.js

@@ -10,14 +10,21 @@ const FILTER_MODE_LABELS = {
     includes: "Includes",
     excludes: "Excludes",
 };
+// Keep in sync with .headerFilterMenu width in toga.module.css
+const HEADER_FILTER_MENU_WIDTH = 329;
 export const HeaderFilterSearch = ({ columnId, filterValue, filterMode: filterModeProp, filterIndex, onFilterChange, onClear, skin, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [portalStyles, setPortalStyles] = useState({});
     const [isModeOpen, setIsModeOpen] = useState(false);
     const [filterMode, setFilterMode] = useState("includes");
     const [inputValue, setInputValue] = useState(filterValue);
+    const [isFocused, setIsFocused] = useState(false);
     const [activeTags, setActiveTags] = useState(filterValue ? [filterValue] : []);
     const [modeDropdownPos, setModeDropdownPos] = useState(null);
+    // When centering would clip the menu off the left edge of the scroll
+    // container (e.g. the first column), left-align it so it extends right.
+    const [alignLeft, setAlignLeft] = useState(false);
+    const triggerRef = useRef(null);
     const inputRef = useRef(null);
     const modeButtonRef = useRef(null);
     const isActive = activeTags.length > 0;
@@ -65,6 +72,22 @@ export const HeaderFilterSearch = ({ columnId, filterValue, filterMode: filterMo
             setActiveTags([filterValue]);
         }
     }, [filterValue]);
+    const handleTriggerClick = (e) => {
+        e.stopPropagation();
+        // Only recompute alignment when opening.
+        if (!isOpen) {
+            const btnRect = triggerRef.current?.getBoundingClientRect();
+            const scroller = triggerRef.current?.closest('[class*="scrollWrapper"]');
+            const containerLeft = scroller?.getBoundingClientRect().left ?? 0;
+            if (btnRect) {
+                const centeredLeft = btnRect.left +
+                    btnRect.width / 2 -
+                    HEADER_FILTER_MENU_WIDTH / 2;
+                setAlignLeft(centeredLeft < containerLeft);
+            }
+        }
+        setIsOpen((prev) => !prev);
+    };
     const handleModeButtonClick = () => {
         if (isModeOpen) {
             setIsModeOpen(false);
@@ -109,14 +132,13 @@ export const HeaderFilterSearch = ({ columnId, filterValue, filterMode: filterMo
         else
             onFilterChange(next.join(","), filterMode);
     };
-    return (_jsxs("div", { className: styles.headerFilter, children: [_jsx("button", { onClick: (e) => {
-                    e.stopPropagation();
-                    setIsOpen((prev) => !prev);
-                }, className: styles.headerFilterButton, "data-active": isActive, "data-open": isOpen, children: _jsx("span", { className: styles.headerFilterButtonIcon, "data-active": isActive, children: getFontAwesomeIcon("search", isActive ? "solid" : "regular") }) }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.headerFilterBackdrop, onClick: () => {
+    return (_jsxs("div", { className: styles.headerFilter, children: [_jsx("button", { ref: triggerRef, onClick: handleTriggerClick, className: styles.headerFilterButton, "data-active": isActive, "data-open": isOpen, children: _jsx("span", { className: styles.headerFilterButtonIcon, "data-active": isActive, children: getFontAwesomeIcon("search", isActive ? "solid" : "regular") }) }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.headerFilterBackdrop, onClick: () => {
                             setIsOpen(false);
                             setIsModeOpen(false);
                             setModeDropdownPos(null);
-                        } }), _jsxs("div", { ref: popoverRef, className: styles.headerFilterMenu, "data-mode-open": isModeOpen, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: styles.headerFilterInputRow, children: [_jsx("div", { className: styles.headerFilterModeWrapper, children: _jsxs("button", { ref: modeButtonRef, className: styles.headerFilterModeButton, onClick: handleModeButtonClick, children: [isModeOpen && (_jsx("span", { children: getFontAwesomeIcon("check", "regular") })), FILTER_MODE_LABELS[filterMode], !isModeOpen && (_jsx("span", { className: styles.headerFilterModeButtonIcon, children: getFontAwesomeIcon("chevronDown", "regular") }))] }) }), _jsx("label", { htmlFor: "search", className: "sr-only" }), _jsx("input", { ref: inputRef, id: "search", className: styles.headerFilterInput, placeholder: "Search", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown }), inputValue && (_jsx("button", { className: styles.headerFilterIconButton, onClick: () => setInputValue(""), children: getFontAwesomeIcon("xmark", "regular") })), _jsx("button", { className: styles.headerFilterSearchButton, onClick: handleConfirm, children: getFontAwesomeIcon("search", "regular") })] }), activeTags.length > 0 && (_jsx("div", { className: styles.headerFilterTags, children: activeTags.map((tag) => (_jsxs("span", { className: styles.headerFilterTag, children: [tag, _jsx("button", { className: styles.headerFilterTagRemove, onClick: () => removeTag(tag), children: getFontAwesomeIcon("xmark", "regular") })] }, tag))) }))] })] })), isModeOpen &&
+                        } }), _jsxs("div", { ref: popoverRef, className: styles.headerFilterMenu, "data-mode-open": isModeOpen, "data-align": alignLeft ? "left" : "center", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: styles.headerFilterInputRow, children: [_jsx("div", { className: styles.headerFilterModeWrapper, children: _jsxs("button", { ref: modeButtonRef, className: styles.headerFilterModeButton, onClick: handleModeButtonClick, children: [isModeOpen && (_jsx("span", { className: styles.headerFilterModeButtonIcon, children: getFontAwesomeIcon("check", "regular") })), FILTER_MODE_LABELS[filterMode], !isModeOpen && (_jsx("span", { className: styles.headerFilterModeButtonIcon, children: getFontAwesomeIcon("chevronDown", "regular") }))] }) }), activeTags.length === 0 &&
+                                        !inputValue &&
+                                        !isFocused && (_jsx("span", { className: styles.headerFilterSearchIcon, children: getFontAwesomeIcon("search", "regular") })), _jsx("label", { htmlFor: "search", className: "sr-only" }), _jsx("input", { ref: inputRef, id: "search", className: styles.headerFilterInput, placeholder: "Search", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) }), inputValue && (_jsx("button", { className: styles.headerFilterIconButton, onClick: () => setInputValue(""), children: getFontAwesomeIcon("xmark", "regular") })), inputValue && (_jsx("button", { className: styles.headerFilterSearchButton, onClick: handleConfirm, children: getFontAwesomeIcon("search", "regular") }))] }), activeTags.length > 0 && (_jsx("div", { className: styles.headerFilterTags, children: activeTags.map((tag) => (_jsxs("span", { className: styles.headerFilterTag, children: [tag, _jsx("button", { className: styles.headerFilterTagRemove, onClick: () => removeTag(tag), children: getFontAwesomeIcon("xmark", "regular") })] }, tag))) }))] })] })), isModeOpen &&
                 modeDropdownPos &&
                 createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: styles.headerFilterBackdrop, onClick: () => {
                                 setIsModeOpen(false);

package/dist/components/Table/themeConfig/toga.module.css

@@ -946,6 +946,13 @@
 	font-size: 14px;
 }
 
+/* First column: centering clips the menu off the scroll container's left
+   edge, so anchor it to the button's left edge and let it extend right. */
+.headerFilterMenu[data-align="left"] {
+	left: -100px;
+	transform: none;
+}
+
 /* Square off the bottom-left corner so the mode dropdown visually connects */
 .headerFilterMenu[data-mode-open="true"] {
 	border-radius: 4px 4px 4px 0px;
@@ -973,6 +980,7 @@
 	color: var(--filterDropdown-text-default);
 	white-space: nowrap;
 	width: 103px;
+	font-weight: 400;
 }
 
 .headerFilterModeButtonIcon {
@@ -1001,7 +1009,7 @@
 	gap: 6px;
 	width: 103px;
 	padding: 7px 12px;
-	color: #374151;
+	color: var(--filterDropdown-itemText-color-default);
 	text-align: right;
 	font-family: var(--filterDropdown-fontFamily-default);
 	font-size: 14px;
@@ -1023,20 +1031,45 @@
 	flex-shrink: 0;
 }
 
+/* Search icon (leading, inside input row) */
+.headerFilterSearchIcon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-left: 8px;
+	color: var(--headerFilterInput-icon-default);
+	flex-shrink: 0;
+}
+
+/* Hide the leading search icon while the input is focused */
+.headerFilterInputRow:focus-within .headerFilterSearchIcon {
+	display: none;
+}
+
 /* Text input */
 .headerFilterInput {
 	flex: 1;
 	height: 100%;
 	padding: 0 8px;
-	color: #111827;
+	color: var(--headerFilterInput-text-default);
+	font-weight: var(--headerFilterInput-font-weight);
 	background: transparent;
 	border: none;
 	outline: none;
 	min-width: 0;
+
+	&::placeholder {
+		font-weight: 400;
+		color: #9ca3af;
+	}
 }
 
 .headerFilterInput::placeholder {
-	color: #9ca3af;
+	color: var(--headerFilterInput-placeholder-text-default);
+}
+.headerFilterSearchIcon {
+	color: var(--filterDropdown-text-default);
+	padding-left: 10px;
 }
 
 /* Icon buttons (clear X) */
@@ -1046,13 +1079,13 @@
 	justify-content: center;
 	padding: 0 6px;
 	height: 100%;
-	color: #6b7280;
+	color: var(--headerFilterInput-icon-btn-text-default);
 	flex-shrink: 0;
 	font-size: 20px;
 }
 
 .headerFilterIconButton:hover {
-	color: #111827;
+	color: var(--headerFilterInput-icon-btn-text-hover);
 }
 
 /* Blue search confirm button */
@@ -1077,7 +1110,6 @@
 	gap: 4px;
 	padding: 6px 8px;
 	border-top: 1px solid #e5e7eb;
-	background-color: #f9fafb;
 }
 
 .headerFilterTag {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.319-beta.82",
+	"version": "1.0.319-beta.83",
 	"description": "Toga-Blox is a comprehensive and reusable React component library",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",