Merge branch 'master' into mc-fix-fm-action

Workday · Nov 8, 2024 · aa3d44d · aa3d44d
2 parents 0442ba4 + 101b613
commit aa3d44d
Show file tree

Hide file tree

Showing 50 changed files with 752 additions and 298 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -20,7 +20,7 @@ Optional breaking changes message. If your PR includes breaking changes. It is e
 
 ## Checklist
 
-- [ ] MDX documentation adheres to Canvas Kit's [Documentation Guidelines](https://workday.github.io/canvas-kit/?path=/docs/guides-documentation-guidelines--page)
+- [ ] MDX documentation adheres to Canvas Kit's [Documentation Guidelines](https://workday.github.io/canvas-kit/?path=/docs/guides-documentation-guidelines--docs)
 - [ ] Label `ready for review` has been added to PR
 
 ## For the Reviewer

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [v12.1.1](https://github.com/Workday/canvas-kit/releases/tag/v12.1.1) (2024-11-08)
+
+### Dependencies
+
+- chore: SNYK Security upgrade chroma-js from 2.1.1 to 2.2.0 ([#3043](https://github.com/Workday/canvas-kit/pull/3043)) ([@mannycarrera4](https://github.com/mannycarrera4), [@snyk-bot](https://github.com/snyk-bot), manuel.carrera)
+
+
+## [v12.1.0](https://github.com/Workday/canvas-kit/releases/tag/v12.1.0) (2024-11-07)
+
+
+
+
 ## [v12.0.10](https://github.com/Workday/canvas-kit/releases/tag/v12.0.10) (2024-11-06)
 
 ### Components

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,4 +1,4 @@
 # Contributing to Canvas
 
 You may read our contribution guidelines
-[here](https://workday.github.io/canvas-kit/?path=/docs/guides-contributing--page).
+[here](https://workday.github.io/canvas-kit/?path=/docs/guides-contributing--docs).
diff --git a/cypress/component/Tabs.spec.tsx b/cypress/component/Tabs.spec.tsx
@@ -75,7 +75,7 @@ describe('Tabs', () => {
 
         context('when the tab key is pressed', () => {
           beforeEach(() => {
-            cy.tab();
+            cy.realPress('Tab');
           });
 
           it('should move focus to the tabpanel', () => {
@@ -148,7 +148,7 @@ describe('Tabs', () => {
 
           context('when the tab key is pressed', () => {
             beforeEach(() => {
-              cy.tab();
+              cy.realPress('Tab');
             });
 
             it('should focus on the tab panel of the first tab', () => {
@@ -158,7 +158,9 @@ describe('Tabs', () => {
             // verify the original intent is no longer a tab stop
             context('when shift + tab keys are pressed', () => {
               beforeEach(() => {
-                cy.tab({shift: true});
+                // wait for tabindex to reset
+                cy.findByRole('tab', {name: 'First Tab'}).should('not.have.attr', 'tabindex', '-1');
+                cy.realPress(['Shift', 'Tab']);
               });
 
               it('should not have tabindex=-1 on the first tab', () => {
@@ -248,7 +250,7 @@ describe('Tabs', () => {
 
     context('when the first tab is active and focused', () => {
       beforeEach(() => {
-        cy.findByRole('tab', {name: 'First Tab'}).click().focus();
+        cy.findByRole('tab', {name: 'First Tab'}).click();
       });
 
       context('when the right arrow key is pressed', () => {
@@ -416,7 +418,7 @@ describe('Tabs', () => {
 
       context('when the tab key is pressed', () => {
         beforeEach(() => {
-          cy.tab();
+          cy.realPress('Tab');
         });
 
         it('should move focus to the tabpanel', () => {
@@ -547,12 +549,15 @@ describe('Tabs', () => {
 
       context('when the "First Tab" is focused', () => {
         beforeEach(() => {
-          cy.findByRole('tab', {name: 'First Tab'}).focus().tab();
+          cy.findByRole('tab', {name: 'First Tab'}).focus();
         });
 
         context('when the Tab key is pressed', () => {
+          beforeEach(() => {
+            cy.realPress('Tab');
+          });
+
           it('should focus on the "More" button', () => {
-            cy.findByRole('button', {name: 'More'}).focus();
             cy.findByRole('button', {name: 'More'}).should('have.focus');
           });
         });

diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "modules/**"
   ],
-  "version": "12.0.10",
+  "version": "12.1.1",
   "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": "12.0.10",
+  "version": "12.1.1",
   "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": "12.0.10",
+  "version": "12.1.1",
   "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": "12.0.10",
+  "version": "12.1.1",
   "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": "^12.0.10",
-    "@workday/canvas-kit-preview-react": "^12.0.10",
-    "@workday/canvas-kit-react": "^12.0.10",
-    "@workday/canvas-kit-styling": "^12.0.10",
+    "@workday/canvas-kit-labs-react": "^12.1.1",
+    "@workday/canvas-kit-preview-react": "^12.1.1",
+    "@workday/canvas-kit-react": "^12.1.1",
+    "@workday/canvas-kit-styling": "^12.1.1",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "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": "12.0.10",
+  "version": "12.1.1",
   "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": "12.0.10",
+  "version": "12.1.1",
   "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,12 +46,12 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^12.0.10",
-    "@workday/canvas-kit-styling": "^12.0.10",
+    "@workday/canvas-kit-react": "^12.1.1",
+    "@workday/canvas-kit-styling": "^12.1.1",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8",
-    "chroma-js": "^2.1.0",
+    "chroma-js": "^2.2.0",
     "lodash.flatten": "^4.4.0",
     "rtl-css-js": "^1.14.1"
   },

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": "12.0.10",
+  "version": "12.1.1",
   "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": "12.0.10",
+  "version": "12.1.1",
   "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/multi-select/lib/MultiSelectInput.tsx b/modules/preview-react/multi-select/lib/MultiSelectInput.tsx
@@ -11,16 +11,11 @@ import {
 import {createStencil, CSProps, handleCsProp} from '@workday/canvas-kit-styling';
 import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {
-  ListBox,
-  useListItemRegister,
-  useListItemRovingFocus,
-  useListModel,
-} from '@workday/canvas-kit-react/collection';
 import {useComboboxInput, useComboboxInputConstrained} from '@workday/canvas-kit-react/combobox';
-import {Pill} from '@workday/canvas-kit-preview-react/pill';
 
 import {useMultiSelectModel} from './useMultiSelectModel';
+import {MultiSelectedItemProps} from './MultiSelectedItem';
+import {MultiSelectedList} from './MultiSelectedList';
 
 export const multiSelectStencil = createStencil({
   base: {
@@ -121,61 +116,28 @@ export const useMultiSelectInput = composeHooks(
   useComboboxInput
 );
 
-const removeItem = <T extends unknown>(id: string, model: ReturnType<typeof useListModel>) => {
-  const index = model.state.items.findIndex(item => item.id === model.state.cursorId);
-  const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
-  const nextId = model.state.items[nextIndex].id;
-  if (model.state.cursorId === id) {
-    // We're removing the currently focused item. Focus next item
-    model.events.goTo({id: nextId});
-  }
-};
-
-const useMultiSelectedItem = composeHooks(
-  createElemPropsHook(useListModel)((model, ref, elemProps) => {
-    return {
-      onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
-        const id = event.currentTarget.dataset.id || '';
-        if (event.key === 'Backspace' || event.key === 'Delete') {
-          model.events.select({id});
-          removeItem(id, model);
-        }
-      },
-      onClick(event: React.MouseEvent<HTMLElement>) {
-        const id = event.currentTarget.dataset.id || '';
-        model.events.select({id});
-      },
-    };
-  }),
-  useListItemRovingFocus,
-  useListItemRegister
-);
-
-const MultiSelectedItem = createSubcomponent('span')({
-  modelHook: useListModel,
-  elemPropsHook: useMultiSelectedItem,
-})(({children, ref, ...elemProps}, Element) => {
-  return (
-    <Pill as={Element} variant="removable">
-      {children}
-      <Pill.IconButton ref={ref} {...(elemProps as any)} />
-    </Pill>
-  );
-});
-
 export interface MultiSelectInputProps
   extends CSProps,
     Pick<
       React.InputHTMLAttributes<HTMLInputElement>,
       'disabled' | 'className' | 'style' | 'aria-labelledby'
-    > {}
+    >,
+    Pick<MultiSelectedItemProps, 'removeLabel'> {}
 
 export const MultiSelectInput = createSubcomponent(TextInput)({
   modelHook: useMultiSelectModel,
   elemPropsHook: useMultiSelectInput,
 })<MultiSelectInputProps>(
   (
-    {className, cs, style, 'aria-labelledby': ariaLabelledBy, formInputProps, ...elemProps},
+    {
+      className,
+      cs,
+      style,
+      'aria-labelledby': ariaLabelledBy,
+      removeLabel,
+      formInputProps,
+      ...elemProps
+    },
     Element,
     model
   ) => {
@@ -194,20 +156,7 @@ export const MultiSelectInput = createSubcomponent(TextInput)({
             <SystemIcon icon={caretDownSmallIcon} />
           </InputGroup.InnerEnd>
         </InputGroup>
-        {model.selected.state.items.length ? (
-          <>
-            <div data-part="separator" />
-            <ListBox
-              model={model.selected}
-              as="div"
-              role="listbox"
-              aria-orientation="horizontal"
-              aria-labelledby={ariaLabelledBy}
-            >
-              {item => <MultiSelectedItem>{item.textValue}</MultiSelectedItem>}
-            </ListBox>
-          </>
-        ) : null}
+        <MultiSelectedList removeLabel={removeLabel} />
       </div>
     );
   }
@@ -218,7 +167,16 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
   elemPropsHook: useMultiSelectInput,
 })<MultiSelectInputProps>(
   (
-    {className, cs, style, 'aria-labelledby': ariaLabelledBy, formInputProps, ref, ...elemProps},
+    {
+      className,
+      cs,
+      style,
+      'aria-labelledby': ariaLabelledBy,
+      removeLabel,
+      formInputProps,
+      ref,
+      ...elemProps
+    },
     Element,
     model
   ) => {
@@ -228,34 +186,25 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
           <InputGroup.InnerStart pointerEvents="none" width={system.space.x8}>
             <SystemIcon icon={searchIcon} size={system.space.x4} />
           </InputGroup.InnerStart>
-          <InputGroup.Input data-part="form-input" {...formInputProps} />
+          <InputGroup.Input
+            data-part="form-input"
+            placeholder={null as unknown as string} // do not use a placeholder for this input
+            {...formInputProps}
+          />
           <InputGroup.Input
             data-part="user-input"
             as={Element}
             aria-labelledby={ariaLabelledBy}
             {...elemProps}
           />
-          <InputGroup.InnerEnd>
+          <InputGroup.InnerEnd width={system.space.x4}>
             <InputGroup.ClearButton />
           </InputGroup.InnerEnd>
           <InputGroup.InnerEnd pointerEvents="none">
             <SystemIcon icon={caretDownSmallIcon} />
           </InputGroup.InnerEnd>
         </InputGroup>
-        {model.selected.state.items.length ? (
-          <>
-            <div data-part="separator" />
-            <ListBox
-              model={model.selected}
-              as="div"
-              role="listbox"
-              aria-orientation="horizontal"
-              aria-labelledby={ariaLabelledBy}
-            >
-              {item => <MultiSelectedItem>{item.textValue}</MultiSelectedItem>}
-            </ListBox>
-          </>
-        ) : null}
+        <MultiSelectedList removeLabel={removeLabel} />
       </div>
     );
   }