@workday/canvas-kit-react 5.3.0-next.9 → 5.3.0

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

package/dist/es6/tokens/lib/depth.js

@@ -1,2 +1,40 @@
-import depth from '@workday/canvas-depth-web';
-export default depth;
+/**
+ * ### 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 var 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)',
+    },
+};

package/dist/es6/tooltip/lib/OverflowTooltip.d.ts

@@ -1,5 +1,15 @@
 import * as React from 'react';
 import { Placement } from '@workday/canvas-kit-react/popup';
+/**
+ * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
+ * This could be the passed element, or a descendant. If no element is found, `null` is returned.
+ */
+export declare const findOverflowElement: (element: Element) => Element | null;
+/**
+ * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
+ * This could be the passed element, or a descendant. If no element is found, `null` is returned.
+ */
+export declare const findEllipsisElement: (element: Element) => Element | null;
 export interface OverflowTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     /**
      * The target (anchor element) for the Tooltip.

package/dist/es6/tooltip/lib/OverflowTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AA+D7F,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,eAAe,8EA4C3B,CAAC"}
+{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F;;;GAGG;AACH,eAAO,MAAM,mBAAmB,sCAoB/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,sCAe/B,CAAC;AAcF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,eAAe,8EA4C3B,CAAC"}

package/dist/es6/tooltip/lib/OverflowTooltip.js

@@ -29,7 +29,7 @@ import { useTooltip } from './useTooltip';
  * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
  */
