@openedx/paragon 23.0.0-alpha.4 → 23.0.0-alpha.5

package/dist/hooks/useArrowKeyNavigation.js

@@ -21,6 +21,7 @@ function handleEnter(_ref) {
   event.preventDefault();
 }
 function handleArrowKey(_ref2) {
+  var _nextElement;
   var event = _ref2.event,
     currentIndex = _ref2.currentIndex,
     availableElements = _ref2.availableElements;
@@ -44,9 +45,7 @@ function handleArrowKey(_ref2) {
     var _availableElements = _slicedToArray(availableElements, 1);
     nextElement = _availableElements[0];
   }
-
-  // eslint-disable-next-line no-unused-expressions
-  nextElement && nextElement.focus();
+  (_nextElement = nextElement) === null || _nextElement === void 0 ? void 0 : _nextElement.focus();
   event.preventDefault();
 }
 

package/dist/hooks/useArrowKeyNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useArrowKeyNavigation.js","names":["useRef","useEffect","handleEnter","_ref","event","currentIndex","activeElement","click","preventDefault","handleArrowKey","_ref2","availableElements","focus","nextElement","key","length","_availableElements","_slicedToArray","handleEvents","_ref3","_ref3$ignoredKeys","ignoredKeys","parentNode","_ref3$selectors","selectors","includes","_document","document","contains","querySelectorAll","Array","from","findIndex","availableElement","useArrowKeyNavigation","props","_ref4","eventHandler","current","addEventListener","removeEventListener"],"sources":["../../src/hooks/useArrowKeyNavigation.jsx"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\n/**\n * A React hook to enable arrow key navigation on a component.\n */\n\nfunction handleEnter({ event, currentIndex, activeElement }) {\n  if (currentIndex === -1) { return; }\n  activeElement.click();\n  event.preventDefault();\n}\n\nfunction handleArrowKey({ event, currentIndex, availableElements }) {\n  // If the focus isn't in the container, focus on the first thing\n  if (currentIndex === -1) { availableElements[0].focus(); }\n\n  // Move the focus up or down. Wrap around ends of list.\n  let nextElement;\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    nextElement = availableElements[(currentIndex + 1) % availableElements.length];\n  }\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    nextElement = currentIndex - 1 < 0\n      ? availableElements[currentIndex - 1 + availableElements.length]\n      : availableElements[currentIndex - 1];\n  }\n  if (event.key === 'End') {\n    nextElement = availableElements[availableElements.length - 1];\n  }\n  if (event.key === 'Home') {\n    [nextElement] = availableElements;\n  }\n\n  // eslint-disable-next-line no-unused-expressions\n  nextElement && nextElement.focus();\n  event.preventDefault();\n}\n\n/**\n * Implement arrow key navigation for the given parentNode\n */\nfunction handleEvents({\n  event,\n  ignoredKeys = [],\n  parentNode,\n  selectors = 'a,button,input',\n}) {\n  if (!parentNode) { return; }\n\n  const { key } = event;\n\n  if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Enter', 'Home', 'End'].includes(key)\n      || ignoredKeys.includes(key)) {\n    return;\n  }\n\n  const { activeElement } = document;\n\n  // If we're not inside the container, don't do anything\n  if (!parentNode.contains(activeElement)) { return; }\n\n  // Get the list of elements we're allowed to scroll through\n  const availableElements = parentNode.querySelectorAll(selectors);\n\n  // No elements are available to loop through.\n  if (!availableElements.length) { return; }\n\n  // Which index is currently selected\n  const currentIndex = Array.from(availableElements).findIndex(\n    (availableElement) => availableElement === activeElement,\n  );\n\n  if (key === 'Enter') {\n    handleEnter({ event, currentIndex, activeElement });\n  }\n  handleArrowKey({ event, currentIndex, availableElements });\n}\n\nexport default function useArrowKeyNavigation(props) {\n  const { selectors, ignoredKeys } = props || {};\n  const parentNode = useRef();\n\n  useEffect(() => {\n    const eventHandler = (event) => {\n      handleEvents({\n        event, ignoredKeys, parentNode: parentNode.current, selectors,\n      });\n    };\n\n    document.addEventListener('keydown', eventHandler);\n\n    return () => document.removeEventListener('keydown', eventHandler);\n  }, [ignoredKeys, selectors]);\n\n  return parentNode;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"useArrowKeyNavigation.js","names":["useRef","useEffect","handleEnter","_ref","event","currentIndex","activeElement","click","preventDefault","handleArrowKey","_ref2","_nextElement","availableElements","focus","nextElement","key","length","_availableElements","_slicedToArray","handleEvents","_ref3","_ref3$ignoredKeys","ignoredKeys","parentNode","_ref3$selectors","selectors","includes","_document","document","contains","querySelectorAll","Array","from","findIndex","availableElement","useArrowKeyNavigation","props","_ref4","eventHandler","current","addEventListener","removeEventListener"],"sources":["../../src/hooks/useArrowKeyNavigation.jsx"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\n/**\n * A React hook to enable arrow key navigation on a component.\n */\n\nfunction handleEnter({ event, currentIndex, activeElement }) {\n  if (currentIndex === -1) { return; }\n  activeElement.click();\n  event.preventDefault();\n}\n\nfunction handleArrowKey({ event, currentIndex, availableElements }) {\n  // If the focus isn't in the container, focus on the first thing\n  if (currentIndex === -1) { availableElements[0].focus(); }\n\n  // Move the focus up or down. Wrap around ends of list.\n  let nextElement;\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    nextElement = availableElements[(currentIndex + 1) % availableElements.length];\n  }\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    nextElement = currentIndex - 1 < 0\n      ? availableElements[currentIndex - 1 + availableElements.length]\n      : availableElements[currentIndex - 1];\n  }\n  if (event.key === 'End') {\n    nextElement = availableElements[availableElements.length - 1];\n  }\n  if (event.key === 'Home') {\n    [nextElement] = availableElements;\n  }\n\n  nextElement?.focus();\n  event.preventDefault();\n}\n\n/**\n * Implement arrow key navigation for the given parentNode\n */\nfunction handleEvents({\n  event,\n  ignoredKeys = [],\n  parentNode,\n  selectors = 'a,button,input',\n}) {\n  if (!parentNode) { return; }\n\n  const { key } = event;\n\n  if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Enter', 'Home', 'End'].includes(key)\n      || ignoredKeys.includes(key)) {\n    return;\n  }\n\n  const { activeElement } = document;\n\n  // If we're not inside the container, don't do anything\n  if (!parentNode.contains(activeElement)) { return; }\n\n  // Get the list of elements we're allowed to scroll through\n  const availableElements = parentNode.querySelectorAll(selectors);\n\n  // No elements are available to loop through.\n  if (!availableElements.length) { return; }\n\n  // Which index is currently selected\n  const currentIndex = Array.from(availableElements).findIndex(\n    (availableElement) => availableElement === activeElement,\n  );\n\n  if (key === 'Enter') {\n    handleEnter({ event, currentIndex, activeElement });\n  }\n  handleArrowKey({ event, currentIndex, availableElements });\n}\n\nexport default function useArrowKeyNavigation(props) {\n  const { selectors, ignoredKeys } = props || {};\n  const parentNode = useRef();\n\n  useEffect(() => {\n    const eventHandler = (event) => {\n      handleEvents({\n        event, ignoredKeys, parentNode: parentNode.current, selectors,\n      });\n    };\n\n    document.addEventListener('keydown', eventHandler);\n\n    return () => document.removeEventListener('keydown', eventHandler);\n  }, [ignoredKeys, selectors]);\n\n  return parentNode;\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/index.d.ts

