@openedx/paragon 23.14.8 → 23.15.0

package/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',
             },

package/src/DataTable/{TableCell.jsx → TableCell.tsx}

@@ -1,8 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode, TdHTMLAttributes } from 'react';
 import classNames from 'classnames';
 
-function TableCell({ getCellProps, render, column }) {
+interface TableCellProps {
+  /** Props for the td element */
+  getCellProps: () => TdHTMLAttributes<HTMLTableCellElement>;
+  /** Function that renders the cell contents. Will be called with the string 'Cell' */
+  render: (type: 'Cell') => ReactNode;
+  /** Table column */
+  column: {
+    /** Class(es) to be applied to the cells in the given column */
+    cellClassName?: string;
+  };
+}
+function TableCell({ getCellProps, render, column }: TableCellProps) {
   const { className, ...rest } = getCellProps();
   return (
     <td {...rest} className={classNames('pgn__data-table-cell-wrap', className, column.cellClassName)}>
@@ -11,16 +21,4 @@ function TableCell({ getCellProps, render, column }) {
   );
 }
 
-TableCell.propTypes = {
-  /** Props for the td element */
-  getCellProps: PropTypes.func.isRequired,
-  /** Function that renders the cell contents. Will be called with the string 'Cell' */
-  render: PropTypes.func.isRequired,
-  /** Table column */
-  column: PropTypes.shape({
-    /** Class(es) to be applied to the cells in the given column */
-    cellClassName: PropTypes.string,
-  }).isRequired,
-};
-
 export default TableCell;

package/src/DataTable/{TableHeaderCell.jsx → TableHeaderCell.tsx}

@@ -1,10 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '../Icon';
 import { ArrowDropDown, ArrowDropUp, ArrowDropUpDown } from '../../icons';
 
-export function SortIndicator({ isSorted, isSortedDesc }) {
+interface SortIndicatorProps {
+  /** Indicates whether or not a column is sorted */
+  isSorted: boolean;
+  /** Indicates whether the column is sorted in descending order */
+  isSortedDesc: boolean;
+}
+
+export function SortIndicator({ isSorted, isSortedDesc }: SortIndicatorProps) {
   if (!isSorted) {
     return <Icon style={{ opacity: 0.5 }} src={ArrowDropUpDown} data-testid="arrow-drop-up-down" />;
   }
@@ -16,14 +22,32 @@ export function SortIndicator({ isSorted, isSortedDesc }) {
   return <Icon src={ArrowDropUp} data-testid="arrow-drop-up" />;
 }
 
-SortIndicator.propTypes = {
-  isSorted: PropTypes.bool.isRequired,
-  isSortedDesc: PropTypes.bool.isRequired,
-};
+interface TableHeaderCellProps {
+  /** Returns props for the th element */
+  getHeaderProps: (...args: any[]) => Record<string, any>;
+  /** Indicates whether or not a column is sorted */
+  isSorted?: boolean;
+  /** Renders the header content. Passed the string 'Header' */
+  render: (type: 'Header') => React.ReactNode;
+  /** Indicates whether the column is sorted in descending order */
+  isSortedDesc?: boolean;
+  /** Gets props related to sorting that will be passed to th */
+  getSortByToggleProps?: (...args: any[]) => Record<string, any>;
+  /** Indicates whether a column is sortable */
+  canSort?: boolean;
+  /** Class(es) to be applied to header cells */
+  headerClassName?: string;
+}
 
 function TableHeaderCell({
-  getHeaderProps, render, canSort, getSortByToggleProps, isSorted, isSortedDesc, headerClassName,
-}) {
+  getHeaderProps,
+  render,
+  canSort = false,
+  getSortByToggleProps = () => ({}),
+  isSorted = false,
+  isSortedDesc = false,
+  headerClassName,
+}: TableHeaderCellProps) {
   const toggleProps = canSort && getSortByToggleProps ? getSortByToggleProps() : {};
 
   return (
@@ -36,29 +60,4 @@ function TableHeaderCell({
   );
 }
 
-TableHeaderCell.defaultProps = {
-  headerClassName: null,
-  isSorted: false,
-  isSortedDesc: false,
-  canSort: false,
-  getSortByToggleProps: () => {},
-};
-
-TableHeaderCell.propTypes = {
-  /** Returns props for the th element */
-  getHeaderProps: PropTypes.func.isRequired,
-  /** Indicates whether or not a column is sorted */
-  isSorted: PropTypes.bool,
-  /** Renders the header content. Passed the string 'Header' */
-  render: PropTypes.func.isRequired,
-  /** Indicates whether the column is sorted in descending order */
-  isSortedDesc: PropTypes.bool,
-  /** Gets props related to sorting that will be passed to th */
-  getSortByToggleProps: PropTypes.func,
-  /** Indicates whether a column is sortable */
-  canSort: PropTypes.bool,
-  /** Class(es) to be applied to header cells */
-  headerClassName: PropTypes.string,
-};
-
 export default TableHeaderCell;

package/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}

package/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([]);
+  });
 });

