@comicrelief/component-library 8.13.5 → 8.13.6

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/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js +9 -6
  2. package/package.json +1 -1
  3. package/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js +9 -6
package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js CHANGED
@@ -28,7 +28,7 @@ const HeaderNav2025 = _ref => {
28
28
  } = navItems;
29
29
  const [isExpandable, setIsExpandable] = (0, _react.useState)(false);
30
30
  const [openedSubMenu, setOpenedSubMenu] = (0, _react.useState)({});
31
- const [isNotDesktop, setIsNotDesktop] = (0, _react.useState)(null);
31
+ const [isNotDesktop, setIsNotDesktop] = (0, _react.useState)(false);
32
32
  const [processedItems, setProcessedItems] = (0, _react.useState)(null);
33
33
  const [showMoreNav, setShowMoreNav] = (0, _react.useState)(false);
34
34
  let theseGroups = null;
@@ -60,16 +60,19 @@ const HeaderNav2025 = _ref => {
60
60
 
61
61
  // Process the nav items on initial mount:
62
62
  (0, _react.useMemo)(() => {
63
- // Divide up nav items accordingly and determine breakpoint,
64
- // assigned as local vars since useState won't be ready in time below:
63
+ // Divide up nav items accordingly
65
64
  const theseItems = (0, _navHelper.MoreNavPreProcess)(menuGroups, characterLimit);
66
- const notDesktop = window.innerWidth < _allBreakpoints.breakpointValues.Nav;
67
65
  setProcessedItems(theseItems);
66
+ }, [menuGroups, characterLimit]);
67
+
68
+ // Determine which nav we should use only once 'window' exists:
69
+ (0, _react.useEffect)(() => {
70
+ const notDesktop = window.innerWidth < _allBreakpoints.breakpointValues.Nav;
68
71
  setIsNotDesktop(notDesktop);
69
72
 
70
73
  // Use these flags to detemine if we render the More nav or not:
71
- setShowMoreNav(!notDesktop && theseItems.moreNavGroups.length);
72
- }, [menuGroups, characterLimit]);
74
+ setShowMoreNav(!notDesktop && processedItems.moreNavGroups.length);
75
+ }, [processedItems]);
73
76
 
74
77
  // Attach eventListener on mount and after potential changes
75
78
  // to showMoreNav triggered by a window resize:
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/component-library",
3
3
  "author": "Comic Relief Engineering Team",
4
- "version": "8.13.5",
4
+ "version": "8.13.6",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js CHANGED
@@ -22,7 +22,7 @@ const HeaderNav2025 = ({
22
22
  const { menuGroups } = navItems;
23
23
  const [isExpandable, setIsExpandable] = useState(false);
24
24
  const [openedSubMenu, setOpenedSubMenu] = useState({});
25
- const [isNotDesktop, setIsNotDesktop] = useState(null);
25
+ const [isNotDesktop, setIsNotDesktop] = useState(false);
26
26
  const [processedItems, setProcessedItems] = useState(null);
27
27
  const [showMoreNav, setShowMoreNav] = useState(false);
28
28
  let theseGroups = null;
@@ -53,16 +53,19 @@ const HeaderNav2025 = ({
53
53
 
54
54
  // Process the nav items on initial mount:
55
55
  useMemo(() => {
56
- // Divide up nav items accordingly and determine breakpoint,
57
- // assigned as local vars since useState won't be ready in time below:
56
+ // Divide up nav items accordingly
58
57
  const theseItems = MoreNavPreProcess(menuGroups, characterLimit);
59
- const notDesktop = window.innerWidth < breakpointValues.Nav;
60
58
  setProcessedItems(theseItems);
59
+ }, [menuGroups, characterLimit]);
60
+
61
+ // Determine which nav we should use only once 'window' exists:
62
+ useEffect(() => {
63
+ const notDesktop = window.innerWidth < breakpointValues.Nav;
61
64
  setIsNotDesktop(notDesktop);
62
65
 
63
66
  // Use these flags to detemine if we render the More nav or not:
64
- setShowMoreNav(!notDesktop && theseItems.moreNavGroups.length);
65
- }, [menuGroups, characterLimit]);
67
+ setShowMoreNav(!notDesktop && processedItems.moreNavGroups.length);
68
+ }, [processedItems]);
66
69
 
67
70
  // Attach eventListener on mount and after potential changes
68
71
  // to showMoreNav triggered by a window resize: