@workday/canvas-kit-react 5.3.0 → 5.3.4

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

@@ -16,64 +16,51 @@ 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 list_1 = require("./list");
-var menu_1 = require("./menu");
-var overflow_1 = require("./overflow");
+var useCursorModel_1 = require("./cursor/useCursorModel");
+var useListModel_1 = require("./list/useListModel");
 exports.tabEventMap = common_1.createEventMap()({
-    guards: __assign({}, overflow_1.overflowEventMap.guards),
-    callbacks: __assign({}, overflow_1.overflowEventMap.callbacks),
+    guards: __assign(__assign({}, useCursorModel_1.cursorEventMap.guards), { 
+        /**
+         * Should the tab activate? Can prevent the tab from activating. Use this only for advanced
+         * use-cases.
+         */
+        shouldActivate: 'activate' }),
+    callbacks: __assign(__assign({}, useCursorModel_1.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' }),
 });
 exports.useTabsModel = function (config) {
     if (config === void 0) { config = {}; }
-    var _a;
-    var id = common_1.useUniqueId(config.id);
-    var initialSelectedRef = react_1.default.useRef(config.initialTab);
-    var getId = config.getId || list_1.defaultGetId;
-    var items = config.items; // || (emptyItems as T[]);
-    var model = overflow_1.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 = list_1.useListModel();
-    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_1.default.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 = common_1.useEventMap(exports.tabEventMap, state, config, __assign(__assign({}, model.events), { registerPanel: panels.events.registerItem, unregisterPanel: panels.events.unregisterItem }));
-    var menu = menu_1.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 });
+    var initialTabRef = react_1.default.useRef(config.initialTab);
+    var _a = react_1.default.useState(initialTabRef.current || ''), activeTab = _a[0], setActiveTab = _a[1];
+    var cursor = useCursorModel_1.useCursorModel(__assign({ orientation: config.orientation || 'horizontal' }, config));
+    var panels = useListModel_1.useListModel();
+    var state = __assign(__assign({}, cursor.state), { activeTab: activeTab, panels: panels.state.items, panelIndexRef: panels.state.indexRef });
+    var events = common_1.useEventMap(exports.tabEventMap, state, config, __assign(__assign({}, cursor.events), { activate: function (data) {
+            setActiveTab(data.tab);
+            events.goTo({ id: data.tab });
         },
-        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 });
+        registerItem: function (data) {
+            if (!initialTabRef.current) {
+                initialTabRef.current = data.item.id;
+                setActiveTab(initialTabRef.current);
+            }
+            cursor.events.registerItem(data);
         },
-    });
+        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 = useCursorModel_1.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/commonjs/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, CanvasDepthValues } from './lib/depth';
+import depth, { CanvasDepth, CanvasDepthValue } 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,7 +326,24 @@ declare const canvas: {
         hoverBackground: string;
         divider: string;
     };
-    depth: CanvasDepth;
+    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)";
+        };
+    };
     fontFamily: string;
     gradients: {
         [key: string]: string;
@@ -410,7 +427,7 @@ declare const canvas: {
     };
 };
 export * from '@workday/canvas-colors-web';
