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

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/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/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/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/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/tooltip/lib/useTooltip.js

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

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/useUniqueId.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/form-field/lib/FormField.tsx

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "6.2.2",
+  "version": "6.3.0-next.0+6e10a940",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -57,9 +57,9 @@
     "@emotion/styled": "^10.0.27",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^6.2.2",
-    "@workday/canvas-kit-popup-stack": "^6.2.2",
-    "@workday/canvas-kit-preview-react": "^6.2.2",
+    "@workday/canvas-kit-labs-react": "^6.3.0-next.0+6e10a940",
+    "@workday/canvas-kit-popup-stack": "^6.3.0-next.0+6e10a940",
+    "@workday/canvas-kit-preview-react": "^6.3.0-next.0+6e10a940",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -71,12 +71,11 @@
     "resize-observer-polyfill": "^1.5.1",
     "rtl-css-js": "^1.14.1",
     "screenfull": "^5.2.0",
-    "use-resize-observer": "~7.0.1",
-    "uuid": "^3.3.3"
+    "use-resize-observer": "~7.0.1"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^1.0.0",
     "@workday/canvas-applet-icons-web": "^0.17.50"
   },
-  "gitHead": "55fe87b5bbce5d5ffee89d9dea12378f444475f6"
+  "gitHead": "6e10a940283828fb6e34b23598a917a478bbabd6"
 }

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

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

package/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,11 +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>;
@@ -91,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);
 

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/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/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/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/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;
     /**