@workday/canvas-kit-react 5.3.15 → 5.4.0-next.1

package/dist/es6/tabs/lib/useTabsModel.js

@@ -10,52 +10,65 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { createEventMap, useEventMap } from '@workday/canvas-kit-react/common';
-import { cursorEventMap, useCursorModel, getNext, } from './cursor/useCursorModel';
-import { useListModel } from './list/useListModel';
+import { createEventMap, useEventMap, useUniqueId, } from '@workday/canvas-kit-react/common';
+import { defaultGetId, useListModel } from './list';
+import { useMenuModel } from './menu';
+import { overflowEventMap, useOverflowModel, } from './overflow';
 export var tabEventMap = createEventMap()({
-    guards: __assign(__assign({}, cursorEventMap.guards), { 
-        /**
-         * Should the tab activate? Can prevent the tab from activating. Use this only for advanced
-         * use-cases.
-         */
-        shouldActivate: 'activate' }),
-    callbacks: __assign(__assign({}, cursorEventMap.callbacks), { 
-        /**
-         * This callback will fire whenever a tab is activated. The data will contain the tab's named
-         * passed to the `Tabs.Item` component. If no name was passed, it will be the index of the tab
-         * as a string.
-         */
-        onActivate: 'activate' }),
+    guards: __assign({}, overflowEventMap.guards),
+    callbacks: __assign({}, overflowEventMap.callbacks),
 });
 export var useTabsModel = function (config) {
     if (config === void 0) { config = {}; }
-    var initialTabRef = React.useRef(config.initialTab);
-    var _a = React.useState(initialTabRef.current || ''), activeTab = _a[0], setActiveTab = _a[1];
-    var cursor = useCursorModel(__assign({ orientation: config.orientation || 'horizontal' }, config));
+    var _a;
+    var id = useUniqueId(config.id);
+    var initialSelectedRef = React.useRef(config.initialTab);
+    var getId = config.getId || defaultGetId;
+    var items = config.items; // || (emptyItems as T[]);
+    var model = useOverflowModel(__assign(__assign({}, config), { id: id + "-tabs", orientation: config.orientation || 'horizontal', items: items,
+        onRegisterItem: function (_a) {
+            var data = _a.data, prevState = _a.prevState;
+            var _b;
+            (_b = config === null || config === void 0 ? void 0 : config.onRegisterItem) === null || _b === void 0 ? void 0 : _b.call(config, { data: data, prevState: prevState });
+            if (!initialSelectedRef.current) {
+                initialSelectedRef.current = getId(data.item);
+                events.select({ id: initialSelectedRef.current });
+            }
+        }, initialSelectedIds: config.initialTab
+            ? [config.initialTab]
+            : ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? [getId(config.items[0])]
+                : [] }));
     var panels = useListModel();
-    var state = __assign(__assign({}, cursor.state), { activeTab: activeTab, panels: panels.state.items, panelIndexRef: panels.state.indexRef });
-    var events = useEventMap(tabEventMap, state, config, __assign(__assign({}, cursor.events), { activate: function (data) {
-            setActiveTab(data.tab);
-            events.goTo({ id: data.tab });
+    var state = __assign(__assign({}, model.state), { id: id,
+        getId: getId, orientation: config.orientation || 'horizontal', panels: panels.state.items, panelIndexRef: panels.state.indexRef });
+    var overflowItems = React.useMemo(function () { return (items ? items.filter(function (item) { return state.hiddenIds.includes(getId(item)); }) : undefined); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.hiddenIds, items]);
+    var events = useEventMap(tabEventMap, state, config, __assign(__assign({}, model.events), { registerPanel: panels.events.registerItem, unregisterPanel: panels.events.unregisterItem }));
+    var menu = useMenuModel({
+        id: id + "-menu",
+        items: overflowItems,
+        nonInteractiveIds: state.nonInteractiveIds.filter(function (key) { return !state.hiddenIds.includes(key); }),
+        onSelect: function (_a) {
+            var data = _a.data, prevState = _a.prevState;
+            var _b, _c;
+            menu.events.hide();
+            events.select(data);
+            (_c = (_b = config.menuConfig) === null || _b === void 0 ? void 0 : _b.onSelect) === null || _c === void 0 ? void 0 : _c.call(_b, { data: data, prevState: prevState });
         },
-        registerItem: function (data) {
-            if (!initialTabRef.current) {
-                initialTabRef.current = data.item.id;
-                setActiveTab(initialTabRef.current);
-            }
-            cursor.events.registerItem(data);
+        onShow: function (_a) {
+            var data = _a.data, prevState = _a.prevState;
+            var _b, _c;
+            // Always select the first item when the menu is opened
+            menu.events.first();
+            (_c = (_b = config.menuConfig) === null || _b === void 0 ? void 0 : _b.onShow) === null || _c === void 0 ? void 0 : _c.call(_b, { data: data, prevState: prevState });
         },
-        unregisterItem: function (data) {
-            // Activate the next tab if the current one is removed
-            if (state.activeTab === data.id && state.items.some(function (i) { return i.ref.current !== null; })) {
-                var item = getNext(state.activeTab, state.items);
-                events.activate({ tab: item.id });
-            }
-            cursor.events.unregisterItem(data);
-        }, registerPanel: panels.events.registerItem, unregisterPanel: panels.events.unregisterItem }));
+    });
     return {
         state: state,
         events: events,
+        menu: menu,
+        getId: model.getId,
+        selection: model.selection,
     };
 };

package/dist/es6/tokens/index.d.ts

@@ -1,7 +1,7 @@
 import { colors, gradients } from '@workday/canvas-colors-web';
 import { borderRadius, CanvasBorderRadius, CanvasBorderRadiusKeys, CanvasBorderRadiusValues } from './lib/radius';
 import { BrandingColor, CanvasColor } from './lib/colors.types';
-import depth, { CanvasDepth, CanvasDepthValue } from './lib/depth';
+import { depth, CanvasDepth, CanvasDepthValues } from './lib/depth';
 import { space, CanvasSpace, CanvasSpaceKeys, CanvasSpaceValues, CanvasSpaceNumberValues, CanvasSpaceNumbers, spaceNumbers } from './lib/space';
 import { type, fontFamily, monoFontFamily, CanvasType, CanvasTypeProperties, CanvasTypeVariants, CanvasTypeHierarchy } from './lib/type';
 import { CSSProperties } from './lib/types';
@@ -326,24 +326,7 @@ declare const canvas: {
         hoverBackground: string;
         divider: string;
     };
-    depth: {
-        inset: {
-            boxShadow: "inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)";
-        };
-        1: {
-            boxShadow: "0px 2px 4px 0 rgba(0, 0, 0, 0.08)";
-        };
-        2: {
-            boxShadow: "0px 4px 8px 0 rgba(0, 0, 0, 0.1)";
-        };
-        3: {
-            boxShadow: "0px 8px 16px 0 rgba(0, 0, 0, 0.12)";
-        };
-        4: {
-            border: "1px solid rgba(218, 226, 230, 1)";
-            boxShadow: "0px 8px 16px 0 rgba(0, 0, 0, 0.12)";
-        };
-    };
+    depth: CanvasDepth;
     fontFamily: string;
     gradients: {
         [key: string]: string;
@@ -427,7 +410,7 @@ declare const canvas: {
     };
 };
 export * from '@workday/canvas-colors-web';
-export { borderRadius, colors, gradients, depth, space, spaceNumbers, type, fontFamily, monoFontFamily, BrandingColor, CanvasDepth, CanvasDepthValue, CSSProperties, };
+export { borderRadius, colors, gradients, depth, space, spaceNumbers, type, fontFamily, monoFontFamily, BrandingColor, CanvasDepth, CanvasDepthValues, CSSProperties, };
 export default canvas;
 export type { CanvasBorderRadius, CanvasBorderRadiusKeys, CanvasBorderRadiusValues, CanvasColor, CanvasSpace, CanvasSpaceKeys, CanvasSpaceValues, CanvasSpaceNumberValues, CanvasSpaceNumbers, CanvasType, CanvasTypeProperties, CanvasTypeVariants, CanvasTypeHierarchy, };
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,MAAM,EAEN,SAAS,EAKV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAChH,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AACjE,OAAO,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,IAAI,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBX,CAAC;AAEF,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,aAAa,GACd,CAAC;AACF,eAAe,MAAM,CAAC;AAEtB,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,MAAM,EAEN,SAAS,EAKV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAChH,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAClE,OAAO,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,IAAI,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBX,CAAC;AAEF,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,GACd,CAAC;AACF,eAAe,MAAM,CAAC;AAEtB,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACpB,CAAA"}

package/dist/es6/tokens/index.js

@@ -1,7 +1,7 @@
 import { buttonColors, chartingColorOffsets, chartingColors, colors, commonColors, gradients, iconColors, inputColors, statusColors, typeColors, } from '@workday/canvas-colors-web';
 import { borderRadius } from './lib/radius';
 import { BrandingColor } from './lib/colors.types';
-import depth from './lib/depth';
+import { depth } from './lib/depth';
 import { space, spaceNumbers, } from './lib/space';
 import { type, fontFamily, monoFontFamily, } from './lib/type';
 var canvas = {

package/dist/es6/tokens/lib/depth.d.ts

@@ -1,4 +1,110 @@
-import depth, { CanvasDepth, CanvasDepthValue } from '@workday/canvas-depth-web';
-export { CanvasDepth, CanvasDepthValue };
-export default depth;
+export declare type CanvasDepth = {
+    /**
+     * ### Depth Inset
+     * 	Used for inset containers
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const insetCardStyles = {
+     *   ...depth.inset,
+     * };
+     * ```
+     */
+    inset: {
+        boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)';
+    };
+    /**
+     * ### Depth 1
+     * Used for minimal offset
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[1],
+     * };
+     * ```
+     */
+    1: {
+        boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)';
+    };
+    /**
+     * ### Depth 2
+     * Used for Cards, Popups, and Menus — our most common depth
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[2],
+     * };
+     * ```
+     */
+    2: {
+        boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)';
+    };
+    /**
+     * ### Depth 3
+     * Used for interactive Cards on hover
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[3],
+     * };
+     * ```
+     */
+    3: {
+        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    };
+    /**
+     * ### Depth 4
+     * Used for Cards on white backgrounds — adds border styles for more contrast
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[4],
+     * };
+     * ```
+     */
+    4: {
+        border: '1px solid rgba(218, 226, 230, 1)';
+        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    };
+};
+declare type ValueOf<T> = T[keyof T];
+export declare type CanvasDepthValues = ValueOf<CanvasDepth>;
+/**
+ * ### Depth Tokens
+ *
+ * Depth is the relative distance between surfaces in the z-axis.
+ * It provides delineation, focus, and priority with shadows and layering.
+ * There are five depth levels, `inset`, `1`, `2`, `3`, and `4`.
+ * Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+ *
+ * @example
+ * ```tsx
+ * import { depth } from '@workday/canvas-kit-react/tokens';
+ *
+ * const CustomCard = () => {
+ *   return (
+ *     <div css={depth[2]}>
+ *       A standard-depth card
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ */
+export declare const depth: CanvasDepth;
+export {};
 //# sourceMappingURL=depth.d.ts.map