-export { borderRadius, colors, gradients, depth, space, spaceNumbers, type, fontFamily, monoFontFamily, BrandingColor, CanvasDepth, CanvasDepthValues, CSSProperties, };
+export { borderRadius, colors, gradients, depth, space, spaceNumbers, type, fontFamily, monoFontFamily, BrandingColor, CanvasDepth, CanvasDepthValue, 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/commonjs/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,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"}
+{"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"}

package/dist/commonjs/tokens/index.js

@@ -2,6 +2,9 @@
 function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var canvas_colors_web_1 = require("@workday/canvas-colors-web");
 exports.colors = canvas_colors_web_1.colors;
@@ -10,8 +13,8 @@ var radius_1 = require("./lib/radius");
 exports.borderRadius = radius_1.borderRadius;
 var colors_types_1 = require("./lib/colors.types");
 exports.BrandingColor = colors_types_1.BrandingColor;
-var depth_1 = require("./lib/depth");
-exports.depth = depth_1.depth;
+var depth_1 = __importDefault(require("./lib/depth"));
+exports.depth = depth_1.default;
 var space_1 = require("./lib/space");
 exports.space = space_1.space;
 exports.spaceNumbers = space_1.spaceNumbers;
@@ -25,7 +28,7 @@ var canvas = {
     chartingColors: canvas_colors_web_1.chartingColors,
     colors: canvas_colors_web_1.colors,
     commonColors: canvas_colors_web_1.commonColors,
-    depth: depth_1.depth,
+    depth: depth_1.default,
     fontFamily: type_1.fontFamily,
     gradients: canvas_colors_web_1.gradients,
     iconColors: canvas_colors_web_1.iconColors,

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

@@ -1,110 +1,4 @@
-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 {};
+import depth, { CanvasDepth, CanvasDepthValue } from '@workday/canvas-depth-web';
+export { CanvasDepth, CanvasDepthValue };
+export default depth;
 //# sourceMappingURL=depth.d.ts.map

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

@@ -1 +1 @@
-{"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"}
+{"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"}

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

@@ -1,42 +1,7 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * ### 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>
- *   );
- * }
- * ```
- *
- */
-exports.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)',
-    },
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+var canvas_depth_web_1 = __importDefault(require("@workday/canvas-depth-web"));
+exports.default = canvas_depth_web_1.default;

package/dist/commonjs/tooltip/lib/Tooltip.d.ts

@@ -37,6 +37,14 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * @default 'label'
      */
     type?: 'label' | 'describe' | 'muted';
+    /**
+     * Amount of time (in ms) to delay before showing the tooltip
+     */
+    showDelay?: number;
+    /**
+     * Amount of time (in ms) to delay before hiding the tooltip
+     */
+    hideDelay?: number;
 }
-export declare const Tooltip: ({ type, placement, title, children, ...elemProps }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ type, placement, title, children, showDelay, hideDelay, ...elemProps }: TooltipProps) => JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/commonjs/tooltip/lib/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;CACvC;AAiBD,eAAO,MAAM,OAAO,mFA+BnB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,yGAsCnB,CAAC"}

package/dist/commonjs/tooltip/lib/Tooltip.js

@@ -51,9 +51,14 @@ function mergeCallbacks(elemProps, componentProps, keys) {
     }, {});
 }
 exports.Tooltip = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? 'label' : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, title = _a.title, children = _a.children, elemProps = __rest(_a, ["type", "placement", "title", "children"]);
+    var _b = _a.type, type = _b === void 0 ? 'label' : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, title = _a.title, children = _a.children, _d = _a.showDelay, showDelay = _d === void 0 ? 300 : _d, _e = _a.hideDelay, hideDelay = _e === void 0 ? 100 : _e, elemProps = __rest(_a, ["type", "placement", "title", "children", "showDelay", "hideDelay"]);
     var titleText = react_innertext_1.default(title);
-    var _d = useTooltip_1.useTooltip({ type: type, titleText: titleText }), targetProps = _d.targetProps, popperProps = _d.popperProps, tooltipProps = _d.tooltipProps;
+    var _f = useTooltip_1.useTooltip({
+        type: type,
+        titleText: titleText,
+        showDelay: showDelay,
+        hideDelay: hideDelay,
+    }), targetProps = _f.targetProps, popperProps = _f.popperProps, tooltipProps = _f.tooltipProps;
     return (React.createElement(React.Fragment, null,
         React.cloneElement(children, __assign(__assign(__assign({}, targetProps), mergeCallbacks(children.props, targetProps)), (type === 'muted' && children.props['aria-label']
             ? { 'aria-label': children.props['aria-label'] }

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

@@ -3,7 +3,7 @@ import * as React from 'react';
  * Convenience hook for creating components with tooltips. It will return an object of properties to mix
  * into a target, popper and tooltip
  */
-export declare function useTooltip<T extends Element = Element>({ type, titleText, }?: {
+export declare function useTooltip<T extends Element = Element>({ type, titleText, showDelay, hideDelay, }?: {
     /**
      * Determines the tooltip type for accessibility.
      *
@@ -25,6 +25,14 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
      * The content of the `aria-label` if `type` is `label.
      */
     titleText?: string;
+    /**
+     * Amount of time (in ms) to delay before showing the tooltip
+     */
+    showDelay?: number;
+    /**
+     * Amount of time (in ms) to delay before hiding the tooltip
+     */
+    hideDelay?: number;
 }): {
     /** Mix these properties into the target element. **Must be an Element** */
     targetProps: {
@@ -33,7 +41,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, Element>) => void;
+        onFocus: (event: React.FocusEvent<Element>) => void;
         onBlur: () => void;
     };
     /** Mix these properties into the `Popper` component */

package/dist/commonjs/tooltip/lib/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,GACf,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IAuCF,2EAA2E;;;;;;;;;;IAY3E,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IA4CF,2EAA2E;;;;;;;;;;IAY3E,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}

package/dist/commonjs/tooltip/lib/useTooltip.js