package/src/DataTable/index.jsx

@@ -52,6 +52,7 @@ function DataTable({
   filtersTitle,
   dataViewToggleOptions,
   disableElevation,
+  className,
   isLoading,
   children,
   onSelectedRowsChanged,
@@ -224,7 +225,7 @@ function DataTable({
 
   return (
     <DataTableContext.Provider value={enhancedInstance}>
-      <DataTableLayout filtersTitle={filtersTitle}>
+      <DataTableLayout filtersTitle={filtersTitle} className={className}>
         <div className={classNames('pgn__data-table-wrapper', {
           'hide-shadow': !!disableElevation,
         })}
@@ -275,6 +276,7 @@ DataTable.defaultProps = {
   },
   disableElevation: false,
   renderRowSubComponent: undefined,
+  className: undefined,
   isExpandable: false,
   isLoading: false,
   onSelectedRowsChanged: undefined,
@@ -321,7 +323,7 @@ DataTable.propTypes = {
   isPaginated: PropTypes.bool,
   /** Indicates that pagination will be done manually. A fetchData function must be provided */
   manualPagination: PropTypes.bool,
-  // eslint-disable-next-line react/require-default-props
+  /** Number of pages in the table. Required when manualPagination is true */
   pageCount: requiredWhen(PropTypes.number, 'manualPagination'),
   /** Table rows can be filtered, using a default filter in the default column values, or in the column definition */
   isFilterable: PropTypes.bool,
@@ -428,6 +430,8 @@ DataTable.propTypes = {
   children: PropTypes.node,
   /** If true filters will be shown on sidebar instead */
   showFiltersInSidebar: PropTypes.bool,
+  /** Class name for the data table layout */
+  className: PropTypes.string,
   /** Title of the filters section */
   filtersTitle: PropTypes.string,
   /** options for data view toggle */

package/src/DataTable/selection/tests/utils.js

@@ -2,7 +2,6 @@ import { act } from 'react-dom/test-utils';
 
 import { CheckboxControl } from '../../../Form';
 
-// eslint-disable-next-line import/prefer-default-export
 export const toggleCheckbox = ({ isChecked, wrapper }) => {
   act(() => {
     wrapper.find(CheckboxControl).simulate('change', { target: { checked: isChecked } });

package/src/DataTable/tablecontrolbar.mdx

@@ -73,22 +73,22 @@ It always shows the `SmartStatus` component. If applicable, it displays the `Dro
       Filter: CheckboxFilter,
       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',
       },
       {
-        name: 'siamese',
+        name: 'Siamese',
         number: 1,
         value: 'siamese',
       }]

package/src/DataTable/tablefilters.mdx

@@ -104,22 +104,22 @@ all filters will be rendered in the dropdown.
       Filter: CheckboxFilter,
       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',
       },
       {
-        name: 'siamese',
+        name: 'Siamese',
         number: 1,
         value: 'siamese',
       }]
@@ -227,22 +227,22 @@ all filters will be rendered in the dropdown.
       Filter: CheckboxFilter,
       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',
       },
       {
-        name: 'siamese',
+        name: 'Siamese',
         number: 1,
         value: 'siamese',
       }]

package/src/DataTable/tests/DataTable.test.jsx

@@ -14,13 +14,11 @@ const additionalColumns = [
   {
     id: 'action',
     Header: 'Action',
-    // eslint-disable-next-line react/prop-types
     Cell: () => <div>extra content</div>,
   },
   {
     id: 'action2',
     Header: 'More',
-    // eslint-disable-next-line react/prop-types
     Cell: () => <div>extra content</div>,
   },
 ];
@@ -227,8 +225,12 @@ describe('<DataTable />', () => {
     [{ manualFilters: true, pageCount: 1 }, { manualFilters: true, manualPagination: false, manualSortBy: false }],
     [{ manualPagination: true, pageCount: 1 }, { manualFilters: false, manualPagination: true, manualSortBy: false }],
     [{ manualSortBy: true, pageCount: 1 }, { manualFilters: false, manualPagination: false, manualSortBy: true }],
-    // eslint-disable-next-line max-len, object-curly-newline
-    [{ manualSortBy: true, manualFilters: true, manualPagination: true, pageCount: 1 }, { manualFilters: true, manualPagination: true, manualSortBy: true }],
+    [
+      {
+        manualSortBy: true, manualFilters: true, manualPagination: true, pageCount: 1,
+      },
+      { manualFilters: true, manualPagination: true, manualSortBy: true },
+    ],
   ])('calls useTable with the correct manual settings %#', (additionalProps, expected) => {
     const spy = jest.spyOn(reactTable, 'useTable');
     render(<DataTableWrapper {...props} {...additionalProps} />);

package/src/DataTable/tests/TableHeaderCell.test.jsx

@@ -14,7 +14,6 @@ const props = {
   headerClassName: 'align-me',
 };
 
-// eslint-disable-next-line react/prop-types
 function FakeTable({ ...rest }) {
   return <table><thead><tr><TableHeaderCell {...rest} /></tr></thead></table>;
 }

package/src/DataTable/utils/tests/getTableArgs.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable object-curly-newline */
 import {
   useSortBy, useFilters, useRowSelect, usePagination, useExpanded,
 } from 'react-table';
@@ -19,7 +18,9 @@ describe('getTableArgs', () => {
     [{ tableOptions, isFilterable: true, isSelectable: true }, [tableOptions, useFilters, useRowSelect]],
     [{ tableOptions, isFilterable: true, isExpandable: true }, [tableOptions, useFilters, useExpanded]],
     [
-      { tableOptions, isFilterable: true, isSelectable: true, isSortable: true, isPaginated: true, isExpandable: true },
+      {
+        tableOptions, isFilterable: true, isSelectable: true, isSortable: true, isPaginated: true, isExpandable: true,
+      },
       [tableOptions, useFilters, useSortBy, useExpanded, usePagination, useRowSelect],
     ],
     [

package/src/DataTable/utils/tests/getVisibleColumns.test.js

@@ -1,5 +1,3 @@
-/* eslint-disable object-curly-newline */
-
 import getVisibleColumns, { selectColumn } from '../getVisibleColumns';
 
 describe('getVisibleColums', () => {

package/src/Dropdown/index.jsx

@@ -9,15 +9,14 @@ import Button from '../Button';
 import IconButton from '../IconButton';
 
 const Dropdown = React.forwardRef(
-  // eslint-disable-next-line prefer-arrow-callback
-  function Dropdown({
+  ({
     show,
     autoClose,
     onToggle,
     variant,
     className,
     ...rest
-  }, ref) {
+  }, ref) => {
     const [internalShow, setInternalShow] = React.useState(show);
     const isClosingPermitted = (source) => {
       // autoClose=false only permits close on button click
@@ -89,12 +88,11 @@ Dropdown.defaultProps = {
 };
 
 const DropdownToggle = React.forwardRef(
-  // eslint-disable-next-line prefer-arrow-callback
-  function DropdownToggle({
+  ({
     as,
     bsPrefix,
     ...otherProps
-  }, ref) {
+  }, ref) => {
     // hide arrow from the toggle if it is rendered as IconButton
     // because it hinders the positioning of IconButton
     const prefix = as === IconButton ? 'pgn__dropdown-toggle-iconbutton' : bsPrefix;
@@ -117,16 +115,13 @@ DropdownToggle.defaultProps = {
 };
 
 Dropdown.Item = React.forwardRef(
-  // eslint-disable-next-line prefer-arrow-callback
-  function DropdownItem({ className, ...otherProps }, ref) {
-    return (
-      <BaseDropdownItem
-        className={classNames(className, 'pgn__dropdown-item')}
-        ref={ref}
-        {...otherProps}
-      />
-    );
-  },
+  ({ className, ...otherProps }, ref) => (
+    <BaseDropdownItem
+      className={classNames(className, 'pgn__dropdown-item')}
+      ref={ref}
+      {...otherProps}
+    />
+  ),
 );
 
 Dropdown.Item.propTypes = {

package/src/Form/tests/useCheckboxSetValues.test.jsx

@@ -1,8 +1,8 @@
-/* eslint-disable react/button-has-type */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import Button from '../../Button';
 import useCheckboxSetValues from '../useCheckboxSetValues';
 
 const VALUES = 'values';
@@ -14,10 +14,18 @@ function Example() {
   return (
     <>
       <span data-testid={VALUES}>{values.join(' ')}</span>
-      <button data-testid="add" onClick={() => add('provolone')}>Add</button>
-      <button data-testid="remove" onClick={() => remove('provolone')}>Remove</button>
-      <button data-testid="set" onClick={() => set(['cheddar', 'swiss', 'provolone'])}>Set</button>
-      <button data-testid="clear" onClick={() => clear()}>Clear</button>
+      <Button onClick={() => add('provolone')}>
+        Add
+      </Button>
+      <Button onClick={() => remove('provolone')}>
+        Remove
+      </Button>
+      <Button onClick={() => set(['cheddar', 'swiss', 'provolone'])}>
+        Set
+      </Button>
+      <Button onClick={() => clear()}>
+        Clear
+      </Button>
     </>
   );
 }
@@ -31,7 +39,7 @@ describe('useCheckboxSetValues', () => {
 
   it('can append a value', async () => {
     render(<Example />);
-    const addButton = screen.getByTestId('add');
+    const addButton = screen.getByRole('button', { name: 'Add' });
     const values = screen.getByTestId(VALUES);
 
     await userEvent.click(addButton);
@@ -41,7 +49,7 @@ describe('useCheckboxSetValues', () => {
 
   it('can remove a value', async () => {
     render(<Example />);
-    const removeButton = screen.getByTestId('remove');
+    const removeButton = screen.getByRole('button', { name: 'Remove' });
     const values = screen.getByTestId(VALUES);
 
     await userEvent.click(removeButton);
@@ -51,7 +59,7 @@ describe('useCheckboxSetValues', () => {
 
   it('can replace all values', async () => {
     render(<Example />);
-    const setButton = screen.getByTestId('set');
+    const setButton = screen.getByRole('button', { name: 'Set' });
     const values = screen.getByTestId(VALUES);
 
     await userEvent.click(setButton);
@@ -61,7 +69,7 @@ describe('useCheckboxSetValues', () => {
 
   it('can clear all values', async () => {
     render(<Example />);
-    const clearButton = screen.getByTestId('clear');
+    const clearButton = screen.getByRole('button', { name: 'Clear' });
     const values = screen.getByTestId(VALUES);
 
     await userEvent.click(clearButton);

package/src/Menu/MenuItem.tsx

@@ -0,0 +1,49 @@
+import React, {
+  ReactElement, ReactNode, ElementType, createElement, ComponentType,
+} from 'react';
+import classNames from 'classnames';
+import Icon from '../Icon';
+
+interface MenuItemProps {
+  /** Specifies that this `MenuItem` is selected inside the `SelectMenu` */
+  defaultSelected?: boolean;
+  /** Specifies class name to append to the base element */
+  className?: string;
+  /** Specifies the content of the `MenuItem` */
+  children: ReactNode;
+  /** Specifies the base element */
+  as?: ElementType;
+  /** Specifies the jsx before the content of the `MenuItem` */
+  iconBefore?: ReactElement | ElementType;
+  /** Specifies the jsx after the content of the `MenuItem` */
+  iconAfter?: ReactElement | ElementType;
+}
+function MenuItem({
+  as = 'button',
+  children,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  defaultSelected = false,
+  iconAfter,
+  iconBefore,
+  ...props
+}: MenuItemProps) {
+  const className = classNames(props.className, 'pgn__menu-item');
+
+  return createElement(
+    as,
+    {
+      ...props,
+      className,
+    },
+    (
+      <>
+        {iconBefore && <Icon className="btn-icon-before" src={iconBefore as ComponentType} />}
+        <span className="pgn__menu-item-text">{children}</span>
+        <span className="pgn__menu-item-content-spacer" />
+        {iconAfter && <Icon className="btn-icon-after" src={iconAfter as ComponentType} />}
+      </>
+    ),
+  );
+}
+
+export default MenuItem;