@openedx/paragon 23.14.8 → 23.15.0

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

@@ -1,18 +1,30 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ElementType, ReactNode, createElement } from 'react';
 import classNames from 'classnames';
 import useArrowKeyNavigation from '../hooks/useArrowKeyNavigationHook';
 
+interface MenuProps {
+  /** Specifies class name to append to the base element */
+  className?: string;
+  /**
+   * Specifies the CSS selector string that indicates to which elements
+   * the user can navigate using the arrow keys
+   */
+  arrowKeyNavigationSelector?: string;
+  /** Specifies the base element */
+  as?: ElementType;
+  /** Specifies the content of the menu */
+  children?: ReactNode;
+}
 function Menu({
-  as,
-  arrowKeyNavigationSelector,
+  as = 'div',
+  arrowKeyNavigationSelector = 'a:not(:disabled),button:not(:disabled),input:not(:disabled)',
   children,
   ...props
-}) {
+}: MenuProps) {
   const parentRef = useArrowKeyNavigation({ selectors: arrowKeyNavigationSelector });
   const className = classNames(props.className, 'pgn__menu');
 
-  return React.createElement(
+  return createElement(
     as,
     {
       ...props,
@@ -28,25 +40,4 @@ function Menu({
   );
 }
 
-Menu.propTypes = {
-  /** Specifies class name to append to the base element */
-  className: PropTypes.string,
-  /**
-   * Specifies the CSS selector string that indicates to which elements
-   * the user can navigate using the arrow keys
-   */
-  arrowKeyNavigationSelector: PropTypes.string,
-  /** Specifies the base element */
-  as: PropTypes.elementType,
-  /** Specifies the content of the menu */
-  children: PropTypes.node,
-};
-
-Menu.defaultProps = {
-  className: undefined,
-  arrowKeyNavigationSelector: 'a:not(:disabled),button:not(:disabled),input:not(:disabled)',
-  as: 'div',
-  children: null,
-};
-
 export default Menu;

package/src/Modal/ModalDialogHeader.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -37,4 +36,9 @@ ModalDialogHeader.propTypes = {
   className: PropTypes.string,
 };
 
+ModalDialogHeader.defaultProps = {
+  as: 'div',
+  className: '',
+};
+
 export default ModalDialogHeader;

package/src/Modal/ModalLayer.tsx

@@ -4,15 +4,14 @@ import { FocusOn } from 'react-focus-on';
 import Portal from './Portal';
 import { ModalContextProvider } from './ModalContext';
 
-// istanbul ignore next
 function ModalBackdrop({ onClick }: { onClick?: () => void }) {
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       className="pgn__modal-backdrop"
       onClick={onClick}
       onKeyDown={onClick}
       data-testid="modal-backdrop"
+      role="presentation"
     />
   );
 }

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

@@ -5,7 +5,6 @@ import userEvent from '@testing-library/user-event';
 
 import ModalLayer from '../ModalLayer';
 
-/* eslint-disable react/prop-types */
 jest.mock('../Portal', () => function PortalMock(props: any) {
   const { children, ...otherProps } = props;
   return (
@@ -66,7 +65,7 @@ describe('<ModalLayer />', () => {
     });
   });
 
-  test('when isOpen is false the dialog is not rendered', () => {
+  it('when isOpen is false the dialog is not rendered', () => {
     render(
       <ModalLayer isOpen={false} onClose={jest.fn()}>
         <Dialog />

package/src/OverflowScroll/data/{constants.js → constants.ts}

@@ -1,3 +1 @@
-/* eslint-disable import/prefer-default-export */
-
 export const OVERFLOW_SCROLL_ITEM_CLASS = 'pgn__overflow-scroll-item';

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Close } from '../../icons';
 import Icon from '../Icon';
@@ -13,11 +12,34 @@ export const VARIANTS = {
   warning: 'warning',
   accentA: 'accentA',
   accentB: 'accentB',
-};
+} as const;
+
+interface PageBannerProps {
+  /** An element rendered inside the `Page Banner`. */
+  children: ReactNode;
+  /** Boolean used to control whether `Page Banner` is dismissible. */
+  dismissible: boolean;
+  /** An element to be set as the dismiss button's alt text (preferably a translated string). */
+  dismissAltText: string;
+  /** A function to be called on dismiss of the `Page Banner`. */
+  onDismiss: () => void;
+  /** Boolean used to control whether the Page Banner shows. */
+  show: boolean;
+  /** A string designating which color variant of the `Page Banner` to display.
+   * The full list of variants can be seen [here.](https://github.com/openedx/paragon/blob/release-23.x/src/PageBanner/index.tsx)
+   */
+  variant: keyof typeof VARIANTS;
+}
 
 function PageBanner({
-  children, dismissible, dismissAltText, onDismiss, show, variant, ...rest
-}) {
+  children,
+  dismissible = false,
+  dismissAltText = PAGE_BANNER_DISMISS_ALT_TEXT,
+  onDismiss = () => {},
+  show = true,
+  variant = VARIANTS.accentA,
+  ...rest
+}: PageBannerProps) {
   if (!show) {
     return null;
   }
@@ -52,28 +74,4 @@ function PageBanner({
   );
 }
 
-PageBanner.propTypes = {
-  /** An element rendered inside the `Page Banner`. */
-  children: PropTypes.node,
-  /** Boolean used to control whether `Page Banner` is dismissible. */
-  dismissible: PropTypes.bool,
-  /** An element to be set as the dismiss button's alt text (preferably a translated string). */
-  dismissAltText: PropTypes.node,
-  /** A function to be called on dismiss of the `Page Banner`. */
-  onDismiss: PropTypes.func,
-  /** Boolean used to control whether the Page Banner shows. */
-  show: PropTypes.bool,
-  /** A string designating which color variant of the `Page Banner` to display */
-  variant: PropTypes.oneOf([VARIANTS.light, VARIANTS.dark, VARIANTS.warning, VARIANTS.accentA, VARIANTS.accentB]),
-};
-
-PageBanner.defaultProps = {
-  children: undefined,
-  dismissible: false,
-  dismissAltText: PAGE_BANNER_DISMISS_ALT_TEXT,
-  onDismiss: () => {},
-  show: true,
-  variant: VARIANTS.accentA,
-};
-
 export default PageBanner;

package/src/ProductTour/index.jsx

@@ -111,16 +111,14 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     }
     setCurrentCheckpointData(null);
   };
-  /* eslint-disable */
   /**
    * Takes the final checkpoint array index value and looks for an existing onEnd callback.
-   * 
-   * If an onEnd callback exist on checkpointIndex value and it is the final checkpoint 
-   * in the array, the onEnd callback will be called for the parent, and individual onEnd object. 
-   * 
-   * @param {Integer} checkpointIndex 
+   *
+   * If an onEnd callback exist on checkpointIndex value and it is the final checkpoint
+   * in the array, the onEnd callback will be called for the parent, and individual onEnd object.
+   *
+   * @param {Integer} checkpointIndex
    */
-  /* eslint-enable */
   const handleEnd = (checkpointIndex) => {
     setIndex(0);
     setIsTourEnabled(false);

package/src/ProgressBar/utils.js

@@ -25,7 +25,6 @@ export const placeInfoAtZero = (
       horizontalMargin += annotationOnly ? 0.0 : elementParams.width;
     }
   }
-  // eslint-disable-next-line no-param-reassign
   ref.current.style[direction === 'rtl' ? 'marginRight' : 'marginLeft'] = `${-horizontalMargin}px`;
   return true;
 };

package/src/SelectableBox/tests/SelectableBox.test.jsx

@@ -38,7 +38,6 @@ describe('<SelectableBox />', () => {
     it('renders with radio input type if neither checkbox nor radio is passed', () => {
       // Mock the `console.error` is intentional because an invalid `type` prop
       // with `wrongType` specified for `ForwardRef` expects one of the ['radio','flag'] parameters.
-      // eslint-disable-next-line no-console
       const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
       render(<SelectableRadio type="wrongType" />);
       const selectableBox = screen.getByRole('button');

package/src/SelectableBox/utils.js

@@ -1,6 +1,5 @@
 import Form, { CheckboxControl, RadioControl } from '../Form';
 
-// eslint-disable-next-line import/prefer-default-export,consistent-return
 export const getInputType = (component, type) => {
   if (component === 'SelectableBox') {
     switch (type) {
@@ -21,4 +20,5 @@ export const getInputType = (component, type) => {
         return Form.RadioSet;
     }
   }
+  return null;
 };

package/src/Sheet/Sheet.test.jsx

@@ -6,11 +6,12 @@ import Sheet, { POSITIONS, VARIANTS } from '.';
 
 /* eslint-disable react/prop-types */
 jest.mock('./SheetContainer', () => function SheetContainerMock(props) {
-  const { children, ...otherProps } = props;
+  const { children, className, ...otherProps } = props;
+  const allClasses = ['sheet-container', className].filter(Boolean).join(' ');
   return (
-    <sheet-container {...otherProps}>
+    <div data-testid="sheet-container" className={allClasses} {...otherProps}>
       {children}
-    </sheet-container>
+    </div>
   );
 });
 
@@ -53,5 +54,64 @@ describe('<Sheet />', () => {
       const { container: container2 } = render(<Sheet />);
       expect(container2.firstChild).not.toBeNull();
     });
+
+    it('renders with custom className', () => {
+      const customClassName = 'custom-class';
+      const { container } = render(<Sheet className={customClassName} />);
+      const sheetElement = container.querySelector('.pgn__sheet-component');
+
+      expect(sheetElement).toBeInTheDocument();
+      expect(sheetElement).toHaveClass('pgn__sheet-component');
+      expect(sheetElement).toHaveClass(customClassName);
+    });
+
+    it('handles multiple custom className', () => {
+      const customClasses = 'class-one class-two';
+      const { container } = render(<Sheet className={customClasses} />);
+      const sheetElement = container.querySelector('.pgn__sheet-component');
+
+      expect(sheetElement).toHaveClass('pgn__sheet-component');
+      expect(sheetElement).toHaveClass('class-one');
+      expect(sheetElement).toHaveClass('class-two');
+    });
+
+    it('renders with custom className on SheetContainer', () => {
+      const customClassName = 'custom-container-class';
+      const { getByTestId } = render(<Sheet containerClassName={customClassName} />);
+      const sheetContainer = getByTestId('sheet-container');
+
+      expect(sheetContainer).toBeInTheDocument();
+      expect(sheetContainer).toHaveClass('sheet-container');
+      expect(sheetContainer).toHaveClass(customClassName);
+    });
+
+    it('handles multiple custom className values on SheetContainer', () => {
+      const customClasses = 'container-one container-two';
+      const { getByTestId } = render(<Sheet containerClassName={customClasses} />);
+      const sheetContainer = getByTestId('sheet-container');
+
+      expect(sheetContainer).toBeInTheDocument();
+      expect(sheetContainer).toHaveClass('sheet-container');
+      expect(sheetContainer).toHaveClass('container-one');
+      expect(sheetContainer).toHaveClass('container-two');
+    });
+
+    it('handles className and containerClassName simultaneously', () => {
+      const containerClass = 'container-class';
+      const sheetClass = 'sheet-class';
+      const { getByTestId, container } = render(
+        <Sheet containerClassName={containerClass} className={sheetClass} />,
+      );
+      const sheetContainer = getByTestId('sheet-container');
+      const sheetElement = container.querySelector('.pgn__sheet-component');
+
+      expect(sheetContainer).toBeInTheDocument();
+      expect(sheetContainer).toHaveClass('sheet-container');
+      expect(sheetContainer).toHaveClass(containerClass);
+
+      expect(sheetElement).toBeInTheDocument();
+      expect(sheetElement).toHaveClass('pgn__sheet-component');
+      expect(sheetElement).toHaveClass(sheetClass);
+    });
   });
 });

package/src/Sheet/SheetContainer.jsx

@@ -1,23 +1,44 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 class SheetContainer extends React.Component {
   constructor(props) {
     super(props);
     this.sheetRootName = 'sheet-root';
+    this.updateRootElement();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.className !== this.props.className) {
+      this.updateRootElement();
+    }
+  }
+
+  updateRootElement = () => {
+    const { className } = this.props;
+
+    /* istanbul ignore next */
     if (typeof document === 'undefined') {
       this.rootElement = null;
-    } else if (document.getElementById(this.sheetRootName)) {
-      this.rootElement = document.getElementById(this.sheetRootName);
-    } else {
-      const rootElement = document.createElement('div');
+      return;
+    }
+
+    let rootElement = document.getElementById(this.sheetRootName);
+
+    if (!rootElement) {
+      rootElement = document.createElement('div');
       rootElement.setAttribute('id', this.sheetRootName);
-      rootElement.setAttribute('class', 'sheet-container');
       rootElement.setAttribute('data-testid', 'sheet-container');
-      this.rootElement = document.body.appendChild(rootElement);
+      document.body.appendChild(rootElement);
     }
-  }
+
+    const classes = classNames('sheet-container', className);
+    rootElement.setAttribute('class', classes);
+
+    this.rootElement = rootElement;
+  };
 
   render() {
     if (this.rootElement) {
@@ -32,6 +53,12 @@ class SheetContainer extends React.Component {
 
 SheetContainer.propTypes = {
   children: PropTypes.node.isRequired,
+  /** Additional CSS classes to apply to the sheet container */
+  className: PropTypes.string,
+};
+
+SheetContainer.defaultProps = {
+  className: undefined,
 };
 
 export default SheetContainer;

package/src/Sheet/SheetContainer.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import SheetContainer from './SheetContainer';
 
 const childId1 = 'sheet-container-TEST-child1';
@@ -31,4 +31,37 @@ describe('<SheetContainer />', () => {
     const childEl2 = screen.getByText(childContent2);
     expect(childEl2).toBeTruthy();
   });
+
+  it('applies custom className if provided', () => {
+    const customClass = 'custom-class';
+    render(<SheetContainer className={customClass}>{child1}</SheetContainer>);
+    const rootEl = screen.getByTestId('sheet-container');
+    expect(rootEl).toBeTruthy();
+    expect(rootEl.className).toContain('sheet-container');
+    expect(rootEl.className).toContain(customClass);
+  });
+
+  it('calls updateRootElement when className changes (componentDidUpdate)', () => {
+    const { rerender } = render(
+      <SheetContainer className="first-class">
+        <div>Content</div>
+      </SheetContainer>,
+    );
+
+    const sheetRoot = document.getElementById('sheet-root');
+    expect(sheetRoot).toHaveClass('sheet-container');
+    expect(sheetRoot).toHaveClass('first-class');
+
+    act(() => {
+      rerender(
+        <SheetContainer className="second-class">
+          <div>Content</div>
+        </SheetContainer>,
+      );
+    });
+
+    expect(sheetRoot).toHaveClass('sheet-container');
+    expect(sheetRoot).toHaveClass('second-class');
+    expect(sheetRoot).not.toHaveClass('first-class');
+  });
 });

package/src/Sheet/__snapshots__/Sheet.test.jsx.snap

@@ -1,7 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Sheet /> snapshots blocking, left snapshot 1`] = `
-<sheet-container>
+<div
+  className="sheet-container"
+  data-testid="sheet-container"
+>
   <div
     className="pgn__sheet-skrim"
     role="presentation"
@@ -28,11 +31,14 @@ exports[`<Sheet /> snapshots blocking, left snapshot 1`] = `
       />
     </div>
   </focus-on>
-</sheet-container>
+</div>
 `;
 
 exports[`<Sheet /> snapshots dark, right snapshot 1`] = `
-<sheet-container>
+<div
+  className="sheet-container"
+  data-testid="sheet-container"
+>
   <div
     className="pgn__sheet-skrim hidden"
     role="presentation"
@@ -59,11 +65,14 @@ exports[`<Sheet /> snapshots dark, right snapshot 1`] = `
       />
     </div>
   </focus-on>
-</sheet-container>
+</div>
 `;
 
 exports[`<Sheet /> snapshots default args snapshot: bottom, show, light 1`] = `
-<sheet-container>
+<div
+  className="sheet-container"
+  data-testid="sheet-container"
+>
   <div
     className="pgn__sheet-skrim hidden"
     role="presentation"
@@ -96,5 +105,5 @@ exports[`<Sheet /> snapshots default args snapshot: bottom, show, light 1`] = `
       </div>
     </div>
   </focus-on>
-</sheet-container>
+</div>
 `;

package/src/Sheet/index.jsx

@@ -26,13 +26,16 @@ class Sheet extends React.Component {
   }
 
   renderSheet() {
-    const { children, position, variant } = this.props;
+    const {
+      children, position, variant, className,
+    } = this.props;
     return (
       <div
         className={classNames(
           'pgn__sheet-component',
           `pgn__sheet__${variant}`,
           position,
+          className,
         )}
         role="alert"
         aria-live="polite"
@@ -50,12 +53,13 @@ class Sheet extends React.Component {
       blocking,
       show,
       onClose,
+      containerClassName,
     } = this.props;
     if (!show) {
       return null;
     }
     return (
-      <SheetContainer>
+      <SheetContainer className={classNames(containerClassName)}>
         <div
           className={classNames(
             'pgn__sheet-skrim',
@@ -80,6 +84,10 @@ Sheet.propTypes = {
   blocking: PropTypes.bool,
   /** an element rendered inside the sheet */
   children: PropTypes.node,
+  /** A class that is appended to the sheet container element. */
+  containerClassName: PropTypes.string,
+  /** A class that is appended to the sheet element. */
+  className: PropTypes.string,
   /** a string designating the sheet's position on the window */
   position: PropTypes.oneOf([
     POSITIONS.left,
@@ -102,6 +110,8 @@ Sheet.defaultProps = {
   show: true,
   onClose: () => {},
   variant: VARIANTS.light,
+  containerClassName: undefined,
+  className: undefined,
 };
 
 export default Sheet;

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

@@ -1,20 +1,32 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef, ForwardedRef } from 'react';
 import classNames from 'classnames';
 
-const DIRECTION_VARIANTS = [
-  'horizontal',
-  'vertical',
-];
+interface StackProps {
+  /** Specifies the content of the `Stack`. */
+  children: React.ReactNode;
+  /** Specifies direction of the children blocks (column/row). */
+  direction?: 'horizontal' | 'vertical';
+  /**
+   * Specifies inner space between children blocks.
+   *
+   * Valid values are based on `the spacing classes`:
+   * `0, 0.5, ... 6`.
+   */
+  gap?: number;
+  /** Specifies the order of the children. */
+  reversed?: boolean;
+  /** Specifies an additional `className` to add to the base element. */
+  className?: string;
+}
 
 const Stack = forwardRef(({
-  direction,
-  gap,
-  reversed,
+  direction = 'vertical',
+  gap = 0,
+  reversed = false,
   children,
   className,
   ...rest
-}, ref) => (
+}: StackProps, ref: ForwardedRef<HTMLDivElement>) => (
   <div
     ref={ref}
     className={classNames(
@@ -29,29 +41,4 @@ const Stack = forwardRef(({
   </div>
 ));
 
-Stack.propTypes = {
-  /** Specifies the content of the `Stack`. */
-  children: PropTypes.node.isRequired,
-  /** Specifies direction of the children blocks (column/row). */
-  direction: PropTypes.oneOf(DIRECTION_VARIANTS),
-  /**
-   * Specifies inner space between children blocks.
-   *
-   * Valid values are based on `the spacing classes`:
-   * `0, 0.5, ... 6`.
-   */
-  gap: PropTypes.number,
-  /** Specifies the order of the children. */
-  reversed: PropTypes.bool,
-  /** Specifies an additional `className` to add to the base element. */
-  className: PropTypes.string,
-};
-
-Stack.defaultProps = {
-  direction: 'vertical',
-  gap: 0,
-  className: undefined,
-  reversed: false,
-};
-
 export default Stack;

package/src/Sticky/index.jsx

@@ -18,7 +18,6 @@ const Sticky = React.forwardRef(({
   const defaultRef = React.useRef();
   const resolvedRef = ref || defaultRef;
 
-  // eslint-disable-next-line consistent-return
   useLayoutEffect(() => {
     if (resolvedRef.current) {
       const stickyElement = resolvedRef.current;
@@ -45,6 +44,7 @@ const Sticky = React.forwardRef(({
         observer.unobserve(stickyElement);
       };
     }
+    return undefined;
   }, [position, resolvedRef]);
 
   return (

package/src/Tabs/{Tab.jsx → Tab.tsx}

@@ -1,33 +1,25 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import BaseTab from 'react-bootstrap/Tab';
 
-function Tab(props) {
-  return <BaseTab {...props} />;
-}
-
-Tab.propTypes = {
+interface TabProps {
   /** Specifies the `Tab` navigation title. */
-  title: PropTypes.node.isRequired,
+  title: React.ReactNode;
   /** Specifies notification bubble content. It appears on the top right of the `Tab`. */
-  notification: PropTypes.node,
+  notification?: React.ReactNode;
   /** Specifies whether `Tab` is disabled. */
-  disabled: PropTypes.bool,
+  disabled?: boolean;
   /**
    * A unique identifier for the Component, the `eventKey` makes it distinguishable
    * from others in a set. Similar to React's `key` prop, in that it only needs to be
    * unique amongst the Components siblings, not globally.
    */
-  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  eventKey?: string | number;
   /** Specifies class name to append to the base element. */
-  tabClassName: PropTypes.string,
-};
+  tabClassName?: string;
+}
 
-Tab.defaultProps = {
-  notification: undefined,
-  disabled: undefined,
-  eventKey: undefined,
-  tabClassName: undefined,
-};
+function Tab(props: TabProps) {
+  return <BaseTab {...props} />;
+}
 
 export default Tab;