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

package/checkbox/lib/Checkbox.tsx

@@ -33,7 +33,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/common/README.md

@@ -17,6 +17,9 @@ Includes:
 - [Component Functions](#component-functions)
   - [createComponent](#createcomponent)
   - [ExtractProps](#extractprops)
+- [Common Hooks](#common-hooks)
+  - [useUniqueId](#useuniqueid)
+- [Utility Functions](#utility-functions)
 
 ## CanvasProvider
 
@@ -369,3 +372,78 @@ const MyNewComponent = createComponent('aside')(
 
 If the component is a `Component` and not an `ElementComponent`, only the prop interface will ever
 be returned since there is not HTML attribute interface associated with `Component`.
+
+## Common Hooks
+
+### useUniqueId
+
+A hook to generate a unique identifier for an element. Most commonly used for accessibility. The
+hook will generate a unique id the first render and always return the same id every render. This
+uses [generateUniqueId](#generateuniqueid) internally.
+
+```tsx
+const MyComponent = () => {
+  const id = useUniqueId();
+
+  return <div id={id}>Hello!</div>;
+};
+```
+
+If you wish to support user-defined ids, `useUniqueId` allows an optional id to override. This
+provides a safe and easy way of handling id overrides without conditional hooks.
+
+```tsx
+const MyComponent = ({id}) => {
+  const localId = useUniqueId(id);
+
+  return <div id={localId}>Hello!</div>;
+};
+```
+
+## Utility Functions
+
+### generateUniqueId
+
+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.
+
+```ts
+const id1 = generateUniqueId(); // vi1e0
+const id2 = generateUniqueId(); // vi1e1
+```
+
+### setUniqueSeed
+
+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.
+
+For snapshot testing, this will help stabilize snapshot tests. Use in conjunction with
+[resetUniqueIdCount](#resetuniqueidcount).
+
+```ts
+// set in a script tag from the server
+setUniqueSeed(window.__ID_SEED); // set in a script tag from the server
+
+// jest setup
+before(() => {
+  setUniqueSeed('a');
+});
+```
+
+### resetUniqueIdCount
+
+This should only be called for tests in `beforeEach` for snapshot tests. Use in conjunction with
+[setUniqueSeed](#setuniqueseed).
+
+```ts
+beforeEach(() => {
+  resetUniqueIdCount();
+});
+```

package/common/lib/utils/index.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/common/lib/utils/useIsFullscreen.ts

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

package/common/lib/utils/useUniqueId.ts

@@ -1,8 +1,24 @@
-import uuid from 'uuid/v4';
-
 import {useConstant} from './useConstant';
 
-export const generateUniqueId = () => uuid().replace(/^[0-9\-]*/gi, '');
+// Create a unique seed per import to prevent collisions from other versions of `useUniqueId`
+let seed = Math.random()
+  .toString(36)
+  .slice(2)
+  .replace(/[0-9]*/, '')
+  .substr(0, 4);
+
+let 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 const generateUniqueId = () => seed + (c++).toString(36);
 
 /**
  * Generate a unique ID if one is not provided. The generated ID will be stable across renders
@@ -20,3 +36,28 @@ export const useUniqueId = (id?: string) => {
  * TODO: Remove in major release
  */
 export const 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 const setUniqueSeed = (s: string) => {
+  seed = s;
+};
+
+/**
+ * This should only be called for tests in an `beforeEach`
+ */
+export const resetUniqueIdCount = () => {
+  c = 0;
+};

package/dist/commonjs/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/commonjs/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/commonjs/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/commonjs/common/lib/utils/index.js

@@ -15,6 +15,7 @@ __export(require("./useMount"));
 __export(require("./components"));
 __export(require("./models"));
 __export(require("./elements"));
+__export(require("./useIsFullscreen"));
 __export(require("./useWindowSize"));
 __export(require("./useResizeObserver"));
 __export(require("./StaticStates"));

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

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

package/dist/commonjs/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/commonjs/common/lib/utils/useIsFullscreen.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var screenfull_1 = __importDefault(require("screenfull"));
+exports.useIsFullscreen = function () {
+    var _a = react_1.default.useState(false), isFullscreen = _a[0], setIsFullscreen = _a[1];
+    var handler = react_1.default.useCallback(function () {
+        setIsFullscreen(screenfull_1.default.isFullscreen);
+    }, []);
+    react_1.default.useEffect(function () {
+        screenfull_1.default.on('change', handler);
+        return function () {
+            screenfull_1.default.off('change', handler);
+        };
+    }, [handler]);
+    return isFullscreen;
+};

package/dist/commonjs/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/commonjs/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/commonjs/common/lib/utils/useUniqueId.js

@@ -1,11 +1,23 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var v4_1 = __importDefault(require("uuid/v4"));
 var useConstant_1 = require("./useConstant");
-exports.generateUniqueId = function () { return v4_1.default().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.
+ */
+exports.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
@@ -21,3 +33,26 @@ exports.useUniqueId = function (id) {
  * TODO: Remove in major release
  */
 exports.uniqueId = exports.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')
+ * })
+ */
+exports.setUniqueSeed = function (s) {
+    seed = s;
+};
+/**
+ * This should only be called for tests in an `beforeEach`
+ */
+exports.resetUniqueIdCount = function () {
+    c = 0;
+};

package/dist/commonjs/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/commonjs/form-field/lib/FormField.js

@@ -51,7 +51,6 @@ var common_1 = require("@workday/canvas-kit-react/common");
 var Hint_1 = __importDefault(require("./Hint"));
 var Label_1 = __importDefault(require("./Label"));
 var types_1 = require("./types");
-var v4_1 = __importDefault(require("uuid/v4"));
 // Use a fieldset element for accessible radio groups
 var FormFieldFieldsetContainer = common_1.styled('fieldset')(function (_a) {
     var grow = _a.grow, labelPosition = _a.labelPosition;
@@ -111,7 +110,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 || v4_1.default();
+        _this.inputId = _this.props.inputId || common_1.generateUniqueId();
         _this.renderChildren = function (child) {
             if (React.isValidElement(child)) {
                 var props = __assign({}, child.props);

package/dist/commonjs/loading-animation/lib/LoadingDots.js

@@ -32,14 +32,11 @@ 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 core_1 = require("@emotion/core");
-var styled_1 = __importDefault(require("@emotion/styled"));
 var tokens_1 = __importStar(require("@workday/canvas-kit-react/tokens"));
+var common_1 = require("@workday/canvas-kit-react/common");
 /**
  * Keyframe for the dots loading animation.
  */
@@ -47,7 +44,7 @@ var keyframesLoading = core_1.keyframes(templateObject_1 || (templateObject_1 =
 /**
  * The actual loading dot div.
  */
-var LoadingAnimationDot = styled_1.default('div')({
+var LoadingAnimationDot = common_1.styled('div')({
     backgroundColor: tokens_1.default.colors.soap400,
     width: tokens_1.default.space.s,
     height: tokens_1.default.space.s,
@@ -73,7 +70,7 @@ var LoadingAnimationDot = styled_1.default('div')({
 /**
  * A simple container for the loading dots.
  */
-var Container = styled_1.default('div')({
+var Container = common_1.styled('div')({
     display: 'inline-block',
 });
 /**

package/dist/commonjs/popup/lib/PopupCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA2CD,eAAO,MAAM,SAAS,gEA0BpB,CAAC"}
+{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS,gEAuBpB,CAAC"}

package/dist/commonjs/popup/lib/PopupCard.js

@@ -44,13 +44,7 @@ var popupAnimation = function (transformOrigin) {
     var translate = common_1.getTranslateFromOrigin(transformOrigin, tokens_1.space.xxs);
     return core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "], ["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "])), translate.x, translate.y);
 };
-var StyledPopupCard = common_1.styled(card_1.Card)(tokens_1.type.levels.subtext.large, {
-    position: 'relative',
-    maxWidth: "calc(100vw - " + tokens_1.space.l + ")",
-}, function (_a) {
-    var width = _a.width;
-    return width && { width: width };
-}, function (_a) {
+var StyledPopupCard = common_1.styled(card_1.Card)(tokens_1.type.levels.subtext.large, function (_a) {
     var transformOrigin = _a.transformOrigin;
     if (transformOrigin == null) {
         return {};
@@ -69,13 +63,13 @@ var StyledPopupCard = common_1.styled(card_1.Card)(tokens_1.type.levels.subtext.
 exports.PopupCard = common_1.createComponent('div')({
     displayName: 'Popup.Card',
     Component: function (_a, ref, Element) {
-        var children = _a.children, model = _a.model, _b = _a.padding, padding = _b === void 0 ? 'l' : _b, _c = _a.depth, depth = _c === void 0 ? 2 : _c, width = _a.width, elemProps = __rest(_a, ["children", "model", "padding", "depth", "width"]);
+        var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
         var localModel = common_1.useModelContext(hooks_1.PopupModelContext, model);
         var props = hooks_1.usePopupCard(localModel, elemProps, ref);
         var transformOrigin = React.useMemo(function () {
             return getTransformFromPlacement_1.getTransformFromPlacement(localModel.state.placement || 'bottom');
         }, [localModel.state.placement]);
-        return (React.createElement(StyledPopupCard, __assign({ as: Element, transformOrigin: transformOrigin, depth: depth, width: width, padding: padding }, props), children));
+        return (React.createElement(StyledPopupCard, __assign({ as: Element, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 2, maxWidth: "calc(100vw - " + tokens_1.space.l + ")" }, props), children));
     },
 });
 var templateObject_1;

package/dist/commonjs/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/commonjs/popup/lib/hooks/focus-trap-js.js

@@ -1,5 +1,6 @@
 "use strict";
 // refactor for v5
+/// <reference types="@types/node" />
 Object.defineProperty(exports, "__esModule", { value: true });
 var candidateSelectors = [
     'input',

package/dist/commonjs/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/commonjs/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/commonjs/popup/lib/hooks/index.js

@@ -7,6 +7,7 @@ __export(require("./useAlwaysCloseOnOutsideClick"));
 __export(require("./useAssistiveHideSiblings"));
 __export(require("./useBringToTopOnClick"));
 __export(require("./useCloseOnEscape"));
+__export(require("./useCloseOnFullscreenExit"));
 __export(require("./useCloseOnOutsideClick"));
 __export(require("./useDisableBodyScroll"));
 __export(require("./useFocusRedirect"));
@@ -20,3 +21,5 @@ __export(require("./usePopupPopper"));
 __export(require("./usePopupStack"));
 __export(require("./usePopupTarget"));
 __export(require("./useReturnFocus"));
+__export(require("./useTransferOnFullscreenEnter"));
+__export(require("./useTransferOnFullscreenExit"));

package/dist/commonjs/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/commonjs/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/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var screenfull_1 = __importDefault(require("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.
+ */
+exports.useCloseOnFullscreenExit = function (model, elemProps) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var handler = react_1.default.useCallback(function (event) {
+        if (!screenfull_1.default.isFullscreen) {
+            model.events.hide({ event: event });
+        }
+    }, [model.events]);
+    var visible = model.state.visibility !== 'hidden';
+    react_1.default.useEffect(function () {
+        if (!visible) {
+            return;
+        }
+        if (screenfull_1.default.isEnabled) {
+            screenfull_1.default.on('change', handler);
+            return function () {
+                screenfull_1.default.off('change', handler);
+            };
+        }
+        return;
+    }, [handler, visible]);
+    return elemProps;
+};

package/dist/commonjs/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/commonjs/popup/lib/hooks/usePopupStack.js

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

package/dist/commonjs/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/commonjs/popup/lib/hooks/useReturnFocus.js

@@ -10,7 +10,7 @@ var common_1 = require("@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`.
  */
 exports.useReturnFocus = function (model, elemProps) {
     if (elemProps === void 0) { elemProps = {}; }

package/dist/commonjs/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/commonjs/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/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var screenfull_1 = __importDefault(require("screenfull"));
+var canvas_kit_popup_stack_1 = require("@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.
+ */
+exports.useTransferOnFullscreenEnter = function (model, elemProps) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var handler = react_1.default.useCallback(function (event) {
+        if (screenfull_1.default.isFullscreen && model.state.stackRef.current) {
+            canvas_kit_popup_stack_1.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_1.default.useEffect(function () {
+        if (!visible) {
+            return;
+        }
+        if (screenfull_1.default.isEnabled) {
+            screenfull_1.default.on('change', handler);
+            return function () {
+                screenfull_1.default.off('change', handler);
+            };
+        }
+        return;
+    }, [handler, visible]);
+    return elemProps;
+};