@openedx/paragon 21.11.3 → 21.12.0

package/icons/es5/RightSidebarFilled.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";
+const SvgRightSidebarFilled = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M2 22V2h20v20H2ZM14 4H4v16h10V4Z",
+  fill: "currentColor"
+}));
+export default SvgRightSidebarFilled;

package/icons/es5/RightSidebarOutlined.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";
+const SvgRightSidebarOutlined = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M2 2v20h20V2H2Zm18 2h-4v16h4V4ZM4 4h10v16H4V4Z",
+  fill: "currentColor"
+}));
+export default SvgRightSidebarOutlined;

package/icons/es5/index.js

@@ -1694,6 +1694,8 @@ export { default as RestoreFromTrash } from "./RestoreFromTrash";
 export { default as RestorePage } from "./RestorePage";
 export { default as Reviews } from "./Reviews";
 export { default as RiceBowl } from "./RiceBowl";
+export { default as RightSidebarFilled } from "./RightSidebarFilled";
+export { default as RightSidebarOutlined } from "./RightSidebarOutlined";
 export { default as RingVolume } from "./RingVolume";
 export { default as Rocket } from "./Rocket";
 export { default as RocketLaunch } from "./RocketLaunch";

package/icons/jsx/RightSidebarFilled.jsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgRightSidebarFilled = (props) => (
+  <svg
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 22V2h20v20H2ZM14 4H4v16h10V4Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgRightSidebarFilled;

package/icons/jsx/RightSidebarOutlined.jsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgRightSidebarOutlined = (props) => (
+  <svg
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 2v20h20V2H2Zm18 2h-4v16h4V4ZM4 4h10v16H4V4Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgRightSidebarOutlined;

package/icons/jsx/index.jsx

@@ -1694,6 +1694,8 @@ export { default as RestoreFromTrash } from "./RestoreFromTrash";
 export { default as RestorePage } from "./RestorePage";
 export { default as Reviews } from "./Reviews";
 export { default as RiceBowl } from "./RiceBowl";
+export { default as RightSidebarFilled } from "./RightSidebarFilled";
+export { default as RightSidebarOutlined } from "./RightSidebarOutlined";
 export { default as RingVolume } from "./RingVolume";
 export { default as Rocket } from "./Rocket";
 export { default as RocketLaunch } from "./RocketLaunch";

package/icons/svg/right_sidebar_filled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 22V2H22V22H2ZM14 4H4V20H14V4Z" fill="black"/>
+</svg>

package/icons/svg/right_sidebar_outlined.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2V22H22V2H2ZM20 4H16V20H20V4ZM4 4H14V20H4V4Z" fill="black"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.11.3",
+  "version": "21.12.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/scss/core/_variables.scss

@@ -282,7 +282,7 @@ $element-color-levels: map-merge(
     "border": 200,
     "icon": 300,
     "active-border": 300,
-    "focus": 300,
+    "focus": 500,
     "graphic": 300,
     "default": 500,
     "light-text": 500,

package/src/Button/README.md

@@ -22,11 +22,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 
   return (
     <Stack gap={2} direction={ isExtraSmall ? "vertical" : "horizontal" }>
-      <Button variant="brand" className="mb-2 mb-sm-0">Brand</Button>
-      <Button variant="outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>
-      <Button variant="primary" className="mb-2 mb-sm-0">Primary</Button>
-      <Button variant="outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>
-      <Button variant="tertiary" className="mb-2 mb-sm-0">Tertiary</Button>
+      <Button variant="brand">Brand</Button>
+      <Button variant="outline-brand">Outline Brand</Button>
+      <Button variant="primary">Primary</Button>
+      <Button variant="outline-primary">Outline Primary</Button>
+      <Button variant="tertiary">Tertiary</Button>
     </Stack>
 )}
 ```
@@ -43,11 +43,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
       gap={2}
       direction={ isExtraSmall ? "vertical" : "horizontal" }
     >
-      <Button variant="inverse-brand" className="mb-2 mb-sm-0">Brand</Button>
-      <Button variant="inverse-outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>
-      <Button variant="inverse-primary" className="mb-2 mb-sm-0">Primary</Button>
-      <Button variant="inverse-outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>
-      <Button variant="inverse-tertiary" className="mb-2 mb-sm-0">Tertiary</Button>
+      <Button variant="inverse-brand">Brand</Button>
+      <Button variant="inverse-outline-brand">Outline Brand</Button>
+      <Button variant="inverse-primary">Primary</Button>
+      <Button variant="inverse-outline-primary">Outline Primary</Button>
+      <Button variant="inverse-tertiary">Tertiary</Button>
     </Stack>
 )}
 ```
@@ -65,20 +65,20 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
         gap={2}
         direction={ isExtraSmall ? "vertical" : "horizontal" }
       >
-        <Button variant="success" className="mb-2 mb-sm-0">Success</Button>
-        <Button variant="danger" className="mb-2 mb-sm-0">Danger</Button>
-        <Button variant="outline-success" className="mb-2 mb-sm-0">Success</Button>
-        <Button variant="outline-danger" className="mb-2 mb-sm-0">Danger</Button>
+        <Button variant="success">Success</Button>
+        <Button variant="danger">Danger</Button>
+        <Button variant="outline-success">Success</Button>
+        <Button variant="outline-danger">Danger</Button>
       </Stack>
       <Stack
         gap={2}
         direction={ isExtraSmall ? "vertical" : "horizontal" }
       >
-        <Button variant="link" className="mb-2 mb-sm-0">Link</Button>
-        <Button variant="light" className="mb-2 mb-sm-0">Light</Button>
-        <Button variant="dark" className="mb-2 mb-sm-0">Dark</Button>
-        <Button variant="outline-light" className="mb-2 mb-sm-0">Light</Button>
-        <Button variant="outline-dark" className="mb-2 mb-sm-0">Dark</Button>
+        <Button variant="link">Link</Button>
+        <Button variant="light">Light</Button>
+        <Button variant="dark">Dark</Button>
+        <Button variant="outline-light">Light</Button>
+        <Button variant="outline-dark">Dark</Button>
       </Stack>
     </>
 )}
