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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "5.3.17",
+  "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.17",
-    "@workday/canvas-kit-popup-stack": "^5.3.17",
-    "@workday/canvas-kit-preview-react": "^5.3.17",
+    "@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": "0e5c733deb9079d061b788c205e73c54c55e7c58"
+  "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;

package/tabs/index.ts

@@ -1,2 +1,8 @@
 export * from './lib/Tabs';
 export * from './lib/useTabsModel';
+
+export {StyledTabItem, useTabsItem} from './lib/TabsItem';
+export {useTabsList} from './lib/TabsList';
+export {useTabsMenuPopper} from './lib/TabsMenuPopper';
+export {useTabsOverflowButton} from './lib/TabsOverflowButton';
+export {useTabsPanel} from './lib/TabsPanel';

package/tabs/lib/Tabs.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 
 import {createComponent, useDefaultModel} from '@workday/canvas-kit-react/common';
+import {Menu} from './menu';
 
-import {Tab} from './Tab';
-import {TabList} from './TabList';
-import {TabPanel} from './TabPanel';
+import {TabsItem} from './TabsItem';
+import {TabsList} from './TabsList';
+import {TabsPanel} from './TabsPanel';
 import {useTabsModel, TabsModel, TabsModelConfig} from './useTabsModel';
+import {TabsOverflowButton} from './TabsOverflowButton';
+import {TabsMenuPopper} from './TabsMenuPopper';
+import {TabsPanels} from './TabsPanels';
 
 export const TabsModelContext = React.createContext<TabsModel>({} as any);
 
-export interface TabsProps extends TabsModelConfig {
+// use `T = any` here because there's no way to pass generics to a compound component...
+export interface TabsProps<T = any> extends TabsModelConfig<T> {
   /**
    * The contents of the Tabs. Can be `Tabs` children or any valid elements.
    */
@@ -19,7 +24,7 @@ export interface TabsProps extends TabsModelConfig {
    * config passed to this component.
    * @default useTabsModel(config)
    */
-  model?: TabsModel;
+  model?: TabsModel<T>;
 }
 
 export const Tabs = createComponent()({
@@ -27,11 +32,31 @@ export const Tabs = createComponent()({
   Component: ({children, model, ...config}: TabsProps) => {
     const value = useDefaultModel(model, config, useTabsModel);
 
-    return <TabsModelContext.Provider value={value}>{children}</TabsModelContext.Provider>;
+    return (
+      <TabsModelContext.Provider value={value}>
+        <Menu model={value.menu}>{children}</Menu>
+      </TabsModelContext.Provider>
+    );
   },
   subComponents: {
-    List: TabList,
-    Item: Tab,
-    Panel: TabPanel,
+    List: TabsList,
+    Item: TabsItem,
+    Panel: TabsPanel,
+    Panels: TabsPanels,
+    OverflowButton: TabsOverflowButton,
+    MenuPopper: TabsMenuPopper,
+    /**
+     * The overflow menu of the Tabs component. If there isn't enough room to render all the tab
+     * items, the extra tabs that don't fit will be overflowed into this menu.
+     * @example
+     * <Tabs.Menu.Popper>
+     *   <Tabs.Menu.Card>
+     *     <Tabs.Menu.List>
+     *       {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
+     *     </Tabs.Menu.List>
+     *   </Tabs.Menu.Card>
+     * </Tabs.Menu.Popper>
+     */
+    Menu,
   },
 });