package/dist/es6/tokens/lib/depth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/depth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAC,WAAW,EAAE,gBAAgB,EAAC,CAAC;AAEvC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/depth.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG;IACxB;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE;QACL,SAAS,EAAE,6CAA6C,CAAC;KAC1D,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,mCAAmC,CAAC;KAChD,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,kCAAkC,CAAC;KAC/C,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,oCAAoC,CAAC;KACjD,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,MAAM,EAAE,kCAAkC,CAAC;QAC3C,SAAS,EAAE,oCAAoC,CAAC;KACjD,CAAC;CACH,CAAC;AAEF,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK,EAAE,WAiBnB,CAAC"}

package/dist/es6/tokens/lib/depth.js

@@ -1,2 +1,40 @@
-import depth from '@workday/canvas-depth-web';
-export default depth;
+/**
+ * ### Depth Tokens
+ *
+ * Depth is the relative distance between surfaces in the z-axis.
+ * It provides delineation, focus, and priority with shadows and layering.
+ * There are five depth levels, `inset`, `1`, `2`, `3`, and `4`.
+ * Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+ *
+ * @example
+ * ```tsx
+ * import { depth } from '@workday/canvas-kit-react/tokens';
+ *
+ * const CustomCard = () => {
+ *   return (
+ *     <div css={depth[2]}>
+ *       A standard-depth card
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ */
+export var depth = {
+    inset: {
+        boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)',
+    },
+    1: {
+        boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)',
+    },
+    2: {
+        boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)',
+    },
+    3: {
+        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
+    },
+    4: {
+        border: '1px solid rgba(218, 226, 230, 1)',
+        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
+    },
+};

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

