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

package/form-field/lib/FormFieldLabel.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import {jsx} from '@emotion/core';
 import React from 'react';
 
 import {
@@ -7,8 +5,10 @@ import {
   ExtractProps,
   useModelContext,
   useTheme,
+  styled,
+  StyledType,
 } from '@workday/canvas-kit-react/common';
-import {ComponentStyles} from '@workday/canvas-kit-labs-react/common';
+import {Box} from '@workday/canvas-kit-labs-react/common';
 import {type} from '@workday/canvas-kit-react/tokens';
 import {HStack, StackSpacing} from '@workday/canvas-kit-labs-react/layout';
 
@@ -28,41 +28,31 @@ export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, ne
   spacing?: StackSpacing;
 }
 
-const styles: ComponentStyles = {
-  label: {
-    ...type.levels.subtext.large,
-    fontWeight: type.properties.fontWeights.medium,
-  },
-  asterisk: {
-    fontSize: type.properties.fontSizes[16],
-    fontWeight: type.properties.fontWeights.regular,
-    textDecoration: 'unset',
-  },
-};
+const StyledFormFieldLabel = styled('span')({
+  ...type.levels.subtext.large,
+  fontWeight: type.properties.fontWeights.medium,
+});
+
+const StyledAsterisk = styled(Box)<StyledType>({
+  fontSize: type.properties.fontSizes[20],
+  fontWeight: type.properties.fontWeights.regular,
+  textDecoration: 'unset',
+});
 
 export const FormFieldLabel = createComponent('label')({
   displayName: 'FormField.Label',
-  Component: ({spacing='xxxs', model, children, ...elemProps}: FormFieldLabelProps, ref) => {
+  Component: ({spacing = 'xxxs', model, children, ...elemProps}: FormFieldLabelProps, ref) => {
     const localModel = useModelContext(FormFieldModelContext, model);
     const props = useFormFieldLabel(localModel, elemProps, ref);
     const theme = useTheme();
 
     return (
-      <HStack
-        as="label"
-        spacing={spacing}
-        css={styles.label}
-        minWidth='180px'
-        {...props}
-      >
-        <span>{children}</span>
+      <HStack as="label" spacing={spacing} minWidth="180px" {...props}>
+        <StyledFormFieldLabel>{children}</StyledFormFieldLabel>
         {localModel.state.isRequired && (
-          <span
-            css={[styles.asterisk, {color: theme.canvas.palette.error.main}]}
-            aria-hidden="true"
-          >
+          <StyledAsterisk as="span" color={theme.canvas.palette.error.main} aria-hidden="true">
             *
-          </span>
+          </StyledAsterisk>
         )}
       </HStack>
     );

package/form-field/lib/hooks/useFormFieldOrientation.tsx

@@ -6,23 +6,23 @@ import {space} from '@workday/canvas-kit-react/tokens';
  */
 export const useFormFieldOrientation = (orientation: 'horizontal' | 'vertical') => {
   let layoutProps: {
-    flexDirection: StackProps['flexDirection'],
-    alignItems: StackProps['alignItems'],
-    spacing: StackSpacing
-  }
+    flexDirection: StackProps['flexDirection'];
+    alignItems: StackProps['alignItems'];
+    spacing: StackSpacing;
+  };
 
   if (orientation === 'horizontal') {
     layoutProps = {
       flexDirection: 'row',
       spacing: space.l,
       alignItems: 'center',
-    }
+    };
   } else {
     layoutProps = {
       flexDirection: 'column',
       spacing: space.xxxs,
       alignItems: 'flex-start',
-    }
+    };
   }
 
   return layoutProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "7.0.0-alpha.0-next.1+57471fa0",
+  "version": "7.0.0-alpha.0-next.3+14a81c7e",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -54,15 +54,15 @@
   "dependencies": {
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.1+57471fa0",
+    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.3+14a81c7e",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^1.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.1+57471fa0",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.3+14a81c7e",
     "formik": "^2.2.9",
     "yup": "^0.31.1"
   },
-  "gitHead": "57471fa0c73534126f9ef9a18203d49c5834d21e"
+  "gitHead": "14a81c7ef3deb9efaf67fa3ec9cc2d2a3161b00b"
 }

package/side-panel/lib/SidePanel.tsx

@@ -1,11 +1,13 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import * as React from 'react';
-import {styled, useIsRTL} from '@workday/canvas-kit-react/common';
-import {css, CSSObject, jsx, keyframes} from '@emotion/core';
+import {styled, useIsRTL, StyledType} from '@workday/canvas-kit-react/common';
+import {css, jsx, keyframes} from '@emotion/core';
 import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
-import {space, colors, depth} from '@workday/canvas-kit-react/tokens';
+import {space, colors} from '@workday/canvas-kit-react/tokens';
 import {transformationImportIcon} from '@workday/canvas-system-icons-web';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {Box} from '@workday/canvas-kit-labs-react/common';
 
 export type SidePanelVariant = 'standard' | 'alternate';
 export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
@@ -87,17 +89,7 @@ const createKeyframes = (from: number | string, to: number | string) => {
   `;
 };
 
-const containerVariantStyle: Record<SidePanelVariant, CSSObject> = {
-  alternate: {
-    backgroundColor: colors.frenchVanilla100,
-    ...depth[3],
-  },
-  standard: {
-    backgroundColor: colors.soap100,
-  },
-};
-
-const Panel = styled('section')<Pick<SidePanelProps, 'as'>>({
+const StyledPanel = styled(Box)<StyledType & Pick<SidePanelProps, 'as'>>({
   overflow: 'hidden',
   position: 'relative',
   boxSizing: 'border-box',
@@ -120,7 +112,7 @@ const SidePanel = ({
   onExpandedChange,
   onStateTransition,
   origin = 'left',
-  variant = 'standard',
+  // variant = 'standard',
   touched,
   ...elemProps
 }: SidePanelProps) => {
@@ -177,20 +169,15 @@ const SidePanel = ({
   };
 
   return (
-    <Panel
+    <StyledPanel
       as={as}
-      css={[
-        {
-          width: expanded ? expandedWidth : collapsedWidth,
-          maxWidth: expanded ? expandedWidth : collapsedWidth,
-          // mounted.current will be false on the first render, thus you won't get an unwanted animation here
-          // Will animate again if you force a re-render (like in Storybook)
-          animation: touched
-            ? `${expanded ? motion.expand : motion.collapse} 200ms ease-out`
-            : undefined,
-        },
-        containerVariantStyle[variant],
-      ]}
+      width={expanded ? expandedWidth : collapsedWidth}
+      maxWidth={expanded ? expandedWidth : collapsedWidth}
+      backgroundColor={elemProps.variant === 'alternate' ? colors.frenchVanilla100 : colors.soap100}
+      depth={elemProps.variant === 'alternate' ? 3 : undefined}
+      animation={
+        touched ? `${expanded ? motion.expand : motion.collapse} 200ms ease-out` : undefined
+      }
       onAnimationEnd={handleAnimationEnd}
       onAnimationStart={handleAnimationStart}
       {...elemProps}
@@ -203,7 +190,7 @@ const SidePanel = ({
       >
         {children}
       </SidePanelContext.Provider>
-    </Panel>
+    </StyledPanel>
   );
 };
 

package/text-area/lib/TextArea.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 
 import {createComponent, ExtractProps, useDefaultModel} from '@workday/canvas-kit-react/common';
-import {FormField, FormFieldModelContext, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
+import {
+  FormField,
+  FormFieldModelContext,
+  useFormFieldOrientation,
+} from '@workday/canvas-kit-preview-react/form-field';
 import {Stack} from '@workday/canvas-kit-labs-react/layout';
 
-import { TextAreaModel, useTextAreaModel } from './hooks';
+import {TextAreaModel, useTextAreaModel} from './hooks';
 import {TextAreaField} from './TextAreaField';
 import {TextAreaLabel} from './TextAreaLabel';
 import {TextAreaHint} from './TextAreaHint';
@@ -22,10 +26,10 @@ export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
 export const TextArea = createComponent()({
   displayName: 'TextArea',
   Component: ({children, model, orientation, ...props}: TextAreaProps, ref) => {
-    const {hasError, id, isRequired, ...elemProps} = props
+    const {hasError, id, isRequired, ...elemProps} = props;
     const value = useDefaultModel(model, {hasError, id, isRequired}, useTextAreaModel);
 
-    const layoutProps = useFormFieldOrientation(orientation)
+    const layoutProps = useFormFieldOrientation(orientation);
 
     return (
       <TextAreaModelContext.Provider value={value}>

package/text-area/lib/TextAreaField.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import {jsx} from '@emotion/core';
 
@@ -8,12 +9,17 @@ import {
   spaceNumbers,
   type,
 } from '@workday/canvas-kit-react/tokens';
-import {createComponent, ExtractProps, useModelContext, useTheme} from '@workday/canvas-kit-react/common';
+import {
+  createComponent,
+  ExtractProps,
+  useModelContext,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
 import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
 import {TextAreaModelContext} from './TextArea';
-import { TextAreaModel } from './hooks';
+import {TextAreaModel} from './hooks';
 
 export interface TextAreaFieldProps extends ExtractProps<typeof FormField.Input, never> {
   model?: TextAreaModel;
@@ -66,9 +72,10 @@ export const TextAreaField = createComponent('textarea')({
       <FormField.Input
         as="textarea"
         ref={ref}
-        css={[baseStyles, focusStyles]} {...elemProps}
+        css={[baseStyles, focusStyles]}
+        {...elemProps}
         border={`1px solid ${inputColors.border}`}
-        display='block'
+        display="block"
         backgroundColor={inputColors.background}
         borderRadius={borderRadius.m}
         minHeight={64}

package/text-area/lib/hooks/useTextAreaModel.ts

@@ -1,7 +1,4 @@
-import {
-  useFormFieldModel,
-  FormFieldModel,
-} from '@workday/canvas-kit-preview-react/form-field';
+import {useFormFieldModel, FormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
 
 export const useTextAreaModel = useFormFieldModel;
 

package/text-input/lib/TextInput.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 
 import {createComponent, ExtractProps, useDefaultModel} from '@workday/canvas-kit-react/common';
-import {FormField, FormFieldModelContext, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
+import {
+  FormField,
+  FormFieldModelContext,
+  useFormFieldOrientation,
+} from '@workday/canvas-kit-preview-react/form-field';
 import {Stack} from '@workday/canvas-kit-labs-react/layout';
 
 import {useTextInputModel, TextInputModel} from './hooks';
@@ -11,7 +15,7 @@ import {TextInputHint} from './TextInputHint';
 
 export const TextInputModelContext = FormFieldModelContext;
 
-export interface TextInputProps  extends ExtractProps<typeof FormField, never> {
+export interface TextInputProps extends ExtractProps<typeof FormField, never> {
   model?: TextInputModel;
   /**
    * Children of the Text Input. Should contain a `<TextInput.Field>`, a `<TextInput.Label>` and an optional `<TextInput.Hint>`
@@ -22,10 +26,10 @@ export interface TextInputProps  extends ExtractProps<typeof FormField, never> {
 export const TextInput = createComponent()({
   displayName: 'TextInput',
   Component: ({children, model, orientation, ...props}: TextInputProps, ref) => {
-    const {hasError, id, isRequired, ...elemProps} = props
+    const {hasError, id, isRequired, ...elemProps} = props;
     const value = useDefaultModel(model, {hasError, id, isRequired}, useTextInputModel);
 
-    const layoutProps = useFormFieldOrientation(orientation)
+    const layoutProps = useFormFieldOrientation(orientation);
 
     return (
       <TextInputModelContext.Provider value={value}>

package/text-input/lib/TextInputField.tsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import {jsx} from '@emotion/core';
 
@@ -8,7 +9,12 @@ import {
   space,
   type,
 } from '@workday/canvas-kit-react/tokens';
-import {createComponent, ExtractProps, useModelContext, useTheme} from '@workday/canvas-kit-react/common';
+import {
+  createComponent,
+  ExtractProps,
+  useModelContext,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
 import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
@@ -68,9 +74,9 @@ export const TextInputField = createComponent('input')({
         css={[baseStyles, focusStyles]}
         padding={space.xxs}
         margin={0}
-        display='block'
-        height='40px'
-        minWidth='280px'
+        display="block"
+        height="40px"
+        minWidth="280px"
         border={`1px solid ${inputColors.border}`}
         backgroundColor={inputColors.background}
         borderRadius={borderRadius.m}

package/text-input/lib/hooks/useTextInputModel.ts

@@ -1,7 +1,4 @@
-import {
-  useFormFieldModel,
-  FormFieldModel,
-} from '@workday/canvas-kit-preview-react/form-field';
+import {useFormFieldModel, FormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
 
 export const useTextInputModel = useFormFieldModel;
 

package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 import { Breadcrumb } from '../types';
 export interface DropdownMenuProps {

package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 export declare type ListItemProps = React.HTMLAttributes<HTMLLIElement>;
 export declare const BreadcrumbsListItem: ({ children, ...props }: ListItemProps) => JSX.Element;

package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/index.d.ts

@@ -1,5 +1,4 @@
-/** @jsx jsx */
 import React from 'react';
 export declare type BreadcrumbsListProps = React.HTMLAttributes<HTMLUListElement>;
-export declare const BreadcrumbsList: React.ForwardRefExoticComponent<BreadcrumbsListProps & React.RefAttributes<HTMLUListElement>>;
+export declare const BreadcrumbsList: import("@workday/canvas-kit-react/common").ElementComponent<"ul", BreadcrumbsListProps>;
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/index.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="@emotion/core" />
 export declare const Breadcrumbs: {
     Nav: ({ "aria-label": ariaLabel, ...elemProps }: import("./Nav").BreadcrumbsNavProps) => JSX.Element;
     CollapsibleList: ({ children, buttonIcon, buttonAriaLabel, maxWidth, ...props }: import("./List/Collapsible").CollapsibleListProps) => JSX.Element;
-    List: import("react").ForwardRefExoticComponent<import("./List").BreadcrumbsListProps & import("react").RefAttributes<HTMLUListElement>>;
+    List: import("@workday/canvas-kit-react/common").ElementComponent<"ul", import("./List").BreadcrumbsListProps>;
     ListItem: ({ children, ...props }: import("./List/ListItem").ListItemProps) => JSX.Element;
     Link: ({ maxWidth, onAction, onClick, href, children, ...props }: import("./List/Link").BreadcrumbLinkProps) => JSX.Element;
     CurrentItem: ({ children, maxWidth, ...elemProps }: import("./List/CurrentItem").CurrentItemProps) => JSX.Element;

package/ts3.5/dist/commonjs/side-panel/lib/SidePanel.d.ts

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import * as React from 'react';
 import { IconButtonProps } from '@workday/canvas-kit-react/button';
@@ -65,7 +66,7 @@ export declare const SidePanelContext: React.Context<{
     origin: string;
 }>;
 declare const SidePanel: {
-    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): JSX.Element;
+    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): JSX.Element;
     ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: IconButtonProps & {
         /**
          * The tooltip text to expand the side panel

package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 import { Breadcrumb } from '../types';
 export interface DropdownMenuProps {

package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 export declare type ListItemProps = React.HTMLAttributes<HTMLLIElement>;
 export declare const BreadcrumbsListItem: ({ children, ...props }: ListItemProps) => JSX.Element;

package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/List/index.d.ts

@@ -1,5 +1,4 @@
-/** @jsx jsx */
 import React from 'react';
 export declare type BreadcrumbsListProps = React.HTMLAttributes<HTMLUListElement>;
-export declare const BreadcrumbsList: React.ForwardRefExoticComponent<BreadcrumbsListProps & React.RefAttributes<HTMLUListElement>>;
+export declare const BreadcrumbsList: import("@workday/canvas-kit-react/common").ElementComponent<"ul", BreadcrumbsListProps>;
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/index.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="@emotion/core" />
 export declare const Breadcrumbs: {
     Nav: ({ "aria-label": ariaLabel, ...elemProps }: import("./Nav").BreadcrumbsNavProps) => JSX.Element;
     CollapsibleList: ({ children, buttonIcon, buttonAriaLabel, maxWidth, ...props }: import("./List/Collapsible").CollapsibleListProps) => JSX.Element;
-    List: import("react").ForwardRefExoticComponent<import("./List").BreadcrumbsListProps & import("react").RefAttributes<HTMLUListElement>>;
+    List: import("@workday/canvas-kit-react/common").ElementComponent<"ul", import("./List").BreadcrumbsListProps>;
     ListItem: ({ children, ...props }: import("./List/ListItem").ListItemProps) => JSX.Element;
     Link: ({ maxWidth, onAction, onClick, href, children, ...props }: import("./List/Link").BreadcrumbLinkProps) => JSX.Element;
     CurrentItem: ({ children, maxWidth, ...elemProps }: import("./List/CurrentItem").CurrentItemProps) => JSX.Element;

package/ts3.5/dist/es6/side-panel/lib/SidePanel.d.ts

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import * as React from 'react';
 import { IconButtonProps } from '@workday/canvas-kit-react/button';
@@ -65,7 +66,7 @@ export declare const SidePanelContext: React.Context<{
     origin: string;
 }>;
 declare const SidePanel: {
-    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): JSX.Element;
+    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): JSX.Element;
     ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: IconButtonProps & {
         /**
          * The tooltip text to expand the side panel