@workday/canvas-kit-react 6.3.5 → 7.0.0-alpha.0-next.3

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/ts3.5/dist/commonjs/pagination/lib/Pagination/common/Box.d.ts

@@ -1,12 +0,0 @@
-/** @jsx jsx */
-import * as React from 'react';
-import { SpaceProps } from './utils/space';
-import { LayoutProps } from './utils/layout';
-declare type As = keyof JSX.IntrinsicElements;
-export interface BoxProps extends SpaceProps, LayoutProps, React.HTMLAttributes<HTMLElement> {
-    as?: As;
-}
-export declare const StyledBox: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps, object>;
-export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<any>>;
-export {};
-//# sourceMappingURL=Box.d.ts.map

package/ts3.5/dist/commonjs/pagination/lib/Pagination/common/Flex.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="@emotion/core" />
-import { FlexProps as BaseFlexProps } from './utils/flex';
-import { BoxProps } from './Box';
-export declare type FlexProps = BaseFlexProps & BoxProps;
-export declare const Flex: import("@emotion/styled-base").StyledComponent<BoxProps & import("react").RefAttributes<any>, FlexProps, object>;
-//# sourceMappingURL=Flex.d.ts.map

package/ts3.5/dist/commonjs/pagination/lib/Pagination/common/Stack.d.ts

@@ -1,48 +0,0 @@
-/** @jsx jsx */
-import * as React from 'react';
-import { FlexProps } from './Flex';
-import { Spacing } from './utils/space';
-declare type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-export interface StackProps extends FlexProps {
-    children?: React.ReactNode;
-    direction: StackDirection;
-    flexDirection?: StackDirection;
-    spacing: Spacing;
-}
-declare const selector = "& > *:not(style) ~ *:not(style)";
-declare type Options = {
-    spacing: Spacing;
-    direction: StackDirection;
-    shouldUseRTL: boolean;
-};
-export declare const useStack: ({ direction, shouldUseRTL, spacing }: Options) => {
-    flexDirection: StackDirection;
-    "& > *:not(style) ~ *:not(style)": {
-        marginTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
-    } | {
-        marginBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
-    } | {
-        marginLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
-        marginRight?: undefined;
-    } | {
-        marginRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
-        marginLeft?: undefined;
-    } | {
-        marginRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
-        marginLeft?: undefined;
-    } | {
-        marginLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
-        marginRight?: undefined;
-    };
-};
-export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<unknown>>;
-export interface HStackProps extends Omit<StackProps, 'direction'> {
-    direction?: 'row' | 'row-reverse';
-}
-export declare const HStack: React.ForwardRefExoticComponent<HStackProps & React.RefAttributes<unknown>>;
-export interface VStackProps extends Omit<StackProps, 'direction'> {
-    direction?: 'column' | 'column-reverse';
-}
-export declare const VStack: React.ForwardRefExoticComponent<VStackProps & React.RefAttributes<unknown>>;
-export {};
-//# sourceMappingURL=Stack.d.ts.map

package/ts3.5/dist/commonjs/pagination/lib/Pagination/common/utils/flex.d.ts

@@ -1,57 +0,0 @@
-declare type Globals = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset';
-declare type GlobalsNumber = number | '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset';
-declare type SelfPosition = 'center' | 'end' | 'flex-end' | 'flex-start' | 'self-end' | 'self-start' | 'start';
-declare type ContentDistribution = 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
-declare type ContentPosition = 'center' | 'end' | 'flex-end' | 'flex-start' | 'start';
-declare type AlignItemsProperty = Globals | SelfPosition | 'baseline' | 'normal' | 'stretch';
-declare type AlignContentProperty = Globals | ContentDistribution | ContentPosition | 'baseline' | 'normal';
-declare type JustifyItemsProperty = Globals | SelfPosition | 'baseline' | 'left' | 'legacy' | 'normal' | 'right' | 'stretch';
-declare type JustifyContentProperty = Globals | ContentDistribution | ContentPosition | 'left' | 'normal' | 'right';
-declare type FlexWrapProperty = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset' | 'nowrap' | 'wrap' | 'wrap-reverse';
-declare type FlexDirectionProperty = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset' | 'column' | 'column-reverse' | 'row' | 'row-reverse';
-declare type JustifySelfProperty = Globals | SelfPosition | 'auto' | 'baseline' | 'left' | 'normal' | 'right' | 'stretch' | 'auto' | 'baseline' | 'left' | 'normal' | 'right' | 'stretch';
-declare 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;
-    flexDirection?: FlexDirectionProperty;
-    direction?: FlexDirectionProperty;
-    flex?: number | string;
-    flexGrow?: number | string;
-    grow?: number | string;
-    flexShrink?: number | string;
-    shrink?: number | string;
-    flexBasis?: number | string;
-    basis?: number | string;
-    justifySelf?: JustifySelfProperty;
-    alignSelf?: AlignSelfProperty;
-    order?: GlobalsNumber;
-}
-export declare const flex: {
-    alignItems: string;
-    alignContent: string;
-    display: string;
-    justifyItems: string;
-    justifyContent: string;
-    flexWrap: string;
-    wrap: string;
-    flexDirection: string;
-    direction: string;
-    flex: string;
-    flexGrow: string;
-    grow: string;
-    flexShrink: string;
-    shrink: string;
-    flexBasis: string;
-    basis: string;
-    justifySelf: string;
-    alignSelf: string;
-    order: string;
-};
-export {};
-//# sourceMappingURL=flex.d.ts.map

package/ts3.5/dist/commonjs/pagination/lib/Pagination/common/utils/layout.d.ts

@@ -1,32 +0,0 @@
-declare type Globals = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset';
-declare type OverflowProperty = Globals | 'auto' | 'hidden' | 'scroll' | 'visible' | string;
-declare type OverflowXProperty = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset' | 'auto' | 'hidden' | 'scroll' | 'visible';
-declare 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 declare const layout: {
-    display: string;
-    height: string;
-    maxHeight: string;
-    maxWidth: string;
-    minHeight: string;
-    minWidth: string;
-    overflow: string;
-    overflowX: string;
-    overflowY: string;
-    verticalAlign: string;
-    width: string;
-};
-export {};
-//# sourceMappingURL=layout.d.ts.map

package/ts3.5/dist/commonjs/pagination/lib/Pagination/common/utils/safelySpreadProps.d.ts

@@ -1,12 +0,0 @@
-/**
- * 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 declare function safelySpreadProps<T extends object>(props: T): T;
-//# sourceMappingURL=safelySpreadProps.d.ts.map