@solidxai/core-ui 0.1.5-beta.8 → 0.1.6

package/dist/components/core/common/SolidGlobalSearchElement.js

@@ -400,8 +400,8 @@ export var mergeAllDiffFilters = function (customFilter, searchFilter, savedFilt
     return filters;
 };
 var SavedFilterList = function (_a) {
-    var savedfilter = _a.savedfilter, activeSavedFilter = _a.activeSavedFilter, applySavedFilter = _a.applySavedFilter, openSavedCustomFilter = _a.openSavedCustomFilter, setSavedFilterTobeDeleted = _a.setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible = _a.setIsDeleteSQDialogVisible;
-    return (_jsxs("div", { className: "flex align-items-center justify-content-between gap-2", children: [_jsx("div", { children: _jsx(Button, { text: true, size: "small", className: "text-base py-1 w-full", severity: Number(activeSavedFilter) == savedfilter.id ? "secondary" : "contrast", onClick: function () { return applySavedFilter(savedfilter); }, tooltip: savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.description, children: savedfilter.name }) }), _jsx("div", { className: "flex align-items-center gap-2", children: savedfilter.isSeeded !== true &&
+    var savedfilter = _a.savedfilter, activeSavedFilter = _a.activeSavedFilter, applySavedFilter = _a.applySavedFilter, openSavedCustomFilter = _a.openSavedCustomFilter, setSavedFilterTobeDeleted = _a.setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible = _a.setIsDeleteSQDialogVisible, isFocused = _a.isFocused;
+    return (_jsxs("div", { className: "flex align-items-center justify-content-between gap-2", children: [_jsx("div", { children: _jsx(Button, { text: true, size: "small", className: "text-base py-1 w-full ".concat(isFocused ? 'surface-hover' : ''), severity: Number(activeSavedFilter) == savedfilter.id ? "secondary" : "contrast", onClick: function () { return applySavedFilter(savedfilter); }, tooltip: savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.description, children: savedfilter.name }) }), _jsx("div", { className: "flex align-items-center gap-2", children: savedfilter.isSeeded !== true &&
                     _jsxs(_Fragment, { children: [_jsx(Button, { icon: "pi pi-pencil", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: function () { return openSavedCustomFilter(savedfilter); } }), _jsx(Button, { icon: "pi pi-trash", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: function () {
                                     setSavedFilterTobeDeleted(savedfilter.id),
                                         setIsDeleteSQDialogVisible(true);
@@ -549,19 +549,20 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     var _6 = useState(), savedFilterQueryString = _6[0], setSavedFilterQueryString = _6[1];
     var _7 = useState(false), showOverlay = _7[0], setShowOverlay = _7[1];
     var overlayRef = useRef(null);
-    var _8 = useSession(), session = _8.data, status = _8.status;
+    var _8 = useState(-1), focusedIndex = _8[0], setFocusedIndex = _8[1];
+    var _9 = useSession(), session = _9.data, status = _9.status;
     var user = session === null || session === void 0 ? void 0 : session.user;
-    var _9 = useState(0), refreshKey = _9[0], setRefreshKey = _9[1];
-    var _10 = useState(null), predefinedSearchBaseFilter = _10[0], setPredefinedSearchBaseFilter = _10[1];
-    var _11 = useState([]), savedFilters = _11[0], setSavedFilters = _11[1];
-    var _12 = useState(false), savedFiltersLoaded = _12[0], setSavedFiltersLoaded = _12[1];
+    var _10 = useState(0), refreshKey = _10[0], setRefreshKey = _10[1];
+    var _11 = useState(null), predefinedSearchBaseFilter = _11[0], setPredefinedSearchBaseFilter = _11[1];
+    var _12 = useState([]), savedFilters = _12[0], setSavedFilters = _12[1];
+    var _13 = useState(false), savedFiltersLoaded = _13[0], setSavedFiltersLoaded = _13[1];
     var entityApi = createSolidEntityApi("savedFilters");
     var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
-    var _13 = useCreateSolidEntityMutation(), createEntity = _13[0], _14 = _13[1], isEntityCreateSuccess = _14.isSuccess, isEntityCreateError = _14.isError, entityCreateError = _14.error;
-    var _15 = useUpdateSolidEntityMutation(), updateEntity = _15[0], _16 = _15[1], isEntityUpdateSuceess = _16.isSuccess, isEntityUpdateError = _16.isError, entityUpdateError = _16.error;
-    var _17 = useDeleteSolidEntityMutation(), deleteEntity = _17[0], _18 = _17[1], isEntityDeleteSuceess = _18.isSuccess, isEntityDeleteError = _18.isError, entityDeleteError = _18.error;
-    var _19 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _19[0], _20 = _19[1], solidEntityListViewData = _20.data, isSavedFilterLoading = _20.isLoading, error = _20.error;
-    var _21 = useState(0), savedFilterFetchDataRefreshKey = _21[0], setSavedFilterFetchDataRefreshKey = _21[1];
+    var _14 = useCreateSolidEntityMutation(), createEntity = _14[0], _15 = _14[1], isEntityCreateSuccess = _15.isSuccess, isEntityCreateError = _15.isError, entityCreateError = _15.error;
+    var _16 = useUpdateSolidEntityMutation(), updateEntity = _16[0], _17 = _16[1], isEntityUpdateSuceess = _17.isSuccess, isEntityUpdateError = _17.isError, entityUpdateError = _17.error;
+    var _18 = useDeleteSolidEntityMutation(), deleteEntity = _18[0], _19 = _18[1], isEntityDeleteSuceess = _19.isSuccess, isEntityDeleteError = _19.isError, entityDeleteError = _19.error;
+    var _20 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _20[0], _21 = _20[1], solidEntityListViewData = _21.data, isSavedFilterLoading = _21.isLoading, error = _21.error;
+    var _22 = useState(0), savedFilterFetchDataRefreshKey = _22[0], setSavedFilterFetchDataRefreshKey = _22[1];
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
             var filters, queryData, queryString, savedFilter;
@@ -1189,10 +1190,63 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         return acc;
     }, {});
     var handleKeyDown = function (e) {
-        if (e.key === "Enter" && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim())) {
-            handleAddChip();
+        var hasInput = !!(inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim());
+        var searchCount = hasInput ? searchableFields.length : 0;
+        var predefinedCount = hasInput ? ((predefinedSearches === null || predefinedSearches === void 0 ? void 0 : predefinedSearches.length) || 0) : 0;
+        var savedFiltersCount = (savedFilters === null || savedFilters === void 0 ? void 0 : savedFilters.length) || 0;
+        var totalItems = searchCount + predefinedCount + savedFiltersCount;
+        if (e.key === "ArrowDown") {
             e.preventDefault();
-            setShowOverlay(false);
+            if (showOverlay) {
+                setFocusedIndex(function (prev) { return (prev < totalItems - 1 ? prev + 1 : prev); });
+            }
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            if (showOverlay) {
+                setFocusedIndex(function (prev) { return (prev > -1 ? prev - 1 : prev); });
+            }
+        }
+        else if (e.key === "Enter") {
+            if (hasInput || focusedIndex >= 0)
+                e.preventDefault();
+            var predefinedSearchOffset = searchCount;
+            var savedFilterOffset = predefinedSearchOffset + predefinedCount;
+            if (showOverlay && focusedIndex >= 0 && focusedIndex < predefinedSearchOffset) {
+                var value_1 = searchableFields[focusedIndex];
+                var currentValue = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()) || "";
+                var values = currentValue.split(",").map(function (v) { return v.trim(); }).filter(function (v) { return v !== ""; });
+                var chipsToAdd_2 = values.map(function (v) { return ({
+                    columnName: value_1.fieldName,
+                    value: v,
+                    columnDisplayName: value_1.displayName,
+                    searchField: value_1.searchField,
+                    matchMode: value_1.matchMode
+                }); });
+                setSearchChips(function (prev) { return __spreadArray(__spreadArray([], prev, true), chipsToAdd_2, true); });
+                setInputValue("");
+                setHasSearched(true);
+                setRefreshKey(function (prev) { return prev + 1; });
+                setShowOverlay(false);
+                setFocusedIndex(-1);
+            }
+            else if (showOverlay && focusedIndex >= predefinedSearchOffset && focusedIndex < savedFilterOffset) {
+                var predefinedSearch = predefinedSearches[focusedIndex - predefinedSearchOffset];
+                handlePredefinedSearch(predefinedSearch);
+                setFocusedIndex(-1);
+            }
+            else if (showOverlay && focusedIndex >= savedFilterOffset && focusedIndex < totalItems) {
+                var savedFilterIdx = focusedIndex - savedFilterOffset;
+                var savedFilter = savedFilters[savedFilterIdx];
+                if (savedFilter)
+                    applySavedFilter(savedFilter);
+                setFocusedIndex(-1);
+            }
+            else if (hasInput) {
+                handleAddChip();
+                setShowOverlay(false);
+                setFocusedIndex(-1);
+            }
         }
         else if (e.key === "Backspace" && inputValue === "") {
             if (searchChips.length > 0) {
@@ -1275,6 +1329,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex justify-content-center solid-custom-filter-wrapper relative", children: [_jsx("div", { className: "solid-global-search-element", children: _jsxs("ul", { className: "", children: [currentSavedFilterData && _jsx(SavedFiltersChip, {}), predefinedSearchChip && _jsx(PredefinedSearchChip, {}), customFilter && _jsx(CustomChip, {}), groupingRules.length > 0 && groupingRules.some(function (r) { return r.fieldName !== null; }) && _jsx(GroupingChip, {}), _jsx(SearchChip, {}), _jsx("li", { ref: chipsRef, children: _jsxs("div", { className: "relative solid-global-search-element-wrapper", children: [_jsx(InputText, { value: inputValue || "", placeholder: "Search.", onChange: function (e) {
                                                 setInputValue(e.target.value);
                                                 setShowOverlay(true);
+                                                setFocusedIndex(-1);
                                             }, onFocus: function () {
                                                 if (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim())
                                                     setShowOverlay(true);
@@ -1283,7 +1338,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                                                 setTimeout(function () { return setShowOverlay(false); }, 150);
                                             }, onKeyDown: handleKeyDown }), _jsx(Button, { icon: "pi pi-search", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: function () { return setShowOverlay(true); }, className: "custom-filter-button" })] }) })] }) }), showOverlay && (_jsxs("div", { ref: overlayRef, className: "absolute w-full z-5 shadow-2 solid-search-overlay-pannel", style: { top: 35, background: "var(--surface-0)", border: '1px solid var(--surface-300) !important', borderRadius: '6px' }, children: [inputValue ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "custom-filter-search-options px-3 py-2 flex flex-column", children: [_jsx("h6", { className: "my-1 font-bold", children: "Search By Fields" }), searchableFields.map(function (value, index) {
                                             // console.log("value", value);
-                                            return (_jsxs(Button, { className: "p-2 flex gap-1 text-color", 
+                                            return (_jsxs(Button, { className: "p-2 flex gap-1 text-color ".concat(focusedIndex === index ? 'surface-hover' : ''), 
                                                 // onClick={() => handleAddChip(value)}
                                                 onMouseDown: function (e) {
                                                     // Prevent focus loss from input
@@ -1291,27 +1346,29 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                                                     var currentValue = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim();
                                                     if (currentValue) {
                                                         var values = currentValue.split(",").map(function (v) { return v.trim(); }).filter(function (v) { return v !== ""; });
-                                                        var chipsToAdd_2 = values.map(function (v) { return ({
+                                                        var chipsToAdd_3 = values.map(function (v) { return ({
                                                             columnName: value.fieldName,
                                                             value: v,
                                                             columnDisplayName: value.displayName,
                                                             searchField: value.searchField,
                                                             matchMode: value.matchMode
                                                         }); });
-                                                        setSearchChips(function (prev) { return __spreadArray(__spreadArray([], prev, true), chipsToAdd_2, true); });
+                                                        setSearchChips(function (prev) { return __spreadArray(__spreadArray([], prev, true), chipsToAdd_3, true); });
                                                         setInputValue("");
                                                         setHasSearched(true);
                                                         setRefreshKey(function (prev) { return prev + 1; });
                                                         setShowOverlay(false);
                                                     }
                                                 }, text: true, severity: "secondary", size: "small", children: ["Search ", _jsx("strong", { children: value.displayName }), " for: ", _jsx("span", { className: "font-bold text-color", children: inputValue })] }, index));
-                                        })] }), predefinedSearches && predefinedSearches.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: "m-0" }), _jsxs("div", { className: "custom-filter-search-options px-3 py-2 flex flex-column", children: [_jsx("h6", { className: "my-1 font-bold", children: "Predefined Searches" }), predefinedSearches.map(function (predefinedSearch, index) { return (_jsxs(Button, { className: "p-2 flex flex-column align-items-start gap-1 text-color", onMouseDown: function (e) {
+                                        })] }), predefinedSearches && predefinedSearches.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: "m-0" }), _jsxs("div", { className: "custom-filter-search-options px-3 py-2 flex flex-column", children: [_jsx("h6", { className: "my-1 font-bold", children: "Predefined Searches" }), predefinedSearches.map(function (predefinedSearch, index) { return (_jsxs(Button, { className: "p-2 flex flex-column align-items-start gap-1 text-color ".concat(focusedIndex === (index + searchableFields.length) ? 'surface-hover' : ''), onMouseDown: function (e) {
                                                         e.preventDefault();
                                                         handlePredefinedSearch(predefinedSearch);
                                                     }, text: true, severity: "secondary", size: "small", children: [_jsxs("div", { className: "flex gap-1 align-items-center", children: [_jsxs("strong", { children: [predefinedSearch.name, ":"] }), _jsx("span", { className: "font-bold text-color", children: inputValue })] }), _jsx("div", { className: "text-xs", children: predefinedSearch.description })] }, index)); })] })] }))] })) :
                             _jsxs(_Fragment, { children: [_jsx("div", { className: "p-3 text-base", children: "Search Here..." }), _jsx(Divider, { className: "m-0" })] }), savedFilters.length > 0 &&
-                            _jsxs(_Fragment, { children: [_jsxs("div", { className: "p-3", children: [_jsx("p", { className: "font-medium", children: "Saved Filters" }), _jsx("div", { className: "flex flex-column gap-2", children: savedFilters.map(function (savedfilter) {
-                                                    return _jsx(SavedFilterList, { savedfilter: savedfilter, activeSavedFilter: activeSavedFilter, applySavedFilter: applySavedFilter, openSavedCustomFilter: openSavedCustomFilter, setSavedFilterTobeDeleted: setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible: setIsDeleteSQDialogVisible });
+                            _jsxs(_Fragment, { children: [_jsxs("div", { className: "p-3", children: [_jsx("p", { className: "font-medium", children: "Saved Filters" }), _jsx("div", { className: "flex flex-column gap-2", children: savedFilters.map(function (savedfilter, idx) {
+                                                    var hasInput = !!(inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim());
+                                                    var combinedOffset = (hasInput ? searchableFields.length : 0) + (hasInput ? ((predefinedSearches === null || predefinedSearches === void 0 ? void 0 : predefinedSearches.length) || 0) : 0);
+                                                    return (_jsx(SavedFilterList, { savedfilter: savedfilter, activeSavedFilter: activeSavedFilter, applySavedFilter: applySavedFilter, openSavedCustomFilter: openSavedCustomFilter, setSavedFilterTobeDeleted: setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible: setIsDeleteSQDialogVisible, isFocused: focusedIndex === combinedOffset + idx }, idx));
                                                 }) })] }), _jsx(Divider, { className: "m-0" })] }), _jsxs("div", { className: "px-2 py-1 flex justify-content-between", children: [_jsx(Button, { text: true, size: "small", label: "Custom Filter", iconPos: "left", icon: 'pi pi-plus', onClick: function () { return setShowGlobalSearchElement(true); }, className: "font-bold" }), viewType === "tree" &&
                                     _jsx(Button, { text: true, size: "small", label: "Grouping", iconPos: "left", icon: 'pi pi-plus', onClick: function () { return setShowGroupFilterElement(true); }, className: "font-bold" })] })] })), _jsxs(Dialog, { header: false, className: "solid-global-search-filter", showHeader: false, visible: showGlobalSearchElement, style: { width: '65vw' }, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, onHide: function () { if (!showGlobalSearchElement)
                         return; setShowGlobalSearchElement(false); }, children: [_jsxs("div", { className: "flex align-items-center justify-content-between px-3", children: [_jsx("h5", { className: "solid-custom-title m-0", children: "Add Custom Filter" }), _jsx(Button, { icon: "pi pi-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setShowGlobalSearchElement(false); } })] }), _jsx(Divider, { className: "m-0" }), _jsx("div", { className: "p-2 lg:p-2", children: fields.length > 0 &&