@@ -41,7 +41,7 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
         onMouseEnter: (event: React.SyntheticEvent<Element, Event>) => void;
         onMouseLeave: () => void;
         onMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
-        onFocus: (event: React.FocusEvent<Element>) => void;
+        onFocus: (event: React.FocusEvent<Element, Element>) => void;
         onBlur: () => void;
     };
     /** Mix these properties into the `Popper` component */

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/form-field/lib/Label.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
 import {colors, space, type} from '@workday/canvas-kit-react/tokens';
-import {accessibleHide as accessibleHideCSS} from '@workday/canvas-kit-react/common';
+import {accessibleHide as accessibleHideCSS, styled} from '@workday/canvas-kit-react/common';
 import {FormFieldLabelPosition, FormFieldLabelPositionBehavior} from './types';
 
 export interface LabelProps extends FormFieldLabelPositionBehavior {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "5.3.15",
+  "version": "5.4.0-next.1+bf910ff4",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -57,10 +57,9 @@
     "@emotion/styled": "^10.0.27",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-depth-web": "^0.16.4",
-    "@workday/canvas-kit-labs-react": "^5.3.15",
-    "@workday/canvas-kit-popup-stack": "^5.3.15",
-    "@workday/canvas-kit-preview-react": "^5.3.15",
+    "@workday/canvas-kit-labs-react": "^5.4.0-next.1+bf910ff4",
+    "@workday/canvas-kit-popup-stack": "^5.4.0-next.1+bf910ff4",
+    "@workday/canvas-kit-preview-react": "^5.4.0-next.1+bf910ff4",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -69,13 +68,14 @@
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
     "react-innertext": "^1.1.5",
+    "resize-observer-polyfill": "^1.5.1",
     "rtl-css-js": "^1.14.1",
     "screenfull": "^5.2.0",
-    "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": "fe5165ae7e3c7c6a537d64e7353f40d6add7ea95"
+  "gitHead": "bf910ff480fb9237ea4d70e95293de7bdffdb138"
 }

