@workday/canvas-kit-react 5.3.17 → 5.4.0-next.1

package/{ts3.5/dist/commonjs/tabs/lib/TabPanel.d.ts → dist/commonjs/tabs/lib/TabsPanel.d.ts}

@@ -1,29 +1,39 @@
-/** @jsx jsx */
-import React from 'react';
-import { TabsModel } from './useTabsModel';
-export interface TabPanelProps {
-    /**
-     * The contents of the TabPanel.
-     */
-    children: React.ReactNode;
-    /**
-     * The name of the tab. This name will be used in change events and for `initialTab`. Must match
-     * the `name` of the associated tab item. If this property is not provided, it will default to a
-     * string representation of the the zero-based index of the Tab when it was initialized.
-     */
-    name?: string;
-    /**
-     * Part of the ARIA specification for tabs. By default, all `tabpanel` elements have a `tabIndex`
-     * of `0` which makes the whole content area receive focus. If you have a focusable item near the
-     * top of the tab panel content area, you may set `tabIndex` to `undefined` to prevent the tab
-     * panel element from receiving focus. Only do this is a child of the tab panel can receive focus.
-     */
-    tabIndex?: number;
-    /**
-     * Optionally pass a model directly to this component. Default is to implicitly use the same
-     * model as the container component which uses React context. Only use this for advanced use-cases
-     */
-    model?: TabsModel;
-}
-export declare const TabPanel: import("../../common").ElementComponent<"div", TabPanelProps>;
-//# sourceMappingURL=TabPanel.d.ts.map
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-labs-react/common';
+import { TabsModel } from './useTabsModel';
+export interface TabPanelProps<T = unknown> extends ExtractProps<typeof Box, never> {
+    /**
+     * The contents of the TabPanel.
+     */
+    children: React.ReactNode;
+    /**
+     * The name of the tab. This name will be used in change events and for `initialTab`. Must match
+     * the `name` of the associated tab item. If this property is not provided, it will default to a
+     * string representation of the the zero-based index of the Tab when it was initialized.
+     */
+    name?: string;
+    /**
+     * Part of the ARIA specification for tabs. By default, all `tabpanel` elements have a `tabIndex`
+     * of `0` which makes the whole content area receive focus. If you have a focusable item near the
+     * top of the tab panel content area, you may set `tabIndex` to `undefined` to prevent the tab
+     * panel element from receiving focus. Only do this is a child of the tab panel can receive focus.
+     */
+    tabIndex?: number;
+    /**
+     * Optionally pass a model directly to this component. Default is to implicitly use the same
+     * model as the container component which uses React context. Only use this for advanced use-cases
+     */
+    model?: TabsModel<T>;
+}
+export declare const useTabsPanel: <P extends {}, R>(model: TabsModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+    role: string;
+    'aria-labelledby': string;
+    hidden: boolean;
+    id: string;
+    tabIndex: number;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
+export declare const TabsPanel: import("../../common").ElementComponent<"div", TabPanelProps<unknown>>;
+//# sourceMappingURL=TabsPanel.d.ts.map

package/dist/commonjs/tabs/lib/TabsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsPanel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAG1D,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IACjF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACtB;AAID,eAAO,MAAM,YAAY;;;;;;;;OAwBxB,CAAC;AAEF,eAAO,MAAM,SAAS,wEAapB,CAAC"}

package/dist/commonjs/tabs/lib/TabsPanel.js

@@ -0,0 +1,64 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var common_2 = require("@workday/canvas-kit-labs-react/common");
+var Tabs_1 = require("./Tabs");
+var StyledTabsPanel = styled_1.default(common_2.Box)(common_1.hideMouseFocus);
+exports.useTabsPanel = common_1.createHook(function (_a, _, elemProps) {
+    var state = _a.state, events = _a.events;
+    if (elemProps === void 0) { elemProps = {}; }
+    var name = elemProps.name;
+    var _b = react_1.default.useState(elemProps.name || ''), tabName = _b[0], setTabName = _b[1];
+    common_1.useMountLayout(function () {
+        var index = state.panelIndexRef.current;
+        var tabName = name || String(index);
+        events.registerPanel({ item: { id: tabName } });
+        setTabName(tabName);
+        return function () {
+            events.unregisterPanel({ id: tabName });
+        };
+    });
+    return {
+        role: 'tabpanel',
+        'aria-labelledby': state.id + "-" + tabName,
+        hidden: !!tabName && tabName !== state.selectedIds[0],
+        id: "tabpanel-" + state.id + "-" + tabName,
+        tabIndex: 0,
+    };
+});
+exports.TabsPanel = common_1.createComponent('div')({
+    displayName: 'Tabs.Panel',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
+        var localModel = common_1.useModelContext(Tabs_1.TabsModelContext, model);
+        var props = exports.useTabsPanel(localModel, elemProps, ref);
+        return (react_1.default.createElement(StyledTabsPanel, __assign({ as: Element }, props), children));
+    },
+});

