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

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

@@ -0,0 +1,40 @@
+"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 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.
+ */
+exports.useTransferOnFullscreenExit = 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;
+};

package/dist/commonjs/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/commonjs/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/commonjs/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/commonjs/tabs/lib/menu/MenuList.js

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

package/dist/commonjs/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/commonjs/tabs/lib/overflow/useOverflowModel.js

@@ -46,6 +46,9 @@ function getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, selec
             itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
         }
     }
+    else {
+        itemWidth += overflowTargetWidth;
+    }
     for (var key in itemWidthCache) {
         if (key !== selectedKey) {
             itemWidth += itemWidthCache[key];
@@ -97,6 +100,8 @@ exports.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;
@@ -104,6 +109,10 @@ exports.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/commonjs/tabs/lib/overflow/useOverflowTarget.js

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,GACf,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IAuCF,2EAA2E;;;;;;;;;;IAY3E,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;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/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();
@@ -53,15 +50,20 @@ var isInteractiveElement = function (element) {
  * into a target, popper and tooltip
  */
 function useTooltip(_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.type, type = _c === void 0 ? 'label' : _c, _d = _b.titleText, titleText = _d === void 0 ? '' : _d;
+    var _b = _a === void 0 ? {} : _a, _c = _b.type, type = _c === void 0 ? 'label' : _c, _d = _b.titleText, titleText = _d === void 0 ? '' : _d, _e = _b.showDelay, showDelay = _e === void 0 ? 300 : _e, _f = _b.hideDelay, hideDelay = _f === void 0 ? 100 : _f;
     var mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
     var popupModel = popup_1.usePopupModel();
-    var _e = React.useState(null), anchorElement = _e[0], setAnchorElement = _e[1];
-    var id = React.useState(function () { return v4_1.default(); })[0];
-    var intentTimer = useIntentTimer(popupModel.events.hide, 100);
+    var _g = React.useState(null), anchorElement = _g[0], setAnchorElement = _g[1];
+    var id = common_1.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);
@@ -81,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** */
@@ -90,10 +93,10 @@ function useTooltip(_a) {
             // This will replace the accessible name of the target element
             'aria-label': type === 'label' ? titleText : undefined,
             onMouseEnter: onOpenFromTarget,
-            onMouseLeave: intentTimer.start,
+            onMouseLeave: onHide,
             onMouseDown: onMouseDown,
             onFocus: onFocus,
-            onBlur: intentTimer.start,
+            onBlur: onHide,
         },
         /** Mix these properties into the `Popper` component */
         popperProps: {
@@ -106,7 +109,7 @@ function useTooltip(_a) {
             id: type === 'describe' && visible ? id : undefined,
             role: 'tooltip',
             onMouseEnter: onOpen,
-            onMouseLeave: intentTimer.start,
+            onMouseLeave: onHide,
         },
     };
 }

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/loading-animation/lib/LoadingDots.js

@@ -26,8 +26,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 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/dist/es6/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/es6/popup/lib/PopupCard.js

@@ -35,13 +35,7 @@ var popupAnimation = function (transformOrigin) {
     var translate = getTranslateFromOrigin(transformOrigin, space.xxs);
     return 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 = styled(Card)(type.levels.subtext.large, {
-    position: 'relative',
-    maxWidth: "calc(100vw - " + space.l + ")",
-}, function (_a) {
-    var width = _a.width;
-    return width && { width: width };
-}, function (_a) {
+var StyledPopupCard = styled(Card)(type.levels.subtext.large, function (_a) {
     var transformOrigin = _a.transformOrigin;
     if (transformOrigin == null) {
         return {};
@@ -60,13 +54,13 @@ var StyledPopupCard = styled(Card)(type.levels.subtext.large, {
 export var PopupCard = 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 = useModelContext(PopupModelContext, model);
         var props = usePopupCard(localModel, elemProps, ref);
         var transformOrigin = React.useMemo(function () {
             return 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 - " + space.l + ")" }, props), children));
     },
 });
 var templateObject_1;

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