chore: Merge prerelease/minor into prerelease/major (#2735)

Co-authored-by: @NicholasBoll <nicholas.boll@gmail.com> Co-authored-by: @josephnle <josephnle@users.noreply.github.com> Co-authored-by: manuel.carrera <manuel.carrera@workday.com>
Workday · May 13, 2024 · ce3cd9f · ce3cd9f
2 parents b825549 + 9553307
commit ce3cd9f
Show file tree

Hide file tree

Showing 16 changed files with 68 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [v10.3.38](https://github.com/Workday/canvas-kit/releases/tag/v10.3.38) (2024-05-09)
+
+### Documentation
+
+- docs: Fix typo in Merging Styles story name ([#2732](https://github.com/Workday/canvas-kit/pull/2732)) ([@josephnle](https://github.com/josephnle))
+
+
+## [v10.3.37](https://github.com/Workday/canvas-kit/releases/tag/v10.3.37) (2024-05-03)
+
+### Components
+
+- fix(select): Redirect focus to visual input ([#2723](https://github.com/Workday/canvas-kit/pull/2723)) ([@NicholasBoll](https://github.com/NicholasBoll))
+
+
 ## [v10.3.36](https://github.com/Workday/canvas-kit/releases/tag/v10.3.36) (2024-05-03)
 
 ### Components

diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "modules/**"
   ],
-  "version": "10.3.36",
+  "version": "10.3.38",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

diff --git a/modules/codemod/package.json b/modules/codemod/package.json
@@ -2,7 +2,7 @@
   "name": "@workday/canvas-kit-codemod",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
-  "version": "10.3.36",
+  "version": "10.3.38",
   "description": "A collection of codemods for use on Workday Canvas Kit packages.",
   "main": "dist/es6/index.js",
   "sideEffects": false,

diff --git a/modules/docs/package.json b/modules/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "10.3.36",
+  "version": "10.3.38",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^10.3.36",
-    "@workday/canvas-kit-preview-react": "^10.3.36",
-    "@workday/canvas-kit-react": "^10.3.36",
-    "@workday/canvas-kit-styling": "^10.3.36",
+    "@workday/canvas-kit-labs-react": "^10.3.38",
+    "@workday/canvas-kit-preview-react": "^10.3.38",
+    "@workday/canvas-kit-react": "^10.3.38",
+    "@workday/canvas-kit-styling": "^10.3.38",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.3.1",
     "markdown-to-jsx": "^6.10.3",

diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "10.3.36",
+  "version": "10.3.38",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,7 +46,7 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^10.3.36",
+    "@workday/canvas-kit-react": "^10.3.38",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",

diff --git a/modules/popup-stack/package.json b/modules/popup-stack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-popup-stack",
-  "version": "10.3.36",
+  "version": "10.3.38",
   "description": "Stack for managing popup UIs to coordinate global concerns like escape key handling and rendering order",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

diff --git a/modules/preview-react/_examples/stories/examples/TextInputWithReactHookForm.tsx b/modules/preview-react/_examples/stories/examples/TextInputWithReactHookForm.tsx
@@ -59,7 +59,11 @@ const validationSchema: SchemaOf<LoginSchema> = object({
   role: string().required(roleRequired),
 });
 
-const options = ['Developer', 'Designer', 'Product Manager'];
+const options = [
+  {id: '1', label: 'Developer'},
+  {id: '2', label: 'Designer'},
+  {id: '3', label: 'Product Manager'},
+];
 
 export const TextInputWithReactHookForm = () => {
   const {
@@ -70,7 +74,7 @@ export const TextInputWithReactHookForm = () => {
     defaultValues: {
       email: 'example@baz.com',
       password: 'foobarbaz',
-      role: 'Designer',
+      role: '',
     },
     resolver: useYupValidationResolver(validationSchema),
     mode: 'onTouched',
@@ -93,21 +97,21 @@ export const TextInputWithReactHookForm = () => {
     passwordRef.current = ref;
   };
   return (
-    <form onSubmit={onSubmit} action=".">
+    <form onSubmit={onSubmit} action="." noValidate={true}>
       <Flex gap="xs" flexDirection="column" alignItems="flex-start">
         <FormField
           orientation="vertical"
           isRequired={true}
           error={!!errors.role ? 'error' : undefined}
         >
-          <Select items={options}>
+          <Select items={options} getTextValue={item => item.label}>
             <FormField.Label>What is your role?</FormField.Label>
             <FormField.Input as={Select.Input} {...register('role')} width="280px" />
             <Select.Popper>
               <Select.Card>
                 <Select.List maxHeight={200}>
                   {item => {
-                    return <Select.Item>{item}</Select.Item>;
+                    return <Select.Item>{item.label}</Select.Item>;
                   }}
                 </Select.List>
               </Select.Card>

diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "10.3.36",
+  "version": "10.3.38",
   "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",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^10.3.36",
-    "@workday/canvas-kit-styling": "^10.3.36",
+    "@workday/canvas-kit-react": "^10.3.38",
+    "@workday/canvas-kit-styling": "^10.3.38",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.3.1",
     "@workday/design-assets-types": "^0.2.8"

diff --git a/modules/react-fonts/package.json b/modules/react-fonts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react-fonts",
-  "version": "10.3.36",
+  "version": "10.3.38",
   "description": "Fonts for canvas-kit-react",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

diff --git a/modules/react/combobox/lib/hooks/useComboboxInput.ts b/modules/react/combobox/lib/hooks/useComboboxInput.ts
@@ -70,7 +70,7 @@ export const useComboboxInput = composeHooks(
       },
       value: model.state.value,
       role: 'combobox',
-      'aria-haspopup': true,
+      'aria-haspopup': 'true' as React.AriaAttributes['aria-haspopup'],
       'aria-expanded': model.state.visibility === 'visible',
       'aria-autocomplete': 'list',
       'aria-controls': `${model.state.id}-list`,

diff --git a/modules/react/package.json b/modules/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.3.36",
+  "version": "10.3.38",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^10.3.36",
-    "@workday/canvas-kit-styling": "^10.3.36",
+    "@workday/canvas-kit-popup-stack": "^10.3.38",
+    "@workday/canvas-kit-styling": "^10.3.38",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.3.1",
     "@workday/design-assets-types": "^0.2.8",

diff --git a/modules/react/select/lib/Select.tsx b/modules/react/select/lib/Select.tsx
@@ -14,6 +14,7 @@ import {
   ExtractProps,
   createContainer,
   Themeable,
+  useLocalRef,
 } from '@workday/canvas-kit-react/common';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -71,14 +72,32 @@ export const SelectInput = createSubcomponent(TextInput)({
       ref,
       onChange,
       onInput,
-      onFocus,
       value,
       name,
       ...elemProps
     },
     Element,
     model
   ) => {
+    const {localRef, elementRef} = useLocalRef(ref);
+
+    // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
+    // the visible input
+    React.useImperativeHandle(
+      elementRef,
+      () => {
+        localRef.current!.focus = (options?: FocusOptions) => {
+          textInputProps.ref.current!.focus(options);
+        };
+        localRef.current!.blur = () => {
+          textInputProps.ref.current!.blur();
+        };
+
+        return localRef.current!;
+      },
+      [textInputProps.ref, localRef]
+    );
+
     return (
       <InputGroup data-width="ck-formfield-width">
         {inputStartIcon && model.state.selectedIds.length > 0 && (
@@ -95,9 +114,8 @@ export const SelectInput = createSubcomponent(TextInput)({
           onChange={onChange}
           onInput={onInput}
           value={value}
-          onFocus={onFocus}
           name={name}
-          ref={ref}
+          ref={elementRef}
           {...hiddenSelectInputStencil()}
         />
         {/* Visual input */}

diff --git a/modules/react/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts
@@ -155,6 +155,7 @@ export const useSelectInput = composeHooks(
               : '',
         },
         ref: elementRef,
+        'aria-haspopup': 'menu',
       } as const;
     }
   ),

diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-styling-transform",
-  "version": "10.3.36",
+  "version": "10.3.38",
   "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -34,7 +34,7 @@
   ],
   "dependencies": {
     "@emotion/serialize": "^1.0.2",
-    "@workday/canvas-kit-styling": "^10.3.36",
+    "@workday/canvas-kit-styling": "^10.3.38",
     "@workday/canvas-tokens-web": "^1.3.1",
     "stylis": "4.0.13",
     "typescript": "4.2"

diff --git a/modules/styling/package.json b/modules/styling/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-styling",
-  "version": "10.3.36",
+  "version": "10.3.38",
   "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -53,7 +53,7 @@
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.0.2",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^10.3.36",
+    "@workday/canvas-kit-react": "^10.3.38",
     "@workday/canvas-tokens-web": "^1.3.1",
     "typescript": "4.2"
   }

diff --git a/modules/styling/stories/MergingStyles.stories.mdx b/modules/styling/stories/MergingStyles.stories.mdx
@@ -3,7 +3,7 @@ import {SymbolDoc} from '@workday/canvas-kit-docs';
 import {CreateStencil} from './examples/CreateStencil';
 import {StylingOverrides} from './examples/StylingOverrides';
 
-<Meta title="Styling/Mergiing Styles" />
+<Meta title="Styling/Merging Styles" />
 
 ## Style Merging
-Original file line number
+Diff line change
@@ Expand Up / @@ -155,6 +155,7 @@ export const useSelectInput = composeHooks( @@
                   : '',
             },
             ref: elementRef,
+            'aria-haspopup': 'menu',
           } as const;
         }
       ),
@@ Expand Down @@