@workday/canvas-kit-react 7.2.0-next.1 → 7.2.0-next.2

package/action-bar/lib/ActionBarList.tsx

@@ -2,18 +2,13 @@ import * as React from 'react';
 
 import {commonColors, colors, space} from '@workday/canvas-kit-react/tokens';
 import {
-  composeHooks,
   createSubcomponent,
   ExtractProps,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
 import {HStack} from '@workday/canvas-kit-react/layout';
-import {
-  useOverflowListMeasure,
-  useListRenderItems,
-  useListResetCursorOnBlur,
-} from '@workday/canvas-kit-react/collection';
+import {useOverflowListMeasure, useListRenderItems} from '@workday/canvas-kit-react/collection';
 
 import {useActionBarModel} from './useActionBarModel';
 import {ActionBar} from './ActionBar';
@@ -42,12 +37,10 @@ const ResponsiveHStack = styled(HStack)<ActionBarListProps & StyledType>(({theme
   },
 }));
 
-export const useActionBarList = composeHooks(useOverflowListMeasure, useListResetCursorOnBlur);
-
 export const ActionBarList = createSubcomponent('div')({
   displayName: 'ActionBar.List',
   modelHook: useActionBarModel,
-  elemPropsHook: useActionBarList,
+  elemPropsHook: useOverflowListMeasure,
 })<ActionBarListProps>(({children, ...elemProps}, Element, model) => {
   return (
     <ResponsiveHStack

package/collection/index.ts

@@ -9,9 +9,11 @@ export * from './lib/useListResetCursorOnBlur';
 export * from './lib/useListItemRovingFocus';
 export * from './lib/useListItemSelect';
 export * from './lib/useListModel';
+export * from './lib/useGridModel';
 export {ListBox} from './lib/ListBox';
 export {
   singleSelectionManager,
   multiSelectionManager,
   isSelected,
 } from './lib/useSelectionListModel';
+export {wrappingNavigationManager, navigationManager} from './lib/useCursorListModel';

package/collection/lib/useBaseListModel.tsx

@@ -170,7 +170,7 @@ export const useBaseListModel = createModelHook({
         return items.concat({
           id: getId(data.item),
           value: data.item,
-          index: items.length - 1,
+          index: items.length,
           textValue: data.textValue,
         });
       });

package/collection/lib/useCursorListModel.tsx

@@ -6,17 +6,40 @@ import {useBaseListModel, Item, defaultGetId as getId} from './useBaseListModel'
 type NavigationInput = Pick<ReturnType<typeof useCursorListModel>, 'state'>;
 
 export interface NavigationManager {
+  /** Get the first item in a collection. This will be called when the `Home` key is pressed for
+   * Lists and `Ctrl+Home` for Grids. */
   getFirst: NavigationRequestor;
+  /** Get the last item in a collection. This will be called when the `End` key is pressed for Lists
+   * and `Ctrl+End` for Grids. */
   getLast: NavigationRequestor;
+  /** Get an item with the provided `id`. */
   getItem: NavigationRequestor;
+  /** Get the next item after the provided `id`. This will be called when the `Right` arrow key is
+   * pressed for RTL languages and when the `Left` arrow is pressed for LTR languages. */
   getNext: NavigationRequestor;
+  /** **For Grids:** Get the cell in the next row from the provided `id`. This will be called when
+   * the `Down` arrow is pressed.  */
   getNextRow: NavigationRequestor;
+  /** Get the previous item before the provided `id`. This will be called when the `Left` arrow key
+   * is pressed for RTL languages and when the `Right` arrow is pressed for LTR languages. */
   getPrevious: NavigationRequestor;
+  /** **For Grids:** Get the cell in the previous row from the provided `id`. This will be called
+   * when the `Up` arrow is pressed.  */
   getPreviousRow: NavigationRequestor;
+  /** **For Grids:** Get the first item in a row. This will be called when the `Home` key is
+   * pressed. */
   getFirstOfRow: NavigationRequestor;
+  /** **For Grids:** Get the last item in a row. This will be called when the `End` key is
+   * pressed. */
   getLastOfRow: NavigationRequestor;
-  getPreviousPage: NavigationRequestor;
+  /** Get the next "page". A "page" is application specific and usually means next visible screen.
+   * If the viewport is scrollable, it would scroll so that the last item visible is now the first
+   * item visible. This is called when the `PageDown` key is pressed */
   getNextPage: NavigationRequestor;
+  /** Get the next "page". A "page" is application specific and usually means previous visible
+   * screen. If the viewport is scrollable, it would scroll so that the first item visible is now
+   * the last item visible. This is called when the `PageUp` key is pressed */
+  getPreviousPage: NavigationRequestor;
 }
 
 /**
@@ -56,7 +79,7 @@ export const getLast: NavigationRequestor = (_, {state}) => state.items[state.it
 export const getFirstOfRow: NavigationRequestor = (id, {state}) => {
   if (state.columnCount) {
     const item = getItem(id, {state});
-    const currentIndex = state.items.findIndex(i => getId(item) === getId(i));
+    const currentIndex = item.index;
     const offset = currentIndex % state.columnCount;
     return state.items[currentIndex - offset];
   }
@@ -69,9 +92,13 @@ export const getFirstOfRow: NavigationRequestor = (id, {state}) => {
 export const getLastOfRow: NavigationRequestor = (id, {state}) => {
   if (state.columnCount) {
     const item = getItem(id, {state});
-    const currentIndex = state.items.findIndex(i => getId(item) === getId(i));
+    const currentIndex = item.index;
     const offset = (currentIndex % state.columnCount) - state.columnCount + 1;
-    return state.items[currentIndex - offset];
+    let nextIndex = currentIndex - offset;
+    if (nextIndex >= state.items.length) {
+      nextIndex = state.items.length - 1;
+    }
+    return state.items[nextIndex];
   }
   return getLast(id, {state});
 };
@@ -83,7 +110,7 @@ export const getLastOfRow: NavigationRequestor = (id, {state}) => {
 export const getPreviousPage: NavigationRequestor = (id, {state}) => {
   if (state.columnCount) {
     const item = getItem(id, {state});
-    const currentIndex = state.items.findIndex(i => getId(item) === getId(i));
+    const currentIndex = item.index;
     return state.items[currentIndex % state.columnCount];
   }
   return getFirst(id, {state});
@@ -96,7 +123,7 @@ export const getPreviousPage: NavigationRequestor = (id, {state}) => {
 export const getNextPage: NavigationRequestor = (id, {state}) => {
   if (state.columnCount) {
     const item = getItem(id, {state});
-    const currentIndex = state.items.findIndex(i => getId(item) === getId(i));
+    const currentIndex = item.index;
     const lastRowIndex = state.items.length - state.columnCount;
     return state.items[lastRowIndex + (currentIndex % state.columnCount)];
   }
@@ -117,12 +144,38 @@ export const getWrappingOffsetItem = (offset: number) => (
   const items = state.items;
   const item = getItem(id, {state});
 
-  const currentIndex = items.findIndex(i => getId(item) === getId(i));
+  const currentIndex = item.index;
   let nextIndex = currentIndex + offset;
+
+  // calculate idealLength as in if the grid was a perfect rectangle
+  const rows = Math.ceil(items.length / state.columnCount);
+  const 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) {
@@ -142,8 +195,9 @@ export const getOffsetItem = (offset: number) => (
   const {items, columnCount} = state;
   const item = getItem(id, {state});
 
-  const currentIndex = items.findIndex(i => getId(item) === getId(i));
+  const currentIndex = item.index;
   let 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
     // column count. We don't want to wrap, so we'll bound within the row
@@ -157,10 +211,19 @@ export const getOffsetItem = (offset: number) => (
     // if we're here, there's a column count, but the offset will move into another row. We need to
     // bound to row values
     const nextRow = Math.floor(nextIndex / columnCount);
+
     if (nextRow < 0 || nextRow >= columnCount) {
       nextIndex = currentIndex;
     }
-  } else if (nextIndex < 0) {
+
+    // make sure we don't go out of bounds if the grid isn't a perfect rectangle
+    if (nextIndex > items.length - 1) {
+      nextIndex = currentIndex;
+    }
+  }
+
+  // make sure we're always in bounds
+  if (nextIndex < 0) {
     nextIndex = 0;
   } else if (nextIndex >= items.length) {
     nextIndex = items.length - 1;
@@ -176,30 +239,36 @@ export const getOffsetItem = (offset: number) => (
 };
 
 /**
- * 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 const wrappingNavigationManager = createNavigationManager({
   getFirst,
   getLast,
   getItem,
   getNext: getWrappingOffsetItem(1),
-  getNextRow: (id, {state}) => getWrappingOffsetItem(-state.columnCount)(id, {state}),
+  getNextRow: (id, {state}) => getWrappingOffsetItem(state.columnCount)(id, {state}),
   getPrevious: getWrappingOffsetItem(-1),
-  getPreviousRow: (id, {state}) => getWrappingOffsetItem(state.columnCount)(id, {state}),
+  getPreviousRow: (id, {state}) => getWrappingOffsetItem(-state.columnCount)(id, {state}),
   getPreviousPage,
   getNextPage,
   getFirstOfRow,
   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 const navigationManager = createNavigationManager({
   getFirst,
   getLast,
   getItem,
   getNext: getOffsetItem(1),
-  getNextRow: (id, {state}) => getOffsetItem(-state.columnCount)(id, {state}),
+  getNextRow: (id, {state}) => getOffsetItem(state.columnCount)(id, {state}),
   getPrevious: getOffsetItem(-1),
-  getPreviousRow: (id, {state}) => getOffsetItem(state.columnCount)(id, {state}),
+  getPreviousRow: (id, {state}) => getOffsetItem(-state.columnCount)(id, {state}),
   getPreviousPage,
   getNextPage,
   getFirstOfRow,
@@ -229,9 +298,7 @@ export const 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
@@ -247,6 +314,7 @@ export const useCursorListModel = createModelHook({
   const initialCurrentRef = React.useRef(
     config.initialCursorId || (config.items?.length ? getId(config.items![0]) : '')
   );
+  const navigation = config.navigation;
 
   const state = {
     ...list.state,
@@ -255,10 +323,10 @@ export const useCursorListModel = createModelHook({
     /**
      * 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,
   };
-  const navigation = config.navigation || wrappingNavigationManager;
 
   const events = {
     ...list.events,

package/collection/lib/useGridModel.ts

@@ -0,0 +1,34 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {navigationManager} from './useCursorListModel';
+import {useListModel} from './useListModel';
+
+const {columnCount, orientation, ...defaultConfig} = useListModel.defaultConfig;
+
+export const useGridModel = createModelHook({
+  defaultConfig: {
+    ...defaultConfig,
+    /**
+     * Controls the state changes when the user sends navigation events to the model. For example,
+     * when the user hits the "right" arrow, a behavior hook will determine directionality
+     * (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 stop when the end of a row/column is detected. For example,
+     * `getNext` will return the same item the cursor was previously on if the cursor is on the last
+     * item of a row.
+     */
+    navigation: navigationManager,
+  },
+  requiredConfig: {
+    /**
+     * The number of columns represented in a grid
+     */
+    columnCount: 1,
+    ...useListModel.requiredConfig,
+  },
+  contextOverride: useListModel.Context,
+})(config => {
+  const list = useListModel(config);
+
+  return list;
+});

