@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

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

@@ -1,23 +1,12 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCursorListModel = exports.navigationManager = exports.wrappingNavigationManager = exports.getOffsetItem = exports.getWrappingOffsetItem = exports.getNextPage = exports.getPreviousPage = exports.getLastOfRow = exports.getFirstOfRow = exports.getLast = exports.getFirst = exports.createNavigationManager = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useBaseListModel_1 = require("./useBaseListModel");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useBaseListModel_1 = require("./useBaseListModel");
 /**
  * Factory function that does type checking to create navigation managers. Navigation managers
  * are expected to handle all methods of a grid. If your use-case isn't meant to handle a grid,
@@ -35,101 +24,88 @@ var useBaseListModel_1 = require("./useBaseListModel");
  * })
  * ```
  */
-var createNavigationManager = function (manager) { return manager; };
+const createNavigationManager = (manager) => manager;
 exports.createNavigationManager = createNavigationManager;
 /**
  * Get the first item in a list regardless of column count
  */
-var getFirst = function (_, _a) {
-    var state = _a.state;
-    return state.items[0];
-};
+const getFirst = (_, { state }) => state.items[0];
 exports.getFirst = getFirst;
 /**
  * Get the last item in a list regardless of column count
  */
-var getLast = function (_, _a) {
-    var state = _a.state;
-    return state.items[state.items.length - 1];
-};
+const getLast = (_, { state }) => state.items[state.items.length - 1];
 exports.getLast = getLast;
 /**
  * Get the first item in a row. If column count is 0, it will return the results of `getFirst`
  */
