@openedx/paragon 23.4.5 → 23.5.0

package/src/DataTable/selection/tests/reducer.test.js

@@ -25,6 +25,7 @@ describe('DataTable selections reducer', () => {
     const action = setSelectedRowsAction(rows, itemCount);
     const updatedState = selectionsReducer(defaultInitialState, action);
     expect(updatedState).toEqual({
+      ...defaultInitialState,
       isEntireTableSelected: true,
       selectedRows: rows,
     });
@@ -38,6 +39,7 @@ describe('DataTable selections reducer', () => {
     const updatedState = selectionsReducer(initialState, action);
     expect(updatedState).toEqual({
       isEntireTableSelected: true,
+      isSelectAllEnabled: true,
       selectedRows: initialState.selectedRows,
     });
   });
@@ -70,6 +72,7 @@ describe('DataTable selections reducer', () => {
     const action = addSelectedRowAction(row, itemCount);
     const updatedState = selectionsReducer(defaultInitialState, action);
     expect(updatedState).toEqual({
+      ...defaultInitialState,
       selectedRows: [row],
       isEntireTableSelected: true,
     });
@@ -88,6 +91,7 @@ describe('DataTable selections reducer', () => {
     const rows = [{ id: 1 }, { id: 2 }, { id: 3 }];
     const initialState = {
       ...defaultInitialState,
+      isSelectAllEnabled: false,
       selectedRows: rows,
     };
     const action = clearPageSelectionAction([1, 2]);

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

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as reactTable from 'react-table';
 import { IntlProvider } from 'react-intl';
@@ -212,7 +212,6 @@ describe('<DataTable />', () => {
       pageCount: 3,
       fetchData: jest.fn(),
     };
-
     render(<DataTableWrapper {...propsWithSelection} />);
     const filtersButton = screen.getByRole('button', { name: 'Filters' });
 
@@ -228,6 +227,10 @@ describe('<DataTable />', () => {
     // A filtered array is returned from the backend,
     // and the element counter displays its length.
     expect(selectAllButton).toHaveTextContent('Select all 7');
+
+    await userEvent.click(selectAllButton);
+
+    expect(screen.getByText('All 7 selected')).toBeInTheDocument();
   });
 
   describe('[legacy] controlled table selections', () => {
@@ -242,7 +245,7 @@ describe('<DataTable />', () => {
 
       const contextValue = JSON.parse(contextDiv.getAttribute('data-contextvalue'));
       expect(contextValue.controlledTableSelections).toEqual([
-        { selectedRows: [], isEntireTableSelected: false },
+        { selectedRows: [], isEntireTableSelected: false, isSelectAllEnabled: false },
         null,
       ]);
     });
@@ -312,5 +315,98 @@ describe('<DataTable />', () => {
       expect(mockOnSelectedRowsChange).toHaveBeenCalledTimes(1);
       expect(mockOnSelectedRowsChange).toHaveBeenCalledWith({});
     });
+    it('Selects all rows across all pages with ControlledSelectionStatus component', async () => {
+      const selectColumn = {
+        id: 'selection',
+        Header: DataTable.ControlledSelectHeader,
+        Cell: DataTable.ControlledSelect,
+        disableSortBy: true,
+      };
+      const propsWithSelection = {
+        ...props,
+        isPaginated: true,
+        isSelectable: true,
+        manualSelectColumn: selectColumn,
+        SelectionStatusComponent: DataTable.ControlledSelectionStatus,
+        initialState: {
+          pageIndex: 0,
+          pageSize: 2,
+          selectedRowIds: {
+            1: true,
+          },
+        },
+      };
+      render(<DataTableWrapper {...propsWithSelection} />);
+      const selectAllButton = screen.getByTestId('test_selection_state_select_all_button');
+
+      await userEvent.click(selectAllButton);
+
+      expect(screen.getByText('All 7 selected')).toBeInTheDocument();
+    });
+
+    it('Select all item rows with ControlledSelectionStatus Component', async () => {
+      const selectColumn = {
+        id: 'selection',
+        Header: DataTable.ControlledSelectHeader,
+        Cell: DataTable.ControlledSelect,
+        disableSortBy: true,
+      };
+      const propsWithSelection = {
+        ...props,
+        isPaginated: true,
+        isSelectable: true,
+        manualSelectColumn: selectColumn,
+        SelectionStatusComponent: DataTable.ControlledSelectionStatus,
+        initialState: {
+          pageIndex: 0,
+          pageSize: 10,
+        },
+      };
+      render(<DataTableWrapper {...propsWithSelection} />);
+      const selectAllRowsButton = screen.getByTitle('Toggle All Current Page Rows Selected');
+
+      await userEvent.click(selectAllRowsButton);
+
+      expect(screen.getByText('All 7 selected')).toBeInTheDocument();
+    });
+
+    it('Select all item rows individually with ControlledSelectionStatus Component', async () => {
+      const selectColumn = {
+        id: 'selection',
+        Header: DataTable.ControlledSelectHeader,
+        Cell: DataTable.ControlledSelect,
+        disableSortBy: true,
+      };
+      const propsWithSelection = {
+        ...props,
+        isPaginated: true,
+        isSelectable: true,
+        manualSelectColumn: selectColumn,
+        SelectionStatusComponent: DataTable.ControlledSelectionStatus,
+        initialState: {
+          pageIndex: 0,
+          pageSize: 4,
+        },
+      };
+      render(<DataTableWrapper {...propsWithSelection} />);
+
+      const selectAllRows = () => {
+        const selectRowsButtons = screen.getAllByTitle('Toggle Row Selected');
+        selectRowsButtons.forEach(async (button) => {
+          await userEvent.click(button);
+        });
+      };
+      // Select all page 1
+      selectAllRows();
+
+      // Paginate to page 2
+      const nextPageButton2 = screen.getByLabelText('Next, Page 2');
+      await userEvent.click(nextPageButton2);
+
+      // Select all page 2
+      selectAllRows();
+
+      await waitFor(() => expect(screen.getByText('All 7 selected')).toBeInTheDocument());
+    });
   });
 });

package/src/Form/_index.scss

@@ -294,7 +294,8 @@
 
   .form-control:focus ~ &,
   // select.form-control ~ &,
-  .form-control.has-value ~ & {
+  .form-control.has-value ~ &,
+  .form-control:is(:-webkit-autofill, :autofill) ~ & {
     .pgn__form-control-floating-label-text {
       background-color: var(--pgn-color-form-input-bg-base);
     }
@@ -408,6 +409,7 @@ select.form-control {
   appearance: none;
   height: var(--pgn-size-form-control-indicator-base);
   width: var(--pgn-size-form-control-indicator-base);
+  min-width: var(--pgn-size-form-control-indicator-base);
   background-color: var(--pgn-color-form-control-indicator-bg-base);
   border:
     solid var(--pgn-size-form-control-indicator-border-width)
@@ -468,6 +470,7 @@ select.form-control {
 
 .pgn__form-switch-input {
   width: var(--pgn-size-form-control-switch-width);
+  min-width: var(--pgn-size-form-control-switch-width);
   border-radius: var(--pgn-size-form-control-switch-indicator-border-radius);
   background-image: var(--pgn-other-content-form-control-switch-indicator-icon-off);
   background-position: left center;

package/src/Modal/AlertModal.jsx

@@ -20,11 +20,11 @@ function AlertModal({
       <ModalDialog.Header>
         <ModalDialog.Title>
           {icon && (
-          <Icon
-            data-testid="title-icon"
-            src={icon}
-            className={classNames('pgn__alert-modal__title_icon')}
-          />
+            <Icon
+              data-testid="title-icon"
+              src={icon}
+              className={classNames('pgn__alert-modal__title_icon')}
+            />
           )}
           {props.title}
         </ModalDialog.Title>

package/src/Modal/ModalDialog.tsx

@@ -53,7 +53,7 @@ interface Props {
   /** Specifies the z-index of the modal */
   zIndex?: number;
   /** Specifies whether overflow is visible in the modal */
-  isOverflowVisible?: boolean;
+  isOverflowVisible: boolean;
 }
 
 function ModalDialog({
@@ -70,7 +70,7 @@ function ModalDialog({
   isFullscreenOnMobile = false,
   isBlocking = false,
   zIndex,
-  isOverflowVisible = true,
+  isOverflowVisible,
 }: Props) {
   const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });
   const showFullScreen = (isFullscreenOnMobile && isMobile);

package/src/Modal/_ModalDialog.scss

@@ -143,6 +143,7 @@
 
   .pgn__modal-title {
     font-size: var(--pgn-typography-font-size-h3-base);
+    line-height: calc(var(--pgn-typography-font-size-h3-base) * var(--pgn-typography-headings-line-height));
     margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn
     text-align: start;
   }
@@ -330,7 +331,6 @@
   }
 
   .pgn__modal-title {
-    font-size: var(--pgn-typography-font-size-h4-base);
     display: flex;
     flex-grow: 1;
     align-items: center;

package/src/Modal/alert-modal.mdx

@@ -36,6 +36,7 @@ This is the alert style `ModalDialog` composition. `AlertModal` passes all of it
             <Button variant="danger">Submit</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <p>
           I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever.
@@ -67,6 +68,7 @@ const [isOpen, open, close] = useToggle(false);
             <Button variant="primary">Delete</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <p>
           Are your sure you want to delete this file? You can't undo this action.
@@ -95,6 +97,7 @@ const [isOpen, open, close] = useToggle(false);
             <Button variant="danger">Acknowledge errror</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <p>
           An unknown error has occured.
@@ -123,6 +126,7 @@ const [isOpen, open, close] = useToggle(false);
             <Button variant="success">Confirm</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <p>
           All good!

package/src/Modal/fullscreen-modal.mdx

@@ -38,6 +38,7 @@ The fullscreen `ModalDialog` composition. `FullscreenModal` passes all of its pr
             <Button>Submit</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <Container size="md">
           <p>

package/src/Modal/marketing-modal.mdx

@@ -50,6 +50,7 @@ The ``MarketingModal`` is a preconfigured `ModalDialog` that accepts an image an
             <Button>Submit</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <p>
           I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.

package/src/Modal/modal-dialog.mdx

@@ -47,7 +47,7 @@ label for the dialog element.
         variant={modalVariant}
         hasCloseButton
         isFullscreenOnMobile
-        isOverflowVisible
+        isOverflowVisible={false}
       >
         <ModalDialog.Header>
           <ModalDialog.Title>
@@ -125,7 +125,7 @@ label for the dialog element.
         size={modalSize}
         variant={modalVariant}
         hasCloseButton
-        isOverflowVisible
+        isOverflowVisible={false}
       >
         <ModalDialog.Hero>
           <ModalDialog.Hero.Background

package/src/Modal/standard-modal.mdx

@@ -38,6 +38,7 @@ The standard `ModalDialog` composition. `StandardModal` passes all of its props
             <Button>Submit</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <p>
           I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.

package/src/Modal/tests/AlertModal.test.jsx

@@ -42,6 +42,7 @@ describe('<AlertModal />', () => {
         isOpen={isOpen}
         onClose={closeFn}
         footerNode={<p>footer</p>}
+        isOverflowVisible={false}
       >
         <Body />
       </AlertModal>,
@@ -60,6 +61,7 @@ describe('<AlertModal />', () => {
           onClose={closeFn}
           icon={Info}
           footerNode={<p>footer</p>}
+          isOverflowVisible={false}
         >
           <Body />
         </AlertModal>,
@@ -77,6 +79,7 @@ describe('<AlertModal />', () => {
           onClose={closeFn}
           icon={Info}
           footerNode={<p>footer</p>}
+          isOverflowVisible={false}
         >
           <Body />
         </AlertModal>,
@@ -94,6 +97,7 @@ describe('<AlertModal />', () => {
           onClose={closeFn}
           icon={Info}
           footerNode={<p>footer</p>}
+          isOverflowVisible={false}
         >
           <Body />
         </AlertModal>,

package/src/Modal/tests/ModalDialog.test.tsx

@@ -14,7 +14,7 @@ describe('ModalDialog', () => {
         size="md"
         variant="default"
         hasCloseButton
-        isOverflowVisible
+        isOverflowVisible={false}
       >
         <ModalDialog.Header>
           <ModalDialog.Title>The title</ModalDialog.Title>
@@ -43,6 +43,7 @@ describe('ModalDialog', () => {
       <ModalDialog
         title="My dialog"
         onClose={onClose}
+        isOverflowVisible={false}
       >
         <ModalDialog.Header><ModalDialog.Title>The title</ModalDialog.Title></ModalDialog.Header>
         <ModalDialog.Body><p>The hidden content</p></ModalDialog.Body>
@@ -65,7 +66,7 @@ describe('ModalDialog with Hero', () => {
         size="md"
         variant="default"
         hasCloseButton
-        isOverflowVisible
+        isOverflowVisible={false}
       >
         <ModalDialog.Hero>
           <ModalDialog.Hero.Background backgroundSrc="imageurl" />

package/src/Toast/README.md

@@ -5,7 +5,7 @@ components:
 - Toast
 categories:
 - Overlays
-status: 'New'
+status: 'Stable'
 designStatus: 'Done'
 devStatus: 'Done'
 notes: ''
@@ -39,7 +39,7 @@ notes: ''
         Example of a basic Toast.
       </Toast>
 
-      <Button variant="primary" onClick={() => setShow(true)}>Show Toast</Button>
+      <Button onClick={() => setShow(true)}>Show Toast</Button>
     </>
   );
 }
@@ -64,7 +64,7 @@ notes: ''
         Success! Example of a Toast with a button.
       </Toast>
 
-      <Button variant="primary" onClick={() => setShow(true)}>Show Toast</Button>
+      <Button onClick={() => setShow(true)}>Show Toast</Button>
     </>
   );
 }
@@ -89,7 +89,7 @@ notes: ''
         Success! Example of a Toast with a link.
       </Toast>
 
-      <Button variant="primary" onClick={() => setShow(true)}>Show Toast</Button>
+      <Button onClick={() => setShow(true)}>Show Toast</Button>
     </>
   );
 }

package/src/Toast/{Toast.test.jsx → Toast.test.tsx}

@@ -1,12 +1,10 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import userEvent from '@testing-library/user-event';
 
 import Toast from '.';
 
-/* eslint-disable-next-line react/prop-types */
-function ToastWrapper({ children, ...props }) {
+function ToastWrapper({ children, ...props }: React.ComponentProps<typeof Toast>) {
   return (
     <IntlProvider locale="en">
       <Toast {...props}>
@@ -17,7 +15,7 @@ function ToastWrapper({ children, ...props }) {
 }
 
 describe('<Toast />', () => {
-  const onCloseHandler = () => {};
+  const onCloseHandler = jest.fn();
   const props = {
     onClose: onCloseHandler,
     show: true,
@@ -44,7 +42,7 @@ describe('<Toast />', () => {
         {...props}
         action={{
           label: 'Optional action',
-          onClick: () => {},
+          onClick: jest.fn(),
         }}
       >
         Success message.
@@ -55,38 +53,50 @@ describe('<Toast />', () => {
   });
   it('autohide is set to false on onMouseOver and true on onMouseLeave', async () => {
     render(
-      <ToastWrapper data-testid="toast" {...props}>
+      <ToastWrapper {...props}>
         Success message.
       </ToastWrapper>,
     );
-    const toast = screen.getByTestId('toast');
+    const toast = screen.getByRole('alert');
     await userEvent.hover(toast);
     setTimeout(() => {
-      expect(screen.getByText('Success message.')).toEqual(true);
+      expect(screen.getByText('Success message.')).toBeTruthy();
       expect(toast).toHaveLength(1);
     }, 6000);
     await userEvent.unhover(toast);
     setTimeout(() => {
-      expect(screen.getByText('Success message.')).toEqual(false);
+      expect(screen.getByText('Success message.')).toBeTruthy();
       expect(toast).toHaveLength(1);
     }, 6000);
   });
   it('autohide is set to false onFocus and true onBlur', async () => {
     render(
-      <ToastWrapper data-testid="toast" {...props}>
+      <ToastWrapper {...props}>
         Success message.
       </ToastWrapper>,
     );
-    const toast = screen.getByTestId('toast');
+    const toast = screen.getByRole('alert');
     toast.focus();
     setTimeout(() => {
-      expect(screen.getByText('Success message.')).toEqual(true);
+      expect(screen.getByText('Success message.')).toBeTruthy();
       expect(toast).toHaveLength(1);
     }, 6000);
     await userEvent.tab();
     setTimeout(() => {
-      expect(screen.getByText('Success message.')).toEqual(false);
+      expect(screen.getByText('Success message.')).toBeTruthy();
       expect(toast).toHaveLength(1);
     }, 6000);
   });
+  it('should contain aria-atomic and aria-live', async () => {
+    render(
+      <ToastWrapper {...props}>
+        Success message.
+      </ToastWrapper>,
+    );
+
+    const toast = screen.getByRole('alert');
+
+    expect(toast).toHaveAttribute('aria-atomic', 'true');
+    expect(toast).toHaveAttribute('aria-live', 'assertive');
+  });
 });

package/src/Toast/ToastContainer.tsx

@@ -0,0 +1,30 @@
+import { ReactNode, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+interface ToastContainerProps {
+  children: ReactNode;
+}
+
+const TOAST_ROOT_ID = 'toast-root';
+
+function ToastContainer({ children }: ToastContainerProps) {
+  const [rootElement, setRootElement] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      let existingElement = document.getElementById(TOAST_ROOT_ID);
+
+      if (!existingElement) {
+        existingElement = document.createElement('div');
+        existingElement.id = TOAST_ROOT_ID;
+        existingElement.className = 'toast-container';
+        document.body.appendChild(existingElement);
+      }
+      setRootElement(existingElement);
+    }
+  }, []);
+
+  return rootElement ? ReactDOM.createPortal(children, rootElement) : null;
+}
+
+export default ToastContainer;

package/src/Toast/index.scss

@@ -16,7 +16,7 @@
   background-color: var(--pgn-color-toast-bg);
   box-shadow: var(--pgn-elevation-toast-box-shadow);
   margin: 0;
-  padding: 1rem;
+  padding: var(--pgn-spacing-spacer-base);
   position: relative;
   border-radius: var(--pgn-size-toast-border-radius);
   z-index: 2;
@@ -49,7 +49,7 @@
     }
 
     & + .btn {
-      margin-top: 1rem;
+      margin-top: var(--pgn-spacing-spacer-base);
     }
   }
 

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

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-
 import BaseToast from 'react-bootstrap/Toast';
 import { useIntl } from 'react-intl';
 
@@ -14,16 +13,40 @@ import IconButton from '../IconButton';
 export const TOAST_CLOSE_LABEL_TEXT = 'Close';
 export const TOAST_DELAY = 5000;
 
+interface ToastAction {
+  label: string;
+  href?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+}
+
+interface ToastProps {
+  children: string;
+  onClose: () => void;
+  show: boolean;
+  action?: ToastAction;
+  closeLabel?: string;
+  delay?: number;
+  className?: string;
+}
+
 function Toast({
-  action, children, className, closeLabel, onClose, show, ...rest
-}) {
+  action,
+  children,
+  className,
+  closeLabel,
+  onClose,
+  show,
+  ...rest
+}: ToastProps) {
   const intl = useIntl();
   const [autoHide, setAutoHide] = useState(true);
+
   const intlCloseLabel = closeLabel || intl.formatMessage({
     id: 'pgn.Toast.closeLabel',
     defaultMessage: 'Close',
     description: 'Close label for Toast component',
   });
+
   return (
     <ToastContainer>
       <BaseToast
@@ -37,9 +60,7 @@ function Toast({
         show={show}
         {...rest}
       >
-        <div
-          className="toast-header"
-        >
+        <div className="toast-header">
           <p className="small">{children}</p>
           <div className="toast-header-btn-container">
             <IconButton

package/src/index.d.ts

@@ -17,6 +17,7 @@ export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalD
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
+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';
 export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggleHook';
@@ -163,7 +164,6 @@ export const
 // from './Tabs';
 /** @deprecated Replaced by `Form.Control`. */
 export const TextArea: any; // from './TextArea';
-export const Toast: any, TOAST_CLOSE_LABEL_TEXT: string, TOAST_DELAY: number; // from './Toast';
 /** @deprecated Replaced by `Form.Group`. */
 export const ValidationFormGroup: any; // from './ValidationFormGroup';
 export const TransitionReplace: any; // from './TransitionReplace';