@openedx/paragon 22.0.0-alpha.22 → 22.0.0-alpha.24

package/icons/svg/check_circle_light_outline.svg

@@ -0,0 +1,13 @@
+<svg
+   width="57"
+   height="57"
+   viewBox="0 0 57 57"
+   fill="none"
+   xmlns="http://www.w3.org/2000/svg">
+  <path
+     d="m 28.5,0.5 c -15.446191,0 -28,12.553809 -28,28 0,15.446191 12.553809,28 28,28 15.446191,0 28,-12.553809 28,-28 0,-15.446191 -12.553809,-28 -28,-28 z m 0,3 c 13.824872,0 25,11.175128 25,25 0,13.824872 -11.175128,25 -25,25 -13.824872,0 -25,-11.175128 -25,-25 0,-13.824872 11.175128,-25 25,-25 z"
+    />
+  <path
+     d="M 43.28125,16.386719 22.236328,37.431641 13.71875,28.912109 11.597656,31.035156 22.236328,41.673828 45.402344,18.507812 Z"
+     />
+</svg>

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/version.js

@@ -0,0 +1,9 @@
+/* eslint-disable no-console */
+const chalk = require('chalk');
+const { version } = require('../package.json');
+
+function versionCommand() {
+  console.log(`Paragon CLI version: ${chalk.bold(version)}`);
+}
+
+module.exports = versionCommand;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.0.0-alpha.22",
+  "version": "22.0.0-alpha.24",
   "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,46 +204,28 @@ 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>
-)}
+  )
+}
 ```
 
-### With a Spinner
-
-```jsx live
-<>
-  <Button variant="primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="outline-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="outline-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="inverse-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="inverse-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-</>
-```
+## Stateful buttons
+To implement loading state using a `Button` component, the [StatefulButton](https://paragon-openedx.netlify.app/components/statefulbutton/) component
+is available for use. <br/>
+This specialized component is designed to seamlessly manage and display boot states, providing a more efficient and 
+user-friendly experience.

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
@@ -436,7 +436,7 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
       }}
       isSortable
       defaultColumnValues={{ Filter: TextFilter }}
-      itemCount={7}
+      itemCount={3}
       data={[
         {
           name: 'Lil Bub',

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>