-var getFirstOfRow = function (id, _a) {
-    var state = _a.state;
+const getFirstOfRow = (id, { state }) => {
     if (state.columnCount) {
-        var item = getItem(id, { state: state });
-        var currentIndex = item.index;
-        var offset = currentIndex % state.columnCount;
+        const item = getItem(id, { state });
+        const currentIndex = item.index;
+        const offset = currentIndex % state.columnCount;
         return state.items[currentIndex - offset];
     }
-    return exports.getFirst(id, { state: state });
+    return exports.getFirst(id, { state });
 };
 exports.getFirstOfRow = getFirstOfRow;
 /**
  * get the last item in a row - if column count is 0, it will return the results of `getLast`
  */
-var getLastOfRow = function (id, _a) {
-    var state = _a.state;
+const getLastOfRow = (id, { state }) => {
     if (state.columnCount) {
-        var item = getItem(id, { state: state });
-        var currentIndex = item.index;
-        var offset = (currentIndex % state.columnCount) - state.columnCount + 1;
-        var nextIndex = currentIndex - offset;
+        const item = getItem(id, { state });
+        const currentIndex = item.index;
+        const offset = (currentIndex % state.columnCount) - state.columnCount + 1;
+        let nextIndex = currentIndex - offset;
         if (nextIndex >= state.items.length) {
             nextIndex = state.items.length - 1;
         }
         return state.items[nextIndex];
     }
-    return exports.getLast(id, { state: state });
+    return exports.getLast(id, { state });
 };
 exports.getLastOfRow = getLastOfRow;
 /**
  * get the item in the previous page. This can be author defined. By default it will return the
  * first item for a list, and the first item in the same column for a grid.
  */
-var getPreviousPage = function (id, _a) {
-    var state = _a.state;
+const getPreviousPage = (id, { state }) => {
     if (state.columnCount) {
-        var item = getItem(id, { state: state });
-        var currentIndex = item.index;
+        const item = getItem(id, { state });
+        const currentIndex = item.index;
         return state.items[currentIndex % state.columnCount];
     }
-    return exports.getFirst(id, { state: state });
+    return exports.getFirst(id, { state });
 };
 exports.getPreviousPage = getPreviousPage;
 /**
  * get the item in the next page. This can be author defined. By default, it will return the last
  * item for a list, and the last item in the same column for a grid.
  */
-var getNextPage = function (id, _a) {
-    var state = _a.state;
+const getNextPage = (id, { state }) => {
     if (state.columnCount) {
-        var item = getItem(id, { state: state });
-        var currentIndex = item.index;
-        var lastRowIndex = state.items.length - state.columnCount;
+        const item = getItem(id, { state });
+        const currentIndex = item.index;
+        const lastRowIndex = state.items.length - state.columnCount;
         return state.items[lastRowIndex + (currentIndex % state.columnCount)];
     }
-    return exports.getLast(id, { state: state });
+    return exports.getLast(id, { state });
 };
 exports.getNextPage = getNextPage;
-var getItem = function (id, _a) {
-    var state = _a.state;
-    var item = id ? state.items.find(function (item) { return useBaseListModel_1.defaultGetId(item) === id; }) : exports.getFirst(id, { state: state }); // no id, return first item
-    common_1.assert(item, "Item not found: " + id);
+const getItem = (id, { state }) => {
+    const item = id ? state.items.find(item => useBaseListModel_1.defaultGetId(item) === id) : exports.getFirst(id, { state }); // no id, return first item
+    common_1.assert(item, `Item not found: ${id}`);
     return item;
 };
-var getWrappingOffsetItem = function (offset) { return function (id, _a, tries) {
-    var state = _a.state;
-    if (tries === void 0) { tries = state.items.length; }
-    var items = state.items;
-    var item = getItem(id, { state: state });
-    var currentIndex = item.index;
-    var nextIndex = currentIndex + offset;
+const getWrappingOffsetItem = (offset) => (id, { state }, tries = state.items.length) => {
+    const items = state.items;
+    const item = getItem(id, { state });
+    const currentIndex = item.index;
+    let 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;
+    const rows = Math.ceil(items.length / state.columnCount);
+    const idealLength = rows * state.columnCount;
     if (nextIndex < 0) {
         if (offset === -1) {
             // if the offset is -1, we want to wrap to the end
@@ -163,23 +139,21 @@ var getWrappingOffsetItem = function (offset) { return function (id, _a, tries)
     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.
         // Avoid an infinite loop with `tries`
-        return exports.getWrappingOffsetItem(offset)(useBaseListModel_1.defaultGetId(items[nextIndex]), { state: state }, tries - 1);
+        return exports.getWrappingOffsetItem(offset)(useBaseListModel_1.defaultGetId(items[nextIndex]), { state }, tries - 1);
     }
     return items[nextIndex];
-}; };
+};
 exports.getWrappingOffsetItem = getWrappingOffsetItem;
-var getOffsetItem = function (offset) { return function (id, _a, tries) {
-    var state = _a.state;
-    if (tries === void 0) { tries = state.items.length; }
-    var items = state.items, columnCount = state.columnCount;
-    var item = getItem(id, { state: state });
-    var currentIndex = item.index;
-    var nextIndex = currentIndex + offset;
+const getOffsetItem = (offset) => (id, { state }, tries = state.items.length) => {
+    const { items, columnCount } = state;
+    const item = getItem(id, { state });
+    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
-        var currentIndexInRow = currentIndex % columnCount;
-        var nextIndexInRow = nextIndex - currentIndex + currentIndexInRow;
+        const currentIndexInRow = currentIndex % columnCount;
+        const nextIndexInRow = nextIndex - currentIndex + currentIndexInRow;
         if (nextIndexInRow >= columnCount || nextIndexInRow < 0) {
             nextIndex = currentIndex;
         }
@@ -187,7 +161,7 @@ var getOffsetItem = function (offset) { return function (id, _a, tries) {
     else if (columnCount) {
         // if we're here, there's a column count, but the offset will move into another row. We need to
         // bound to row values
-        var nextRow = Math.floor(nextIndex / columnCount);
+        const nextRow = Math.floor(nextIndex / columnCount);
         if (nextRow < 0 || nextRow >= columnCount) {
             nextIndex = currentIndex;
         }
@@ -206,10 +180,10 @@ var getOffsetItem = function (offset) { return function (id, _a, tries) {
     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.
         // Avoid an infinite loop with `tries`
-        return exports.getOffsetItem(offset)(useBaseListModel_1.defaultGetId(items[nextIndex]), { state: state }, tries - 1);
+        return exports.getOffsetItem(offset)(useBaseListModel_1.defaultGetId(items[nextIndex]), { state }, tries - 1);
     }
     return items[nextIndex];
-}; };
+};
 exports.getOffsetItem = getOffsetItem;
 /**
  * The default navigation manager of lists. This navigation manager will wrap around when the edge
@@ -219,17 +193,11 @@ exports.getOffsetItem = getOffsetItem;
 exports.wrappingNavigationManager = exports.createNavigationManager({
     getFirst: exports.getFirst,
     getLast: exports.getLast,
-    getItem: getItem,
+    getItem,
     getNext: exports.getWrappingOffsetItem(1),
-    getNextRow: function (id, _a) {
-        var state = _a.state;
-        return exports.getWrappingOffsetItem(state.columnCount)(id, { state: state });
-    },
+    getNextRow: (id, { state }) => exports.getWrappingOffsetItem(state.columnCount)(id, { state }),
     getPrevious: exports.getWrappingOffsetItem(-1),
-    getPreviousRow: function (id, _a) {
-        var state = _a.state;
-        return exports.getWrappingOffsetItem(-state.columnCount)(id, { state: state });
-    },
+    getPreviousRow: (id, { state }) => exports.getWrappingOffsetItem(-state.columnCount)(id, { state }),
     getPreviousPage: exports.getPreviousPage,
     getNextPage: exports.getNextPage,
     getFirstOfRow: exports.getFirstOfRow,
@@ -242,17 +210,11 @@ exports.wrappingNavigationManager = exports.createNavigationManager({
 exports.navigationManager = exports.createNavigationManager({
     getFirst: exports.getFirst,
     getLast: exports.getLast,
-    getItem: getItem,
+    getItem,
     getNext: exports.getOffsetItem(1),
-    getNextRow: function (id, _a) {
-        var state = _a.state;
-        return exports.getOffsetItem(state.columnCount)(id, { state: state });
-    },
+    getNextRow: (id, { state }) => exports.getOffsetItem(state.columnCount)(id, { state }),
     getPrevious: exports.getOffsetItem(-1),
-    getPreviousRow: function (id, _a) {
-        var state = _a.state;
-        return exports.getOffsetItem(-state.columnCount)(id, { state: state });
-    },
+    getPreviousRow: (id, { state }) => exports.getOffsetItem(-state.columnCount)(id, { state }),
     getPreviousPage: exports.getPreviousPage,
     getNextPage: exports.getNextPage,
     getFirstOfRow: exports.getFirstOfRow,
@@ -264,16 +226,17 @@ exports.navigationManager = exports.createNavigationManager({
  * has focus within the list. Many w3c list role types specify a single tab stop within the list.
  */
 exports.useCursorListModel = common_1.createModelHook({
-    defaultConfig: __assign(__assign({}, useBaseListModel_1.useBaseListModel.defaultConfig), { 
+    defaultConfig: {
+        ...useBaseListModel_1.useBaseListModel.defaultConfig,
         /**
          * Initial cursor position. If not provided, the cursor will point to the first item in the list
          */
-        initialCursorId: '', 
+        initialCursorId: '',
         /**
          * If this is set it will cause a wrapping of a list that will turn it into a grid
          * @default 0
          */
-        columnCount: 0, 
+        columnCount: 0,
         /**
          * 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
@@ -286,30 +249,34 @@ exports.useCursorListModel = common_1.createModelHook({
          * to screen reader users. This would require the overflow menu to accept both up/down keys as
          * well as left/right keys to give a more consistent experience to all users.
          */
-        navigation: exports.wrappingNavigationManager }),
+        navigation: exports.wrappingNavigationManager,
+    },
     requiredConfig: useBaseListModel_1.useBaseListModel.requiredConfig,
-})(function (config) {
+})(config => {
     var _a;
-    var _b = react_1.default.useState(config.initialCursorId), cursorId = _b[0], setCursorId = _b[1];
-    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(list.state.items[0]) : ''));
-    var navigation = config.navigation;
-    var state = __assign(__assign({}, list.state), { 
+    const [cursorId, setCursorId] = react_1.default.useState(config.initialCursorId);
+    const columnCount = config.columnCount || 0;
+    const list = useBaseListModel_1.useBaseListModel(config);
+    const initialCurrentRef = react_1.default.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? useBaseListModel_1.defaultGetId(list.state.items[0]) : ''));
+    const navigation = config.navigation;
+    const state = {
+        ...list.state,
         /** The id of the list item the cursor is pointing to */
-        cursorId: 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 events = __assign(__assign({}, list.events), { 
+        columnCount,
+    };
+    const events = {
+        ...list.events,
         /**
          * Register an item to the list. Takes in an identifier, a React.Ref and an optional index. This
          * should be called on component mount
          */
-        registerItem: function (data) {
+        registerItem(data) {
             // point the cursor at the first item
             if (!initialCurrentRef.current) {
                 initialCurrentRef.current = useBaseListModel_1.defaultGetId(data.item);
@@ -318,7 +285,7 @@ exports.useCursorListModel = common_1.createModelHook({
             list.events.registerItem(data);
         },
         /** Directly sets the cursor to the list item by its identifier. */
-        goTo: function (data) {
+        goTo(data) {
             setCursorId(data.id);
         },
         /**
@@ -327,15 +294,15 @@ exports.useCursorListModel = common_1.createModelHook({
          * currently on the last item. For a grid, the default navigation manager will stay on the last
          * item in a row.
          */
-        goToNext: function () {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getNext(state.cursorId, { state: state })));
+        goToNext() {
+            setCursorId(useBaseListModel_1.defaultGetId(navigation.getNext(state.cursorId, { state })));
         },
         /**
          * Set the cursor to the "previous" item in the list. If the beginning of the list is detected,
          * it will wrap to the last item
          */
-        goToPrevious: function () {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getPrevious(state.cursorId, { state: state })));
+        goToPrevious() {
+            setCursorId(useBaseListModel_1.defaultGetId(navigation.getPrevious(state.cursorId, { state })));
         },
         /**
          * Previous item perpendicular to the orientation of a list, or the previous row in a grid. For
@@ -343,9 +310,9 @@ exports.useCursorListModel = common_1.createModelHook({
          * be ignored by the navigation manager, or return the same result as `previous()`. In a grid,
          * this would be the previous row (current position - column count).
          */
-        goToPreviousRow: function () {
+        goToPreviousRow() {
             setCursorId(useBaseListModel_1.defaultGetId(navigation.getPreviousRow(state.cursorId, {
-                state: state,
+                state,
             })));
         },
         /**
@@ -354,30 +321,31 @@ exports.useCursorListModel = common_1.createModelHook({
          * the navigation manager, or return the same result as `next()`. In a grid, this would be the
          * next row (current position + column count).
          */
-        goToNextRow: function () {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getNextRow(state.cursorId, { state: state })));
+        goToNextRow() {
+            setCursorId(useBaseListModel_1.defaultGetId(navigation.getNextRow(state.cursorId, { state })));
         },
         /** Set the cursor to the first item in the list */
-        goToFirst: function () {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getFirst(state.cursorId, { state: state })));
+        goToFirst() {
+            setCursorId(useBaseListModel_1.defaultGetId(navigation.getFirst(state.cursorId, { state })));
         },
         /** Set the cursor to the last item in the list */
-        goToLast: function () {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getLast(state.cursorId, { state: state })));
+        goToLast() {
+            setCursorId(useBaseListModel_1.defaultGetId(navigation.getLast(state.cursorId, { state })));
         },
-        goToFirstOfRow: function () {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getFirstOfRow(state.cursorId, { state: state })));
+        goToFirstOfRow() {
+            setCursorId(useBaseListModel_1.defaultGetId(navigation.getFirstOfRow(state.cursorId, { state })));
         },
-        goToLastOfRow: function () {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getLastOfRow(state.cursorId, { state: state })));
+        goToLastOfRow() {
+            setCursorId(useBaseListModel_1.defaultGetId(navigation.getLastOfRow(state.cursorId, { state })));
         },
-        goToNextPage: function () {
-            setCursorId(useBaseListModel_1.defaultGetId(navigation.getNextPage(state.cursorId, { state: state })));
+        goToNextPage() {
+            setCursorId(useBaseListModel_1.defaultGetId(navigation.getNextPage(state.cursorId, { state })));
         },
-        goToPreviousPage: function () {
+        goToPreviousPage() {
             setCursorId(useBaseListModel_1.defaultGetId(navigation.getPreviousPage(state.cursorId, {
-                state: state,
+                state,
             })));
-        } });
-    return __assign(__assign({}, list), { state: state, events: events, navigation: navigation });
+        },
+    };
+    return { ...list, state, events, navigation };
 });

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

@@ -1,38 +1,17 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGridModel = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var useCursorListModel_1 = require("./useCursorListModel");
-var useListModel_1 = require("./useListModel");
-var _a = useListModel_1.useListModel.defaultConfig, columnCount = _a.columnCount, orientation = _a.orientation, defaultConfig = __rest(_a, ["columnCount", "orientation"]);
+const common_1 = require("@workday/canvas-kit-react/common");
+const useCursorListModel_1 = require("./useCursorListModel");
+const useListModel_1 = require("./useListModel");
+const { columnCount, orientation, ...defaultConfig } = useListModel_1.useListModel.defaultConfig;
 /**
  * The Grid model extends the `ListModel` and changes some config. For example, the `columnCount` is
  * required on the grid model's configuration and `orientation` is removed.
  */
 exports.useGridModel = common_1.createModelHook({
-    defaultConfig: __assign(__assign({}, defaultConfig), { 
+    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
@@ -43,14 +22,17 @@ exports.useGridModel = common_1.createModelHook({
          * `getNext` will return the same item the cursor was previously on if the cursor is on the last
          * item of a row.
          */
-        navigation: useCursorListModel_1.navigationManager }),
-    requiredConfig: __assign({ 
+        navigation: useCursorListModel_1.navigationManager,
+    },
+    requiredConfig: {
         /**
          * The number of columns represented in a grid
          */
-        columnCount: 1 }, useListModel_1.useListModel.requiredConfig),
+        columnCount: 1,
+        ...useListModel_1.useListModel.requiredConfig,
+    },
     contextOverride: useListModel_1.useListModel.Context,
-})(function (config) {
-    var list = useListModel_1.useListModel(config);
+})(config => {
+    const list = useListModel_1.useListModel(config);
     return list;
 });

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

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListItemRegister = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useListModel_1 = require("./useListModel");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useListModel_1 = require("./useListModel");
 /**
  * This elemProps hook is the base of all item component hooks. It registers an item with a
  * collection and sets the `data-id` that is used by other hooks. It should always be the last
@@ -20,22 +20,20 @@ var useListModel_1 = require("./useListModel");
  * );
  * ```
  */
-exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useListModel)(function (_a, ref, elemProps) {
-    var _b, _c, _d;
-    var state = _a.state, events = _a.events, getId = _a.getId;
-    if (elemProps === void 0) { elemProps = {}; }
-    var _e = react_1.default.useState(elemProps['data-id'] || ((_b = elemProps.item) === null || _b === void 0 ? void 0 : _b.id) || ''), localId = _e[0], setLocalId = _e[1];
-    var _f = common_1.useLocalRef(common_1.useForkRef(ref, (_c = elemProps.virtual) === null || _c === void 0 ? void 0 : _c.measureRef)), localRef = _f.localRef, elementRef = _f.elementRef;
+exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useListModel)(({ state, events, getId }, ref, elemProps = {}) => {
+    var _a, _b, _c;
+    const [localId, setLocalId] = react_1.default.useState(elemProps['data-id'] || ((_a = elemProps.item) === null || _a === void 0 ? void 0 : _a.id) || '');
+    const { localRef, elementRef } = common_1.useLocalRef(common_1.useForkRef(ref, (_b = elemProps.virtual) === null || _b === void 0 ? void 0 : _b.measureRef));
     // if the list is virtual, force the correct styling. Without this, weird things happen...
-    var style = elemProps.virtual
+    const style = elemProps.virtual
         ? {
             position: 'absolute',
             top: 0,
             left: 0,
-            transform: "translateY(" + elemProps.virtual.start + "px)",
+            transform: `translateY(${elemProps.virtual.start}px)`,
         }
         : {};
-    common_1.useMountLayout(function () {
+    common_1.useMountLayout(() => {
         var _a, _b;
         if (((_a = elemProps.virtual) === null || _a === void 0 ? void 0 : _a.index) === 0 && ((_b = localRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) {
             // TODO: This update doesn't seem to be working correctly
@@ -45,11 +43,11 @@ exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useLis
         if (elemProps.item) {
             return;
         }
-        var defaultId = state.indexRef.current;
-        var itemId = localId || String(defaultId);
+        const defaultId = state.indexRef.current;
+        const itemId = localId || String(defaultId);
         // TODO: Better lookup that using `items.find`. We need a more generic collection to handle seeing if an item already exists
         // bail early if item already exists. This happens if items were already provided.
-        if (state.items.find(function (item) { return getId(item) === itemId; })) {
+        if (state.items.find(item => getId(item) === itemId)) {
             return;
         }
         events.registerItem({
@@ -59,7 +57,7 @@ exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useLis
             textValue: typeof elemProps.children === 'string' ? elemProps.children : '',
         });
         setLocalId(itemId);
-        return function () {
+        return () => {
             events.unregisterItem({ id: itemId });
         };
     });
@@ -69,8 +67,8 @@ exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useLis
         disabled: elemProps.disabled || state.nonInteractiveIds.includes(localId) ? true : undefined,
         item: null,
         virtual: null,
-        'aria-setsize': (_d = elemProps.virtual) === null || _d === void 0 ? void 0 : _d.size,
+        'aria-setsize': (_c = elemProps.virtual) === null || _c === void 0 ? void 0 : _c.size,
         'aria-posinset': elemProps.virtual ? elemProps.item.index + 1 : undefined,
-        style: style,
+        style,
     };
 });