@solidxai/core-ui 0.1.14-beta.9 → 0.1.15-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. package/dist/components/common/DropzonePlaceholder.d.ts +2 -1
  2. package/dist/components/common/DropzonePlaceholder.d.ts.map +1 -1
  3. package/dist/components/common/DropzonePlaceholder.js +10 -7
  4. package/dist/components/common/DropzonePlaceholder.js.map +1 -1
  5. package/dist/components/common/DropzonePlaceholder.tsx +14 -9
  6. package/dist/components/core/card/CardItem.js +1 -1
  7. package/dist/components/core/card/CardItem.js.map +1 -1
  8. package/dist/components/core/card/CardItem.tsx +1 -1
  9. package/dist/components/core/card/SolidCardView.d.ts.map +1 -1
  10. package/dist/components/core/card/SolidCardView.js +2 -2
  11. package/dist/components/core/card/SolidCardView.js.map +1 -1
  12. package/dist/components/core/card/SolidCardView.tsx +7 -12
  13. package/dist/components/core/common/SolidGlobalSearchElement.d.ts.map +1 -1
  14. package/dist/components/core/common/SolidGlobalSearchElement.js +101 -86
  15. package/dist/components/core/common/SolidGlobalSearchElement.js.map +1 -1
  16. package/dist/components/core/common/SolidGlobalSearchElement.tsx +161 -98
  17. package/dist/components/core/form/SolidFormView.d.ts.map +1 -1
  18. package/dist/components/core/form/SolidFormView.js +96 -72
  19. package/dist/components/core/form/SolidFormView.js.map +1 -1
  20. package/dist/components/core/form/SolidFormView.tsx +39 -17
  21. package/dist/components/core/form/fields/SolidMediaMultipleField.d.ts.map +1 -1
  22. package/dist/components/core/form/fields/SolidMediaMultipleField.js +3 -2
  23. package/dist/components/core/form/fields/SolidMediaMultipleField.js.map +1 -1
  24. package/dist/components/core/form/fields/SolidMediaMultipleField.tsx +3 -1
  25. package/dist/components/core/form/fields/SolidMediaSingleField.d.ts.map +1 -1
  26. package/dist/components/core/form/fields/SolidMediaSingleField.js +3 -2
  27. package/dist/components/core/form/fields/SolidMediaSingleField.js.map +1 -1
  28. package/dist/components/core/form/fields/SolidMediaSingleField.tsx +3 -1
  29. package/dist/components/core/form/fields/relations/SolidRelationManyToManyField.d.ts +1 -0
  30. package/dist/components/core/form/fields/relations/SolidRelationManyToManyField.d.ts.map +1 -1
  31. package/dist/components/core/form/fields/relations/SolidRelationManyToManyField.js +20 -2
  32. package/dist/components/core/form/fields/relations/SolidRelationManyToManyField.js.map +1 -1
  33. package/dist/components/core/form/fields/relations/SolidRelationManyToManyField.tsx +29 -2
  34. package/dist/components/core/form/fields/solidFields.module.css +7 -0
  35. package/dist/components/core/kanban/KanbanCard.js +1 -1
  36. package/dist/components/core/kanban/KanbanCard.js.map +1 -1
  37. package/dist/components/core/kanban/KanbanCard.tsx +1 -1
  38. package/dist/components/core/kanban/SolidKanbanView.d.ts.map +1 -1
  39. package/dist/components/core/kanban/SolidKanbanView.js +7 -1
  40. package/dist/components/core/kanban/SolidKanbanView.js.map +1 -1
  41. package/dist/components/core/kanban/SolidKanbanView.tsx +10 -5
  42. package/dist/components/core/list/SolidListView.d.ts.map +1 -1
  43. package/dist/components/core/list/SolidListView.js +44 -88
  44. package/dist/components/core/list/SolidListView.js.map +1 -1
  45. package/dist/components/core/list/SolidListView.tsx +19 -93
  46. package/dist/components/core/list/SolidListViewColumn.d.ts +2 -1
  47. package/dist/components/core/list/SolidListViewColumn.d.ts.map +1 -1
  48. package/dist/components/core/list/SolidListViewColumn.js +2 -2
  49. package/dist/components/core/list/SolidListViewColumn.js.map +1 -1
  50. package/dist/components/core/list/SolidListViewColumn.tsx +4 -3
  51. package/dist/components/core/list/columns/SolidRelationColumn.d.ts +1 -1
  52. package/dist/components/core/list/columns/SolidRelationColumn.d.ts.map +1 -1
  53. package/dist/components/core/list/columns/SolidRelationColumn.js +2 -2
  54. package/dist/components/core/list/columns/SolidRelationColumn.js.map +1 -1
  55. package/dist/components/core/list/columns/SolidRelationColumn.tsx +2 -2
  56. package/dist/components/core/list/columns/relations/SolidRelationManyToOneColumn.d.ts +2 -2
  57. package/dist/components/core/list/columns/relations/SolidRelationManyToOneColumn.d.ts.map +1 -1
  58. package/dist/components/core/list/columns/relations/SolidRelationManyToOneColumn.js +5 -4
  59. package/dist/components/core/list/columns/relations/SolidRelationManyToOneColumn.js.map +1 -1
  60. package/dist/components/core/list/columns/relations/SolidRelationManyToOneColumn.tsx +5 -4
  61. package/dist/components/core/model/FieldMetaDataForm.d.ts.map +1 -1
  62. package/dist/components/core/model/FieldMetaDataForm.js +147 -97
  63. package/dist/components/core/model/FieldMetaDataForm.js.map +1 -1
  64. package/dist/components/core/model/FieldMetaDataForm.tsx +123 -31
  65. package/dist/components/core/tree/SolidTreeView.d.ts.map +1 -1
  66. package/dist/components/core/tree/SolidTreeView.js +1 -1
  67. package/dist/components/core/tree/SolidTreeView.js.map +1 -1
  68. package/dist/components/core/tree/SolidTreeView.tsx +4 -12
  69. package/dist/components/layout/AdminHeaderActions.js +1 -1
  70. package/dist/components/layout/AdminHeaderActions.js.map +1 -1
  71. package/dist/components/layout/AdminHeaderActions.tsx +1 -1
  72. package/dist/helpers/getAcceptedFileTypes.d.ts +12 -2
  73. package/dist/helpers/getAcceptedFileTypes.d.ts.map +1 -1
  74. package/dist/helpers/getAcceptedFileTypes.js +72 -16
  75. package/dist/helpers/getAcceptedFileTypes.js.map +1 -1
  76. package/dist/helpers/getAcceptedFileTypes.tsx +101 -18
  77. package/dist/helpers/registry.js +2 -1
  78. package/dist/helpers/registry.js.map +1 -1
  79. package/dist/helpers/registry.ts +3 -1
  80. package/dist/index.d.ts +1 -1
  81. package/dist/index.d.ts.map +1 -1
  82. package/dist/index.js.map +1 -1
  83. package/dist/index.ts +1 -2
  84. package/dist/resources/globals.css +259 -109
  85. package/dist/resources/solid-responsive.css +1 -5
  86. package/dist/resources/solid-tailwind-generated.css +1 -1
  87. package/dist/resources/themes/solid-light-modern/theme.css +3 -4
  88. package/dist/types/index.d.ts +2 -4
  89. package/dist/types/solid-core.d.ts +4 -13
  90. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