-var findOverflowElement = function (element) {
+export var findOverflowElement = function (element) {
     var style = getComputedStyle(element);
     if (style.overflow === 'auto' ||
         style.overflow === 'scroll' ||
@@ -53,12 +53,13 @@ var findOverflowElement = function (element) {
  * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
  */
-var findEllipsisElement = function (element) {
+export var findEllipsisElement = function (element) {
     var style = getComputedStyle(element);
     if (style.textOverflow === 'ellipsis' || Number(style.webkitLineClamp) > 0) {
         return element;
     }
-    else {
+    else if (element.children) {
+        // `children` is not defined for SVGElement in IE11
         for (var i = 0; i < element.children.length; i++) {
             var overflowElement = findEllipsisElement(element.children[i]);
             if (overflowElement) {
@@ -67,6 +68,7 @@ var findEllipsisElement = function (element) {
         }
         return null;
     }
+    return null;
 };
 var isOverflowed = function (element) {
     var overflowElement = findEllipsisElement(element) || findOverflowElement(element);

package/dist/es6/tooltip/lib/useTooltip.d.ts

@@ -33,7 +33,7 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
         onMouseEnter: (event: React.SyntheticEvent<Element, Event>) => void;
         onMouseLeave: () => void;
         onMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
-        onFocus: (event: React.FocusEvent<Element>) => void;
+        onFocus: (event: React.FocusEvent<Element, Element>) => void;
         onBlur: () => void;
     };
     /** Mix these properties into the `Popper` component */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "5.3.0-next.9+47f4d0a9",
+  "version": "5.3.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -56,10 +56,9 @@
     "@emotion/styled": "^10.0.27",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-depth-web": "^0.16.4",
-    "@workday/canvas-kit-labs-react": "^5.3.0-next.9+47f4d0a9",
-    "@workday/canvas-kit-popup-stack": "^5.3.0-next.9+47f4d0a9",
-    "@workday/canvas-kit-preview-react": "^5.3.0-next.9+47f4d0a9",
+    "@workday/canvas-kit-labs-react": "^5.3.0",
+    "@workday/canvas-kit-popup-stack": "^5.3.0",
+    "@workday/canvas-kit-preview-react": "^5.3.0",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -68,12 +67,14 @@
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
     "react-innertext": "^1.1.5",
+    "resize-observer-polyfill": "^1.5.1",
     "rtl-css-js": "^1.14.1",
+    "use-resize-observer": "~7.0.1",
     "uuid": "^3.3.3"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^1.0.0",
     "@workday/canvas-applet-icons-web": "^0.17.50"
   },
-  "gitHead": "47f4d0a90fddfb15752be9e6449be2979f934636"
+  "gitHead": "0cf3030eb73935b5679f8c9bb79fb6178a721a4a"
 }

package/pagination/lib/Pagination/GoTo/Label.tsx

@@ -7,6 +7,9 @@ import {PaginationModel} from '../types';
 
 export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   model: PaginationModel;
+  /**
+   * Accepts child elements or a render prop.
+   */
   children?: (model: PaginationModel) => React.ReactNode | React.ReactNode;
 }
 

package/pagination/lib/Pagination/types.ts

@@ -1,17 +1,56 @@
 export interface PaginationState {
-  currentPage: number; // current page
-  firstPage: number; // first page
-  lastPage: number; // last page
-  range: number[]; // array of page numbers
-  rangeSize: number; // size of the range
+  /**
+   * The page number for the current page
+   */
+  currentPage: number;
+  /**
+   * The page number for the first page
+   */
+  firstPage: number;
+  /**
+   * The page number for the last page (it can also be used as a total page
+   * count)
+   */
+  lastPage: number;
+  /**
+   * An array of page numbers included in the pagination range
+   */
+  range: number[];
+  /**
+   * The size of the pagination range
+   */
+  rangeSize: number;
 }
 
 export interface PaginationEvents {
+  /**
+   * Sets the current page to a given page number (no safeguards)
+   */
   setCurrentPage: (page: number) => void;
+  /**
+   * Sets the current page to the first page
+   */
   first: () => void;
+  /**
+   * Sets the current page to the last page
+   */
   last: () => void;
+  /**
+   * Increments the current page by 1
+   */
   next: () => void;
+  /**
+   * Decrements the current page by 1
+   */
   previous: () => void;
+  /**
+   * Sets the current page to a given page number (with safeguards). `goTo`
+   * is very similar to `setCurrentPage`, but it has some built-in safeguards.
+   * If the page number provided is below the first page (e.g: `0`),
+   * `currentPage` will be set to the `firstPage`. Similarly, if the number
+   * provided is larger than the `lastPage`, it will set `currentPage` to the
+   * `lastPage`.
+   */
   goTo: (page: number) => void;
 }
 

package/pagination/lib/Pagination/usePaginationModel.ts

@@ -5,10 +5,29 @@ import {getRangeMax, getRangeMin} from './common/utils/helpers';
 import {PaginationModel} from './types';
 
 export type UsePaginationModelConfig = {
+  /**
+   * The page number for the last page (it can also be used as a total page
+   * count)
+   */
   lastPage: number;
+  /**
+   * The page number for the first page
+   * @default 1
+   */
   firstPage?: number;
+  /**
+   * The initial current page
+   * @default 1
+   */
   initialCurrentPage?: number;
+  /**
+   * The function called when the page changes
+   */
   onPageChange?: (pageNumber: number) => void;
+  /**
+   * The size of the pagination range
+   * @default 5
+   */
   rangeSize?: number;
 };
 

package/popup/lib/PopupCard.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {keyframes} from '@emotion/core';
 
 import {Card} from '@workday/canvas-kit-react/card';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {space, type} from '@workday/canvas-kit-react/tokens';
 import {
   styled,
   TransformOrigin,
@@ -43,6 +43,7 @@ const popupAnimation = (transformOrigin: TransformOrigin) => {
 const StyledPopupCard = styled(Card)<
   StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
 >(
+  type.levels.subtext.large,
   {
     position: 'relative',
     maxWidth: `calc(100vw - ${space.l})`,
@@ -87,7 +88,7 @@ export const PopupCard = createComponent('div')({
         padding={padding}
         {...props}
       >
-        <Card.Body>{children}</Card.Body>
+        {children}
       </StyledPopupCard>
     );
   },

package/tabs/index.ts

@@ -1,2 +1,8 @@
 export * from './lib/Tabs';
 export * from './lib/useTabsModel';
+
+export {StyledTabItem, useTabsItem} from './lib/TabsItem';
+export {useTabsList} from './lib/TabsList';
+export {useTabsMenuPopper} from './lib/TabsMenuPopper';
+export {useTabsOverflowButton} from './lib/TabsOverflowButton';
+export {useTabsPanel} from './lib/TabsPanel';

package/tabs/lib/Tabs.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 
 import {createComponent, useDefaultModel} from '@workday/canvas-kit-react/common';
+import {Menu} from './menu';
 
-import {Tab} from './Tab';
-import {TabList} from './TabList';
-import {TabPanel} from './TabPanel';
+import {TabsItem} from './TabsItem';
+import {TabsList} from './TabsList';
+import {TabsPanel} from './TabsPanel';
 import {useTabsModel, TabsModel, TabsModelConfig} from './useTabsModel';
+import {TabsOverflowButton} from './TabsOverflowButton';
+import {TabsMenuPopper} from './TabsMenuPopper';
+import {TabsPanels} from './TabsPanels';
 
 export const TabsModelContext = React.createContext<TabsModel>({} as any);
 
-export interface TabsProps extends TabsModelConfig {
+// use `T = any` here because there's no way to pass generics to a compound component...
+export interface TabsProps<T = any> extends TabsModelConfig<T> {
   /**
    * The contents of the Tabs. Can be `Tabs` children or any valid elements.
    */
@@ -19,7 +24,7 @@ export interface TabsProps extends TabsModelConfig {
    * config passed to this component.
    * @default useTabsModel(config)
    */
-  model?: TabsModel;
+  model?: TabsModel<T>;
 }
 
 export const Tabs = createComponent()({
@@ -27,11 +32,31 @@ export const Tabs = createComponent()({
   Component: ({children, model, ...config}: TabsProps) => {
     const value = useDefaultModel(model, config, useTabsModel);
 
-    return <TabsModelContext.Provider value={value}>{children}</TabsModelContext.Provider>;
+    return (
+      <TabsModelContext.Provider value={value}>
+        <Menu model={value.menu}>{children}</Menu>
+      </TabsModelContext.Provider>
+    );
   },
   subComponents: {
-    List: TabList,
-    Item: Tab,
-    Panel: TabPanel,
+    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,
   },
 });