Merge branch 'main' into 4359-scroll-gradients

config/jest-config-ibm-cloud-cognitive/index.js

@@ -8,7 +8,14 @@
 'use strict';
 
 module.exports = {
-  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!**/*.stories.{js,jsx}'],
+  coverageReporters: ['json', 'html'],
+  collectCoverageFrom: [
+    'src/**/*.{js,jsx,ts,tsx}',
+    '!**/*.stories.{js,jsx}',
+    '!**/*.story.{js,jsx}',
+    '!**/*.docs-page.{js,jsx}',
+  ],
+  coveragePathIgnorePatterns: ['preview-components'],
   resolver: require.resolve('./setup/resolver.js'),
   moduleFileExtensions: ['tsx', 'ts', 'jsx', 'js', 'json', 'node'],
   moduleNameMapper: {

config/jest-config-ibm-cloud-cognitive/setup/matchers/toHaveNoACViolations.js

@@ -20,6 +20,7 @@ async function toHaveNoACViolations(node, label) {
       'html_skipnav_exists',
       'aria_content_in_landmark',
       'aria_child_tabbable',
+      'target_spacing_sufficient',
     ]);
     const ruleset = await aChecker.getRuleset('IBM_Accessibility');
     const customRuleset = JSON.parse(JSON.stringify(ruleset));

e2e/components/Datagrid/Datagrid-test.avt.e2e.js

