chore: Merge master into prerelease/minor (#3023)

alanbsmith · mannycarrera4 · manuel.carrera · web-flow · commit 8dd27b6fa87a · 2024-11-04T09:30:45.000-07:00
Co-authored-by: @mannycarrera4 <mannycarrera4@users.noreply.github.com> Co-authored-by: manuel.carrera <manuel.carrera@workday.com> Co-authored-by: @NicholasBoll <nicholas.boll@gmail.com> Co-authored-by: @mannycarrera4 <mannycarrera4@users.noreply.github.com> Co-authored-by: @NicholasBoll <nicholas.boll@gmail.com>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [v12.0.7](https://github.com/Workday/canvas-kit/releases/tag/v12.0.7) (2024-11-04)
+
+### Components
+
+- fix: Update Select to open with spacebar ([#3006](https://github.com/Workday/canvas-kit/pull/3006)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@NicholasBoll](https://github.com/NicholasBoll))
+- fix: Add flex gap to overflow list calculations ([#3021](https://github.com/Workday/canvas-kit/pull/3021)) ([@NicholasBoll](https://github.com/NicholasBoll))
+
+
+## [v11.1.20](https://github.com/Workday/canvas-kit/releases/tag/v11.1.20) (2024-11-04)
+
+### Components
+
+- fix: Add flex gap to overflow list calculations ([#3021](https://github.com/Workday/canvas-kit/pull/3021)) ([@NicholasBoll](https://github.com/NicholasBoll))
+
+
+## [v11.1.19](https://github.com/Workday/canvas-kit/releases/tag/v11.1.19) (2024-10-28)
+
+### Components
+
+- fix: Update Select to open with spacebar ([#3006](https://github.com/Workday/canvas-kit/pull/3006)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@NicholasBoll](https://github.com/NicholasBoll))
 ## [v12.0.6](https://github.com/Workday/canvas-kit/releases/tag/v12.0.6) (2024-10-24)
 
 ### Components
diff --git a/cypress/component/Select.spec.tsx b/cypress/component/Select.spec.tsx
@@ -305,6 +305,16 @@ describe('Select', () => {
         );
       });
     });
+    context('when spacebar is typed and no value exists', () => {
+      beforeEach(() => {
+        cy.findByRole('combobox').focus();
+        cy.focused().realType(' ');
+      });
+      it('should open the menu', () => {
+        // should open the menu
+        cy.findByRole('listbox').should('exist');
+      });
+    });
   });
 
   context('given the "Disabled Options" story with a disabled option', () => {
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "modules/**"
   ],
-  "version": "12.0.6",
+  "version": "12.0.7",
   "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.6",
+  "version": "12.0.7",
   "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.6",
+  "version": "12.0.7",
   "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.6",
+  "version": "12.0.7",
   "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.6",
-    "@workday/canvas-kit-preview-react": "^12.0.6",
-    "@workday/canvas-kit-react": "^12.0.6",
-    "@workday/canvas-kit-styling": "^12.0.6",
+    "@workday/canvas-kit-labs-react": "^12.0.7",
+    "@workday/canvas-kit-preview-react": "^12.0.7",
+    "@workday/canvas-kit-react": "^12.0.7",
+    "@workday/canvas-kit-styling": "^12.0.7",
     "@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.6",
+  "version": "12.0.7",
   "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.6",
+  "version": "12.0.7",
   "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,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^12.0.6",
-    "@workday/canvas-kit-styling": "^12.0.6",
+    "@workday/canvas-kit-react": "^12.0.7",
+    "@workday/canvas-kit-styling": "^12.0.7",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8",
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.6",
+  "version": "12.0.7",
   "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.6",
+  "version": "12.0.7",
   "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": "12.0.6",
+  "version": "12.0.7",
   "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": "^12.0.6",
-    "@workday/canvas-kit-styling": "^12.0.6",
+    "@workday/canvas-kit-react": "^12.0.7",
+    "@workday/canvas-kit-styling": "^12.0.7",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.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": "12.0.6",
+  "version": "12.0.7",
   "description": "Fonts for canvas-kit-react",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
diff --git a/modules/react/collection/lib/useOverflowListModel.tsx b/modules/react/collection/lib/useOverflowListModel.tsx
@@ -6,10 +6,11 @@ import {Item} from './useBaseListModel';
 
 export function getHiddenIds(
   containerWidth: number,
+  containerGap: number,
   overflowTargetWidth: number,
   itemWidthCache: Record<string, number>,
   selectedIds: string[] | 'all',
-  items?: Item<any>[]
+  items: Item<any>[]
 ): string[] {
   /** Allows us to prioritize showing the selected item */
   let selectedKey: undefined | string;
@@ -18,17 +19,22 @@ export function getHiddenIds(
   /** Tally ids that won't fit inside the container. These will be used by components to hide
    * elements that won't fit in the container */
   const hiddenIds: string[] = [];
+  /** Track if gap should be calculated since gap doesn't apply to the width of the first item, only
+   * consecutive items */
+  let shouldAddGap = false;
+
   if (selectedIds !== 'all' && selectedIds.length) {
-    if (items?.length) {
+    if (items.length) {
       // If selectedIds[0] is not in items, use the first id from items
       selectedKey = items.find(item => item.id === selectedIds[0]) ? selectedIds[0] : items[0].id;
-    } else {
-      selectedKey = selectedIds[0];
     }
   }
 
   if (
-    Object.keys(itemWidthCache).reduce((sum, key) => sum + itemWidthCache[key], 0) <= containerWidth
+    Object.keys(itemWidthCache).reduce(
+      (sum, key, index) => sum + itemWidthCache[key] + (index > 0 ? containerGap : 0),
+      0
+    ) <= containerWidth
   ) {
     // All items fit, return empty array
     return [];
@@ -39,14 +45,16 @@ export function getHiddenIds(
     } else {
       // at least the selected item and overflow target fit. Update our itemWidth with the sum
       itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
+      shouldAddGap = true;
     }
   } else {
     itemWidth += overflowTargetWidth;
   }
 
   for (const key in itemWidthCache) {
     if (key !== selectedKey) {
-      itemWidth += itemWidthCache[key];
+      itemWidth += itemWidthCache[key] + (shouldAddGap ? containerGap : 0);
+      shouldAddGap = true;
       if (itemWidth > containerWidth) {
         hiddenIds.push(key);
       }
@@ -75,6 +83,7 @@ export const useOverflowListModel = createModelHook({
   const [hiddenIds, setHiddenIds] = React.useState(config.initialHiddenIds);
   const [itemWidthCache, setItemWidthCache] = React.useState<Record<string, number>>({});
   const [containerWidth, setContainerWidth] = React.useState(0);
+  const [containerGap, setContainerGap] = React.useState(0);
   const containerWidthRef = React.useRef(0);
   const itemWidthCacheRef = React.useRef(itemWidthCache);
   const [overflowTargetWidth, setOverflowTargetWidth] = React.useState(0);
@@ -96,6 +105,7 @@ export const useOverflowListModel = createModelHook({
     hiddenIds: internalHiddenIds,
     itemWidthCache,
     containerWidth,
+    containerGap,
     overflowTargetWidth,
   };
 
@@ -105,6 +115,7 @@ export const useOverflowListModel = createModelHook({
       const {selectedIds} = model.selection.select(data.id, state);
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         selectedIds,
@@ -120,6 +131,21 @@ export const useOverflowListModel = createModelHook({
 
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
+        overflowTargetWidthRef.current,
+        itemWidthCacheRef.current,
+        state.selectedIds,
+        config.items
+      );
+
+      setHiddenIds(ids);
+    },
+    setContainerGap(data: {size: number}) {
+      setContainerGap(data.size);
+
+      const ids = getHiddenIds(
+        containerWidthRef.current,
+        data.size,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         state.selectedIds,
@@ -142,6 +168,7 @@ export const useOverflowListModel = createModelHook({
 
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         state.selectedIds,
@@ -158,6 +185,7 @@ export const useOverflowListModel = createModelHook({
 
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         state.selectedIds !== 'all'
diff --git a/modules/react/collection/spec/useOverflowModel.spec.tsx b/modules/react/collection/spec/useOverflowModel.spec.tsx
@@ -4,41 +4,89 @@ describe('useOverflowModel', () => {
   describe('getHiddenIds', () => {
     const itemWidthCache = {
       first: 100,
-      second: 100,
-      third: 100,
-      fourth: 100,
+      second: 150,
+      third: 200,
+      fourth: 250,
     };
     const overflowTargetWidth = 100;
 
-    const io = [
+    [
       {
         containerWidth: 100,
+        gap: 0,
         selected: 'first',
         hiddenIds: ['first', 'second', 'third', 'fourth'],
       },
       {
         containerWidth: 199,
+        gap: 0,
         selected: 'first',
         hiddenIds: ['first', 'second', 'third', 'fourth'],
       },
       {
         containerWidth: 200,
+        gap: 0,
         selected: 'first',
         hiddenIds: ['second', 'third', 'fourth'],
       },
-      {containerWidth: 400, selected: 'first', hiddenIds: []},
-      {containerWidth: 399, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 700, gap: 0, selected: 'first', hiddenIds: []},
+      {containerWidth: 350, gap: 0, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 549, gap: 0, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 550, gap: 0, selected: 'first', hiddenIds: ['fourth']},
+      {
+        containerWidth: 250,
+        gap: 0,
+        selected: 'second',
+        hiddenIds: ['first', 'third', 'fourth'],
+      },
+      // gap
+      {
+        containerWidth: 100,
+        gap: 10,
+        selected: 'first',
+        hiddenIds: ['first', 'second', 'third', 'fourth'],
+      },
+      {
+        containerWidth: 199,
+        gap: 10,
+        selected: 'first',
+        hiddenIds: ['first', 'second', 'third', 'fourth'],
+      },
       {
         containerWidth: 200,
+        gap: 10,
+        selected: 'first',
+        hiddenIds: ['second', 'third', 'fourth'],
+      },
+      {containerWidth: 729, gap: 10, selected: 'first', hiddenIds: ['fourth']},
+      {containerWidth: 730, gap: 10, selected: 'first', hiddenIds: []},
+      {containerWidth: 360, gap: 10, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 559, gap: 10, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 570, gap: 10, selected: 'first', hiddenIds: ['fourth']},
+      {
+        containerWidth: 250,
+        gap: 10,
         selected: 'second',
         hiddenIds: ['first', 'third', 'fourth'],
       },
-    ].forEach(({containerWidth, hiddenIds, selected}) => {
+    ].forEach(({containerWidth, hiddenIds, gap, selected}) => {
       it(`when containerWidth is ${containerWidth} and selected is '${selected}' should contain hiddenIds [${hiddenIds.join(
         ', '
       )}] `, () => {
         expect(
-          getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, [selected])
+          getHiddenIds(
+            containerWidth,
+            gap,
+            overflowTargetWidth,
+            itemWidthCache,
+            [selected],
+            [
+              {id: 'first', value: 'first', index: 0, textValue: 'first'},
+              {id: 'second', value: 'second', index: 1, textValue: 'second'},
+              {id: 'third', value: 'third', index: 2, textValue: 'third'},
+              {id: 'fourth', value: 'fourth', index: 3, textValue: 'fourth'},
+            ]
+          )
         ).toEqual(hiddenIds);
       });
     });
diff --git a/modules/react/package.json b/modules/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "12.0.6",
+  "version": "12.0.7",
   "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": "^12.0.6",
-    "@workday/canvas-kit-styling": "^12.0.6",
+    "@workday/canvas-kit-popup-stack": "^12.0.7",
+    "@workday/canvas-kit-styling": "^12.0.7",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8",
diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json
diff --git a/modules/styling/package.json b/modules/styling/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@workday/canvas-kit-css",`
`3`		`- "version": "12.0.6",`
	`3`	`+ "version": "12.0.7",`
`4`	`4`	`"description": "The parent module that contains all Workday Canvas Kit CSS components",`
`5`	`5`	`"author": "Workday, Inc. (https://www.workday.com)",`
`6`	`6`	`"license": "Apache-2.0",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@workday/canvas-kit-labs-css",`
`3`		`- "version": "12.0.6",`
	`3`	`+ "version": "12.0.7",`
`4`	`4`	`"description": "The parent module that contains all Workday Canvas Kit Labs CSS components",`
`5`	`5`	`"author": "Workday, Inc. (https://www.workday.com)",`
`6`	`6`	`"license": "Apache-2.0",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@workday/canvas-kit-popup-stack",`
`3`		`- "version": "12.0.6",`
	`3`	`+ "version": "12.0.7",`
`4`	`4`	`"description": "Stack for managing popup UIs to coordinate global concerns like escape key handling and rendering order",`
`5`	`5`	`"author": "Workday, Inc. (https://www.workday.com)",`
`6`	`6`	`"license": "Apache-2.0",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@workday/canvas-kit-preview-css",`
`3`		`- "version": "12.0.6",`
	`3`	`+ "version": "12.0.7",`
`4`	`4`	`"description": "The parent module that contains all Workday Canvas Kit Preview CSS components",`
`5`	`5`	`"author": "Workday, Inc. (https://www.workday.com)",`
`6`	`6`	`"license": "Apache-2.0",`