@workday/canvas-kit-react 6.1.5 → 6.3.0-next.0

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

@@ -6,13 +6,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     result["default"] = mod;
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
-var v4_1 = __importDefault(require("uuid/v4"));
 var popup_1 = require("@workday/canvas-kit-react/popup");
+var common_1 = require("@workday/canvas-kit-react/common");
 var useIntentTimer = function (fn, waitMs) {
     if (waitMs === void 0) { waitMs = 0; }
     var timer = React.useRef();
@@ -57,7 +54,7 @@ function useTooltip(_a) {
     var mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
     var popupModel = popup_1.usePopupModel();
     var _g = React.useState(null), anchorElement = _g[0], setAnchorElement = _g[1];
-    var id = React.useState(function () { return v4_1.default(); })[0];
+    var id = common_1.useUniqueId();
     var intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
     var intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
     var onHide = function () {
@@ -86,6 +83,7 @@ function useTooltip(_a) {
     };
     popup_1.useCloseOnEscape(popupModel);
     popup_1.useAlwaysCloseOnOutsideClick(popupModel);
+    popup_1.useCloseOnFullscreenExit(popupModel);
     var visible = popupModel.state.visibility !== 'hidden';
     return {
         /** Mix these properties into the target element. **Must be an Element** */

package/dist/es6/checkbox/lib/Checkbox.d.ts

@@ -13,7 +13,7 @@ export interface CheckboxProps extends Themeable {
     disabled?: boolean;
     /**
      * The HTML `id` of the underlying checkbox 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/common/lib/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from './useMount';
 export * from './components';
 export * from './models';
 export * from './elements';
+export * from './useIsFullscreen';
 export * from './useWindowSize';
 export * from './useResizeObserver';
 export * from './StaticStates';

package/dist/es6/common/lib/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}

package/dist/es6/common/lib/utils/index.js

@@ -10,6 +10,7 @@ export * from './useMount';
 export * from './components';
 export * from './models';
 export * from './elements';
+export * from './useIsFullscreen';
 export * from './useWindowSize';
 export * from './useResizeObserver';
 export * from './StaticStates';

package/dist/es6/common/lib/utils/useIsFullscreen.d.ts

@@ -0,0 +1,2 @@
+export declare const useIsFullscreen: () => boolean;
+//# sourceMappingURL=useIsFullscreen.d.ts.map

package/dist/es6/common/lib/utils/useIsFullscreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsFullscreen.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useIsFullscreen.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,eAgB3B,CAAC"}

package/dist/es6/common/lib/utils/useIsFullscreen.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import screenfull from 'screenfull';
+export var useIsFullscreen = function () {
+    var _a = React.useState(false), isFullscreen = _a[0], setIsFullscreen = _a[1];
+    var handler = React.useCallback(function () {
+        setIsFullscreen(screenfull.isFullscreen);
+    }, []);
+    React.useEffect(function () {
+        screenfull.on('change', handler);
+        return function () {
+            screenfull.off('change', handler);
+        };
+    }, [handler]);
+    return isFullscreen;
+};

package/dist/es6/common/lib/utils/useUniqueId.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Generates a unique and HTML5 compliant identifier every time it is called. Internally it uses a 4
+ * character random seed starting with a letter. This seed is unique to each instance of this
+ * package meaning different versions of Canvas Kit on the page will have a different seed. Each
+ * call will use a Base 36 string (10 numbers + 26 letters) based on an incremented number. The
+ * incremented number always starts at 0 and can be reset for testing purposes using
+ * [resetUniqueIdCount](#resetuniqueidcount). [setUniqueSeed](#setuniqueseed) can also be used for
+ * testing or server side rendering to get the same results during hydration.
+ */
 export declare const generateUniqueId: () => string;
 /**
  * Generate a unique ID if one is not provided. The generated ID will be stable across renders
@@ -10,4 +19,23 @@ export declare const useUniqueId: (id?: string | undefined) => string;
  * TODO: Remove in major release
  */
 export declare const uniqueId: (id?: string | undefined) => string;
+/**
+ * Update the seed used by the id generator. This is useful for snapshot tests to help stabilize ids
+ * generated each run. This could also be used for server-side hydration - if you choose the same
+ * seed for server and set that on the client before components are rendered, the ids generated will
+ * be the same.
+ * @example
+ * // set in a script tag from the server
+ * setSeed(window.__ID_SEED); // set in a script tag from the server
+ *
+ * // jest setup
+ * before(() => {
+ *   setSeed('a')
+ * })
+ */
+export declare const setUniqueSeed: (s: string) => void;
+/**
+ * This should only be called for tests in an `beforeEach`
+ */
+export declare const resetUniqueIdCount: () => void;
 //# sourceMappingURL=useUniqueId.d.ts.map

package/dist/es6/common/lib/utils/useUniqueId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useUniqueId.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useUniqueId.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,cAA0C,CAAC;AAExE;;;GAGG;AACH,eAAO,MAAM,WAAW,qCAIvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qCAAc,CAAC"}
+{"version":3,"file":"useUniqueId.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useUniqueId.ts"],"names":[],"mappings":"AAWA;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,cAAkC,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,WAAW,qCAIvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qCAAc,CAAC;AAEpC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,qBAEzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,YAE9B,CAAC"}

package/dist/es6/common/lib/utils/useUniqueId.js

@@ -1,6 +1,21 @@
-import uuid from 'uuid/v4';
 import { useConstant } from './useConstant';
-export var generateUniqueId = function () { return uuid().replace(/^[0-9\-]*/gi, ''); };
+// Create a unique seed per import to prevent collisions from other versions of `useUniqueId`
+var seed = Math.random()
+    .toString(36)
+    .slice(2)
+    .replace(/[0-9]*/, '')
+    .substr(0, 4);
+var c = 0;
+/**
+ * Generates a unique and HTML5 compliant identifier every time it is called. Internally it uses a 4
+ * character random seed starting with a letter. This seed is unique to each instance of this
+ * package meaning different versions of Canvas Kit on the page will have a different seed. Each
+ * call will use a Base 36 string (10 numbers + 26 letters) based on an incremented number. The
+ * incremented number always starts at 0 and can be reset for testing purposes using
+ * [resetUniqueIdCount](#resetuniqueidcount). [setUniqueSeed](#setuniqueseed) can also be used for
+ * testing or server side rendering to get the same results during hydration.
+ */
+export var generateUniqueId = function () { return seed + (c++).toString(36); };
 /**
  * Generate a unique ID if one is not provided. The generated ID will be stable across renders
  * @param id Optional ID provided that will be used instead of a unique ID
@@ -16,3 +31,26 @@ export var useUniqueId = function (id) {
  * TODO: Remove in major release
  */
 export var uniqueId = useUniqueId;
+/**
+ * Update the seed used by the id generator. This is useful for snapshot tests to help stabilize ids
+ * generated each run. This could also be used for server-side hydration - if you choose the same
+ * seed for server and set that on the client before components are rendered, the ids generated will
+ * be the same.
+ * @example
+ * // set in a script tag from the server
+ * setSeed(window.__ID_SEED); // set in a script tag from the server
+ *
+ * // jest setup
+ * before(() => {
+ *   setSeed('a')
+ * })
+ */
+export var setUniqueSeed = function (s) {
+    seed = s;
+};
+/**
+ * This should only be called for tests in an `beforeEach`
+ */
+export var resetUniqueIdCount = function () {
+    c = 0;
+};

package/dist/es6/form-field/lib/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAE,SAAS,EAAU,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAG9F,OAAO,EAAC,sBAAsB,EAAiC,MAAM,SAAS,CAAC;AAG/E,MAAM,WAAW,cACf,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAoED,cAAM,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACrD,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,SAAS,mBAAa;IAE7B,OAAO,CAAC,OAAO,CAAwC;IAEvD,OAAO,CAAC,cAAc,CA8BpB;IAEF,MAAM;CA2DP;AAKD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,sBAAsB,EAAiC,MAAM,SAAS,CAAC;AAE/E,MAAM,WAAW,cACf,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAoED,cAAM,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACrD,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,SAAS,mBAAa;IAE7B,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAO,CAAC,cAAc,CA8BpB;IAEF,MAAM;CA2DP;AAKD,eAAe,SAAS,CAAC"}

package/dist/es6/form-field/lib/FormField.js

@@ -35,11 +35,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { space } from '@workday/canvas-kit-react/tokens';
-import { ErrorType, styled } from '@workday/canvas-kit-react/common';
+import { ErrorType, styled, generateUniqueId, } from '@workday/canvas-kit-react/common';
 import Hint from './Hint';
 import Label from './Label';
 import { FormFieldLabelPosition } from './types';
-import uuid from 'uuid/v4';
 // Use a fieldset element for accessible radio groups
 var FormFieldFieldsetContainer = styled('fieldset')(function (_a) {
     var grow = _a.grow, labelPosition = _a.labelPosition;
@@ -99,7 +98,7 @@ var FormField = /** @class */ (function (_super) {
     __extends(FormField, _super);
     function FormField() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.inputId = _this.props.inputId || uuid();
+        _this.inputId = _this.props.inputId || generateUniqueId();
         _this.renderChildren = function (child) {
             if (React.isValidElement(child)) {
                 var props = __assign({}, child.props);

package/dist/es6/popup/lib/hooks/focus-trap-js.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus-trap-js.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/focus-trap-js.ts"],"names":[],"mappings":"AAiFA,iBAAS,cAAc,CACrB,KAAK,EAAE,aAAa,EACpB,UAAU,EAAE,WAAW,GAAG,QAAQ,EAClC,YAAY,GAAE,WAAW,EAAE,GAAG,IAAW,uBAgC1C;kBAnCQ,cAAc;;;AA0DvB,OAAO,EAAC,cAAc,EAAC,CAAC"}
+{"version":3,"file":"focus-trap-js.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/focus-trap-js.ts"],"names":[],"mappings":"AAkFA,iBAAS,cAAc,CACrB,KAAK,EAAE,aAAa,EACpB,UAAU,EAAE,WAAW,GAAG,QAAQ,EAClC,YAAY,GAAE,WAAW,EAAE,GAAG,IAAW,uBAgC1C;kBAnCQ,cAAc;;;AA0DvB,OAAO,EAAC,cAAc,EAAC,CAAC"}

package/dist/es6/popup/lib/hooks/focus-trap-js.js

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

package/dist/es6/popup/lib/hooks/index.d.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,4 +16,6 @@ export * from './usePopupPopper';
 export * from './usePopupStack';
 export * from './usePopupTarget';
 export * from './useReturnFocus';
+export * from './useTransferOnFullscreenEnter';
+export * from './useTransferOnFullscreenExit';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC"}

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

@@ -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/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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 declare const useCloseOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useCloseOnFullscreenExit.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnFullscreenExit.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,sIA0BpC,CAAC"}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import screenfull from 'screenfull';
+/**
+ * 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 var useCloseOnFullscreenExit = function (model, elemProps) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var handler = React.useCallback(function (event) {
+        if (!screenfull.isFullscreen) {
+            model.events.hide({ event: event });
+        }
+    }, [model.events]);
+    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/usePopupStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,aAAa,wMA6CzB,CAAC"}
+{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,aAAa,wMA8CzB,CAAC"}

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/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/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,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"}
+{"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();
@@ -45,7 +45,7 @@ export function useTooltip(_a) {
     var mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
     var popupModel = usePopupModel();
     var _g = React.useState(null), anchorElement = _g[0], setAnchorElement = _g[1];
-    var id = React.useState(function () { return uuid(); })[0];
+    var id = useUniqueId();
     var intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
     var intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
     var onHide = function () {
@@ -74,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** */

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "6.1.5",
+  "version": "6.3.0-next.0+6e10a940",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -57,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": "^6.1.5",
-    "@workday/canvas-kit-popup-stack": "^6.1.5",
-    "@workday/canvas-kit-preview-react": "^6.1.5",
+    "@workday/canvas-kit-labs-react": "^6.3.0-next.0+6e10a940",
+    "@workday/canvas-kit-popup-stack": "^6.3.0-next.0+6e10a940",
+    "@workday/canvas-kit-preview-react": "^6.3.0-next.0+6e10a940",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -70,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": "33b9994408c63b78923a201af73d8c2e6f7e5914"
+  "gitHead": "6e10a940283828fb6e34b23598a917a478bbabd6"
 }

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);
     };