@@ -92,34 +92,41 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 
   return (
     <>
-        <Stack
-          className="mb-2"
-          gap={2}
-          direction={ isExtraSmall ? "vertical" : "horizontal" }
-        >
-          <Button variant="primary" size="lg" className="mb-2 mb-sm-0">
-            Large button
-          </Button>
-          <Button variant="outline-primary" size="lg" className="mb-2 mb-sm-0">
-            Large button
-          </Button>
-        </Stack>
-        <Stack
-          className="mb-2"
-          gap={2}
-          direction={ isExtraSmall ? "vertical" : "horizontal" }
-        >
-          <Button variant="primary" size="sm" className="mb-2 mb-sm-0">
-            Small button
-          </Button>
-          <Button variant="outline-primary" size="sm" className="mb-2 mb-sm-0">
-            Small button
-          </Button>
-        </Stack>
-        <Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
-        <Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
+      <Stack
+        className="mb-2"
+        gap={2}
+        direction={ isExtraSmall ? "vertical" : "horizontal" }
+      >
+        <Button variant="primary" size="lg">
+          Large button
+        </Button>
+        <Button variant="outline-primary" size="lg">
+          Large button
+        </Button>
+      </Stack>
+      <Stack
+        className="mb-2"
+        gap={2}
+        direction={ isExtraSmall ? "vertical" : "horizontal" }
+      >
+        <Button variant="primary" size="sm">
+          Small button
+        </Button>
+        <Button variant="outline-primary" size="sm">
+          Small button
+        </Button>
+      </Stack>
+      <Stack
+        className="mb-2"
+        gap={2}
+        direction={ isExtraSmall ? "vertical" : "horizontal" }
+      >
+        <Button variant="link" size="inline">Inline button</Button>
+        <Button variant="link" size="inline">Inline button</Button>
+      </Stack>
     </>
-)}
+  )
+}
 ```
 
 ### When to use the inline size
@@ -127,13 +134,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 Use inline size buttons for when a button sits with a line of text.
 
 ```jsx live
