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

Co-authored-by: @mannycarrera4 <[email protected]> Co-authored-by: manuel.carrera <[email protected]> Co-authored-by: @NicholasBoll <[email protected]> Co-authored-by: @mannycarrera4 <[email protected]> Co-authored-by: @NicholasBoll <[email protected]>
Workday · Aug 27, 2024 · 0362d83 · 0362d83
2 parents cf62835 + 12e246f
commit 0362d83
Show file tree

Hide file tree

Showing 21 changed files with 103 additions and 63 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [v11.1.6](https://github.com/Workday/canvas-kit/releases/tag/v11.1.6) (2024-08-27)
+
+### Components
+
+- fix: Make overflow items inert ([#2886](https://github.com/Workday/canvas-kit/pull/2886)) ([@NicholasBoll](https://github.com/NicholasBoll), manuel.carrera)
+- fix(select): Forward ref to Select input ([#2892](https://github.com/Workday/canvas-kit/pull/2892)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+
+### Infrastructure
+
+- fix: Enable styling compat mode to ensure proper style merging ([#2890](https://github.com/Workday/canvas-kit/pull/2890)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+  We're seeing style merging issues when using createStyles or createStencil. It only happens when every style override of the element uses these utilities and @emotion/react or @emotion/styled is not used on the same element. These utilities rely on module execution order and we're having a few reports where modules are possibly executing out of order. In order to allow everyone to use createStyles and createStencil without worrying about style merge issues, we're going to enable compat mode all the time. We'll look into possible out-of-order execution issues in the future and plan to re-enable full static mode (for better performance) once we know why this is happening and have a proper workaround.
+
+  For more information, please read our [discussion](https://github.com/Workday/canvas-kit/discussions/2893)
+
+
+## [v10.3.58](https://github.com/Workday/canvas-kit/releases/tag/v10.3.58) (2024-08-27)
+
+### Components
+
+- fix(select): Forward ref to Select input ([#2892](https://github.com/Workday/canvas-kit/pull/2892)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+
+
+## [v10.3.57](https://github.com/Workday/canvas-kit/releases/tag/v10.3.57) (2024-08-27)
+
+### Components
+
+- fix: Make overflow items inert ([#2886](https://github.com/Workday/canvas-kit/pull/2886)) ([@NicholasBoll](https://github.com/NicholasBoll), manuel.carrera)
+
+
+## [v10.3.56](https://github.com/Workday/canvas-kit/releases/tag/v10.3.56) (2024-08-27)
+
+### Infrastructure
+
+- fix: Enable styling compat mode to ensure proper style merging ([#2890](https://github.com/Workday/canvas-kit/pull/2890)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+  We're seeing style merging issues when using createStyles or createStencil. It only happens when every style override of the element uses these utilities and @emotion/react or @emotion/styled is not used on the same element. These utilities rely on module execution order and we're having a few reports where modules are possibly executing out of order. In order to allow everyone to use createStyles and createStencil without worrying about style merge issues, we're going to enable compat mode all the time. We'll look into possible out-of-order execution issues in the future and plan to re-enable full static mode (for better performance) once we know why this is happening and have a proper workaround.
+
+  For more information, please read our [discussion](https://github.com/Workday/canvas-kit/discussions/2893)
 ## [v11.1.5](https://github.com/Workday/canvas-kit/releases/tag/v11.1.5) (2024-08-23)
 
 ### Components

diff --git a/cypress/integration/Select.spec.ts b/cypress/integration/Select.spec.ts
@@ -421,6 +421,23 @@ describe('Select', () => {
     });
   });
 
+  context.only(`given the "Ref Forwarding" story is rendered`, () => {
+    beforeEach(() => {
+      h.stories.load('Components/Inputs/Select', 'Ref Forwarding');
+    });
+
+    it('should not have any axe errors', () => {
+      cy.checkA11y();
+    });
+
+    context('the select input', () => {
+      it('should receive focus via ref forwarding when the button is clicked', () => {
+        cy.findByRole('button', {name: 'Focus Select'}).click();
+        cy.findByRole('combobox').should('have.focus');
+      });
+    });
+  });
+
   context(`given the "Complex" story is rendered`, () => {
     beforeEach(() => {
       h.stories.load('Components/Inputs/Select', 'Complex');

diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "modules/**"
   ],
-  "version": "11.1.5",
+  "version": "11.1.6",
   "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": "11.1.5",
+  "version": "11.1.6",
   "description": "A collection of codemods for use on Workday Canvas Kit packages.",
   "main": "dist/es6/index.js",
   "sideEffects": false,

diff --git a/modules/css/package.json b/modules/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "11.1.5",
+  "version": "11.1.6",
   "description": "The parent module that contains all Workday Canvas Kit CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

diff --git a/modules/docs/package.json b/modules/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.1.5",
+  "version": "11.1.6",
   "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": "^11.1.5",
-    "@workday/canvas-kit-preview-react": "^11.1.5",
-    "@workday/canvas-kit-react": "^11.1.5",
-    "@workday/canvas-kit-styling": "^11.1.5",
+    "@workday/canvas-kit-labs-react": "^11.1.6",
+    "@workday/canvas-kit-preview-react": "^11.1.6",
+    "@workday/canvas-kit-react": "^11.1.6",
+    "@workday/canvas-kit-styling": "^11.1.6",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "markdown-to-jsx": "^7.2.0",

diff --git a/modules/labs-css/package.json b/modules/labs-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-css",
-  "version": "11.1.5",
+  "version": "11.1.6",
   "description": "The parent module that contains all Workday Canvas Kit Labs CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

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": "11.1.5",
+  "version": "11.1.6",
   "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": "^11.1.5",
+    "@workday/canvas-kit-react": "^11.1.6",
     "@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": "11.1.5",
+  "version": "11.1.6",
   "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-css/package.json b/modules/preview-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-css",
-  "version": "11.1.5",
+  "version": "11.1.6",
   "description": "The parent module that contains all Workday Canvas Kit Preview CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

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": "11.1.5",
+  "version": "11.1.6",
   "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": "^11.1.5",
-    "@workday/canvas-kit-styling": "^11.1.5",
+    "@workday/canvas-kit-react": "^11.1.6",
+    "@workday/canvas-kit-styling": "^11.1.6",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "@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": "11.1.5",
+  "version": "11.1.6",
   "description": "Fonts for canvas-kit-react",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

diff --git a/modules/react/breadcrumbs/lib/BreadcrumbsItem.tsx b/modules/react/breadcrumbs/lib/BreadcrumbsItem.tsx
@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-  composeHooks,
-  createSubcomponent,
-  createElemPropsHook,
-  useIsRTL,
-} from '@workday/canvas-kit-react/common';
+import {composeHooks, createSubcomponent, useIsRTL} from '@workday/canvas-kit-react/common';
 import {
   useListItemRegister,
   useOverflowListItemMeasure,
@@ -33,27 +28,7 @@ export interface BreadcrumbsItemProps extends FlexProps {
   'data-id'?: string;
 }
 
-export const useBreadcrumbsItem = composeHooks(
-  useOverflowListItemMeasure,
-  createElemPropsHook(useBreadcrumbsModel)(
-    (
-      {state},
-      _,
-      elemProps: {
-        'data-id'?: string;
-        item?: {id: string};
-      } = {}
-    ) => {
-      const [localId] = React.useState(elemProps['data-id'] || elemProps.item?.id || '');
-
-      return {
-        inert: state.nonInteractiveIds.includes(localId) ? '' : undefined,
-        disabled: undefined,
-      };
-    }
-  ),
-  useListItemRegister
-);
+export const useBreadcrumbsItem = composeHooks(useOverflowListItemMeasure, useListItemRegister);
 
 export const BreadcrumbsItem = createSubcomponent('li')({
   displayName: 'Breadcrumbs.Item',

diff --git a/modules/react/collection/lib/useOverflowListItemMeasure.tsx b/modules/react/collection/lib/useOverflowListItemMeasure.tsx
@@ -46,6 +46,7 @@ export const useOverflowListItemMeasure = createElemPropsHook(useOverflowListMod
       ref: elementRef,
       'aria-hidden': hidden || undefined,
       style: hidden ? hiddenStyles : {},
+      inert: hidden ? '' : undefined,
     };
   }
 );
diff --git a/modules/react/layout/spec/mergeStyles.spec.tsx b/modules/react/layout/spec/mergeStyles.spec.tsx
@@ -41,8 +41,8 @@ describe('mergeStyles', () => {
 
     expect(screen.getByTestId('base')).toHaveStyle({padding: padding.styleAttribute});
   });
-
-  it('should allow the cs prop to override base styles', () => {
+  // Skipping this for now while we enable compat mode to run all the time
+  it.skip('should allow the cs prop to override base styles', () => {
     const overrideStyles = createStyles({
       padding: padding.createStyles,
     });

diff --git a/modules/react/package.json b/modules/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "11.1.5",
+  "version": "11.1.6",
   "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": "^11.1.5",
-    "@workday/canvas-kit-styling": "^11.1.5",
+    "@workday/canvas-kit-popup-stack": "^11.1.6",
+    "@workday/canvas-kit-styling": "^11.1.6",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8",

diff --git a/modules/react/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts
@@ -33,25 +33,27 @@ export const useSelectInput = composeHooks(
         model.state.targetRef as any as React.Ref<HTMLInputElement>
       );
 
-      const {localRef, elementRef} = useLocalRef(ref as React.Ref<HTMLInputElement>);
+      const {localRef: hiddenLocalRef, elementRef: hiddenElementRef} = useLocalRef(
+        ref as React.Ref<HTMLInputElement>
+      );
 
       // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
       // the visible input
       React.useImperativeHandle(
-        elementRef,
+        hiddenElementRef,
         () => {
-          if (localRef.current) {
-            localRef.current.focus = (options?: FocusOptions) => {
+          if (hiddenLocalRef.current) {
+            hiddenLocalRef.current.focus = (options?: FocusOptions) => {
               textInputRef.current!.focus(options);
             };
-            localRef.current.blur = () => {
+            hiddenLocalRef.current.blur = () => {
               textInputRef.current!.blur();
             };
           }
 
-          return localRef.current!;
+          return hiddenLocalRef.current!;
         },
-        [textInputRef, localRef]
+        [textInputRef, hiddenLocalRef]
       );
 
       // Remap the Popup model's targetRef to be the visible ref. `ref` and `model.state.targetRef` are already linked. We have to override that.
@@ -172,6 +174,7 @@ export const useSelectInput = composeHooks(
         },
         onChange: handleOnChange,
         autoComplete: 'off',
+        ref: hiddenElementRef,
         // When the hidden input is focused, we want to show the focus/hover states of the input that sits below it.
         onFocus() {
           textInputRef.current?.focus();

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": "11.1.5",
+  "version": "11.1.6",
   "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": "^11.1.5",
+    "@workday/canvas-kit-styling": "^11.1.6",
     "@workday/canvas-tokens-web": "^2.0.0",
     "stylis": "4.0.13",
     "typescript": "4.2"

diff --git a/modules/styling/lib/cs.ts b/modules/styling/lib/cs.ts
@@ -739,8 +739,13 @@ export function handleCsProp<
   const {cs, style, className, ...restProps} = elemProps;
   const instance = getInstance();
 
-  // We are going to track if any runtime styles are detected
-  let shouldRuntimeMergeStyles = false;
+  // We're seeing style merging issues when using createStyles or createStencil. It only happens when
+  // every style override of the element uses these utilities and @emotion/react or @emotion/styled is not used on the same element.
+  // These utilities rely on module execution order and we're having a few reports where modules are possibly executing out of order.
+  // In order to allow everyone to use createStyles and createStencil without worrying about style merge issues, we're going
+  // to enable compat mode all the time. We'll look into possible out-of-order execution issues in the future and plan to re-enable
+  // full static mode (for better performance) once we know why this is happening and have a proper workaround.
+  let shouldRuntimeMergeStyles = true;
 
   // The order is intentional. The `className` should go first, then the `cs` prop. If we don't do
   // runtime merging, this order doesn't actually matter because the browser doesn't care the order

diff --git a/modules/styling/package.json b/modules/styling/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-styling",
-  "version": "11.1.5",
+  "version": "11.1.6",
   "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": "^11.1.5",
+    "@workday/canvas-kit-react": "^11.1.6",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "typescript": "4.2"

diff --git a/modules/styling/spec/cs.spec.tsx b/modules/styling/spec/cs.spec.tsx
@@ -1222,7 +1222,9 @@ describe('handleCsProp', () => {
     expect(screen.getByTestId('base')).toHaveStyle({padding: padding.styleAttribute});
   });
 
-  it('should allow the cs prop to override base styles', () => {
+  // While we have compat mode enabled, we'll skip these tests. The class generated comes from emotion and
+  //we have no way of validating the correct class.
+  it.skip('should allow the cs prop to override base styles', () => {
     const overrideStyles = createStyles({
       padding: padding.createStyles,
     });