@openedx/paragon 23.14.1 → 23.14.2

package/src/DataTable/README.md

@@ -176,7 +176,7 @@ To enable proper selection behavior with backend pagination (i.e., when ``isSele
       producer: 'Isao Takahata',
       release_date: 1986,
       rt_score: 95,
-    }, 
+    },
     {
       id: '12cfb892-aac0-4c5b-94af-521852e46d6a',
       title: 'Grave of the Fireflies',
@@ -567,7 +567,7 @@ Can be used to show the loading state when ``DataTable`` is asynchronously fetch
     },
   ];
   {/* end example state */}
-  
+
   return (
     <>
       {/* start example form block */}
@@ -634,7 +634,7 @@ You can pass a function to render custom components for bulk actions and table a
       Enroll
     </Button>
   );
-  
+
   const EnrollAction = ({ selectedFlatRows, ...rest }) => (
     // Here is access to the selectedFlatRows, isEntireTableSelected, tableInstance
     <Button variant="danger" onClick={() => console.log('Enroll', selectedFlatRows, rest)}>
@@ -647,13 +647,13 @@ You can pass a function to render custom components for bulk actions and table a
       Assign
     </Button>
   );
-  
+
   const ExtraAction = ({ text, selectedFlatRows, ...rest }) => (
     <Button onClick={() => console.log(`Extra Action ${text}`, selectedFlatRows, rest)}>
       {`Extra Action ${text}`}
     </Button>
   );
-  
+
   return (
     <DataTable
       isSelectable
@@ -734,7 +734,7 @@ You can pass a function to render custom components for bulk actions and table a
     </DataTable>
   )
 }
-  
+
 ```
 
 #### Actions with Data view toggle enabled
@@ -889,7 +889,7 @@ a responsive grid of cards.
       Clear Selection
     </Component>
   );
-  
+
   return (
     <DataTable
       isFilterable
@@ -1103,7 +1103,7 @@ Use `columnSizes` prop of `CardView` component to define how many `Cards` are sh
 
   const ExampleCard = ({ className, original }) => {
     const { name, color, famous_for: famousFor } = original;
-		
+
     return (
       <Card className={className}>
         <Card.ImageCap src="https://picsum.photos/360/200/" srcAlt="Card image" />
@@ -1195,7 +1195,7 @@ You can also display `Cards` with horizontal view. If the table is selectable co
           <Card.Header title={name} />
           <Card.Section>
             <dl>
-              <dt>Color</dt>								
+              <dt>Color</dt>
               <dd>{color}</dd>
               <dt>Famous For</dt>
               <dd>{famousFor}</dd>
@@ -1217,7 +1217,7 @@ You can also display `Cards` with horizontal view. If the table is selectable co
           name: 'Lil Bub',
           color: 'brown tabby',
           famous_for: 'weird tongue',
-        }, 
+        },
         {
           name: 'Grumpy Cat',
           color: 'siamese',
@@ -1258,6 +1258,7 @@ For a more desktop friendly view, you can move filters into a sidebar by providi
 ```jsx live
   <DataTable
     showFiltersInSidebar
+    filtersTitle="Color filters"
     isFilterable
     isSortable
     defaultColumnValues={{ Filter: TextFilter }}
@@ -1330,17 +1331,17 @@ For a more desktop friendly view, you can move filters into a sidebar by providi
 ```
 
 ## Expandable rows
-`DataTable` supports expandable rows which once expanded render additional content under the row. Displayed content 
+`DataTable` supports expandable rows which once expanded render additional content under the row. Displayed content
 is controlled by the `renderRowSubComponent` prop, which is a function that receives `row` as its single prop and renders expanded view, you also
 need to pass `isEpandable` prop to `DataTable` to indicate that it should support expand behavior for rows.
-Finally, an additional column is required to be included into `columns` prop which will contain handlers for expand / collapse behavior, see examples below. 
+Finally, an additional column is required to be included into `columns` prop which will contain handlers for expand / collapse behavior, see examples below.
 
 ### Default view
 
 Here we use default expander column offered by Paragon and for each row render value of the `name` attribute as its subcomponent.
 
 ```jsx live
-<DataTable 
+<DataTable
   isExpandable
   itemCount={7}
   renderRowSubComponent={({ row }) => <div className='text-center'>{row.values.name}</div>}
@@ -1457,10 +1458,10 @@ You can create your own custom expander column and use it, see code example belo
       </DataTable>
     </div>
   )
