@workday/canvas-kit-preview-react 7.0.0-alpha.88-next.15 → 7.0.0-alpha.91-next.18

package/form-field/lib/FormField.tsx

@@ -1,24 +1,14 @@
 import React from 'react';
 
-import {createComponent, ExtractProps, useDefaultModel} from '@workday/canvas-kit-react/common';
+import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Stack, StackSpacing} from '@workday/canvas-kit-react/layout';
 
-import {
-  useFormFieldModel,
-  FormFieldModel,
-  FormFieldModelConfig,
-  useFormFieldOrientation,
-} from './hooks';
+import {useFormFieldModel, useFormFieldOrientation} from './hooks';
 import {FormFieldInput} from './FormFieldInput';
 import {FormFieldLabel} from './FormFieldLabel';
 import {FormFieldHint} from './FormFieldHint';
 
-export const FormFieldModelContext = React.createContext<FormFieldModel>({} as any);
-
-export interface FormFieldProps
-  extends FormFieldModelConfig,
-    Omit<ExtractProps<typeof Stack, never>, 'spacing'> {
-  model?: FormFieldModel;
+export interface FormFieldProps extends Omit<ExtractProps<typeof Stack, never>, 'spacing'> {
   /**
    * Children of the Text Input. Should contain a `<FormField.Input>`, a `<FormField.Label>` and an optional `<FormField.Hint>`
    */
@@ -34,25 +24,20 @@ export interface FormFieldProps
   spacing?: StackSpacing;
 }
 
-export const FormField = createComponent()({
+export const FormField = createContainer('div')({
   displayName: 'FormField',
-  Component: ({children, model, spacing, orientation, ...props}: FormFieldProps, ref) => {
-    const {hasError, id, isRequired, ...elemProps} = props;
-    const value = useDefaultModel(model, {hasError, id, isRequired}, useFormFieldModel);
-
-    const layoutProps = useFormFieldOrientation(orientation);
-
-    return (
-      <FormFieldModelContext.Provider value={value}>
-        <Stack ref={ref} {...layoutProps} {...elemProps}>
-          {children}
-        </Stack>
-      </FormFieldModelContext.Provider>
-    );
-  },
+  modelHook: useFormFieldModel,
   subComponents: {
     Input: FormFieldInput,
     Label: FormFieldLabel,
     Hint: FormFieldHint,
   },
+})<FormFieldProps>(({children, orientation, ...elemProps}, Element) => {
+  const layoutProps = useFormFieldOrientation(orientation);
+
+  return (
+    <Stack as={Element} {...layoutProps} {...elemProps}>
+      {children}
+    </Stack>
+  );
 });

package/form-field/lib/FormFieldHint.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import {
-  createComponent,
+  createSubcomponent,
   ExtractProps,
-  useModelContext,
   useTheme,
   styled,
   StyledType,
@@ -10,42 +9,32 @@ import {
 import {space, type} from '@workday/canvas-kit-react/tokens';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
-import {FormFieldModelContext} from './FormField';
-import {FormFieldModel, useFormFieldHint} from './hooks';
-
-export interface FormFieldHintProps extends ExtractProps<typeof Box, never> {
-  model?: FormFieldModel;
-  /**
-   * Hint text to show to the user regarding the Error/Alert
-   */
-  children?: React.ReactNode;
-}
+import {useFormFieldHint, useFormFieldModel} from './hooks';
 
 const StyledHint = styled(Box)<StyledType & BoxProps>({
   ...type.levels.subtext.medium,
 });
 
-export const FormFieldHint = createComponent('p')({
+export const FormFieldHint = createSubcomponent('p')({
   displayName: 'FormField.Hint',
-  Component: ({model, children, ...elemProps}: FormFieldHintProps, ref, Element) => {
-    const localModel = useModelContext(FormFieldModelContext, model);
-    const props = useFormFieldHint(localModel, elemProps, ref);
-    const theme = useTheme();
+  modelHook: useFormFieldModel,
+  elemPropsHook: useFormFieldHint,
+})<ExtractProps<typeof Box, never>>(({children, ...elemProps}, Element, model) => {
+  const theme = useTheme();
 
-    if (!children) {
-      // If there is no hint text just skip rendering
-      return null;
-    }
+  if (!children) {
+    // If there is no hint text just skip rendering
+    return null;
+  }
 
-    return (
-      <StyledHint
-        as={Element}
-        color={localModel.state.hasError ? theme.canvas.palette.error.main : undefined}
-        marginY={space.xxs}
-        {...props}
-      >
-        {children}
-      </StyledHint>
-    );
-  },
+  return (
+    <StyledHint
+      as={Element}
+      color={model.state.hasError ? theme.canvas.palette.error.main : undefined}
+      marginY={space.xxs}
+      {...elemProps}
+    >
+      {children}
+    </StyledHint>
+  );
 });

package/form-field/lib/FormFieldInput.tsx

@@ -1,21 +1,14 @@
 import React from 'react';
 
-import {createComponent, ExtractProps, useModelContext} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Box} from '@workday/canvas-kit-react/layout';
 
-import {FormFieldModelContext} from './FormField';
-import {FormFieldModel, useFormFieldInput} from './hooks';
+import {useFormFieldInput, useFormFieldModel} from './hooks';
 
-export interface FormFieldInputProps extends ExtractProps<typeof Box, never> {
-  model?: FormFieldModel;
-}
-
-export const FormFieldInput = createComponent('input')({
+export const FormFieldInput = createSubcomponent('input')({
   displayName: 'FormField.Input',
-  Component: ({model, ...elemProps}: FormFieldInputProps, ref, Element) => {
-    const localModel = useModelContext(FormFieldModelContext, model);
-    const props = useFormFieldInput(localModel, elemProps, ref);
-
-    return <Box as={Element} {...props} />;
-  },
+  modelHook: useFormFieldModel,
+  elemPropsHook: useFormFieldInput,
+})<ExtractProps<typeof Box, never>>((elemProps, Element) => {
+  return <Box as={Element} {...elemProps} />;
 });

package/form-field/lib/FormFieldLabel.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import {
-  createComponent,
+  createSubcomponent,
   ExtractProps,
-  useModelContext,
   useTheme,
   styled,
   StyledType,
@@ -11,11 +10,9 @@ import {
 import {Box, HStack, StackSpacing} from '@workday/canvas-kit-react/layout';
 import {type} from '@workday/canvas-kit-react/tokens';
 
-import {FormFieldModelContext} from './FormField';
-import {FormFieldModel, useFormFieldLabel} from './hooks';
+import {useFormFieldLabel, useFormFieldModel} from './hooks';
 
 export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, never>, 'spacing'> {
-  model?: FormFieldModel;
   /**
    * The text of the label.
    */
@@ -38,22 +35,21 @@ const StyledAsterisk = styled(Box)<StyledType>({
   textDecoration: 'unset',
 });
 
-export const FormFieldLabel = createComponent('label')({
+export const FormFieldLabel = createSubcomponent('label')({
   displayName: 'FormField.Label',
-  Component: ({spacing = 'xxxs', model, children, ...elemProps}: FormFieldLabelProps, ref) => {
-    const localModel = useModelContext(FormFieldModelContext, model);
-    const props = useFormFieldLabel(localModel, elemProps, ref);
-    const theme = useTheme();
+  modelHook: useFormFieldModel,
+  elemPropsHook: useFormFieldLabel,
+})<FormFieldLabelProps>(({spacing = 'xxxs', children, ...elemProps}, Element, model) => {
+  const theme = useTheme();
 
-    return (
-      <HStack as="label" spacing={spacing} minWidth="180px" {...props}>
-        <StyledFormFieldLabel>{children}</StyledFormFieldLabel>
-        {localModel.state.isRequired && (
-          <StyledAsterisk as="span" color={theme.canvas.palette.error.main} aria-hidden="true">
-            *
-          </StyledAsterisk>
-        )}
-      </HStack>
-    );
-  },
+  return (
+    <HStack as={Element} spacing={spacing} minWidth="180px" {...elemProps}>
+      <StyledFormFieldLabel>{children}</StyledFormFieldLabel>
+      {model.state.isRequired && (
+        <StyledAsterisk as="span" color={theme.canvas.palette.error.main} aria-hidden="true">
+          *
+        </StyledAsterisk>
+      )}
+    </HStack>
+  );
 });

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

@@ -1,11 +1,11 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {FormFieldModel} from './useFormFieldModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useFormFieldModel} from './useFormFieldModel';
 
 /**
  * Adds the necessary props to a `Hint` component.
  * Used by the FormField.Hint subcomponent and other input type components
  */
-export const useFormFieldHint = createHook(({state}: FormFieldModel) => {
+export const useFormFieldHint = createElemPropsHook(useFormFieldModel)(({state}) => {
   return {
     id: `hint-${state.id}`,
   };

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

@@ -1,11 +1,11 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {FormFieldModel} from './useFormFieldModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useFormFieldModel} from './useFormFieldModel';
 
 /**
  * Adds the necessary props to an `Input` component.
  * Used by the FormField.Input subcomponent and other input type components
  */
-export const useFormFieldInput = createHook(({state}: FormFieldModel) => {
+export const useFormFieldInput = createElemPropsHook(useFormFieldModel)(({state}) => {
   return {
     required: state.isRequired ? true : undefined,
     'aria-invalid': state.hasError ? true : undefined,

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

@@ -1,11 +1,11 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {FormFieldModel} from './useFormFieldModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useFormFieldModel} from './useFormFieldModel';
 
 /**
  * Adds the necessary props to a `Label` component.
  * Used by the FormField.Label subcomponent and other input type components
  */
-export const useFormFieldLabel = createHook(({state}: FormFieldModel) => {
+export const useFormFieldLabel = createElemPropsHook(useFormFieldModel)(({state}) => {
   return {
     htmlFor: `input-${state.id}`,
   };

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

@@ -1,62 +1,41 @@
-import {
-  createEventMap,
-  Model,
-  ToModelConfig,
-  useEventMap,
-  useUniqueId,
-} from '@workday/canvas-kit-react/common';
-
-type FormFieldState = {
-  /**
-   * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
-   * `required` set to true, and usually some subcomponents will have a error color applied.
-   * @default false
-   */
-  hasError?: boolean;
-  /**
-   * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
-   * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
-   * - `FormField.Input` will set `id` to `input-${id}`
-   * - `FormField.Label` will set `htmlFor` to `input-${id}`
-   * - `FormField.Hint` will set `id` to `hint-${id}`
-   *
-   * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
-   * @default `useUniqueId()`
-   */
-  id?: string;
-  /**
-   * Optional flag to denote if this field is required. When true the `FormField.Input` will have
-   * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
-   * @default false
-   */
-  isRequired?: boolean;
-};
-
-type FormFieldEvents = {};
-
-export type FormFieldModel = Model<FormFieldState, FormFieldEvents>;
-
-const formFieldEventMap = createEventMap<FormFieldEvents>()({
-  guards: {},
-  callbacks: {},
-});
-
-export type FormFieldModelConfig = FormFieldState &
-  Partial<ToModelConfig<FormFieldState, FormFieldEvents, typeof formFieldEventMap>>;
-
-export const useFormFieldModel = (config: FormFieldModelConfig = {}): FormFieldModel => {
+import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
+
+export const useFormFieldModel = createModelHook({
+  defaultConfig: {
+    /**
+     * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
+     * `required` set to true, and usually some subcomponents will have a error color applied.
+     * @default false
+     */
+    hasError: false,
+    /**
+     * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
+     * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
+     * - `FormField.Input` will set `id` to `input-${id}`
+     * - `FormField.Label` will set `htmlFor` to `input-${id}`
+     * - `FormField.Hint` will set `id` to `hint-${id}`
+     *
+     * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+     * @default `useUniqueId()`
+     */
+    id: '',
+    /**
+     * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+     * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+     * @default false
+     */
+    isRequired: false,
+  },
+})(config => {
   const id = useUniqueId(config.id);
 
   const state = {
-    hasError: config.hasError,
-    isRequired: config.isRequired,
+    ...config,
     id,
   };
 
-  const events = useEventMap(formFieldEventMap, state, config, {});
-
   return {
     state,
-    events,
+    events: {},
   };
-};
+});

package/menu/lib/Menu.tsx

@@ -121,7 +121,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
     const cardWidth = grow ? '100%' : width;
 
     return (
-      <Card style={{display: 'inline-block'}} padding={space.zero} width={cardWidth} depth={3}>
+      <Card display="inline-block" padding={space.zero} width={cardWidth} depth={3}>
         <Card.Body>
           <List
             role="menu"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "7.0.0-alpha.88-next.15+39e636c4",
+  "version": "7.0.0-alpha.91-next.18+f92b7ba5",
   "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",
@@ -17,25 +17,16 @@
     "*/lib/*",
     "*/index.ts",
     "dist/",
-    "index.ts",
-    "ts3.5/**/*"
+    "index.ts"
   ],
-  "typesVersions": {
-    "<=3.5": {
-      "*": [
-        "ts3.5/*"
-      ]
-    }
-  },
   "scripts": {
     "watch": "yarn build:es6 -w",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "clean": "rimraf dist && rimraf ts3.5 && rimraf .build-info && mkdirp dist && mkdirp ts3.5/dist",
+    "clean": "rimraf dist && rimraf .build-info && mkdirp dist",
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:es6": "tsc -p tsconfig.es6.json",
     "build:rebuild": "npm-run-all clean build",
-    "build:downlevel-dts": "yarn run downlevel-dts dist ts3.5/dist",
-    "build": "npm-run-all --parallel build:cjs build:es6 --sequential build:downlevel-dts",
+    "build": "npm-run-all --parallel build:cjs build:es6",
     "prepack": "node ../../utils/publish.js pre preview-react",
     "postpack": "node ../../utils/publish.js post preview-react",
     "depcheck": "node ../../utils/check-dependencies-exist.js",
@@ -54,15 +45,15 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.88-next.15+39e636c4",
+    "@workday/canvas-kit-react": "^7.0.0-alpha.91-next.18+f92b7ba5",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.4"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^3.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.88-next.15+39e636c4",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.91-next.18+f92b7ba5",
     "formik": "^2.2.9",
     "yup": "^0.31.1"
   },
-  "gitHead": "39e636c41143ea66b84be1d36de2b840d11bb133"
+  "gitHead": "f92b7ba590e19e7f55f7a6417d0d4b7ae3b1bba4"
 }

package/text-area/lib/TextArea.tsx

@@ -1,47 +1,33 @@
 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 {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
+import {FormField, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
 import {Stack} from '@workday/canvas-kit-react/layout';
 
-import {TextAreaModel, useTextAreaModel} from './hooks';
+import {useTextAreaModel} from './hooks';
 import {TextAreaField} from './TextAreaField';
-import {TextAreaLabel} from './TextAreaLabel';
-import {TextAreaHint} from './TextAreaHint';
-
-export const TextAreaModelContext = FormFieldModelContext;
 
 export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
-  model?: TextAreaModel;
   /**
    * Children of the Text Input. Should contain a `<TextArea.Field>`, a `<TextArea.Label>` and an optional `<TextArea.Hint>`
    */
   children: React.ReactNode;
 }
 
-export const TextArea = createComponent()({
+export const TextArea = createContainer('div')({
   displayName: 'TextArea',
-  Component: ({children, model, orientation, ...props}: TextAreaProps, ref) => {
-    const {hasError, id, isRequired, ...elemProps} = props;
-    const value = useDefaultModel(model, {hasError, id, isRequired}, useTextAreaModel);
-
-    const layoutProps = useFormFieldOrientation(orientation);
-
-    return (
-      <TextAreaModelContext.Provider value={value}>
-        <Stack ref={ref} {...layoutProps} {...elemProps}>
-          {children}
-        </Stack>
-      </TextAreaModelContext.Provider>
-    );
-  },
+  modelHook: useTextAreaModel,
   subComponents: {
     Field: TextAreaField,
-    Label: TextAreaLabel,
-    Hint: TextAreaHint,
+    Label: FormField.Label,
+    Hint: FormField.Hint,
   },
+})<TextAreaProps>(({children, orientation, ...elemProps}, Element) => {
+  const layoutProps = useFormFieldOrientation(orientation);
+
+  return (
+    <Stack as={Element} {...layoutProps} {...elemProps}>
+      {children}
+    </Stack>
+  );
 });

package/text-area/lib/TextAreaField.tsx

@@ -9,21 +9,10 @@ import {
   spaceNumbers,
   type,
 } from '@workday/canvas-kit-react/tokens';
-import {
-  createComponent,
-  ExtractProps,
-  useModelContext,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps, 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';
-
-export interface TextAreaFieldProps extends ExtractProps<typeof FormField.Input, never> {
-  model?: TextAreaModel;
-}
+import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
 
 const baseStyles: CSSProperties = {
   ...type.levels.subtext.large,
@@ -51,38 +40,35 @@ const baseStyles: CSSProperties = {
   },
 };
 
-export const TextAreaField = createComponent('textarea')({
+export const TextAreaField = createSubcomponent('textarea')({
   displayName: 'TextArea.Field',
-  Component: ({model, ...elemProps}: TextAreaFieldProps, ref) => {
-    const localModel = useModelContext(TextAreaModelContext, model);
+  modelHook: useTextInputModel,
+})<ExtractProps<typeof FormField.Input, never>>(({...elemProps}, Element, model) => {
+  const theme = useTheme();
+  const errorRing = useThemedRing('error');
 
-    const theme = useTheme();
-    const errorRing = useThemedRing('error');
+  const focusStyles = model.state.hasError
+    ? errorRing
+    : {
+        '&:focus:not([disabled])': {
+          borderColor: theme.canvas.palette.common.focusOutline,
+          boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
+        },
+      };
 
-    const focusStyles = localModel.state.hasError
-      ? errorRing
-      : {
-          '&:focus:not([disabled])': {
-            borderColor: theme.canvas.palette.common.focusOutline,
-            boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
-          },
-        };
-
-    return (
-      <FormField.Input
-        as="textarea"
-        ref={ref}
-        css={[baseStyles, focusStyles]}
-        {...elemProps}
-        border={`1px solid ${inputColors.border}`}
-        display="block"
-        backgroundColor={inputColors.background}
-        borderRadius={borderRadius.m}
-        minHeight={64}
-        minWidth={280}
-        padding={spaceNumbers.xxs} // Compensate for border
-        margin={0} // Fix Safari
-      />
-    );
-  },
+  return (
+    <FormField.Input
+      as={Element}
+      css={[baseStyles, focusStyles]}
+      {...elemProps}
+      border={`1px solid ${inputColors.border}`}
+      display="block"
+      backgroundColor={inputColors.background}
+      borderRadius={borderRadius.m}
+      minHeight={64}
+      minWidth={280}
+      padding={spaceNumbers.xxs} // Compensate for border
+      margin={0} // Fix Safari
+    />
+  );
 });

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

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