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

package/dist/es6/tabs/lib/selection/useResetCursorOnBlur.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SelectionModel } from './useSelectionModel';
+/**
+ * Reset the cursor to the selected item when the list looses focus
+ */
+export declare const useResetCursorOnBlur: <P extends {}, R>(model: SelectionModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+    onKeyDown(event: React.KeyboardEvent<Element>): void;
+    onFocus(): void;
+    onBlur(): void;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
+//# sourceMappingURL=useResetCursorOnBlur.d.ts.map

package/dist/es6/tabs/lib/selection/useResetCursorOnBlur.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResetCursorOnBlur.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/selection/useResetCursorOnBlur.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;OAkB/B,CAAC"}

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

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

package/dist/es6/tabs/lib/selection/useSelectionItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SelectionModel } from './useSelectionModel';
+export declare const useSelectionItem: <P extends {}, R>(model: SelectionModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+    onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
+//# sourceMappingURL=useSelectionItem.d.ts.map

package/dist/es6/tabs/lib/selection/useSelectionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectionItem.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/selection/useSelectionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAEnD,eAAO,MAAM,gBAAgB;;;;OAmB5B,CAAC"}

package/dist/es6/tabs/lib/selection/useSelectionItem.js

@@ -0,0 +1,14 @@
+import { createHook } from '@workday/canvas-kit-react/common';
+export var useSelectionItem = createHook(function (_a, _, elemProps) {
+    var state = _a.state, events = _a.events;
+    if (elemProps === void 0) { elemProps = {}; }
+    var name = elemProps.name || '';
+    var onClick = function (event) {
+        if (state.nonInteractiveIds.includes(name) ||
+            event.currentTarget.hasAttribute('aria-disabled')) {
+            return;
+        }
+        events.select({ id: name });
+    };
+    return { onClick: onClick };
+});

package/dist/es6/tabs/lib/selection/useSelectionModel.d.ts

@@ -0,0 +1,62 @@
+import { ToModelConfig } from '@workday/canvas-kit-react/common';
+import { CursorState, CursorEvents, BaseCursorModelConfig, CursorModel } from '../cursor/useCursorModel';
+export declare type Orientation = 'horizontal' | 'vertical';
+export declare type SelectionState<T = unknown> = CursorState<T> & {
+    selectedIds: 'all' | string[];
+    unselectedIds: string[];
+};
+export declare type SelectionEvents<T = unknown> = CursorEvents<T> & {
+    /** Select a specific item by its identifier. */
+    select(data: {
+        id: string;
+    }): void;
+    /** Select all items. This will set `selectedIds` to `'all'` and remove all `unselectedIds`.
+     * This is especially useful for virtual lists where not all items are loaded in memory.
+     */
+    selectAll(): void;
+    unselectAll(): void;
+};
+export interface SelectionModel<T = unknown> extends CursorModel<T> {
+    state: SelectionState<T>;
+    events: SelectionEvents<T>;
+    selection: SelectionManager;
+}
+export declare const selectionEventMap: {
+    guards: {
+        /** Should a cursor position be set? Use only in advance use-cases */
+        shouldSelect: "select";
+        shouldGoTo: "goTo";
+        shouldRegisterItem: "registerItem";
+        shouldUnregisterItem: "unregisterItem";
+        shouldUpdateItemPosition: "updateItemPosition";
+    };
+    callbacks: {
+        /**
+         * Called when a cursor position has been changed. Useful to set state or perform side effects.
+         * This is called during state change batching, so calling state setters will not invoke extra
+         * renders.
+         */
+        onSelect: "select";
+        onGoTo: "goTo";
+        onRegisterItem: "registerItem";
+        onUnregisterItem: "unregisterItem";
+        onUpdateItemPosition: "updateItemPosition";
+    };
+};
+/**
+ * A SelectionManager is used
+ */
+export interface SelectionManager {
+    select(id: string, prevState: Pick<SelectionState, 'selectedIds' | 'unselectedIds'>): Pick<SelectionState, 'selectedIds' | 'unselectedIds'>;
+}
+export declare const isSelected: (id: string, { selectedIds, unselectedIds }: Pick<SelectionState<unknown>, "selectedIds" | "unselectedIds">) => boolean;
+export declare const singleSelectionManager: SelectionManager;
+export declare const multiSelectionManager: SelectionManager;
+export declare type BaseSelectionModelConfig<T> = BaseCursorModelConfig<T> & {
+    initialSelectedIds?: string[];
+    initialUnselectedIds?: string[];
+    selection?: SelectionManager;
+};
+export declare type SelectionModelConfig<T> = BaseSelectionModelConfig<T> & Partial<ToModelConfig<SelectionState<T>, SelectionEvents<T>, typeof selectionEventMap>>;
+export declare const useSelectionModel: <T extends unknown>(config?: SelectionModelConfig<T>) => SelectionModel<T>;
+//# sourceMappingURL=useSelectionModel.d.ts.map

package/dist/es6/tabs/lib/selection/useSelectionModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectionModel.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/selection/useSelectionModel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,aAAa,EAAc,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EACL,WAAW,EACX,YAAY,EACZ,qBAAqB,EAIrB,WAAW,EACZ,MAAM,0BAA0B,CAAC;AAElC,oBAAY,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAEpD,oBAAY,cAAc,CAAC,CAAC,GAAG,OAAO,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IACzD,WAAW,EAAE,KAAK,GAAG,MAAM,EAAE,CAAC;IAC9B,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,oBAAY,eAAe,CAAC,CAAC,GAAG,OAAO,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG;IAC3D,gDAAgD;IAChD,MAAM,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,SAAS,IAAI,IAAI,CAAC;IAClB,WAAW,IAAI,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,WAAW,CAAC,CAAC,CAAC;IACjE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACzB,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC3B,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB;;QAG1B,qEAAqE;;;;;;;;QAKrE;;;;WAIG;;;;;;;CAGL,CAAC;AAEH;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CACJ,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,aAAa,GAAG,eAAe,CAAC,GAC/D,IAAI,CAAC,cAAc,EAAE,aAAa,GAAG,eAAe,CAAC,CAAC;CAC1D;AAED,eAAO,MAAM,UAAU,yHAQtB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,gBAIpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,gBAmBnC,CAAC;AAEF,oBAAY,wBAAwB,CAAC,CAAC,IAAI,qBAAqB,CAAC,CAAC,CAAC,GAAG;IACnE,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B,CAAC;AAEF,oBAAY,oBAAoB,CAAC,CAAC,IAAI,wBAAwB,CAAC,CAAC,CAAC,GAC/D,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC;AAE1F,eAAO,MAAM,iBAAiB,4EAwB7B,CAAC"}

package/dist/es6/tabs/lib/selection/useSelectionModel.js

@@ -0,0 +1,75 @@
+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);
+};
+import React from 'react';
+import { createEventMap, useEventMap } from '@workday/canvas-kit-react/common';
+import { useCursorModel, cursorEventMap, } from '../cursor/useCursorModel';
+export var selectionEventMap = createEventMap()({
+    guards: __assign(__assign({}, cursorEventMap.guards), { 
+        /** Should a cursor position be set? Use only in advance use-cases */
+        shouldSelect: 'select' }),
+    callbacks: __assign(__assign({}, cursorEventMap.callbacks), { 
+        /**
+         * Called when a cursor position has been changed. Useful to set state or perform side effects.
+         * This is called during state change batching, so calling state setters will not invoke extra
+         * renders.
+         */
+        onSelect: 'select' }),
+});
+export var isSelected = function (id, _a) {
+    var selectedIds = _a.selectedIds, unselectedIds = _a.unselectedIds;
+    if (selectedIds === 'all') {
+        return !unselectedIds.includes(id);
+    }
+    return selectedIds.includes(id);
+};
+export var singleSelectionManager = {
+    select: function (id) {
+        return { selectedIds: [id], unselectedIds: [] };
+    },
+};
+export var multiSelectionManager = {
+    select: function (id, _a) {
+        var selectedIds = _a.selectedIds, unselectedIds = _a.unselectedIds;
+        if (selectedIds === 'all') {
+            // If we have all selected, start adding/removing from `unselectedIds`
+            var existingKey = unselectedIds.includes(id);
+            return {
+                selectedIds: 'all',
+                unselectedIds: existingKey
+                    ? unselectedIds.filter(function (key) { return key !== id; })
+                    : unselectedIds.concat(id),
+            };
+        }
+        else {
+            var existingKey = selectedIds.includes(id);
+            return {
+                selectedIds: existingKey ? selectedIds.filter(function (key) { return key !== id; }) : selectedIds.concat(id),
+                unselectedIds: [],
+            };
+        }
+    },
+};
+export var useSelectionModel = function (config) {
+    if (config === void 0) { config = {}; }
+    var cursor = useCursorModel(config);
+    var _a = React.useState(config.initialSelectedIds || []), selectedIds = _a[0], setSelectedIds = _a[1];
+    var _b = React.useState(config.initialUnselectedIds || []), unselectedIds = _b[0], setUnselectedIds = _b[1];
+    var selection = config.selection || singleSelectionManager;
+    var state = __assign(__assign({}, cursor.state), { selectedIds: selectedIds, unselectedIds: unselectedIds });
+    var events = useEventMap(selectionEventMap, state, config, __assign(__assign({}, cursor.events), { select: function (data) {
+            var _a = selection.select(data.id, state), selectedIds = _a.selectedIds, unselectedIds = _a.unselectedIds;
+            setSelectedIds(selectedIds);
+            setUnselectedIds(unselectedIds);
+            events.goTo({ id: data.id });
+        } }));
+    return { state: state, events: events, selection: selection, getId: cursor.getId };
+};

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