@@ -8,10 +8,15 @@ export { default as Bubble } from './Bubble';
 export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
+export { default as Container, ContainerSize } from './Container';
 export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
+export { default as ModalContext } from './Modal/ModalContext';
+export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } 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 Tooltip } from './Tooltip';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
@@ -38,10 +43,11 @@ export const
 export const
   Carousel: any, CarouselItem: any, CAROUSEL_NEXT_LABEL_TEXT: any, CAROUSEL_PREV_LABEL_TEXT: any;
 // from './Carousel';
+/** @deprecated Replaced by `Form.Checkbox`. */
 export const CheckBox: any; // from './CheckBox';
+/** @deprecated Replaced by `Form.Checkbox` and `Form.CheckboxSet`. */
 export const CheckBoxGroup: any; // from './CheckBoxGroup';
 export const CloseButton: any; // from './CloseButton';
-export const Container: any; // from './Container';
 export const Layout: any, Col: any, Row: any; // from './Layout';
 export const Collapse: any; // from './Collapse';
 export const Collapsible: any; // from './Collapsible';
@@ -53,6 +59,7 @@ export const
   SplitButton: any;
 // from './Dropdown';
 export const Fade: any; // from './Fade';
+/** @deprecated */
 export const Fieldset: any; // from './Fieldset';
 export const
   Form: any,
