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

package/popup/lib/hooks/useTransferOnFullscreenEnter.ts

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

package/popup/lib/hooks/useTransferOnFullscreenExit.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import screenfull from 'screenfull';
+
+import {PopupModel} from './usePopupModel';
+import {PopupStack} from '@workday/canvas-kit-popup-stack';
+
+/**
+ * Makes the popup transfer to 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 const useTransferOnFullscreenExit = (model: PopupModel, elemProps = {}) => {
+  const handler = React.useCallback(
+    event => {
+      if (!screenfull.isFullscreen && model.state.stackRef.current) {
+        PopupStack.transferToCurrentContext({
+          element: model.state.stackRef.current,
+          owner: model.state.targetRef.current!,
+        });
+      }
+    },
+    [model.state.stackRef, model.state.targetRef]
+  );
+
+  const visible = model.state.visibility !== 'hidden';
+
+  React.useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    if (screenfull.isEnabled) {
+      screenfull.on('change', handler);
+      return () => {
+        screenfull.off('change', handler);
+      };
+    }
+    return;
+  }, [handler, visible]);
+
+  return elemProps;
+};

package/radio/lib/Radio.tsx

@@ -28,7 +28,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/switch/lib/Switch.tsx

@@ -25,7 +25,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/tooltip/lib/useTooltip.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import uuid from 'uuid/v4';
 import {
   useCloseOnEscape,
   useAlwaysCloseOnOutsideClick,
   usePopupModel,
+  useCloseOnFullscreenExit,
 } from '@workday/canvas-kit-react/popup';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 const useIntentTimer = (fn: Function, waitMs: number = 0): {start(): void; clear(): void} => {
   const timer = React.useRef() as React.MutableRefObject<number | undefined>;
@@ -90,7 +91,7 @@ export function useTooltip<T extends Element = Element>({
   const mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
   const popupModel = usePopupModel();
   const [anchorElement, setAnchorElement] = React.useState<T | null>(null);
-  const [id] = React.useState(() => uuid());
+  const id = useUniqueId();
   const intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
   const intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
 
@@ -126,6 +127,7 @@ export function useTooltip<T extends Element = Element>({
 
   useCloseOnEscape(popupModel);
   useAlwaysCloseOnOutsideClick(popupModel);
+  useCloseOnFullscreenExit(popupModel);
 
   const visible = popupModel.state.visibility !== 'hidden';
 

package/ts3.5/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/ts3.5/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/ts3.5/dist/commonjs/common/lib/utils/useIsFullscreen.d.ts

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

package/ts3.5/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/ts3.5/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/ts3.5/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/ts3.5/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/ts3.5/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/ts3.5/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/ts3.5/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/ts3.5/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/ts3.5/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/ts3.5/dist/es6/common/lib/utils/useIsFullscreen.d.ts

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

package/ts3.5/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/ts3.5/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/ts3.5/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/ts3.5/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/ts3.5/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/ts3.5/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/ts3.5/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;
     /**