@workday/canvas-kit-react 15.0.0-alpha.1326-next.0 → 15.0.0

package/common/lib/theming/getObjectProxy.ts

@@ -11,6 +11,7 @@ export type RecursivePartial<T> = {
  * This function will also handle nested properties.
  * @param target A partial object with up to the same shape as the `fallback` object
  * @param fallback A fallback object. If a property to be accessed from the proxy is not available on the target object, the fallback object will be used
+ * @deprecated ⚠️ `getObjectProxy` is deprecated. This utility was used for theme object fallbacks. Now that we're shifting to a global theming approach based on CSS variables, this is no longer needed. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
  */
 export function getObjectProxy<T extends {}>(
   target: RecursivePartial<T> | undefined,
@@ -23,13 +24,19 @@ export function getObjectProxy<T extends {}>(
           // @ts-ignore
           return getObjectProxy(target[prop], (fallback as any)[prop]);
         }
-        const targetProp = target[prop as keyof T];
+        const targetProp = Reflect.get(target as {}, prop, receiver); //?
         if (targetProp !== undefined) {
           return targetProp;
         }
         return Reflect.get(fallback, prop, receiver);
       },
+      getOwnPropertyDescriptor(_target, prop) {
+        // the fallback has all the correct properties, so use the fallback for all property
+        // descriptors
+        return Reflect.getOwnPropertyDescriptor(fallback, prop); //Reflect.getOwnPropertyDescriptor(fallback, prop);
+      },
       ownKeys() {
+        // the fallback has all the correct properties, so use the fallback for all keys
         return Reflect.ownKeys(fallback);
       },
     }) as T;

package/common/lib/theming/index.ts

@@ -1,8 +1,36 @@
 export * from './breakpoints';
+/**
+ * @deprecated ⚠️ Theme types are deprecated. Use CSS variables from `@workday/canvas-tokens-web` instead.
+ * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export * from './types';
-export {default as styled, StyleRewriteFn, filterOutProps} from './styled';
+/**
+ * @deprecated ⚠️ `styled` is deprecated. Use `createStyles` or `createStencil` from `@workday/canvas-kit-styling` instead.
+ * For more information, view our [Styling Docs](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--docs).
+ */
+export {default as styled, type StyleRewriteFn, filterOutProps} from './styled';
+/**
+ * @deprecated ⚠️ `defaultCanvasTheme` is deprecated. Use `defaultBranding` from `@workday/canvas-kit-react/common` instead.
+ * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export * from './theme';
+/**
+ * @deprecated ⚠️ `useTheme` and `getTheme` are deprecated. Use CSS variables from `@workday/canvas-tokens-web` instead.
+ * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export * from './useTheme';
+/**
+ * @deprecated ⚠️ `useThemedRing` is deprecated. Use `brand.common.focusOutline` CSS variable instead.
+ * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export * from './useThemedRing';
+/**
+ * @deprecated ⚠️ `useIsRTL` is deprecated. Use `isElementRTL` or the `:dir()` CSS pseudo-class selector instead.
+ * For more information, see [MDN :dir()](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir).
+ */
 export * from './useIsRTL';
