@workday/canvas-kit-react 5.3.0-next.10 → 5.3.0-next.24

package/dist/es6/tabs/lib/TabsList.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Stack } from '@workday/canvas-kit-labs-react/layout';
+import { TabsModel } from './useTabsModel';
+export interface TabListProps<T = unknown> extends Partial<ExtractProps<typeof Stack, never>> {
+    /**
+     * If items are passed to a `TabsModel`, the child of `Tabs.List` should be a render prop. The
+     * List will determine how and when the item will be rendered.
+     *
+     * @example
+     * <Tabs.List>
+     *   {(item) => <Tabs.Item key={item.id} name={item.name}>{item.text}</Tabs.Item>}
+     * </Tabs.List>
+     */
+    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<T>;
+    overflowButton?: React.ReactNode;
+}
+export declare const TabsList: import("../../common").ElementComponent<"div", TabListProps<unknown>>;
+export declare const useTabsList: <P extends {}, R>(model: import("./selection").SelectionModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+    role: string;
+} & {
+    ref: (instance: HTMLElement | null) => void;
+} & {
+    onKeyDown(event: React.KeyboardEvent<Element>): void; /**
+     * If items are passed to a `TabsModel`, the child of `Tabs.List` should be a render prop. The
+     * List will determine how and when the item will be rendered.
+     *
+     * @example
+     * <Tabs.List>
+     *   {(item) => <Tabs.Item key={item.id} name={item.name}>{item.text}</Tabs.Item>}
+     * </Tabs.List>
+     */
+    onFocus(): void;
+    onBlur(): void;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
+//# sourceMappingURL=TabsList.d.ts.map

package/dist/es6/tabs/lib/TabsList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,uCAAuC,CAAC;AAM5D,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGzC,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC;IAC3F;;;;;;;;OAQG;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;IACrB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,uEAoBnB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;0DAxCtB;;;;;;;;OAQG;;;;;OAsCJ,CAAC"}

package/dist/es6/tabs/lib/TabsList.js

@@ -0,0 +1,44 @@
+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;
+};
+import * as React from 'react';
+import { commonColors } from '@workday/canvas-kit-react/tokens';
+import { composeHooks, createComponent, createHook, useModelContext, } from '@workday/canvas-kit-react/common';
+import { Stack } from '@workday/canvas-kit-labs-react/layout';
+import { useOverflowMeasureContainer } from './overflow';
+import { useRenderItems } from './list';
+import { useResetCursorOnBlur } from './selection';
+import { TabsModelContext } from './Tabs';
+export var TabsList = createComponent('div')({
+    displayName: 'Tabs.List',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, model = _a.model, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "model", "overflowButton"]);
+        var localModel = useModelContext(TabsModelContext, model);
+        var props = useTabsList(localModel, elemProps, ref);
+        return (React.createElement(Stack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + commonColors.divider, marginX: "m", spacing: "xxxs" }, props),
+            useRenderItems(localModel, children),
+            overflowButton));
+    },
+});
+export var useTabsList = composeHooks(createHook(function (_) {
+    return { role: 'tablist' };
+}), useOverflowMeasureContainer, useResetCursorOnBlur);

