@geotab/zenith 3.13.0-beta.1 → 3.13.1-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.
- package/README.md +3 -1
- package/dist/commonHelpers/hooks/usePillSize.js +2 -2
- package/dist/controlledPopup/controlledPopup.d.ts +4 -1
- package/dist/controlledPopup/controlledPopup.js +2 -2
- package/dist/filters/components/filtersContainer.js +64 -7
- package/dist/filters/components/filtersSearch.d.ts +7 -2
- package/dist/filters/components/filtersSearch.js +36 -72
- package/dist/filters/components/filtersSearchList.js +18 -35
- package/dist/filters/filters.d.ts +2 -0
- package/dist/filters/filters.js +66 -180
- package/dist/filters/filtersHelper.js +1 -1
- package/dist/groupsFilterRaw/groupsFilterRaw.js +7 -1
- package/dist/index.css +158 -69
- package/dist/inputAdornments/inputAdornments.d.ts +2 -1
- package/dist/inputAdornments/inputAdornments.js +2 -2
- package/dist/searchInputRaw/searchInputRaw.js +6 -2
- package/dist/searchInputRaw/types.d.ts +4 -0
- package/dist/utils/localization/translations/en.json +1 -0
- package/dist/utils/positioningUtils/calculatePosition.js +3 -1
- package/dist/utils/positioningUtils/normalizeVertically.js +1 -1
- package/esm/commonHelpers/hooks/usePillSize.js +2 -2
- package/esm/controlledPopup/controlledPopup.d.ts +4 -1
- package/esm/controlledPopup/controlledPopup.js +2 -2
- package/esm/filters/components/filtersContainer.js +65 -8
- package/esm/filters/components/filtersSearch.d.ts +7 -2
- package/esm/filters/components/filtersSearch.js +36 -49
- package/esm/filters/components/filtersSearchList.js +18 -35
- package/esm/filters/filters.d.ts +2 -0
- package/esm/filters/filters.js +67 -181
- package/esm/filters/filtersHelper.js +1 -1
- package/esm/groupsFilterRaw/groupsFilterRaw.js +7 -1
- package/esm/inputAdornments/inputAdornments.d.ts +2 -1
- package/esm/inputAdornments/inputAdornments.js +2 -2
- package/esm/searchInputRaw/searchInputRaw.js +6 -2
- package/esm/searchInputRaw/types.d.ts +4 -0
- package/esm/utils/localization/translations/en.json +1 -0
- package/esm/utils/positioningUtils/calculatePosition.js +3 -1
- package/esm/utils/positioningUtils/normalizeVertically.js +1 -1
- package/package.json +1 -1
package/dist/filters/filters.js
CHANGED
|
@@ -41,87 +41,7 @@ injectString("zh-Hans", "Open setting conditions popup", "Open setting condition
|
|
|
41
41
|
injectString("zh-TW", "Open setting conditions popup", "Open setting conditions popup");
|
|
42
42
|
injectString("ro-RO", "Open setting conditions popup", "Deschide\u021Bi pop-up-ul cu condi\u021Bii de setare");
|
|
43
43
|
injectString("ar", "Open setting conditions popup", "\u0641\u062A\u062D \u0646\u0627\u0641\u0630\u0629 \u0625\u0639\u062F\u0627\u062F \u0627\u0644\u0634\u0631\u0648\u0637");
|
|
44
|
-
injectString("
|
|
45
|
-
injectString("da-DK", "Search page", "Search page");
|
|
46
|
-
injectString("de", "Search page", "Search page");
|
|
47
|
-
injectString("en", "Search page", "Search page");
|
|
48
|
-
injectString("es", "Search page", "Search page");
|
|
49
|
-
injectString("fi-FI", "Search page", "Search page");
|
|
50
|
-
injectString("fr", "Search page", "Search page");
|
|
51
|
-
injectString("fr-FR", "Search page", "Search page");
|
|
52
|
-
injectString("hu-HU", "Search page", "Search page");
|
|
53
|
-
injectString("id", "Search page", "Search page");
|
|
54
|
-
injectString("it", "Search page", "Search page");
|
|
55
|
-
injectString("ja", "Search page", "Search page");
|
|
56
|
-
injectString("ko-KR", "Search page", "Search page");
|
|
57
|
-
injectString("ms", "Search page", "Search page");
|
|
58
|
-
injectString("nb-NO", "Search page", "Search page");
|
|
59
|
-
injectString("nl", "Search page", "Search page");
|
|
60
|
-
injectString("pl", "Search page", "Search page");
|
|
61
|
-
injectString("pt-BR", "Search page", "Search page");
|
|
62
|
-
injectString("pt-PT", "Search page", "Pesquisar p\xE1gina");
|
|
63
|
-
injectString("sk-SK", "Search page", "Search page");
|
|
64
|
-
injectString("sv", "Search page", "Search page");
|
|
65
|
-
injectString("th", "Search page", "Search page");
|
|
66
|
-
injectString("tr", "Search page", "Search page");
|
|
67
|
-
injectString("zh-Hans", "Search page", "Search page");
|
|
68
|
-
injectString("zh-TW", "Search page", "Search page");
|
|
69
|
-
injectString("ro-RO", "Search page", "C\u0103uta\u021Bi pagina");
|
|
70
|
-
injectString("ar", "Search page", "\u0635\u0641\u062D\u0629 \u0627\u0644\u0628\u062D\u062B");
|
|
71
|
-
injectString("cs", "Close setting conditions popup", "Close setting conditions popup");
|
|
72
|
-
injectString("da-DK", "Close setting conditions popup", "Close setting conditions popup");
|
|
73
|
-
injectString("de", "Close setting conditions popup", "Close setting conditions popup");
|
|
74
|
-
injectString("en", "Close setting conditions popup", "Close setting conditions popup");
|
|
75
|
-
injectString("es", "Close setting conditions popup", "Close setting conditions popup");
|
|
76
|
-
injectString("fi-FI", "Close setting conditions popup", "Close setting conditions popup");
|
|
77
|
-
injectString("fr", "Close setting conditions popup", "Close setting conditions popup");
|
|
78
|
-
injectString("fr-FR", "Close setting conditions popup", "Close setting conditions popup");
|
|
79
|
-
injectString("hu-HU", "Close setting conditions popup", "Close setting conditions popup");
|
|
80
|
-
injectString("id", "Close setting conditions popup", "Close setting conditions popup");
|
|
81
|
-
injectString("it", "Close setting conditions popup", "Close setting conditions popup");
|
|
82
|
-
injectString("ja", "Close setting conditions popup", "Close setting conditions popup");
|
|
83
|
-
injectString("ko-KR", "Close setting conditions popup", "Close setting conditions popup");
|
|
84
|
-
injectString("ms", "Close setting conditions popup", "Close setting conditions popup");
|
|
85
|
-
injectString("nb-NO", "Close setting conditions popup", "Close setting conditions popup");
|
|
86
|
-
injectString("nl", "Close setting conditions popup", "Close setting conditions popup");
|
|
87
|
-
injectString("pl", "Close setting conditions popup", "Close setting conditions popup");
|
|
88
|
-
injectString("pt-BR", "Close setting conditions popup", "Close setting conditions popup");
|
|
89
|
-
injectString("pt-PT", "Close setting conditions popup", "Fechar o pop-up de condi\xE7\xF5es de configura\xE7\xE3o");
|
|
90
|
-
injectString("sk-SK", "Close setting conditions popup", "Close setting conditions popup");
|
|
91
|
-
injectString("sv", "Close setting conditions popup", "Close setting conditions popup");
|
|
92
|
-
injectString("th", "Close setting conditions popup", "Close setting conditions popup");
|
|
93
|
-
injectString("tr", "Close setting conditions popup", "Close setting conditions popup");
|
|
94
|
-
injectString("zh-Hans", "Close setting conditions popup", "Close setting conditions popup");
|
|
95
|
-
injectString("zh-TW", "Close setting conditions popup", "Close setting conditions popup");
|
|
96
|
-
injectString("ro-RO", "Close setting conditions popup", "\xCEnchide\u021Bi pop-up-ul cu condi\u021Bii de setare");
|
|
97
|
-
injectString("ar", "Close setting conditions popup", "\u0625\u063A\u0644\u0627\u0642 \u0646\u0627\u0641\u0630\u0629 \u0625\u0639\u062F\u0627\u062F \u0627\u0644\u0634\u0631\u0648\u0637");
|
|
98
|
-
injectString("cs", "Search by", "Search by");
|
|
99
|
-
injectString("da-DK", "Search by", "Search by");
|
|
100
|
-
injectString("de", "Search by", "Search by");
|
|
101
|
-
injectString("en", "Search by", "Search by");
|
|
102
|
-
injectString("es", "Search by", "Search by");
|
|
103
|
-
injectString("fi-FI", "Search by", "Search by");
|
|
104
|
-
injectString("fr", "Search by", "Search by");
|
|
105
|
-
injectString("fr-FR", "Search by", "Search by");
|
|
106
|
-
injectString("hu-HU", "Search by", "Search by");
|
|
107
|
-
injectString("id", "Search by", "Search by");
|
|
108
|
-
injectString("it", "Search by", "Search by");
|
|
109
|
-
injectString("ja", "Search by", "Search by");
|
|
110
|
-
injectString("ko-KR", "Search by", "Search by");
|
|
111
|
-
injectString("ms", "Search by", "Search by");
|
|
112
|
-
injectString("nb-NO", "Search by", "Search by");
|
|
113
|
-
injectString("nl", "Search by", "Search by");
|
|
114
|
-
injectString("pl", "Search by", "Search by");
|
|
115
|
-
injectString("pt-BR", "Search by", "Search by");
|
|
116
|
-
injectString("pt-PT", "Search by", "Pesquisar por");
|
|
117
|
-
injectString("sk-SK", "Search by", "Search by");
|
|
118
|
-
injectString("sv", "Search by", "Search by");
|
|
119
|
-
injectString("th", "Search by", "Search by");
|
|
120
|
-
injectString("tr", "Search by", "Search by");
|
|
121
|
-
injectString("zh-Hans", "Search by", "Search by");
|
|
122
|
-
injectString("zh-TW", "Search by", "Search by");
|
|
123
|
-
injectString("ro-RO", "Search by", "C\u0103uta\u021Bi dup\u0103");
|
|
124
|
-
injectString("ar", "Search by", "\u0627\u0644\u0628\u062D\u062B \u062D\u0633\u0628");
|
|
44
|
+
injectString("en", "Find in page", "Find in page");
|
|
125
45
|
injectString("cs", "Setting conditions", "Setting conditions");
|
|
126
46
|
injectString("da-DK", "Setting conditions", "Setting conditions");
|
|
127
47
|
injectString("de", "Setting conditions", "Setting conditions");
|
|
@@ -149,33 +69,6 @@ injectString("zh-Hans", "Setting conditions", "Setting conditions");
|
|
|
149
69
|
injectString("zh-TW", "Setting conditions", "Setting conditions");
|
|
150
70
|
injectString("ro-RO", "Setting conditions", "Condi\u021Bii de setare");
|
|
151
71
|
injectString("ar", "Setting conditions", "\u0625\u0639\u062F\u0627\u062F \u0627\u0644\u0634\u0631\u0648\u0637");
|
|
152
|
-
injectString("cs", "Cancel", "Zru\u0161it");
|
|
153
|
-
injectString("da-DK", "Cancel", "Annuller");
|
|
154
|
-
injectString("de", "Cancel", "Abbrechen");
|
|
155
|
-
injectString("en", "Cancel", "Cancel");
|
|
156
|
-
injectString("es", "Cancel", "Cancelar");
|
|
157
|
-
injectString("fi-FI", "Cancel", "Peruuta");
|
|
158
|
-
injectString("fr", "Cancel", "Annuler");
|
|
159
|
-
injectString("fr-FR", "Cancel", "Annuler");
|
|
160
|
-
injectString("hu-HU", "Cancel", "M\xE9gse");
|
|
161
|
-
injectString("id", "Cancel", "Batalkan");
|
|
162
|
-
injectString("it", "Cancel", "Annullare");
|
|
163
|
-
injectString("ja", "Cancel", "\u30AD\u30E3\u30F3\u30BB\u30EB");
|
|
164
|
-
injectString("ko-KR", "Cancel", "\uCDE8\uC18C");
|
|
165
|
-
injectString("ms", "Cancel", "Batal");
|
|
166
|
-
injectString("nb-NO", "Cancel", "Avbryt");
|
|
167
|
-
injectString("nl", "Cancel", "Annuleren");
|
|
168
|
-
injectString("pl", "Cancel", "Anuluj");
|
|
169
|
-
injectString("pt-BR", "Cancel", "Cancelar");
|
|
170
|
-
injectString("pt-PT", "Cancel", "Cancelar");
|
|
171
|
-
injectString("sk-SK", "Cancel", "Zru\u0161.");
|
|
172
|
-
injectString("sv", "Cancel", "Avbryt");
|
|
173
|
-
injectString("th", "Cancel", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01");
|
|
174
|
-
injectString("tr", "Cancel", "\u0130ptal");
|
|
175
|
-
injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
|
|
176
|
-
injectString("zh-TW", "Cancel", "\u53D6\u6D88");
|
|
177
|
-
injectString("ro-RO", "Cancel", "Anula\u021Bi");
|
|
178
|
-
injectString("ar", "Cancel", "\u0625\u0644\u063A\u0627\u0621");
|
|
179
72
|
injectString("cs", "Filters and search", "Filters and search");
|
|
180
73
|
injectString("da-DK", "Filters and search", "Filters and search");
|
|
181
74
|
injectString("de", "Filters and search", "Filters and search");
|
|
@@ -208,8 +101,6 @@ const react_dom_1 = require("react-dom");
|
|
|
208
101
|
const react_2 = __importDefault(require("react"));
|
|
209
102
|
const filtersSelect_1 = require("./components/filtersSelect");
|
|
210
103
|
const classNames_1 = require("../commonHelpers/classNames/classNames");
|
|
211
|
-
const textIconButton_1 = require("../textIconButton/textIconButton");
|
|
212
|
-
const iconChevronDownSmall_1 = require("../icons/iconChevronDownSmall");
|
|
213
104
|
const useLanguage_1 = require("../utils/localization/useLanguage");
|
|
214
105
|
const controlledPopup_1 = require("../controlledPopup/controlledPopup");
|
|
215
106
|
const filtersContainer_1 = require("./components/filtersContainer");
|
|
@@ -228,12 +119,48 @@ const iconFilter_1 = require("../icons/iconFilter");
|
|
|
228
119
|
const filtersSidePanel_1 = require("./components/filtersSidePanel");
|
|
229
120
|
const filtersDateInput_1 = require("./components/filtersDateInput");
|
|
230
121
|
const useMobile_1 = require("../commonHelpers/hooks/useMobile");
|
|
231
|
-
const iconChevronTopSmall_1 = require("../icons/iconChevronTopSmall");
|
|
232
122
|
const focusableSelector_1 = require("../utils/focusableSelector");
|
|
233
|
-
const button_1 = require("../button/button");
|
|
234
123
|
const filtersSelectCompact_1 = require("./components/filtersSelectCompact");
|
|
235
124
|
const filtersSidePanelProvider_1 = require("./components/filtersSidePanelProvider");
|
|
236
125
|
const zen_1 = require("../utils/zen");
|
|
126
|
+
const alignments_1 = require("../utils/positioningUtils/alignments");
|
|
127
|
+
/** Bottom clearance in px kept between the popup and the viewport bottom edge. */
|
|
128
|
+
const POPUP_BOTTOM_MARGIN = 36;
|
|
129
|
+
/**
|
|
130
|
+
* Custom alignment for the filters search popup.
|
|
131
|
+
* Returns a `height` constraint so calculatePosition sets maxHeight before the
|
|
132
|
+
* overflow check, anchoring the popup at the trigger top without repositioning.
|
|
133
|
+
*/
|
|
134
|
+
const filtersPopupAlignment = Object.assign(Object.assign({}, alignments_1.alignments), {
|
|
135
|
+
"bottom-left": (triggerRect, _1, parentRect, _2, paddingY) => ({
|
|
136
|
+
top: triggerRect.top - parentRect.top + triggerRect.height + paddingY,
|
|
137
|
+
left: triggerRect.left - parentRect.left,
|
|
138
|
+
height: (zen_1.zen.innerHeight || 0) - triggerRect.top - POPUP_BOTTOM_MARGIN
|
|
139
|
+
}),
|
|
140
|
+
"bottom-right": (triggerRect, _1, parentRect, _2, paddingY) => ({
|
|
141
|
+
top: triggerRect.top - parentRect.top + triggerRect.height + paddingY,
|
|
142
|
+
right: parentRect.right - triggerRect.right,
|
|
143
|
+
height: (zen_1.zen.innerHeight || 0) - triggerRect.top - POPUP_BOTTOM_MARGIN
|
|
144
|
+
})
|
|
145
|
+
});
|
|
146
|
+
/**
|
|
147
|
+
* Mobile variant: popup starts at left:0 and spans the full parent width.
|
|
148
|
+
* top:0 aligns the popup with the top of the trigger row.
|
|
149
|
+
*/
|
|
150
|
+
const filtersPopupAlignmentMobile = Object.assign(Object.assign({}, alignments_1.alignments), {
|
|
151
|
+
"bottom-left": (triggerRect, _1, parentRect) => ({
|
|
152
|
+
top: 0,
|
|
153
|
+
left: 0,
|
|
154
|
+
width: parentRect.right - parentRect.left,
|
|
155
|
+
height: (zen_1.zen.innerHeight || 0) - triggerRect.top - POPUP_BOTTOM_MARGIN
|
|
156
|
+
}),
|
|
157
|
+
"bottom-right": (triggerRect, _1, parentRect) => ({
|
|
158
|
+
top: 0,
|
|
159
|
+
right: 0,
|
|
160
|
+
width: parentRect.right - parentRect.left,
|
|
161
|
+
height: (zen_1.zen.innerHeight || 0) - triggerRect.top - POPUP_BOTTOM_MARGIN
|
|
162
|
+
})
|
|
163
|
+
});
|
|
237
164
|
exports.FiltersDisplayName = "Filters";
|
|
238
165
|
/**
|
|
239
166
|
* @beta This component is currently in beta.
|
|
@@ -258,7 +185,8 @@ const Filters = ({
|
|
|
258
185
|
onSaveRecentSearch,
|
|
259
186
|
savedFilters,
|
|
260
187
|
onRemoveSavedFilter,
|
|
261
|
-
onSaveFilter
|
|
188
|
+
onSaveFilter,
|
|
189
|
+
searchPlaceholder
|
|
262
190
|
}) => {
|
|
263
191
|
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
264
192
|
const isSavedFiltersMode = Boolean(savedFilters && onRemoveSavedFilter && onSaveFilter);
|
|
@@ -494,12 +422,6 @@ const Filters = ({
|
|
|
494
422
|
return foundType && foundType.icon ? foundType.icon : iconFilter_1.IconFilter;
|
|
495
423
|
}, [searchTypesArray]);
|
|
496
424
|
const combinedData = (0, filtersHelper_1.useCombineData)(searchTypesArray);
|
|
497
|
-
const memoizedSelect = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSelect_1.FiltersSelect, {
|
|
498
|
-
value: searchType || (0, filtersSelect_1.getFiltersSearchTypeAllOption)(),
|
|
499
|
-
selectListRef: selectListRef,
|
|
500
|
-
onChange: setSearchType,
|
|
501
|
-
items: searchTypesToSelect
|
|
502
|
-
}), [searchType, searchTypesToSelect, setSearchType]);
|
|
503
425
|
const memoizedSelectCompact = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(filtersSelectCompact_1.FiltersSelectCompact, {
|
|
504
426
|
value: searchType || (0, filtersSelect_1.getFiltersSearchTypeAllOption)(),
|
|
505
427
|
selectListRef: selectListCompactRef,
|
|
@@ -526,27 +448,28 @@ const Filters = ({
|
|
|
526
448
|
return (0, jsx_runtime_1.jsx)(filtersSearch_1.FiltersSearch, Object.assign({
|
|
527
449
|
id: `filtersSearch_${uniqueKey}`,
|
|
528
450
|
ref: searchTriggerRef,
|
|
529
|
-
|
|
451
|
+
containerRef: triggerRef,
|
|
452
|
+
name: searchPlaceholder || translate("Find in page"),
|
|
530
453
|
value: keyword,
|
|
531
454
|
onSearchKeyDown: handleSearchKeyDown,
|
|
532
455
|
onOpenPopup: isOpen ? undefined : handleOpenChange.bind(null, true),
|
|
533
456
|
onChange: handleSearchKeywordChange,
|
|
534
|
-
handleRemove: onSearchItemClick,
|
|
535
457
|
searchSelection: searchSelection,
|
|
536
|
-
className: "zen-filters__search-with-pills"
|
|
458
|
+
className: "zen-filters__search-with-pills",
|
|
459
|
+
isMobile: isMobile
|
|
537
460
|
}, popupAttributes));
|
|
538
|
-
}, [isEmptySearchBar, uniqueKey, translate, keyword, handleSearchKeyDown, isOpen, handleOpenChange, handleSearchKeywordChange,
|
|
461
|
+
}, [isEmptySearchBar, uniqueKey, translate, keyword, handleSearchKeyDown, isOpen, handleOpenChange, handleSearchKeywordChange, searchSelection, popupId, redundantPopup, isMobile, searchPlaceholder]);
|
|
539
462
|
const memoizedSearchPopup = (0, react_1.useMemo)(() => isEmptySearchBar ? null : (0, jsx_runtime_1.jsx)(filtersSearch_1.FiltersSearch, {
|
|
540
463
|
id: `filtersSearchPopup_${uniqueKey}`,
|
|
541
464
|
ref: searchPopupTriggerRef,
|
|
542
|
-
name: translate("
|
|
465
|
+
name: searchPlaceholder || translate("Find in page"),
|
|
543
466
|
value: keyword,
|
|
544
467
|
onChange: setKeyword,
|
|
468
|
+
onClear: handleCancelSearchSelection,
|
|
545
469
|
onSearchKeyDown: handleSearchKeyDown,
|
|
546
|
-
handleRemove: onSearchItemClick,
|
|
547
470
|
searchSelection: isMobile ? internalSearchSelection : searchSelection,
|
|
548
|
-
className: "zen-filters-popup__search-with-pills"
|
|
549
|
-
}), [isEmptySearchBar, uniqueKey, translate, keyword, setKeyword,
|
|
471
|
+
className: (0, classNames_1.classNames)(["zen-filters-popup__search-with-pills", isMobile ? "zen-filters-search--mobile" : ""])
|
|
472
|
+
}), [isEmptySearchBar, uniqueKey, translate, keyword, setKeyword, handleCancelSearchSelection, handleSearchKeyDown, isMobile, internalSearchSelection, searchSelection, searchPlaceholder]);
|
|
550
473
|
const memoizedSearchList = (0, react_1.useMemo)(() => !isOpen || isEmptySearchBar ? null : (0, jsx_runtime_1.jsx)(filtersSearchList_1.FiltersSearchList, {
|
|
551
474
|
searchValue: keyword,
|
|
552
475
|
searchListRef: searchListRef,
|
|
@@ -562,74 +485,37 @@ const Filters = ({
|
|
|
562
485
|
applyButtonHandler: isMobile ? handleApplySearchSelection : undefined,
|
|
563
486
|
isInitialSearchSelectionState: isMobile ? memoizedIsInitialSearchSelectionState : undefined
|
|
564
487
|
}), [isOpen, keyword, combinedData, isMobile, internalSearchSelection, searchSelection, searchOnlyOneType, getIconByType, onInternalSearchItemClick, onSearchItemClick, onClearInternalSearchSelection, onClearSearchSelection, isRecentSearchesMode, recentSearches, onRemoveRecentSearchItem, handleRecentSearchItemClick, handleApplySearchSelection, memoizedIsInitialSearchSelectionState, isEmptySearchBar]);
|
|
565
|
-
const allOption = (0, react_1.useMemo)(() => (0, filtersSelect_1.getAllOption)(translate), [translate]);
|
|
566
|
-
const selectTriggerPopup = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
|
|
567
|
-
className: "zen-filters__select-trigger",
|
|
568
|
-
iconClasses: "zen-filters__select-trigger-icon",
|
|
569
|
-
contentClasses: "zen-filters__select-trigger-content",
|
|
570
|
-
title: translate("Close setting conditions popup"),
|
|
571
|
-
onClick: handleOpenChange.bind(null, false),
|
|
572
|
-
icon: iconChevronTopSmall_1.IconChevronTopSmall,
|
|
573
|
-
iconPosition: "end",
|
|
574
|
-
children: translate("Search by")
|
|
575
|
-
}), [handleOpenChange, translate]);
|
|
576
|
-
// added onMouseDown to prevent focus
|
|
577
|
-
const selectTrigger = (0, react_1.useMemo)(() => {
|
|
578
|
-
var _a;
|
|
579
|
-
if (isMobile || redundantPopup) {
|
|
580
|
-
return null;
|
|
581
|
-
}
|
|
582
|
-
const currentSelectedType = selectState[0] === filtersSelect_1.ALL_SELECT_OPTION_ID ? allOption.name : (_a = searchTypesArray.find(item => item.id === selectState[0])) === null || _a === void 0 ? void 0 : _a.name;
|
|
583
|
-
return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
|
|
584
|
-
tabIndex: -1,
|
|
585
|
-
onMouseDown: e => e.preventDefault(),
|
|
586
|
-
className: "zen-filters__select-trigger",
|
|
587
|
-
iconClasses: "zen-filters__select-trigger-icon",
|
|
588
|
-
contentClasses: "zen-filters__select-trigger-content",
|
|
589
|
-
title: translate("Open setting conditions popup"),
|
|
590
|
-
onClick: handleOpenChange.bind(null, true),
|
|
591
|
-
icon: iconChevronDownSmall_1.IconChevronDownSmall,
|
|
592
|
-
iconPosition: "end",
|
|
593
|
-
children: currentSelectedType
|
|
594
|
-
});
|
|
595
|
-
}, [isMobile, redundantPopup, translate, handleOpenChange, selectState, allOption.name, searchTypesArray]);
|
|
596
488
|
const popupChangeHandler = (0, react_1.useCallback)(val => {
|
|
597
489
|
(isMobile ? handleCancelSearchSelection : handleOpenChange)(val);
|
|
598
490
|
}, [isMobile, handleCancelSearchSelection, handleOpenChange]);
|
|
599
491
|
const memoizedPopup = (0, react_1.useMemo)(() => isEmptySearchBar || redundantPopup ? null : (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, {
|
|
600
|
-
paddingY: -34,
|
|
492
|
+
paddingY: isMobile ? 0 : -34,
|
|
601
493
|
isOpen: isOpen,
|
|
602
|
-
className: (0, classNames_1.classNames)(["zen-filters-popup",
|
|
494
|
+
className: (0, classNames_1.classNames)(["zen-filters-popup", "zen-filters-popup--mobile"]),
|
|
603
495
|
onOpenChange: popupChangeHandler,
|
|
604
496
|
useTrapFocusWithTrigger: "none",
|
|
605
|
-
alignment: "bottom",
|
|
497
|
+
alignment: "bottom-start",
|
|
606
498
|
shouldHoldScroll: true,
|
|
607
499
|
preventAttributesAutoSet: true,
|
|
608
500
|
triggerRef: triggerRef,
|
|
609
501
|
ariaLabel: translate("Setting conditions"),
|
|
610
502
|
recalculateOnScroll: true,
|
|
611
503
|
id: popupId,
|
|
612
|
-
|
|
504
|
+
alignmentsFn: isMobile ? filtersPopupAlignmentMobile : filtersPopupAlignment,
|
|
505
|
+
children: (0, jsx_runtime_1.jsx)("div", {
|
|
613
506
|
className: "zen-filters-popup__content",
|
|
614
|
-
children:
|
|
615
|
-
className: "zen-filters-popup__left-panel",
|
|
616
|
-
children: [selectTriggerPopup, memoizedSelect]
|
|
617
|
-
}), (0, jsx_runtime_1.jsxs)("div", {
|
|
507
|
+
children: (0, jsx_runtime_1.jsxs)("div", {
|
|
618
508
|
className: "zen-filters-popup__right-panel",
|
|
619
|
-
children: [(0, jsx_runtime_1.
|
|
620
|
-
className: (0, classNames_1.classNames)(["zen-filters-popup__first-row",
|
|
621
|
-
children:
|
|
622
|
-
type: "tertiary",
|
|
623
|
-
onClick: handleCancelSearchSelection,
|
|
624
|
-
children: translate("Cancel")
|
|
625
|
-
}) : null]
|
|
509
|
+
children: [(0, jsx_runtime_1.jsx)("div", {
|
|
510
|
+
className: (0, classNames_1.classNames)(["zen-filters-popup__first-row", "zen-filters-popup__first-row--mobile"]),
|
|
511
|
+
children: memoizedSearchPopup
|
|
626
512
|
}), (0, jsx_runtime_1.jsxs)("div", {
|
|
627
|
-
className: (0, classNames_1.classNames)(["zen-filters-popup__second-row",
|
|
628
|
-
children: [
|
|
513
|
+
className: (0, classNames_1.classNames)(["zen-filters-popup__second-row", "zen-filters-popup__second-row--mobile"]),
|
|
514
|
+
children: [memoizedSelectCompact, memoizedSearchList]
|
|
629
515
|
})]
|
|
630
|
-
})
|
|
516
|
+
})
|
|
631
517
|
})
|
|
632
|
-
}), [isEmptySearchBar, redundantPopup, isOpen, isMobile, popupChangeHandler,
|
|
518
|
+
}), [isEmptySearchBar, redundantPopup, isOpen, isMobile, popupChangeHandler, translate, memoizedSearchPopup, memoizedSelectCompact, memoizedSearchList, popupId]);
|
|
633
519
|
const filtersForRender = (0, react_1.useMemo)(() => filters.filter(el => {
|
|
634
520
|
const elProps = el.props;
|
|
635
521
|
return typeof elProps.visible === "boolean" ? elProps.visible : elProps.visible === undefined ? false : elProps.visible(Array.from(selectState), undefined);
|
|
@@ -712,11 +598,11 @@ const Filters = ({
|
|
|
712
598
|
return (0, jsx_runtime_1.jsxs)("section", {
|
|
713
599
|
role: "search",
|
|
714
600
|
"aria-label": translate("Filters and search"),
|
|
715
|
-
className: (0, classNames_1.classNames)(["zen-filters", className || ""]),
|
|
716
|
-
children: [isEmptySearchBar ? null : (0, jsx_runtime_1.
|
|
601
|
+
className: (0, classNames_1.classNames)(["zen-filters", isMobile ? "zen-filters--mobile" : "", className || ""]),
|
|
602
|
+
children: [isEmptySearchBar ? null : (0, jsx_runtime_1.jsx)("div", {
|
|
717
603
|
className: (0, classNames_1.classNames)(["zen-filters__main-row", isOpen ? "" : "zen-filters__main-row--initial", isMobile ? "zen-filters__main-row--mobile" : ""]),
|
|
718
604
|
ref: triggerRef,
|
|
719
|
-
children:
|
|
605
|
+
children: memoizedSearch
|
|
720
606
|
}), (0, jsx_runtime_1.jsx)(filtersSavedItemsProvider_1.FiltersSavedItemsProvider, {
|
|
721
607
|
items: memoizedSavedFiltersItems,
|
|
722
608
|
active: memoizedSavedFiltersActive,
|
|
@@ -319,7 +319,7 @@ const processChildrenWithMetaData = (children) => {
|
|
|
319
319
|
// Component props provide: state, onChange, and other props
|
|
320
320
|
const childProps = child.props;
|
|
321
321
|
const { state, onChange } = childProps, otherProps = __rest(childProps, ["state", "onChange"]);
|
|
322
|
-
const mergedProps = Object.assign(Object.assign({}, otherProps), { id: metaData.id, defaultState: createDefaultStateMetaData(metaData.defaultState || childProps.defaultState, metaData.childType, state), visible: metaData.visible, state,
|
|
322
|
+
const mergedProps = Object.assign(Object.assign({}, otherProps), { id: metaData.id, defaultState: createDefaultStateMetaData(metaData.defaultState || childProps.defaultState, metaData.childType, state), visible: childProps.visible !== undefined ? childProps.visible : metaData.visible, state,
|
|
323
323
|
onChange, childType: metaData.childType });
|
|
324
324
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
325
325
|
return react_2.default.cloneElement(child, mergedProps);
|
|
@@ -312,6 +312,7 @@ const GroupsFilterRaw = props => {
|
|
|
312
312
|
const menuRef = (0, react_1.useRef)(null);
|
|
313
313
|
const prevInitialState = (0, react_1.useRef)(initialFilterStateInner);
|
|
314
314
|
const prevSearchField = (0, react_1.useRef)("");
|
|
315
|
+
const attemptedFetchOnOpenRef = (0, react_1.useRef)(false);
|
|
315
316
|
const groupsFilterId = (0, react_1.useId)();
|
|
316
317
|
const popupId = (0, react_1.useId)();
|
|
317
318
|
const blocksMap = (0, react_1.useMemo)(() => [["builtInGroups", "userGroups"], ["advancedGroups", "builtInGroups", "userGroups"], ["builtInGroups", "userGroups"]], []);
|
|
@@ -875,7 +876,12 @@ const GroupsFilterRaw = props => {
|
|
|
875
876
|
}), [handleApply, handleCancel, handleReset, isApplyDisabled, translate]);
|
|
876
877
|
const isEmptyMap = dataItems.length === 0;
|
|
877
878
|
(0, react_1.useEffect)(() => {
|
|
878
|
-
if (
|
|
879
|
+
if (!uiState.isOpen) {
|
|
880
|
+
attemptedFetchOnOpenRef.current = false;
|
|
881
|
+
return;
|
|
882
|
+
}
|
|
883
|
+
if (isEmptyMap && !attemptedFetchOnOpenRef.current && !uiState.isLoading && !uiState.hasError) {
|
|
884
|
+
attemptedFetchOnOpenRef.current = true;
|
|
879
885
|
dispatchUiState({
|
|
880
886
|
type: uiStateActionType_1.UiStateActionType.SetLoadWithError,
|
|
881
887
|
payload: {
|