@@ -77,28 +84,30 @@ export const
   InputGroup: any;
 // from './Form';
 export const IconButtonToggle: any; // from './IconButtonToggle';
+/** @deprecated Replaced by `Form.Control`. */
 export const Input: any; // from './Input';
+/** @deprecated Replaced by `Form.Control`. */
 export const InputSelect: any; // from './InputSelect';
+/** @deprecated Replaced by `Form.Control`. */
 export const InputText: any; // from './InputText';
 export const Image: any, Figure; // from './Image';
+/** @deprecated */
 export const ListBox: any; // from './ListBox';
+/** @deprecated */
 export const ListBoxOption: any; // from './ListBoxOption';
 export const MailtoLink: any, MAIL_TO_LINK_EXTERNAL_LINK_ALTERNATIVE_TEXT: string, MAIL_TO_LINK_EXTERNAL_LINK_TITLE: string; // from './MailtoLink';
 export const Media: any; // from './Media';
 export const Menu: any; // from './Menu';
 export const MenuItem: any; // from './Menu/MenuItem';
 export const SelectMenu: any, SELECT_MENU_DEFAULT_MESSAGE: string; // from './Menu/SelectMenu';
+/** @deprecated Use `ModalDialog` instead. */
 export const Modal: any; // from './Modal';
 export const ModalCloseButton: any; // from './Modal/ModalCloseButton';
 export const FullscreenModal: any, FULLSCREEN_MODAL_CLOSE_LABEL: string; // from './Modal/FullscreenModal';
 export const MarketingModal: any; // from './Modal/MarketingModal';
 export const StandardModal: any, STANDARD_MODAL_CLOSE_LABEL: string; // from './Modal/StandardModal';
 export const AlertModal: any; // from './Modal/AlertModal';
-export const ModalLayer: any; // from './Modal/ModalLayer';
-export const ModalDialog: any, MODAL_DIALOG_CLOSE_LABEL: string; // from './Modal/ModalDialog';
 export const ModalPopup: any; // from './Modal/ModalPopup';
-export const ModalContext: any; // from './Modal/ModalContext';
-export const Portal: any; // from './Modal/Portal';
 export const PopperElement: any; // from './Modal/PopperElement';
 
 export const
@@ -122,6 +131,7 @@ export const
 export const Popover: any, PopoverTitle: any, PopoverContent: any; // from './Popover';
 export const ProgressBar: any; // from './ProgressBar';
 export const ProductTour: any; // from './ProductTour';
+/** @deprecated Replaced by `Form.Radio` and `Form.RadioSet`. */
 export const RadioButtonGroup: any, RadioButton: any; // from './RadioButtonGroup';
 export const ResponsiveEmbed: any; // from './ResponsiveEmbed';
 export const
@@ -135,7 +145,9 @@ export const Sheet: any; // from './Sheet';
 export const Spinner: any; // from './Spinner';
 export const Stepper: any; // from './Stepper';
 export const StatefulButton: any; // from './StatefulButton';
+/** @deprecated Replaced by `Alert`. */
 export const StatusAlert: any; // from './StatusAlert';
+/** @deprecated Replaced by `DataTable`. */
 export const Table: any; // from './Table';
 export const
   Tabs: any,
@@ -144,8 +156,10 @@ export const
   TabContent: any,
   TabPane: any;
 // 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';
 export const ValidationMessage: any; // from './ValidationMessage';

package/dist/index.js

@@ -8,10 +8,15 @@ export { default as Bubble } from './Bubble';
 export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
+export { default as Container } from './Container';
 export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
+export { default as ModalContext } from './Modal/ModalContext';
+export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } 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 Tooltip } from './Tooltip';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
@@ -39,7 +44,6 @@ export {
   default as Carousel, CarouselItem, CAROUSEL_NEXT_LABEL_TEXT, CAROUSEL_PREV_LABEL_TEXT,
 } from './Carousel';
 export { default as CloseButton } from './CloseButton';
-export { default as Container } from './Container';
 export { default as Layout, Col, Row } from './Layout';
 export { default as Collapse } from './Collapse';
 export { default as Collapsible } from './Collapsible';
