@openedx/paragon 22.0.0-alpha.23 → 22.0.0-alpha.25

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/lib/utils.js

@@ -1,4 +1,25 @@
-// eslint-disable-next-line import/prefer-default-export
+const axios = require('axios');
+
+/**
+ * Sends request to the Netlify function to inform about specified event.
+ * @param {string} eventId - tracking event id
+ * @param {object} properties - tracking properties
+ */
+function sendTrackInfo(eventId, properties) {
+  const { BASE_URL, TRACK_ANONYMOUS_ANALYTICS } = process.env;
+  if (TRACK_ANONYMOUS_ANALYTICS) {
+    const url = `${BASE_URL}/.netlify/functions/sendTrackData`;
+    axios.post(url, { eventId, properties })
+      .then(result => {
+        // eslint-disable-next-line no-console
+        console.log(`Track info is successfully sent (status ${result.status})`);
+      }).catch(error => {
+        // eslint-disable-next-line no-console
+        console.log(`Track info request failed (${error})`);
+      });
+  }
+}
+
 function capitalize(str) {
   if (typeof str !== 'string' || str.length === 0) {
     return '';
@@ -6,4 +27,4 @@ function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-module.exports = { capitalize };
+module.exports = { sendTrackInfo, capitalize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.0.0-alpha.23",
+  "version": "22.0.0-alpha.25",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -116,11 +116,11 @@
     "@formatjs/cli": "^5.0.2",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
-    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.0",
+    "@types/jest": "^29.5.10",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.11",
     "@types/react-test-renderer": "^18.0.0",

package/src/Button/README.md

@@ -20,11 +20,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>
 )}
 ```
@@ -41,11 +41,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>
 )}
 ```
@@ -63,20 +63,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>
     </>
 )}
@@ -90,34 +90,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
@@ -125,13 +132,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
@@ -150,21 +155,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
@@ -179,23 +204,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

package/src/Button/index.jsx