package/dist/{es6/tabs/lib/TabList.d.ts → commonjs/tabs/lib/TabsPanels.d.ts}

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { TabsModel } from './useTabsModel';
-export interface TabListProps {
+export interface TabsPanelsProps<T = unknown> {
     /**
      *
      */
-    children: React.ReactNode;
+    children: ((item: T) => React.ReactNode) | React.ReactNode;
     /**
      * Optionally pass a model directly to this component. Default is to implicitly use the same
      * model as the container component which uses React context. Only use this for advanced use-cases.
      */
-    model?: TabsModel;
+    model?: TabsModel<T>;
 }
-export declare const TabList: import("../../common").ElementComponent<"div", TabListProps>;
-//# sourceMappingURL=TabList.d.ts.map
+export declare const TabsPanels: import("../../common").Component<TabsPanelsProps<unknown>>;
+//# sourceMappingURL=TabsPanels.d.ts.map

package/dist/commonjs/tabs/lib/TabsPanels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsPanels.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsPanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGzC,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,OAAO;IAC1C;;OAEG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,4DAOrB,CAAC"}

package/dist/commonjs/tabs/lib/TabsPanels.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var Tabs_1 = require("./Tabs");
+var list_1 = require("./list");
+exports.TabsPanels = common_1.createComponent()({
+    displayName: 'Tabs.Panels',
+    Component: function (_a) {
+        var children = _a.children, model = _a.model;
+        var localModel = common_1.useModelContext(Tabs_1.TabsModelContext, model);
+        return React.createElement(React.Fragment, null, list_1.useRenderItems(localModel, children));
+    },
+});

package/dist/commonjs/tabs/lib/cursor/index.d.ts

@@ -1,3 +1,3 @@
-export * from './hooks';
+export * from './useRovingFocus';
 export * from './useCursorModel';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/tabs/lib/cursor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/cursor/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/cursor/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}

package/dist/commonjs/tabs/lib/cursor/index.js

@@ -3,5 +3,5 @@ function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./hooks"));
+__export(require("./useRovingFocus"));
 __export(require("./useCursorModel"));

package/dist/commonjs/tabs/lib/cursor/useCursorModel.d.ts

@@ -1,14 +1,14 @@
-import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
-import { ListState, ListEvents, BaseListModelConfig, Item } from '../list/useListModel';
+import { ToModelConfig } from '@workday/canvas-kit-react/common';
+import { ListState, ListEvents, BaseListModelConfig, ListModel } from '../list/useListModel';
 export declare type Orientation = 'horizontal' | 'vertical';
