@workday/canvas-kit-react 5.3.0 → 5.3.4

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { TabsModel } from './useTabsModel';
+export interface TabProps {
+    /**
+     * Optionally pass index to tab item. This should be done if `Tabs.Item` components were created
+     * via a `Array::map` function. This index will ensure keyboard navigation works even if items are
+     * inserted out of order.
+     */
+    index?: number;
+    /**
+     * The label text of the Tab.
+     */
+    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 panel. 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;
+    /**
+     * 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;
+    /**
+     * Optional id. If not set, it will inherit the ID passed to the `Tabs` component and append the
+     * index at the end. Only set this for advanced cases.
+     */
+    id?: string;
+    /**
+     * Part of the ARIA specification for tabs. This attributes links a `role=tab` to a
+     * `role=tabpanel`. This value must be the same as the associated `id` attribute of the tab panel.
+     * This is automatically set by the component and should only be used in advanced cases.
+     */
+    'aria-controls'?: string;
+    /**
+     * Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
+     * should either be `true` or `undefined` and never `false`. This is automatically set by the
+     * component and should only be used in advanced cases.
+     */
+    'aria-selected'?: boolean;
+    /**
+     * Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex` set while
+     * all inactive tabs should have a `tabIndex={-1}`
+     */
+    tabIndex?: number;
+}
+export declare const Tab: import("../../common").ElementComponent<"button", TabProps>;
+//# sourceMappingURL=Tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6FD,eAAO,MAAM,GAAG,6DAad,CAAC"}

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

@@ -0,0 +1,95 @@
+"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 tokens_1 = require("@workday/canvas-kit-react/tokens");
+var common_1 = require("@workday/canvas-kit-react/common");
+var Tabs_1 = require("./Tabs");
+var list_1 = require("./list");
+var cursor_1 = require("./cursor");
+var StyledButton = common_1.styled('button')(__assign(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), { fontWeight: tokens_1.type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', maxWidth: '280px', padding: tokens_1.space.s, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.licorice300, position: 'relative', marginLeft: "" + tokens_1.space.xxxs, borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px", transition: 'background 150ms ease, color 150ms ease', '&:first-of-type': {
+        marginLeft: 0,
+    } }), common_1.hideMouseFocus), { '&:hover, &:focus': {
+        backgroundColor: tokens_1.colors.soap200,
+        color: tokens_1.colors.blackPepper400,
+    }, '&:focus': __assign({ outline: "none" }, common_1.focusRing({ inset: 'outer', width: 0, separation: 2 })), '&:disabled': {
+        color: tokens_1.colors.licorice100,
+        '&:hover': {
+            cursor: 'auto',
+            backgroundColor: "transparent",
+        },
+    }, '&[aria-selected=true]': {
+        color: tokens_1.colors.blueberry400,
+        cursor: 'default',
+        '&:after': {
+            position: 'absolute',
+            height: tokens_1.space.xxxs,
+            borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px",
+            backgroundColor: tokens_1.colors.blueberry400,
+            bottom: 0,
+            content: "''",
+            left: 0,
+            marginTop: '-2px',
+            width: '100%',
+        },
+        '&:hover, &:focus': {
+            backgroundColor: "transparent",
+            color: tokens_1.colors.blueberry400,
+        },
+    } }));
+var useTab = function (model, elemProps, ref) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var _a = common_1.useLocalRef(ref), localRef = _a.localRef, elementRef = _a.elementRef;
+    var name = list_1.useRegisterItem(model, localRef, elemProps.name, elemProps.index);
+    var state = model.state, events = model.events;
+    var onSelect = function () {
+        events.activate({ tab: name });
+    };
+    var isSelected = !!name && state.activeTab === name;
+    return common_1.mergeProps({
+        id: "tab-" + state.id + "-" + name,
+        tabIndex: !!name && state.cursorId === name ? undefined : -1,
+        'aria-selected': isSelected,
+        'aria-controls': "tabpanel-" + state.id + "-" + name,
+        onClick: onSelect,
+        isSelected: isSelected,
+        ref: elementRef,
+    }, cursor_1.useRovingFocusItem(model, elemProps));
+};
+exports.Tab = common_1.createComponent('button')({
+    displayName: 'Tabs.Item',
+    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 = useTab(localModel, elemProps, ref);
+        return (React.createElement(StyledButton, __assign({ type: "button", role: "tab", as: Element }, props), children));
+    },
+});

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAcD,eAAO,MAAM,OAAO,8DAkBlB,CAAC"}

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

@@ -30,16 +30,28 @@ 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 popup_1 = require("@workday/canvas-kit-react/popup");
+var cursor_1 = require("./cursor");
 var Tabs_1 = require("./Tabs");
-exports.TabsMenuPopper = common_1.createComponent('div')({
-    displayName: 'Tabs.MenuPopper',
-    Component: function (_a, ref) {
+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) {
         var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
         var localModel = common_1.useModelContext(Tabs_1.TabsModelContext, model);
-        var props = exports.useTabsMenuPopper(localModel.menu, elemProps, ref);
-        return React.createElement(popup_1.Popper, __assign({}, props), children);
+        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)));
     },
 });
