Merge branch 'master' of https://github.com/faceless-ui/css-grid

Author: jacobsfletch

package.json

@@ -27,7 +27,7 @@
     "react-dom": "^17.0.0"
   },
   "dependencies": {
-    "@faceless-ui/window-info": "^1.2.7"
+    "@faceless-ui/window-info": "^2.0.1"
   },
   "devDependencies": {
     "@trbl/eslint-config": "^2.0.3",

src/Cell/index.tsx

@@ -31,18 +31,18 @@ const Cell: React.FC<Props> = (props) => {
   let colsToSpan = colsAvailable;
 
   if (cols && cols < colsAvailable) colsToSpan = cols;
-  if (colsXL && breakpoints.xl) colsToSpan = colsXL;
-  if (colsL && breakpoints.l) colsToSpan = colsL;
-  if (colsM && breakpoints.m) colsToSpan = colsM;
-  if (colsS && breakpoints.s) colsToSpan = colsS;
+  if (colsXL && breakpoints?.xl) colsToSpan = colsXL;
+  if (colsL && breakpoints?.l) colsToSpan = colsL;
+  if (colsM && breakpoints?.m) colsToSpan = colsM;
+  if (colsS && breakpoints?.s) colsToSpan = colsS;
 
   let colToStart = 0;
 
   if (start) colToStart = start;
-  if (typeof startXL === 'number' && breakpoints.xl) colToStart = startXL;
-  if (typeof startL === 'number' && breakpoints.l) colToStart = startL;
-  if (typeof startM === 'number' && breakpoints.m) colToStart = startM;
-  if (typeof startS === 'number' && breakpoints.s) colToStart = startS;
+  if (typeof startXL === 'number' && breakpoints?.xl) colToStart = startXL;
+  if (typeof startL === 'number' && breakpoints?.l) colToStart = startL;
+  if (typeof startM === 'number' && breakpoints?.m) colToStart = startM;
+  if (typeof startS === 'number' && breakpoints?.s) colToStart = startS;
 
   const gridColumnStart = colToStart || undefined;
 

src/Settings/index.tsx

@@ -21,9 +21,9 @@ const SettingsProvider: React.FC<Props> = (props) => {
   const { breakpoints } = useWindowInfo();
 
   let smallestBreakpointReached: 'xl' | 'l' | 'm' | 's' = 'xl';
-  if (breakpoints.l) smallestBreakpointReached = 'l';
-  if (breakpoints.m) smallestBreakpointReached = 'm';
-  if (breakpoints.s) smallestBreakpointReached = 's';
+  if (breakpoints?.l) smallestBreakpointReached = 'l';
+  if (breakpoints?.m) smallestBreakpointReached = 'm';
+  if (breakpoints?.s) smallestBreakpointReached = 's';
 
   const maxColumns = cols[smallestBreakpointReached];
   const activeColumnGap = colGap[smallestBreakpointReached];