@@ -51,10 +51,10 @@ Button.propTypes = {
   variant: PropTypes.string,
   /** An icon component to render.
   * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
-  iconBefore: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
   /** An icon component to render.
   * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
-  iconAfter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
 };
 
 Button.defaultProps = {

package/src/Button/index.scss

@@ -41,15 +41,15 @@
         bottom: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1);
         left: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1);
         border: solid var(--pgn-size-btn-focus-width) var(--pgn-btn-focus-outline-color, var(--pgn-color-body-base));
-        border-radius: var(--pgn-size-btn-focus-border-radius);
+        border-radius: var(--pgn-size-btn-focus-border-radius-base);
       }
 
       &.btn-lg::before {
-        border-radius: var(--pgn-size-btn-focus-border-radius);
+        border-radius: var(--pgn-size-btn-focus-border-radius-lg);
       }
 
       &.btn-sm::before {
-        border-radius: var(--pgn-size-btn-focus-border-radius);
+        border-radius: var(--pgn-size-btn-focus-border-radius-sm);
       }
 
       &:active,

package/src/ColorPicker/ColorPicker.test.jsx

@@ -29,13 +29,35 @@ describe('picker works as expected', () => {
   const color = 'wassap';
   const setColor = jest.fn();
   it('validates hex color', async () => {
-    const { rerender } = render(<ColorPicker color={color} setColor={setColor} />);
+    render(<ColorPicker color={color} setColor={setColor} />);
+
     await act(async () => {
       await userEvent.click(screen.getByRole('button'));
     });
+    expect(screen.queryByTestId('hex-input').value).toEqual('#wassap');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
 
-    rerender(<ColorPicker color="#32116c" setColor={setColor} />);
+    await act(async () => {
+      await userEvent.clear(screen.getByTestId('hex-input'));
+      await userEvent.paste(screen.getByTestId('hex-input'), '32116c');
+    });
+    expect(screen.queryByTestId('hex-input').value).toEqual('#32116c');
+    expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();
+
+    await act(async () => {
+      await userEvent.clear(screen.getByTestId('hex-input'));
+      await userEvent.paste(screen.getByTestId('hex-input'), 'yuk');
+    });
+
+    expect(screen.queryByTestId('hex-input').value).toEqual('#yuk');
+    expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
+
+    await act(async () => {
+      await userEvent.clear(screen.getByTestId('hex-input'));
+      await userEvent.paste(screen.getByTestId('hex-input'), '#fad');
+    });
+
+    expect(screen.queryByTestId('hex-input').value).toEqual('#fad');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();
   });
 });

package/src/ColorPicker/index.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { HexColorPicker } from 'react-colorful';
@@ -15,24 +15,63 @@ function ColorPicker({
 }) {
   const [isOpen, open, close] = useToggle(false);
   const [target, setTarget] = React.useState(null);
-  const [hexValid, setHexValid] = React.useState(true);
 
-  const validateHex = useCallback((input) => {
+  const colorIsValid = (colorToValidate) => {
     const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-    if (input.length > 1 && !input.startsWith('#')) {
-      setColor(`#${input}`);
-    } else {
-      setColor(input);
+    return hexRegex.test(colorToValidate);
+  };
+
+  const formatHexColorString = (colorString) => {
+    if (!colorString.startsWith('#')) {
+      return `#${colorString}`.slice(0, 7);
+    }
+
+    return colorString.slice(0, 7);
+  };
+
+  const [hexValid, setHexValid] = React.useState(() => (color === '' || colorIsValid(formatHexColorString(color))));
+
+  const [hexColorString, setHexColorString] = React.useState(() => {
+    if (color === '') {
+      return '';
+    }
+
+    return formatHexColorString(color);
+  });
+  const [colorToDisplay, setColorToDisplay] = React.useState(() => {
+    const formattedColor = formatHexColorString(color);
+    if (colorIsValid(formattedColor)) {
+      return formattedColor;
     }
-    if (input === '' || hexRegex.test(input) === true) {
+
+    return '#fff';
+  });
+
+  const setValidatedColor = (newColor) => {
+    if (newColor === '') {
       setHexValid(true);
-    } else {
-      setHexValid(false);
+      setColor('');
+      setHexColorString('');
+      setColorToDisplay('#fff');
+      return;
     }
-  }, [setColor]);
 
-  // this is needed for when a user changes the color through the sliders
-  useEffect(() => validateHex(color), [validateHex, color]);
+    const formattedColor = formatHexColorString(newColor);
+
+    if (colorIsValid(formattedColor)) {
+      setHexValid(true);
+      setColor(formattedColor);
+      setHexColorString(formattedColor);
+      setColorToDisplay(formattedColor);
+      return;
+    }
+
+    setHexValid(false);
+    setHexColorString(formattedColor);
+
+    // ensure the picker value stays in sync with the textbox
+    setColor(formattedColor);
+  };
 
   return (
     <>
@@ -65,16 +104,17 @@ function ColorPicker({
           className="pgn__color-modal rounded shadow"
           style={{ textAlign: 'start' }}
         >
-          <HexColorPicker color={color || ''} onChange={setColor} />
+          <HexColorPicker color={colorToDisplay} onChange={setValidatedColor} />
           <Form.Group className="pgn__hex-form" size="sm">
             <div>
               <Form.Label className="pgn__hex-label">Hex</Form.Label>
               <Form.Control
                 className="pgn__hex-field"
                 isInvalid={!hexValid}
-                value={color}
-                onChange={(e) => validateHex(e.target.value)}
+                value={hexColorString}
+                onChange={(e) => setValidatedColor(e.target.value)}
                 data-testid="hex-input"
+                spellCheck="false"
               />
             </div>
             {!hexValid && (

package/src/Container/index.jsx

@@ -28,11 +28,14 @@ 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 */
   size: PropTypes.oneOf(Object.keys(SIZE_CLASS_NAMES)),
+  /** Overrides underlying component base CSS class name */
+  bsPrefix: PropTypes.string,
 };
 
 Container.defaultProps = {
@@ -40,6 +43,7 @@ Container.defaultProps = {
   children: undefined,
   fluid: true,
   size: undefined,
+  bsPrefix: 'container',
 };
 
 export default Container;

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 || (