@workday/canvas-kit-react 6.0.0-beta.0-next.13 → 6.0.0

package/tokens/index.ts

@@ -13,7 +13,7 @@ import {
 
 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,
@@ -64,7 +64,7 @@ export {
   monoFontFamily,
   BrandingColor,
   CanvasDepth,
-  CanvasDepthValue,
+  CanvasDepthValues,
   CSSProperties,
 };
 export default canvas;

package/tokens/lib/depth.ts

@@ -1,5 +1,127 @@
-import depth, {CanvasDepth, CanvasDepthValue} from '@workday/canvas-depth-web';
+export 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)';
+  };
+};
 
-export {CanvasDepth, CanvasDepthValue};
+type ValueOf<T> = T[keyof T];
+export type CanvasDepthValues = ValueOf<CanvasDepth>;
 
-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 const depth: CanvasDepth = {
+  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/tooltip/lib/OverflowTooltip.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import innerText from 'react-innertext';
 
 import {getTransformFromPlacement, Placement, Popper} from '@workday/canvas-kit-react/popup';
 import {mergeCallback} from '@workday/canvas-kit-react/common';
@@ -11,7 +10,7 @@ import {useTooltip} from './useTooltip';
  * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
  */
-const findOverflowElement = (element: HTMLElement): HTMLElement | null => {
+export const findOverflowElement = (element: Element): Element | null => {
   const style = getComputedStyle(element);
   if (
     style.overflow === 'auto' ||
@@ -20,37 +19,41 @@ const findOverflowElement = (element: HTMLElement): HTMLElement | null => {
     style.overflow === 'hidden'
   ) {
     return element;
-  } else {
+  } else if (element.children) {
+    // `children` is not defined for SVGElement in IE11
     for (let i = 0; i < element.children.length; i++) {
-      const overflowElement = findOverflowElement(element.children[i] as HTMLElement);
+      const overflowElement = findOverflowElement(element.children[i]);
       if (overflowElement) {
         return overflowElement;
       }
     }
     return null;
   }
+  return null;
 };
 
 /**
  * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
  */
-const findEllipsisElement = (element: HTMLElement): HTMLElement | null => {
+export const findEllipsisElement = (element: Element): Element | null => {
   const style = getComputedStyle(element);
   if (style.textOverflow === 'ellipsis' || Number(style.webkitLineClamp) > 0) {
     return element;
-  } else {
+  } else if (element.children) {
+    // `children` is not defined for SVGElement in IE11
     for (let i = 0; i < element.children.length; i++) {
-      const overflowElement = findEllipsisElement(element.children[i] as HTMLElement);
+      const overflowElement = findEllipsisElement(element.children[i]);
       if (overflowElement) {
         return overflowElement;
       }
     }
     return null;
   }
+  return null;
 };
 
-const isOverflowed = (element: HTMLElement) => {
+const isOverflowed = (element: Element) => {
   const overflowElement = findEllipsisElement(element) || findOverflowElement(element);
 
   if (overflowElement) {
@@ -99,17 +102,21 @@ export const OverflowTooltip = ({
   children,
   ...elemProps
 }: OverflowTooltipProps) => {
-  const titleText = innerText(children);
-  const {targetProps, popperProps, tooltipProps} = useTooltip({type: 'label', titleText});
+  const [titleText, setTitleText] = React.useState('');
+  const {targetProps, popperProps, tooltipProps} = useTooltip({type: 'muted'});
 
-  const onMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
-    if (isOverflowed(event.currentTarget)) {
-      targetProps.onMouseEnter(event);
+  const onMouseEnter = (event: React.MouseEvent) => {
+    const target = event.currentTarget;
+    setTitleText(target instanceof HTMLElement ? target.innerText : '');
+    if (isOverflowed(target)) {
+      targetProps.onMouseEnter(event as React.MouseEvent);
     }
   };
-  const onFocus = (event: React.FocusEvent<HTMLElement>) => {
-    if (isOverflowed(event.currentTarget)) {
-      targetProps.onFocus(event);
+  const onFocus = (event: React.FocusEvent) => {
+    const target = event.currentTarget;
+    setTitleText(target instanceof HTMLElement ? target.innerText : '');
+    if (isOverflowed(target)) {
+      targetProps.onFocus(event as React.FocusEvent);
     }
   };
 

package/tooltip/lib/useTooltip.tsx

@@ -31,7 +31,7 @@ const useIntentTimer = (fn: Function, waitMs: number = 0): {start(): void; clear
   };
 };
 
-const isInteractiveElement = (element: HTMLElement) => {
+const isInteractiveElement = (element: Element) => {
   const tagName = element.tagName.toLowerCase();
   const tabIndex = element.getAttribute('tabindex');
 
@@ -51,7 +51,7 @@ const isInteractiveElement = (element: HTMLElement) => {
  * Convenience hook for creating components with tooltips. It will return an object of properties to mix
  * into a target, popper and tooltip
  */
-export function useTooltip<T extends HTMLElement = HTMLElement>({
+export function useTooltip<T extends Element = Element>({
   type = 'label',
   titleText = '',
 }: {
@@ -89,12 +89,12 @@ export function useTooltip<T extends HTMLElement = HTMLElement>({
     intentTimer.clear();
   };
 
-  const onOpenFromTarget = (event: React.SyntheticEvent<HTMLElement>) => {
+  const onOpenFromTarget = (event: React.SyntheticEvent) => {
     setAnchorElement(event.currentTarget as T);
     onOpen();
   };
 
-  const onFocus = (event: React.FocusEvent<HTMLElement>) => {
+  const onFocus = (event: React.FocusEvent) => {
     if (!mouseDownRef.current) {
       onOpenFromTarget(event);
     }
@@ -102,7 +102,7 @@ export function useTooltip<T extends HTMLElement = HTMLElement>({
     mouseDownRef.current = false;
   };
 
-  const onMouseDown = (event: React.MouseEvent<HTMLElement>) => {
+  const onMouseDown = (event: React.MouseEvent) => {
     mouseDownRef.current = true;
     if (isInteractiveElement(event.currentTarget)) {
       popupModel.events.hide();

package/ts3.5/dist/commonjs/button/lib/PrimaryButton.d.ts

@@ -1,13 +1,20 @@
 import * as React from 'react';
 import { GrowthBehavior, Themeable, EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-import { ButtonColors } from './types';
+import { ButtonSizes, IconPositions } from './types';
 export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
     /**
-     * The size of the Button.
+     * The variant of the PrimaryButton.
+     * @default undefined
+     */
+    variant?: 'inverse';
+    /**
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+     * If no size is provided, it will default to `medium`.
+     *
      * @default 'medium'
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: ButtonSizes;
     /**
      * The data label of the Button.
      * Note: not displayed at `small` size
@@ -19,10 +26,11 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
      */
     icon?: CanvasSystemIcon;
     /**
-     * The position of the TertiaryButton icon.
+     * Button icon positions can either be `left` or `right`.
+     * If no value is provided, it defaults to `left`.
      * @default 'left'
      */
-    iconPosition?: 'left' | 'right';
+    iconPosition?: IconPositions;
     /**
      * If set to `true`, transform the icon's x-axis to mirror the graphic
      * @default false
@@ -31,5 +39,71 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
     children?: React.ReactNode;
 }
 export declare const PrimaryButton: import("../../common").ElementComponent<"button", PrimaryButtonProps>;
-export declare const getPrimaryButtonColors: ({ canvas: { palette: { primary: themePrimary }, }, }: EmotionCanvasTheme) => ButtonColors;
+export declare const getPrimaryButtonColors: (variant: "inverse" | undefined, theme: EmotionCanvasTheme) => {
+    default: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData?: undefined;
+    };
+    hover: {
+        background: string;
+        icon?: undefined;
+        label?: undefined;
+        labelData?: undefined;
+    };
+    active: {
+        background: string;
+        icon?: undefined;
+        label?: undefined;
+        labelData?: undefined;
+    };
+    focus: {
+        background: string;
+        border?: undefined;
+        icon?: undefined;
+        label?: undefined;
+        labelData?: undefined;
+        focusRing?: undefined;
+    };
+    disabled: {
+        background: string;
+        icon?: undefined;
+        label?: undefined;
+        labelData?: undefined;
+    };
+} | {
+    default: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData: string;
+    };
+    hover: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData: string;
+    };
+    active: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData: string;
+    };
+    focus: {
+        background: string;
+        border: string;
+        icon: string;
+        label: string;
+        labelData: string;
+        focusRing: import("@emotion/serialize").CSSObject;
+    };
+    disabled: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData: string;
+    };
+};
 //# sourceMappingURL=PrimaryButton.d.ts.map

package/ts3.5/dist/commonjs/button/lib/SecondaryButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GrowthBehavior, Themeable, EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-import { ButtonColors } from './types';
+import { ButtonColors, ButtonSizes, IconPositions } from './types';
 export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
     /**
      * The variant of the SecondaryButton.
@@ -9,10 +9,12 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
      */
     variant?: 'inverse' | undefined;
     /**
-     * The size of the Button.
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+     * If no size is provided, it will default to `medium`.
+     *
      * @default 'medium'
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: ButtonSizes;
     /**
      * The data label of the Button.
      * Note: not displayed at `small` size
@@ -24,10 +26,11 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
      */
     icon?: CanvasSystemIcon;
     /**
-     * The position of the TertiaryButton icon.
+     * Button icon positions can either be `left` or `right`.
+     * If no value is provided, it defaults to `left`.
      * @default 'left'
      */
-    iconPosition?: 'left' | 'right';
+    iconPosition?: IconPositions;
     /**
      * If set to `true`, transform the icon's x-axis to mirror the graphic
      * @default false

package/ts3.5/dist/commonjs/button/lib/TertiaryButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Themeable } from '@workday/canvas-kit-react/common';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
+import { TertiaryButtonSizes, IconPositions } from './types';
 export interface TertiaryButtonProps extends Themeable {
     /**
      * The variant of the TertiaryButton.
@@ -8,15 +9,18 @@ export interface TertiaryButtonProps extends Themeable {
      */
     variant?: 'inverse' | undefined;
     /**
-     * The size of the TertiaryButton.
+     * There are three button sizes: `extraSmall`, `small`, and `medium`.
+     * If no size is provided, it will default to `medium`.
+     *
      * @default 'medium'
      */
-    size?: 'small' | 'medium';
+    size?: TertiaryButtonSizes;
     /**
-     * The position of the TertiaryButton icon.
+     * Button icon positions can either be `left` or `right`.
+     * If no value is provided, it defaults to `left`.
      * @default 'left'
      */
-    iconPosition?: 'left' | 'right';
+    iconPosition?: IconPositions;
     /**
      * The icon of the TertiaryButton.
      */

package/ts3.5/dist/commonjs/button/lib/parts/ButtonContainer.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { CSSObject } from '@emotion/core';
 import { GrowthBehavior, EmotionCanvasTheme, StyledType } from '@workday/canvas-kit-react/common';
-import { ButtonColors } from '../types';
+import { ButtonColors, ButtonSizes } from '../types';
 export interface ButtonContainerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, GrowthBehavior {
     colors?: ButtonColors;
     /**
-     * The size of the Button.
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+     * If no size is provided, it will default to `medium`.
+     *
      * @default 'medium'
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: ButtonSizes;
     /**
      * The ref to the button that the styled component renders.
      */

package/ts3.5/dist/commonjs/button/lib/parts/ButtonLabel.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="@emotion/core" />
-export declare const ButtonLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, import("../../../common").EmotionCanvasTheme>;
+export declare const ButtonLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "css" | "style" | "slot" | "title" | "dir" | "children" | "hidden" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, import("../../../common").EmotionCanvasTheme>;
 //# sourceMappingURL=ButtonLabel.d.ts.map

package/ts3.5/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts

@@ -1,20 +1,23 @@
 import { CanvasSystemIcon } from '@workday/design-assets-types';
+import { ButtonSizes, IconPositions } from '../types';
 export interface ButtonLabelIconProps {
     /**
-     * The size of the Button.
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+     *
      * @default 'medium'
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: ButtonSizes;
     /**
      * The icon of the Button.
      * Note: not displayed at `small` size
      */
     icon?: CanvasSystemIcon;
     /**
-     * The position of the TertiaryButton icon.
+     * Button icon positions can either be `left` or `right`.
+     * If no value is provided, it defaults to `left`.
      * @default 'left'
      */
-    iconPosition?: 'left' | 'right';
+    iconPosition?: IconPositions;
     /**
      * If set to `true`, transform the icon's x-axis to mirror the graphic
      * @default false

package/ts3.5/dist/commonjs/button/lib/types.d.ts

@@ -19,4 +19,13 @@ export interface ButtonColors {
     };
     disabled: ButtonStateColors;
 }
+/**
+ * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+ * If no size is provided, it will default to `medium`.
+ *
+ * @default 'medium'
+ */
+export declare type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
+export declare type TertiaryButtonSizes = 'extraSmall' | 'small' | 'medium';
+export declare type IconPositions = 'left' | 'right';
 //# sourceMappingURL=types.d.ts.map

package/ts3.5/dist/commonjs/common/index.d.ts

@@ -6,4 +6,5 @@ export * from './lib/styles';
 export * from './lib/utils';
 export * from './lib/CanvasProvider';
 export * from './lib/InputProvider';
+export * from './lib/EllipsisText';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/common/lib/EllipsisText.d.ts

@@ -0,0 +1,5 @@
+import { CSSObject } from '@emotion/styled';
+import { ElementComponent } from '..';
+export declare const ellipsisStyles: CSSObject;
+export declare const EllipsisText: ElementComponent<"span", {}>;
+//# sourceMappingURL=EllipsisText.d.ts.map

package/ts3.5/dist/commonjs/common/lib/styles/accessibleHide.d.ts

@@ -1,7 +1,7 @@
-import { CSSObject } from '@emotion/core';
+import { CSSProperties } from '@workday/canvas-kit-react/tokens';
 /**
  * A utility to hide content normal users while still making accessible to screenreaders
  * See https://a11y-101.com/development/skip-link
  */
-export declare const accessibleHide: CSSObject;
+export declare const accessibleHide: CSSProperties;
 //# sourceMappingURL=accessibleHide.d.ts.map