- import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
1
+ import React, { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
2
2
  import FilterComponent, { FilterOperator, FilterRule, FilterRuleType } from "../../../components/core/common/FilterComponent";
3
3
  import { toTitleCase } from "../../../helpers/helpers";
4
4
  import {clearFilterObjectFromLocalStorage,getFilterObjectFromLocalStorage,setFilterObjectToLocalStorage,
@@ -11,7 +11,7 @@ import { hydrateRelationRules } from "../../../helpers/hydrateRelationRules";
11
11
  import { useSession } from '../../../hooks/useSession'
12
12
  import { getUnboundSavedFilterVariableNames, parseSavedFilterQueryJson, resolveSavedFilterVariables } from '../../../helpers/resolveActiveUserId';
13
13
  import GroupingComponent, { AggregationRule, GroupingRule, DateGroupingFormat } from "./GroupingComponent";
14
- import { Bookmark, Check, Filter, ListFilter, Pencil, Plus, Search, SearchX, Trash2, X } from "lucide-react";
14
+ import { Bookmark, Check, Filter, Pencil, Plus, Search, SearchX, Sparkles, Trash2, X } from "lucide-react";
15
15
  import { SolidButton } from "../../shad-cn-ui/SolidButton";
16
16
  import { SolidInput } from "../../shad-cn-ui/SolidInput";
17
17
  import {
@@ -418,7 +418,7 @@ export const mergeAllDiffFilters = (customFilter: any, searchFilter: any, savedF
418
418
  return filters;
419
419
  }
420
420
 
421
- const SavedFilterList = ({ savedfilter, activeSavedFilterReference, applySavedFilter, openSavedCustomFilter, setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible, isFocused, onMouseEnter }: any) => {
421
+ const SavedFilterList = ({ savedfilter, activeSavedFilterReference, applySavedFilter, openSavedCustomFilter, setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible, isFocused, onMouseEnter, optionId }: any) => {
422
422
  const isActive = savedfilter?.systemKey
423
423
  ? activeSavedFilterReference === savedfilter.systemKey
424
424
  : String(activeSavedFilterReference) === String(savedfilter.id);
@@ -430,13 +430,32 @@ const SavedFilterList = ({ savedfilter, activeSavedFilterReference, applySavedFi
430
430
  variant="ghost"
431
431
  size="sm"
432
432
  className={`solid-saved-filter-main w-full ${isActive ? "is-active" : ""} ${isFocused ? "solid-search-overlay-option-active" : ""}`}
433
+ id={optionId}
434
+ role="option"
435
+ aria-selected={isFocused}
436
+ aria-label={`${savedfilter.name}${isActive ? ", applied" : ""}`}
433
437
  onMouseDown={(e) => {
434
438
  e.preventDefault();
435
439
  applySavedFilter(savedfilter);
436
440
  }}
437
441
  title={savedfilter?.description}
438
442
  >
439
- {savedfilter.name}
443
+ <span className="solid-search-overlay-option-content">
444
+ <span className="solid-search-overlay-option-icon" aria-hidden="true">
445
+ <Bookmark size={15} />
446
+ </span>
447
+ <span className="solid-search-overlay-option-copy">
448
+ <span className="solid-search-overlay-option-title">{savedfilter.name}</span>
449
+ {savedfilter?.description && (
450
+ <span className="solid-search-overlay-option-description">{savedfilter.description}</span>
451
+ )}
452
+ </span>
453
+ {isActive && (
454
+ <span className="solid-search-overlay-option-check" aria-hidden="true">
455
+ <Check size={14} />
456
+ </span>
457
+ )}
458
+ </span>
440
459
  </SolidButton>
441
460
  </div>
442
461
  <div className="solid-saved-filter-actions">
@@ -450,6 +469,7 @@ const SavedFilterList = ({ savedfilter, activeSavedFilterReference, applySavedFi
450
469
  e.preventDefault();
451
470
  openSavedCustomFilter(savedfilter);
452
471
  }}
472
+ aria-label={`Edit ${savedfilter.name}`}
453
473
  >
454
474
  <Pencil size={14} />
455
475
  </SolidButton>
@@ -462,6 +482,7 @@ const SavedFilterList = ({ savedfilter, activeSavedFilterReference, applySavedFi
462
482
  setSavedFilterTobeDeleted(savedfilter.id),
463
483
  setIsDeleteSQDialogVisible(true);
464
484
  }}
485
+ aria-label={`Delete ${savedfilter.name}`}
465
486
  >
466
487
  <Trash2 size={14} />
467
488
  </SolidButton>
@@ -550,16 +571,19 @@ type RelationCache = Map<string, { label: string; value: number }>;
550
571
 
551
572
 
552
573
 
553
- export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handleApplyCustomFilter, showSaveFilterPopup, setShowSaveFilterPopup, filterPredicates, definedFilters, onRemoveDefinedFilter, onApplyDefinedFilter }: any, ref) => {
574
+ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handleApplyCustomFilter, showSaveFilterPopup, setShowSaveFilterPopup, filterPredicates }: any, ref) => {
554
575
  type OverlayOption =
555
576
  | { id: string; kind: "field"; field: any }
556
577
  | { id: string; kind: "predefined"; predefined: any }
557
578
  | { id: string; kind: "saved"; saved: any }
558
579
  | { id: string; kind: "custom" }
559
580
  | { id: string; kind: "grouping" };
581
+ const overlayInstanceId = useId();
582
+ const overlayListboxId = `${overlayInstanceId}-search-options`;
583
+ const getOverlayOptionId = (index: number) => `${overlayInstanceId}-search-option-${index}`;
560
584
  type ManagedChipItem = {
561
585
  id: string;
562
- type: "saved" | "search" | "predefined" | "custom" | "grouping" | "handler";
586
+ type: "saved" | "search" | "predefined" | "custom" | "grouping";
563
587
  label: string;
564
588
  onRemove: () => void;
565
589
  onOpen?: () => void;
@@ -678,7 +702,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
678
702
 
679
703
  useEffect(() => {
680
704
  if (focusedIndex >= 0 && showOverlay) {
681
- const activeElement = document.querySelector(`.solid-search-overlay-option-active`);
705
+ const activeElement = overlayRef.current?.querySelector(`.solid-search-overlay-option-active`);
682
706
  if (activeElement) {
683
707
  activeElement.scrollIntoView({
684
708
  block: 'nearest',
@@ -1529,6 +1553,25 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
1529
1553
  return false;
1530
1554
  }
1531
1555
 
1556
+ // Applying the already-active filter must be a no-op. This is important
1557
+ // for lifecycle extensions: applying a filter causes a new list load,
1558
+ // which invokes onBeforeListDataLoad/onListLoad again.
1559
+ const sameSavedFilterReference =
1560
+ (currentSavedFilterData?.id != null &&
1561
+ savedfilter?.id != null &&
1562
+ areFilterStateValuesEqual(currentSavedFilterData.id, savedfilter.id)) ||
1563
+ (currentSavedFilterData?.systemKey != null &&
1564
+ savedfilter?.systemKey != null &&
1565
+ areFilterStateValuesEqual(currentSavedFilterData.systemKey, savedfilter.systemKey));
1566
+ const sameSavedFilter =
1567
+ sameSavedFilterReference &&
1568
+ areFilterStateValuesEqual(currentSavedFilterQuery, filterJson) &&
1569
+ areFilterStateValuesEqual(currentSavedFilterVariables, variables);
1570
+
1571
+ if (sameSavedFilter) {
1572
+ return true;
1573
+ }
1574
+
1532
1575
  setSearchChips([]);
1533
1576
  setSearchFilter(null);
1534
1577
  setFilterRules(initialState);
@@ -1705,16 +1748,6 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
1705
1748
  });
1706
1749
  });
1707
1750
 
1708
- (definedFilters || []).forEach((definedFilter: any) => {
1709
- if (!definedFilter?.applied) return;
1710
- items.push({
1711
- id: `handler:${definedFilter.key}`,
1712
- type: "handler",
1713
- label: definedFilter.label,
1714
- onRemove: () => onRemoveDefinedFilter?.(definedFilter.key),
1715
- });
1716
- });
1717
-
1718
1751
  return items;
1719
1752
  }, [
1720
1753
  currentSavedFilterData,
@@ -1724,8 +1757,6 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
1724
1757
  groupingRules,
1725
1758
  groupedSearchChips,
1726
1759
  searchableFields,
1727
- definedFilters,
1728
- onRemoveDefinedFilter,
1729
1760
  ]);
1730
1761
 
1731
1762
  const MAX_VISIBLE_CHIPS = 3;
@@ -1784,7 +1815,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
1784
1815
  }]
1785
1816
  : [];
1786
1817
 
1787
- return [...fields, ...predefined, ...saved, ...custom, ...grouping];
1818
+ return [...predefined, ...fields, ...saved, ...custom, ...grouping];
1788
1819
  }, [inputValue, searchableFields, predefinedSearches, selectableSavedFilters, viewType]);
1789
1820
 
1790
1821
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -1808,6 +1839,12 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
1808
1839
  setShowOverlay(false);
1809
1840
  };