@@ -53,15 +53,20 @@ var isInteractiveElement = function (element) {
  * into a target, popper and tooltip
  */
 function useTooltip(_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.type, type = _c === void 0 ? 'label' : _c, _d = _b.titleText, titleText = _d === void 0 ? '' : _d;
+    var _b = _a === void 0 ? {} : _a, _c = _b.type, type = _c === void 0 ? 'label' : _c, _d = _b.titleText, titleText = _d === void 0 ? '' : _d, _e = _b.showDelay, showDelay = _e === void 0 ? 300 : _e, _f = _b.hideDelay, hideDelay = _f === void 0 ? 100 : _f;
     var mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
     var popupModel = popup_1.usePopupModel();
-    var _e = React.useState(null), anchorElement = _e[0], setAnchorElement = _e[1];
+    var _g = React.useState(null), anchorElement = _g[0], setAnchorElement = _g[1];
     var id = React.useState(function () { return v4_1.default(); })[0];
-    var intentTimer = useIntentTimer(popupModel.events.hide, 100);
+    var intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
+    var intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
+    var onHide = function () {
+        intentTimerHide.start();
+        intentTimerShow.clear();
+    };
     var onOpen = function () {
-        popupModel.events.show();
-        intentTimer.clear();
+        intentTimerShow.start();
+        intentTimerHide.clear();
     };
     var onOpenFromTarget = function (event) {
         setAnchorElement(event.currentTarget);
@@ -90,10 +95,10 @@ function useTooltip(_a) {
             // This will replace the accessible name of the target element
             'aria-label': type === 'label' ? titleText : undefined,
             onMouseEnter: onOpenFromTarget,
-            onMouseLeave: intentTimer.start,
+            onMouseLeave: onHide,
             onMouseDown: onMouseDown,
             onFocus: onFocus,
-            onBlur: intentTimer.start,
+            onBlur: onHide,
         },
         /** Mix these properties into the `Popper` component */
         popperProps: {
@@ -106,7 +111,7 @@ function useTooltip(_a) {
             id: type === 'describe' && visible ? id : undefined,
             role: 'tooltip',
             onMouseEnter: onOpen,
-            onMouseLeave: intentTimer.start,
+            onMouseLeave: onHide,
         },
     };
 }

package/dist/es6/action-bar/lib/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAuDD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC7D,MAAM;CASd"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AA0CD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC7D,MAAM;CASd"}

package/dist/es6/action-bar/lib/ActionBar.js

@@ -34,30 +34,24 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { styled } from '@workday/canvas-kit-react/common';
+import styled from '@emotion/styled';
 import { colors, commonColors, space } from '@workday/canvas-kit-react/tokens';
-function getFixedStyles(fixed) {
-    if (fixed === void 0) { fixed = false; }
-    return fixed
-        ? {
-            position: 'fixed',
-            left: 0,
-            bottom: 0,
-            right: 0,
-        }
-        : {};
-}
 var ActionBarContainer = styled('div')({
     borderTop: "solid 1px " + colors.soap400,
     background: commonColors.background,
     padding: space.s,
     boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.08)',
-}, function (_a) {
-    var _b;
-    var fixed = _a.fixed, theme = _a.theme;
-    return __assign(__assign({}, getFixedStyles(fixed)), (_b = {}, _b[theme.canvas.breakpoints.down('s')] = {
+    '@media (max-width: 575px)': {
         padding: space.xxs,
-    }, _b));
+    },
+}, function (_a) {
+    var fixed = _a.fixed;
+    return fixed && {
+        position: 'fixed',
+        left: 0,
+        bottom: 0,
+        right: 0,
+    };
 });
 var ChildrenContainer = styled('div')({
     display: 'inline-block',
@@ -65,24 +59,19 @@ var ChildrenContainer = styled('div')({
     '*:not(:first-of-type)': {
         marginLeft: space.s,
     },
-}, function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {},
-        _b[theme.canvas.breakpoints.down('s')] = {
-            display: 'flex',
-            padding: space.xxs,
-            justifyContent: 'center',
-            flexDirection: 'row-reverse',
-            '> *': {
-                flex: 1,
-                '&:not(:first-of-type)': {
-                    marginRight: space.s,
-                    marginLeft: 0,
-                },
+    '@media (max-width: 575px)': {
+        display: 'flex',
+        padding: space.xxs,
+        justifyContent: 'center',
+        flexDirection: 'row-reverse',
+        '> *': {
+            flex: 1,
+            '&:not(:first-of-type)': {
+                marginRight: space.s,
+                marginLeft: 0,
             },
         },
-        _b);
+    },
 });
 var ActionBar = /** @class */ (function (_super) {
     __extends(ActionBar, _super);