-<>
-  <p>
-    <span className="mr-1">2 items selected.</span>
-    <Button variant="link" size="inline" className="mr-1">Select all</Button>
-    <Button variant="link" size="inline">Clear</Button>
-  </p>
-</>
+<p>
+  <span className="mr-1">2 items selected.</span>
+  <Button variant="link" size="inline" className="mr-1">Select all</Button>
+  <Button variant="link" size="inline">Clear</Button>
+</p>
 ```
 
 ## Block Buttons
@@ -152,21 +157,41 @@ Use inline size buttons for when a button sits with a line of text.
 ### Disabled
 
 ```jsx live
-<>
-  <Button variant="primary" disabled>Primary disabled</Button>
-  <Button variant="secondary" disabled>Secondary disabled</Button>
-  <Button as="a" href="https://edx.org" disabled>Link disabled</Button>
-</>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button variant="primary" disabled>Primary disabled</Button>
+      <Button variant="secondary" disabled>Secondary disabled</Button>
+      <Button as="a" href="https://edx.org" disabled>Link disabled</Button>
+    </Stack>
+    )
+}
 ```
 
 ### With empty href
 For link to be `disabled`, it must have href defined with some value.
 
 ```jsx live
-<>
-  <Button as='a' disabled>No href</Button>
-  <Button as='a' href='' disabled>Empty string href</Button>
-</>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button as="a" disabled>No href</Button>
+      <Button as="a" href="" disabled>Empty string href</Button>
+    </Stack>
+  )
+}
 ```
 
 ### With Icons before or after
@@ -181,23 +206,24 @@ For link to be `disabled`, it must have href defined with some value.
       gap={2}
       direction={ isExtraSmall ? "vertical" : "horizontal" }
     >
-      <Button variant="brand" iconBefore={ArrowBack} className="mb-2 mb-sm-0">
+      <Button variant="brand" iconBefore={ArrowBack}>
         Brand
       </Button>
-      <Button variant="outline-brand" iconAfter={ArrowDropDown} className="mb-2 mb-sm-0">
+      <Button variant="outline-brand" iconAfter={ArrowDropDown}>
         Outline Brand
       </Button>
-      <Button variant="primary" iconBefore={Remove} iconAfter={Add} className="mb-2 mb-sm-0">
+      <Button variant="primary" iconBefore={Remove} iconAfter={Add}>
         Primary
       </Button>
-      <Button variant="outline-primary" iconBefore={Highlight} className="mb-2 mb-sm-0">
+      <Button variant="outline-primary" iconBefore={Highlight}>
         Outline Primary
       </Button>
-      <Button variant="tertiary" iconAfter={Add} className="mb-2 mb-sm-0">
+      <Button variant="tertiary" iconAfter={Add}>
         Tertiary
       </Button>
     </Stack>
-)}
+  )
+}
 ```
 
 ## Stateful buttons
@@ -219,33 +245,63 @@ user-friendly experience.
 ### (Deprecated) color variants
 
 ```jsx live
-<div>
-  <Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
-  <Button.Deprecated className="btn-success">Success</Button.Deprecated>
-  <Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
-  <Button.Deprecated className="btn-light">Light</Button.Deprecated>
-  <Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
-</div>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
+      <Button.Deprecated className="btn-light">Light</Button.Deprecated>
+      <Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
+    </Stack>
+  )
+}
 ```
 
 ### (Deprecated) outline variants
 
 ```jsx live
-<div>
-  <Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
-  <Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
-  <Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
-</div>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
+    </Stack>
+  )
+}
 ```
 
 ### (Deprecated) inverse variants
 
 ```jsx live
-<div className="bg-gray-700 p-3">
-  <Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
-  <Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
-  <Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
-</div>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2 p-3 bg-gray-700"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
+    </Stack>
+  )
+}
 ```
 
 ### (Deprecated) link variant

