@workday/canvas-kit-react 6.8.9 → 6.9.0-next.2

package/page-header/README.md

@@ -1,72 +0,0 @@
-# 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
-(`@workday/canvas-kit-labs-react/header`).
-
-[> Workday Design Reference](https://design.workday.com/components/navigation/headers)
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-react
-```
-
-## Usage
-
-```tsx
-import * as React from 'react';
-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';
-
-<DeprecatedPageHeader title="Product">
-  <IconButton icon={exportIcon} />
-  <IconButton icon={fullscreenIcon} />
-</DeprecatedPageHeader>
-
-<DeprecatedPageHeader title="With Cap Width" capWidth={true}>
-  <IconButton icon={exportIcon} />
-  <IconButton icon={fullscreenIcon} />
-</DeprecatedPageHeader>
-```
-
-## Static Properties
-
-> None
-
-## Component Props
-
-### Required
-
-> None
-
-### Optional
-
-#### `title: string`
-
-> The title of the page header.
-
-Default: `''`
-
----
-
-#### `capWidth: boolean`
-
-> Use the page header in the non-product page. In this context, content is centered and the page
-> header is responsive in all three breakpoints.
-
-Defalut: `false`
-
----
-
-#### `breakpoint: number`
-
-> The breakpoint at which the header's container spacing increases from 's' size to 'xl' size.
-
-Default: `768`

package/page-header/index.ts

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

package/page-header/lib/PageHeader.tsx

@@ -1,126 +0,0 @@
-import * as React from 'react';
-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';
-
-/**
- * ### 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.
-   */
-  title: string;
-  /**
-   * If true, center the PageHeader content and make the PageHeader responsive in all three breakpoints. Enable this for PageHeaders in non-product pages.
-   * @default false
-   */
-  capWidth?: boolean;
-  /**
-   * The breakpoint (in `px`) at which the PageHeader's container spacing increases from size `s` to size `xl`.
-   * @default 768
-   */
-  breakpoint?: number;
-}
-
-const Header = styled('header')({
-  height: 84,
-  backgroundImage: gradients.blueberry,
-  color: colors.frenchVanilla100,
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-});
-
-const Container = styled('div')<Pick<DeprecatedPageHeaderProps, 'breakpoint' | 'capWidth'>>(
-  {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    height: '100%',
-    overflow: 'hidden',
-    padding: `0 ${space.s}`,
-  },
-  ({breakpoint}) => ({
-    [`@media (min-width: ${breakpoint}px)`]: {
-      padding: `0 ${space.xl}`,
-    },
-  }),
-  ({capWidth}) =>
-    capWidth && {
-      boxSizing: 'border-box',
-      margin: '0 auto',
-      width: '100%',
-      maxWidth: 1440,
-    }
-);
-
-const Title = styled('h2')({
-  ...type.levels.heading.medium,
-  color: colors.frenchVanilla100,
-  padding: `${space.xs} 0`,
-  margin: 0,
-  whiteSpace: 'nowrap',
-});
-
-const IconList = styled('div')({
-  display: 'flex',
-  marginLeft: space.l,
-
-  '> *:not(:last-child)': {
-    marginRight: space.xxs,
-  },
-});
-
-/**
- * ### 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)) {
-        return child;
-      }
-
-      if (child.type === IconButton) {
-        return React.cloneElement(child as React.ReactElement<IconButtonProps>, {
-          variant: 'inverse',
-        });
-      }
-
-      return child;
-    });
-  }
-
-  public render() {
-    // TODO: Standardize on prop spread location (see #150)
-    const {title = '', breakpoint = 768, capWidth = false, children, ...elemProps} = this.props;
-
-    return (
-      <Header>
-        <Container breakpoint={breakpoint} capWidth={capWidth} {...elemProps}>
-          <Title>{title}</Title>
-          <IconList>{this.renderChildren(children)}</IconList>
-        </Container>
-      </Header>
-    );
-  }
-}

package/page-header/package.json

@@ -1,5 +0,0 @@
-{
-  "main": "../dist/commonjs/page-header",
-  "module": "../dist/es6/page-header",
-  "sideEffects": false
-}

package/pagination/lib/Pagination/common/Box.tsx

@@ -1,44 +0,0 @@
-/** @jsx jsx */
-import * as React from 'react';
-import {jsx, css} from '@emotion/core';
-import styled from '@emotion/styled';
-
-import {space, SpaceProps} from './utils/space';
-import {layout, LayoutProps} from './utils/layout';
-import {safelySpreadProps} from './utils/safelySpreadProps';
-
-const getBoxStyles = (props: BoxProps) => {
-  let styleProps = {};
-  for (const key in props) {
-    if (key in props) {
-      if (key in space) {
-        const value = props[key as keyof BoxProps];
-        const styleFn = space[key as keyof SpaceProps];
-        const styles = styleFn(value);
-        styleProps = {...styleProps, ...styles};
-      }
-      if (key in layout) {
-        const attr = layout[key as keyof LayoutProps];
-        styleProps = {...styleProps, [attr]: props[key as keyof BoxProps]};
-      }
-    }
-  }
-  return styleProps;
-};
-
-type As = keyof JSX.IntrinsicElements;
-
-export interface BoxProps extends SpaceProps, LayoutProps, React.HTMLAttributes<HTMLElement> {
-  as?: As;
-}
-
-export const StyledBox = styled('div')<BoxProps>({
-  boxSizing: 'border-box',
-});
-
-export const Box = React.forwardRef<any, BoxProps>(({as = 'div', ...props}, ref) => {
-  // TODO: Memoize style props with React.useMemo
-  const boxStyles = getBoxStyles(props);
-  const safeProps = safelySpreadProps(props);
-  return <StyledBox ref={ref} as={as} css={css(boxStyles)} {...safeProps} />;
-});

package/pagination/lib/Pagination/common/Flex.tsx

@@ -1,23 +0,0 @@
-import styled from '@emotion/styled';
-
-import {flex, FlexProps as BaseFlexProps} from './utils/flex';
-
-import {Box, BoxProps} from './Box';
-
-export type FlexProps = BaseFlexProps & BoxProps;
-
-const getFlexStyles = (props: FlexProps) => {
-  let flexProps = {};
-
-  for (const key in props) {
-    if (key in flex) {
-      const attr = flex[key as keyof BaseFlexProps];
-      flexProps = {...flexProps, [attr]: props[key as keyof FlexProps]};
-    }
-  }
-  return flexProps;
-};
-
-export const Flex = styled(Box)({display: 'flex'}, getFlexStyles);
-
-Flex.displayName = 'Flex';

package/pagination/lib/Pagination/common/Stack.tsx

@@ -1,98 +0,0 @@
-/** @jsx jsx */
-import * as React from 'react';
-import {jsx, css} from '@emotion/core';
-import {space as sp} from '@workday/canvas-kit-react/tokens';
-
-import {Flex, FlexProps} from './Flex';
-import {Spacing} from './utils/space';
-import {getValidChildren} from './utils/getValidChildren';
-import {useRTL} from './utils/useRTL';
-
-type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-
-export interface StackProps extends FlexProps {
-  children?: React.ReactNode;
-  direction: StackDirection;
-  flexDirection?: StackDirection;
-  spacing: Spacing;
-}
-
-const selector = '& > *:not(style) ~ *:not(style)';
-
-type Options = {
-  spacing: Spacing;
-  direction: StackDirection;
-  shouldUseRTL: boolean;
-};
-
-function getDirectionStyles(options: Options) {
-  const directionStyles = {
-    column: {marginTop: sp[options.spacing]},
-    'column-reverse': {marginBottom: sp[options.spacing]},
-    'row-reverse': options.shouldUseRTL
-      ? {marginLeft: sp[options.spacing]}
-      : {marginRight: sp[options.spacing]},
-    row: options.shouldUseRTL
-      ? {marginRight: sp[options.spacing]}
-      : {marginLeft: sp[options.spacing]},
-  };
-
-  return directionStyles[options.direction];
-}
-
-function getStackStyles(options: Options) {
-  const {direction} = options;
-
-  return {
-    flexDirection: direction,
-    [selector]: getDirectionStyles(options),
-  };
-}
-
-export const useStack = ({direction, shouldUseRTL, spacing}: Options) => {
-  return React.useMemo(() => getStackStyles({direction, shouldUseRTL, spacing}), [
-    direction,
-    spacing,
-    shouldUseRTL,
-  ]);
-};
-
-export const Stack = React.forwardRef(
-  ({children, direction, spacing, ...elemProps}: StackProps, ref) => {
-    const validChildren = getValidChildren(children);
-    const {shouldUseRTL} = useRTL();
-    const stackStyles = useStack({direction, spacing, shouldUseRTL});
-
-    return (
-      <Flex css={css(stackStyles)} ref={ref} {...elemProps}>
-        {validChildren}
-      </Flex>
-    );
-  }
-);
-
-Stack.displayName = 'Stack';
-
-export interface HStackProps extends Omit<StackProps, 'direction'> {
-  direction?: 'row' | 'row-reverse';
-}
-
-export const HStack = React.forwardRef(
-  ({direction = 'row', spacing, ...elemProps}: HStackProps, ref) => {
-    return <Stack ref={ref} direction={direction} spacing={spacing} {...elemProps} />;
-  }
-);
-
-HStack.displayName = 'HStack';
-
-export interface VStackProps extends Omit<StackProps, 'direction'> {
-  direction?: 'column' | 'column-reverse';
-}
-
-export const VStack = React.forwardRef(
-  ({direction = 'column', spacing, ...elemProps}: VStackProps, ref) => {
-    return <Stack ref={ref} direction={direction} spacing={spacing} {...elemProps} />;
-  }
-);
-
-VStack.displayName = 'VStack';

package/pagination/lib/Pagination/common/utils/flex.ts

@@ -1,110 +0,0 @@
-// TODO: Consider using CSSType instead
-type Globals = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset';
-type GlobalsNumber = number | '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset';
-type SelfPosition =
-  | 'center'
-  | 'end'
-  | 'flex-end'
-  | 'flex-start'
-  | 'self-end'
-  | 'self-start'
-  | 'start';
-type ContentDistribution = 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
-type ContentPosition = 'center' | 'end' | 'flex-end' | 'flex-start' | 'start';
-type AlignItemsProperty = Globals | SelfPosition | 'baseline' | 'normal' | 'stretch';
-type AlignContentProperty = Globals | ContentDistribution | ContentPosition | 'baseline' | 'normal';
-type JustifyItemsProperty =
-  | Globals
-  | SelfPosition
-  | 'baseline'
-  | 'left'
-  | 'legacy'
-  | 'normal'
-  | 'right'
-  | 'stretch';
-type JustifyContentProperty =
-  | Globals
-  | ContentDistribution
-  | ContentPosition
-  | 'left'
-  | 'normal'
-  | 'right';
-type FlexWrapProperty =
-  | '-moz-initial'
-  | 'inherit'
-  | 'initial'
-  | 'revert'
-  | 'unset'
-  | 'nowrap'
-  | 'wrap'
-  | 'wrap-reverse';
-
-type FlexDirectionProperty =
-  | '-moz-initial'
-  | 'inherit'
-  | 'initial'
-  | 'revert'
-  | 'unset'
-  | 'column'
-  | 'column-reverse'
-  | 'row'
-  | 'row-reverse';
-type JustifySelfProperty =
-  | Globals
-  | SelfPosition
-  | 'auto'
-  | 'baseline'
-  | 'left'
-  | 'normal'
-  | 'right'
-  | 'stretch'
-  | 'auto'
-  | 'baseline'
-  | 'left'
-  | 'normal'
-  | 'right'
-  | 'stretch';
-type AlignSelfProperty = Globals | SelfPosition | 'auto' | 'baseline' | 'normal' | 'stretch';
-export interface FlexProps {
-  alignItems?: AlignItemsProperty;
-  alignContent?: AlignContentProperty;
-  display?: 'flex' | 'inline-flex';
-  justifyItems?: JustifyItemsProperty;
-  justifyContent?: JustifyContentProperty;
-  flexWrap?: FlexWrapProperty;
-  wrap?: FlexWrapProperty; // a helpful alias for flexWrap
-  flexDirection?: FlexDirectionProperty;
-  direction?: FlexDirectionProperty; // a helpful alias for flexDirection
-  flex?: number | string;
-  flexGrow?: number | string;
-  grow?: number | string; // a helpful alias for flexGrow
-  flexShrink?: number | string;
-  shrink?: number | string; // a helpful alias for flexShrink
-  flexBasis?: number | string;
-  basis?: number | string; // a helpful alias for flexBasis
-  justifySelf?: JustifySelfProperty;
-  alignSelf?: AlignSelfProperty;
-  order?: GlobalsNumber;
-}
-
-export const flex = {
-  alignItems: 'alignItems',
-  alignContent: 'alignContent',
-  display: 'display',
-  justifyItems: 'justifyItems',
-  justifyContent: 'justifyContent',
-  flexWrap: 'flexWrap',
-  wrap: 'flexWrap',
-  flexDirection: 'flexDirection',
-  direction: 'flexDirection',
-  flex: 'flex',
-  flexGrow: 'flexGrow',
-  grow: 'flexGrow',
-  flexShrink: 'flexShrink',
-  shrink: 'flexShrink',
-  flexBasis: 'flexBasis',
-  basis: 'basis',
-  justifySelf: 'justifySelf',
-  alignSelf: 'alignSelf',
-  order: 'order',
-};

package/pagination/lib/Pagination/common/utils/layout.ts

@@ -1,40 +0,0 @@
-type Globals = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset';
-type OverflowProperty = Globals | 'auto' | 'hidden' | 'scroll' | 'visible' | string;
-type OverflowXProperty =
-  | '-moz-initial'
-  | 'inherit'
-  | 'initial'
-  | 'revert'
-  | 'unset'
-  | 'auto'
-  | 'hidden'
-  | 'scroll'
-  | 'visible';
-type OverflowYProperty = OverflowXProperty;
-export interface LayoutProps {
-  display?: string;
-  height?: number | string;
-  maxHeight?: number | string;
-  maxWidth?: number | string;
-  minHeight?: number | string;
-  minWidth?: number | string;
-  overflow?: OverflowProperty;
-  overflowX?: OverflowXProperty;
-  overflowY?: OverflowYProperty;
-  verticalAlign?: string;
-  width?: number | string;
-}
-
-export const layout = {
-  display: 'display',
-  height: 'height',
-  maxHeight: 'maxHeight',
-  maxWidth: 'maxWidth',
-  minHeight: 'minHeight',
-  minWidth: 'minWidth',
-  overflow: 'overflow',
-  overflowX: 'overflowX',
-  overflowY: 'overflowY',
-  verticalAlign: 'verticalAlign',
-  width: 'width',
-};

package/pagination/lib/Pagination/common/utils/safelySpreadProps.ts

@@ -1,29 +0,0 @@
-import {flex} from './flex';
-import {layout} from './layout';
-import {space} from './space';
-
-const styleProps = {
-  ...flex,
-  ...layout,
-  ...space,
-};
-
-/**
- * Removes style props from props to prevent them from being applied to the HTML element.
- * Returns an object of props that is stripped of all style props.
- * @example
- * const Box = (props) => {
- *   const safeProps = safelySpreadProps(props);
- *   return <div {...safeProps} />
- * }
- *
- */
-export function safelySpreadProps<T extends object>(props: T) {
-  const safeProps = {} as T;
-  for (const key in props) {
-    if (!(key in styleProps)) {
-      safeProps[key as keyof T] = props[key as keyof T];
-    }
-  }
-  return safeProps;
-}

package/pagination/lib/Pagination/common/utils/space.ts

@@ -1,109 +0,0 @@
-import {space as canvasSpace} from '@workday/canvas-kit-react/tokens';
-
-export type Spacing = keyof typeof canvasSpace;
-
-export interface SpaceProps {
-  margin?: Spacing;
-  m?: Spacing;
-  marginX?: Spacing;
-  mx?: Spacing;
-  marginY?: Spacing;
-  my?: Spacing;
-  marginT?: Spacing;
-  mt?: Spacing;
-  marginR?: Spacing;
-  mr?: Spacing;
-  marginB?: Spacing;
-  mb?: Spacing;
-  marginL?: Spacing;
-  ml?: Spacing;
-  padding?: Spacing;
-  p?: Spacing;
-  paddingX?: Spacing;
-  px?: Spacing;
-  paddingY?: Spacing;
-  py?: Spacing;
-  paddingT?: Spacing;
-  pt?: Spacing;
-  paddingR?: Spacing;
-  pr?: Spacing;
-  paddingB?: Spacing;
-  pb?: Spacing;
-  paddingL?: Spacing;
-  pl?: Spacing;
-}
-
-const margin = (value: Spacing) => ({margin: canvasSpace[value] || value});
-
-const marginX = (value: Spacing) => ({
-  marginLeft: canvasSpace[value], // || value,
-  marginRight: canvasSpace[value], // || value
-});
-const marginY = (value: Spacing) => ({
-  marginBottom: canvasSpace[value], // || value,
-  marginTop: canvasSpace[value], // || value
-});
-const marginT = (value: Spacing) => ({
-  marginTop: canvasSpace[value], // || value
-});
-const marginR = (value: Spacing) => ({
-  marginRight: canvasSpace[value], // || value
-});
-const marginB = (value: Spacing) => ({
-  marginBottom: canvasSpace[value], // || value
-});
-const marginL = (value: Spacing) => ({
-  marginLeft: canvasSpace[value], // || value
-});
-const padding = (value: Spacing) => ({padding: canvasSpace[value]}); // || value });
-const paddingX = (value: Spacing) => ({
-  paddingLeft: canvasSpace[value], // || value,
-  paddingRight: canvasSpace[value], // || value
-});
-const paddingY = (value: Spacing) => ({
-  paddingBottom: canvasSpace[value], // || value,
-  paddingTop: canvasSpace[value], // || value
-});
-const paddingT = (value: Spacing) => ({
-  paddingTop: canvasSpace[value], // || value
-});
-const paddingR = (value: Spacing) => ({
-  paddingRight: canvasSpace[value], // || value
-});
-const paddingB = (value: Spacing) => ({
-  paddingBottom: canvasSpace[value], // || value
-});
-const paddingL = (value: Spacing) => ({
-  paddingLeft: canvasSpace[value], // || value
-});
-
-export const space = {
-  margin,
-  m: margin, // helpful alias for margin
-  marginX,
-  mx: marginX, // helpful alias for  marginX
-  marginY,
-  my: marginY, // helpful alias for  marginY
-  marginT,
-  mt: marginT, // helpful alias for  marginT
-  marginR,
-  mr: marginR, // helpful alias for  marginR
-  marginB,
-  mb: marginB, // helpful alias for  marginB
-  marginL,
-  ml: marginL, // helpful alias for  marginL
-  padding,
-  p: padding, // helpful alias for padding
-  paddingX,
-  px: paddingX, // helpful alias for  paddingX
-  paddingY,
-  py: paddingY, // helpful alias for  paddingY
-  paddingT,
-  pt: paddingT, // helpful alias for  paddingT
-  paddingR,
-  pr: paddingR, // helpful alias for  paddingR
-  paddingB,
-  pb: paddingB, // helpful alias for  paddingB
-  paddingL,
-  pl: paddingL, // helpful alias for  paddingL
-};

package/tabs/lib/cursor/index.ts

@@ -1,2 +0,0 @@
-export * from './useRovingFocus';
-export * from './useCursorModel';