package/dist/es6/tabs/lib/TabsMenuPopper.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Popper } from '@workday/canvas-kit-react/popup';
+import { TabsModel } from './useTabsModel';
+export interface MenuPopperProps<T = unknown> extends ExtractProps<typeof Popper> {
+    /**
+     * 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 TabsMenuPopper: import("../../common").ElementComponent<"div", MenuPopperProps<unknown>>;
+export declare const useTabsMenuPopper: <P extends {}, R>(model: import("../../common").Model<import("../../popup").PopupState, import("../../popup").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+    open: boolean;
+    anchorElement: React.RefObject<HTMLButtonElement>;
+    ref: (instance: any) => void;
+    onPlacementChange: (placement: import("@popperjs/core").Placement) => void;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
+//# sourceMappingURL=TabsMenuPopper.d.ts.map

package/dist/es6/tabs/lib/TabsMenuPopper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsMenuPopper.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsMenuPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAiB,MAAM,EAAC,MAAM,iCAAiC,CAAC;AAGvE,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,YAAY,CAAC,OAAO,MAAM,CAAC;IAC/E;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,0EAQzB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;OAAiB,CAAC"}

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

@@ -21,28 +21,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { space, commonColors } from '@workday/canvas-kit-react/tokens';
-import { composeHooks, createComponent, styled, useModelContext, } from '@workday/canvas-kit-react/common';
-import { useRovingFocusList } from './cursor';
+import { createComponent, useModelContext } from '@workday/canvas-kit-react/common';
+import { usePopupPopper, Popper } from '@workday/canvas-kit-react/popup';
 import { TabsModelContext } from './Tabs';
-import { useResetCursorOnBlur } from './hooks';
-var TabsListContainer = styled('div')({
-    display: 'inline-block',
-    position: 'relative',
-    width: "100%",
-    borderBottom: "1px solid " + commonColors.divider,
-});
-var TabsListInnerContainer = styled('div')({
-    display: "flex",
-    margin: "0 " + space.m,
-});
-export var TabList = createComponent('div')({
-    displayName: 'Tabs.List',
-    Component: function (_a, ref, Element) {
+export var TabsMenuPopper = createComponent('div')({
+    displayName: 'Tabs.MenuPopper',
+    Component: function (_a, ref) {
         var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
         var localModel = useModelContext(TabsModelContext, model);
-        var props = composeHooks(useRovingFocusList, useResetCursorOnBlur)(localModel, elemProps, ref);
-        return (React.createElement(TabsListContainer, null,
-            React.createElement(TabsListInnerContainer, __assign({ as: Element, ref: ref, role: "tablist" }, props), children)));
+        var props = useTabsMenuPopper(localModel.menu, elemProps, ref);
+        return React.createElement(Popper, __assign({}, props), children);
     },
 });
+export var useTabsMenuPopper = usePopupPopper;

package/dist/es6/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/es6/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/es6/tabs/lib/TabsOverflowButton.js

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

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

@@ -1,7 +1,8 @@
-/** @jsx jsx */
 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 {
+export interface TabPanelProps<T = unknown> extends ExtractProps<typeof Box, never> {
     /**
      * The contents of the TabPanel.
      */
@@ -23,7 +24,16 @@ export interface TabPanelProps {
      * 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 TabPanel: import("../../common").ElementComponent<"div", TabPanelProps>;
-//# sourceMappingURL=TabPanel.d.ts.map
+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/es6/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/es6/tabs/lib/TabsPanel.js

@@ -0,0 +1,59 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { createComponent, useModelContext, useMountLayout, createHook, hideMouseFocus, } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-labs-react/common';
+import { TabsModelContext } from './Tabs';
+var StyledTabsPanel = styled(Box)(hideMouseFocus);
+export var useTabsPanel = createHook(function (_a, _, elemProps) {
+    var state = _a.state, events = _a.events;
+    if (elemProps === void 0) { elemProps = {}; }
+    var name = elemProps.name;
+    var _b = React.useState(elemProps.name || ''), tabName = _b[0], setTabName = _b[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,
+    };
+});
+export var TabsPanel = createComponent('div')({
+    displayName: 'Tabs.Panel',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
+        var localModel = useModelContext(TabsModelContext, model);
+        var props = useTabsPanel(localModel, elemProps, ref);
+        return (React.createElement(StyledTabsPanel, __assign({ as: Element }, props), children));
+    },
+});

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

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { TabsModel } from './useTabsModel';
-export interface TabListProps {
-    /**
-     *
-     */
-    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 TabList: import("../../common").ElementComponent<"div", TabListProps>;
-//# sourceMappingURL=TabList.d.ts.map
+import * as React from 'react';
+import { TabsModel } from './useTabsModel';
+export interface TabsPanelsProps<T = unknown> {
+    /**
+     *
+     */
+    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<T>;
+}
+export declare const TabsPanels: import("../../common").Component<TabsPanelsProps<unknown>>;
+//# sourceMappingURL=TabsPanels.d.ts.map

package/dist/es6/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/es6/tabs/lib/TabsPanels.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { createComponent, useModelContext } from '@workday/canvas-kit-react/common';
+import { TabsModelContext } from './Tabs';
+import { useRenderItems } from './list';
+export var TabsPanels = createComponent()({
+    displayName: 'Tabs.Panels',
+    Component: function (_a) {
+        var children = _a.children, model = _a.model;
+        var localModel = useModelContext(TabsModelContext, model);
+        return React.createElement(React.Fragment, null, useRenderItems(localModel, children));
+    },
+});

package/dist/es6/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/es6/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/es6/tabs/lib/cursor/index.js

@@ -1,2 +1,2 @@
-export * from './hooks';
+export * from './useRovingFocus';
 export * from './useCursorModel';

package/dist/es6/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/es6/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/es6/tabs/lib/cursor/useCursorModel.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { createEventMap, useEventMap, assert, } from '@workday/canvas-kit-react/common';
+import { createEventMap, useEventMap, assert } from '@workday/canvas-kit-react/common';
 import { listEventMap, useListModel, } from '../list/useListModel';
 export var cursorEventMap = createEventMap()({
     guards: __assign(__assign({}, listEventMap.guards), { 
@@ -24,78 +24,79 @@ export var cursorEventMap = createEventMap()({
          */
         onGoTo: 'goTo' }),
 });
-var getFirst = function (items) {
-    return items[0];
-};
-var getLast = function (items) {
-    return items[items.length - 1];
-};
-export var getItem = function (id, items) {
-    var item = id ? items.find(function (item) { return item.id === id; }) : getFirst(items); // no id, return first item
-    assert(item, "Item not found: " + id);
-    return item;
+export var useCursorNavigation = function (state, getId) {
+    // refs for performance so that new functions aren't created every render
+    var getIdRef = React.useRef(getId);
+    var itemsRef = React.useRef(state.items);
+    var nonInteractiveIdsRef = React.useRef(state.nonInteractiveIds);
+    itemsRef.current = state.items;
+    nonInteractiveIdsRef.current = state.nonInteractiveIds;
+    // return a memoized function to prevent recreation of functions every render
+    return React.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
+            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 = 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];
-}; };
-export var hasItems = function (items) { return items.some(function (item) { return item.ref.current; }); };
-export var getNext = getOffsetItem(1);
-export var getPrevious = getOffsetItem(-1);
 export var useCursorModel = function (config) {
     if (config === void 0) { config = {}; }
+    var _a;
     var orientation = React.useState(config.orientation || 'vertical')[0];
-    var _a = React.useState(''), cursorId = _a[0], setCursorId = _a[1];
-    var initialCurrentRef = React.useRef('');
+    var _b = React.useState(''), cursorId = _b[0], setCursorId = _b[1];
     var list = useListModel(config);
+    var initialCurrentRef = React.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 = useCursorNavigation(state, list.getId);
     var events = useEventMap(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(getNext(state.cursorId, state.items).id);
+            setCursorId(list.getId(navigation.getNext(state.cursorId)));
         },
         previous: function () {
-            setCursorId(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 };
 };