package/src/Button/_variables.scss

@@ -19,7 +19,7 @@ $btn-border-width:            $input-btn-border-width !default;
 $btn-font-weight:             $font-weight-normal !default;
 $btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
 $btn-focus-width:             2px !default;
-$btn-focus-gap:               1px !default;
+$btn-focus-gap:               $btn-focus-width !default;
 $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
 $btn-disabled-opacity:        .65 !default;
 $btn-active-box-shadow:       none;
@@ -48,3 +48,5 @@ $btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default;
 $btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default;
 
 $btn-focus-border-radius: calc(#{$btn-border-radius} + #{$btn-focus-border-gap}) !default;
+$btn-focus-border-radius-lg: $btn-focus-border-radius !default;
+$btn-focus-border-radius-sm: $btn-border-radius !default;

package/src/Button/index.scss

@@ -150,11 +150,11 @@
     }
 
     &.btn-lg::before {
-      border-radius: $btn-focus-border-radius;
+      border-radius: $btn-focus-border-radius-lg;
     }
 
     &.btn-sm::before {
-      border-radius: $btn-focus-border-radius;
+      border-radius: $btn-focus-border-radius-sm;
     }
 
     &:active,

package/src/DataTable/README.md

@@ -28,11 +28,11 @@ designStatus: 'Done'
 devStatus: 'In progress'
 ---
 
-The DataTable component is a wrapper that uses the <a href="https://react-table.tanstack.com/docs/overview">react-table</a> library to
+The DataTable component is a wrapper that uses the <a href="https://github.com/TanStack/table/tree/v7/docs/src/pages/docs" target="_blank" rel="noopener noreferrer">react-table</a> library to
 create tables. It can be used as is, or its subcomponents can be used on their own, allowing the developer full control.
 
 Paragon also exports all React hooks from ``react-table`` allowing the developers to use them and make customizations more freely without adding ``react-table`` as a separate dependency to their project.
-For full list of available hooks view <a href="https://react-table.tanstack.com/docs/api/overview">react-table API reference</a>.
+For full list of available hooks view <a href="https://github.com/TanStack/table/tree/v7/docs/src/pages/docs/api" target="_blank" rel="noopener noreferrer">react-table API reference</a>.
 
 ## How children get information
 
@@ -49,7 +49,7 @@ const instance = useContext(DataTableContext)
 For small tables (less than ~10,000 rows), filtering, sorting and pagination can be done quickly and easily on the frontend.
 
 In this example, a default TextFilter component is used for all columns. A default filter can be passed in,
