@workday/canvas-kit-react 5.3.0-next.18 → 5.3.0-next.32

package/dist/es6/popup/lib/hooks/usePopupStack.js

@@ -56,8 +56,8 @@ export var usePopupStack = function (ref, target) {
                 ? target.current || undefined
                 : target
             : undefined;
-        PopupStack.add({ element: localRef.current, owner: targetEl });
         var element = localRef.current;
+        PopupStack.add({ element: element, owner: targetEl });
         return function () {
             PopupStack.remove(element);
         };

package/dist/es6/popup/lib/hooks/useReturnFocus.d.ts

@@ -3,7 +3,7 @@
  * `useInitialFocus`. This should be used with `useFocusRedirect` or `useFocusTrap` for a complete
  * focus management solution.
  *
- * This should ble used on popup elements that use `useInitialFocus`.
+ * This should be used on popup elements that use `useInitialFocus`.
  */
 export declare const useReturnFocus: (model: import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
 //# sourceMappingURL=useReturnFocus.d.ts.map

package/dist/es6/popup/lib/hooks/useReturnFocus.js

@@ -5,7 +5,7 @@ import { changeFocus } from '@workday/canvas-kit-react/common';
  * `useInitialFocus`. This should be used with `useFocusRedirect` or `useFocusTrap` for a complete
  * focus management solution.
  *
- * This should ble used on popup elements that use `useInitialFocus`.
+ * This should be used on popup elements that use `useInitialFocus`.
  */
 export var useReturnFocus = function (model, elemProps) {
     if (elemProps === void 0) { elemProps = {}; }

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
+ * popup would seem to disappear because the popup container element is not a child of the
+ * fullscreen element.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenEnter: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenEnter.d.ts.map

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransferOnFullscreenEnter.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenEnter.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,sIA6BxC,CAAC"}

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import screenfull from 'screenfull';
+import { PopupStack } from '@workday/canvas-kit-popup-stack';
+/**
+ * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
+ * popup would seem to disappear because the popup container element is not a child of the
+ * fullscreen element.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export var useTransferOnFullscreenEnter = function (model, elemProps) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var handler = React.useCallback(function (event) {
+        if (screenfull.isFullscreen && model.state.stackRef.current) {
+            PopupStack.transferToCurrentContext({
+                element: model.state.stackRef.current,
+                owner: model.state.targetRef.current,
+            });
+        }
+    }, [model.state.stackRef, model.state.targetRef]);
+    var visible = model.state.visibility !== 'hidden';
+    React.useEffect(function () {
+        if (!visible) {
+            return;
+        }
+        if (screenfull.isEnabled) {
+            screenfull.on('change', handler);
+            return function () {
+                screenfull.off('change', handler);
+            };
+        }
+        return;
+    }, [handler, visible]);
+    return elemProps;
+};

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
+ * would not operate correctly with other popups on the screen.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenExit.d.ts.map

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransferOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenExit.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,sIA6BvC,CAAC"}

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import screenfull from 'screenfull';
+import { PopupStack } from '@workday/canvas-kit-popup-stack';
+/**
+ * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
+ * would not operate correctly with other popups on the screen.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export var useTransferOnFullscreenExit = function (model, elemProps) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var handler = React.useCallback(function (event) {
+        if (!screenfull.isFullscreen && model.state.stackRef.current) {
+            PopupStack.transferToCurrentContext({
+                element: model.state.stackRef.current,
+                owner: model.state.targetRef.current,
+            });
+        }
+    }, [model.state.stackRef, model.state.targetRef]);
+    var visible = model.state.visibility !== 'hidden';
+    React.useEffect(function () {
+        if (!visible) {
+            return;
+        }
+        if (screenfull.isEnabled) {
+            screenfull.on('change', handler);
+            return function () {
+                screenfull.off('change', handler);
+            };
+        }
+        return;
+    }, [handler, visible]);
+    return elemProps;
+};

package/dist/es6/radio/lib/Radio.d.ts

@@ -13,7 +13,7 @@ export interface RadioProps extends Themeable {
     disabled?: boolean;
     /**
      * The HTML `id` of the underlying radio input element. This is required if `label` is defined as a non-empty string.
-     * @default A uniquely generated id by uuid()
+     * @default A uniquely generated id
      */
     id?: string;
     /**

package/dist/es6/switch/lib/Switch.d.ts

@@ -13,7 +13,7 @@ export interface SwitchProps extends Themeable {
     disabled?: boolean;
     /**
      * The HTML `id` of the underlying checkbox input element.
-     * @default A uniquely generated id by uuid()
+     * @default A uniquely generated id
      */
     id?: string;
     /**

package/dist/es6/tabs/lib/menu/MenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/menu/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,uCAAuC,CAAC;AAE5D,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC;IAC5F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,2EAwBnB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;OAKtB,CAAC"}
+{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/menu/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,uCAAuC,CAAC;AAE5D,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC;IAC5F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,2EAuBnB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;OAKtB,CAAC"}

package/dist/es6/tabs/lib/menu/MenuList.js

@@ -32,7 +32,7 @@ export var MenuList = createComponent('div')({
         var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
         var localModel = useModelContext(MenuModelContext, model);
         var props = useMenuList(localModel, elemProps, ref);
-        return (React.createElement(Stack, __assign({ as: Element, background: commonColors.background, borderRadius: "m", padding: "zero", marginY: "zero", marginX: "xxs", spacing: "zero", overflowY: "auto", flexDirection: localModel.state.orientation === 'vertical' ? 'column' : 'row' }, props), useRenderItems(localModel, children)));
+        return (React.createElement(Stack, __assign({ as: Element, background: commonColors.background, borderRadius: "zero", padding: "zero", marginY: "xxs", spacing: "zero", overflowY: "auto", flexDirection: localModel.state.orientation === 'vertical' ? 'column' : 'row' }, props), useRenderItems(localModel, children)));
     },
 });
 export var useMenuList = createHook(function (model) {

package/dist/es6/tabs/lib/overflow/useOverflowModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflowModel.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/overflow/useOverflowModel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,aAAa,EAAc,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EACL,cAAc,EACd,eAAe,EACf,wBAAwB,EAGxB,iBAAiB,EACjB,cAAc,EACf,MAAM,cAAc,CAAC;AAEtB,oBAAY,aAAa,CAAC,CAAC,GAAG,OAAO,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEF,oBAAY,cAAc,CAAC,CAAC,GAAG,OAAO,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG;IAC7D,iBAAiB,CAAC,IAAI,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAChD,sBAAsB,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACpD,YAAY,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACtD,eAAe,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAC1C,YAAY,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACvC,eAAe,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC;AAEH,oBAAY,uBAAuB,CAAC,CAAC,IAAI,wBAAwB,CAAC,CAAC,CAAC,GAAG;IACrE,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,oBAAY,mBAAmB,CAAC,CAAC,IAAI,uBAAuB,CAAC,CAAC,CAAC,GAC7D,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC;AAExF,wBAAgB,YAAY,CAC1B,cAAc,EAAE,MAAM,EACtB,mBAAmB,EAAE,MAAM,EAC3B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACtC,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,GAC5B,MAAM,EAAE,CAsCV;AAED,eAAO,MAAM,gBAAgB,0EA4E5B,CAAC"}
+{"version":3,"file":"useOverflowModel.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/overflow/useOverflowModel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,aAAa,EAAc,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EACL,cAAc,EACd,eAAe,EACf,wBAAwB,EAGxB,iBAAiB,EACjB,cAAc,EACf,MAAM,cAAc,CAAC;AAEtB,oBAAY,aAAa,CAAC,CAAC,GAAG,OAAO,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEF,oBAAY,cAAc,CAAC,CAAC,GAAG,OAAO,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG;IAC7D,iBAAiB,CAAC,IAAI,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAChD,sBAAsB,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACpD,YAAY,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACtD,eAAe,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAC1C,YAAY,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACvC,eAAe,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC;AAEH,oBAAY,uBAAuB,CAAC,CAAC,IAAI,wBAAwB,CAAC,CAAC,CAAC,GAAG;IACrE,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,oBAAY,mBAAmB,CAAC,CAAC,IAAI,uBAAuB,CAAC,CAAC,CAAC,GAC7D,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC;AAExF,wBAAgB,YAAY,CAC1B,cAAc,EAAE,MAAM,EACtB,mBAAmB,EAAE,MAAM,EAC3B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACtC,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,GAC5B,MAAM,EAAE,CAwCV;AAED,eAAO,MAAM,gBAAgB,0EAgG5B,CAAC"}

package/dist/es6/tabs/lib/overflow/useOverflowModel.js

@@ -41,6 +41,9 @@ export function getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache
             itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
         }
     }
+    else {
+        itemWidth += overflowTargetWidth;
+    }
     for (var key in itemWidthCache) {
         if (key !== selectedKey) {
             itemWidth += itemWidthCache[key];
@@ -91,6 +94,8 @@ export var useOverflowModel = function (config) {
             var id = _a.id, width = _a.width;
             itemWidthCacheRef.current = __assign(__assign({}, itemWidthCacheRef.current), (_b = {}, _b[id] = width, _b));
             setItemWidthCache(itemWidthCacheRef.current);
+            var ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds);
+            setHiddenIds(ids);
         },
         removeItemWidth: function (_a) {
             var id = _a.id;
@@ -98,6 +103,10 @@ export var useOverflowModel = function (config) {
             delete newCache[id];
             itemWidthCacheRef.current = newCache;
             setItemWidthCache(itemWidthCacheRef.current);
+            var ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds !== 'all'
+                ? state.selectedIds.filter(function (sId) { return id !== sId; })
+                : state.selectedIds);
+            setHiddenIds(ids);
         },
         addHiddenKey: function (_a) {
             var id = _a.id;

package/dist/es6/tabs/lib/overflow/useOverflowTarget.js

@@ -24,7 +24,7 @@ export var useOverflowTarget = createHook(function (model, ref) {
     return {
         ref: elementRef,
         'aria-hidden': isHidden,
-        tabIndex: -1,
+        tabIndex: isHidden ? -1 : 0,
         style: isHidden ? hiddenStyle : {},
     };
 });

package/dist/es6/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/es6/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/es6/tooltip/lib/Tooltip.js

@@ -39,9 +39,14 @@ function mergeCallbacks(elemProps, componentProps, keys) {
     }, {});
 }
 export var 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 = innerText(title);
-    var _d = useTooltip({ type: type, titleText: titleText }), targetProps = _d.targetProps, popperProps = _d.popperProps, tooltipProps = _d.tooltipProps;
+    var _f = 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/es6/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: {

package/dist/es6/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;AAkD/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;IA6CF,2EAA2E;;;;;;;;;;IAY3E,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import uuid from 'uuid/v4';
-import { useCloseOnEscape, useAlwaysCloseOnOutsideClick, usePopupModel, } from '@workday/canvas-kit-react/popup';
+import { useCloseOnEscape, useAlwaysCloseOnOutsideClick, usePopupModel, useCloseOnFullscreenExit, } from '@workday/canvas-kit-react/popup';
+import { useUniqueId } from '@workday/canvas-kit-react/common';
 var useIntentTimer = function (fn, waitMs) {
     if (waitMs === void 0) { waitMs = 0; }
     var timer = React.useRef();
@@ -41,15 +41,20 @@ var isInteractiveElement = function (element) {
  * into a target, popper and tooltip
  */
 export 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 = usePopupModel();
-    var _e = React.useState(null), anchorElement = _e[0], setAnchorElement = _e[1];
-    var id = React.useState(function () { return uuid(); })[0];
-    var intentTimer = useIntentTimer(popupModel.events.hide, 100);
+    var _g = React.useState(null), anchorElement = _g[0], setAnchorElement = _g[1];
+    var id = useUniqueId();
+    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);
@@ -69,6 +74,7 @@ export function useTooltip(_a) {
     };
     useCloseOnEscape(popupModel);
     useAlwaysCloseOnOutsideClick(popupModel);
+    useCloseOnFullscreenExit(popupModel);
     var visible = popupModel.state.visibility !== 'hidden';
     return {
         /** Mix these properties into the target element. **Must be an Element** */
@@ -78,10 +84,10 @@ export 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: {
@@ -94,7 +100,7 @@ export function useTooltip(_a) {
             id: type === 'describe' && visible ? id : undefined,
             role: 'tooltip',
             onMouseEnter: onOpen,
-            onMouseLeave: intentTimer.start,
+            onMouseLeave: onHide,
         },
     };
 }

package/form-field/lib/FormField.tsx

@@ -1,10 +1,15 @@
 import * as React from 'react';
 import {space} from '@workday/canvas-kit-react/tokens';
-import {GrowthBehavior, ErrorType, styled, Themeable} from '@workday/canvas-kit-react/common';
+import {
+  GrowthBehavior,
+  ErrorType,
+  styled,
+  Themeable,
+  generateUniqueId,
+} from '@workday/canvas-kit-react/common';
 import Hint from './Hint';
 import Label from './Label';
 import {FormFieldLabelPosition, FormFieldLabelPositionBehavior} from './types';
-import uuid from 'uuid/v4';
 
 export interface FormFieldProps
   extends Themeable,
@@ -135,7 +140,7 @@ class FormField extends React.Component<FormFieldProps> {
   static LabelPosition = FormFieldLabelPosition;
   static ErrorType = ErrorType;
 
-  private inputId: string = this.props.inputId || uuid();
+  private inputId: string = this.props.inputId || generateUniqueId();
 
   private renderChildren = (child: React.ReactNode): React.ReactNode => {
     if (React.isValidElement(child)) {

package/loading-animation/lib/LoadingDots.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {keyframes} from '@emotion/core';
-import styled from '@emotion/styled';
 import canvas, {borderRadius} from '@workday/canvas-kit-react/tokens';
+import {styled} from '@workday/canvas-kit-react/common';
 
 /**
  * Keyframe for the dots loading animation.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "5.3.0-next.18+6a7c92ab",
+  "version": "5.3.0-next.32+a02de5eb",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -38,7 +38,8 @@
     "build": "npm-run-all --parallel build:cjs build:es6 --sequential build:downlevel-dts",
     "prepack": "node ../../utils/publish.js pre react",
     "postpack": "node ../../utils/publish.js post react",
-    "depcheck": "node ../../utils/check-dependencies-exist.js"
+    "depcheck": "node ../../utils/check-dependencies-exist.js",
+    "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
   "keywords": [
     "canvas",
@@ -56,9 +57,9 @@
     "@emotion/styled": "^10.0.27",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^5.3.0-next.18+6a7c92ab",
-    "@workday/canvas-kit-popup-stack": "^5.3.0-next.18+6a7c92ab",
-    "@workday/canvas-kit-preview-react": "^5.3.0-next.18+6a7c92ab",
+    "@workday/canvas-kit-labs-react": "^5.3.0-next.32+a02de5eb",
+    "@workday/canvas-kit-popup-stack": "^5.3.0-next.32+a02de5eb",
+    "@workday/canvas-kit-preview-react": "^5.3.0-next.32+a02de5eb",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -69,12 +70,12 @@
     "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"
+    "screenfull": "^5.2.0",
+    "use-resize-observer": "~7.0.1"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^1.0.0",
     "@workday/canvas-applet-icons-web": "^0.17.50"
   },
-  "gitHead": "6a7c92ab26c236a362790dceab7a2f10d84fe9ae"
+  "gitHead": "a02de5eb284c706211aa55ef3554b11f52668b28"
 }

package/popup/lib/PopupCard.tsx

@@ -42,37 +42,25 @@ 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})`,
-  },
-  ({width}) => width && {width},
-  ({transformOrigin}) => {
-    if (transformOrigin == null) {
-      return {};
-    }
-    return {
-      animation: popupAnimation(transformOrigin),
-      animationDuration: '150ms',
-      animationTimingFunction: 'ease-out',
-      transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
-      // Allow overriding of animation in special cases
-      '.wd-no-animation &': {
-        animation: 'none',
-      },
-    };
+>(type.levels.subtext.large, ({transformOrigin}) => {
+  if (transformOrigin == null) {
+    return {};
   }
-);
+  return {
+    animation: popupAnimation(transformOrigin),
+    animationDuration: '150ms',
+    animationTimingFunction: 'ease-out',
+    transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
+    // Allow overriding of animation in special cases
+    '.wd-no-animation &': {
+      animation: 'none',
+    },
+  };
+});
 
 export const PopupCard = createComponent('div')({
   displayName: 'Popup.Card',
-  Component: (
-    {children, model, padding = 'l', depth = 2, width, ...elemProps}: PopupCardProps,
-    ref,
-    Element
-  ) => {
+  Component: ({children, model, ...elemProps}: PopupCardProps, ref, Element) => {
     const localModel = useModelContext(PopupModelContext, model);
     const props = usePopupCard(localModel, elemProps, ref);
     const transformOrigin = React.useMemo(() => {
@@ -83,9 +71,10 @@ export const PopupCard = createComponent('div')({
       <StyledPopupCard
         as={Element}
         transformOrigin={transformOrigin}
-        depth={depth}
-        width={width}
-        padding={padding}
+        position="relative"
+        padding="l"
+        depth={2}
+        maxWidth={`calc(100vw - ${space.l})`}
         {...props}
       >
         {children}

package/popup/lib/hooks/focus-trap-js.ts

@@ -1,4 +1,5 @@
 // refactor for v5
+/// <reference types="@types/node" />
 
 const candidateSelectors = [
   'input',

package/popup/lib/hooks/index.ts

@@ -2,6 +2,7 @@ export * from './useAlwaysCloseOnOutsideClick';
 export * from './useAssistiveHideSiblings';
 export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
+export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
@@ -15,3 +16,5 @@ export * from './usePopupPopper';
 export * from './usePopupStack';
 export * from './usePopupTarget';
 export * from './useReturnFocus';
+export * from './useTransferOnFullscreenEnter';
+export * from './useTransferOnFullscreenExit';

package/popup/lib/hooks/useCloseOnFullscreenExit.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import screenfull from 'screenfull';
+
+import {PopupModel} from './usePopupModel';
+
+/**
+ * Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
+ * the entire screen. This should be added to popup types that are very context sensitive like
+ * Tooltips.
+ */
+export const useCloseOnFullscreenExit = (model: PopupModel, elemProps = {}) => {
+  const handler = React.useCallback(
+    event => {
+      if (!screenfull.isFullscreen) {
+        model.events.hide({event});
+      }
+    },
+    [model.events]
+  );
+
+  const visible = model.state.visibility !== 'hidden';
+
+  React.useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    if (screenfull.isEnabled) {
+      screenfull.on('change', handler);
+      return () => {
+        screenfull.off('change', handler);
+      };
+    }
+    return;
+  }, [handler, visible]);
+
+  return elemProps;
+};

package/popup/lib/hooks/usePopupStack.ts

@@ -64,8 +64,9 @@ export const usePopupStack = <E extends HTMLElement>(
         ? target.current || undefined
         : target
       : undefined;
-    PopupStack.add({element: localRef.current!, owner: targetEl});
     const element = localRef.current!;
+
+    PopupStack.add({element: element, owner: targetEl});
     return () => {
       PopupStack.remove(element);
     };

package/popup/lib/hooks/useReturnFocus.tsx

@@ -8,7 +8,7 @@ import {changeFocus} from '@workday/canvas-kit-react/common';
  * `useInitialFocus`. This should be used with `useFocusRedirect` or `useFocusTrap` for a complete
  * focus management solution.
  *
- * This should ble used on popup elements that use `useInitialFocus`.
+ * This should be used on popup elements that use `useInitialFocus`.
  */
 export const useReturnFocus = (model: PopupModel, elemProps = {}) => {
   const visible = model.state.visibility !== 'hidden';

package/popup/lib/hooks/useTransferOnFullscreenEnter.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import screenfull from 'screenfull';
+
+import {PopupModel} from './usePopupModel';
+import {PopupStack} from '@workday/canvas-kit-popup-stack';
+
+/**
+ * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
+ * popup would seem to disappear because the popup container element is not a child of the
+ * fullscreen element.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export const useTransferOnFullscreenEnter = (model: PopupModel, elemProps = {}) => {
+  const handler = React.useCallback(
+    event => {
+      if (screenfull.isFullscreen && model.state.stackRef.current) {
+        PopupStack.transferToCurrentContext({
+          element: model.state.stackRef.current,
+          owner: model.state.targetRef.current!,
+        });
+      }
+    },
+    [model.state.stackRef, model.state.targetRef]
+  );
+
+  const visible = model.state.visibility !== 'hidden';
+
+  React.useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    if (screenfull.isEnabled) {
+      screenfull.on('change', handler);
+      return () => {
+        screenfull.off('change', handler);
+      };
+    }
+    return;
+  }, [handler, visible]);
+
+  return elemProps;
+};