@workday/canvas-kit-react 8.0.0 → 8.0.1

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

@@ -50,8 +50,8 @@ export var getLast = function (_, _a) {
 export 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 getId(item_1) === getId(i); });
+        var item = getItem(id, { state: state });
+        var currentIndex = item.index;
         var offset = currentIndex % state.columnCount;
         return state.items[currentIndex - offset];
     }
@@ -63,10 +63,14 @@ export var getFirstOfRow = function (id, _a) {
 export 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 getId(item_2) === getId(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 getLast(id, { state: state });
 };
@@ -77,8 +81,8 @@ export var getLastOfRow = function (id, _a) {
 export 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 getId(item_3) === getId(i); });
+        var item = getItem(id, { state: state });
+        var currentIndex = item.index;
         return state.items[currentIndex % state.columnCount];
     }
     return getFirst(id, { state: state });
@@ -90,8 +94,8 @@ export var getPreviousPage = function (id, _a) {
 export 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 getId(item_4) === getId(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)];
     }
@@ -108,13 +112,40 @@ export var getWrappingOffsetItem = function (offset) { return function (id, _a,
     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 getId(item) === getId(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(getId(items[nextIndex])) && tries > 0) {
         // The next item is disabled, try again, but only if we haven't already tried everything.
@@ -128,7 +159,7 @@ export 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 getId(item) === getId(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
@@ -146,8 +177,13 @@ export 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) {
@@ -161,7 +197,9 @@ export var getOffsetItem = function (offset) { return function (id, _a, tries) {
     return items[nextIndex];
 }; };
 /**
- * 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.
  */
 export var wrappingNavigationManager = createNavigationManager({
     getFirst: getFirst,
@@ -170,18 +208,22 @@ export var wrappingNavigationManager = createNavigationManager({
     getNext: getWrappingOffsetItem(1),
     getNextRow: function (id, _a) {
         var state = _a.state;
-        return getWrappingOffsetItem(-state.columnCount)(id, { state: state });
+        return getWrappingOffsetItem(state.columnCount)(id, { state: state });
     },
     getPrevious: getWrappingOffsetItem(-1),
     getPreviousRow: function (id, _a) {
         var state = _a.state;
-        return getWrappingOffsetItem(state.columnCount)(id, { state: state });
+        return getWrappingOffsetItem(-state.columnCount)(id, { state: state });
     },
     getPreviousPage: getPreviousPage,
     getNextPage: getNextPage,
     getFirstOfRow: getFirstOfRow,
     getLastOfRow: 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.
+ */
 export var navigationManager = createNavigationManager({
     getFirst: getFirst,
     getLast: getLast,
@@ -189,12 +231,12 @@ export var navigationManager = createNavigationManager({
     getNext: getOffsetItem(1),
     getNextRow: function (id, _a) {
         var state = _a.state;
-        return getOffsetItem(-state.columnCount)(id, { state: state });
+        return getOffsetItem(state.columnCount)(id, { state: state });
     },
     getPrevious: getOffsetItem(-1),
     getPreviousRow: function (id, _a) {
         var state = _a.state;
-        return getOffsetItem(state.columnCount)(id, { state: state });
+        return getOffsetItem(-state.columnCount)(id, { state: state });
     },
     getPreviousPage: getPreviousPage,
     getNextPage: getNextPage,
@@ -223,9 +265,7 @@ export var useCursorListModel = 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
@@ -239,15 +279,16 @@ export var useCursorListModel = createModelHook({
     var columnCount = config.columnCount || 0;
     var list = useBaseListModel(config);
     var initialCurrentRef = React.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? getId(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 || 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