Merge branch 'master' into snyk-fix-2a9fbe410a5bbe665acdd61f9d15066e

.github/workflows/forward-merge.yml

@@ -150,7 +150,7 @@ jobs:
         run: npx http-server docs -p 9001 & npx wait-on http://localhost:9001
 
       - name: Integration tests
-        run: yarn cypress run --record --parallel --env skip_storybook_test=true # skip the Storybook test during forward merges
+        run: yarn cypress run --component --record --parallel --env skip_storybook_test=true # skip the Storybook test during forward merges
         env:
           # Github Actions doesn't support encryption on forks
           # If these keys become compromised, we will rotate and disable these features

CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [v12.0.9](https://github.com/Workday/canvas-kit/releases/tag/v12.0.9) (2024-11-04)
+
+### Components
+
+- fix: Add gap to overflow calculations ([#3029](https://github.com/Workday/canvas-kit/pull/3029)) ([@NicholasBoll](https://github.com/NicholasBoll))
+
+
+## [v11.1.21](https://github.com/Workday/canvas-kit/releases/tag/v11.1.21) (2024-11-04)
+
+### Components
+
+- fix: Add gap to overflow calculations ([#3029](https://github.com/Workday/canvas-kit/pull/3029)) ([@NicholasBoll](https://github.com/NicholasBoll))
+## [v12.0.8](https://github.com/Workday/canvas-kit/releases/tag/v12.0.8) (2024-11-04)
+
+### Infrastructure
+
+- ci: Updated forward merge yml ([#3027](https://github.com/Workday/canvas-kit/pull/3027)) ([@josh-bagwell](https://github.com/josh-bagwell))
+
+
+## [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

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "modules/**"
   ],
-  "version": "12.0.6",
+  "version": "12.0.9",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

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.9",
   "description": "A collection of codemods for use on Workday Canvas Kit packages.",
   "main": "dist/es6/index.js",
   "sideEffects": false,

modules/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "The parent module that contains all Workday Canvas Kit CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

modules/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "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.9",
+    "@workday/canvas-kit-preview-react": "^12.0.9",
+    "@workday/canvas-kit-react": "^12.0.9",
+    "@workday/canvas-kit-styling": "^12.0.9",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "markdown-to-jsx": "^7.2.0",

modules/labs-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-css",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "The parent module that contains all Workday Canvas Kit Labs CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

modules/labs-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "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.9",
+    "@workday/canvas-kit-styling": "^12.0.9",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8",

modules/popup-stack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-popup-stack",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "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",

modules/preview-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-css",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "The parent module that contains all Workday Canvas Kit Preview CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

modules/preview-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "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.9",
+    "@workday/canvas-kit-styling": "^12.0.9",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8"

modules/react-fonts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react-fonts",
-  "version": "12.0.6",
+  "version": "12.0.9",
   "description": "Fonts for canvas-kit-react",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

modules/react/collection/lib/useOverflowListMeasure.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 
-import {createElemPropsHook, useForkRef, useResizeObserver} from '@workday/canvas-kit-react/common';
+import {
+  createElemPropsHook,
+  useMountLayout,
+  useResizeObserver,
+  useLocalRef,
+} from '@workday/canvas-kit-react/common';
 
 import {useOverflowListModel} from './useOverflowListModel';
 
@@ -9,12 +14,21 @@ import {useOverflowListModel} from './useOverflowListModel';
  * overflow detection.
  */
 export const useOverflowListMeasure = createElemPropsHook(useOverflowListModel)((model, ref) => {
-  const localRef = React.useRef(null);
-  const {ref: resizeRef} = useResizeObserver({
+  const {elementRef, localRef} = useLocalRef(ref as React.Ref<HTMLElement>);
+  const gapProperty = model.state.orientation === 'horizontal' ? 'columnGap' : 'rowGap';
+
+  useResizeObserver({
     ref: localRef,
     onResize: model.events.setContainerWidth,
   });
-  const elementRef = useForkRef(ref, resizeRef);
+  useMountLayout(() => {
+    if (localRef.current) {
+      const styles = getComputedStyle(localRef.current);
+      model.events.setContainerGap({
+        size: styles.gap === 'normal' ? 0 : Number(styles[gapProperty].replace('px', '')),
+      });
+    }
+  });
 
   return {
     ref: elementRef,

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'