1810
1841
 
1842
+ if (e.key === "Escape") {
1843
+ e.preventDefault();
1844
+ setShowOverlay(false);
1845
+ return;
1846
+ }
1847
+
1811
1848
  if ((e.key === "ArrowDown" || e.key === "ArrowUp") && overlayOptions.length > 0) {
1812
1849
  e.preventDefault();
1813
1850
  setShowOverlay(true);
@@ -1819,6 +1856,12 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
1819
1856
  return;
1820
1857
  }
1821
1858
 
1859
+ if ((e.key === "Home" || e.key === "End") && showOverlay && overlayOptions.length > 0) {
1860
+ e.preventDefault();
1861
+ setFocusedIndex(e.key === "Home" ? 0 : overlayOptions.length - 1);
1862
+ return;
1863
+ }
1864
+
1822
1865
  if (e.key === "Enter") {
1823
1866
  if (currentValue || focusedIndex >= 0) {
1824
1867
  e.preventDefault();
@@ -2036,7 +2079,13 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
2036
2079
  ref={searchInputRef}
2037
2080
  className="solid-global-search-input"
2038
2081
  value={inputValue || ""}
2039
- placeholder="Search."
2082
+ placeholder="Search…"
2083
+ role="combobox"
2084
+ aria-label="Search and filter"
2085
+ aria-autocomplete="list"
2086
+ aria-expanded={showOverlay}
2087
+ aria-controls={showOverlay ? overlayListboxId : undefined}
2088
+ aria-activedescendant={showOverlay && focusedIndex >= 0 ? getOverlayOptionId(focusedIndex) : undefined}
2040
2089
  onChange={(e) => {
2041
2090
  setInputValue(e.target.value);
2042
2091
  setShowChipManager(false);
@@ -2067,6 +2116,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
2067
2116
  focusSearchInput();
2068
2117
  }}
2069
2118
  className="custom-filter-button solid-global-search-trigger"
2119
+ aria-label="Open search options"
2070
2120
  >
2071
2121
  <Search size={14} />
2072
2122
  </SolidButton>
@@ -2111,53 +2161,77 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
2111
2161
  )} */}
