Merge branch 'carbon-design-system:main' into main

packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx

@@ -507,11 +507,12 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
     const nextIsOpen = forceIsOpen ?? !isOpen;
     setIsOpen(nextIsOpen);
     validateHighlightFocus();
-    if (onMenuChange) {
-      onMenuChange(nextIsOpen);
-    }
   }
 
+  useEffect(() => {
+    onMenuChange?.(isOpen);
+  }, [isOpen, onMenuChange]);
+
   const {
     getToggleButtonProps,
     getLabelProps,

packages/react/src/components/MultiSelect/MultiSelect.stories.js

@@ -306,6 +306,9 @@ Filterable.argTypes = {
   onChange: {
     action: 'onChange',
   },
+  onMenuChange: {
+    action: 'onMenuChange',
+  },
 };
 
 export const WithLayerMultiSelect = () => (

packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js

@@ -47,13 +47,36 @@ describe('FilterableMultiSelect', () => {
     expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
   });
 
+  it('should call `onMenuChange` when the user clicks on the combobox', async () => {
+    render(<FilterableMultiSelect {...mockProps} />);
+    await waitForPosition();
+
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(mockProps.onMenuChange).toHaveBeenCalledWith(true);
+  });
+
+  it('should call `onMenuChange` when the user clicks on the screen', async () => {
+    render(<FilterableMultiSelect {...mockProps} open />);
+    await waitForPosition();
+
+    await userEvent.click(document.body);
+    expect(mockProps.onMenuChange).toHaveBeenCalledWith(false);
+  });
+
   it('should initially have the menu open when open prop is provided', async () => {
     render(<FilterableMultiSelect {...mockProps} open />);
     await waitForPosition();
 
     assertMenuOpen(mockProps);
   });
 
+  it('should call `onMenuChange` when open prop is provided', async () => {
+    render(<FilterableMultiSelect {...mockProps} open />);
+    await waitForPosition();
+
+    expect(mockProps.onMenuChange).toHaveBeenCalledWith(true);
+  });
+
   it('should open the menu with a down arrow', async () => {
     render(<FilterableMultiSelect {...mockProps} />);
     await waitForPosition();
@@ -64,6 +87,15 @@ describe('FilterableMultiSelect', () => {
     expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
   });
 
+  it('should call `onMenuChange` when the user types a down arrow', async () => {
+    render(<FilterableMultiSelect {...mockProps} />);
+    await waitForPosition();
+
+    const menuIconNode = findMenuIconNode();
+    await userEvent.type(menuIconNode, '{arrowdown}');
+    expect(mockProps.onMenuChange).toHaveBeenCalledWith(true);
+  });
+
   it('should let the user toggle the menu by the menu icon', async () => {
     render(<FilterableMultiSelect {...mockProps} />);
     await waitForPosition();
@@ -76,6 +108,17 @@ describe('FilterableMultiSelect', () => {
     assertMenuClosed();
   });
 
+  it('should call `onMenuChange` when the user toggles the menu by the menu icon', async () => {
+    render(<FilterableMultiSelect {...mockProps} />);
+    await waitForPosition();
+
+    await userEvent.click(findMenuIconNode());
+    expect(mockProps.onMenuChange).toHaveBeenCalledWith(true);
+
+    await userEvent.click(findMenuIconNode());
+    expect(mockProps.onMenuChange).toHaveBeenCalledWith(false);
+  });
+
   it('should not close the menu after a user makes a selection', async () => {
     render(<FilterableMultiSelect {...mockProps} />);
     await waitForPosition();

packages/react/src/components/Pagination/Pagination-test.js

@@ -222,6 +222,11 @@ describe('Pagination', () => {
       ).not.toBeInTheDocument();
     });
 
+    it('Next button should be enabled if totalItems undefined and pagesUnknown is true', () => {
+      render(<Pagination pagesUnknown={true} pageSizes={[10]} />);
+      expect(screen.getByLabelText('Next page')).not.toBeDisabled();
+    });
+
     it('should handle zero total items', () => {
       render(
         <Pagination
@@ -231,7 +236,7 @@ describe('Pagination', () => {
           page={1}
         />
       );
-
+      expect(screen.getByLabelText('Next page')).toBeDisabled();
       expect(screen.getByText('0–0 of 0 items')).toBeInTheDocument();
     });
   });

packages/react/src/components/Pagination/Pagination.tsx

@@ -225,7 +225,8 @@ const Pagination = React.forwardRef(function Pagination(
     [`${prefix}--pagination__button--backward`]: true,
     [`${prefix}--pagination__button--no-index`]: backButtonDisabled,
   });
-  const forwardButtonDisabled = disabled || page === totalPages;
+  const forwardButtonDisabled =
+    disabled || (page === totalPages && !pagesUnknown);
   const forwardButtonClasses = cx({
     [`${prefix}--pagination__button`]: true,
     [`${prefix}--pagination__button--forward`]: true,

packages/react/src/components/UIShell/HeaderPanel.tsx

@@ -90,7 +90,9 @@ const HeaderPanel: React.FC<HeaderPanelProps> = React.forwardRef(
       eventHandlers.onBlur = (event) => {
         if (
           !event.currentTarget.contains(event.relatedTarget) &&
-          !lastClickedElement?.classList?.contains('cds--switcher__item-link')
+          !lastClickedElement?.classList?.contains(
+            `${prefix}--switcher__item-link`
+          )
         ) {
           setExpandedState(false);
           setLastClickedElement(null);

packages/themes/src/g100.js

@@ -10,7 +10,7 @@ import {
   blue40,
   blue60,
   blue70,
-  blue80,
+  blue90,
 
   // Gray
   gray10,
@@ -204,7 +204,7 @@ export const skeletonElement = gray80;
 
 // Misc
 export const interactive = blue50;
-export const highlight = blue80;
+export const highlight = blue90;
 export const overlay = rgba(black, 0.65);
 export const toggleOff = gray60;
 export const shadow = rgba(black, 0.8);

packages/themes/src/g90.js

@@ -10,6 +10,7 @@ import {
   blue40,
   blue60,
   blue70,
+  blue80,
 
   // Gray
   gray10,
@@ -204,7 +205,7 @@ export const skeletonElement = gray70;
 
 // Misc
 export const interactive = blue50;
-export const highlight = blue70;
+export const highlight = blue80;
 export const overlay = rgba(black, 0.65);
 export const toggleOff = gray50;
 export const shadow = rgba(black, 0.8);