+/**
+ * @deprecated ⚠️ `getObjectProxy` is deprecated. This utility was used for theme object fallbacks and is no longer needed.
+ * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export * from './getObjectProxy';

package/common/lib/theming/styled.ts

@@ -1,8 +1,9 @@
-import {default as emotionStyled, CreateStyled, Interpolation, CSSObject} from '@emotion/styled';
+import {CSSObject, CreateStyled, Interpolation, default as emotionStyled} from '@emotion/styled';
+import rtlCSSJS from 'rtl-css-js';
+
 import {CSSProperties} from '@workday/canvas-kit-react/tokens';
 
-import {useTheme, EmotionCanvasTheme, ContentDirection} from './index';
-import rtlCSSJS from 'rtl-css-js';
+import {ContentDirection, EmotionCanvasTheme, useTheme} from './index';
 
 const noop = (styles: any) => styles;
 

package/common/lib/theming/theme.ts

@@ -1,6 +1,7 @@
-import {CanvasTheme, ContentDirection} from './types';
 import {base} from '@workday/canvas-tokens-web';
-import {breakpoints, up, down, between, only} from './breakpoints';
+
+import {between, breakpoints, down, only, up} from './breakpoints';
+import {CanvasTheme, ContentDirection} from './types';
 
 /**
  * @deprecated ⚠️ `defaultCanvasTheme` is deprecated and will be removed in a future major version. If you want to reset the theme, use `defaultBranding` and apply it to the `CanvasProvider`. For more information, view our [theming docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs).

package/common/lib/theming/types.ts

@@ -1,4 +1,4 @@
-import {CanvasBreakpoints, BreakpointFnParam} from './breakpoints';
+import {BreakpointFnParam, CanvasBreakpoints} from './breakpoints';
 
 /**
  * A single palette within a Canvas theme
@@ -23,6 +23,7 @@ type CanvasThemeCommonPalette = {
 
 /**
  * Direction of page content for internationalization
+ * @deprecated ⚠️ `ContentDirection` is deprecated. Use the `:dir()` CSS pseudo-class selector and CSS logical properties instead. For more information, see [MDN :dir()](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) and [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
  */
 export enum ContentDirection {
   LTR = 'ltr',
@@ -31,8 +32,8 @@ export enum ContentDirection {
 
 /**
  * The format of a Canvas theme for components that support it.
+ * @deprecated ⚠️ `CanvasTheme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
  */
-
 export interface CanvasTheme {
   palette: {
     common: CanvasThemeCommonPalette;
@@ -252,17 +253,31 @@ export interface Themeable {
 
 /**
  * For custom themes that do not overwrite every default.
+ * @deprecated ⚠️ `RecursivePartial` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
  */
 type RecursivePartial<T> = {
   [P in keyof T]?: RecursivePartial<T[P]>;
 };
 
+/**
+ * @deprecated ⚠️ `PartialCanvasTheme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export type PartialCanvasTheme = RecursivePartial<CanvasTheme>;
+
+/**
+ * @deprecated ⚠️ `PartialCanvasThemePalette` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export type PartialCanvasThemePalette = RecursivePartial<CanvasThemePalette>;
+
 export type PartialEmotionCanvasTheme = {canvas?: PartialCanvasTheme};
+
 declare module '@emotion/react' {
   export interface Theme {
     canvas: CanvasTheme;
   }
 }
+
+/**
+ * @deprecated ⚠️ `EmotionCanvasTheme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export type EmotionCanvasTheme = {canvas: CanvasTheme};

package/common/lib/theming/useIsRTL.ts

@@ -1,6 +1,7 @@
-import * as React from 'react';
 import {ThemeContext} from '@emotion/react';
-import {EmotionCanvasTheme, ContentDirection, PartialEmotionCanvasTheme} from './types';
+import * as React from 'react';
+
+import {ContentDirection, EmotionCanvasTheme, PartialEmotionCanvasTheme} from './types';
 
 function useDefaultTheme<T, C>(theme: T | undefined, config: C, fn: (config: C) => T) {
   return theme || fn(config);

package/common/lib/theming/useTheme.ts

@@ -1,22 +1,26 @@
 // refactor for v5
 /// <reference types="@types/node" />
-
 import {useTheme as useEmotionTheme} from '@emotion/react';
+
+import {cssVar} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+
 import {
-  defaultCanvasTheme,
+  CanvasTheme,
   EmotionCanvasTheme,
   PartialEmotionCanvasTheme,
-  CanvasTheme,
+  defaultCanvasTheme,
 } from './index';
-import {cssVar} from '@workday/canvas-kit-styling';
-import {base} from '@workday/canvas-tokens-web';
 
 /**
- * We can adjust the shift but this should get us close enough until we clean up the algorithm to determine the colors.
+ * Attempt to match chroma-js's darken/brighten behavior using OKLCH.
+ * Chroma's darken(1) reduces LAB lightness by ~18 units (out of 100).
+ * In OKLCH, lightness is 0-1, so we scale: value/100 * 0.18 = value * 0.0018
  * @deprecated ⚠️ `shiftColor` is deprecated and will be removed in a future major version. While we work on an algorithm for color shifting, you can use [`oklch from`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) to generate a palette.
  */
 const shiftColor = (color: string, value: number) => {
-  return `oklch(from ${color} calc(l ${value > 0 ? '+' : '-'} ${Math.abs(value) / 1000}) c h)`;
+  const shift = Math.abs(value) * 0.0018;
+  return `oklch(from ${color} calc(l ${value > 0 ? '+' : '-'} ${shift}) c h)`;
 };
 
 const generatePalette = (

package/common/lib/theming/useThemedRing.ts

@@ -1,7 +1,7 @@
 import {CanvasTheme, EmotionCanvasTheme, useTheme} from '@workday/canvas-kit-react/common';
-import {brand, system} from '@workday/canvas-tokens-web';
 import {CSSProperties} from '@workday/canvas-kit-react/tokens';
 import {cssVar} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
 
 type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
 interface ContrastColors {

package/common/lib/utils/colorUtils.ts

@@ -1,10 +1,12 @@
-import {CanvasColor, colors} from '@workday/canvas-kit-react/tokens';
 import chroma from 'chroma-js';
 
+import {CanvasColor, colors} from '@workday/canvas-kit-react/tokens';
+
 /**
  * The function takes in a color string or an enum value of CanvasColor and returns its hex value color.
  * @param value a string or an enum value of CanvasColor
  * @returns the hex value color
+ * @deprecated ⚠️ `getColor` is deprecated.
  */
 export function getColor(value?: CanvasColor | string) {
   if (value! in colors) {
@@ -14,9 +16,12 @@ export function getColor(value?: CanvasColor | string) {
 }
 
 // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+/**
+ * @deprecated ⚠️ `expandHex` is deprecated.
+ */
 export const expandHex = (hex: string) => {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  return hex.replace(shorthandRegex, function(m: string, r: string, g: string, b: string) {
+  return hex.replace(shorthandRegex, function (m: string, r: string, g: string, b: string) {
     return r + r + g + g + b + b;
   });
 };
@@ -37,6 +42,7 @@ const colorPriority = [
  * have a high enough contrast ratio, picks the first color of the following that meets 4.5:1 or higher:
  * [frenchVanilla100, blackPepper300, blackPepper400, blackPepper500, blackPepper600]
  * (https://www.w3.org/TR/WCAG20-TECHS/G18.html)
+ * @deprecated ⚠️ `pickForegroundColor` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
  */
 export const pickForegroundColor = (
   background: string,

package/common/lib/utils/components.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import {assert} from './assert';
+import {setCanvasKitTags} from './insights';
 import {memoize} from './memoize';
-import {MergeProps, mergeProps, RemoveNulls} from './mergeProps';
+import {MergeProps, RemoveNulls, mergeProps} from './mergeProps';
 import {Model} from './models';
-import {setCanvasKitTags} from './insights';
 
 /**
  * Adds the `as` to the style interface to support `as` in styled components
@@ -26,20 +27,20 @@ type Constructor<T> = new (...args: any[]) => T;
 type ExtractRef<T> = T extends undefined // test if T was even passed in
   ? never // T not passed in, we'll set the ref to `never`
   : T extends Constructor<infer C>
-  ? React.LegacyRef<C>
-  : React.Ref<
-      T extends keyof ElementTagNameMap // test if T is an element string like 'button' or 'div'
-        ? ElementTagNameMap[T] // if yes, the ref should be the element interface. `'button' => HTMLButtonElement`
-        : T extends ElementComponent<infer U, any> // if no, check if we can infer the the element type from an `ElementComponent` interface
-        ? U extends keyof ElementTagNameMap // test inferred U to see if it extends an element string
-          ? ElementTagNameMap[U] // if yes, use the inferred U and convert to an element interface. `'button' => HTMLButtonElement`
-          : U // if no, fall back to inferred U. Hopefully it is already an element interface
-        : T extends React.FC<{ref?: infer R}> // test if T extends a React functional component with a ref (Emotion's styled components do this)
-        ? R extends React.RefObject<infer E> // if yes, extract the element interface. This step unwraps the ref. Otherwise we'll get React.Ref<React.Ref<Element>>
-          ? E // if yes, use the inferred E
-          : never // never here prevents double refs. Basically the return would be React.Ref<E | {this value}>. I'm not entirely sure why...
-        : T // if no, fall back to T. Hopefully it is already an element interface
-    >;
+    ? React.LegacyRef<C>
+    : React.Ref<
+        T extends keyof ElementTagNameMap // test if T is an element string like 'button' or 'div'
+          ? ElementTagNameMap[T] // if yes, the ref should be the element interface. `'button' => HTMLButtonElement`
+          : T extends ElementComponent<infer U, any> // if no, check if we can infer the the element type from an `ElementComponent` interface
+            ? U extends keyof ElementTagNameMap // test inferred U to see if it extends an element string
+              ? ElementTagNameMap[U] // if yes, use the inferred U and convert to an element interface. `'button' => HTMLButtonElement`
+              : U // if no, fall back to inferred U. Hopefully it is already an element interface
+            : T extends React.FC<{ref?: infer R}> // test if T extends a React functional component with a ref (Emotion's styled components do this)
+              ? R extends React.RefObject<infer E> // if yes, extract the element interface. This step unwraps the ref. Otherwise we'll get React.Ref<React.Ref<Element>>
+                ? E // if yes, use the inferred E
+                : never // never here prevents double refs. Basically the return would be React.Ref<E | {this value}>. I'm not entirely sure why...
+              : T // if no, fall back to T. Hopefully it is already an element interface
+      >;
 
 /**
  * Generic component props with "as" prop
@@ -98,24 +99,24 @@ export type ExtractProps<
     | Component<any>
     | React.ComponentType<any>
     | undefined
-    | never = undefined
+    | never = undefined,
 > = ExtractMaybeModel<
   TComponent,
   TComponent extends {__element: infer E; __props: infer P} //ElementComponent<infer E, infer P> // test if `TComponent` is an `ElementComponent`, while inferring both default element and props associated
     ? [TElement] extends [never] // test if user passed `never` for the `TElement` override. We have to test `never` first, otherwise TS gets confused and `ExtractProps` will return `never`. https://github.com/microsoft/TypeScript/issues/23182
       ? P // else attach only inferred props `P`
       : TElement extends undefined // else test if TElement was defined
-      ? E extends keyof JSX.IntrinsicElements // test if the inferred element `E` is in `JSX.IntrinsicElements`
-        ? P & ExtractHTMLAttributes<JSX.IntrinsicElements[E]> // `TElement` wasn't explicitly defined, so let's fall back to the inferred element's HTML attribute interface + props `P`
-        : P & ExtractProps<E> // E isn't in `JSX.IntrinsicElements`, return inferred props `P` + props extracted from component `E`.
-      : TElement extends keyof JSX.IntrinsicElements // `TElement` was defined, test if it is in `JSX.IntrinsicElements`
-      ? P & ExtractHTMLAttributes<JSX.IntrinsicElements[TElement]> // `TElement` is in `JSX.IntrinsicElements`, return inferred props `P` + HTML attributes of `TElement`
-      : P & ExtractProps<TElement> // `TElement` is not in `JSX.IntrinsicElements`, return inferred props `P` + props extracted from component `TElement`.
+        ? E extends keyof JSX.IntrinsicElements // test if the inferred element `E` is in `JSX.IntrinsicElements`
+          ? P & ExtractHTMLAttributes<JSX.IntrinsicElements[E]> // `TElement` wasn't explicitly defined, so let's fall back to the inferred element's HTML attribute interface + props `P`
+          : P & ExtractProps<E> // E isn't in `JSX.IntrinsicElements`, return inferred props `P` + props extracted from component `E`.
+        : TElement extends keyof JSX.IntrinsicElements // `TElement` was defined, test if it is in `JSX.IntrinsicElements`
+          ? P & ExtractHTMLAttributes<JSX.IntrinsicElements[TElement]> // `TElement` is in `JSX.IntrinsicElements`, return inferred props `P` + HTML attributes of `TElement`
+          : P & ExtractProps<TElement> // `TElement` is not in `JSX.IntrinsicElements`, return inferred props `P` + props extracted from component `TElement`.
     : TComponent extends {__props: infer P} // test if `TComponent` is a `Component`, while inferring props `P`
-    ? P // else attach only inferred props `P`
-    : TComponent extends React.ComponentType<infer P> // test if `TComponent` is a `React.ComponentType` (class or functional component)
-    ? P // it was a `React.ComponentType`, return inferred props `P`
-    : {} // We don't know what `TComponent` was, return an empty object
+      ? P // else attach only inferred props `P`
+      : TComponent extends React.ComponentType<infer P> // test if `TComponent` is a `React.ComponentType` (class or functional component)
+        ? P // it was a `React.ComponentType`, return inferred props `P`
+        : {} // We don't know what `TComponent` was, return an empty object
 >;
 
 // If the component has a model, be sure to add it to the prop interface
@@ -240,7 +241,7 @@ export const createContainer =
       | React.ComponentType
       | ElementComponent<any, any>
       | ElementComponentM<any, any, any>
-      | undefined = undefined
+      | undefined = undefined,
   >(
     as?: E
   ) =>
@@ -250,7 +251,7 @@ export const createContainer =
     } & {defaultConfig?: Record<string, any>},
     TDefaultContext extends Model<any, any>,
     TElemPropsHook,
-    SubComponents = {}
+    SubComponents = {},
   >({
     displayName,
     modelHook,
@@ -383,14 +384,14 @@ export const createSubcomponent =
       | React.ComponentType
       | ElementComponent<any, any>
       | ElementComponentM<any, any, any>
-      | undefined = undefined
+      | undefined = undefined,
   >(
     as?: E
   ) =>
   <
     TElemPropsHook, // normally we'd put a constraint here, but doing so causes the `infer` below to fail to infer the return props
     TModelHook extends ((config: any) => Model<any, any>) & {Context?: React.Context<any>},
-    SubComponents = {}
+    SubComponents = {},
   >({
     displayName,
     modelHook,
@@ -493,7 +494,7 @@ export const createComponent =
       | keyof JSX.IntrinsicElements
       | React.ComponentType
       | ElementComponent<any, any>
-      | undefined = undefined
+      | undefined = undefined,
   >(
     as?: E
   ) =>
@@ -542,7 +543,7 @@ export const createComponent =
       ({as: asOverride, ...props}, ref) => {
         return Component(
           {
-            ...setCanvasKitTags(displayName),
+            ...setCanvasKitTags(displayName, props),
             ...props,
           } as any,
           ref as ExtractRef<E>,
@@ -940,7 +941,7 @@ export function composeHooks<
   H4 extends BaseHook<any, {}>,
   H5 extends BaseHook<any, {}>,
   H6 extends BaseHook<any, {}>,
-  H7 extends BaseHook<any, {}>
+  H7 extends BaseHook<any, {}>,
 >(
   hook1: H1,
   hook2: H2,

package/common/lib/utils/getTranslateFromOrigin.ts

@@ -1,7 +1,7 @@
-import {CanvasSpaceValues} from '@workday/canvas-kit-react/tokens';
-import {TransformOrigin} from '../types';
 import {calc} from '@workday/canvas-kit-styling';
 
+import {TransformOrigin} from '../types';
+
 type translateMapType = {
   x: {[key in TransformOrigin['horizontal']]: number};
   y: {[key in TransformOrigin['vertical']]: number};
@@ -20,6 +20,18 @@ const translateMap: translateMapType = {
   },
 };
 
+type Distance =
+  | '0'
+  | '0.25rem'
+  | '0.5rem'
+  | '0.75rem'
+  | '1rem'
+  | '1.5rem'
+  | '2rem'
+  | '2.5rem'
+  | '4rem'
+  | '5rem';
+
 /**
  * Gets the x and y distance values needed to translate from a given transform origin to 0,0
  * @param {Object} transformOrigin The origin of the transform (i.e. top left)
@@ -27,11 +39,7 @@ const translateMap: translateMapType = {
  * @returns {Object} An object with the x and y distance values needed to translate.
  * @deprecated
  */
-
-export const getTranslateFromOrigin = (
-  transformOrigin: TransformOrigin,
-  distance: CanvasSpaceValues
-) => {
+export const getTranslateFromOrigin = (transformOrigin: TransformOrigin, distance: Distance) => {
   const calculatedDistance = parseFloat(distance) * 16;
   return {
     x: translateMap.x[transformOrigin.horizontal] * calculatedDistance,
@@ -47,7 +55,7 @@ export const getTranslateFromOrigin = (
  */
 export const getTransformOrigin = (
   transformOrigin: TransformOrigin,
-  distance: CanvasSpaceValues | (string & {})
+  distance: Distance | (string & {})
 ) => {
   return {
     x: calc.multiply(distance, translateMap.x[transformOrigin.horizontal]),

package/common/lib/utils/insights.ts

@@ -1,5 +1,4 @@
 /// <reference types="@types/node" />
-
 import {version} from '@workday/canvas-kit-react/version';
 import {slugify} from '@workday/canvas-kit-styling';
 
@@ -10,14 +9,15 @@ const versionTag = process.env.NODE_ENV === 'production' ? version : version.spl
  * This function returns data attributes for tagging
  * We use this to track when and where our components render. It also allows us to see what version is rendering.
  */
-export function setCanvasKitTags(displayName = '') {
+export function setCanvasKitTags(displayName = '', props: any = {}) {
   // Do not add tags for subcomponents. E.g. Card.Text
   const shouldAddTag = displayName.length && !displayName.includes('.');
-
   if (shouldAddTag) {
+    // Append variant name to tag, if available: `primary-button-inverse`
+    const componentTypeTag = props.variant ? `${displayName} ${props.variant}` : displayName;
     return {
       ['data-uxi-canvas-kit-version']: versionTag,
-      ['data-uxi-canvas-kit-component-type']: slugify(displayName),
+      ['data-uxi-canvas-kit-component-type']: slugify(componentTypeTag),
     };
   }
 

package/common/lib/utils/memoize.ts

@@ -8,7 +8,7 @@ export function memoize<T extends (...args: any[]) => any>(
 ): T {
   const cache = new Map<string, ReturnType<T>>();
 
-  return function(...args: Parameters<T>): ReturnType<T> {
+  return function (...args: Parameters<T>): ReturnType<T> {
     const key = resolver(...args);
 
     if (cache.has(key)) {

package/common/lib/utils/mergeProps.ts

@@ -22,8 +22,8 @@ export type MergeProps<T, U> = {
         : U[K] // `K` is in both `T` and `U`, but isn't `null` in `T[K]`, so return `U[K]`
       : T[K] // `K` is only in `T`, so return `T[K]`
     : K extends keyof U // K is not in `T`, so test if it is in `U`. This should always match at this point, but there's no "else" in type ternaries
-    ? U[K] // K is only in `U`, so return `U[K]`
-    : never; // We should never get here, but type ternaries need all paths defined. `never` is usually used in these cases
+      ? U[K] // K is only in `U`, so return `U[K]`
+      : never; // We should never get here, but type ternaries need all paths defined. `never` is usually used in these cases
 };
 
 // This file suppresses TS errors that come from merging interfaces of elements that aren't

package/common/lib/utils/models.ts

@@ -21,7 +21,7 @@ type IEvent = {[key: string]: {bivarianceHack(data?: object): void}['bivarianceH
 type EventMap<
   TEvents extends IEvent,
   TGuardMap extends Record<string, keyof TEvents>,
-  TCallbackMap extends Record<string, keyof TEvents>
+  TCallbackMap extends Record<string, keyof TEvents>,
 > = {
   guards: TGuardMap;
   callbacks: TCallbackMap;
@@ -30,7 +30,7 @@ type EventMap<
 type ToGuardConfig<
   TState extends Record<string, any>,
   TEvents extends IEvent,
-  TGuardMap extends Record<string, keyof TEvents>
+  TGuardMap extends Record<string, keyof TEvents>,
 > = {
   [K in keyof TGuardMap]: (event: {
     data: Parameters<TEvents[TGuardMap[K]]>[0];
@@ -41,7 +41,7 @@ type ToGuardConfig<
 type ToCallbackConfig<
   TState extends Record<string, any>,
   TEvents extends IEvent,
-  TCallbackMap extends Record<string, keyof TEvents>
+  TCallbackMap extends Record<string, keyof TEvents>,
 > = {
   [K in keyof TCallbackMap]: (event: {
     data: Parameters<TEvents[TCallbackMap[K]]>[0];
@@ -69,7 +69,7 @@ type ToCallbackConfig<
 export type ToModelConfig<
   TState extends Record<string, any>,
   TEvents extends IEvent,
-  TEventMap extends EventMap<TEvents, any, any>
+  TEventMap extends EventMap<TEvents, any, any>,
 > = ToGuardConfig<TState, TEvents, TEventMap['guards']> &
   ToCallbackConfig<TState, TEvents, TEventMap['callbacks']>;
 
@@ -103,7 +103,7 @@ export const createEventMap =
   <TEvents extends IEvent>() =>
   <
     TGuardMap extends Record<string, keyof TEvents>,
-    TCallbackMap extends Record<string, keyof TEvents>
+    TCallbackMap extends Record<string, keyof TEvents>,
   >(
     config: Partial<EventMap<TEvents, TGuardMap, TCallbackMap>>
   ): EventMap<TEvents, TGuardMap, TCallbackMap> => {
@@ -142,7 +142,7 @@ export const useEventMap = <
   TCallbackMap extends Record<string, keyof TEvents>,
   TConfig extends Partial<
     ToModelConfig<TState, TEvents, EventMap<TEvents, TGuardMap, TCallbackMap>>
-  >
+  >,
 >(
   eventMap: EventMap<TEvents, TGuardMap, TCallbackMap>,
   state: TState,
@@ -213,7 +213,7 @@ export const createEvents =
   <TEvents extends EventCreator>(events: TEvents) =>
   <
     TGuardMap extends Record<string, keyof TEvents>,
-    TCallbackMap extends Record<string, keyof TEvents>
+    TCallbackMap extends Record<string, keyof TEvents>,
   >(
     config?: Partial<EventMap<ToEvent<TEvents>, TGuardMap, TCallbackMap>>
   ) => {
@@ -233,7 +233,7 @@ export type ModelExtras<
   TRequiredConfig,
   TState,
   TEvents extends Record<string, any>,
-  TModel
+  TModel,
 > = {
   /** Default config of the model. Useful when composing models to reused config */
   defaultConfig: TDefaultConfig;
@@ -559,35 +559,38 @@ export const createModelHook = <TDefaultConfig extends {}, TRequiredConfig exten
     }
 
     const wrappedEvents = React.useMemo(() => {
-      return keys(eventsRef.current).reduce((result, key) => {
-        result[key] = (data?: any) => {
-          // Invoke the configured guard if there is one
-          if (!(eventsRef.current[key] as any)._wrapped) {
-            const guardFnName = getGuardName(key);
-
-            if (
-              configRef.current[guardFnName] &&
-              !configRef.current[guardFnName](data, stateRef.current)
-            ) {
-              return;
+      return keys(eventsRef.current).reduce(
+        (result, key) => {
+          result[key] = (data?: any) => {
+            // Invoke the configured guard if there is one
+            if (!(eventsRef.current[key] as any)._wrapped) {
+              const guardFnName = getGuardName(key);
+
+              if (
+                configRef.current[guardFnName] &&
+                !configRef.current[guardFnName](data, stateRef.current)
+              ) {
+                return;
+              }
             }
-          }
 
-          // call the event (setter)
-          eventsRef.current[key](data);
+            // call the event (setter)
+            eventsRef.current[key](data);
 
-          const callbackFnName = getCallbackName(key);
-          if (!(eventsRef.current[key] as any)._wrapped) {
-            if (configRef.current[callbackFnName]) {
-              configRef.current[callbackFnName](data, stateRef.current);
+            const callbackFnName = getCallbackName(key);
+            if (!(eventsRef.current[key] as any)._wrapped) {
+              if (configRef.current[callbackFnName]) {
+                configRef.current[callbackFnName](data, stateRef.current);
+              }
             }
-          }
-        };
-
-        // Mark this function has been wrapped so we can detect wrapped events and not call guards and callbacks multiple times
-        (result[key] as any)._wrapped = true;
-        return result;
-      }, {} as Record<string, any>);
+          };
+
+          // Mark this function has been wrapped so we can detect wrapped events and not call guards and callbacks multiple times
+          (result[key] as any)._wrapped = true;
+          return result;
+        },
+        {} as Record<string, any>
+      );
     }, []);
 
     // The model context is private and should never be used
@@ -604,7 +607,7 @@ export const createModelHook = <TDefaultConfig extends {}, TRequiredConfig exten
     TModelFn extends (config: TDefaultConfig & TRequiredConfig) => {
       state: {};
       events: Record<string, (...args: any) => void>;
-    }
+    },
   >(
     fn: TModelFn
   ): ModelFn<TDefaultConfig, TRequiredConfig, ReturnType<TModelFn>> => {