-export declare type CursorState = ListState & {
+export declare type CursorState<T = unknown> = ListState<T> & {
     /** Orientation of the list. This property determines what "next" and "previous" mean. This should
      * be set to match the layout of UI components */
     orientation: Orientation;
     /** The id of the list item the cursor is pointing to */
     cursorId: string;
 };
-export declare type CursorEvents = ListEvents & {
+export declare type CursorEvents<T = unknown> = ListEvents<T> & {
     /** Directly sets the cursor to the list item by its identifier.  */
     goTo(data: {
         id: string;
@@ -24,7 +24,10 @@ export declare type CursorEvents = ListEvents & {
     /** Set the cursor to the last item in the list */
     last(): void;
 };
-export declare type CursorModel = Model<CursorState, CursorEvents>;
+export interface CursorModel<T = unknown> extends ListModel<T> {
+    state: CursorState<T>;
+    events: CursorEvents<T>;
+}
 export declare const cursorEventMap: {
     guards: {
         /** Should a cursor position be set? Use only in advance use-cases */
@@ -45,19 +48,26 @@ export declare const cursorEventMap: {
         onUpdateItemPosition: "updateItemPosition";
     };
 };
-export declare type BaseCursorModelConfig = BaseListModelConfig & {
+export declare type BaseCursorModelConfig<T> = BaseListModelConfig<T> & {
     /**
      * The orientation of a list of items. Values are either `vertical` or `horizontal`. This value will
-     * effect which keys activate progression through a list. For example, `horizontal` will activate with
+     * effect which ids activate progression through a list. For example, `horizontal` will activate with
      * left and right arrows while `vertical` will activate with up and down arrows.
      * @default 'vertical'
      */
     orientation?: Orientation;
+    /**
+     * Initial cursor position. If not provided, the cursor will point to the first item in the list
+     */
+    initialCursorId?: string;
+};
+export declare type CursorModelConfig<T> = BaseCursorModelConfig<T> & Partial<ToModelConfig<CursorState<T>, CursorEvents<T>, typeof cursorEventMap>>;
+export declare const useCursorNavigation: <T extends unknown>(state: CursorState<T>, getId: (item: T) => string) => {
+    getFirst: () => T;
+    getLast: () => T;
+    getItem: (id: string) => T;
+    getNext: (id: string, tries?: number) => T;
+    getPrevious: (id: string, tries?: number) => T;
 };
-export declare type CursorModelConfig = BaseCursorModelConfig & Partial<ToModelConfig<CursorState, CursorEvents, typeof cursorEventMap>>;
-export declare const getItem: (id: string, items: Item[]) => Item;
-export declare const hasItems: (items: Item[]) => boolean;
-export declare const getNext: (id: string, items: Item[]) => Item;
-export declare const getPrevious: (id: string, items: Item[]) => Item;
-export declare const useCursorModel: (config?: CursorModelConfig) => Model<CursorState, CursorEvents>;
+export declare const useCursorModel: <T extends unknown>(config?: CursorModelConfig<T>) => CursorModel<T>;
 //# sourceMappingURL=useCursorModel.d.ts.map

package/dist/commonjs/tabs/lib/cursor/useCursorModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCursorModel.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/cursor/useCursorModel.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,EACL,aAAa,EAGd,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EACL,SAAS,EACT,UAAU,EACV,mBAAmB,EAGnB,IAAI,EAEL,MAAM,sBAAsB,CAAC;AAE9B,oBAAY,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAEpD,oBAAY,WAAW,GAAG,SAAS,GAAG;IACpC;qDACiD;IACjD,WAAW,EAAE,WAAW,CAAC;IACzB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,oBAAY,YAAY,GAAG,UAAU,GAAG;IACtC,oEAAoE;IACpE,IAAI,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAC/B;gCAC4B;IAC5B,IAAI,IAAI,IAAI,CAAC;IACb;uCACmC;IACnC,QAAQ,IAAI,IAAI,CAAC;IACjB,mDAAmD;IACnD,KAAK,IAAI,IAAI,CAAC;IACd,kDAAkD;IAClD,IAAI,IAAI,IAAI,CAAC;CACd,CAAC;AAEF,oBAAY,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AAE3D,eAAO,MAAM,cAAc;;QAGvB,qEAAqE;;;;;;;QAKrE;;;;WAIG;;;;;;CAGL,CAAC;AAEH,oBAAY,qBAAqB,GAAG,mBAAmB,GAAG;IACxD;;;;;OAKG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,oBAAY,iBAAiB,GAAG,qBAAqB,GACnD,OAAO,CAAC,aAAa,CAAC,WAAW,EAAE,YAAY,EAAE,OAAO,cAAc,CAAC,CAAC,CAAC;AAU3E,eAAO,MAAM,OAAO,qCAInB,CAAC;AAqBF,eAAO,MAAM,QAAQ,4BAA0D,CAAC;AAEhF,eAAO,MAAM,OAAO,qCAAmB,CAAC;AACxC,eAAO,MAAM,WAAW,qCAAoB,CAAC;AAE7C,eAAO,MAAM,cAAc,kEA2C1B,CAAC"}
+{"version":3,"file":"useCursorModel.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/cursor/useCursorModel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,aAAa,EAAsB,MAAM,kCAAkC,CAAC;AAEpG,OAAO,EACL,SAAS,EACT,UAAU,EACV,mBAAmB,EAInB,SAAS,EACV,MAAM,sBAAsB,CAAC;AAE9B,oBAAY,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAEpD,oBAAY,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG;IACpD;qDACiD;IACjD,WAAW,EAAE,WAAW,CAAC;IACzB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,oBAAY,YAAY,CAAC,CAAC,GAAG,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG;IACtD,oEAAoE;IACpE,IAAI,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAC/B;gCAC4B;IAC5B,IAAI,IAAI,IAAI,CAAC;IACb;uCACmC;IACnC,QAAQ,IAAI,IAAI,CAAC;IACjB,mDAAmD;IACnD,KAAK,IAAI,IAAI,CAAC;IACd,kDAAkD;IAClD,IAAI,IAAI,IAAI,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC5D,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACtB,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;CACzB;AAED,eAAO,MAAM,cAAc;;QAGvB,qEAAqE;;;;;;;QAKrE;;;;WAIG;;;;;;CAGL,CAAC;AAEH,oBAAY,qBAAqB,CAAC,CAAC,IAAI,mBAAmB,CAAC,CAAC,CAAC,GAAG;IAC9D;;;;;OAKG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,oBAAY,iBAAiB,CAAC,CAAC,IAAI,qBAAqB,CAAC,CAAC,CAAC,GACzD,OAAO,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,cAAc,CAAC,CAAC,CAAC;AAEjF,eAAO,MAAM,mBAAmB;;;;;;CAkD/B,CAAC;AAEF,eAAO,MAAM,cAAc,sEAyC1B,CAAC"}

package/dist/commonjs/tabs/lib/cursor/useCursorModel.js

@@ -29,78 +29,79 @@ exports.cursorEventMap = common_1.createEventMap()({
          */
         onGoTo: 'goTo' }),
 });
-var getFirst = function (items) {
-    return items[0];
-};
-var getLast = function (items) {
-    return items[items.length - 1];
-};
-exports.getItem = function (id, items) {
-    var item = id ? items.find(function (item) { return item.id === id; }) : getFirst(items); // no id, return first item
-    common_1.assert(item, "Item not found: " + id);
-    return item;
+exports.useCursorNavigation = function (state, getId) {
+    // refs for performance so that new functions aren't created every render
+    var getIdRef = react_1.default.useRef(getId);
+    var itemsRef = react_1.default.useRef(state.items);
+    var nonInteractiveIdsRef = react_1.default.useRef(state.nonInteractiveIds);
+    itemsRef.current = state.items;
+    nonInteractiveIdsRef.current = state.nonInteractiveIds;
+    // return a memoized function to prevent recreation of functions every render
+    return react_1.default.useMemo(function () {
+        var getFirst = function () { return itemsRef.current[0]; };
+        var getLast = function () { return itemsRef.current[itemsRef.current.length - 1]; };
+        var getItem = function (id) {
+            var item = id ? itemsRef.current.find(function (item) { return getIdRef.current(item) === id; }) : getFirst(); // no id, return first item
+            common_1.assert(item, "Item not found: " + id);
+            return item;
+        };
+        var getOffsetItem = function (offset) { return function (id, tries) {
+            if (tries === void 0) { tries = itemsRef.current.length; }
+            var items = itemsRef.current;
+            var item = getItem(id);
+            var getId = getIdRef.current;
+            var currentIndex = items.findIndex(function (i) { return getId(item) === getId(i); });
+            var nextIndex = currentIndex + offset;
+            if (nextIndex < 0) {
+                nextIndex = items.length - 1;
+            }
+            else if (nextIndex >= items.length) {
+                nextIndex = 0;
+            }
+            if (nonInteractiveIdsRef.current.includes(getId(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 getOffsetItem(offset)(getId(items[nextIndex]), tries - 1);
+            }
+            return items[nextIndex];
+        }; };
+        var getNext = getOffsetItem(1);
+        var getPrevious = getOffsetItem(-1);
+        return { getFirst: getFirst, getLast: getLast, getItem: getItem, getNext: getNext, getPrevious: getPrevious };
+    }, []);
 };
-var getOffsetItem = function (offset) { return function (id, items) {
-    var _a;
-    var item = exports.getItem(id, items);
-    var currentIndex = items.findIndex(function (_a) {
-        var id = _a.id;
-        return item.id === id;
-    });
-    var nextIndex = currentIndex + offset;
-    if (nextIndex < 0) {
-        nextIndex = items.length - 1;
-    }
-    else if (nextIndex >= items.length) {
-        nextIndex = 0;
-    }
-    var disabledAttribute = (_a = items[nextIndex].ref.current) === null || _a === void 0 ? void 0 : _a.getAttribute('disabled');
-    if (disabledAttribute !== null || disabledAttribute === 'false') {
-        // The next item is disabled, try again
-        return getOffsetItem(offset)(items[nextIndex].id, items);
-    }
-    return items[nextIndex];
-}; };
-exports.hasItems = function (items) { return items.some(function (item) { return item.ref.current; }); };
-exports.getNext = getOffsetItem(1);
-exports.getPrevious = getOffsetItem(-1);
 exports.useCursorModel = function (config) {
     if (config === void 0) { config = {}; }
+    var _a;
     var orientation = react_1.default.useState(config.orientation || 'vertical')[0];
-    var _a = react_1.default.useState(''), cursorId = _a[0], setCursorId = _a[1];
-    var initialCurrentRef = react_1.default.useRef('');
+    var _b = react_1.default.useState(''), cursorId = _b[0], setCursorId = _b[1];
     var list = useListModel_1.useListModel(config);
+    var initialCurrentRef = react_1.default.useRef(config.initialCursorId || ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? list.getId(config.items[0]) : '');
     var state = __assign(__assign({}, list.state), { orientation: orientation, cursorId: cursorId });
+    var navigation = exports.useCursorNavigation(state, list.getId);
     var events = common_1.useEventMap(exports.cursorEventMap, state, config, __assign(__assign({}, list.events), { registerItem: function (data) {
             // point the cursor at the first item
             if (!initialCurrentRef.current) {
-                initialCurrentRef.current = data.item.id;
+                initialCurrentRef.current = list.getId(data.item);
                 setCursorId(initialCurrentRef.current);
             }
             list.events.registerItem(data);
         },
-        unregisterItem: function (data) {
-            // move the cursor forward if the the cursor is pointing to an item that is being removed
-            if (state.cursorId === data.id && state.items.some(function (i) { return i.ref.current !== null; })) {
-                events.next();
-            }
-            list.events.unregisterItem(data);
-        },
         goTo: function (_a) {
             var id = _a.id;
             setCursorId(id);
         },
         next: function () {
-            setCursorId(exports.getNext(state.cursorId, state.items).id);
+            setCursorId(list.getId(navigation.getNext(state.cursorId)));
         },
         previous: function () {
-            setCursorId(exports.getPrevious(state.cursorId, state.items).id);
+            setCursorId(list.getId(navigation.getPrevious(state.cursorId)));
         },
         first: function () {
-            setCursorId(getFirst(state.items).id);
+            setCursorId(list.getId(navigation.getFirst()));
         },
         last: function () {
-            setCursorId(getLast(state.items).id);
+            setCursorId(list.getId(navigation.getLast()));
         } }));
-    return { state: state, events: events };
+    return { state: state, events: events, getId: list.getId };
 };

package/dist/commonjs/tabs/lib/cursor/useRovingFocus.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { CursorModel } from './useCursorModel';
+export declare const orientationKeyMap: {
+    readonly horizontal: {
+        readonly ArrowLeft: "previous";
+        readonly Left: "previous";
+        readonly ArrowRight: "next";
+        readonly Right: "next";
+        readonly Home: "first";
+        readonly End: "last";
+    };
+    readonly vertical: {
+        readonly ArrowUp: "previous";
+        readonly Up: "previous";
+        readonly ArrowDown: "next";
+        readonly Down: "next";
+        readonly Home: "first";
+        readonly End: "last";
+    };
+};
+/**
+ * Handles the roving focus behavior of a Cursor model. It should be added to the element
+ * representing a list item.
+ *
+ * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
+ */
+export declare const useRovingFocus: <P extends {}, R>(model: CursorModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+    onKeyDown(event: React.KeyboardEvent<Element>): void;
+    onFocus(): void;
+    onBlur(): void;
+    id: string;
+    tabIndex: number;
+    ref: ((instance: any) => void) | React.RefObject<any> | null | undefined;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
+//# sourceMappingURL=useRovingFocus.d.ts.map

package/dist/commonjs/tabs/lib/cursor/useRovingFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRovingFocus.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/cursor/useRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,WAAW,EAAsB,MAAM,kBAAkB,CAAC;AAElE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAiBpB,CAAC;AAWX;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;;;;;;;;OAsD1B,CAAC"}

package/dist/commonjs/tabs/lib/cursor/{hooks.js → useRovingFocus.js}

@@ -34,29 +34,34 @@ var rightToLeftMap = {
 };
 /**
  * Handles the roving focus behavior of a Cursor model. It should be added to the element
- * representing the list. It does not handle the tabIndex.
+ * representing a list item.
  *
  * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
  */
-exports.useRovingFocusList = function (model, elemProps) {
+exports.useRovingFocus = common_1.createHook(function (_a, ref, elemProps) {
+    var state = _a.state, events = _a.events, getId = _a.getId;
     if (elemProps === void 0) { elemProps = {}; }
-    var state = model.state, events = model.events;
+    // Tracks when this element has focus. If this item is removed while still focused, we have to
+    // inform the model to move the cursor to the next item.
+    var focusRef = react_1.default.useRef(false);
+    var getIdRef = react_1.default.useRef(getId);
+    // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
+    // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
+    // empty array
     var stateRef = react_1.default.useRef(state);
     stateRef.current = state;
-    // keep track of intentional focus changes. Without this state tracking, all changes to
-    // `state.cursorId` or `state.items` would result in focus changes. That is definitely not what
-    // we want.
     var keyDownRef = react_1.default.useRef(false);
     var isRTL = common_1.useIsRTL();
+    var navigation = useCursorModel_1.useCursorNavigation(state, getId);
     react_1.default.useEffect(function () {
         var _a;
         if (keyDownRef.current) {
-            var item = useCursorModel_1.getItem(state.cursorId, state.items);
-            (_a = item.ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+            var item = navigation.getItem(state.cursorId);
+            (_a = document.querySelector("#" + state.id + "-" + getIdRef.current(item))) === null || _a === void 0 ? void 0 : _a.focus();
             keyDownRef.current = false;
         }
-    }, [state.cursorId, state.items]);
-    return common_1.mergeProps({
+    }, [state.cursorId, state.id, navigation]);
+    return {
         onKeyDown: function (event) {
             Object.keys(exports.orientationKeyMap[state.orientation]).forEach(function (key) {
                 var _a;
@@ -67,47 +72,18 @@ exports.useRovingFocusList = function (model, elemProps) {
                 }
             });
         },
-    }, elemProps);
-};
-/**
- * Handles the roving focus behavior of a Cursor model. It should be added to the element
- * representing a list item. It does not handle the tabIndex.
- *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
- */
-exports.useRovingFocusItem = function (_a, elemProps) {
-    var state = _a.state;
-    if (elemProps === void 0) { elemProps = {}; }
-    // Tracks when this element has focus. If this item is removed while still focused, we have to
-    // inform the model to move the cursor to the next item.
-    var focusRef = react_1.default.useRef(false);
-    // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
-    // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
-    // empty array
-    var stateRef = react_1.default.useRef(state);
-    stateRef.current = state;
-    common_1.useMount(function () {
-        return function () {
-            if (focusRef.current && stateRef.current.items.length) {
-                // Unmount is called before state updates are flushed and we'll never get the last state
-                // update, so use `getNext` instead of `getItem`
-                var item_1 = useCursorModel_1.getNext(stateRef.current.cursorId, stateRef.current.items);
-                // If we call `focus` right away, there seems to be a timing issue where the focus handler
-                // never gets called. Waiting until just before a frame is rendered seems to ensure the
-                // focus handler is called correctly. Removing will make deleting multiple items fail.
-                requestAnimationFrame(function () {
-                    var _a;
-                    (_a = item_1.ref.current) === null || _a === void 0 ? void 0 : _a.focus();
-                });
-            }
-        };
-    });
-    return common_1.mergeProps({
-        onFocus: function (event) {
+        onFocus: function () {
             focusRef.current = true;
         },
-        onBlur: function (event) {
+        onBlur: function () {
             focusRef.current = false;
         },
-    }, elemProps);
-};
+        id: state.id + "-" + elemProps.name,
+        tabIndex: !state.cursorId
+            ? 0 // cursor isn't known yet, be safe and mark this as focusable
+            : !!elemProps.name && state.cursorId === elemProps.name
+                ? 0 // A name is known and cursor is here
+                : -1,
+        ref: ref,
+    };
+});

package/dist/commonjs/tabs/lib/list/index.d.ts

@@ -1,3 +1,4 @@
-export * from './hooks';
+export * from './useListRegisterItem';
 export * from './useListModel';
+export * from './renderItem';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/tabs/lib/list/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/list/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/list/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC"}

package/dist/commonjs/tabs/lib/list/index.js

@@ -3,5 +3,6 @@ function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./hooks"));
+__export(require("./useListRegisterItem"));
 __export(require("./useListModel"));
+__export(require("./renderItem"));

package/dist/commonjs/tabs/lib/list/renderItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ListModel } from './useListModel';
+export declare function useRenderItems<T>(model: ListModel<T>, children: ((item: T) => React.ReactNode) | React.ReactNode): {} | null | undefined;
+//# sourceMappingURL=renderItem.d.ts.map

package/dist/commonjs/tabs/lib/list/renderItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderItem.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/list/renderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,wBAAgB,cAAc,CAAC,CAAC,EAC9B,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EACnB,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,yBAY3D"}

package/dist/commonjs/tabs/lib/list/renderItem.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+function useRenderItems(model, children) {
+    var items = react_1.default.useMemo(function () {
+        return typeof children === 'function'
+            ? model.state.items.map(function (item) { return react_1.default.cloneElement(children(item), { key: model.getId(item) }); })
+            : null;
+        // If we added `children` as a dependency, this memo would be useless. If the user wants the
+        // item to rerender, the item and items array needs to be updated.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [model.state.items]);
+    return items || children;
+}
+exports.useRenderItems = useRenderItems;