Merge branch 'main' into feat/number-input-decorator

.github/workflows/codeql-analysis.yml

@@ -24,9 +24,9 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@662472033e021d55d94146f66f6058822b0b39fd # v3.27.0
+        uses: github/codeql-action/init@4f3212b61783c3c68e8309a0f18a699764811cda # v3.27.1
         with:
           languages: javascript
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@662472033e021d55d94146f66f6058822b0b39fd # v3.27.0
+        uses: github/codeql-action/analyze@4f3212b61783c3c68e8309a0f18a699764811cda # v3.27.1

package.json

@@ -36,7 +36,8 @@
     "node-sass": "^9.0.0",
     "react": "~18.3.0",
     "react-dom": "~18.3.0",
-    "react-is": "~18.3.0"
+    "react-is": "~18.3.0",
+    "[email protected]": "patch:flatpickr@npm%3A4.6.13#./.yarn/patches/flatpickr-npm-4.6.13-06399933fc.patch"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
@@ -64,9 +65,9 @@
     "cross-spawn": "^7.0.0",
     "doctoc": "^2.0.0",
     "eslint": "^9.0.0",
-    "eslint-plugin-playwright": "^1.0.0",
+    "eslint-plugin-playwright": "^2.0.0",
     "fs-extra": "^11.0.0",
-    "glob": "^10.0.0",
+    "glob": "^11.0.0",
     "husky": "^9.0.0",
     "jest": "^28.1.0",
     "jest-junit": "^16.0.0",

packages/react/package.json

@@ -57,7 +57,7 @@
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
-    "downshift": "8.5.0",
+    "downshift": "9.0.8",
     "flatpickr": "4.6.13",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",

packages/react/src/components/ComboBox/ComboBox.tsx

@@ -774,7 +774,7 @@ const ComboBox = forwardRef(
       inputId: id,
       stateReducer,
       isItemDisabled(item, _index) {
-        return (item as any).disabled;
+        return (item as any)?.disabled;
       },
       ...downshiftProps,
     });

packages/react/src/components/DataTable/TableToolbarSearch.tsx