package/page-header/README.md

@@ -1,4 +1,9 @@
-# Canvas Kit Page Header
+# Canvas Kit Page Header (Deprecated)
+
+> Note: As of Canvas Kit v6, PageHeader is being soft-deprecated. It will be hard-deprecated
+> (completely removed) in v7. Please see the
+> [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
+> for more information.
 
 A Canvas component that displays the header of a specific page within a website or application. It
 is generally used as a sub-header to the main application header
@@ -16,19 +21,19 @@ yarn add @workday/canvas-kit-react
 
 ```tsx
 import * as React from 'react';
-import {PageHeader} from '@workday/canvas-kit-react/page-header';
+import {DeprecatedPageHeader} from '@workday/canvas-kit-react/page-header';
 import {IconButton} from '@workday/canvas-kit-react/button';
 import {exportIcon, fullscreenIcon} from '@workday/canvas-system-icons-web';
 
-<PageHeader title="Product">
+<DeprecatedPageHeader title="Product">
   <IconButton icon={exportIcon} />
   <IconButton icon={fullscreenIcon} />
-</PageHeader>
+</DeprecatedPageHeader>
 
-<PageHeader title="With Cap Width" capWidth={true}>
+<DeprecatedPageHeader title="With Cap Width" capWidth={true}>
   <IconButton icon={exportIcon} />
   <IconButton icon={fullscreenIcon} />
-</PageHeader>
+</DeprecatedPageHeader>
 ```
 
 ## Static Properties

package/page-header/index.ts

@@ -1,5 +1,5 @@
-import PageHeader from './lib/PageHeader';
+import DeprecatedPageHeader from './lib/PageHeader';
 
-export default PageHeader;
-export {PageHeader};
+export default DeprecatedPageHeader;
+export {DeprecatedPageHeader};
 export * from './lib/PageHeader';

package/page-header/lib/PageHeader.tsx

@@ -3,7 +3,15 @@ import styled from '@emotion/styled';
 import {colors, gradients, space, type} from '@workday/canvas-kit-react/tokens';
 import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
 
-export interface PageHeaderProps {
+/**
+ * ### Deprecated Page Header Props
+ *
+ * As of Canvas Kit v6, PageHeader is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v7. Please see the
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
+ * for more information.
+ */
+export interface DeprecatedPageHeaderProps {
   /**
    * The text of the PageHeader title.
    */
@@ -28,7 +36,7 @@ const Header = styled('header')({
   MozOsxFontSmoothing: 'grayscale',
 });
 
-const Container = styled('div')<Pick<PageHeaderProps, 'breakpoint' | 'capWidth'>>(
+const Container = styled('div')<Pick<DeprecatedPageHeaderProps, 'breakpoint' | 'capWidth'>>(
   {
     display: 'flex',
     alignItems: 'center',
@@ -68,7 +76,24 @@ const IconList = styled('div')({
   },
 });
 
-export default class PageHeader extends React.Component<PageHeaderProps> {
+/**
+ * ### Deprecated Page Header
+ *
+ * As of Canvas Kit v6, this component is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v7. Please see the
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
+ * for more information.
+ */
+export default class DeprecatedPageHeader extends React.Component<DeprecatedPageHeaderProps> {
+  componentDidMount() {
+    console.warn(
+      `This component is being deprecated and will be removed in Canvas Kit V7.\n
+      For more information, please see the V6 migration guide:\n
+      https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page
+      `
+    );
+  }
+
   private renderChildren(children: React.ReactNode): React.ReactNode {
     return React.Children.map(children, child => {
       if (!React.isValidElement(child)) {

package/popup/lib/PopupCard.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {keyframes} from '@emotion/core';
 
 import {Card} from '@workday/canvas-kit-react/card';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {space, type} from '@workday/canvas-kit-react/tokens';
 import {
   styled,
   TransformOrigin,
@@ -42,7 +42,7 @@ const popupAnimation = (transformOrigin: TransformOrigin) => {
 
 const StyledPopupCard = styled(Card)<
   StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
->(({transformOrigin}) => {
+>(type.levels.subtext.large, ({transformOrigin}) => {
   if (transformOrigin == null) {
     return {};
   }
@@ -77,7 +77,7 @@ export const PopupCard = createComponent('div')({
         maxWidth={`calc(100vw - ${space.l})`}
         {...props}
       >
-        <Card.Body>{children}</Card.Body>
+        {children}
       </StyledPopupCard>
     );
   },

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

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

package/popup/lib/hooks/useReturnFocus.tsx

@@ -8,7 +8,7 @@ import {changeFocus} from '@workday/canvas-kit-react/common';
  * `useInitialFocus`. This should be used with `useFocusRedirect` or `useFocusTrap` for a complete
  * focus management solution.
  *
- * This should ble used on popup elements that use `useInitialFocus`.
+ * This should be used on popup elements that use `useInitialFocus`.
  */
 export const useReturnFocus = (model: PopupModel, elemProps = {}) => {
   const visible = model.state.visibility !== 'hidden';

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/table/lib/TableRow.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import {CSSObject} from '@emotion/core';
-import styled from '@emotion/styled';
+import styled, {CSSObject} from '@emotion/styled';
 import {rgba} from 'polished';
 import {colors, space, spaceNumbers, statusColors} from '@workday/canvas-kit-react/tokens';
+import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
 import {borderColor, borderWidth, cellBorder} from './Table';
 
 export enum TableRowState {
@@ -92,7 +92,7 @@ function makeBorderlessStyle(_bgColor: string): CSSObject {
   };
 }
 
-const Row = styled('tr')<TableRowProps>(
+const StyledTableRow = styled('tr')<TableRowProps>(
   {
     'th, td': {
       backgroundColor: colors.frenchVanilla100,
@@ -192,16 +192,22 @@ const Row = styled('tr')<TableRowProps>(
   }
 );
 
-export default class TableRow extends React.Component<TableRowProps> {
-  public static State = TableRowState;
-
-  public render() {
-    const {state, header, children, ...elemProps} = this.props;
-
+const TableRow = createComponent('tr')({
+  displayName: 'TableRow',
+  Component: (
+    {state, header, children, ...elemProps}: TableRowProps & StyledType,
+    ref,
+    Element
+  ) => {
     return (
-      <Row state={state} header={header} {...elemProps}>
+      <StyledTableRow as={Element} ref={ref} state={state} header={header} {...elemProps}>
         {children}
-      </Row>
+      </StyledTableRow>
     );
-  }
-}
+  },
+  subComponents: {
+    State: TableRowState,
+  },
+});
+
+export default TableRow;