@@ -40,12 +40,12 @@ test.describe('Datagrid @avt', () => {
     firstRow.click();
     await page.waitForTimeout(3000);
     const sidePanel = page.locator('[aria-label="Title"]');
-    await page.waitForTimeout(3000);
     await expect(sidePanel).toBeVisible();
     const button = sidePanel.getByText('View details');
     await expect(button).toBeFocused();
     await page.keyboard.press('Shift+Tab');
     await page.keyboard.press('Enter');
+    await page.waitForTimeout(3000);
     await expect(firstRow).toBeFocused();
     await expect(page).toHaveNoACViolations(
       'Datagrid @avt-open-and-dismiss-sidepanel-onRowClick'

packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap

@@ -2840,6 +2840,7 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--side-panel .cds--text-area,
 .c4p--side-panel .cds--search-input,
 .c4p--side-panel .cds--select-input,
+.c4p--side-panel .cds--multi-select,
 .c4p--side-panel .cds--dropdown,
 .c4p--side-panel .cds--dropdown-list,
 .c4p--side-panel .cds--number input[type=number],
@@ -3978,6 +3979,12 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--datagrid .c4p--datagrid__head-wrap {
   overflow: hidden;
   background-color: var(--cds-layer-accent);
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.c4p--datagrid .c4p--datagrid__head-wrap::-webkit-scrollbar {
+  display: none;
 }
 
 .c4p--datagrid .cds--action-list .cds--btn.c4p--button-menu {

packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss

@@ -735,6 +735,10 @@
 
 .#{$block-class}__virtualScrollContainer {
   width: 100%;
+  .#{c4p-settings.$carbon-prefix}--data-table-content {
+    // overrides default scroll overflow as we handle overflow in thead and tbody separately for virtualScrollContainer variant
+    overflow-x: hidden;
+  }
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--modal {
@@ -781,6 +785,13 @@
 .#{$block-class} .#{c4p-settings.$pkg-prefix}--datagrid__head-wrap {
   overflow: hidden;
   background-color: $layer-accent;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$pkg-prefix}--datagrid__head-wrap::-webkit-scrollbar {
+  display: none;
 }
 
 .#{$block-class}

packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx

@@ -195,7 +195,7 @@ const DatagridRow = (datagridState: DataGridState) => {
           const lastVisibleIndex = withActionsColumn ? 2 : 1;
           const lastVisibleFlexStyle =
             index === visibleColumns.length - lastVisibleIndex
-              ? '1 1 0'
+              ? '1 0 auto'
               : '0 0 auto';
           if (style) {
             style.flex = lastVisibleFlexStyle;

packages/ibm-products/src/components/Datagrid/Datagrid/DatagridVirtualBody.tsx

@@ -47,7 +47,7 @@ const DatagridVirtualBody = (datagridState: DataGridState) => {
 
   const headWrapRef = useRef<HTMLDivElement | null>(null);
   const innerRef = useRef<HTMLDivElement | null>(null);
-
+  const gridWidth = gridRef?.current?.clientWidth;
   /* istanbul ignore next */
   const handleVirtualGridResize = () => {
     const gridRefElement = gridRef?.current;
@@ -80,36 +80,46 @@ const DatagridVirtualBody = (datagridState: DataGridState) => {
     const headWrapEl = document?.querySelector(
       `#${tableId} .${blockClass}__head-wrap`
     );
-    const headEle = headWrapEl?.querySelector(`thead`);
-    if (headEle) {
-      headEle.style.display = 'flex';
-    } // scrollbar width to header column to fix header alignment
 
-    function handleScroll(event) {
+    // Syncs header scroll position when virtual body is scrolled
+    function handleVirtualScrollX(event) {
       const virtualBody = event.target;
       if (headWrapEl) {
         headWrapEl.scrollLeft = virtualBody?.scrollLeft;
       }
     }
 
+    // Syncs virtual body scroll position when header is scrolled
+    function handleHeaderScrollX(event) {
+      const header = event.target;
+      if (testRef && testRef.current) {
+        testRef.current.scrollLeft = header?.scrollLeft;
+        // this prevents the scroll bar from over exceeding the vertical scroll bar compensation in the right
+        header.scrollLeft = testRef.current.scrollLeft;
+      }
+    }
+
     const testRefValue = testRef?.current;
-    testRefValue?.addEventListener('scroll', handleScroll);
+    testRefValue?.addEventListener('scroll', handleVirtualScrollX);
+    headWrapEl?.addEventListener('scroll', handleHeaderScrollX);
     return () => {
-      testRefValue?.removeEventListener('scroll', handleScroll);
+      testRefValue?.removeEventListener('scroll', handleVirtualScrollX);
+      headWrapEl?.removeEventListener('scroll', handleHeaderScrollX);
     };
   });
 
   useIsomorphicEffect(() => {
     if (headWrapRef.current && headWrapRef.current.style) {
-      headWrapRef.current.style.width = `${gridRef?.current?.clientWidth}px`;
+      headWrapRef.current.style.width = `${gridWidth}px`;
+      headWrapRef.current.style.overflow = `auto`;
     }
-  }, [headWrapRef, gridRef]);
+  }, [headWrapRef, gridWidth]);
 
   useIsomorphicEffect(() => {
     if (testRef?.current && testRef.current.style) {
-      testRef.current.style.width = `${gridRef?.current?.clientWidth}px`;
+      testRef.current.style.width = `${gridWidth}px`;
     }
-  }, [testRef, gridRef]);
+  }, [testRef, gridWidth]);
 
   return (
     <>

packages/ibm-products/src/components/Tearsheet/Tearsheet.tsx

@@ -87,6 +87,14 @@ export interface TearsheetProps extends PropsWithChildren {
    */
   hasCloseIcon?: boolean;
 
+  /**
+   * The content for the header actions area, displayed alongside the title in
+   * the header area of the tearsheet. This is typically a drop-down, or a set
+   * of small buttons, or similar. NB the headerActions is only applicable for
+   * wide tearsheets.
+   */
+  headerActions?: ReactNode;
+
   /**
    * The content for the influencer section of the tearsheet, displayed
    * alongside the main content. This is typically a menu, or filter, or
@@ -297,6 +305,14 @@ Tearsheet.propTypes = {
   /**@ts-ignore */
   hasCloseIcon: PropTypes.bool,
 
+  /**
+   * The content for the header actions area, displayed alongside the title in
+   * the header area of the tearsheet. This is typically a drop-down, or a set
+   * of small buttons, or similar. NB the headerActions is only applicable for
+   * wide tearsheets.
+   */
+  headerActions: PropTypes.element,
+
   /**
    * The content for the influencer section of the tearsheet, displayed
    * alongside the main content. This is typically a menu, or filter, or

playwright.config.js

@@ -87,7 +87,8 @@ expect.extend({
         'html_skipnav_exists',
         'aria_content_in_landmark',
         'aria_child_tabbable',
-        'skip_main_described'
+        'skip_main_described',
+        'target_spacing_sufficient'
       ]);
 
       const ruleset = await aChecker.getRuleset('IBM_Accessibility');