@@ -200,7 +200,7 @@ const TableToolbarSearch = ({
   const onChange = (e) => {
     setValue(e.target.value);
     if (onChangeProp) {
-      onChangeProp(e);
+      onChangeProp(e, e.target.value);
     }
   };
 

packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js

@@ -211,8 +211,8 @@ export const Playground = (args) => {
             <TableToolbarContent>
               {/* pass in `onInputChange` change here to make filtering work */}
               <TableToolbarSearch
-                onChange={(evt) => {
-                  action('TableToolbarSearch - onChange')(evt);
+                onChange={(evt, value) => {
+                  action(`TableToolbarSearch - onChange ${value}`)(evt);
                   onInputChange(evt);
                 }}
               />

packages/react/src/components/DataTable/stories/examples/TableToolbarFilter.tsx

@@ -38,10 +38,7 @@ interface TableToolbarFilterProps {
   /**
    * Provide an optional hook that is called each time the input is updated
    */
-  onChange?: (
-    event: '' | ChangeEvent<HTMLInputElement>,
-    value?: string
-  ) => void;
+  onChange?: (event: '' | ChangeEvent<HTMLInputElement>) => void;
 
   /**
    * Provide an function that is called when the apply button is clicked

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

@@ -255,7 +255,7 @@ describe('MenuItem', () => {
     });
   });
 
-  it('should call onChange once', async () => {
+  it('should call MenuItemRadioGroup onChange once', async () => {
     const onChange = jest.fn();
 
     render(
@@ -278,4 +278,33 @@ describe('MenuItem', () => {
     await userEvent.click(screen.getByTitle('Item 1'));
     expect(onChange).toHaveBeenCalledTimes(1);
   });
+
+  it('should call MenuItemSelectable onChange once with correct value', async () => {
+    const onChange = jest.fn();
+
+    const { rerender } = render(
+      <Menu open label="Menu">
+        <MenuItemSelectable
+          label="Item 1"
+          onChange={onChange}
+          selected={false}
+        />
+      </Menu>
+    );
+
+    await userEvent.click(screen.getByTitle('Item 1'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(true);
+
+    onChange.mockClear();
+    rerender(
+      <Menu open label="Menu">
+        <MenuItemSelectable label="Item 1" onChange={onChange} selected />
+      </Menu>
+    );
+
+    await userEvent.click(screen.getByTitle('Item 1'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
 });

packages/react/src/components/Menu/MenuItem.tsx

@@ -377,10 +377,6 @@ export const MenuItemSelectable = forwardRef<
 
   function handleClick(e) {
     setChecked(!checked);
-
-    if (onChange) {
-      onChange(e);
-    }
   }
 
   useEffect(() => {

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

@@ -158,9 +158,7 @@ export interface FilterableMultiSelectProps<ItemType>
     items: readonly ItemType[],
     extra: {
       inputValue: string | null;
-      itemToString: NonNullable<
-        UseMultipleSelectionProps<ItemType>['itemToString']
-      >;
+      itemToString: NonNullable<UseComboboxProps<ItemType>['itemToString']>;
     }
   ): ItemType[];
 
@@ -544,7 +542,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
     inputValue,
     stateReducer,
     isItemDisabled(item, _index) {
-      return (item as any).disabled;
+      return (item as any)?.disabled;
     },
   });
   function stateReducer(state, actionAndChanges) {
@@ -641,7 +639,6 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
     activeIndex: highlightedIndex,
     initialSelectedItems,
     selectedItems: controlledSelectedItems,
-    itemToString,
     onStateChange(changes) {
       switch (changes.type) {
         case SelectedItemKeyDownBackspace:

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

@@ -453,7 +453,7 @@ const MultiSelect = React.forwardRef(
       selectedItem: controlledSelectedItems,
       items: filteredItems as ItemType[],
       isItemDisabled(item, _index) {
-        return (item as any).disabled;
+        return (item as any)?.disabled;
       },
       ...downshiftProps,
     };

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

@@ -10,6 +10,18 @@ import PaginationNav from './PaginationNav';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 describe('PaginationNav', () => {
   describe('renders as expected - Component API', () => {
     it('should spread extra props onto outermost element', () => {

packages/react/src/components/PaginationNav/PaginationNav.tsx

@@ -16,6 +16,8 @@ import {
 import { IconButton } from '../IconButton';
 import { usePrefix } from '../../internal/usePrefix';
 import { TranslateWithId } from '../../types/common';
+import { breakpoints } from '@carbon/layout';
+import { useMatchMedia } from '../../internal/useMatchMedia';
 
 const translationIds = {
   'carbon.pagination-nav.next': 'Next',
@@ -338,10 +340,14 @@ const PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(
     },
     ref
   ) {
+    const smMediaQuery = `(max-width: ${breakpoints.sm.width})`;
+    const isSm = useMatchMedia(smMediaQuery);
+
     const [currentPage, setCurrentPage] = useState(page);
     const [itemsDisplayedOnPage, setItemsDisplayedOnPage] = useState(
-      itemsShown >= 4 ? itemsShown : 4
+      itemsShown >= 4 && !isSm ? itemsShown : 4
     );
+
     const [cuts, setCuts] = useState(
       calculateCuts(currentPage, totalItems, itemsDisplayedOnPage)
     );
@@ -398,9 +404,12 @@ const PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(
 
     // re-calculate cuts if props.totalItems or props.itemsShown change
     useEffect(() => {
-      setItemsDisplayedOnPage(Math.max(itemsShown, 4));
-      setCuts(calculateCuts(currentPage, totalItems, Math.max(itemsShown, 4)));
-    }, [totalItems, itemsShown]); // eslint-disable-line react-hooks/exhaustive-deps
+      const itemsToBeShown = itemsShown >= 4 && !isSm ? itemsShown : 4;
+      setItemsDisplayedOnPage(Math.max(itemsToBeShown, 4));
+      setCuts(
+        calculateCuts(currentPage, totalItems, Math.max(itemsToBeShown, 4))
+      );
+    }, [totalItems, itemsShown, isSm]); // eslint-disable-line react-hooks/exhaustive-deps
 
     // update cuts if necessary whenever currentPage changes
     useEffect(() => {

packages/react/src/components/UIShell/__tests__/SwitcherItem-test.js

@@ -1,13 +1,14 @@
 /**
- * Copyright IBM Corp. 2023
+ * Copyright IBM Corp. 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
+import { fireEvent, render, screen } from '@testing-library/react';
+
 import React from 'react';
 import SwitcherItem from '../SwitcherItem';
-import { render, screen, fireEvent } from '@testing-library/react';
 
 describe('SwitcherItem', () => {
   describe('renders as expected - Component API', () => {
@@ -92,5 +93,99 @@ describe('SwitcherItem', () => {
 
       expect(dummyHandler).toHaveBeenCalledTimes(1);
     });
+
+    it('should handle onKeyDown event', () => {
+      const dummyHandler = jest.fn();
+
+      render(
+        <SwitcherItem aria-label="dummy-aria-label" onKeyDown={dummyHandler}>
+          Dummy child
+        </SwitcherItem>
+      );
+
+      fireEvent.keyDown(screen.getByRole('listitem').firstChild, {
+        key: 'Enter',
+        code: 'Enter',
+      });
+
+      expect(dummyHandler).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle keyboard navigation with ArrowUp and ArrowDown keys', () => {
+      const mockHandleSwitcherItemFocus = jest.fn();
+
+      render(
+        <SwitcherItem
+          aria-label="dummy-aria-label"
+          index={0}
+          handleSwitcherItemFocus={mockHandleSwitcherItemFocus}>
+          Dummy child
+        </SwitcherItem>
+      );
+      fireEvent.keyDown(screen.getByRole('listitem').firstChild, {
+        key: 'ArrowDown',
+        code: 'ArrowDown',
+      });
+      expect(mockHandleSwitcherItemFocus).toHaveBeenCalledWith({
+        currentIndex: -1,
+        direction: 1,
+      });
+
+      fireEvent.keyDown(screen.getByRole('listitem').firstChild, {
+        key: 'ArrowUp',
+        code: 'ArrowUp',
+      });
+      expect(mockHandleSwitcherItemFocus).toHaveBeenCalledWith({
+        currentIndex: -1,
+        direction: -1,
+      });
+    });
+
+    it('should apply selected class when isSelected prop is true', () => {
+      const { container } = render(
+        <SwitcherItem isSelected aria-label="dummy-aria-label">
+          Dummy child
+        </SwitcherItem>
+      );
+      const link = container.querySelector('a');
+      expect(link).toHaveClass('cds--switcher__item-link--selected');
+    });
+
+    it('should have tabIndex 0 when expanded is true', () => {
+      const { container } = render(
+        <SwitcherItem expanded={true} aria-label="dummy-aria-label">
+          Dummy child
+        </SwitcherItem>
+      );
+      const link = container.querySelector('a');
+      expect(link).toHaveAttribute('tabIndex', '0');
+    });
+
+    it('should have tabIndex -1 when expanded is false', () => {
+      const { container } = render(
+        <SwitcherItem expanded={false} aria-label="dummy-aria-label">
+          Dummy child
+        </SwitcherItem>
+      );
+      const link = container.querySelector('a');
+      expect(link).toHaveAttribute('tabIndex', '-1');
+    });
+
+    it('should not call handleSwitcherItemFocus when not provided', () => {
+      const { container } = render(
+        <SwitcherItem aria-label="dummy-aria-label">Dummy child</SwitcherItem>
+      );
+      const link = container.querySelector('a');
+      fireEvent.keyDown(link, { key: 'ArrowDown' });
+      expect(container).toBeTruthy();
+    });
+
+    it('should not throw an error when onClick is not provided', () => {
+      expect(() => {
+        render(
+          <SwitcherItem aria-label="dummy-aria-label">Dummy child</SwitcherItem>
+        );
+      }).not.toThrow();
+    });
   });
 });

packages/web-components/package.json

@@ -67,7 +67,7 @@
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
   },
   "dependencies": {
-    "@carbon/styles": "1.63.1",
+    "@carbon/styles": "^1.68.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.5.0",
     "flatpickr": "4.6.13",