@@ -1,70 +1,70 @@
-import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
-import { CursorState, CursorEvents, BaseCursorModelConfig, Orientation } from './cursor/useCursorModel';
-import { Item, ListEvents, ListState } from './list/useListModel';
-export declare type TabsState = CursorState & {
-    /**
-     * The name of the active tab provided to the `Tabs.Item` component. If no name is provided, it
-     * will be a string of the index position.
-     */
-    activeTab: string;
+import { ToModelConfig } from '@workday/canvas-kit-react/common';
+import { Orientation } from './cursor';
+import { ListEvents, ListState } from './list';
+import { MenuModel, MenuModelConfig } from './menu';
+import { OverflowEvents, OverflowState, BaseOverflowModelConfig, OverflowModel } from './overflow';
+export declare type TabsState<T> = OverflowState<T> & {
+    /** IDREF of the list. Children ids can be derived from this id */
+    id: string;
     /**
      * A list of panels. Uses `ListModel`
      */
-    panels: Item[];
+    panels: T[];
     /**
      * A React.Ref of the current item index. A ref is used to allow for updating outside the normal
      * React state cycle to ensure accurate index tracking as items are registered within the same
      * state setting phase.
      */
-    panelIndexRef: ListState['indexRef'];
+    panelIndexRef: ListState<T>['indexRef'];
+    orientation: Orientation;
+    getId: (item: T) => string;
 };
-export declare type TabsEvents = CursorEvents & {
-    /**
-     * This event will set the `activeTab` in the state. Called when a user activates a tab
-     */
-    activate(data: {
-        /**
-         * The name of the tab provided to the `Tabs.Item` component. If no name is provided, it will
-         * be a string of the index position
-         */
-        tab: string;
-    }): void;
+export declare type TabsEvents<T = unknown> = OverflowEvents<T> & {
     /**
      * This event registers panels with state.panels. Called when a panel is mounted.
      */
-    registerPanel: ListEvents['registerItem'];
+    registerPanel: ListEvents<T>['registerItem'];
     /**
      * This event unregisters panels with state.panels. Called when a panel is unmounted.
      */
-    unregisterPanel: ListEvents['unregisterItem'];
+    unregisterPanel: ListEvents<T>['unregisterItem'];
 };
-export declare type TabsModel = Model<TabsState, TabsEvents>;
+export interface TabsModel<T = unknown> extends OverflowModel<T> {
+    state: TabsState<T>;
+    events: TabsEvents<T>;
+    menu: MenuModel<T>;
+}
 export declare const tabEventMap: {
     guards: {
-        /**
-         * Should the tab activate? Can prevent the tab from activating. Use this only for advanced
-         * use-cases.
+        shouldSetContainerWidth: "setContainerWidth";
+        shouldSetOverflowTargetWidth: "setOverflowTargetWidth";
+        shouldAddItemWidth: "addItemWidth";
+        shouldRemoveItemWidth: "removeItemWidth";
+        shouldAddHiddenKey: "addHiddenKey";
+        shouldRemoveHiddenKey: "removeHiddenKey";
+        shouldSelect: "select"; /**
+         * This event unregisters panels with state.panels. Called when a panel is unmounted.
          */
-        shouldActivate: "activate";
         shouldGoTo: "goTo";
         shouldRegisterItem: "registerItem";
         shouldUnregisterItem: "unregisterItem";
         shouldUpdateItemPosition: "updateItemPosition";
     };
     callbacks: {
-        /**
-         * This callback will fire whenever a tab is activated. The data will contain the tab's named
-         * passed to the `Tabs.Item` component. If no name was passed, it will be the index of the tab
-         * as a string.
-         */
-        onActivate: "activate";
+        onSetContainerWidth: "setContainerWidth";
+        onSetOverflowTargetWidth: "setOverflowTargetWidth";
+        onAddItemWidth: "addItemWidth";
+        onRemoveItemWidth: "removeItemWidth";
+        onAddHiddenKey: "addHiddenKey";
+        onRemoveHiddenKey: "removeHiddenKey";
+        onSelect: "select";
         onGoTo: "goTo";
         onRegisterItem: "registerItem";
         onUnregisterItem: "unregisterItem";
         onUpdateItemPosition: "updateItemPosition";
     };
 };
-export declare type BaseTabsModelConfig = Omit<BaseCursorModelConfig, 'orientation'> & {
+export declare type BaseTabsModelConfig<T> = Omit<BaseOverflowModelConfig<T>, 'orientation'> & {
     /**
      * Optional id for the whole `Tabs` group. The `aria-controls` of the `Tab.Item` and `id` of the
      * `Tab.Panel` will automatically derived from this id. If not provided, a unique id will be
@@ -83,7 +83,8 @@ export declare type BaseTabsModelConfig = Omit<BaseCursorModelConfig, 'orientati
      * @default 'horizontal'
      */
     orientation?: Orientation;
+    menuConfig?: MenuModelConfig<T>;
 };
-export declare type TabsModelConfig = BaseTabsModelConfig & Partial<ToModelConfig<TabsState, TabsEvents, typeof tabEventMap>>;
-export declare const useTabsModel: (config?: TabsModelConfig) => Model<TabsState, TabsEvents>;
+export declare type TabsModelConfig<T> = BaseTabsModelConfig<T> & Partial<ToModelConfig<TabsState<T>, TabsEvents<T>, typeof tabEventMap>>;
+export declare const useTabsModel: <T extends unknown>(config?: TabsModelConfig<T>) => TabsModel<T>;
 //# sourceMappingURL=useTabsModel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTabsModel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/useTabsModel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,EAAE,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACnG,OAAO,EACL,WAAW,EACX,YAAY,EAGZ,qBAAqB,EACrB,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAe,MAAM,qBAAqB,CAAC;AAE9E,oBAAY,SAAS,GAAG,WAAW,GAAG;IACpC;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,EAAE,IAAI,EAAE,CAAC;IACf;;;;OAIG;IACH,aAAa,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;CACtC,CAAC;AAEF,oBAAY,UAAU,GAAG,YAAY,GAAG;IACtC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE;QACb;;;WAGG;QACH,GAAG,EAAE,MAAM,CAAC;KACb,GAAG,IAAI,CAAC;IACT;;OAEG;IACH,aAAa,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IAC1C;;OAEG;IACH,eAAe,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;CAC/C,CAAC;AAEF,oBAAY,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAErD,eAAO,MAAM,WAAW;;QAGpB;;;WAGG;;;;;;;;QAKH;;;;WAIG;;;;;;;CAGL,CAAC;AAEH,oBAAY,mBAAmB,GAAG,IAAI,CAAC,qBAAqB,EAAE,aAAa,CAAC,GAAG;IAC7E;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,oBAAY,eAAe,GAAG,mBAAmB,GAC/C,OAAO,CAAC,aAAa,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,WAAW,CAAC,CAAC,CAAC;AAEpE,eAAO,MAAM,YAAY,4DA8CxB,CAAC"}
+{"version":3,"file":"useTabsModel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/useTabsModel.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,aAAa,EAGd,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AACrC,OAAO,EAAe,UAAU,EAAE,SAAS,EAAe,MAAM,QAAQ,CAAC;AACzE,OAAO,EAAC,SAAS,EAAE,eAAe,EAAe,MAAM,QAAQ,CAAC;AAChE,OAAO,EAEL,cAAc,EACd,aAAa,EAEb,uBAAuB,EAEvB,aAAa,EACd,MAAM,YAAY,CAAC;AAEpB,oBAAY,SAAS,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG;IAC5C,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ;;;;OAIG;IACH,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IACxC,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAC5B,CAAC;AAEF,oBAAY,UAAU,CAAC,CAAC,GAAG,OAAO,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IACxD;;OAEG;IACH,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;CAClD,CAAC;AAEF,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;IAC9D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACpB;AAED,eAAO,MAAM,WAAW;;;;;;;;gCAZtB;;WAEG;;;;;;;;;;;;;;;;;;;CAiBH,CAAC;AAEH,oBAAY,mBAAmB,CAAC,CAAC,IAAI,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,GAAG;IACrF;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,oBAAY,eAAe,CAAC,CAAC,IAAI,mBAAmB,CAAC,CAAC,CAAC,GACrD,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,WAAW,CAAC,CAAC,CAAC;AAE1E,eAAO,MAAM,YAAY,kEAwExB,CAAC"}

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

@@ -10,52 +10,65 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { createEventMap, useEventMap } from '@workday/canvas-kit-react/common';
-import { cursorEventMap, useCursorModel, getNext, } from './cursor/useCursorModel';
-import { useListModel } from './list/useListModel';
+import { createEventMap, useEventMap, useUniqueId, } from '@workday/canvas-kit-react/common';
+import { defaultGetId, useListModel } from './list';
+import { useMenuModel } from './menu';
+import { overflowEventMap, useOverflowModel, } from './overflow';
 export var tabEventMap = createEventMap()({
-    guards: __assign(__assign({}, cursorEventMap.guards), { 
-        /**
-         * Should the tab activate? Can prevent the tab from activating. Use this only for advanced
-         * use-cases.
-         */
-        shouldActivate: 'activate' }),
-    callbacks: __assign(__assign({}, cursorEventMap.callbacks), { 
-        /**
-         * This callback will fire whenever a tab is activated. The data will contain the tab's named
-         * passed to the `Tabs.Item` component. If no name was passed, it will be the index of the tab
-         * as a string.
-         */
-        onActivate: 'activate' }),
+    guards: __assign({}, overflowEventMap.guards),
+    callbacks: __assign({}, overflowEventMap.callbacks),
 });
 export var useTabsModel = function (config) {
     if (config === void 0) { config = {}; }
-    var initialTabRef = React.useRef(config.initialTab);
-    var _a = React.useState(initialTabRef.current || ''), activeTab = _a[0], setActiveTab = _a[1];
-    var cursor = useCursorModel(__assign({ orientation: config.orientation || 'horizontal' }, config));
+    var _a;
+    var id = useUniqueId(config.id);
+    var initialSelectedRef = React.useRef(config.initialTab);
+    var getId = config.getId || defaultGetId;
+    var items = config.items; // || (emptyItems as T[]);
+    var model = useOverflowModel(__assign(__assign({}, config), { id: id + "-tabs", orientation: config.orientation || 'horizontal', items: items,
+        onRegisterItem: function (_a) {
+            var data = _a.data, prevState = _a.prevState;
+            var _b;
+            (_b = config === null || config === void 0 ? void 0 : config.onRegisterItem) === null || _b === void 0 ? void 0 : _b.call(config, { data: data, prevState: prevState });
+            if (!initialSelectedRef.current) {
+                initialSelectedRef.current = getId(data.item);
+                events.select({ id: initialSelectedRef.current });
+            }
+        }, initialSelectedIds: config.initialTab
+            ? [config.initialTab]
+            : ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? [getId(config.items[0])]
+                : [] }));
     var panels = useListModel();
-    var state = __assign(__assign({}, cursor.state), { activeTab: activeTab, panels: panels.state.items, panelIndexRef: panels.state.indexRef });
-    var events = useEventMap(tabEventMap, state, config, __assign(__assign({}, cursor.events), { activate: function (data) {
-            setActiveTab(data.tab);
-            events.goTo({ id: data.tab });
+    var state = __assign(__assign({}, model.state), { id: id,
+        getId: getId, orientation: config.orientation || 'horizontal', panels: panels.state.items, panelIndexRef: panels.state.indexRef });
+    var overflowItems = React.useMemo(function () { return (items ? items.filter(function (item) { return state.hiddenIds.includes(getId(item)); }) : undefined); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.hiddenIds, items]);
+    var events = useEventMap(tabEventMap, state, config, __assign(__assign({}, model.events), { registerPanel: panels.events.registerItem, unregisterPanel: panels.events.unregisterItem }));
+    var menu = useMenuModel({
+        id: id + "-menu",
+        items: overflowItems,
+        nonInteractiveIds: state.nonInteractiveIds.filter(function (key) { return !state.hiddenIds.includes(key); }),
+        onSelect: function (_a) {
+            var data = _a.data, prevState = _a.prevState;
+            var _b, _c;
+            menu.events.hide();
+            events.select(data);
+            (_c = (_b = config.menuConfig) === null || _b === void 0 ? void 0 : _b.onSelect) === null || _c === void 0 ? void 0 : _c.call(_b, { data: data, prevState: prevState });
         },
-        registerItem: function (data) {
-            if (!initialTabRef.current) {
-                initialTabRef.current = data.item.id;
-                setActiveTab(initialTabRef.current);
-            }
-            cursor.events.registerItem(data);
+        onShow: function (_a) {
+            var data = _a.data, prevState = _a.prevState;
+            var _b, _c;
+            // Always select the first item when the menu is opened
+            menu.events.first();
+            (_c = (_b = config.menuConfig) === null || _b === void 0 ? void 0 : _b.onShow) === null || _c === void 0 ? void 0 : _c.call(_b, { data: data, prevState: prevState });
         },
-        unregisterItem: function (data) {
-            // Activate the next tab if the current one is removed
-            if (state.activeTab === data.id && state.items.some(function (i) { return i.ref.current !== null; })) {
-                var item = getNext(state.activeTab, state.items);
-                events.activate({ tab: item.id });
-            }
-            cursor.events.unregisterItem(data);
-        }, registerPanel: panels.events.registerItem, unregisterPanel: panels.events.unregisterItem }));
+    });
     return {
         state: state,
         events: events,
+        menu: menu,
+        getId: model.getId,
+        selection: model.selection,
     };
 };

package/dist/es6/tokens/index.d.ts

@@ -1,7 +1,7 @@
 import { colors, gradients } from '@workday/canvas-colors-web';
 import { borderRadius, CanvasBorderRadius, CanvasBorderRadiusKeys, CanvasBorderRadiusValues } from './lib/radius';
 import { BrandingColor, CanvasColor } from './lib/colors.types';
-import depth, { CanvasDepth, CanvasDepthValue } from './lib/depth';
+import { depth, CanvasDepth, CanvasDepthValues } from './lib/depth';
 import { space, CanvasSpace, CanvasSpaceKeys, CanvasSpaceValues, CanvasSpaceNumberValues, CanvasSpaceNumbers, spaceNumbers } from './lib/space';
 import { type, fontFamily, monoFontFamily, CanvasType, CanvasTypeProperties, CanvasTypeVariants, CanvasTypeHierarchy } from './lib/type';
 import { CSSProperties } from './lib/types';
@@ -326,24 +326,7 @@ declare const canvas: {
         hoverBackground: string;
         divider: string;
     };
-    depth: {
-        inset: {
-            boxShadow: "inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)";
-        };
-        1: {
-            boxShadow: "0px 2px 4px 0 rgba(0, 0, 0, 0.08)";
-        };
-        2: {
-            boxShadow: "0px 4px 8px 0 rgba(0, 0, 0, 0.1)";
-        };
-        3: {
-            boxShadow: "0px 8px 16px 0 rgba(0, 0, 0, 0.12)";
-        };
-        4: {
-            border: "1px solid rgba(218, 226, 230, 1)";
-            boxShadow: "0px 8px 16px 0 rgba(0, 0, 0, 0.12)";
-        };
-    };
+    depth: CanvasDepth;
     fontFamily: string;
     gradients: {
         [key: string]: string;
@@ -427,7 +410,7 @@ declare const canvas: {
     };
 };
 export * from '@workday/canvas-colors-web';
-export { borderRadius, colors, gradients, depth, space, spaceNumbers, type, fontFamily, monoFontFamily, BrandingColor, CanvasDepth, CanvasDepthValue, CSSProperties, };
+export { borderRadius, colors, gradients, depth, space, spaceNumbers, type, fontFamily, monoFontFamily, BrandingColor, CanvasDepth, CanvasDepthValues, CSSProperties, };
 export default canvas;
 export type { CanvasBorderRadius, CanvasBorderRadiusKeys, CanvasBorderRadiusValues, CanvasColor, CanvasSpace, CanvasSpaceKeys, CanvasSpaceValues, CanvasSpaceNumberValues, CanvasSpaceNumbers, CanvasType, CanvasTypeProperties, CanvasTypeVariants, CanvasTypeHierarchy, };
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,MAAM,EAEN,SAAS,EAKV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAChH,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AACjE,OAAO,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,IAAI,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBX,CAAC;AAEF,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,aAAa,GACd,CAAC;AACF,eAAe,MAAM,CAAC;AAEtB,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,MAAM,EAEN,SAAS,EAKV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAChH,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAClE,OAAO,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,IAAI,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBX,CAAC;AAEF,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,GACd,CAAC;AACF,eAAe,MAAM,CAAC;AAEtB,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACpB,CAAA"}

package/dist/es6/tokens/index.js

@@ -1,7 +1,7 @@
 import { buttonColors, chartingColorOffsets, chartingColors, colors, commonColors, gradients, iconColors, inputColors, statusColors, typeColors, } from '@workday/canvas-colors-web';
 import { borderRadius } from './lib/radius';
 import { BrandingColor } from './lib/colors.types';
-import depth from './lib/depth';
+import { depth } from './lib/depth';
 import { space, spaceNumbers, } from './lib/space';
 import { type, fontFamily, monoFontFamily, } from './lib/type';
 var canvas = {

package/dist/es6/tokens/lib/depth.d.ts

@@ -1,4 +1,110 @@
-import depth, { CanvasDepth, CanvasDepthValue } from '@workday/canvas-depth-web';
-export { CanvasDepth, CanvasDepthValue };
-export default depth;
+export declare type CanvasDepth = {
+    /**
+     * ### Depth Inset
+     * 	Used for inset containers
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const insetCardStyles = {
+     *   ...depth.inset,
+     * };
+     * ```
+     */
+    inset: {
+        boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)';
+    };
+    /**
+     * ### Depth 1
+     * Used for minimal offset
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[1],
+     * };
+     * ```
+     */
+    1: {
+        boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)';
+    };
+    /**
+     * ### Depth 2
+     * Used for Cards, Popups, and Menus — our most common depth
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[2],
+     * };
+     * ```
+     */
+    2: {
+        boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)';
+    };
+    /**
+     * ### Depth 3
+     * Used for interactive Cards on hover
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[3],
+     * };
+     * ```
+     */
+    3: {
+        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    };
+    /**
+     * ### Depth 4
+     * Used for Cards on white backgrounds — adds border styles for more contrast
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[4],
+     * };
+     * ```
+     */
+    4: {
+        border: '1px solid rgba(218, 226, 230, 1)';
+        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    };
+};
+declare type ValueOf<T> = T[keyof T];
+export declare type CanvasDepthValues = ValueOf<CanvasDepth>;
+/**
+ * ### Depth Tokens
+ *
+ * Depth is the relative distance between surfaces in the z-axis.
+ * It provides delineation, focus, and priority with shadows and layering.
+ * There are five depth levels, `inset`, `1`, `2`, `3`, and `4`.
+ * Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+ *
+ * @example
+ * ```tsx
+ * import { depth } from '@workday/canvas-kit-react/tokens';
+ *
+ * const CustomCard = () => {
+ *   return (
+ *     <div css={depth[2]}>
+ *       A standard-depth card
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ */
+export declare const depth: CanvasDepth;
+export {};
 //# sourceMappingURL=depth.d.ts.map

package/dist/es6/tokens/lib/depth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/depth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAC,WAAW,EAAE,gBAAgB,EAAC,CAAC;AAEvC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/depth.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG;IACxB;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE;QACL,SAAS,EAAE,6CAA6C,CAAC;KAC1D,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,mCAAmC,CAAC;KAChD,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,kCAAkC,CAAC;KAC/C,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,oCAAoC,CAAC;KACjD,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,MAAM,EAAE,kCAAkC,CAAC;QAC3C,SAAS,EAAE,oCAAoC,CAAC;KACjD,CAAC;CACH,CAAC;AAEF,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK,EAAE,WAiBnB,CAAC"}