2112
2162
 
2113
2163
  {showOverlay && (
2114
- <div ref={overlayRef} className="absolute w-full shadow-md solid-search-overlay-pannel">
2164
+ <div
2165
+ ref={overlayRef}
2166
+ id={overlayListboxId}
2167
+ role="listbox"
2168
+ aria-label="Search and filter options"
2169
+ className="solid-search-overlay-panel"
2170
+ >
2115
2171
  <div className="solid-search-overlay-scroll">
2116
- {(definedFilters || []).some((f: any) => !f?.applied) && (
2117
- <>
2118
- <div className="custom-filter-search-options solid-search-overlay-section flex flex-col px-3 py-2">
2119
- <h6 className="my-1 solid-search-overlay-heading solid-search-overlay-section-title solid-search-overlay-heading-with-icon">
2120
- <ListFilter size={13} />
2121
- <span>Defined filters</span>
2122
- </h6>
2123
- <div className="solid-defined-filter-badge-row">
2124
- {(definedFilters || [])
2125
- .filter((f: any) => !f?.applied)
2126
- .map((definedFilter: any) => (
2127
- <button
2128
- key={definedFilter.key}
2129
- type="button"
2130
- className="solid-defined-filter-badge"
2131
- onMouseDown={(e) => {
2132
- e.preventDefault();
2133
- onApplyDefinedFilter?.(definedFilter.key);
2134
- setShowOverlay(false);
2135
- }}
2136
- >
2137
- <Plus size={12} />
2138
- <span className="solid-defined-filter-badge-label">{definedFilter.label}</span>
2139
- </button>
2140
- ))}
2141
- </div>
2142
- </div>
2143
- <div className="solid-filter-dialog-sep" />
2144
- </>
2145
- )}
2146
2172
  {inputValue ? (
2147
2173
  <>
2148
- <div className="custom-filter-search-options solid-search-overlay-section flex flex-col px-3 py-1">
2174
+ {predefinedSearches && predefinedSearches.length > 0 && (
2175
+ <>
2176
+ <div className="solid-search-overlay-section solid-search-overlay-section--predefined">
2177
+ <h6 className="my-1 solid-search-overlay-heading solid-search-overlay-section-title solid-search-overlay-heading-with-icon">
2178
+ <Sparkles size={14} />
2179
+ <span>Suggested searches</span>
2180
+ <span className="solid-search-overlay-section-count">{predefinedSearches.length}</span>
2181
+ </h6>
2182
+ {predefinedSearches.map((predefinedSearch: any, index: number) => {
2183
+ const optionIndex = overlayOptions.findIndex((option) => option.id === `predefined:${predefinedSearch.name || index}`);
2184
+ return (
2185
+ <SolidButton
2186
+ key={index}
2187
+ id={getOverlayOptionId(optionIndex)}
2188
+ role="option"
2189
+ aria-selected={focusedIndex === optionIndex}
2190
+ variant="ghost"
2191
+ size="sm"
2192
+ className={`text-color solid-search-overlay-option ${focusedIndex === optionIndex ? "solid-search-overlay-option-active" : ""}`}
2193
+ onMouseDown={(e) => {
2194
+ e.preventDefault();
2195
+ handlePredefinedSearch(predefinedSearch);
2196
+ }}
2197
+ onMouseEnter={() => setFocusedIndex(optionIndex)}
2198
+ >
2199
+ <span className="solid-search-overlay-option-content">
2200
+ <span className="solid-search-overlay-option-icon" aria-hidden="true">
2201
+ <Sparkles size={15} />
2202
+ </span>
2203
+ <span className="solid-search-overlay-option-copy">
2204
+ <span className="solid-search-overlay-option-title">{predefinedSearch.name}</span>
2205
+ <span className="solid-search-overlay-option-description">
2206
+ Search for “{inputValue}”{predefinedSearch.description ? ` — ${predefinedSearch.description}` : ""}
2207
+ </span>
2208
+ </span>
2209
+ </span>
2210
+ </SolidButton>
2211
+ );
2212
+ })}
2213
+ </div>
2214
+ <div className="solid-filter-dialog-sep" />
2215
+ </>
2216
+ )}
2217
+ <div className="solid-search-overlay-section solid-search-overlay-section--search">
2149
2218
  <h6 className="my-1 solid-search-overlay-heading solid-search-overlay-section-title solid-search-overlay-heading-with-icon">
2150
2219
  <Search size={13} />
2151
- <span>Search by fields</span>
2220
+ <span>Search individual fields</span>
2221
+ <span className="solid-search-overlay-section-count">{searchableFields.length}</span>
2152
2222
  </h6>
2153
2223
  {searchableFields.length > 0 ? (
2154
2224
  searchableFields.map((value: any, index: number) => {
2225
+ const optionIndex = overlayOptions.findIndex((option) => option.id === `field:${value.fieldName}`);
2155
2226
  return (
2156
2227
  <SolidButton
2157
2228
  key={index}
2229
+ id={getOverlayOptionId(optionIndex)}
2230
+ role="option"
2231
+ aria-selected={focusedIndex === optionIndex}
2158
2232
  variant="ghost"
2159
2233
  size="sm"
2160
- className={`flex justify-start gap-1 text-color solid-search-overlay-option ${focusedIndex === index ? "solid-search-overlay-option-active" : ""}`}
2234
+ className={`text-color solid-search-overlay-option ${focusedIndex === optionIndex ? "solid-search-overlay-option-active" : ""}`}
2161
2235
  onMouseDown={(e) => {
2162
2236
  e.preventDefault();
2163
2237
  const currentValue = inputValue?.trim();
@@ -2177,9 +2251,17 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
2177
2251
  setShowOverlay(false);
2178
2252
  }
2179
2253
  }}
2180
- onMouseEnter={() => setFocusedIndex(index)}
2254
+ onMouseEnter={() => setFocusedIndex(optionIndex)}
2181
2255
  >
2182
- Search <strong style={{ paddingLeft: "2px" }}>{toTitleCase(value.displayName.trim())}</strong>&nbsp;for:&nbsp; <span className="font-bold text-color">{inputValue}</span>
2256
+ <span className="solid-search-overlay-option-content">
2257
+ <span className="solid-search-overlay-option-icon" aria-hidden="true">
2258
+ <Search size={15} />
2259
+ </span>
2260
+ <span className="solid-search-overlay-option-copy">
2261
+ <span className="solid-search-overlay-option-title">{toTitleCase(value.displayName.trim())}</span>
2262
+ <span className="solid-search-overlay-option-description">Search for “{inputValue}”</span>
2263
+ </span>
2264
+ </span>
2183
2265
  </SolidButton>
2184
2266
  )
2185
2267
  })
@@ -2194,37 +2276,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
2194
2276
  </div>
2195
2277
  )}
2196
2278
  </div>
2197
- {predefinedSearches && predefinedSearches.length > 0 && (
2198
- <>
2199
- <div className="solid-filter-dialog-sep" />
2200
- <div className="custom-filter-search-options solid-search-overlay-section flex flex-col px-3 py-1">
2201
- <h6 className="my-1 solid-search-overlay-heading solid-search-overlay-section-title">Predefined searches</h6>
2202
- {predefinedSearches.map((predefinedSearch: any, index: number) => (
2203
- <SolidButton
2204
- key={index}
2205
- variant="ghost"
2206
- size="sm"
2207
- className={`flex flex-col items-start gap-1 text-color solid-search-overlay-option solid-search-overlay-option-stacked ${focusedIndex === searchableFields.length + index ? "solid-search-overlay-option-active" : ""}`}
2208
- onMouseDown={(e) => {
2209
- e.preventDefault();
2210
- handlePredefinedSearch(predefinedSearch);
2211
- }}
2212
- onMouseEnter={() => setFocusedIndex(searchableFields.length + index)}
2213
- >
2214
- <div className="flex items-center gap-1">
2215
- <strong>{predefinedSearch.name}:</strong>
2216
- <span className="font-bold text-color pr-1">{inputValue} </span>
2217
- </div>
2218
- <div className="text-xs">{predefinedSearch.description}</div>
2219
- </SolidButton>
2220
- ))}
2221
- </div>
2222
- </>
2223
- )}
2224
2279
  </>
2225
2280
  ) :
2226
2281
  <>
2227
- <div className="p-3 solid-search-overlay-empty">
2282
+ <div className="solid-search-overlay-empty">
2228
2283
  <div className="solid-search-overlay-panel-callout">
2229
2284
  <div className="solid-search-overlay-panel-callout-icon">
2230
2285
  <Search size={13} />
@@ -2234,7 +2289,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
2234
2289
  Start typing to search
2235
2290
  </div>
2236
2291
  <div className="solid-search-overlay-empty-subtitle">
2237
- Start typing in search input to see all fields on which you can search {searchableEntityLabel} by.
2292
+ Enter a value to see suggested searches and searchable {searchableEntityLabel} fields.
2238
2293
  </div>
2239
2294
  </div>
2240
2295
  </div>
@@ -2244,19 +2299,20 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
2244
2299
  }
2245
2300
  {selectableSavedFilters.length > 0 &&
2246
2301
  <>
2247
- <div className="p-3 solid-search-overlay-section">
2302
+ <hr className="solid-search-overlay-section-separator" />
2303
+ <div className="solid-search-overlay-section solid-search-overlay-section--saved">
2248
2304
  <div className="solid-search-overlay-panel-callout solid-search-overlay-panel-callout-compact">
2249
2305
  <div className="solid-search-overlay-panel-callout-icon">
2250
2306
  <Bookmark size={13} />
2251
2307
  </div>
2252
2308
  <div className="solid-search-overlay-panel-callout-copy">
2253
- <p className="solid-search-overlay-heading solid-search-overlay-section-title">Saved filters</p>
2254
- <div className="solid-search-overlay-empty-subtitle">
2255
- Reusable filter sets available for this view.
2256
- </div>
2309
+ <p className="solid-search-overlay-heading solid-search-overlay-section-title">
2310
+ <span>Saved filters</span>
2311
+ <span className="solid-search-overlay-section-count">{selectableSavedFilters.length}</span>
2312
+ </p>
2257
2313
  </div>
2258
2314
  </div>
2259
- <div className="flex flex-col solid-search-overlay-saved-list">
2315
+ <div className="solid-search-overlay-saved-list">
2260
2316
  {selectableSavedFilters.map((savedfilter: any, index: number) => (
2261
2317
  <SavedFilterList
2262
2318
  key={savedfilter.id}
@@ -2271,6 +2327,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
2271
2327
  const optIndex = overlayOptions.findIndex(o => o.id === `saved:${savedfilter.id}`);
2272
2328
  if (optIndex !== -1) setFocusedIndex(optIndex);
2273
2329
  }}
2330
+ optionId={getOverlayOptionId(overlayOptions.findIndex(o => o.id === `saved:${savedfilter.id}`))}
2274
2331
  />
2275
2332
  ))}