@@ -85,11 +89,7 @@ export { default as FullscreenModal, FULLSCREEN_MODAL_CLOSE_LABEL } from './Moda
 export { default as MarketingModal } from './Modal/MarketingModal';
 export { default as StandardModal, STANDARD_MODAL_CLOSE_LABEL } from './Modal/StandardModal';
 export { default as AlertModal } from './Modal/AlertModal';
-export { default as ModalLayer } from './Modal/ModalLayer';
-export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
 export { default as ModalPopup } from './Modal/ModalPopup';
-export { default as ModalContext } from './Modal/ModalContext';
-export { default as Portal } from './Modal/Portal';
 export { default as PopperElement } from './Modal/PopperElement';
 
 export {

package/icons/es5/Newsstand.js

@@ -0,0 +1,15 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from "react";
+var SvgNewsstand = function SvgNewsstand(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    height: 24,
+    viewBox: "0 -960 960 960",
+    width: 24,
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M80-160v-80h800v80H80Zm80-160v-320h80v320h-80Zm160 0v-480h80v480h-80Zm160 0v-480h80v480h-80Zm280 0L600-600l70-40 160 280-70 40Z",
+    fill: "currentColor"
+  }));
+};
+export default SvgNewsstand;

package/icons/es5/index.js

@@ -1381,6 +1381,7 @@ export { default as NetworkWifi3Bar } from "./NetworkWifi3Bar";
 export { default as NewLabel } from "./NewLabel";
 export { default as NewReleases } from "./NewReleases";
 export { default as Newspaper } from "./Newspaper";
+export { default as Newsstand } from "./Newsstand";
 export { default as NextPlan } from "./NextPlan";
 export { default as NextWeek } from "./NextWeek";
 export { default as Nfc } from "./Nfc";

package/icons/es5/index.ts

@@ -1382,6 +1382,7 @@ export { default as NetworkWifi3Bar } from "./NetworkWifi3Bar";
 export { default as NewLabel } from "./NewLabel";
 export { default as NewReleases } from "./NewReleases";
 export { default as Newspaper } from "./Newspaper";
+export { default as Newsstand } from "./Newsstand";
 export { default as NextPlan } from "./NextPlan";
 export { default as NextWeek } from "./NextWeek";
 export { default as Nfc } from "./Nfc";

package/icons/jsx/Newsstand.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+const SvgNewsstand = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={24}
+    viewBox="0 -960 960 960"
+    width={24}
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M80-160v-80h800v80H80Zm80-160v-320h80v320h-80Zm160 0v-480h80v480h-80Zm160 0v-480h80v480h-80Zm280 0L600-600l70-40 160 280-70 40Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgNewsstand;

package/icons/jsx/index.jsx

@@ -1381,6 +1381,7 @@ export { default as NetworkWifi3Bar } from "./NetworkWifi3Bar";
 export { default as NewLabel } from "./NewLabel";
 export { default as NewReleases } from "./NewReleases";
 export { default as Newspaper } from "./Newspaper";
+export { default as Newsstand } from "./Newsstand";
 export { default as NextPlan } from "./NextPlan";
 export { default as NextWeek } from "./NextWeek";
 export { default as Nfc } from "./Nfc";

package/icons/svg/newsstand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M80-160v-80h800v80H80Zm80-160v-320h80v320h-80Zm160 0v-480h80v480h-80Zm160 0v-480h80v480h-80Zm280 0L600-600l70-40 160 280-70 40Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.0.0-alpha.4",
+  "version": "23.0.0-alpha.5",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -115,7 +115,7 @@
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@edx/eslint-config": "^3.2.0",
+    "@edx/eslint-config": "^4.2.0",
     "@edx/stylelint-config-edx": "^2.3.0",
     "@edx/typescript-config": "^1.1.0",
     "@formatjs/cli": "^5.0.2",

package/src/Card/index.scss

