@zendeskgarden/container-grid - npm Package Compare versions

Comparing version 2.0.2 to 3.0.0

dist/index.cjs.js

@@ -11,62 +11,80 @@ /**
 var React = require('react');
+var containerUtilities = require('@zendeskgarden/container-utilities');
 var PropTypes = require('prop-types');
 
-function composeEventHandlers() {
-  for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
-    fns[_key] = arguments[_key];
+const getCellDown = (matrix, rowIndex, colIndex, wrap) => {
+  let retVal = [];
+  const rowCount = matrix.length;
+  const colCount = matrix[0].length;
+  const lastRowLength = matrix[rowCount - 1].length;
+  const isLastCellFocused = rowIndex === rowCount - (colCount > lastRowLength ? 2 : 1) && colIndex === colCount - 1;
+  if (!isLastCellFocused) {
+    if (rowIndex === rowCount - (colIndex >= lastRowLength ? 2 : 1)
+    ) {
+      if (wrap) {
+        retVal = [0, colIndex + 1];
+      }
+    } else {
+      retVal = [rowIndex + 1, colIndex];
+    }
   }
-  return function (event) {
-    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      args[_key2 - 1] = arguments[_key2];
+  return retVal;
+};
+const getCellLeft = (matrix, rowIndex, colIndex, wrap) => {
+  let retVal = [];
+  const colCount = matrix[0].length;
+  const isFirstCellFocused = rowIndex === 0 && colIndex === 0;
+  if (!isFirstCellFocused) {
+    if (colIndex === 0
+    ) {
+      if (wrap) {
+        retVal = [rowIndex - 1, colCount - 1];
+      }
+    } else {
+      retVal = [rowIndex, colIndex - 1];
     }
-    return fns.some(function (fn) {
-      fn && fn.apply(void 0, [event].concat(args));
-      return event && event.defaultPrevented;
-    });
-  };
-}
-var KEYS = {
-  ALT: 'Alt',
-  ASTERISK: '*',
-  BACKSPACE: 'Backspace',
-  COMMA: ',',
-  DELETE: 'Delete',
-  DOWN: 'ArrowDown',
-  END: 'End',
-  ENTER: 'Enter',
-  ESCAPE: 'Escape',
-  HOME: 'Home',
-  LEFT: 'ArrowLeft',
-  NUMPAD_ADD: 'Add',
-  NUMPAD_DECIMAL: 'Decimal',
-  NUMPAD_DIVIDE: 'Divide',
-  NUMPAD_ENTER: 'Enter',
-  NUMPAD_MULTIPLY: 'Multiply',
-  NUMPAD_SUBTRACT: 'Subtract',
-  PAGE_DOWN: 'PageDown',
-  PAGE_UP: 'PageUp',
-  PERIOD: '.',
-  RIGHT: 'ArrowRight',
-  SHIFT: 'Shift',
-  SPACE: ' ',
-  TAB: 'Tab',
-  UNIDENTIFIED: 'Unidentified',
-  UP: 'ArrowUp'
+  }
+  return retVal;
 };
-var DocumentPosition;
-(function (DocumentPosition) {
-  DocumentPosition[DocumentPosition["DISCONNECTED"] = 1] = "DISCONNECTED";
-  DocumentPosition[DocumentPosition["PRECEDING"] = 2] = "PRECEDING";
-  DocumentPosition[DocumentPosition["FOLLOWING"] = 4] = "FOLLOWING";
-  DocumentPosition[DocumentPosition["CONTAINS"] = 8] = "CONTAINS";
-  DocumentPosition[DocumentPosition["CONTAINED_BY"] = 16] = "CONTAINED_BY";
-  DocumentPosition[DocumentPosition["IMPLEMENTATION_SPECIFIC"] = 32] = "IMPLEMENTATION_SPECIFIC";
-})(DocumentPosition || (DocumentPosition = {}));
-var ContainerOrientation;
-(function (ContainerOrientation) {
-  ContainerOrientation["HORIZONTAL"] = "horizontal";
-  ContainerOrientation["VERTICAL"] = "vertical";
-})(ContainerOrientation || (ContainerOrientation = {}));
+const getCellRight = (matrix, rowIndex, colIndex, wrap) => {
+  let retVal = [];
+  const rowCount = matrix.length;
+  const colCount = matrix[0].length;
+  const lastRowIndex = rowCount - 1;
+  const lastColIndex = matrix[lastRowIndex].length - 1;
+  const isLastCellFocused = rowIndex === lastRowIndex && colIndex === lastColIndex;
+  if (!isLastCellFocused) {
+    if (colIndex === colCount - 1
+    ) {
+      if (wrap) {
+        retVal = [rowIndex + 1, 0];
+      }
+    } else {
+      retVal = [rowIndex, colIndex + 1];
+    }
+  }
+  return retVal;
+};
+const getCellUp = (matrix, rowIndex, colIndex, wrap) => {
+  let retVal = [];
+  const rowCount = matrix.length;
+  const isFirstCellFocused = rowIndex === 0 && colIndex === 0;
+  if (!isFirstCellFocused) {
+    if (rowIndex === 0
+    ) {
+      if (wrap) {
+        const lastRowLength = matrix[rowCount - 1].length;
+        const col = colIndex - 1;
+        const row = rowCount - (col >= lastRowLength ? 2 : 1);
+        retVal = [row, col];
+      }
+    } else {
+      retVal = [rowIndex - 1, colIndex];
+    }
+  }
+  return retVal;
+};
+const getId = (idPrefix, rowIndex, colIndex) => `${idPrefix}--R${rowIndex + 1}C${colIndex + 1}`;
 
-const GRID_KEYS = [KEYS.LEFT, KEYS.RIGHT, KEYS.UP, KEYS.DOWN, KEYS.HOME, KEYS.END];
+const GRID_KEYS = [containerUtilities.KEYS.LEFT, containerUtilities.KEYS.RIGHT, containerUtilities.KEYS.UP, containerUtilities.KEYS.DOWN, containerUtilities.KEYS.HOME, containerUtilities.KEYS.END];
 function useGrid(_ref) {
@@ -78,4 +96,4 @@ let {
     idPrefix,
-    onChange,
-    environment = document,
+    onChange = () => undefined,
+    environment,
     rowIndex: controlledRowIndex,
@@ -86,2 +104,4 @@ colIndex: controlledColIndex,
   } = _ref;
+  const doc = environment || document;
+  const prefix = containerUtilities.useId(idPrefix);
   const [uncontrolledRowIndex, setUncontrolledRowIndex] = React.useState(defaultRowIndex !== null && defaultRowIndex !== undefined ? defaultRowIndex : 0);
@@ -92,142 +112,116 @@ const [uncontrolledColIndex, setUncontrolledColIndex] = React.useState(defaultColIndex !== null && defaultColIndex !== undefined ? defaultColIndex : 0);
   const colIndex = isControlled ? controlledColIndex : uncontrolledColIndex;
-  const rowCount = matrix.length;
-  const colCount = matrix[0].length;
-  const getCellRight = () => {
-    let retVal = [];
-    const lastRowIndex = rowCount - 1;
-    const lastColIndex = matrix[lastRowIndex].length - 1;
-    const isLastCellFocused = rowIndex === lastRowIndex && colIndex === lastColIndex;
-    if (!isLastCellFocused) {
-      if (colIndex === colCount - 1
-      ) {
-        if (wrap) {
-          retVal = [rowIndex + 1, 0];
-        }
-      } else {
-        retVal = [rowIndex, colIndex + 1];
+  React.useEffect(() => {
+    const rowCount = matrix.length;
+    const colCount = matrix[0].length;
+    const isRowIndexInvalid = rowIndex >= rowCount;
+    const isColIndexInvalid = colIndex >= colCount;
+    if (isRowIndexInvalid || isColIndexInvalid) {
+      let _rowIndex = rowIndex;
+      let _colIndex = colIndex;
+      if (isRowIndexInvalid) {
+        _rowIndex = rowCount > 0 ? rowCount - 1 : 0;
       }
-    }
-    return retVal;
-  };
-  const getCellLeft = () => {
-    let retVal = [];
-    const isFirstCellFocused = rowIndex === 0 && colIndex === 0;
-    if (!isFirstCellFocused) {
-      if (colIndex === 0
-      ) {
-        if (wrap) {
-          retVal = [rowIndex - 1, colCount - 1];
-        }
-      } else {
-        retVal = [rowIndex, colIndex - 1];
+      if (isColIndexInvalid) {
+        _colIndex = colCount > 0 ? colCount - 1 : 0;
       }
-    }
-    return retVal;
-  };
-  const getCellDown = () => {
-    let retVal = [];
-    const lastRowLength = matrix[rowCount - 1].length;
-    const isLastCellFocused = rowIndex === rowCount - (colCount > lastRowLength ? 2 : 1) && colIndex === colCount - 1;
-    if (!isLastCellFocused) {
-      if (rowIndex === rowCount - (colIndex >= lastRowLength ? 2 : 1)
-      ) {
-        if (wrap) {
-          retVal = [0, colIndex + 1];
-        }
-      } else {
-        retVal = [rowIndex + 1, colIndex];
+      if (!isControlled) {
+        setUncontrolledRowIndex(_rowIndex);
+        setUncontrolledColIndex(_colIndex);
       }
+      onChange(_rowIndex, _colIndex);
     }
-    return retVal;
-  };
-  const getCellUp = () => {
-    let retVal = [];
-    const isFirstCellFocused = rowIndex === 0 && colIndex === 0;
-    if (!isFirstCellFocused) {
-      if (rowIndex === 0
-      ) {
-        if (wrap) {
-          const lastRowLength = matrix[rowCount - 1].length;
-          const col = colIndex - 1;
-          const row = rowCount - (col >= lastRowLength ? 2 : 1);
-          retVal = [row, col];
-        }
-      } else {
-        retVal = [rowIndex - 1, colIndex];
-      }
-    }
-    return retVal;
-  };
-  const handleKeyDown = event => {
-    if (GRID_KEYS.includes(event.key)) {
-      event.preventDefault();
-      let row = rowIndex;
-      let col = colIndex;
-      switch (event.key) {
-        case KEYS.RIGHT:
-          [row, col] = rtl ? getCellLeft() : getCellRight();
-          break;
-        case KEYS.LEFT:
-          [row, col] = rtl ? getCellRight() : getCellLeft();
-          break;
-        case KEYS.DOWN:
-          [row, col] = getCellDown();
-          break;
-        case KEYS.UP:
-          [row, col] = getCellUp();
-          break;
-        case KEYS.HOME:
-          row = event.ctrlKey ? 0 : rowIndex;
-          col = 0;
-          break;
-        case KEYS.END:
-          {
-            const lastRowIndex = rowCount - 1;
-            const lastColIndex = matrix[lastRowIndex].length - 1;
-            row = event.ctrlKey ? lastRowIndex : rowIndex;
-            col = event.ctrlKey ? lastColIndex : matrix[rowIndex].length - 1;
-            break;
-          }
-      }
-      if (row !== rowIndex || col !== colIndex) {
-        const id = `${idPrefix}-${row}-${col}`;
-        const element = environment.getElementById(id);
-        element == null ? void 0 : element.focus();
-      }
-    }
-  };
-  const getGridCellProps = _ref2 => {
+  }, [matrix, rowIndex, colIndex, isControlled, setUncontrolledColIndex, onChange]);
+  const getGridProps = React.useCallback(_ref2 => {
     let {
-      rowIdx,
-      colIdx,
+      role = 'grid',
+      ...other
+    } = _ref2;
+    return {
+      'data-garden-container-id': 'containers.grid',
+      'data-garden-container-version': '3.0.0',
+      role: role === null ? undefined : role,
+      ...other
+    };
+  }, []);
+  const getGridCellProps = React.useCallback(function (_temp) {
+    let {
+      role = 'gridcell',
+      rowIndex: _rowIndex,
+      colIndex: _colIndex,
       onFocus,
       onKeyDown,
       ...other
-    } = _ref2;
+    } = _temp === void 0 ? {
+      rowIndex: 0,
+      colIndex: 0
+    } : _temp;
+    const handleFocus = () => {
+      if (!isControlled) {
+        setUncontrolledRowIndex(_rowIndex);
+        setUncontrolledColIndex(_colIndex);
+      }
+      onChange(_rowIndex, _colIndex);
+    };
+    const handleKeyDown = event => {
+      if (GRID_KEYS.includes(event.key)) {
+        event.preventDefault();
+        let row = rowIndex;
+        let col = colIndex;
+        switch (event.key) {
+          case containerUtilities.KEYS.RIGHT:
+            [row, col] = rtl ? getCellLeft(matrix, rowIndex, colIndex, wrap) : getCellRight(matrix, rowIndex, colIndex, wrap);
+            break;
+          case containerUtilities.KEYS.LEFT:
+            [row, col] = rtl ? getCellRight(matrix, rowIndex, colIndex, wrap) : getCellLeft(matrix, rowIndex, colIndex, wrap);
+            break;
+          case containerUtilities.KEYS.DOWN:
+            [row, col] = getCellDown(matrix, rowIndex, colIndex, wrap);
+            break;
+          case containerUtilities.KEYS.UP:
+            [row, col] = getCellUp(matrix, rowIndex, colIndex, wrap);
+            break;
+          case containerUtilities.KEYS.HOME:
+            row = event.ctrlKey ? 0 : rowIndex;
+            col = 0;
+            break;
+          case containerUtilities.KEYS.END:
+            {
+              const rowCount = matrix.length;
+              const lastRowIndex = rowCount - 1;
+              const lastColIndex = matrix[lastRowIndex].length - 1;
+              row = event.ctrlKey ? lastRowIndex : rowIndex;
+              col = event.ctrlKey ? lastColIndex : matrix[rowIndex].length - 1;
+              break;
+            }
+        }
+        if (row !== rowIndex || col !== colIndex) {
+          const id = getId(prefix, row, col);
+          const element = doc.getElementById(id);
+          element == null ? void 0 : element.focus();
+        }
+      }
+    };
     return {
-      tabIndex: rowIndex === rowIdx && colIndex === colIdx ? 0 : -1,
-      role: 'gridcell',
-      id: `${idPrefix}-${rowIdx}-${colIdx}`,
-      onFocus: composeEventHandlers(onFocus, () => {
-        if (!isControlled) {
-          setUncontrolledRowIndex(rowIdx);
-          setUncontrolledColIndex(colIdx);
-        }
-        onChange && onChange(rowIdx, colIdx);
-      }),
-      onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
+      'data-garden-container-id': 'containers.grid.cell',
+      'data-garden-container-version': '3.0.0',
+      id: getId(prefix, _rowIndex, _colIndex),
+      role: role === null ? undefined : role,
+      tabIndex: rowIndex === _rowIndex && colIndex === _colIndex ? 0 : -1,
+      onFocus: containerUtilities.composeEventHandlers(onFocus, handleFocus),
+      onKeyDown: containerUtilities.composeEventHandlers(onKeyDown, handleKeyDown),
       ...other
     };
-  };
-  return {
+  }, [matrix, rowIndex, colIndex, doc, prefix, isControlled, onChange, rtl, wrap]);
+  return React.useMemo(() => ({
+    getGridProps,
     getGridCellProps
-  };
+  }), [getGridProps, getGridCellProps]);
 }
 
-const GridContainer = props => {
-  const {
+const GridContainer = _ref => {
+  let {
     children,
     render = children,
     ...options
-  } = props;
+  } = _ref;
   return React.createElement(React.Fragment, null, render(useGrid(options)));
@@ -234,0 +228,0 @@ };

dist/index.esm.js

@@ -8,61 +8,79 @@ /**
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { KEYS, useId, composeEventHandlers } from '@zendeskgarden/container-utilities';
 import PropTypes from 'prop-types';
 
-function composeEventHandlers() {
-  for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
-    fns[_key] = arguments[_key];
+const getCellDown = (matrix, rowIndex, colIndex, wrap) => {
+  let retVal = [];
+  const rowCount = matrix.length;
+  const colCount = matrix[0].length;
+  const lastRowLength = matrix[rowCount - 1].length;
+  const isLastCellFocused = rowIndex === rowCount - (colCount > lastRowLength ? 2 : 1) && colIndex === colCount - 1;
+  if (!isLastCellFocused) {
+    if (rowIndex === rowCount - (colIndex >= lastRowLength ? 2 : 1)
+    ) {
+      if (wrap) {
+        retVal = [0, colIndex + 1];
+      }
+    } else {
+      retVal = [rowIndex + 1, colIndex];
+    }
   }
-  return function (event) {
-    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      args[_key2 - 1] = arguments[_key2];
+  return retVal;
+};
+const getCellLeft = (matrix, rowIndex, colIndex, wrap) => {
+  let retVal = [];
+  const colCount = matrix[0].length;
+  const isFirstCellFocused = rowIndex === 0 && colIndex === 0;
+  if (!isFirstCellFocused) {
+    if (colIndex === 0
+    ) {
+      if (wrap) {
+        retVal = [rowIndex - 1, colCount - 1];
+      }
+    } else {
+      retVal = [rowIndex, colIndex - 1];
     }
-    return fns.some(function (fn) {
-      fn && fn.apply(void 0, [event].concat(args));
-      return event && event.defaultPrevented;
-    });
-  };
-}
-var KEYS = {
-  ALT: 'Alt',
-  ASTERISK: '*',
-  BACKSPACE: 'Backspace',
-  COMMA: ',',
-  DELETE: 'Delete',
-  DOWN: 'ArrowDown',
-  END: 'End',
-  ENTER: 'Enter',
-  ESCAPE: 'Escape',
-  HOME: 'Home',
-  LEFT: 'ArrowLeft',
-  NUMPAD_ADD: 'Add',
-  NUMPAD_DECIMAL: 'Decimal',
-  NUMPAD_DIVIDE: 'Divide',
-  NUMPAD_ENTER: 'Enter',
-  NUMPAD_MULTIPLY: 'Multiply',
-  NUMPAD_SUBTRACT: 'Subtract',
-  PAGE_DOWN: 'PageDown',
-  PAGE_UP: 'PageUp',
-  PERIOD: '.',
-  RIGHT: 'ArrowRight',
-  SHIFT: 'Shift',
-  SPACE: ' ',
-  TAB: 'Tab',
-  UNIDENTIFIED: 'Unidentified',
-  UP: 'ArrowUp'
+  }
+  return retVal;
 };
-var DocumentPosition;
-(function (DocumentPosition) {
-  DocumentPosition[DocumentPosition["DISCONNECTED"] = 1] = "DISCONNECTED";
-  DocumentPosition[DocumentPosition["PRECEDING"] = 2] = "PRECEDING";
-  DocumentPosition[DocumentPosition["FOLLOWING"] = 4] = "FOLLOWING";
-  DocumentPosition[DocumentPosition["CONTAINS"] = 8] = "CONTAINS";
-  DocumentPosition[DocumentPosition["CONTAINED_BY"] = 16] = "CONTAINED_BY";
-  DocumentPosition[DocumentPosition["IMPLEMENTATION_SPECIFIC"] = 32] = "IMPLEMENTATION_SPECIFIC";
-})(DocumentPosition || (DocumentPosition = {}));
-var ContainerOrientation;
-(function (ContainerOrientation) {
-  ContainerOrientation["HORIZONTAL"] = "horizontal";
-  ContainerOrientation["VERTICAL"] = "vertical";
-})(ContainerOrientation || (ContainerOrientation = {}));
+const getCellRight = (matrix, rowIndex, colIndex, wrap) => {
+  let retVal = [];
+  const rowCount = matrix.length;
+  const colCount = matrix[0].length;
+  const lastRowIndex = rowCount - 1;
+  const lastColIndex = matrix[lastRowIndex].length - 1;
+  const isLastCellFocused = rowIndex === lastRowIndex && colIndex === lastColIndex;
+  if (!isLastCellFocused) {
+    if (colIndex === colCount - 1
+    ) {
+      if (wrap) {
+        retVal = [rowIndex + 1, 0];
+      }
+    } else {
+      retVal = [rowIndex, colIndex + 1];
+    }
+  }
+  return retVal;
+};
+const getCellUp = (matrix, rowIndex, colIndex, wrap) => {
+  let retVal = [];
+  const rowCount = matrix.length;
+  const isFirstCellFocused = rowIndex === 0 && colIndex === 0;
+  if (!isFirstCellFocused) {
+    if (rowIndex === 0
+    ) {
+      if (wrap) {
+        const lastRowLength = matrix[rowCount - 1].length;
+        const col = colIndex - 1;
+        const row = rowCount - (col >= lastRowLength ? 2 : 1);
+        retVal = [row, col];
+      }
+    } else {
+      retVal = [rowIndex - 1, colIndex];
+    }
+  }
+  return retVal;
+};
+const getId = (idPrefix, rowIndex, colIndex) => `${idPrefix}--R${rowIndex + 1}C${colIndex + 1}`;
 
@@ -76,4 +94,4 @@ const GRID_KEYS = [KEYS.LEFT, KEYS.RIGHT, KEYS.UP, KEYS.DOWN, KEYS.HOME, KEYS.END];
     idPrefix,
-    onChange,
-    environment = document,
+    onChange = () => undefined,
+    environment,
     rowIndex: controlledRowIndex,
@@ -84,2 +102,4 @@ colIndex: controlledColIndex,
   } = _ref;
+  const doc = environment || document;
+  const prefix = useId(idPrefix);
   const [uncontrolledRowIndex, setUncontrolledRowIndex] = useState(defaultRowIndex !== null && defaultRowIndex !== undefined ? defaultRowIndex : 0);
@@ -90,142 +110,116 @@ const [uncontrolledColIndex, setUncontrolledColIndex] = useState(defaultColIndex !== null && defaultColIndex !== undefined ? defaultColIndex : 0);
   const colIndex = isControlled ? controlledColIndex : uncontrolledColIndex;
-  const rowCount = matrix.length;
-  const colCount = matrix[0].length;
-  const getCellRight = () => {
-    let retVal = [];
-    const lastRowIndex = rowCount - 1;
-    const lastColIndex = matrix[lastRowIndex].length - 1;
-    const isLastCellFocused = rowIndex === lastRowIndex && colIndex === lastColIndex;
-    if (!isLastCellFocused) {
-      if (colIndex === colCount - 1
-      ) {
-        if (wrap) {
-          retVal = [rowIndex + 1, 0];
-        }
-      } else {
-        retVal = [rowIndex, colIndex + 1];
+  useEffect(() => {
+    const rowCount = matrix.length;
+    const colCount = matrix[0].length;
+    const isRowIndexInvalid = rowIndex >= rowCount;
+    const isColIndexInvalid = colIndex >= colCount;
+    if (isRowIndexInvalid || isColIndexInvalid) {
+      let _rowIndex = rowIndex;
+      let _colIndex = colIndex;
+      if (isRowIndexInvalid) {
+        _rowIndex = rowCount > 0 ? rowCount - 1 : 0;
       }
-    }
-    return retVal;
-  };
-  const getCellLeft = () => {
-    let retVal = [];
-    const isFirstCellFocused = rowIndex === 0 && colIndex === 0;
-    if (!isFirstCellFocused) {
-      if (colIndex === 0
-      ) {
-        if (wrap) {
-          retVal = [rowIndex - 1, colCount - 1];
-        }
-      } else {
-        retVal = [rowIndex, colIndex - 1];
+      if (isColIndexInvalid) {
+        _colIndex = colCount > 0 ? colCount - 1 : 0;
       }
-    }
-    return retVal;
-  };
-  const getCellDown = () => {
-    let retVal = [];
-    const lastRowLength = matrix[rowCount - 1].length;
-    const isLastCellFocused = rowIndex === rowCount - (colCount > lastRowLength ? 2 : 1) && colIndex === colCount - 1;
-    if (!isLastCellFocused) {
-      if (rowIndex === rowCount - (colIndex >= lastRowLength ? 2 : 1)
-      ) {
-        if (wrap) {
-          retVal = [0, colIndex + 1];
-        }
-      } else {
-        retVal = [rowIndex + 1, colIndex];
+      if (!isControlled) {
+        setUncontrolledRowIndex(_rowIndex);
+        setUncontrolledColIndex(_colIndex);
       }
+      onChange(_rowIndex, _colIndex);
     }
-    return retVal;
-  };
-  const getCellUp = () => {
-    let retVal = [];
-    const isFirstCellFocused = rowIndex === 0 && colIndex === 0;
-    if (!isFirstCellFocused) {
-      if (rowIndex === 0
-      ) {
-        if (wrap) {
-          const lastRowLength = matrix[rowCount - 1].length;
-          const col = colIndex - 1;
-          const row = rowCount - (col >= lastRowLength ? 2 : 1);
-          retVal = [row, col];
-        }
-      } else {
-        retVal = [rowIndex - 1, colIndex];
-      }
-    }
-    return retVal;
-  };
-  const handleKeyDown = event => {
-    if (GRID_KEYS.includes(event.key)) {
-      event.preventDefault();
-      let row = rowIndex;
-      let col = colIndex;
-      switch (event.key) {
-        case KEYS.RIGHT:
-          [row, col] = rtl ? getCellLeft() : getCellRight();
-          break;
-        case KEYS.LEFT:
-          [row, col] = rtl ? getCellRight() : getCellLeft();
-          break;
-        case KEYS.DOWN:
-          [row, col] = getCellDown();
-          break;
-        case KEYS.UP:
-          [row, col] = getCellUp();
-          break;
-        case KEYS.HOME:
-          row = event.ctrlKey ? 0 : rowIndex;
-          col = 0;
-          break;
-        case KEYS.END:
-          {
-            const lastRowIndex = rowCount - 1;
-            const lastColIndex = matrix[lastRowIndex].length - 1;
-            row = event.ctrlKey ? lastRowIndex : rowIndex;
-            col = event.ctrlKey ? lastColIndex : matrix[rowIndex].length - 1;
-            break;
-          }
-      }
-      if (row !== rowIndex || col !== colIndex) {
-        const id = `${idPrefix}-${row}-${col}`;
-        const element = environment.getElementById(id);
-        element == null ? void 0 : element.focus();
-      }
-    }
-  };
-  const getGridCellProps = _ref2 => {
+  }, [matrix, rowIndex, colIndex, isControlled, setUncontrolledColIndex, onChange]);
+  const getGridProps = useCallback(_ref2 => {
     let {
-      rowIdx,
-      colIdx,
+      role = 'grid',
+      ...other
+    } = _ref2;
+    return {
+      'data-garden-container-id': 'containers.grid',
+      'data-garden-container-version': '3.0.0',
+      role: role === null ? undefined : role,
+      ...other
+    };
+  }, []);
+  const getGridCellProps = useCallback(function (_temp) {
+    let {
+      role = 'gridcell',
+      rowIndex: _rowIndex,
+      colIndex: _colIndex,
       onFocus,
       onKeyDown,
       ...other
-    } = _ref2;
+    } = _temp === void 0 ? {
+      rowIndex: 0,
+      colIndex: 0
+    } : _temp;
+    const handleFocus = () => {
+      if (!isControlled) {
+        setUncontrolledRowIndex(_rowIndex);
+        setUncontrolledColIndex(_colIndex);
+      }
+      onChange(_rowIndex, _colIndex);
+    };
+    const handleKeyDown = event => {
+      if (GRID_KEYS.includes(event.key)) {
+        event.preventDefault();
+        let row = rowIndex;
+        let col = colIndex;
+        switch (event.key) {
+          case KEYS.RIGHT:
+            [row, col] = rtl ? getCellLeft(matrix, rowIndex, colIndex, wrap) : getCellRight(matrix, rowIndex, colIndex, wrap);
+            break;
+          case KEYS.LEFT:
+            [row, col] = rtl ? getCellRight(matrix, rowIndex, colIndex, wrap) : getCellLeft(matrix, rowIndex, colIndex, wrap);
+            break;
+          case KEYS.DOWN:
+            [row, col] = getCellDown(matrix, rowIndex, colIndex, wrap);
+            break;
+          case KEYS.UP:
+            [row, col] = getCellUp(matrix, rowIndex, colIndex, wrap);
+            break;
+          case KEYS.HOME:
+            row = event.ctrlKey ? 0 : rowIndex;
+            col = 0;
+            break;
+          case KEYS.END:
+            {
+              const rowCount = matrix.length;
+              const lastRowIndex = rowCount - 1;
+              const lastColIndex = matrix[lastRowIndex].length - 1;
+              row = event.ctrlKey ? lastRowIndex : rowIndex;
+              col = event.ctrlKey ? lastColIndex : matrix[rowIndex].length - 1;
+              break;
+            }
+        }
+        if (row !== rowIndex || col !== colIndex) {
+          const id = getId(prefix, row, col);
+          const element = doc.getElementById(id);
+          element == null ? void 0 : element.focus();
+        }
+      }
+    };
     return {
-      tabIndex: rowIndex === rowIdx && colIndex === colIdx ? 0 : -1,
-      role: 'gridcell',
-      id: `${idPrefix}-${rowIdx}-${colIdx}`,
-      onFocus: composeEventHandlers(onFocus, () => {
-        if (!isControlled) {
-          setUncontrolledRowIndex(rowIdx);
-          setUncontrolledColIndex(colIdx);
-        }
-        onChange && onChange(rowIdx, colIdx);
-      }),
+      'data-garden-container-id': 'containers.grid.cell',
+      'data-garden-container-version': '3.0.0',
+      id: getId(prefix, _rowIndex, _colIndex),
+      role: role === null ? undefined : role,
+      tabIndex: rowIndex === _rowIndex && colIndex === _colIndex ? 0 : -1,
+      onFocus: composeEventHandlers(onFocus, handleFocus),
       onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
       ...other
     };
-  };
-  return {
+  }, [matrix, rowIndex, colIndex, doc, prefix, isControlled, onChange, rtl, wrap]);
+  return useMemo(() => ({
+    getGridProps,
     getGridCellProps
-  };
+  }), [getGridProps, getGridCellProps]);
 }
 
-const GridContainer = props => {
-  const {
+const GridContainer = _ref => {
+  let {
     children,
     render = children,
     ...options
-  } = props;
+  } = _ref;
   return React.createElement(React.Fragment, null, render(useGrid(options)));
@@ -232,0 +226,0 @@ };

dist/typings/GridContainer.d.ts

@@ -8,9 +8,3 @@ /**
 import React from 'react';
-import { IUseGridProps, IUseGridReturnValue } from './useGrid';
-export interface IGridContainerProps extends IUseGridProps {
-    /** A render prop function which receives grid a prop getter */
-    render?: (options: IUseGridReturnValue) => React.ReactNode;
-    /** A children render prop function which receives a grid prop getter */
-    children?: (options: IUseGridReturnValue) => React.ReactNode;
-}
+import { IGridContainerProps } from './types';
 export declare const GridContainer: React.FC<IGridContainerProps>;

