@workday/canvas-kit-react 8.0.0 → 8.0.1

package/dist/commonjs/collection/lib/useCursorListModel.js

@@ -59,8 +59,8 @@ exports.getLast = getLast;
 var getFirstOfRow = function (id, _a) {
     var state = _a.state;
     if (state.columnCount) {
-        var item_1 = getItem(id, { state: state });
-        var currentIndex = state.items.findIndex(function (i) { return useBaseListModel_1.defaultGetId(item_1) === useBaseListModel_1.defaultGetId(i); });
+        var item = getItem(id, { state: state });
+        var currentIndex = item.index;
         var offset = currentIndex % state.columnCount;
         return state.items[currentIndex - offset];
     }
@@ -73,10 +73,14 @@ exports.getFirstOfRow = getFirstOfRow;
 var getLastOfRow = function (id, _a) {
     var state = _a.state;
     if (state.columnCount) {
-        var item_2 = getItem(id, { state: state });
-        var currentIndex = state.items.findIndex(function (i) { return useBaseListModel_1.defaultGetId(item_2) === useBaseListModel_1.defaultGetId(i); });
+        var item = getItem(id, { state: state });
+        var currentIndex = item.index;
         var offset = (currentIndex % state.columnCount) - state.columnCount + 1;
-        return state.items[currentIndex - offset];
+        var nextIndex = currentIndex - offset;
+        if (nextIndex >= state.items.length) {
+            nextIndex = state.items.length - 1;
+        }
+        return state.items[nextIndex];
     }
     return exports.getLast(id, { state: state });
 };
@@ -88,8 +92,8 @@ exports.getLastOfRow = getLastOfRow;
 var getPreviousPage = function (id, _a) {
     var state = _a.state;
     if (state.columnCount) {
-        var item_3 = getItem(id, { state: state });
-        var currentIndex = state.items.findIndex(function (i) { return useBaseListModel_1.defaultGetId(item_3) === useBaseListModel_1.defaultGetId(i); });
+        var item = getItem(id, { state: state });
+        var currentIndex = item.index;
         return state.items[currentIndex % state.columnCount];
     }
     return exports.getFirst(id, { state: state });
@@ -102,8 +106,8 @@ exports.getPreviousPage = getPreviousPage;
 var getNextPage = function (id, _a) {
     var state = _a.state;
     if (state.columnCount) {
-        var item_4 = getItem(id, { state: state });
-        var currentIndex = state.items.findIndex(function (i) { return useBaseListModel_1.defaultGetId(item_4) === useBaseListModel_1.defaultGetId(i); });
+        var item = getItem(id, { state: state });
+        var currentIndex = item.index;
         var lastRowIndex = state.items.length - state.columnCount;
         return state.items[lastRowIndex + (currentIndex % state.columnCount)];
     }
@@ -121,13 +125,40 @@ var getWrappingOffsetItem = function (offset) { return function (id, _a, tries)
     if (tries === void 0) { tries = state.items.length; }
     var items = state.items;
     var item = getItem(id, { state: state });
-    var currentIndex = items.findIndex(function (i) { return useBaseListModel_1.defaultGetId(item) === useBaseListModel_1.defaultGetId(i); });
+    var currentIndex = item.index;
     var nextIndex = currentIndex + offset;
+    // calculate idealLength as in if the grid was a perfect rectangle
+    var rows = Math.ceil(items.length / state.columnCount);
+    var idealLength = rows * state.columnCount;
     if (nextIndex < 0) {
-        nextIndex = items.length + nextIndex;
+        if (offset === -1) {
+            // if the offset is -1, we want to wrap to the end
+            nextIndex = items.length - 1;
+        }
+        else {
+            // if the offset is smaller than -1, we want to wrap by column
+            if (idealLength + nextIndex >= items.length) {
+                // we'll overflow the grid because there isn't enough items. Move `nextIndex` up so we wrap in
+                // the right spot
+                nextIndex -= state.columnCount;
+            }
+            nextIndex = idealLength + nextIndex;
+        }
     }
     else if (nextIndex >= items.length) {
-        nextIndex = nextIndex - items.length;
+        if (offset === 1) {
+            // if the offset is 1, we want to wrap to the beginning
+            nextIndex = 0;
+        }
+        else {
+            // if the offset is larger than 1, we want to wrap by column
+            if (nextIndex - idealLength < 0) {
+                // we're going to overflow the grid because there isn't enough items. Move `nextIndex` down to
+                // the missing item in the next row. This way we'll end up wrapping in the right spot
+                nextIndex += state.columnCount;
+            }
+            nextIndex = nextIndex - idealLength;
+        }
     }
     if (state.nonInteractiveIds.includes(useBaseListModel_1.defaultGetId(items[nextIndex])) && tries > 0) {
         // The next item is disabled, try again, but only if we haven't already tried everything.
@@ -142,7 +173,7 @@ var getOffsetItem = function (offset) { return function (id, _a, tries) {
     if (tries === void 0) { tries = state.items.length; }
     var items = state.items, columnCount = state.columnCount;
     var item = getItem(id, { state: state });
-    var currentIndex = items.findIndex(function (i) { return useBaseListModel_1.defaultGetId(item) === useBaseListModel_1.defaultGetId(i); });
+    var currentIndex = item.index;
     var nextIndex = currentIndex + offset;
     if (Math.abs(offset) < columnCount) {
         // if we're here, the columnCount is non-zero and the absolute value of offset is less than the
@@ -160,8 +191,13 @@ var getOffsetItem = function (offset) { return function (id, _a, tries) {
         if (nextRow < 0 || nextRow >= columnCount) {
             nextIndex = currentIndex;
         }
+        // make sure we don't go out of bounds if the grid isn't a perfect rectangle
+        if (nextIndex > items.length - 1) {
+            nextIndex = currentIndex;
+        }
     }
-    else if (nextIndex < 0) {
+    // make sure we're always in bounds
+    if (nextIndex < 0) {
         nextIndex = 0;
     }
     else if (nextIndex >= items.length) {
@@ -176,7 +212,9 @@ var getOffsetItem = function (offset) { return function (id, _a, tries) {
 }; };
 exports.getOffsetItem = getOffsetItem;
 /**
- * The default navigation manager of lists
+ * The default navigation manager of lists. This navigation manager will wrap around when the edge
+ * is hit. For example, if the user is the the right-most item in a list or right-most item in a
+ * row, the cursor will wrap around to the beginning or the next row.
  */
 exports.wrappingNavigationManager = exports.createNavigationManager({
     getFirst: exports.getFirst,
@@ -185,18 +223,22 @@ exports.wrappingNavigationManager = exports.createNavigationManager({
     getNext: exports.getWrappingOffsetItem(1),
     getNextRow: function (id, _a) {
         var state = _a.state;
-        return exports.getWrappingOffsetItem(-state.columnCount)(id, { state: state });
+        return exports.getWrappingOffsetItem(state.columnCount)(id, { state: state });
     },
     getPrevious: exports.getWrappingOffsetItem(-1),
     getPreviousRow: function (id, _a) {
         var state = _a.state;
-        return exports.getWrappingOffsetItem(state.columnCount)(id, { state: state });
+        return exports.getWrappingOffsetItem(-state.columnCount)(id, { state: state });
     },
     getPreviousPage: exports.getPreviousPage,
     getNextPage: exports.getNextPage,
     getFirstOfRow: exports.getFirstOfRow,
     getLastOfRow: exports.getLastOfRow,
 });
+/**
+ * The default navigation of grids. This navigation manager will not wrap, but will stop when an
+ * edge is detected. This could be the last item in a list or the last item of a row in a grid.
+ */
 exports.navigationManager = exports.createNavigationManager({
     getFirst: exports.getFirst,
     getLast: exports.getLast,
@@ -204,12 +246,12 @@ exports.navigationManager = exports.createNavigationManager({
     getNext: exports.getOffsetItem(1),
     getNextRow: function (id, _a) {
         var state = _a.state;
-        return exports.getOffsetItem(-state.columnCount)(id, { state: state });
+        return exports.getOffsetItem(state.columnCount)(id, { state: state });
     },
     getPrevious: exports.getOffsetItem(-1),
     getPreviousRow: function (id, _a) {
         var state = _a.state;
-        return exports.getOffsetItem(state.columnCount)(id, { state: state });
+        return exports.getOffsetItem(-state.columnCount)(id, { state: state });
     },
     getPreviousPage: exports.getPreviousPage,
     getNextPage: exports.getNextPage,
@@ -238,9 +280,7 @@ exports.useCursorListModel = common_1.createModelHook({
          * (left-to-right or right-to-left) and call the correct navigation method. In our example, a
          * left-to-right language would send a `getNext`. The navigation manager may return the next item
          * in the list. Different managers can be created for slightly different use cases. The default
-         * navigation manager will accept `orientation` and directionality to determine mapping. If
-         * `columnCount` is non-zero, it will use a grid mode where `orientation` is ignored and only
-         * directionality matters.
+         * navigation manager will accept `orientation` and directionality to determine mapping.
          *
          * An example override might be a tab list with an overflow menu that is meant to be transparent
          * to screen reader users. This would require the overflow menu to accept both up/down keys as
@@ -254,15 +294,16 @@ exports.useCursorListModel = common_1.createModelHook({
     var columnCount = config.columnCount || 0;
     var list = useBaseListModel_1.useBaseListModel(config);
     var initialCurrentRef = react_1.default.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? useBaseListModel_1.defaultGetId(config.items[0]) : ''));
+    var navigation = config.navigation;
     var state = __assign(__assign({}, list.state), { 
         /** The id of the list item the cursor is pointing to */
         cursorId: cursorId,
         /**
          * Any positive non-zero value treats the list like a grid with rows and columns
          * @default 0
+         * @private Use useGridModel instead to make a grid instead of a list
          */
         columnCount: columnCount });
-    var navigation = config.navigation || exports.wrappingNavigationManager;
     var events = __assign(__assign({}, list.events), { 
         /**
          * Register an item to the list. Takes in an identifier, a React.Ref and an optional index. This