@@ -352,6 +352,8 @@ a.pgn__card {
       bottom: calc(-1 * var(--pgn-spacing-card-logo-bottom-offset-base));
       width: var(--pgn-size-card-logo-width);
       height: var(--pgn-size-card-logo-height);
+      object-fit: scale-down;
+      object-position: center center;
       border-radius: var(--pgn-size-card-border-radius-logo);
       box-shadow: var(--pgn-elevation-box-shadow-level-1);
       padding: map_get($spacers, 2);

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Container from '.';
+import Container, { type ContainerSize } from '.';
 
-const getClassNames = (container) => container.className.split(' ');
+const getClassNames = (container: HTMLElement) => container.className.split(' ');
 
 describe('<Container />', () => {
   it('displays children', () => {
@@ -12,32 +12,38 @@ describe('<Container />', () => {
 
   it('adds the .container-fluid class', () => {
     const { container } = render(<Container>Content</Container>);
-    const containerElement = container.firstChild;
+    const containerElement = container.firstChild as HTMLElement;
     expect(getClassNames(containerElement)).toContain('container-fluid');
   });
 
   it('adds the .container class', () => {
     const { container } = render(<Container fluid={false}>Content</Container>);
-    const containerElement = container.firstChild;
-    expect(getClassNames(containerElement)).toContain('container');
+    const containerElement = container.firstChild as HTMLElement;
+    expect(getClassNames(containerElement!)).toContain('container');
     expect(getClassNames(containerElement)).not.toContain('container-fluid');
   });
 
-  ['xs', 'sm', 'md', 'lg', 'xl'].forEach((size) => {
+  ['xs', 'sm', 'md', 'lg', 'xl'].forEach((size: ContainerSize) => {
     it(`adds the .container-mw-${size} class`, () => {
       const { container } = render(<Container size={size}>Content</Container>);
-      const containerElement = container.firstChild;
+      const containerElement = container.firstChild as HTMLElement;
       expect(getClassNames(containerElement)).toContain(`container-mw-${size}`);
     });
   });
 
+  it('does not add a size class when size is not specified', () => {
+    const { container } = render(<Container>Content</Container>);
+    const containerElement = container.firstChild as HTMLElement;
+    expect(getClassNames(containerElement)).toEqual(['container-fluid']);
+  });
+
   it('preserves custom class names', () => {
     const { container } = render(
       <Container className="custom-class" size="md">
         Content
       </Container>,
     );
-    const containerElement = container.firstChild;
+    const containerElement = container.firstChild as HTMLElement;
     expect(getClassNames(containerElement)).toContain('container-mw-md');
     expect(getClassNames(containerElement)).toContain('container-fluid');
     expect(getClassNames(containerElement)).toContain('custom-class');

package/src/Container/README.md

@@ -19,6 +19,10 @@ The base container to contain, pad, and center content in the viewport. This com
 ```jsx live
 <div style={{ overflowX: 'auto' }}>
     <div style={{ width: '1500px', border: 'solid 3px red' }}>
+        <Container className="bg-danger-300 my-4">
+          The content in this container doesn't have a max width
+        </Container>
+        
         <Container size="xl" className="bg-danger-300 my-4">
           The content in this container won't exceed the extra large width.
         </Container>

package/src/Container/index.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import RBContainer, { type ContainerProps as RBContainerProps } from 'react-bootstrap/Container';
+
+import type { ComponentWithAsProp } from '../utils/types/bootstrap';
+
+enum ContainerSizeClass {
+  xs = 'container-mw-xs',
+  sm = 'container-mw-sm',
+  md = 'container-mw-md',
+  lg = 'container-mw-lg',
+  xl = 'container-mw-xl',
+}
+
+export type ContainerSize = keyof typeof ContainerSizeClass;
+
+interface ContainerProps extends RBContainerProps {
+  size?: ContainerSize;
+}
+
+type ContainerType = ComponentWithAsProp<'div', ContainerProps>;
+
+const Container: ContainerType = React.forwardRef<Element, ContainerProps>(({
+  size,
+  children,
+  ...props
+}, ref) => (
+  <RBContainer
+    {...props}
+    ref={ref}
+    className={classNames(
+      props.className,
+      size && ContainerSizeClass[size],
+    )}
+  >
+    {children}
+  </RBContainer>
+));
+
+Container.propTypes = {
+  ...RBContainer.propTypes,
+  /** Override the base element */
+  as: PropTypes.elementType,
+  /** Specifies the contents of the container */
+  children: PropTypes.node,
+  /** Fill all available space at any breakpoint */
+  fluid: PropTypes.bool,
+  /** Set the maximum width for the container. Omiting the prop will remove the max-width */
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /** Overrides underlying component base CSS class name */
+  bsPrefix: PropTypes.string,
+};
+
+Container.defaultProps = {
+  as: 'div',
+  children: undefined,
+  fluid: true,
+  size: undefined,
+  bsPrefix: 'container',
+};
+
+export default Container;

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

@@ -8,6 +8,13 @@ import DataTableContext from '../../DataTableContext';
 import * as selectActions from '../data/actions';
 import { getRowIds } from '../data/helpers';
 
+function DataTableContextChild() {
+  const contextValue = useContext(DataTableContext);
+  return (
+    <div className="context-value" data-contextvalue={contextValue} />
+  );
+}
+
 // eslint-disable-next-line react/prop-types
 function ControlledSelectHeaderWrapper({ tableProps, selectProps, ...rest }) {
   return (
@@ -18,13 +25,6 @@ function ControlledSelectHeaderWrapper({ tableProps, selectProps, ...rest }) {
   );
 }
 
-function DataTableContextChild() {
-  const contextValue = useContext(DataTableContext);
-  return (
-    <div className="context-value" data-contextvalue={contextValue} />
-  );
-}
-
 const mockToggleAllPageRowsSelectedProps = jest.fn();
 const rows = [{ id: 1 }, { id: 2 }];
 const tableProps = {

package/src/IconButton/index.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { type Placement } from 'react-bootstrap/Overlay';
-import Icon from '../Icon';
 import { OverlayTrigger } from '../Overlay';
 import Tooltip from '../Tooltip';
+import Icon from '../Icon';
 
 interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   iconAs?: React.ComponentType<any>,

package/src/Menu/SelectMenu.jsx

@@ -15,6 +15,7 @@ function SelectMenu({
   children,
   className,
   variant,
+  disabled,
   ...props
 }) {
   const [triggerTarget, setTriggerTarget] = useState(null);
@@ -89,6 +90,7 @@ function SelectMenu({
         variant={variant}
         iconAfter={ExpandMore}
         onClick={open}
+        disabled={disabled}
       >
         {selected !== undefined && children[selected] ? children[selected].props.children : defaultMessage}
       </Button>
@@ -131,12 +133,15 @@ SelectMenu.propTypes = {
   className: PropTypes.string,
   /** Specifies variant to use. */
   variant: PropTypes.string,
+  /** Specifies if the `SelectMenu` is disabled. */
+  disabled: PropTypes.bool,
 };
 
 SelectMenu.defaultProps = {
   defaultMessage: SELECT_MENU_DEFAULT_MESSAGE,
   className: undefined,
   variant: 'outline-primary',
+  disabled: false,
 };
 
 const SelectMenuWithDeprecatedProp = withDeprecatedProps(SelectMenu, 'SelectMenu', {

package/src/Menu/SelectMenu.test.jsx

@@ -58,6 +58,12 @@ describe('correct rendering', () => {
     const button = screen.getByRole('button');
     expect(button).toHaveClass('btn-brand');
   });
+
+  it('renders as disabled', () => {
+    render(DefaultSelectMenu({ disabled: true }));
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+  });
 });
 
 describe('mouse behavior & keyboard behavior', () => {

package/src/Menu/select-menu.md

@@ -56,3 +56,11 @@ The ``Modal`` brings focus to the first menu element upon the click of the trigg
   <MenuItem>M. Hortens</MenuItem>
 </SelectMenu>
 ```
+
+## Disabled 
+
+```jsx live
+<SelectMenu disabled>
+  <MenuItem>A Menu Item</MenuItem>
+</SelectMenu>
+```

package/src/Modal/{ModalContext.jsx → ModalContext.tsx}

@@ -1,14 +1,29 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 
-const ModalContext = React.createContext({
+interface ContextData {
+  onClose: () => void;
+  isOpen: boolean;
+  isBlocking: boolean;
+}
+
+const ModalContext = React.createContext<ContextData>({
   onClose: () => {},
+  isOpen: false,
+  isBlocking: false,
 });
 
 function ModalContextProvider({
-  onClose, isOpen, isBlocking, children,
+  onClose,
+  isOpen,
+  isBlocking = false,
+  children = null,
+}: {
+  onClose: () => void;
+  isOpen: boolean;
+  isBlocking?: boolean;
+  children?: React.ReactNode;
 }) {
-  const modalContextValue = useMemo(
+  const modalContextValue = useMemo<ContextData>(
     () => ({ onClose, isOpen, isBlocking }),
     [onClose, isOpen, isBlocking],
   );
@@ -20,17 +35,5 @@ function ModalContextProvider({
   );
 }
 
-ModalContextProvider.propTypes = {
-  children: PropTypes.node,
-  onClose: PropTypes.func.isRequired,
-  isBlocking: PropTypes.bool,
-  isOpen: PropTypes.bool.isRequired,
-};
-
-ModalContextProvider.defaultProps = {
-  children: null,
-  isBlocking: false,
-};
-
 export { ModalContextProvider };
 export default ModalContext;