-exports.useTabsMenuPopper = popup_1.usePopupPopper;

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

@@ -1,8 +1,7 @@
+/** @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<T = unknown> extends ExtractProps<typeof Box, never> {
+export interface TabPanelProps {
     /**
      * The contents of the TabPanel.
      */
@@ -24,16 +23,7 @@ export interface TabPanelProps<T = unknown> extends ExtractProps<typeof Box, nev
      * 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>;
+    model?: TabsModel;
 }
-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
+export declare const TabPanel: import("../../common").ElementComponent<"div", TabPanelProps>;
+//# sourceMappingURL=TabPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabPanel.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,WAAW,aAAa;IAC5B;;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;CACnB;AAUD,eAAO,MAAM,QAAQ,+DAiCnB,CAAC"}

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

@@ -0,0 +1,56 @@
+"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 });
+/** @jsx jsx */
+var react_1 = __importDefault(require("react"));
+var core_1 = require("@emotion/core");
+var common_1 = require("@workday/canvas-kit-react/common");
+var Tabs_1 = require("./Tabs");
+var styles = core_1.css(common_1.mouseFocusBehavior({
+    '&:focus': {
+        outline: 'none',
+    },
+}));
+exports.TabPanel = common_1.createComponent('div')({
+    displayName: 'Tabs.Panel',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, _b = _a.name, name = _b === void 0 ? '' : _b, model = _a.model, elemProps = __rest(_a, ["children", "name", "model"]);
+        var _c = common_1.useModelContext(Tabs_1.TabsModelContext, model), state = _c.state, events = _c.events;
+        var _d = react_1.default.useState(name), tabName = _d[0], setTabName = _d[1];
+        var _e = common_1.useLocalRef(ref), localRef = _e.localRef, elementRef = _e.elementRef;
+        common_1.useMountLayout(function () {
+            var index = state.panelIndexRef.current;
+            var tabName = name || String(index);
+            events.registerPanel({ item: { id: tabName, ref: localRef } });
+            setTabName(tabName);
+            return function () {
+                events.unregisterPanel({ id: tabName });
+            };
+        });
+        return (core_1.jsx(Element, __assign({ ref: elementRef, role: "tabpanel", css: styles, "aria-labelledby": "tab-" + state.id + "-" + tabName, hidden: !!tabName && tabName !== state.activeTab, id: "tabpanel-" + state.id + "-" + tabName, tabIndex: 0 }, elemProps), children));
+    },
+});

package/dist/commonjs/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>, "css" | "style" | "slot" | "title" | "dir" | "children" | "hidden" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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">, 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/commonjs/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/commonjs/tabs/lib/Tabs.js

@@ -16,42 +16,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
-var menu_1 = require("./menu");
-var TabsItem_1 = require("./TabsItem");
-var TabsList_1 = require("./TabsList");
-var TabsPanel_1 = require("./TabsPanel");
+var Tab_1 = require("./Tab");
+var TabList_1 = require("./TabList");
+var TabPanel_1 = require("./TabPanel");
 var useTabsModel_1 = require("./useTabsModel");
-var TabsOverflowButton_1 = require("./TabsOverflowButton");
-var TabsMenuPopper_1 = require("./TabsMenuPopper");
-var TabsPanels_1 = require("./TabsPanels");
 exports.TabsModelContext = react_1.default.createContext({});
 exports.Tabs = common_1.createComponent()({
     displayName: 'Tabs',
     Component: function (_a) {
         var children = _a.children, model = _a.model, config = __rest(_a, ["children", "model"]);
         var value = common_1.useDefaultModel(model, config, useTabsModel_1.useTabsModel);
-        return (react_1.default.createElement(exports.TabsModelContext.Provider, { value: value },
-            react_1.default.createElement(menu_1.Menu, { model: value.menu }, children)));
+        return react_1.default.createElement(exports.TabsModelContext.Provider, { value: value }, children);
     },
     subComponents: {
-        List: TabsList_1.TabsList,
-        Item: TabsItem_1.TabsItem,
-        Panel: TabsPanel_1.TabsPanel,
-        Panels: TabsPanels_1.TabsPanels,
-        OverflowButton: TabsOverflowButton_1.TabsOverflowButton,
-        MenuPopper: TabsMenuPopper_1.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_1.Menu,
+        List: TabList_1.TabList,
+        Item: Tab_1.Tab,
+        Panel: TabPanel_1.TabPanel,
     },
 });

package/dist/commonjs/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/commonjs/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/commonjs/tabs/lib/cursor/{useRovingFocus.js → hooks.js}

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

package/dist/commonjs/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/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,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/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("./useRovingFocus"));
+__export(require("./hooks"));
 __export(require("./useCursorModel"));