2276
2333
  </div>
@@ -2282,7 +2339,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
2282
2339
  <div className="solid-search-overlay-footer">
2283
2340
  <button
2284
2341
  type="button"
2285
- className={`flex flex-col px-3 py-2 solid-search-overlay-footer-action ${overlayOptions[focusedIndex]?.id === "footer:custom" ? "solid-search-overlay-option-active" : ""}`}
2342
+ id={getOverlayOptionId(overlayOptions.findIndex((option) => option.id === "footer:custom"))}
2343
+ role="option"
2344
+ aria-selected={overlayOptions[focusedIndex]?.id === "footer:custom"}
2345
+ className={`solid-search-overlay-footer-action solid-search-overlay-footer-action--custom ${overlayOptions[focusedIndex]?.id === "footer:custom" ? "solid-search-overlay-option-active" : ""}`}
2286
2346
  onMouseDown={(event) => {
2287
2347
  event.preventDefault();
2288
2348
  openCustomFilterDialog();
@@ -2298,10 +2358,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
2298
2358
  </div>
2299
2359
  <div className="solid-search-overlay-panel-callout-copy">
2300
2360
  <div className="solid-search-overlay-footer-title solid-search-overlay-section-title">
2301
- Click here to apply custom filters
2361
+ Advanced filters
2302
2362
  </div>
2303
2363
  <div className="solid-search-overlay-footer-subtitle">
2304
- Use custom filters to apply conditions on any field using any operator.
2364
+ Combine fields, operators and values.
2305
2365
  </div>
2306
2366
  </div>
2307
2367
  </div>
@@ -2309,7 +2369,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
2309
2369
  {viewType === "tree" && (
2310
2370
  <button
2311
2371
  type="button"
2312
- className={`flex flex-col px-3 py-2 solid-search-overlay-footer-action solid-search-overlay-footer-action-secondary ${overlayOptions[focusedIndex]?.id === "footer:grouping" ? "solid-search-overlay-option-active" : ""}`}
2372
+ id={getOverlayOptionId(overlayOptions.findIndex((option) => option.id === "footer:grouping"))}
2373
+ role="option"
2374
+ aria-selected={overlayOptions[focusedIndex]?.id === "footer:grouping"}
2375
+ className={`solid-search-overlay-footer-action solid-search-overlay-footer-action-secondary ${overlayOptions[focusedIndex]?.id === "footer:grouping" ? "solid-search-overlay-option-active" : ""}`}
2313
2376
  onMouseDown={(event) => {
2314
2377
  event.preventDefault();
2315
2378
  openGroupingDialog();
@@ -2325,10 +2388,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
2325
2388
  </div>
2326
2389
  <div className="solid-search-overlay-panel-callout-copy">
2327
2390
  <div className="solid-search-overlay-footer-title solid-search-overlay-section-title">
2328
- Click here to do custom grouping
2391
+ Group and aggregate
2329
2392
  </div>
2330
2393
  <div className="solid-search-overlay-footer-subtitle">
2331
- Configure grouping rules and aggregations for the tree view.
2394
+ Organise records and calculate aggregate values.
2332
2395
  </div>
2333
2396
  </div>
2334
2397
  </div>
@@ -1 +1 @@
1
- {"version":3,"file":"SolidFormView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormView.tsx"],"names":[],"mappings":"AA+DA,MAAM,MAAM,kBAAkB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,mBAAmB,CAAC,EAAE,GAAG,CAAA;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAmIF,eAAO,MAAM,uBAAuB,WAAY,GAAG,EAAE,KAAG,GAQvD,CAAA;AACD,eAAO,MAAM,sBAAsB,QAAS,MAAM,uBAAuB,OAAO,MAAM,EAAE,GAAG,CAAC,QAa3F,CAAC;AAkXF,QAAA,MAAM,aAAa,WAAY,kBAAkB,4CAm+ChD,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"SolidFormView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormView.tsx"],"names":[],"mappings":"AA+DA,MAAM,MAAM,kBAAkB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,mBAAmB,CAAC,EAAE,GAAG,CAAA;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AA6IF,eAAO,MAAM,uBAAuB,WAAY,GAAG,EAAE,KAAG,GAQvD,CAAA;AACD,eAAO,MAAM,sBAAsB,QAAS,MAAM,uBAAuB,OAAO,MAAM,EAAE,GAAG,CAAC,QAa3F,CAAC;AAkXF,QAAA,MAAM,aAAa,WAAY,kBAAkB,4CA++ChD,CAAC;AAEF,eAAe,aAAa,CAAC"}