-	
+
   return (
     <DataTable
-      isExpandable 
+      isExpandable
       renderRowSubComponent={renderSubComponent}
       itemCount={3}
       data={[
@@ -1481,7 +1482,7 @@ You can create your own custom expander column and use it, see code example belo
           reason: 'Felt like it',
         },
         {
-          name: 'Smoothie', 
+          name: 'Smoothie',
           color: 'orange tabby',
           famous_for: 'modeling',
           date_modified: currentDate,
@@ -1527,7 +1528,7 @@ You can create your own cell content by passing the `Cell` property to a specifi
     newColors[index] = cellColors[index] < 3 ? cellColors[index] + 1 : 0;
     setCellColors(newColors);
   };
-  
+
   return (
     <DataTable
       isExpandable
@@ -1544,7 +1545,7 @@ You can create your own cell content by passing the `Cell` property to a specifi
           famous_for: 'serving moods',
         },
         {
-          name: 'Smoothie', 
+          name: 'Smoothie',
           color: 'orange tabby',
           famous_for: 'modeling',
         },

package/src/DataTable/index.jsx

@@ -49,6 +49,7 @@ function DataTable({
   EmptyTableComponent,
   manualSelectColumn,
   showFiltersInSidebar,
+  filtersTitle,
   dataViewToggleOptions,
   disableElevation,
   isLoading,
@@ -215,6 +216,7 @@ function DataTable({
     manualSelectColumn,
     maxSelectedRows,
     onMaxSelectedRows,
+    filtersTitle,
     ...selectionProps,
     ...selectionActions,
     ...props,
@@ -222,7 +224,7 @@ function DataTable({
 
   return (
     <DataTableContext.Provider value={enhancedInstance}>
-      <DataTableLayout>
+      <DataTableLayout filtersTitle={filtersTitle}>
         <div className={classNames('pgn__data-table-wrapper', {
           'hide-shadow': !!disableElevation,
         })}
@@ -264,6 +266,7 @@ DataTable.defaultProps = {
   FilterStatusComponent: FilterStatus,
   RowStatusComponent: RowStatus,
   showFiltersInSidebar: false,
+  filtersTitle: undefined,
   dataViewToggleOptions: {
     isDataViewToggleEnabled: false,
     onDataViewToggle: () => {},
@@ -425,6 +428,8 @@ DataTable.propTypes = {
   children: PropTypes.node,
   /** If true filters will be shown on sidebar instead */
   showFiltersInSidebar: PropTypes.bool,
+  /** Title of the filters section */
+  filtersTitle: PropTypes.string,
   /** options for data view toggle */
   dataViewToggleOptions: PropTypes.shape({
     /** Whether to show a toggle button group which allows view switching between card and table views */

package/src/DataTable/messages.js

@@ -6,6 +6,11 @@ const messages = defineMessages({
     defaultMessage: 'table pagination',
     description: 'Accessibile name for the navigation element of a pagination component',
   },
+  filtersDropdownTitle: {
+    id: 'pgn.DataTable.filtersDropdownTitle',
+    defaultMessage: 'Filters',
+    description: 'Title of the filters dropdown',
+  },
 });
 
 export default messages;

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

@@ -8,6 +8,7 @@ import DataTable from '..';
 import DataTableContext from '../DataTableContext';
 import { TextFilter } from '../..';
 import { SELECT_ALL_TEST_ID } from '../selection/data/constants';
+import messages from '../messages';
 
 const additionalColumns = [
   {
@@ -162,6 +163,55 @@ describe('<DataTable />', () => {
     expect(screen.getByText('Action')).toBeInTheDocument();
     expect(screen.getByText('More')).toBeInTheDocument();
   });
+
+  it('displays the custom filters title in the sidebar', () => {
+    render(
+      <DataTableWrapper
+        showFiltersInSidebar
+        filtersTitle="Refine Your Search"
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        {...props}
+      />,
+    );
+    expect(screen.getByRole('heading', { name: 'Refine Your Search' })).toBeInTheDocument();
+  });
+
+  it('displays the default filters title in the sidebar', () => {
+    render(
+      <DataTableWrapper
+        showFiltersInSidebar
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        {...props}
+      />,
+    );
+    expect(screen.getByRole('heading', { name: messages.filtersDropdownTitle.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('displays the custom filters title in the filters dropdown', () => {
+    render(
+      <DataTableWrapper
+        filtersTitle="Refine Your Search"
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        {...props}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Refine Your Search' })).toBeInTheDocument();
+  });
+
+  it('displays the default filters title in the filters dropdown', () => {
+    render(
+      <DataTableWrapper
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        {...props}
+      />,
+    );
+    expect(screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage })).toBeInTheDocument();
+  });
+
   it('calls useTable with the data and columns', () => {
     const spy = jest.spyOn(reactTable, 'useTable');
     render(<DataTableWrapper {...props} />);
@@ -213,7 +263,7 @@ describe('<DataTable />', () => {
       fetchData: jest.fn(),
     };
     render(<DataTableWrapper {...propsWithSelection} />);
-    const filtersButton = screen.getByRole('button', { name: 'Filters' });
+    const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
 
     await userEvent.click(filtersButton);
 

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
 
 import DropdownFilters from '../DropdownFilters';
 import { useWindowSize } from '../..';
 import DataTableContext from '../DataTableContext';
+import messages from '../messages';
 
 jest.mock('../../hooks/useWindowSizeHook');
 
@@ -31,9 +33,11 @@ const instance = {
 // eslint-disable-next-line react/prop-types
 function DropdownFiltersWrapper({ value = instance, props }) {
   return (
-    <DataTableContext.Provider value={value}>
-      <DropdownFilters {...props} />
-    </DataTableContext.Provider>
+    <IntlProvider locale="en">
+      <DataTableContext.Provider value={value}>
+        <DropdownFilters {...props} />
+      </DataTableContext.Provider>
+    </IntlProvider>
   );
 }
 
@@ -56,7 +60,7 @@ describe('<DropdownFilters />', () => {
       // filter should be rendered in the dropdown, so should not be present before
       // clicking the button.
       expect(screen.queryByText('Occupation filter')).toBeNull();
-      const filtersButton = screen.getByRole('button', { name: /Filters/i });
+      const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
       await userEvent.click(filtersButton);
       expect(screen.getByText('Occupation filter')).toBeInTheDocument();
     });
@@ -65,7 +69,7 @@ describe('<DropdownFilters />', () => {
       useWindowSize.mockReturnValue({ width: 800 });
       render(<DropdownFiltersWrapper />);
       expect(screen.queryByText('DOB filter')).toBeNull();
-      const filtersButton = screen.getByRole('button', { name: /Filters/i });
+      const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
       await userEvent.click(filtersButton);
       expect(screen.queryByText('DOB filter')).toBeNull();
     });
@@ -74,7 +78,7 @@ describe('<DropdownFilters />', () => {
       useWindowSize.mockReturnValue({ width: 800 });
       render(<DropdownFiltersWrapper value={{ columns: [instance.columns[1]] }} />);
       expect(screen.getByText('Occupation filter')).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: /Filters/i })).toBeNull();
+      expect(screen.queryByRole('button', { name: messages.filtersDropdownTitle.defaultMessage })).toBeNull();
     });
   });
 
@@ -88,7 +92,7 @@ describe('<DropdownFilters />', () => {
     it('renders all filters in the dropdown', async () => {
       useWindowSize.mockReturnValue({ width: 500 });
       render(<DropdownFiltersWrapper />);
-      const filtersButton = screen.getByRole('button', { name: /Filters/i });
+      const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
       await userEvent.click(filtersButton);
       expect(screen.getByText('Bears filter')).toBeInTheDocument();
       expect(screen.getByText('Occupation filter')).toBeInTheDocument();

package/src/Modal/ModalDialog.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useMediaQuery } from 'react-responsive';
 import { useIntl } from 'react-intl';
@@ -52,7 +51,12 @@ interface Props {
   isBlocking?: boolean;
   /** Specifies the z-index of the modal */
   zIndex?: number;
-  /** Specifies whether overflow is visible in the modal */
+  /**
+   * Specifies whether overflow content inside the modal should be visible.
+   * - `true` - content that exceeds the modal boundaries will remain visible outside the modal's main viewport,
+   * rather than being clipped or hidden.
+   * - `false` - any overflow content will be clipped to fit within the modal's dimensions.
+   */
   isOverflowVisible: boolean;
 }
 
@@ -109,70 +113,6 @@ function ModalDialog({
   );
 }
 
-ModalDialog.propTypes = {
-  /**
-   *  Specifies the content of the dialog
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * The aria-label of the dialog
-   */
-  title: PropTypes.string.isRequired,
-  /**
-   * A callback to close the modal dialog
-   */
-  onClose: PropTypes.func.isRequired,
-  /**
-   * Is the modal dialog open or closed
-   */
-  isOpen: PropTypes.bool,
-  /**
-   * The close 'x' icon button in the top right of the dialog box
-   */
-  hasCloseButton: PropTypes.bool,
-  /**
-   * Sizes determine the maximum width of the dialog box
-   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),
-  /**
-   * The visual style of the dialog box
-   */
-  variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success', 'dark']),
-  /**
-   * The label supplied to the close icon button if one is rendered
-   */
-  closeLabel: PropTypes.string,
-  /**
-   *  Specifies class name to append to the base element
-   */
-  className: PropTypes.string,
-  /**
-   * Determines where a scrollbar should appear if a modal is too large for the
-   * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true
-   * the browser window itself receives the scrollbar.
-   */
-  isFullscreenScroll: PropTypes.bool,
-  /**
-   * To show full screen view on mobile screens
-   */
-  isFullscreenOnMobile: PropTypes.bool,
-  /**
-   * Prevent clicking on the backdrop or pressing Esc to close the modal
-   */
-  isBlocking: PropTypes.bool,
-  /**
-   * Specifies the z-index of the modal
-   */
-  zIndex: PropTypes.number,
-  /**
-   * Specifies whether overflow content inside the modal should be visible.
-   * - `true` - content that exceeds the modal boundaries will remain visible outside the modal's main viewport,
-   * rather than being clipped or hidden.
-   * - `false` - any overflow content will be clipped to fit within the modal's dimensions.
-   */
-  isOverflowVisible: PropTypes.bool.isRequired,
-};
-
 ModalDialog.Header = ModalDialogHeader;
 ModalDialog.Title = ModalDialogTitle;
 ModalDialog.Footer = ModalDialogFooter;

package/src/Modal/ModalLayer.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { FocusOn } from 'react-focus-on';
 import Portal from './Portal';
 import { ModalContextProvider } from './ModalContext';
@@ -18,19 +17,11 @@ function ModalBackdrop({ onClick }: { onClick?: () => void }) {
   );
 }
 
-ModalBackdrop.propTypes = {
-  onClick: PropTypes.func,
-};
-
 // istanbul ignore next
 function ModalContentContainer({ children = null }: { children?: React.ReactNode }) {
   return <div className="pgn__modal-content-container">{children}</div>;
 }
 
-ModalContentContainer.propTypes = {
-  children: PropTypes.node,
-};
-
 interface Props {
   /** Specifies the contents of the modal */
   children: React.ReactNode;
@@ -94,18 +85,5 @@ function ModalLayer({
   );
 }
 
-ModalLayer.propTypes = {
-  /** Specifies the contents of the modal */
-  children: PropTypes.node.isRequired,
-  /** A callback function for when the modal is dismissed */
-  onClose: PropTypes.func.isRequired,
-  /** Is the modal dialog open or closed */
-  isOpen: PropTypes.bool.isRequired,
-  /** Prevent clicking on the backdrop or pressing Esc to close the modal */
-  isBlocking: PropTypes.bool,
-  /** Specifies the z-index of the modal */
-  zIndex: PropTypes.number,
-};
-
 export { ModalBackdrop, ModalContentContainer };
 export default ModalLayer;

package/src/ProductTour/ProductTour.test.jsx

@@ -231,7 +231,6 @@ describe('<ProductTour />', () => {
 
         // Verify no Checkpoints have rendered
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-        expect(handleEnd).toHaveBeenCalledTimes(1);
         expect(customOnEnd).not.toHaveBeenCalled();
       });
 

package/src/Spinner/{index.jsx → index.tsx}

@@ -1,13 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import BaseSpinner from 'react-bootstrap/Spinner';
+import BaseSpinner, { type SpinnerProps as BaseSpinnerProps } from 'react-bootstrap/Spinner';
 
+interface SpinnerProps extends BaseSpinnerProps {
+  /** Optionally specify additional CSS classes to give this spinner's `<div>`. */
+  className?: string;
+  /** Specifies the screen reader content for a11y. */
+  screenReaderText?: React.ReactNode;
+}
+
+/** A spinning animation that indicates loading. */
 const Spinner = React.forwardRef(({
   className,
   screenReaderText,
   ...attrs
-}, ref) => {
+}: SpinnerProps, ref: React.ForwardedRef<HTMLDivElement>) => {
   const spinnerProps = {
     ...attrs,
     className: classNames('pgn__spinner', className),
@@ -20,16 +27,4 @@ const Spinner = React.forwardRef(({
   );
 });
 
-Spinner.propTypes = {
-  /** Specifies the class name for the component. */
-  className: PropTypes.string,
-  /** Specifies the screen reader content for a11y. */
-  screenReaderText: PropTypes.node,
-};
-
-Spinner.defaultProps = {
-  className: undefined,
-  screenReaderText: undefined,
-};
-
 export default Spinner;

package/src/index.ts

@@ -37,6 +37,7 @@ export { default as ModalDialog } from './Modal/ModalDialog';
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
+export { default as Spinner } from './Spinner';
 export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 export { default as Tooltip } from './Tooltip';
 export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSizeHook';
@@ -168,8 +169,6 @@ export {
 // @ts-ignore: has yet to be converted to TypeScript
 export { default as Sheet } from './Sheet';
 // @ts-ignore: has yet to be converted to TypeScript
-export { default as Spinner } from './Spinner';
-// @ts-ignore: has yet to be converted to TypeScript
 export { default as Stepper } from './Stepper';
 // @ts-ignore: has yet to be converted to TypeScript
 export { default as StatefulButton } from './StatefulButton';