dist/typings/index.d.ts

@@ -8,4 +8,3 @@ /**
 export { useGrid } from './useGrid';
-export type { IUseGridProps, IUseGridReturnValue } from './useGrid';
 export { GridContainer } from './GridContainer';
-export type { IGridContainerProps } from './GridContainer';
+export type { IUseGridProps, IUseGridReturnValue, IGridContainerProps } from './types';

dist/typings/useGrid.d.ts

@@ -7,33 +7,3 @@ /**
  */
-import { HTMLProps, HTMLAttributes } from 'react';
-export interface IUseGridProps {
-    /** Determines if navigation uses right-to-left direction */
-    rtl?: boolean;
-    /** Enables wrapped keyboard navigation  */
-    wrap?: boolean;
-    /** Sets the two-dimension array to render the grid */
-    matrix: any[][];
-    /** Prefixes IDs for the grid and cells  */
-    idPrefix?: string;
-    /** Sets the focused row index in a controlled grid */
-    rowIndex?: number;
-    /** Sets the focused column index in a controlled grid */
-    colIndex?: number;
-    /** Sets the default focused row index in a uncontrolled grid */
-    defaultRowIndex?: number;
-    /** Sets the default focused column index in a uncontrolled grid */
-    defaultColIndex?: number;
-    /** Handles grid change event */
-    onChange?: (rowIndex: number, colIndex: number) => void;
-    /** The environment where the grid is rendered */
-    environment?: Document;
-}
-interface IGetGridCellProps extends HTMLProps<any> {
-    rowIdx: number;
-    colIdx: number;
-}
-export interface IUseGridReturnValue {
-    getGridCellProps: (options: IGetGridCellProps) => HTMLAttributes<any>;
-}
+import { IUseGridProps, IUseGridReturnValue } from './types';
 export declare function useGrid({ rtl, wrap, matrix, idPrefix, onChange, environment, rowIndex: controlledRowIndex, colIndex: controlledColIndex, defaultRowIndex, defaultColIndex }: IUseGridProps): IUseGridReturnValue;
-export {};

package.json

 {
   "name": "@zendeskgarden/container-grid",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "description": "Containers relating to Grid in the Garden Design System",
@@ -23,3 +23,4 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.8.4"
+    "@babel/runtime": "^7.8.4",
+    "@zendeskgarden/container-utilities": "^1.0.1"
   },
@@ -45,3 +46,3 @@ "peerDependencies": {
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "1cc53f9f74902490e5af52e54d76c9aa06f8976a"
+  "gitHead": "cb32dff8d086e9f413e3e5ccd0ed73b657da8dbd"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32209

increased by8.51%

Number of package files

10

increased by25%

Lines of code

560

increased by3.13%

Worsened metrics

Dependency count

5

increased by25%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@zendeskgarden/container-utilities@^1.0.1

• + Added@reach/auto-id@0.18.0(transitive)

• + Added@reach/utils@0.18.0(transitive)

• + Added@zendeskgarden/container-utilities@1.0.14(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedscheduler@0.20.2(transitive)