@workday/canvas-kit-react 7.0.0-alpha.106-next.2 → 7.0.0-alpha.129-next.3

package/dist/commonjs/checkbox/lib/Checkbox.js

@@ -44,7 +44,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = __importStar(require("@workday/canvas-kit-react/tokens"));
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var icon_1 = require("@workday/canvas-kit-react/icon");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var checkboxHeight = 18;
@@ -79,55 +79,70 @@ var CheckboxRipple = common_1.styled('span')({
     width: checkboxWidth,
     position: 'absolute',
     pointerEvents: 'none',
-    zIndex: -1,
+}, function (_a) {
+    var variant = _a.variant;
+    return ({
+        opacity: variant === 'inverse' ? '0.4' : '1',
+    });
 });
 /**
  * Note: `~ div:first-of-type` refers to `CheckboxBackground`
  * and was easier to use than a component selector in this case.
  */
 var CheckboxInput = common_1.styled('input')(function (_a) {
-    var _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline;
+    var _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline, variant = _a.variant;
     return (__assign({ borderRadius: tokens_1.borderRadius.s, width: checkboxTapArea, height: checkboxTapArea, margin: 0, marginTop: '-3px', marginLeft: '-3px', position: 'absolute', opacity: 0, '&:not(:disabled)': {
             cursor: 'pointer',
         }, 
         // States
         '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
             '~ div:first-of-type': {
-                borderColor: tokens_1.inputColors.hoverBorder,
+                borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.hoverBorder,
             },
         }, '&:checked ~ div:first-of-type': {
-            borderColor: themePrimary.main,
-            backgroundColor: themePrimary.main,
+            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.main,
+            backgroundColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
         }, '&:disabled ~ div:first-of-type': {
             borderColor: tokens_1.inputColors.disabled.border,
-            backgroundColor: tokens_1.inputColors.disabled.background,
+            backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.disabled.background,
+            opacity: variant === 'inverse' ? '.4' : '1',
         }, '&:disabled:checked ~ div:first-of-type': {
-            borderColor: themePrimary.light,
-            backgroundColor: themePrimary.light,
+            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
+            backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
         }, 
         // Focus
         '&:focus, &:active': {
             outline: 'none',
-        }, '&:focus ~ div:first-of-type': {
-            borderColor: themePrimary.main,
-            borderWidth: '2px',
-            boxShadow: 'none',
-        }, '&:checked:focus ~ div:first-of-type': __assign(__assign({}, common_1.focusRing({ width: 2, separation: 2, animate: false, outerColor: themeFocusOutline })), { '& span': {
+        }, '&:focus ~ div:first-of-type': __assign({ borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themePrimary.main, borderWidth: '2px', boxShadow: 'none' }, common_1.focusRing({
+            width: variant === 'inverse' ? 2 : 0,
+            separation: 0,
+            animate: false,
+            innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
+            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : undefined,
+        })), '&:checked:focus ~ div:first-of-type': __assign(__assign({}, common_1.focusRing({
+            width: 2,
+            separation: 2,
+            animate: false,
+            innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
+            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
+        })), { borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main, borderWidth: '2px', '& span': {
                 marginLeft: '-7px',
             } }) }, common_1.mouseFocusBehavior({
         '&:focus ~ div:first-of-type': {
-            border: "1px solid " + tokens_1.inputColors.hoverBorder,
+            border: variant === 'inverse'
+                ? "1px solid " + tokens_1.colors.soap300
+                : "1px solid " + tokens_1.inputColors.hoverBorder,
             boxShadow: 'none',
             '& span': {
                 marginLeft: '-6px',
             },
         },
         '&:checked ~ div:first-of-type': {
-            borderColor: themePrimary.main,
+            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.main,
         },
         '&:disabled:checked ~ div:first-of-type': {
             borderColor: themePrimary.light,
-            backgroundColor: themePrimary.light,
+            backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
         },
     })));
 }, function (_a) {
@@ -138,36 +153,35 @@ var CheckboxInput = common_1.styled('input')(function (_a) {
         },
     });
 }, function (_a) {
-    var theme = _a.theme, error = _a.error;
+    var theme = _a.theme, error = _a.error, variant = _a.variant;
     var errorColors = common_1.getErrorColors(error, theme);
     if (errorColors.outer === errorColors.inner) {
         errorColors.outer = 'transparent';
     }
     var errorStyles = {
         '& ~ div:first-of-type': {
-            border: "1px solid " + errorColors.inner,
+            border: variant === 'inverse' ? "1px solid " + tokens_1.colors.soap300 : "1px solid " + errorColors.inner,
             boxShadow: "0 0 0 1px " + errorColors.inner + ", 0 0 0 2px " + errorColors.outer,
         },
         '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
             '~ div:first-of-type': {
-                borderColor: errorColors.inner,
+                borderColor: variant === 'inverse' ? "1px solid " + tokens_1.colors.soap300 : errorColors.inner,
             },
         },
         '&:checked ~ div:first-of-type': {
-            borderColor: theme.canvas.palette.primary.main,
-            boxShadow: "\n            0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n            0 0 0 4px " + errorColors.inner + ",\n            0 0 0 5px " + errorColors.outer,
+            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : theme.canvas.palette.primary.main,
+            boxShadow: "\n              0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n              0 0 0 4px " + errorColors.inner + ",\n              0 0 0 5px " + errorColors.outer,
         },
     };
-    return __assign(__assign({}, errorStyles), common_1.mouseFocusBehavior(__assign(__assign({}, errorStyles), { '&:not(:checked):focus ~ div:first-of-type': {
+    return __assign(__assign({}, common_1.mouseFocusBehavior(__assign(__assign({}, errorStyles), { '&:not(:checked):focus ~ div:first-of-type': {
             border: "1px solid " + errorColors.inner,
             boxShadow: "0 0 0 1px " + errorColors.inner + ", 0 0 0 2px " + errorColors.outer,
-        } })));
+        } }))), errorStyles);
 });
 var CheckboxBackground = common_1.styled('div')({
     alignItems: 'center',
     backgroundColor: tokens_1.colors.frenchVanilla100,
     borderRadius: tokens_1.borderRadius.s,
-    border: '1px solid ' + tokens_1.inputColors.border,
     boxSizing: 'border-box',
     display: 'flex',
     height: checkboxHeight,
@@ -177,6 +191,11 @@ var CheckboxBackground = common_1.styled('div')({
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
     width: checkboxWidth,
+}, function (_a) {
+    var variant = _a.variant;
+    return ({
+        border: "1px solid " + (variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.border),
+    });
 });
 var CheckboxCheck = common_1.styled('div')({
     display: 'flex',
@@ -205,14 +224,24 @@ var IndeterminateBox = common_1.styled('div')({
     width: '10px',
     height: '2px',
 }, function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, variant = _a.variant;
     return ({
-        backgroundColor: theme.canvas.palette.primary.contrast,
+        backgroundColor: variant === 'inverse'
+            ? theme.canvas.palette.primary.main
+            : theme.canvas.palette.primary.contrast,
     });
 });
-var CheckboxLabel = common_1.styled('label')(__assign(__assign({}, tokens_1.default.type.levels.subtext.large), { paddingLeft: checkboxLabelDistance }), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? { color: tokens_1.inputColors.disabled.text } : { cursor: 'pointer' });
+var CheckboxLabel = common_1.styled('label')(__assign(__assign({}, tokens_1.canvas.type.levels.subtext.large), { paddingLeft: checkboxLabelDistance }), function (_a) {
+    var variant = _a.variant;
+    return (variant === 'inverse' ? { color: tokens_1.colors.frenchVanilla100 } : undefined);
+}, function (_a) {
+    var disabled = _a.disabled, variant = _a.variant;
+    return disabled
+        ? {
+            color: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : tokens_1.inputColors.disabled.text,
+            opacity: variant === 'inverse' ? '.4' : '1',
+        }
+        : { cursor: 'pointer' };
 });
 exports.Checkbox = common_1.createComponent('input')({
     displayName: 'Checkbox',
@@ -223,18 +252,19 @@ exports.Checkbox = common_1.createComponent('input')({
         _d = _a.theme, 
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _d === void 0 ? common_1.useTheme() : _d, id = _a.id, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, error = _a.error, indeterminate = _a.indeterminate, elemProps = __rest(_a, ["checked", "label", "theme", "id", "disabled", "onChange", "value", "error", "indeterminate"]);
+        theme = _d === void 0 ? common_1.useTheme() : _d, id = _a.id, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, error = _a.error, indeterminate = _a.indeterminate, variant = _a.variant, elemProps = __rest(_a, ["checked", "label", "theme", "id", "disabled", "onChange", "value", "error", "indeterminate", "variant"]);
         var inputId = common_1.useUniqueId(id);
         return (React.createElement(CheckboxContainer, null,
             React.createElement(CheckboxInputWrapper, { disabled: disabled },
-                React.createElement(CheckboxInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, type: "checkbox", value: value, error: error, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
-                React.createElement(CheckboxRipple, null),
-                React.createElement(CheckboxBackground, { checked: checked, disabled: disabled },
-                    React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, null)) : (React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, color: theme.canvas.palette.primary.contrast }))))),
-            label && (React.createElement(CheckboxLabel, { htmlFor: inputId, disabled: disabled }, label))));
+                React.createElement(CheckboxInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, type: "checkbox", value: value, error: error, variant: variant, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
+                React.createElement(CheckboxRipple, { variant: variant }),
+                React.createElement(CheckboxBackground, { variant: variant, checked: checked, disabled: disabled },
+                    React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : (React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, color: variant === 'inverse'
+                            ? theme.canvas.palette.primary.main
+                            : theme.canvas.palette.primary.contrast }))))),
+            label && (React.createElement(CheckboxLabel, { variant: variant, htmlFor: inputId, disabled: disabled }, label))));
     },
     subComponents: {
         ErrorType: common_1.ErrorType,
     },
 });
-exports.default = exports.Checkbox;

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/ListBox.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '@workday/canvas-kit-react/layout';
-export interface ListBoxProps extends BoxProps {
+export interface ListBoxProps extends Omit<BoxProps, 'children'> {
     children?: React.ReactNode | ((item: any) => React.ReactNode);
 }
 export declare const ListBoxItem: import("../../common").ElementComponentM<"li", BoxProps, {

package/dist/commonjs/collection/lib/ListBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../collection/lib/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAM/D,MAAM,WAAW,YAAa,SAAQ,QAAQ;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC/D;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMtB,CAAC;AAWH;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKhB;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBL,CAAC"}
+{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../collection/lib/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAM/D,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC/D;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMtB,CAAC;AAWH;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKhB;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBL,CAAC"}

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,
                 });
             });