@workday/canvas-kit-react 6.0.0-alpha.0-next.29 → 6.0.0-alpha.0-next.34

package/dist/commonjs/tabs/lib/{TabList.js → TabsMenuPopper.js}

@@ -30,28 +30,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var common_1 = require("@workday/canvas-kit-react/common");
-var cursor_1 = require("./cursor");
+var popup_1 = require("@workday/canvas-kit-react/popup");
 var Tabs_1 = require("./Tabs");
-var hooks_1 = require("./hooks");
-var TabsListContainer = common_1.styled('div')({
-    display: 'inline-block',
-    position: 'relative',
-    width: "100%",
-    borderBottom: "1px solid " + tokens_1.commonColors.divider,
-});
-var TabsListInnerContainer = common_1.styled('div')({
-    display: "flex",
-    margin: "0 " + tokens_1.space.m,
-});
-exports.TabList = common_1.createComponent('div')({
-    displayName: 'Tabs.List',
-    Component: function (_a, ref, Element) {
+exports.TabsMenuPopper = common_1.createComponent('div')({
+    displayName: 'Tabs.MenuPopper',
+    Component: function (_a, ref) {
         var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
         var localModel = common_1.useModelContext(Tabs_1.TabsModelContext, model);
-        var props = common_1.composeHooks(cursor_1.useRovingFocusList, hooks_1.useResetCursorOnBlur)(localModel, elemProps, ref);
-        return (React.createElement(TabsListContainer, null,
-            React.createElement(TabsListInnerContainer, __assign({ as: Element, ref: ref, role: "tablist" }, props), children)));
+        var props = exports.useTabsMenuPopper(localModel.menu, elemProps, ref);
+        return React.createElement(popup_1.Popper, __assign({}, props), children);
     },
 });
+exports.useTabsMenuPopper = popup_1.usePopupPopper;

package/dist/commonjs/tabs/lib/TabsOverflowButton.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { TabsModel } from './useTabsModel';
+export interface OverflowButtonProps {
+    /**
+     * The label text of the Tab.
+     */
+    children: 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;
+}
+export declare const TabsOverflowButton: import("../../common").ElementComponent<"button", OverflowButtonProps>;
+export declare const useTabsOverflowButton: <P extends {}, R>(model: import("./overflow").OverflowModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+    'aria-haspopup': boolean;
+} & {
+    ref: (instance: HTMLButtonElement | null) => void;
+    'aria-hidden': boolean;
+    tabIndex: number;
+    style: {};
+} & {
+    id: string;
+    onKeyDown(event: React.KeyboardEvent<Element>): void;
+} & {
+    ref: (instance: any) => void;
+    onClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
+//# sourceMappingURL=TabsOverflowButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsOverflowButton.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGzC,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,wEAc7B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;OAUjC,CAAC"}

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

@@ -0,0 +1,57 @@
+"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 __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 canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+var common_1 = require("@workday/canvas-kit-react/common");
+var icon_1 = require("@workday/canvas-kit-react/icon");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var overflow_1 = require("./overflow");
+var menu_1 = require("./menu");
+var Tabs_1 = require("./Tabs");
+var TabsItem_1 = require("./TabsItem");
+exports.TabsOverflowButton = common_1.createComponent('button')({
+    displayName: 'Tabs.OverflowButton',
+    Component: function (_a, ref, Element) {
+        var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
+        var localModel = common_1.useModelContext(Tabs_1.TabsModelContext, model);
+        var props = exports.useTabsOverflowButton(localModel, elemProps, ref);
+        return (React.createElement(TabsItem_1.StyledTabItem, __assign({ hasIcon: true, spacing: tokens_1.space.xxxs, type: "button", as: Element }, props),
+            React.createElement("span", null, children),
+            React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.chevronDownSmallIcon })));
+    },
+});
+exports.useTabsOverflowButton = common_1.composeHooks(common_1.createHook(function (model, _, elemProps) {
+    if (elemProps === void 0) { elemProps = {}; }
+    return {
+        'aria-haspopup': true,
+    };
+}), overflow_1.useOverflowTarget, common_1.subModelHook(function (m) { return m.menu; }, menu_1.useMenuTarget));

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"}