-or a filter component can be defined on the column. See <a href="https://react-table.tanstack.com/docs/api/useFilters">react-table filters documentation</a>
+or a filter component can be defined on the column. See <a href="https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useFilters.md" target="_blank" rel="noopener noreferrer">react-table filters documentation</a>
 for more information.
 
 ```jsx live

package/src/DataTable/index.jsx

@@ -187,6 +187,7 @@ function DataTable({
 
   const enhancedInstance = {
     ...instance,
+    manualFilters,
     itemCount,
     numBreakoutFilters,
     bulkActions,
@@ -329,7 +330,7 @@ DataTable.propTypes = {
   /** Function that will fetch table data. Called when page size, page index or filters change.
     * Meant to be used with manual filters and pagination */
   fetchData: PropTypes.func,
-  /** Initial state passed to react-table's documentation https://react-table.tanstack.com/docs/api/useTable */
+  /** Initial state passed to react-table's documentation https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useTable.md */
   initialState: PropTypes.shape({
     pageSize: requiredWhen(PropTypes.number, 'isPaginated'),
     pageIndex: requiredWhen(PropTypes.number, 'isPaginated'),

package/src/DataTable/selection/BaseSelectionStatus.jsx

@@ -22,11 +22,11 @@ function BaseSelectionStatus({
 }) {
   const {
     itemCount, filteredRows, isPaginated, state,
-    isSelectable, maxSelectedRows,
+    isSelectable, maxSelectedRows, manualFilters,
   } = useContext(DataTableContext);
   const hasAppliedFilters = state?.filters?.length > 0;
   const isAllRowsSelected = numSelectedRows === itemCount;
-  const filteredItems = filteredRows?.length || itemCount;
+  const filteredItems = manualFilters ? itemCount : (filteredRows?.length || itemCount);
   const hasMaxSelectedRows = isSelectable && maxSelectedRows;
 
   const intlAllSelectedText = allSelectedText || (

package/src/DataTable/tablefilters.mdx

@@ -14,18 +14,18 @@ devStatus: 'In progress'
 ---
 
 
-The ``DataTable`` component is a wrapper that uses the <a href="https://react-table.tanstack.com/docs">react-table</a> library to
+The ``DataTable`` component is a wrapper that uses the <a href="https://github.com/TanStack/table/tree/v7/docs/src/pages/docs" target="_blank" rel="noopener noreferrer">react-table</a> library to
 create tables. It can be used as is, or its subcomponents can be used on their own, allowing the developer full control.
 
 ## Filtering and sorting
 Paragon currently provides a variety of filter types, and you can also define your own filter types.
 
 In the example below, a default ``TextFilter`` component is used as the default filter for all columns. A default filter can be passed in,
-or a filter component can be defined on the column using the ``Filter`` attribute. See <a href="https://react-table.tanstack.com/docs/api/useFilters">react-table filters documentation</a>
+or a filter component can be defined on the column using the ``Filter`` attribute. See <a href="https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useFilters.md" target="_blank" rel="noopener noreferrer">react-table filters documentation</a>
 for more information.
 
 ## Available filter functions
-A filtering function can be defined on the column as well as the filter component. Custom filtering functions can also be defined, see <a href="https://react-table.tanstack.com/docs/api/useFilters#column-options">react-table filters documentation</a>
+A filtering function can be defined on the column as well as the filter component. Custom filtering functions can also be defined, see <a href="https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useFilters.md#column-options" target="_blank" rel="noopener noreferrer">react-table filters documentation</a>
 for more information.
 Filter functions are defined on the column as the ``filter`` attribute.
 <dl>

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

@@ -6,6 +6,8 @@ import { IntlProvider } from 'react-intl';
 
 import DataTable from '..';
 import DataTableContext from '../DataTableContext';
+import { TextFilter } from '../..';
+import { SELECT_ALL_TEST_ID } from '../selection/data/constants';
 
 const additionalColumns = [
   {
@@ -198,6 +200,35 @@ describe('<DataTable />', () => {
 
     expect(spinner).toBeTruthy();
   });
+  it('displays the total number of items when applying filter and selecting all items', async () => {
+    const propsWithSelection = {
+      ...props,
+      isSelectable: true,
+      isFilterable: true,
+      manualFilters: true,
+      defaultColumnValues: { Filter: TextFilter },
+      isPaginated: true,
+      initialState: { pageSize: 3, pageIndex: 0 },
+      pageCount: 3,
+      fetchData: jest.fn(),
+    };
+
+    render(<DataTableWrapper {...propsWithSelection} />);
+    const filtersButton = screen.getByRole('button', { name: 'Filters' });
+
+    await userEvent.click(filtersButton);
+
+    const searchFormControl = screen.getByPlaceholderText('Search coat color');
+    await userEvent.type(searchFormControl, 'brown tabby');
+
+    const selectAllCheckBox = screen.getByTitle('Toggle All Current Page Rows Selected');
+    await userEvent.click(selectAllCheckBox);
+
+    const selectAllButton = screen.getByTestId(SELECT_ALL_TEST_ID);
+    // A filtered array is returned from the backend,
+    // and the element counter displays its length.
+    expect(selectAllButton).toHaveTextContent('Select all 7');
+  });
 
   describe('[legacy] controlled table selections', () => {
     it('passes initial controlledTableSelections to context', async () => {