Merge remote-tracking branch 'origin/release-22.x' into Peter_Kulko/sync-22-to-23

Author: PKulkoRaccoonGang

example/src/MyComponent.jsx

@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
-import { Button, Form, Icon, Bubble, Stack, Container } from '@openedx/paragon'; // eslint-disable-line
-import { FavoriteBorder } from '@openedx/paragon/icons'; // eslint-disable-line
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  Button, Form, Icon, Bubble, Stack, Container,
+} from '@openedx/paragon';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { FavoriteBorder } from '@openedx/paragon/icons';
 
 function MyComponent() {
   const [value, setValue] = useState('');

lib/version.js

@@ -1,9 +1,8 @@
-/* eslint-disable no-console */
 const chalk = require('chalk');
 const { version } = require('../package.json');
 
 function versionCommand() {
-  console.log(`Paragon CLI version: ${chalk.bold(version)}`);
+  console.log(`Paragon CLI version: ${chalk.bold(version)}`); /* eslint-disable-line no-console */
 }
 
 module.exports = versionCommand;

src/Card/CardCarousel/tests/CardCarousel.test.jsx

@@ -12,7 +12,6 @@ jest.mock('../../../OverflowScroll', () => ({
   OverflowScroll: jest.fn(),
 }));
 
-// eslint-disable-next-line react/prop-types
 OverflowScroll.mockImplementation(({ children }) => {
   const overflowRef = { current: document.createElement('div') };
   const contextValue = {

src/Chip/constants.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const STYLE_VARIANTS = {
   DARK: 'dark',
   LIGHT: 'light',

src/ChipCarousel/ChipCarousel.test.jsx

@@ -1,17 +1,15 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 import ChipCarousel from '.';
+import Chip from '../Chip';
 
-const items = [
-  <div onClick={jest.fn()} data-testid="chip">Item 1</div>,
-  <div onClick={jest.fn()} data-testid="chip">Item 2</div>,
-  <div onClick={jest.fn()} data-testid="chip">Item 3</div>,
-  <div onClick={jest.fn()} data-testid="chip" />,
-];
+const items = Array.from({ length: 4 }, (_, i) => (
+  <Chip onClick={jest.fn()}>
+    {`Item ${i + 1}`}
+  </Chip>
+));
 
 const ariaLabel = 'Test aria label';
 function TestingChipCarousel(props) {
@@ -29,9 +27,9 @@ describe('<ChipCarousel />', () => {
     const carousel = screen.getByTestId('chip-carousel');
     expect(carousel).toBeTruthy();
 
-    const chipItems = screen.queryAllByTestId('chip');
-    expect(chipItems).toHaveLength(items.length - 1);
-    for (let i = 0; i < chipItems.length - 1; i++) {
+    const chipItems = screen.queryAllByRole('button');
+    expect(chipItems).toHaveLength(items.length);
+    for (let i = 0; i < chipItems.length; i++) {
       expect(chipItems[i].textContent).toBe(items[i].props.children);
     }
   });

src/Container/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import React, {
   ForwardedRef, ReactNode, ElementType, forwardRef,
 } from 'react';

src/DataTable/CollapsibleButtonGroup.jsx

@@ -51,7 +51,6 @@ function CollapsibleButtonGroup({
   const cloneAction = (action, index) => React.cloneElement(
     action.component,
     {
-      // eslint-disable-next-line react/no-array-index-key
       key: `${action}${index}`,
       as: Button, // for backwards compatibility this is needed
       ...action.args,

src/DataTable/README.md

@@ -423,17 +423,17 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
           Filter: CheckboxFilter,
           filter: 'includesValue',
           filterChoices: [{
-            name: 'orange tabby',
+            name: 'Orange Tabby',
             number: 1,
             value: 'orange tabby',
           },
           {
-            name: 'brown tabby',
+            name: 'Brown Tabby',
             number: 1,
             value: 'brown tabby',
           },
           {
-            name: 'siamese',
+            name: 'Siamese',
             number: 1,
             value: 'siamese',
           }],
@@ -503,17 +503,17 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
           Filter: CheckboxFilter,
           filter: 'includesValue',
           filterChoices: [{
-            name: 'orange tabby',
+            name: 'Orange Tabby',
             number: 1,
             value: 'orange tabby',
           },
           {
-            name: 'brown tabby',
+            name: 'Brown Tabby',
             number: 1,
             value: 'brown tabby',
           },
           {
-            name: 'siamese',
+            name: 'Siamese',
             number: 1,
             value: 'siamese',
           }]
@@ -1306,17 +1306,17 @@ For a more desktop friendly view, you can move filters into a sidebar by providi
         Filter: CheckboxFilter,
         filter: 'includesValue',
         filterChoices: [{
-          name: 'orange tabby',
+          name: 'Orange Tabby',
           number: 2,
           value: 'orange tabby',
         },
         {
-          name: 'brown tabby',
+          name: 'Brown Tabby',
           number: 2,
           value: 'brown tabby',
         },
         {
-          name: 'siamese',
+          name: 'Siamese',
           number: 1,
           value: 'siamese',
         }]
@@ -1659,17 +1659,17 @@ After selecting the maximum possible number of rows, you can display an error me
           filter: 'includesValue',
           filterChoices: [
             {
-              name: 'russian white',
+              name: 'Russian white',
               number: 1,
               value: 'russian white',
             },
             {
-              name: 'orange tabby',
+              name: 'Orange Tabby',
               number: 2,
               value: 'orange tabby',
             },
             {
-              name: 'brown tabby',
+              name: 'Brown Tabby',
               number: 3,
               value: 'brown tabby',
             },

src/DataTable/filters/CheckboxFilter.jsx

@@ -31,7 +31,7 @@ function CheckboxFilter({
         {filterChoices.map(({ name, number, value }) => (
           <Form.Checkbox
             key={`${headerBasedId}${name}`}
-            value={name}
+            value={value}
             checked={checkedBoxes.includes(value)}
             onChange={() => changeCheckbox(value)}
             aria-label={name}

src/DataTable/filters/tests/CheckboxFilter.test.jsx

@@ -83,4 +83,35 @@ describe('<CheckboxFilter />', () => {
       expect(checkbox).not.toBeChecked();
     });
   });
+
+  it('uses value for filtering when name and value differ', async () => {
+    const testChoice = { name: 'Test', value: 'test' };
+    const propsWithCaseDifference = {
+      column: {
+        ...props.column,
+        filterChoices: [testChoice],
+        filterValue: [],
+      },
+    };
+
+    const { rerender } = render(<CheckboxFilter {...propsWithCaseDifference} />);
+
+    const checkbox = screen.getByLabelText(testChoice.name);
+
+    await userEvent.click(checkbox);
+
+    expect(setFilterMock).toHaveBeenCalledWith([testChoice.value]);
+
+    rerender(<CheckboxFilter column={{
+      ...propsWithCaseDifference.column,
+      filterValue: [testChoice.value],
+    }}
+    />);
+
+    expect(checkbox).toBeChecked();
+
+    await userEvent.click(checkbox);
+
+    expect(setFilterMock).toHaveBeenCalledWith([]);
+  });
 });