@geotab/zenith 3.6.0-beta.2 → 3.6.0-beta.4

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 (3) hide show
  1. package/dist/header/header.js +27 -26
  2. package/esm/header/header.js +27 -26
  3. package/package.json +1 -1
package/dist/header/header.js CHANGED
@@ -80,14 +80,14 @@ const Header = ({ children, className, onFiltersBarOpen
80
80
  const [filtersBarToggleAllFiltersFn, setFiltersBarToggleAllFiltersFn] = (0, react_1.useState)(null);
81
81
  const { result } = (0, useResizeObserver_1.useResizeObserver)({ target: leftElementsRef.current });
82
82
  const moreButtonRef = (0, react_1.useRef)(null);
83
- const scrollableParentEl = (0, react_1.useMemo)(() => headerRef.current ? (0, headerHelpers_1.findFirstScrollableParent)(headerRef.current) : undefined, [headerRef]);
83
+ const scrollableParentEl = (0, react_1.useMemo)(() => (headerRef.current ? (0, headerHelpers_1.findFirstScrollableParent)(headerRef.current) : undefined), [headerRef]);
84
84
  const [searchExpandedState, setSearchExpandedState] = (0, react_1.useState)(false);
85
85
  const isMobile = (0, useMobile_1.useMobile)();
86
86
  const { buttons: additionalButtons, priority } = (0, headerButtonsProvider_1.useHeaderButtons)();
87
87
  const driveClassname = (0, useDriveClassName_1.useDriveClassName)("zen-main-header");
88
88
  const driveClassnameTab = (0, useDriveClassName_1.useDriveClassName)("zen-main-header__tabs");
89
89
  const getPreviousScrollPosition = (0, react_1.useCallback)(() => previousScrollPosition.current, []);
90
- const scrollCallback = (0, react_1.useCallback)((e) => {
90
+ const scrollCallback = (0, react_1.useCallback)(e => {
91
91
  if (!e.target) {
92
92
  return;
93
93
  }
@@ -96,7 +96,7 @@ const Header = ({ children, className, onFiltersBarOpen
96
96
  const scrollTop = e.target instanceof Document ? e.target.documentElement.scrollTop : e.target.scrollTop || 0;
97
97
  const previousScrollPositionValue = getPreviousScrollPosition();
98
98
  const isDownDirection = scrollTop > previousScrollPositionValue;
99
- if (headerRef.current && scrollTop < ((headerRef.current.getBoundingClientRect().height || scrollThreshold) + delta)) {
99
+ if (headerRef.current && scrollTop < (headerRef.current.getBoundingClientRect().height || scrollThreshold) + delta) {
100
100
  previousScrollPosition.current = scrollTop;
101
101
  setIsFilterHidden(false);
102
102
  return;
@@ -108,10 +108,10 @@ const Header = ({ children, className, onFiltersBarOpen
108
108
  previousScrollPosition.current = scrollTop;
109
109
  setIsFilterHidden(isDownDirection);
110
110
  }, [getPreviousScrollPosition, previousScrollPosition, headerRef]);
111
- const handleScroll = (0, useThrottle_1.useThrottle)((e) => {
111
+ const handleScroll = (0, useThrottle_1.useThrottle)(e => {
112
112
  var _a, _b;
113
113
  const isKeyboardLikelyOpen = ((_b = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) === null || _b === void 0 ? void 0 : _b.matches("input, textarea, [contenteditable]")) || false;
114
- const isMobileFilterOpen = (mobileFilterTrigger === null || mobileFilterTrigger === void 0 ? void 0 : mobileFilterTrigger.current) && mobileFilterTrigger.current.getAttribute("aria-expanded") === "true" || false;
114
+ const isMobileFilterOpen = ((mobileFilterTrigger === null || mobileFilterTrigger === void 0 ? void 0 : mobileFilterTrigger.current) && mobileFilterTrigger.current.getAttribute("aria-expanded") === "true") || false;
115
115
  if (isMobileFilterOpen || isKeyboardLikelyOpen) {
116
116
  return;
117
117
  }
@@ -165,7 +165,13 @@ const Header = ({ children, className, onFiltersBarOpen
165
165
  return 2;
166
166
  }, [memoizedFiltersBar, isMobile, searchComponent]);
167
167
  const hiddenElementsCountToRender = rightElements.length <= actionCount ? actionCount - rightElements.length : 0;
168
- const { visibleElements, nonFittingElements, hiddenContainerRef } = (0, useNonFittingElements_1.useNonFittingElements)({ maxWidth, data: resizableElements, hiddenElementsCountToRender, widthDelta, reverseOrderOfVisible: true });
168
+ const { visibleElements, nonFittingElements, hiddenContainerRef } = (0, useNonFittingElements_1.useNonFittingElements)({
169
+ maxWidth,
170
+ data: resizableElements,
171
+ hiddenElementsCountToRender,
172
+ widthDelta,
173
+ reverseOrderOfVisible: true
174
+ });
169
175
  const calculateMiddleWidth = (0, react_1.useCallback)(() => {
170
176
  var _a, _b, _c;
171
177
  const headerRefWidth = ((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
@@ -188,25 +194,24 @@ const Header = ({ children, className, onFiltersBarOpen
188
194
  }, [result === null || result === void 0 ? void 0 : result.contentRect.width, calculateMiddleWidth]);
189
195
  (0, react_1.useEffect)(() => {
190
196
  calculateMiddleWidth();
191
- }, [calculateMiddleWidth]);
197
+ }, [calculateMiddleWidth, isClientReady]);
192
198
  const moreButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(collapsedItemsControl_1.PageToolbarCollapsedItemsControl, { children: nonFittingElements }, "pageCollapsedToolbar"), [nonFittingElements]);
193
- const mobileSearch = (0, react_1.useMemo)(() => searchComponent && memoizedFiltersBar ?
194
- (0, jsx_runtime_1.jsx)(mobileSearchControl_1.MobileSearchControl, { state: searchExpandedState, searchInput: searchComponent, onClick: (state) => setSearchExpandedState(state) }) : null, [memoizedFiltersBar, searchComponent, searchExpandedState]);
195
- const mobileFilterButton = (0, react_1.useMemo)(() => isMobile && memoizedFiltersBar ? (0, jsx_runtime_1.jsx)(mobileFilterControl_1.MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler, ref: mobileFilterControlRef }) : null, [filtersBarToggler, isMobile, memoizedFiltersBar, numberOfChangedFilters]);
196
- const mobileFilterNewlineButton = (0, react_1.useMemo)(() => isMobile && memoizedFiltersBar ? (0, jsx_runtime_1.jsx)(mobileFilterControl_1.MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler, ref: mobileFilterNewLineControlRef }) : null, [filtersBarToggler, isMobile, memoizedFiltersBar, numberOfChangedFilters]);
199
+ const mobileSearch = (0, react_1.useMemo)(() => searchComponent && memoizedFiltersBar ? ((0, jsx_runtime_1.jsx)(mobileSearchControl_1.MobileSearchControl, { state: searchExpandedState, searchInput: searchComponent, onClick: (state) => setSearchExpandedState(state) })) : null, [memoizedFiltersBar, searchComponent, searchExpandedState]);
200
+ const mobileFilterButton = (0, react_1.useMemo)(() => (isMobile && memoizedFiltersBar ? (0, jsx_runtime_1.jsx)(mobileFilterControl_1.MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler, ref: mobileFilterControlRef }) : null), [filtersBarToggler, isMobile, memoizedFiltersBar, numberOfChangedFilters]);
201
+ const mobileFilterNewlineButton = (0, react_1.useMemo)(() => (isMobile && memoizedFiltersBar ? (0, jsx_runtime_1.jsx)(mobileFilterControl_1.MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler, ref: mobileFilterNewLineControlRef }) : null), [filtersBarToggler, isMobile, memoizedFiltersBar, numberOfChangedFilters]);
197
202
  const mobileNewLineContainer = (0, react_1.useMemo)(() => {
198
203
  if (!searchComponent || isFilterHidden || !memoizedFiltersBar) {
199
204
  return null;
200
205
  }
201
206
  const searchProps = searchComponent.props;
202
- return (0, jsx_runtime_1.jsxs)("div", { className: "zen-main-header__mobile-container-new-line", children: [(0, react_1.cloneElement)(searchComponent, { key: "searchComponentKey", className: `${searchProps.className || ""} zen-main-header__mobile-search-input` }), !isOnlySearch ? mobileFilterNewlineButton : null] });
207
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "zen-main-header__mobile-container-new-line", children: [(0, react_1.cloneElement)(searchComponent, { key: "searchComponentKey", className: `${searchProps.className || ""} zen-main-header__mobile-search-input` }), !isOnlySearch ? mobileFilterNewlineButton : null] }));
203
208
  }, [searchComponent, isFilterHidden, memoizedFiltersBar, isOnlySearch, mobileFilterNewlineButton]);
204
209
  const isFilterInNewLine = (0, react_1.useMemo)(() => !!searchComponent && !isOnlySearch && resizableElements.length > 0 && !searchExpandedState, [searchComponent, isOnlySearch, resizableElements.length, searchExpandedState]);
205
- const collapsedElements = (0, react_1.useMemo)(() => nonFittingElements.length ? [moreButton] : [], [moreButton, nonFittingElements.length]);
210
+ const collapsedElements = (0, react_1.useMemo)(() => (nonFittingElements.length ? [moreButton] : []), [moreButton, nonFittingElements.length]);
206
211
  const mobileSearchCondition = !resizableElements.length && mobileSearch !== null;
207
- const mobileFilterCondition = (0, react_1.useMemo)(() => memoizedFiltersBar && !isOnlySearch && (!resizableElements.length || resizableElements.length && !mobileSearch), [memoizedFiltersBar, isOnlySearch, resizableElements.length, mobileSearch]);
208
- const mobileContainer = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", { ref: toolbarRef, className: "zen-main-header__mobile-container", children: [collapsedElements.length ? collapsedElements : null, visibleElements.length ? (0, headerHelpers_1.getItemsForRender)(visibleElements, isMobile) : null, mobileSearchCondition ? mobileSearch : null, mobileFilterCondition && isMobile ? mobileFilterButton : null] }), [collapsedElements, isMobile, mobileFilterButton, mobileFilterCondition, mobileSearch, mobileSearchCondition, visibleElements]);
209
- const middleElements = (0, react_1.useMemo)(() => isMobile ? mobileContainer : (0, jsx_runtime_1.jsxs)("div", { className: "zen-main-header__adaptive-section", ref: toolbarRef, children: [collapsedElements, visibleElements] }), [collapsedElements, isMobile, mobileContainer, visibleElements]);
212
+ const mobileFilterCondition = (0, react_1.useMemo)(() => memoizedFiltersBar && !isOnlySearch && (!resizableElements.length || (resizableElements.length && !mobileSearch)), [memoizedFiltersBar, isOnlySearch, resizableElements.length, mobileSearch]);
213
+ const mobileContainer = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)("div", { ref: toolbarRef, className: "zen-main-header__mobile-container", children: [collapsedElements.length ? collapsedElements : null, visibleElements.length ? (0, headerHelpers_1.getItemsForRender)(visibleElements, isMobile) : null, mobileSearchCondition ? mobileSearch : null, mobileFilterCondition && isMobile ? mobileFilterButton : null] })), [collapsedElements, isMobile, mobileFilterButton, mobileFilterCondition, mobileSearch, mobileSearchCondition, visibleElements]);
214
+ const middleElements = (0, react_1.useMemo)(() => isMobile ? (mobileContainer) : ((0, jsx_runtime_1.jsxs)("div", { className: "zen-main-header__adaptive-section", ref: toolbarRef, children: [collapsedElements, visibleElements] })), [collapsedElements, isMobile, mobileContainer, visibleElements]);
210
215
  const titleSize = (0, react_1.useMemo)(() => {
211
216
  let count = 0;
212
217
  if (collapsedElements.length) {
@@ -230,7 +235,7 @@ const Header = ({ children, className, onFiltersBarOpen
230
235
  const prefixesForTitleSize = ["large", "medium", "small"];
231
236
  return prefixesForTitleSize[count - 1];
232
237
  }, [collapsedElements.length, mobileFilterCondition, mobileSearchCondition, rightElements.length, visibleElements.length]);
233
- const titleShrinkCondition = visibleElements.length === 0 && rightElements.length || mobileSearchCondition && mobileFilterCondition;
238
+ const titleShrinkCondition = (visibleElements.length === 0 && rightElements.length) || (mobileSearchCondition && mobileFilterCondition);
234
239
  const fullClassName = (0, classNames_1.classNames)([
235
240
  "zen-main-header zen-main-header--background-color",
236
241
  driveClassname ? driveClassname : "",
@@ -240,12 +245,12 @@ const Header = ({ children, className, onFiltersBarOpen
240
245
  isMobile && titleSize ? `zen-main-header--mobile-title-${titleSize}` : "",
241
246
  className !== null && className !== void 0 ? className : ""
242
247
  ]);
243
- const mobileExpandedSearchWrapper = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__mobile-search", ref: toolbarRef, children: mobileSearch }), [toolbarRef, mobileSearch]);
248
+ const mobileExpandedSearchWrapper = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__mobile-search", ref: toolbarRef, children: mobileSearch })), [toolbarRef, mobileSearch]);
244
249
  const mainLineContainer = (0, react_1.useMemo)(() => {
245
250
  if (searchExpandedState && !resizableElements.length) {
246
251
  return mobileExpandedSearchWrapper;
247
252
  }
248
- return (0, jsx_runtime_1.jsx)(basicToolbar_1.BasicToolbar, { className: "zen-main-header__section zen-main-header__section--padding", leftElements: leftElements, middleElements: middleElements, rightElements: rightElements.length ? rightElements : undefined, isMobile: isMobile, leftElementsRef: leftElementsRef, rightElementsRef: rightElementsRef });
253
+ return ((0, jsx_runtime_1.jsx)(basicToolbar_1.BasicToolbar, { className: "zen-main-header__section zen-main-header__section--padding", leftElements: leftElements, middleElements: middleElements, rightElements: rightElements.length ? rightElements : undefined, isMobile: isMobile, leftElementsRef: leftElementsRef, rightElementsRef: rightElementsRef }));
249
254
  }, [isMobile, leftElements, middleElements, mobileExpandedSearchWrapper, resizableElements.length, rightElements, searchExpandedState]);
250
255
  const newLineContainer = (0, react_1.useMemo)(() => {
251
256
  if (!isMobile || !resizableElements.length || !mobileNewLineContainer) {
@@ -254,7 +259,7 @@ const Header = ({ children, className, onFiltersBarOpen
254
259
  if (searchExpandedState) {
255
260
  return mobileExpandedSearchWrapper;
256
261
  }
257
- return (0, jsx_runtime_1.jsx)(basicToolbar_1.BasicToolbar, { className: "zen-main-header__section zen-main-header__section--secondary-padding", leftElements: undefined, middleElements: mobileNewLineContainer, rightElements: undefined, isMobile: true });
262
+ return ((0, jsx_runtime_1.jsx)(basicToolbar_1.BasicToolbar, { className: "zen-main-header__section zen-main-header__section--secondary-padding", leftElements: undefined, middleElements: mobileNewLineContainer, rightElements: undefined, isMobile: true }));
258
263
  }, [isMobile, mobileExpandedSearchWrapper, mobileNewLineContainer, resizableElements.length, searchExpandedState]);
259
264
  const isMobileFilterButtonExists = (0, react_1.useMemo)(() => isMobile && memoizedFiltersBar && mobileFilterButton && !searchExpandedState && !isFilterHidden, [isFilterHidden, isMobile, memoizedFiltersBar, mobileFilterButton, searchExpandedState]);
260
265
  (0, react_1.useEffect)(() => {
@@ -277,7 +282,7 @@ const Header = ({ children, className, onFiltersBarOpen
277
282
  if (!isClientReady) {
278
283
  return null;
279
284
  }
280
- return (0, jsx_runtime_1.jsx)(headerContext_1.HeaderMenuProvider, { alignment: "left-top", children: (0, jsx_runtime_1.jsx)(collapsedItemsControl_1.HeaderCustomContent.Provider, { value: { content, setContent }, children: (0, jsx_runtime_1.jsx)(filtersBarProvider_1.FiltersBarContextProvider, { value: { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn: setNumberOfChangedFilters }, children: (0, jsx_runtime_1.jsx)(filtersBarProviderSearch_1.SearchContextProvider, { value: { setSearchComponent: handleSearchChange }, children: (0, jsx_runtime_1.jsx)(filtersBarProviderTrigger_1.TriggerContextProvider, { value: { triggerComponent: mobileFilterTrigger }, children: (0, jsx_runtime_1.jsxs)("div", { className: fullClassName, ref: headerRef, children: [mainLineContainer, newLineContainer, tabs ? (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-main-header__tabs", "zen-main-header--border", isMobile ? "zen-main-header__tabs--mobile" : "", driveClassnameTab || ""]), children: [" ", tabs, " "] }) : null, memoizedFiltersBar ? (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__filtersBar", children: memoizedFiltersBar }) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section zen-main-header__section--hidden", ref: hiddenContainerRef, children: hiddenItemForRender }), (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section zen-main-header__section--hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section--inline", ref: moreButtonRef, children: moreButton }) })] }) }) }) }) }) });
285
+ return ((0, jsx_runtime_1.jsx)(headerContext_1.HeaderMenuProvider, { alignment: "left-top", children: (0, jsx_runtime_1.jsx)(collapsedItemsControl_1.HeaderCustomContent.Provider, { value: { content, setContent }, children: (0, jsx_runtime_1.jsx)(filtersBarProvider_1.FiltersBarContextProvider, { value: { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn: setNumberOfChangedFilters }, children: (0, jsx_runtime_1.jsx)(filtersBarProviderSearch_1.SearchContextProvider, { value: { setSearchComponent: handleSearchChange }, children: (0, jsx_runtime_1.jsx)(filtersBarProviderTrigger_1.TriggerContextProvider, { value: { triggerComponent: mobileFilterTrigger }, children: (0, jsx_runtime_1.jsxs)("div", { className: fullClassName, ref: headerRef, children: [mainLineContainer, newLineContainer, tabs ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-main-header__tabs", "zen-main-header--border", isMobile ? "zen-main-header__tabs--mobile" : "", driveClassnameTab || ""]), children: [" ", tabs, " "] })) : null, memoizedFiltersBar ? (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__filtersBar", children: memoizedFiltersBar }) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section zen-main-header__section--hidden", ref: hiddenContainerRef, children: hiddenItemForRender }), (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section zen-main-header__section--hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section--inline", ref: moreButtonRef, children: moreButton }) })] }) }) }) }) }) }));
281
286
  };
282
287
  exports.Header = Header;
283
288
  exports.HeaderDisplayName = "Header";
@@ -287,8 +292,4 @@ exports.Header.Menu = headerMenu_1.HeaderMenu;
287
292
  exports.Header.Title = headerTitle_1.HeaderTitle;
288
293
  exports.Header.Bookmark = bookmark_1.Bookmark;
289
294
  exports.Header.Back = headerBack_1.HeaderBack;
290
- exports.TRANSLATIONS = [
291
- ...mobileSearchControl_1.TRANSLATIONS,
292
- ...mobileFilterControl_1.TRANSLATIONS,
293
- ...headerBack_1.TRANSLATIONS
294
- ];
295
+ exports.TRANSLATIONS = [...mobileSearchControl_1.TRANSLATIONS, ...mobileFilterControl_1.TRANSLATIONS, ...headerBack_1.TRANSLATIONS];
package/esm/header/header.js CHANGED
@@ -54,14 +54,14 @@ export const Header = ({ children, className, onFiltersBarOpen
54
54
  const [filtersBarToggleAllFiltersFn, setFiltersBarToggleAllFiltersFn] = useState(null);
55
55
  const { result } = useResizeObserver({ target: leftElementsRef.current });
56
56
  const moreButtonRef = useRef(null);
57
- const scrollableParentEl = useMemo(() => headerRef.current ? findFirstScrollableParent(headerRef.current) : undefined, [headerRef]);
57
+ const scrollableParentEl = useMemo(() => (headerRef.current ? findFirstScrollableParent(headerRef.current) : undefined), [headerRef]);
58
58
  const [searchExpandedState, setSearchExpandedState] = useState(false);
59
59
  const isMobile = useMobile();
60
60
  const { buttons: additionalButtons, priority } = useHeaderButtons();
61
61
  const driveClassname = useDriveClassName("zen-main-header");
62
62
  const driveClassnameTab = useDriveClassName("zen-main-header__tabs");
63
63
  const getPreviousScrollPosition = useCallback(() => previousScrollPosition.current, []);
64
- const scrollCallback = useCallback((e) => {
64
+ const scrollCallback = useCallback(e => {
65
65
  if (!e.target) {
66
66
  return;
67
67
  }
@@ -70,7 +70,7 @@ export const Header = ({ children, className, onFiltersBarOpen
70
70
  const scrollTop = e.target instanceof Document ? e.target.documentElement.scrollTop : e.target.scrollTop || 0;
71
71
  const previousScrollPositionValue = getPreviousScrollPosition();
72
72
  const isDownDirection = scrollTop > previousScrollPositionValue;
73
- if (headerRef.current && scrollTop < ((headerRef.current.getBoundingClientRect().height || scrollThreshold) + delta)) {
73
+ if (headerRef.current && scrollTop < (headerRef.current.getBoundingClientRect().height || scrollThreshold) + delta) {
74
74
  previousScrollPosition.current = scrollTop;
75
75
  setIsFilterHidden(false);
76
76
  return;
@@ -82,10 +82,10 @@ export const Header = ({ children, className, onFiltersBarOpen
82
82
  previousScrollPosition.current = scrollTop;
83
83
  setIsFilterHidden(isDownDirection);
84
84
  }, [getPreviousScrollPosition, previousScrollPosition, headerRef]);
85
- const handleScroll = useThrottle((e) => {
85
+ const handleScroll = useThrottle(e => {
86
86
  var _a, _b;
87
87
  const isKeyboardLikelyOpen = ((_b = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) === null || _b === void 0 ? void 0 : _b.matches("input, textarea, [contenteditable]")) || false;
88
- const isMobileFilterOpen = (mobileFilterTrigger === null || mobileFilterTrigger === void 0 ? void 0 : mobileFilterTrigger.current) && mobileFilterTrigger.current.getAttribute("aria-expanded") === "true" || false;
88
+ const isMobileFilterOpen = ((mobileFilterTrigger === null || mobileFilterTrigger === void 0 ? void 0 : mobileFilterTrigger.current) && mobileFilterTrigger.current.getAttribute("aria-expanded") === "true") || false;
89
89
  if (isMobileFilterOpen || isKeyboardLikelyOpen) {
90
90
  return;
91
91
  }
@@ -139,7 +139,13 @@ export const Header = ({ children, className, onFiltersBarOpen
139
139
  return 2;
140
140
  }, [memoizedFiltersBar, isMobile, searchComponent]);
141
141
  const hiddenElementsCountToRender = rightElements.length <= actionCount ? actionCount - rightElements.length : 0;
142
- const { visibleElements, nonFittingElements, hiddenContainerRef } = useNonFittingElements({ maxWidth, data: resizableElements, hiddenElementsCountToRender, widthDelta, reverseOrderOfVisible: true });
142
+ const { visibleElements, nonFittingElements, hiddenContainerRef } = useNonFittingElements({
143
+ maxWidth,
144
+ data: resizableElements,
145
+ hiddenElementsCountToRender,
146
+ widthDelta,
147
+ reverseOrderOfVisible: true
148
+ });
143
149
  const calculateMiddleWidth = useCallback(() => {
144
150
  var _a, _b, _c;
145
151
  const headerRefWidth = ((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
@@ -162,25 +168,24 @@ export const Header = ({ children, className, onFiltersBarOpen
162
168
  }, [result === null || result === void 0 ? void 0 : result.contentRect.width, calculateMiddleWidth]);
163
169
  useEffect(() => {
164
170
  calculateMiddleWidth();
165
- }, [calculateMiddleWidth]);
171
+ }, [calculateMiddleWidth, isClientReady]);
166
172
  const moreButton = useMemo(() => _jsx(PageToolbarCollapsedItemsControl, { children: nonFittingElements }, "pageCollapsedToolbar"), [nonFittingElements]);
167
- const mobileSearch = useMemo(() => searchComponent && memoizedFiltersBar ?
168
- _jsx(MobileSearchControl, { state: searchExpandedState, searchInput: searchComponent, onClick: (state) => setSearchExpandedState(state) }) : null, [memoizedFiltersBar, searchComponent, searchExpandedState]);
169
- const mobileFilterButton = useMemo(() => isMobile && memoizedFiltersBar ? _jsx(MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler, ref: mobileFilterControlRef }) : null, [filtersBarToggler, isMobile, memoizedFiltersBar, numberOfChangedFilters]);
170
- const mobileFilterNewlineButton = useMemo(() => isMobile && memoizedFiltersBar ? _jsx(MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler, ref: mobileFilterNewLineControlRef }) : null, [filtersBarToggler, isMobile, memoizedFiltersBar, numberOfChangedFilters]);
173
+ const mobileSearch = useMemo(() => searchComponent && memoizedFiltersBar ? (_jsx(MobileSearchControl, { state: searchExpandedState, searchInput: searchComponent, onClick: (state) => setSearchExpandedState(state) })) : null, [memoizedFiltersBar, searchComponent, searchExpandedState]);
174
+ const mobileFilterButton = useMemo(() => (isMobile && memoizedFiltersBar ? _jsx(MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler, ref: mobileFilterControlRef }) : null), [filtersBarToggler, isMobile, memoizedFiltersBar, numberOfChangedFilters]);
175
+ const mobileFilterNewlineButton = useMemo(() => (isMobile && memoizedFiltersBar ? _jsx(MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler, ref: mobileFilterNewLineControlRef }) : null), [filtersBarToggler, isMobile, memoizedFiltersBar, numberOfChangedFilters]);
171
176
  const mobileNewLineContainer = useMemo(() => {
172
177
  if (!searchComponent || isFilterHidden || !memoizedFiltersBar) {
173
178
  return null;
174
179
  }
175
180
  const searchProps = searchComponent.props;
176
- return _jsxs("div", { className: "zen-main-header__mobile-container-new-line", children: [cloneElement(searchComponent, { key: "searchComponentKey", className: `${searchProps.className || ""} zen-main-header__mobile-search-input` }), !isOnlySearch ? mobileFilterNewlineButton : null] });
181
+ return (_jsxs("div", { className: "zen-main-header__mobile-container-new-line", children: [cloneElement(searchComponent, { key: "searchComponentKey", className: `${searchProps.className || ""} zen-main-header__mobile-search-input` }), !isOnlySearch ? mobileFilterNewlineButton : null] }));
177
182
  }, [searchComponent, isFilterHidden, memoizedFiltersBar, isOnlySearch, mobileFilterNewlineButton]);
178
183
  const isFilterInNewLine = useMemo(() => !!searchComponent && !isOnlySearch && resizableElements.length > 0 && !searchExpandedState, [searchComponent, isOnlySearch, resizableElements.length, searchExpandedState]);
179
- const collapsedElements = useMemo(() => nonFittingElements.length ? [moreButton] : [], [moreButton, nonFittingElements.length]);
184
+ const collapsedElements = useMemo(() => (nonFittingElements.length ? [moreButton] : []), [moreButton, nonFittingElements.length]);
180
185
  const mobileSearchCondition = !resizableElements.length && mobileSearch !== null;
181
- const mobileFilterCondition = useMemo(() => memoizedFiltersBar && !isOnlySearch && (!resizableElements.length || resizableElements.length && !mobileSearch), [memoizedFiltersBar, isOnlySearch, resizableElements.length, mobileSearch]);
182
- const mobileContainer = useMemo(() => _jsxs("div", { ref: toolbarRef, className: "zen-main-header__mobile-container", children: [collapsedElements.length ? collapsedElements : null, visibleElements.length ? getItemsForRender(visibleElements, isMobile) : null, mobileSearchCondition ? mobileSearch : null, mobileFilterCondition && isMobile ? mobileFilterButton : null] }), [collapsedElements, isMobile, mobileFilterButton, mobileFilterCondition, mobileSearch, mobileSearchCondition, visibleElements]);
183
- const middleElements = useMemo(() => isMobile ? mobileContainer : _jsxs("div", { className: "zen-main-header__adaptive-section", ref: toolbarRef, children: [collapsedElements, visibleElements] }), [collapsedElements, isMobile, mobileContainer, visibleElements]);
186
+ const mobileFilterCondition = useMemo(() => memoizedFiltersBar && !isOnlySearch && (!resizableElements.length || (resizableElements.length && !mobileSearch)), [memoizedFiltersBar, isOnlySearch, resizableElements.length, mobileSearch]);
187
+ const mobileContainer = useMemo(() => (_jsxs("div", { ref: toolbarRef, className: "zen-main-header__mobile-container", children: [collapsedElements.length ? collapsedElements : null, visibleElements.length ? getItemsForRender(visibleElements, isMobile) : null, mobileSearchCondition ? mobileSearch : null, mobileFilterCondition && isMobile ? mobileFilterButton : null] })), [collapsedElements, isMobile, mobileFilterButton, mobileFilterCondition, mobileSearch, mobileSearchCondition, visibleElements]);
188
+ const middleElements = useMemo(() => isMobile ? (mobileContainer) : (_jsxs("div", { className: "zen-main-header__adaptive-section", ref: toolbarRef, children: [collapsedElements, visibleElements] })), [collapsedElements, isMobile, mobileContainer, visibleElements]);
184
189
  const titleSize = useMemo(() => {
185
190
  let count = 0;
186
191
  if (collapsedElements.length) {
@@ -204,7 +209,7 @@ export const Header = ({ children, className, onFiltersBarOpen
204
209
  const prefixesForTitleSize = ["large", "medium", "small"];
205
210
  return prefixesForTitleSize[count - 1];
206
211
  }, [collapsedElements.length, mobileFilterCondition, mobileSearchCondition, rightElements.length, visibleElements.length]);
207
- const titleShrinkCondition = visibleElements.length === 0 && rightElements.length || mobileSearchCondition && mobileFilterCondition;
212
+ const titleShrinkCondition = (visibleElements.length === 0 && rightElements.length) || (mobileSearchCondition && mobileFilterCondition);
208
213
  const fullClassName = classNames([
209
214
  "zen-main-header zen-main-header--background-color",
210
215
  driveClassname ? driveClassname : "",
@@ -214,12 +219,12 @@ export const Header = ({ children, className, onFiltersBarOpen
214
219
  isMobile && titleSize ? `zen-main-header--mobile-title-${titleSize}` : "",
215
220
  className !== null && className !== void 0 ? className : ""
216
221
  ]);
217
- const mobileExpandedSearchWrapper = useMemo(() => _jsx("div", { className: "zen-main-header__mobile-search", ref: toolbarRef, children: mobileSearch }), [toolbarRef, mobileSearch]);
222
+ const mobileExpandedSearchWrapper = useMemo(() => (_jsx("div", { className: "zen-main-header__mobile-search", ref: toolbarRef, children: mobileSearch })), [toolbarRef, mobileSearch]);
218
223
  const mainLineContainer = useMemo(() => {
219
224
  if (searchExpandedState && !resizableElements.length) {
220
225
  return mobileExpandedSearchWrapper;
221
226
  }
222
- return _jsx(BasicToolbar, { className: "zen-main-header__section zen-main-header__section--padding", leftElements: leftElements, middleElements: middleElements, rightElements: rightElements.length ? rightElements : undefined, isMobile: isMobile, leftElementsRef: leftElementsRef, rightElementsRef: rightElementsRef });
227
+ return (_jsx(BasicToolbar, { className: "zen-main-header__section zen-main-header__section--padding", leftElements: leftElements, middleElements: middleElements, rightElements: rightElements.length ? rightElements : undefined, isMobile: isMobile, leftElementsRef: leftElementsRef, rightElementsRef: rightElementsRef }));
223
228
  }, [isMobile, leftElements, middleElements, mobileExpandedSearchWrapper, resizableElements.length, rightElements, searchExpandedState]);
224
229
  const newLineContainer = useMemo(() => {
225
230
  if (!isMobile || !resizableElements.length || !mobileNewLineContainer) {
@@ -228,7 +233,7 @@ export const Header = ({ children, className, onFiltersBarOpen
228
233
  if (searchExpandedState) {
229
234
  return mobileExpandedSearchWrapper;
230
235
  }
231
- return _jsx(BasicToolbar, { className: "zen-main-header__section zen-main-header__section--secondary-padding", leftElements: undefined, middleElements: mobileNewLineContainer, rightElements: undefined, isMobile: true });
236
+ return (_jsx(BasicToolbar, { className: "zen-main-header__section zen-main-header__section--secondary-padding", leftElements: undefined, middleElements: mobileNewLineContainer, rightElements: undefined, isMobile: true }));
232
237
  }, [isMobile, mobileExpandedSearchWrapper, mobileNewLineContainer, resizableElements.length, searchExpandedState]);
233
238
  const isMobileFilterButtonExists = useMemo(() => isMobile && memoizedFiltersBar && mobileFilterButton && !searchExpandedState && !isFilterHidden, [isFilterHidden, isMobile, memoizedFiltersBar, mobileFilterButton, searchExpandedState]);
234
239
  useEffect(() => {
@@ -251,7 +256,7 @@ export const Header = ({ children, className, onFiltersBarOpen
251
256
  if (!isClientReady) {
252
257
  return null;
253
258
  }
254
- return _jsx(HeaderMenuProvider, { alignment: "left-top", children: _jsx(HeaderCustomContent.Provider, { value: { content, setContent }, children: _jsx(FiltersBarContextProvider, { value: { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn: setNumberOfChangedFilters }, children: _jsx(SearchContextProvider, { value: { setSearchComponent: handleSearchChange }, children: _jsx(TriggerContextProvider, { value: { triggerComponent: mobileFilterTrigger }, children: _jsxs("div", { className: fullClassName, ref: headerRef, children: [mainLineContainer, newLineContainer, tabs ? _jsxs("div", { className: classNames(["zen-main-header__tabs", "zen-main-header--border", isMobile ? "zen-main-header__tabs--mobile" : "", driveClassnameTab || ""]), children: [" ", tabs, " "] }) : null, memoizedFiltersBar ? _jsx("div", { className: "zen-main-header__filtersBar", children: memoizedFiltersBar }) : null, _jsx("div", { className: "zen-main-header__section zen-main-header__section--hidden", ref: hiddenContainerRef, children: hiddenItemForRender }), _jsx("div", { className: "zen-main-header__section zen-main-header__section--hidden", children: _jsx("div", { className: "zen-main-header__section--inline", ref: moreButtonRef, children: moreButton }) })] }) }) }) }) }) });
259
+ return (_jsx(HeaderMenuProvider, { alignment: "left-top", children: _jsx(HeaderCustomContent.Provider, { value: { content, setContent }, children: _jsx(FiltersBarContextProvider, { value: { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn: setNumberOfChangedFilters }, children: _jsx(SearchContextProvider, { value: { setSearchComponent: handleSearchChange }, children: _jsx(TriggerContextProvider, { value: { triggerComponent: mobileFilterTrigger }, children: _jsxs("div", { className: fullClassName, ref: headerRef, children: [mainLineContainer, newLineContainer, tabs ? (_jsxs("div", { className: classNames(["zen-main-header__tabs", "zen-main-header--border", isMobile ? "zen-main-header__tabs--mobile" : "", driveClassnameTab || ""]), children: [" ", tabs, " "] })) : null, memoizedFiltersBar ? _jsx("div", { className: "zen-main-header__filtersBar", children: memoizedFiltersBar }) : null, _jsx("div", { className: "zen-main-header__section zen-main-header__section--hidden", ref: hiddenContainerRef, children: hiddenItemForRender }), _jsx("div", { className: "zen-main-header__section zen-main-header__section--hidden", children: _jsx("div", { className: "zen-main-header__section--inline", ref: moreButtonRef, children: moreButton }) })] }) }) }) }) }) }));
255
260
  };
256
261
  export const HeaderDisplayName = "Header";
257
262
  Header.displayName = HeaderDisplayName;
@@ -260,8 +265,4 @@ Header.Menu = HeaderMenu;
260
265
  Header.Title = HeaderTitle;
261
266
  Header.Bookmark = Bookmark;
262
267
  Header.Back = HeaderBack;
263
- export const TRANSLATIONS = [
264
- ...MobileSearchControlTranslations,
265
- ...MobileFilterControlTranslations,
266
- ...HeaderBackTranslations
267
- ];
268
+ export const TRANSLATIONS = [...MobileSearchControlTranslations, ...MobileFilterControlTranslations, ...HeaderBackTranslations];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geotab/zenith",
3
- "version": "3.6.0-beta.2",
3
+ "version": "3.6.0-beta.4",
4
4
  "description": "Zenith components library on React",
5
5
  "main": "dist/index.js",
6
6
  "types": "esm/index.d.ts",