@workday/canvas-kit-react 5.3.0 → 5.3.4

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TabsModel, TabsModelConfig } from './useTabsModel';
-export declare const TabsModelContext: React.Context<TabsModel<unknown>>;
-export interface TabsProps<T = any> extends TabsModelConfig<T> {
+export declare const TabsModelContext: React.Context<import("../../common").Model<import("./useTabsModel").TabsState, import("./useTabsModel").TabsEvents>>;
+export interface TabsProps extends TabsModelConfig {
     /**
      * The contents of the Tabs. Can be `Tabs` children or any valid elements.
      */
@@ -11,39 +11,11 @@ export interface TabsProps<T = any> extends TabsModelConfig<T> {
      * config passed to this component.
      * @default useTabsModel(config)
      */
-    model?: TabsModel<T>;
+    model?: TabsModel;
 }
-export declare const Tabs: import("../../common").Component<TabsProps<any>> & {
-    List: import("../../common").ElementComponent<"div", import("./TabsList").TabListProps<unknown>>;
-    Item: import("../../common").ElementComponent<"button", import("./TabsItem").TabsItemProps> & {
-        Icon: typeof import("../..").SystemIcon;
-        Text: import("../../common").ElementComponent<"span", {}>;
-    };
-    Panel: import("../../common").ElementComponent<"div", import("./TabsPanel").TabPanelProps<unknown>>;
-    Panels: import("../../common").Component<import("./TabsPanels").TabsPanelsProps<unknown>>;
-    OverflowButton: import("../../common").ElementComponent<"button", import("./TabsOverflowButton").OverflowButtonProps>;
-    MenuPopper: import("../../common").ElementComponent<"div", import("./TabsMenuPopper").MenuPopperProps<unknown>>;
-    /**
-     * The overflow menu of the Tabs component. If there isn't enough room to render all the tab
-     * items, the extra tabs that don't fit will be overflowed into this menu.
-     * @example
-     * <Tabs.Menu.Popper>
-     *   <Tabs.Menu.Card>
-     *     <Tabs.Menu.List>
-     *       {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
-     *     </Tabs.Menu.List>
-     *   </Tabs.Menu.Card>
-     * </Tabs.Menu.Popper>
-     */
-    Menu: import("../../common").Component<import("./menu/Menu").MenuProps<any>> & {
-        Card: import("../../common").ElementComponent<"div", import("./menu/MenuCard").MenuCardProps<unknown>>;
-        List: import("../../common").ElementComponent<"div", import("./menu/MenuList").MenuListProps<unknown>>;
-        Item: import("../../common").ElementComponent<"button", import("./menu/MenuItem").MenuItemProps<unknown>> & {
-            Icon: typeof import("../..").SystemIcon;
-            Text: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "hidden" | "color" | "style" | "translate" | "prefix" | "slot" | "title" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is">, import("../../common").EmotionCanvasTheme>;
-        };
-        Target: import("../../common").ElementComponent<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("./menu/MenuTarget").MenuTargetProps<unknown>>;
-        Popper: import("../../common").ElementComponent<"div", import("./menu/MenuPopper").MenuPopperProps<unknown>>;
-    };
+export declare const Tabs: import("../../common").Component<TabsProps> & {
+    List: import("../../common").ElementComponent<"div", import("./TabList").TabListProps>;
+    Item: import("../../common").ElementComponent<"button", import("./Tab").TabProps>;
+    Panel: import("../../common").ElementComponent<"div", import("./TabPanel").TabPanelProps>;
 };
 //# sourceMappingURL=Tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAe,SAAS,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAKxE,eAAO,MAAM,gBAAgB,mCAA4C,CAAC;AAG1E,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC5D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACtB;AAED,eAAO,MAAM,IAAI;;;;;;;;;;IAkBb;;;;;;;;;;;OAWG;;;;;;;;;;;CAGL,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAe,SAAS,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAExE,eAAO,MAAM,gBAAgB,sHAA4C,CAAC;AAE1E,MAAM,WAAW,SAAU,SAAQ,eAAe;IAChD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,IAAI;;;;CAYf,CAAC"}

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

@@ -11,42 +11,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
-import { Menu } from './menu';
-import { TabsItem } from './TabsItem';
-import { TabsList } from './TabsList';
-import { TabsPanel } from './TabsPanel';
+import { Tab } from './Tab';
+import { TabList } from './TabList';
+import { TabPanel } from './TabPanel';
 import { useTabsModel } from './useTabsModel';
-import { TabsOverflowButton } from './TabsOverflowButton';
-import { TabsMenuPopper } from './TabsMenuPopper';
-import { TabsPanels } from './TabsPanels';
 export var TabsModelContext = React.createContext({});
 export var Tabs = createComponent()({
     displayName: 'Tabs',
     Component: function (_a) {
         var children = _a.children, model = _a.model, config = __rest(_a, ["children", "model"]);
         var value = useDefaultModel(model, config, useTabsModel);
-        return (React.createElement(TabsModelContext.Provider, { value: value },
-            React.createElement(Menu, { model: value.menu }, children)));
+        return React.createElement(TabsModelContext.Provider, { value: value }, children);
     },
     subComponents: {
-        List: TabsList,
-        Item: TabsItem,
-        Panel: TabsPanel,
-        Panels: TabsPanels,
-        OverflowButton: TabsOverflowButton,
-        MenuPopper: TabsMenuPopper,
-        /**
-         * The overflow menu of the Tabs component. If there isn't enough room to render all the tab
-         * items, the extra tabs that don't fit will be overflowed into this menu.
-         * @example
-         * <Tabs.Menu.Popper>
-         *   <Tabs.Menu.Card>
-         *     <Tabs.Menu.List>
-         *       {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
-         *     </Tabs.Menu.List>
-         *   </Tabs.Menu.Card>
-         * </Tabs.Menu.Popper>
-         */
-        Menu: Menu,
+        List: TabList,
+        Item: Tab,
+        Panel: TabPanel,
     },
 });

package/dist/es6/tabs/lib/cursor/hooks.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+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 the list. It does not handle the tabIndex.
+ *
+ * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
+ */
+export declare const useRovingFocusList: (model: import("../../../common").Model<import("./useCursorModel").CursorState, import("./useCursorModel").CursorEvents>, elemProps?: {}) => {
+    onKeyDown(event: React.KeyboardEvent<Element>): void;
+};
+/**
+ * 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
+ */
+export declare const useRovingFocusItem: ({ state }: import("../../../common").Model<import("./useCursorModel").CursorState, import("./useCursorModel").CursorEvents>, elemProps?: {}) => {
+    onFocus(event: React.FocusEvent<Element>): void;
+    onBlur(event: React.FocusEvent<Element>): void;
+};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/es6/tabs/lib/cursor/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/cursor/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAiBpB,CAAC;AAWX;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;CAmC9B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;;CAuC9B,CAAC"}

package/dist/es6/tabs/lib/cursor/hooks.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { mergeProps, useIsRTL, useMount } from '@workday/canvas-kit-react/common';
+import { getItem, getNext } from './useCursorModel';
+export var orientationKeyMap = {
+    horizontal: {
+        ArrowLeft: 'previous',
+        Left: 'previous',
+        ArrowRight: 'next',
+        Right: 'next',
+        Home: 'first',
+        End: 'last',
+    },
+    vertical: {
+        ArrowUp: 'previous',
+        Up: 'previous',
+        ArrowDown: 'next',
+        Down: 'next',
+        Home: 'first',
+        End: 'last',
+    },
+};
+var rightToLeftMap = {
+    ArrowLeft: 'ArrowRight',
+    Left: 'Right',
+    ArrowRight: 'ArrowLeft',
+    Right: 'Left',
+    Home: 'End',
+    End: 'Home',
+};
+/**
+ * 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.
+ *
+ * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
+ */
+export var useRovingFocusList = function (model, elemProps) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var state = model.state, events = model.events;
+    var stateRef = React.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.useRef(false);
+    var isRTL = useIsRTL();
+    React.useEffect(function () {
+        var _a;
+        if (keyDownRef.current) {
+            var item = getItem(state.cursorId, state.items);
+            (_a = item.ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+            keyDownRef.current = false;
+        }
+    }, [state.cursorId, state.items]);
+    return mergeProps({
+        onKeyDown: function (event) {
+            Object.keys(orientationKeyMap[state.orientation]).forEach(function (key) {
+                var _a;
+                if (isRTL ? event.key === rightToLeftMap[key] : event.key === key) {
+                    var event_1 = orientationKeyMap[state.orientation][key];
+                    keyDownRef.current = true;
+                    (_a = events[event_1]) === null || _a === void 0 ? void 0 : _a.call(events);
+                }
+            });
+        },
+    }, 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
+ */
+export var 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.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.useRef(state);
+    stateRef.current = state;
+    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 = 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 mergeProps({
+        onFocus: function (event) {
+            focusRef.current = true;
+        },
+        onBlur: function (event) {
+            focusRef.current = false;
+        },
+    }, elemProps);
+};

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

@@ -1,3 +1,3 @@
-export * from './useRovingFocus';
+export * from './hooks';
 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,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/cursor/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC"}

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

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

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

@@ -1,14 +1,14 @@
-import { ToModelConfig } from '@workday/canvas-kit-react/common';
-import { ListState, ListEvents, BaseListModelConfig, ListModel } from '../list/useListModel';
+import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
+import { ListState, ListEvents, BaseListModelConfig, Item } from '../list/useListModel';
 export declare type Orientation = 'horizontal' | 'vertical';
-export declare type CursorState<T = unknown> = ListState<T> & {
+export declare type CursorState = ListState & {
     /** 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<T = unknown> = ListEvents<T> & {
+export declare type CursorEvents = ListEvents & {
     /** Directly sets the cursor to the list item by its identifier.  */
     goTo(data: {
         id: string;
@@ -24,10 +24,7 @@ export declare type CursorEvents<T = unknown> = ListEvents<T> & {
     /** Set the cursor to the last item in the list */
     last(): void;
 };
-export interface CursorModel<T = unknown> extends ListModel<T> {
-    state: CursorState<T>;
-    events: CursorEvents<T>;
-}
+export declare type CursorModel = Model<CursorState, CursorEvents>;
 export declare const cursorEventMap: {
     guards: {
         /** Should a cursor position be set? Use only in advance use-cases */
@@ -48,26 +45,19 @@ export declare const cursorEventMap: {
         onUpdateItemPosition: "updateItemPosition";
     };
 };
-export declare type BaseCursorModelConfig<T> = BaseListModelConfig<T> & {
+export declare type BaseCursorModelConfig = BaseListModelConfig & {
     /**
      * The orientation of a list of items. Values are either `vertical` or `horizontal`. This value will
-     * effect which ids activate progression through a list. For example, `horizontal` will activate with
+     * effect which keys 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 const useCursorModel: <T extends unknown>(config?: CursorModelConfig<T>) => CursorModel<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>;
 //# 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,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"}
+{"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"}

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,79 +24,78 @@ export var cursorEventMap = createEventMap()({
          */
         onGoTo: 'goTo' }),
 });
-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 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;
 };
+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 _b = React.useState(''), cursorId = _b[0], setCursorId = _b[1];
+    var _a = React.useState(''), cursorId = _a[0], setCursorId = _a[1];
+    var initialCurrentRef = React.useRef('');
     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 = list.getId(data.item);
+                initialCurrentRef.current = data.item.id;
                 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(list.getId(navigation.getNext(state.cursorId)));
+            setCursorId(getNext(state.cursorId, state.items).id);
         },
         previous: function () {
-            setCursorId(list.getId(navigation.getPrevious(state.cursorId)));
+            setCursorId(getPrevious(state.cursorId, state.items).id);
         },
         first: function () {
-            setCursorId(list.getId(navigation.getFirst()));
+            setCursorId(getFirst(state.items).id);
         },
         last: function () {
-            setCursorId(list.getId(navigation.getLast()));
+            setCursorId(getLast(state.items).id);
         } }));
-    return { state: state, events: events, getId: list.getId };
+    return { state: state, events: events };
 };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * Reset the cursor to the active tab when the tab list looses focus
+ */
+export declare const useResetCursorOnBlur: ({ state, events }: import("../../common").Model<import("./useTabsModel").TabsState, import("./useTabsModel").TabsEvents>, elemProps?: {}) => {
+    onKeyDown(event: React.KeyboardEvent<Element>): void;
+    onFocus(): void;
+    onBlur(): void;
+};
+//# sourceMappingURL=hooks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;CAqBhC,CAAC"}

package/dist/es6/tabs/lib/{selection/useResetCursorOnBlur.js → hooks.js}

@@ -1,13 +1,14 @@
 import React from 'react';
-import { createHook } from '@workday/canvas-kit-react/common';
-import { orientationKeyMap } from '../cursor';
+import { mergeProps } from '@workday/canvas-kit-react/common';
+import { orientationKeyMap } from './cursor/hooks';
 /**
- * Reset the cursor to the selected item when the list looses focus
+ * Reset the cursor to the active tab when the tab list looses focus
  */
-export var useResetCursorOnBlur = createHook(function (_a) {
+export var useResetCursorOnBlur = function (_a, elemProps) {
     var state = _a.state, events = _a.events;
+    if (elemProps === void 0) { elemProps = {}; }
     var programmaticFocusRef = React.useRef(false);
-    return {
+    return mergeProps({
         onKeyDown: function (event) {
             // Programmatic focus only on any focus change via keyboard
             if (Object.keys(orientationKeyMap[state.orientation]).indexOf(event.key) !== -1) {
@@ -19,8 +20,8 @@ export var useResetCursorOnBlur = createHook(function (_a) {
         },
         onBlur: function () {
             if (!programmaticFocusRef.current) {
-                events.goTo({ id: state.selectedIds[0] });
+                events.goTo({ id: state.activeTab });
             }
         },
-    };
-});
+    }, elemProps);
+};

package/dist/es6/tabs/lib/list/hooks.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * Handle list registration. Returns an identifier used to identify this item in the list
+ * @param model A ListModel
+ * @param localRef A RefObject that will be used to register an item
+ * @param id Desired identifier for the List Model. If not provided, it will fall back to the index
+ * in the list
+ * @param index (Optional) Specify the position of the item if the order is expected to change
+ */
+export declare const useRegisterItem: ({ state, events }: import("../../../common").Model<import("./useListModel").ListState, import("./useListModel").ListEvents>, localRef: React.RefObject<any>, id?: string, index?: number | undefined) => string;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/es6/tabs/lib/list/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/list/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,kNA8B3B,CAAC"}

package/dist/es6/tabs/lib/list/hooks.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useMountLayout } from '@workday/canvas-kit-react/common';
+/**
+ * Handle list registration. Returns an identifier used to identify this item in the list
+ * @param model A ListModel
+ * @param localRef A RefObject that will be used to register an item
+ * @param id Desired identifier for the List Model. If not provided, it will fall back to the index
+ * in the list
+ * @param index (Optional) Specify the position of the item if the order is expected to change
+ */
+export var useRegisterItem = function (_a, localRef, id, index) {
+    var state = _a.state, events = _a.events;
+    if (id === void 0) { id = ''; }
+    var _b = React.useState(id), localId = _b[0], setLocalId = _b[1];
+    var firstRender = React.useRef(true);
+    React.useLayoutEffect(function () {
+        if (index !== undefined && !firstRender.current) {
+            events.updateItemPosition({ id: localId, index: index });
+        }
+        // we only care about the index changing
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [index]);
+    useMountLayout(function () {
+        var defaultId = state.indexRef.current;
+        var itemId = id || String(defaultId);
+        events.registerItem({ item: { id: itemId, ref: localRef }, index: index });
+        setLocalId(itemId);
+        firstRender.current = false;
+        return function () {
+            events.unregisterItem({ id: itemId });
+        };
+    });
+    return localId;
+};

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

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

package/dist/es6/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,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/list/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC"}

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

@@ -1,3 +1,2 @@
-export * from './useListRegisterItem';
+export * from './hooks';
 export * from './useListModel';
-export * from './renderItem';