Merge branch 'main' into modal-mousedown-onclick

config/eslint-config-carbon/package.json

@@ -30,7 +30,7 @@
     "provenance": true
   },
   "peerDependencies": {
-    "eslint": "^8.0.0"
+    "eslint": "^9.0.0"
   },
   "dependencies": {
     "@babel/eslint-parser": "^7.19.1",

eslint.config.mjs

@@ -0,0 +1,75 @@
+export default [
+  {
+    languageOptions: {
+      parser: {
+        meta: {
+          name: 'Ignore Without Parsing',
+        },
+
+        // Ignore Paring error
+        parse: function () {
+          return {
+            type: 'Program',
+            loc: {},
+            comments: [],
+            range: [0, 0],
+            body: [],
+            tokens: [],
+          };
+        },
+      },
+    },
+  },
+
+  {
+    ignores: [
+      // Build folders
+      '/build',
+      'packages/*/build/',
+      'packages/*/examples/*/build/',
+      'es',
+      'lib',
+      'dist',
+      'umd',
+
+      'node_modules',
+      'packages/*/examples/*',
+
+      // Components
+      'packages/components/demo/*.css',
+      'packages/components/demo/*.map',
+      'packages/components/demo/*.js',
+      'packages/components/demo/js/prism.js',
+      'packages/components/demo/hot',
+      '!packages/components/demo/index.js', // This negation might need manual handling
+      'packages/components/dist',
+      'packages/components/tests/a11y-results',
+      'packages/components/tests/coverage',
+      'packages/components/es',
+      'packages/components/umd',
+      'packages/components/scripts',
+      'packages/components/css',
+      'packages/components/scss',
+      'packages/components/html',
+      'packages/components/docs/js',
+      'packages/components/node_modules',
+      'packages/components/scss/globals/vendor/**',
+      'packages/components/src/globals/scss/vendor/**',
+
+      // Upgrade
+      '**/__testfixtures__/**',
+      'packages/upgrade/cli.js',
+
+      // React
+      '**/storybook-static/**',
+      'packages/react/icons/index.js',
+      'packages/react/icons/index.esm.js',
+
+      // Icons React
+      'packages/icons-react/next/**',
+
+      // Templates
+      'packages/cli/src/component/templates/**',
+    ],
+  },
+];

package.json

@@ -52,16 +52,17 @@
     "@percy/cli": "^1.27.0",
     "@percy/playwright": "^1.0.4",
     "@playwright/test": "^1.36.2",
+    "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^15.0.6",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/react-is": "~18.3.0",
     "accessibility-checker": "^3.1.48",
     "all-contributors-cli": "^6.19.0",
     "cross-env": "^7.0.0",
     "cross-spawn": "^7.0.0",
     "doctoc": "^2.0.0",
-    "eslint": "^8.40.0",
+    "eslint": "^9.0.0",
     "eslint-plugin-playwright": "^1.0.0",
     "fs-extra": "^11.0.0",
     "glob": "^10.0.0",

packages/icons-vue/examples/vue-cli/yarn.lock

@@ -7792,9 +7792,9 @@ write@^0.2.1:
     mkdirp "^0.5.1"
 
 ws@^6.0.0:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.1.2.tgz#3cc7462e98792f0ac679424148903ded3b9c3ad8"
-  integrity sha512-rfUqzvz0WxmSXtJpPMX2EeASXabOrSMk1ruMOV3JBTBjo4ac2lDjGGsbQSyxj8Odhw5fBib8ZKEjDNvgouNKYw==
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.3.tgz#ccc96e4add5fd6fedbc491903075c85c5a11d9ee"
+  integrity sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==
   dependencies:
     async-limiter "~1.0.0"
 

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -2824,6 +2824,9 @@ Map {
         "type": "string",
       },
       "ariaLabel": [Function],
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "className": Object {
         "type": "string",
       },
@@ -3415,6 +3418,9 @@ Map {
     "propTypes": Object {
       "aria-label": [Function],
       "ariaLabel": [Function],
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "clearSelectionDescription": Object {
         "type": "string",
       },
@@ -5088,6 +5094,9 @@ Map {
       "propTypes": Object {
         "aria-label": [Function],
         "ariaLabel": [Function],
+        "autoAlign": Object {
+          "type": "bool",
+        },
         "clearSelectionDescription": Object {
           "type": "string",
         },
@@ -5336,6 +5345,9 @@ Map {
       "render": [Function],
     },
     "propTypes": Object {
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "className": Object {
         "type": "string",
       },

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

@@ -6,19 +6,18 @@
  */
 
 import React from 'react';
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, within, fireEvent, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {
   findListBoxNode,
   assertMenuOpen,
   assertMenuClosed,
   generateItems,
   generateGenericItem,
+  cognateItems,
   waitForPosition,
 } from '../ListBox/test-helpers';
 import ComboBox from '../ComboBox';
-import { act } from 'react';
-
 import { Slug } from '../Slug';
 
 const findInputNode = () => screen.getByRole('combobox');
@@ -65,7 +64,71 @@ describe('ComboBox', () => {
     }
   });
 
-  it('capture filter text events', async () => {
+  it('should call `onChange` with the proper item when `shouldFilterItem` is provided', async () => {
+    const filterItems = (menu) => {
+      return menu?.item?.label
+        ?.toLowerCase()
+        .includes(menu?.inputValue?.toLowerCase());
+    };
+    const onInputChange = jest.fn();
+
+    render(
+      <ComboBox
+        {...mockProps}
+        shouldFilterItem={filterItems}
+        onInputChange={onInputChange}
+      />
+    );
+
+    await userEvent.type(findInputNode(), 'Item 2');
+    expect(onInputChange).toHaveBeenCalledWith('Item 2');
+
+    await userEvent.click(screen.getAllByRole('option')[0]);
+    expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+    expect(mockProps.onChange).toHaveBeenCalledWith({
+      selectedItem: mockProps.items[2],
+    });
+  });
+
+  it('should select the correct item from the filtered list after text input on click', async () => {
+    const user = userEvent.setup();
+
+    render(<ComboBox {...mockProps} items={cognateItems} />);
+
+    await user.type(findInputNode(), 'struct');
+
+    await user.click(screen.getAllByRole('option')[1]);
+
+    expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+    expect(mockProps.onChange).toHaveBeenCalledWith({
+      selectedItem: {
+        id: 'construct',
+        text: 'Construct',
+      },
+    });
+  });
+
+  it('should select the correct item from the filtered list after text input on [Enter]', async () => {
+    const user = userEvent.setup();
+
+    render(<ComboBox {...mockProps} items={cognateItems} />);
+
+    await user.type(findInputNode(), 'struct');
+
+    await userEvent.keyboard('{ArrowDown}');
+    await userEvent.keyboard('{ArrowDown}');
+    await userEvent.keyboard('[Enter]');
+
+    expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+    expect(mockProps.onChange).toHaveBeenCalledWith({
+      selectedItem: {
+        id: 'construct',
+        text: 'Construct',
+      },
+    });
+  });
+
+  it('capture filter text event onInputChange', async () => {
     const onInputChange = jest.fn();
     render(<ComboBox {...mockProps} onInputChange={onInputChange} />);
 
@@ -105,6 +168,7 @@ describe('ComboBox', () => {
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItem: mockProps.items[1],
     });
+    expect(screen.getByRole('combobox')).toHaveDisplayValue('Item 1');
   });
 
   it('should not let the user select an option by clicking on the disabled option node', async () => {
@@ -312,4 +376,51 @@ describe('ComboBox', () => {
       assertMenuClosed(mockProps);
     });
   });
+
+  describe('Highlights', () => {
+    it('should highlight the matched element', async () => {
+      render(<ComboBox {...mockProps} allowCustomValue={false} />);
+      await userEvent.type(findInputNode(), '1');
+      expect(screen.getAllByRole('option')[1]).toHaveClass(
+        'cds--list-box__menu-item--highlighted'
+      );
+    });
+
+    it('should highlight the selected element', async () => {
+      render(<ComboBox {...mockProps} allowCustomValue={false} />);
+      await openMenu();
+      await userEvent.type(findInputNode(), 'Item 1');
+      await userEvent.keyboard('[Enter]');
+      await openMenu();
+      expect(screen.getAllByRole('option')[1]).toHaveClass(
+        'cds--list-box__menu-item--highlighted'
+      );
+    });
+
+    it('should highlight the selected element if user enter some other value click outside of combobox', async () => {
+      render(<ComboBox {...mockProps} allowCustomValue={false} />);
+      await openMenu();
+      await userEvent.type(findInputNode(), 'Item 1');
+      await userEvent.keyboard('[Enter]');
+      await openMenu();
+      expect(screen.getAllByRole('option')[1]).toHaveClass(
+        'cds--list-box__menu-item--highlighted'
+      );
+
+      await userEvent.clear(findInputNode());
+      await userEvent.type(findInputNode(), 'Item');
+      //should match the loosely match element
+      expect(screen.getAllByRole('option')[0]).toHaveClass(
+        'cds--list-box__menu-item--highlighted'
+      );
+
+      fireEvent.blur(findInputNode());
+      await openMenu();
+      // on blur, it should retain the selected value
+      expect(findInputNode()).toHaveDisplayValue('Item 1');
+      expect(screen.getAllByRole('option')[1]).toHaveClass(
+        'cds--list-box__menu-item--highlighted'
+      );
+    });
+  });
 });

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

@@ -74,7 +74,7 @@ export const Default = () => (
   </div>
 );
 
-export const AllowCustomValue = () => {
+export const AllowCustomValue = (args) => {
   const filterItems = (menu) => {
     return menu?.item?.toLowerCase().includes(menu?.inputValue?.toLowerCase());
   };
@@ -83,7 +83,7 @@ export const AllowCustomValue = () => {
       <ComboBox
         allowCustomValue
         shouldFilterItem={filterItems}
-        onChange={() => {}}
+        onChange={args.onChange}
         id="carbon-combobox"
         items={['Apple', 'Orange', 'Banana', 'Pineapple', 'Raspberry', 'Lime']}
         titleText="ComboBox title"
@@ -108,6 +108,10 @@ export const ExperimentalAutoAlign = () => (
   </div>
 );
 
+AllowCustomValue.argTypes = {
+  onChange: { action: 'onChange' },
+};
+
 export const _WithLayer = () => (
   <WithLayer>
     {(layer) => (