package/collection/lib/useListItemRovingFocus.tsx

@@ -103,10 +103,12 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
         if (event.ctrlKey) {
           for (const key in ctrlKeyMap) {
             if (hasOwnKey(ctrlKeyMap, key)) {
-              keyDownRef.current = true;
-              events[ctrlKeyMap[key]]?.();
-              event.preventDefault();
-              return;
+              if (event.key === key) {
+                keyDownRef.current = true;
+                events[ctrlKeyMap[key]]?.();
+                event.preventDefault();
+                return;
+              }
             }
           }
         }

package/dist/commonjs/action-bar/lib/ActionBarList.d.ts

@@ -13,64 +13,6 @@ export interface ActionBarListProps<T = unknown> extends Partial<ExtractProps<ty
      */
     children: ((item: T) => React.ReactNode) | React.ReactNode;
 }
-export declare const useActionBarList: <P extends {}, R>(model: {
-    state: {
-        selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
-        unselectedIds: string[];
-        cursorId: string;
-        columnCount: number;
-        UNSTABLE_virtual: {
-            virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
-            totalSize: number;
-            scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
-            scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
-            measure: () => void;
-        };
-        UNSTABLE_defaultItemHeight: number;
-        containerRef: React.RefObject<HTMLDivElement>;
-        id: string;
-        orientation: import("../../collection/lib/useBaseListModel").Orientation;
-        indexRef: React.MutableRefObject<number>;
-        nonInteractiveIds: string[];
-        isVirtualized: boolean;
-        items: import("../../collection").Item<any>[];
-    };
-    events: {
-        select(data: {
-            id: string;
-        }): void;
-        selectAll(): void;
-        unselectAll(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
-        goTo(data: {
-            id: string;
-        }): void;
-        goToNext(): void;
-        goToPrevious(): void;
-        goToPreviousRow(): void;
-        goToNextRow(): void;
-        goToFirst(): void;
-        goToLast(): void;
-        goToFirstOfRow(): void;
-        goToLastOfRow(): void;
-        goToNextPage(): void;
-        goToPreviousPage(): void;
-        unregisterItem(data: {
-            id: string;
-        }): void;
-        updateItemHeight(data: {
-            value: number;
-        }): void;
-    };
-    selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
-    navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
-    getId: (item: any) => string;
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
 export declare const ActionBarList: import("../../common").ElementComponentM<"div", ActionBarListProps<unknown>, {
     state: {
         hiddenIds: string[];

package/dist/commonjs/action-bar/lib/ActionBarList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAWxD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,OAAO,CAC7C,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC;IACnD;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5D;AAWD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAiE,CAAC;AAE/F,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAC"}
+{"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAOxD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,OAAO,CAC7C,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC;IACnD;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5D;AAWD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAC"}

package/dist/commonjs/action-bar/lib/ActionBarList.js

@@ -41,7 +41,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionBarList = exports.useActionBarList = void 0;
+exports.ActionBarList = void 0;
 var React = __importStar(require("react"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var common_1 = require("@workday/canvas-kit-react/common");
@@ -61,11 +61,10 @@ var ResponsiveHStack = common_1.styled(layout_1.HStack)(function (_a) {
         },
         _b);
 });
-exports.useActionBarList = common_1.composeHooks(collection_1.useOverflowListMeasure, collection_1.useListResetCursorOnBlur);
 exports.ActionBarList = common_1.createSubcomponent('div')({
     displayName: 'ActionBar.List',
     modelHook: useActionBarModel_1.useActionBarModel,
-    elemPropsHook: exports.useActionBarList,
+    elemPropsHook: collection_1.useOverflowListMeasure,
 })(function (_a, Element, model) {
     var children = _a.children, elemProps = __rest(_a, ["children"]);
     return (React.createElement(ResponsiveHStack, __assign({ as: Element, spacing: "s", depth: 1, background: tokens_1.commonColors.background, borderTop: "solid 1px " + tokens_1.colors.soap400, padding: tokens_1.space.s + " " + tokens_1.space.xl + " ", position: "fixed", bottom: 0, left: 0, right: 0 }, elemProps),

package/dist/commonjs/collection/index.d.ts

@@ -9,6 +9,8 @@ export * from './lib/useListResetCursorOnBlur';
 export * from './lib/useListItemRovingFocus';
 export * from './lib/useListItemSelect';
 export * from './lib/useListModel';
+export * from './lib/useGridModel';
 export { ListBox } from './lib/ListBox';
 export { singleSelectionManager, multiSelectionManager, isSelected, } from './lib/useSelectionListModel';
+export { wrappingNavigationManager, navigationManager } from './lib/useCursorListModel';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/collection/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../collection/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAC1D,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AACtC,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,UAAU,GACX,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../collection/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAC1D,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AACtC,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,UAAU,GACX,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,yBAAyB,EAAE,iBAAiB,EAAC,MAAM,0BAA0B,CAAC"}

package/dist/commonjs/collection/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isSelected = exports.multiSelectionManager = exports.singleSelectionManager = exports.ListBox = exports.defaultGetId = void 0;
+exports.navigationManager = exports.wrappingNavigationManager = exports.isSelected = exports.multiSelectionManager = exports.singleSelectionManager = exports.ListBox = exports.defaultGetId = void 0;
 var useBaseListModel_1 = require("./lib/useBaseListModel");
 Object.defineProperty(exports, "defaultGetId", { enumerable: true, get: function () { return useBaseListModel_1.defaultGetId; } });
 __exportStar(require("./lib/useListItemRegister"), exports);
@@ -23,9 +23,13 @@ __exportStar(require("./lib/useListResetCursorOnBlur"), exports);
 __exportStar(require("./lib/useListItemRovingFocus"), exports);
 __exportStar(require("./lib/useListItemSelect"), exports);
 __exportStar(require("./lib/useListModel"), exports);
+__exportStar(require("./lib/useGridModel"), exports);
 var ListBox_1 = require("./lib/ListBox");
 Object.defineProperty(exports, "ListBox", { enumerable: true, get: function () { return ListBox_1.ListBox; } });
 var useSelectionListModel_1 = require("./lib/useSelectionListModel");
 Object.defineProperty(exports, "singleSelectionManager", { enumerable: true, get: function () { return useSelectionListModel_1.singleSelectionManager; } });
 Object.defineProperty(exports, "multiSelectionManager", { enumerable: true, get: function () { return useSelectionListModel_1.multiSelectionManager; } });
 Object.defineProperty(exports, "isSelected", { enumerable: true, get: function () { return useSelectionListModel_1.isSelected; } });
+var useCursorListModel_1 = require("./lib/useCursorListModel");
+Object.defineProperty(exports, "wrappingNavigationManager", { enumerable: true, get: function () { return useCursorListModel_1.wrappingNavigationManager; } });
+Object.defineProperty(exports, "navigationManager", { enumerable: true, get: function () { return useCursorListModel_1.navigationManager; } });

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

@@ -142,7 +142,7 @@ exports.useBaseListModel = common_1.createModelHook({
                 return items.concat({
                     id: getId(data.item),
                     value: data.item,
-                    index: items.length - 1,
+                    index: items.length,
                     textValue: data.textValue,
                 });
             });