@openedx/paragon 23.14.1 → 23.14.3

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

@@ -1,8 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ForwardedRef } from 'react';
 import classNames from 'classnames';
 import Button from '../Button';
-import Avatar from '../Avatar';
+import Avatar, { AvatarProps } from '../Avatar';
 
 const buttonSizesToAvatarSize = {
   sm: 'xs',
@@ -10,14 +9,30 @@ const buttonSizesToAvatarSize = {
   lg: 'md',
 };
 
+interface AvatarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** The button text */
+  children?: string;
+  /** A class name to append to the button */
+  className?: string;
+  /** Show the label or only the avatar */
+  showLabel?: boolean;
+  /** The button size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Image src of the avatar image */
+  src?: string;
+  /** The button style variant to use */
+  variant?: string;
+}
+
 const AvatarButton = React.forwardRef(({
   children,
   className,
-  showLabel,
-  size,
+  showLabel = true,
+  size = 'md',
   src,
+  variant = 'tertiary',
   ...attrs
-}, ref) => {
+}: AvatarButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
   const avatarSize = buttonSizesToAvatarSize[size] || 'sm';
   return (
     <Button
@@ -31,35 +46,12 @@ const AvatarButton = React.forwardRef(({
       )}
       size={size}
       ref={ref}
+      variant={variant}
     >
-      <Avatar src={src} alt={showLabel ? '' : children} size={avatarSize} />
+      <Avatar src={src} alt={showLabel ? '' : children} size={avatarSize as AvatarProps['size']} />
       {showLabel && children}
     </Button>
   );
 });
 
-AvatarButton.propTypes = {
-  /** The button text */
-  children: PropTypes.string,
-  /** A class name to append to the button */
-  className: PropTypes.string,
-  /** Show the label or only the avatar */
-  showLabel: PropTypes.bool,
-  /** The button size */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /** Image src of the avatar image */
-  src: PropTypes.string,
-  /** The button style variant to use */
-  variant: PropTypes.string,
-};
-
-AvatarButton.defaultProps = {
-  children: undefined,
-  className: undefined,
-  showLabel: true,
-  size: 'md',
-  src: undefined,
-  variant: 'tertiary',
-};
-
 export default AvatarButton;

package/src/Bubble/index.tsx

@@ -1,27 +1,29 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const STYLE_VARIANTS = ['primary', 'success', 'error', 'warning'] as const;
-
-export type BubbleVariant = typeof STYLE_VARIANTS[number];
+export type BubbleVariant = 'primary' | 'success' | 'error' | 'warning';
 
 export interface BubbleProps {
+  /** Specifies contents of the component. */
   children: React.ReactNode;
+  /** The `Bubble` style variant to use. */
   variant?: BubbleVariant;
+  /** Activates disabled variant. */
   disabled?: boolean;
+  /** Optional class name(s) to append to the base element. */
   className?: string;
+  /** Specifies whether to add padding to the `Bubble` or not. */
   expandable?: boolean;
 }
 
-const Bubble = React.forwardRef<HTMLDivElement, BubbleProps>(({
-  variant,
+const Bubble = React.forwardRef(({
+  variant = 'primary',
   className,
-  children,
-  disabled,
-  expandable,
+  children = null,
+  disabled = false,
+  expandable = false,
   ...props
-}, ref) => (
+}: BubbleProps, ref: React.ForwardedRef<HTMLDivElement>) => (
   <div
     ref={ref}
     className={classNames(
@@ -36,26 +38,4 @@ const Bubble = React.forwardRef<HTMLDivElement, BubbleProps>(({
   </div>
 ));
 
-Bubble.propTypes = {
-  /** Specifies contents of the component. */
-  // @ts-ignore
-  children: PropTypes.node,
-  /** The `Bubble` style variant to use. */
-  variant: PropTypes.oneOf(STYLE_VARIANTS),
-  /** Activates disabled variant. */
-  disabled: PropTypes.bool,
-  /** A class name to append to the base element. */
-  className: PropTypes.string,
-  /** Specifies whether to add padding to the `Bubble` or not. */
-  expandable: PropTypes.bool,
-};
-
-Bubble.defaultProps = {
-  children: null,
-  variant: 'primary',
-  disabled: false,
-  className: undefined,
-  expandable: false,
-};
-
 export default Bubble;

package/src/Button/index.tsx

@@ -1,14 +1,36 @@
 import React from 'react';
-import PropTypes, { type Requireable } from 'prop-types';
 import classNames from 'classnames';
 import BaseButton, { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button';
 import BaseButtonGroup, { type ButtonGroupProps as BaseButtonGroupProps } from 'react-bootstrap/ButtonGroup';
-import BaseButtonToolbar, { type ButtonToolbarProps } from 'react-bootstrap/ButtonToolbar';
+import BaseButtonToolbar, { type ButtonToolbarProps as BaseButtonToolbarProps } from 'react-bootstrap/ButtonToolbar';
 import type { ComponentWithAsProp } from '../utils/types/bootstrap';
 
 import Icon from '../Icon';
 
-interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
+type BaseVariant = (
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'brand'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'dark'
+  | 'light'
+  | 'link'
+);
+
+/**
+ * This was added so these types could be added as a non-breaking change.
+ * @deprecated - remove in Paragon 24
+ */
+type OtherDeprecatedValue = string & {}; // Allow any other string value for now, even though it's invalid
+
+export interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
+  /** Set a custom element for this component (default: `button`, with `type="button"`). */
+  as?: React.ElementType;
+  size?: 'sm' | 'md' | 'lg' | 'inline';
   /**
    * An icon component to render. Example:
    * ```
@@ -25,18 +47,32 @@ interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
    * ```
    */
   iconAfter?: React.ComponentType;
-  size?: 'sm' | 'md' | 'lg' | 'inline';
-}
 
-type ButtonType = ComponentWithAsProp<'button', ButtonProps> & { Deprecated?: any };
+  // The following are the same as in BaseButtonProps, but we re-define them to add documentation.
+  // The upstream type defintions do not have any comments/docs.
+
+  /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */
+  disabled?: boolean;
+  /** Optional: Specify additional class name(s) to apply to the button */
+  className?: string;
+  /** Specifies the text that is displayed within the button. */
+  children: React.ReactNode;
+  /** Specifies variant to use.
+   * Can be one of the base variants: `primary`, `secondary`, `tertiary`, `brand`, `success`, `danger`, `warning`,
+   * `info`, `dark`, `light`, `link`,
+   * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`
+   * or `inverse-outline-`)
+   * */
+  variant?: BaseVariant | `inverse-${BaseVariant}` | `outline-${BaseVariant}` | `inverse-outline-${BaseVariant}` | OtherDeprecatedValue;
+}
 
-const Button: ButtonType = React.forwardRef<HTMLButtonElement, ButtonProps>(({
+const Button: ComponentWithAsProp<'button', ButtonProps> = React.forwardRef(({
   children,
   iconAfter,
   iconBefore,
   size,
   ...props
-}, ref) => (
+}: ButtonProps, ref: React.ForwardedRef<HTMLDivElement>) => (
   <BaseButton
     size={size as 'sm' | 'lg' | undefined} // Bootstrap's <Button> types do not allow 'md' or 'inline', but we do.
     {...props}
@@ -49,107 +85,46 @@ const Button: ButtonType = React.forwardRef<HTMLButtonElement, ButtonProps>(({
   </BaseButton>
 ));
 
-Button.propTypes = {
-  /** Specifies class name to apply to the button */
-  className: PropTypes.string,
-  /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */
-  disabled: PropTypes.bool,
-  /** Specifies the text that is displayed within the button. */
-  children: PropTypes.node.isRequired,
-  /** A function that would specify what the button should do when the `onClick` event is triggered.
-   * For example, the button could launch a `Modal`. The default is an empty function. */
-  onClick: PropTypes.func,
-  /** A function that would specify what the button should do when the `onKeyDown` event is triggered.
-   * For example, this could handle using the `Escape` key to trigger the button's action.
-   * The default is an empty function. */
-  onKeyDown: PropTypes.func,
-  /** Used to set the `type` attribute on the `button` tag.  The default type is `button`. */
-  type: PropTypes.string,
-  /** Specifies variant to use.
-   * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,
-   * `light`, `link`
-   *
-   * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`
-   * or `inverse-outline-`)
-   * */
-  variant: PropTypes.string,
-  /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
-  iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,
-  /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
-  iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,
-  // The 'as' type casting above is required for TypeScript checking, because the 'PropTypes.elementType' type normally
-  // allows strings as a value (for use cases like 'div') but we don't support that for <Icon />/iconBefore/iconAfter.
-  // The React TypeScript type definitions are more specific (React.ComponentType vs React.ElementType).
-};
-
-Button.defaultProps = {
-  ...Button.defaultProps,
-  children: undefined,
-  className: undefined,
-  iconBefore: undefined,
-  iconAfter: undefined,
-  disabled: false,
-};
-
-// We could just re-export 'ButtonGroup' and 'ButtonToolbar', but we currently
-// override them to add propTypes validation at runtime, since most Paragon
-// consumers aren't using TypeScript yet. We also force ButtonGroup's 'size'
-// prop to accept our custom values of 'md' and 'inline' which are used in
-// Paragon but not used in the base Bootstrap classes.
+// We could just re-export 'ButtonGroup', but we currently override it to
+// force ButtonGroup's 'size' prop to accept our custom values of 'md' and
+// 'inline' which are used in Paragon but not used in the base Bootstrap classes.
 
 interface ButtonGroupProps extends Omit<BaseButtonGroupProps, 'size'> {
+  /** Specifies element type for this component. */
+  as?: React.ElementType;
+  /** An ARIA role describing the button group (default: `group`). */
+  role?: React.AriaRole;
+  /** Specifies the size for all Buttons in the group (default: `md`). */
   size?: 'sm' | 'md' | 'lg' | 'inline';
+  /** Display as a button toggle group (default: `false`). */
+  toggle?: boolean;
+  /** Specifies if the set of Buttons should appear vertically stacked (default: `false`). */
+  vertical?: boolean;
+  /** Overrides underlying component base CSS class name (default: `btn-group`). */
+  bsPrefix?: string;
 }
 
 const ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps> = (
-  React.forwardRef<HTMLButtonElement, ButtonGroupProps>(({ size, ...props }, ref) => (
+  React.forwardRef(({ size = 'md', ...props }: ButtonGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => (
     <BaseButtonGroup size={size as 'sm' | 'lg'} {...props} ref={ref} />
   ))
 );
 
-ButtonGroup.propTypes = {
-  /** Specifies element type for this component. */
-  as: PropTypes.elementType,
-  /** An ARIA role describing the button group. */
-  role: PropTypes.string,
-  /** Specifies the size for all Buttons in the group. */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'inline']),
-  /** Display as a button toggle group. */
-  toggle: PropTypes.bool,
-  /** Specifies if the set of Buttons should appear vertically stacked. */
-  vertical: PropTypes.bool,
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string,
-};
+// We could just re-export 'ButtonToolbar', but we currently override it to
+// narrow the type of 'role' to valid roles and to document its properties.
 
-ButtonGroup.defaultProps = {
-  as: 'div',
-  role: 'group',
-  toggle: false,
-  vertical: false,
-  bsPrefix: 'btn-group',
-  size: 'md',
-};
+interface ButtonToolbarProps extends BaseButtonToolbarProps {
+  /** An ARIA role describing the button group (default: `toolbar`). */
+  role?: React.AriaRole;
+  /** Overrides underlying component base CSS class name (default: `btn-toolbar`) */
+  bsPrefix?: string;
+}
 
 const ButtonToolbar: ComponentWithAsProp<'div', ButtonToolbarProps> = (
-  React.forwardRef<HTMLButtonElement, ButtonToolbarProps>((props, ref) => (
+  React.forwardRef((props: ButtonToolbarProps, ref: React.ForwardedRef<HTMLDivElement>) => (
     <BaseButtonToolbar {...props} ref={ref} />
   ))
 );
 
-ButtonToolbar.propTypes = {
-  /** An ARIA role describing the button group. */
-  role: PropTypes.string,
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string,
-};
-
-ButtonToolbar.defaultProps = {
-  role: 'toolbar',
-  bsPrefix: 'btn-toolbar',
-};
-
 export default Button;
 export { ButtonGroup, ButtonToolbar };

package/src/Chip/index.tsx

@@ -1,40 +1,59 @@
 import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';
-import PropTypes, { type Requireable } from 'prop-types';
 import classNames from 'classnames';
-// @ts-ignore
-import { requiredWhen } from '../utils/propTypes';
-import { STYLE_VARIANTS } from './constants';
 import ChipIcon from './ChipIcon';
+import { STYLE_VARIANTS } from './constants';
 
 export const CHIP_PGN_CLASS = 'pgn__chip';
 
 export interface IChip {
+  /** Specifies the content of the `Chip`. */
   children: React.ReactNode,
+  /** Click handler for the whole `Chip`, has effect only when Chip does not have any interactive icons. */
   onClick?: KeyboardEventHandler & MouseEventHandler,
+  /** Specifies an additional `className` to add to the base element. */
   className?: string,
+  /** The `Chip` style [variant](https://github.com/openedx/paragon/blob/release-23.x/src/Chip/constants.ts) to use. */
   variant?: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS],
+  /**
+   * An icon component to render before the content.
+   * Example import of a Paragon icon component:
+   *
+   * `import { Check } from '@openedx/paragon/icons';`
+   */
   iconBefore?: React.ComponentType,
+  /** Specifies icon alt text. */
   iconBeforeAlt?: string,
+  /**
+   * An icon component to render before after the content.
+   * Example import of a Paragon icon component:
+   *
+   * `import { Check } from '@openedx/paragon/icons';`
+   */
   iconAfter?: React.ComponentType,
+  /** Specifies icon alt text. */
   iconAfterAlt?: string,
+  /** A click handler for the `Chip` icon before. */
   onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,
+  /** A click handler for the `Chip` icon after. */
   onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,
+  /** Disables the `Chip`. */
   disabled?: boolean,
+  /** Indicates if `Chip` has been selected. */
   isSelected?: boolean,
 }
 
 const Chip = React.forwardRef(({
   children,
   className,
-  variant,
+  variant = 'light',
   iconBefore,
   iconBeforeAlt,
   iconAfter,
   iconAfterAlt,
   onIconBeforeClick,
   onIconAfterClick,
-  disabled,
-  isSelected,
+  disabled = false,
+  isSelected = false,
   onClick,
   ...props
 }: IChip, ref: ForwardedRef<HTMLDivElement>) => {
@@ -92,56 +111,4 @@ const Chip = React.forwardRef(({
   );
 });
 
-Chip.propTypes = {
-  /** Specifies the content of the `Chip`. */
-  // @ts-ignore
-  children: PropTypes.node.isRequired,
-  /** Specifies an additional `className` to add to the base element. */
-  className: PropTypes.string,
-  /** The `Chip` style variant to use. */
-  variant: PropTypes.oneOf(['light', 'dark']),
-  /** Disables the `Chip`. */
-  disabled: PropTypes.bool,
-  /** Click handler for the whole Chip, has effect only when Chip does not have any interactive icons. */
-  onClick: PropTypes.func,
-  /**
-   * An icon component to render before the content.
-   * Example import of a Paragon icon component:
-   *
-   * `import { Check } from '@openedx/paragon/icons';`
-   */
-  iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,
-  /** Specifies icon alt text. */
-  iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),
-  /** A click handler for the `Chip` icon before. */
-  onIconBeforeClick: PropTypes.func,
-  /**
-   * An icon component to render before after the content.
-   * Example import of a Paragon icon component:
-   *
-   * `import { Check } from '@openedx/paragon/icons';`
-   */
-  iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,
-  /** Specifies icon alt text. */
-  iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),
-  /** A click handler for the `Chip` icon after. */
-  onIconAfterClick: PropTypes.func,
-  /** Indicates if `Chip` has been selected. */
-  isSelected: PropTypes.bool,
-};
-
-Chip.defaultProps = {
-  className: undefined,
-  variant: STYLE_VARIANTS.LIGHT,
-  disabled: false,
-  onClick: undefined,
-  iconBefore: undefined,
-  iconAfter: undefined,
-  onIconBeforeClick: undefined,
-  onIconAfterClick: undefined,
-  isSelected: false,
-  iconAfterAlt: undefined,
-  iconBeforeAlt: undefined,
-};
-
 export default Chip;

package/src/CloseButton/index.tsx

@@ -0,0 +1 @@
+export { default } from 'react-bootstrap/CloseButton';

package/src/Collapse/index.tsx

@@ -0,0 +1 @@
+export { default } from 'react-bootstrap/Collapse';

package/src/DataTable/DropdownFilters.jsx

@@ -1,13 +1,18 @@
 import React, { useContext, useMemo } from 'react';
+import { useIntl } from 'react-intl';
 import DataTableContext from './DataTableContext';
 import { DropdownButton } from '../Dropdown';
 import useWindowSize from '../hooks/useWindowSizeHook';
 import breakpoints from '../utils/breakpoints';
+import messages from './messages';
 
 /** The first filter will be as an input, additional filters will be available in a dropdown.  */
 function DropdownFilters() {
+  const intl = useIntl();
   const { width } = useWindowSize();
-  const { columns, numBreakoutFilters } = useContext(DataTableContext);
+  const {
+    columns, numBreakoutFilters, filtersTitle,
+  } = useContext(DataTableContext);
 
   const [breakoutFilters, otherFilters] = useMemo(() => {
     if (!columns) {
@@ -25,6 +30,8 @@ function DropdownFilters() {
     return [boFilters, dropdownFilters];
   }, [columns, width, numBreakoutFilters]);
 
+  const dropdownTitle = filtersTitle || intl.formatMessage(messages.filtersDropdownTitle);
+
   return (
     <div className="pgn__data-table-filters">
       {breakoutFilters.length > 0 && breakoutFilters.map((column) => (
@@ -33,7 +40,7 @@ function DropdownFilters() {
         </div>
       ))}
       {otherFilters.length > 0 && (
-        <DropdownButton variant="outline-primary" id="table-filters-dropdown" title="Filters">
+        <DropdownButton variant="outline-primary" id="table-filters-dropdown" title={dropdownTitle}>
           {otherFilters.map((column) => (
             <div
               key={column.Header}

package/src/DataTable/README.md

@@ -176,7 +176,7 @@ To enable proper selection behavior with backend pagination (i.e., when ``isSele
       producer: 'Isao Takahata',
       release_date: 1986,
       rt_score: 95,
-    }, 
+    },
     {
       id: '12cfb892-aac0-4c5b-94af-521852e46d6a',
       title: 'Grave of the Fireflies',
@@ -567,7 +567,7 @@ Can be used to show the loading state when ``DataTable`` is asynchronously fetch
     },
   ];
   {/* end example state */}
-  
+
   return (
     <>
       {/* start example form block */}
@@ -634,7 +634,7 @@ You can pass a function to render custom components for bulk actions and table a
       Enroll
     </Button>
   );
-  
+
   const EnrollAction = ({ selectedFlatRows, ...rest }) => (
     // Here is access to the selectedFlatRows, isEntireTableSelected, tableInstance
     <Button variant="danger" onClick={() => console.log('Enroll', selectedFlatRows, rest)}>
@@ -647,13 +647,13 @@ You can pass a function to render custom components for bulk actions and table a
       Assign
     </Button>
   );
-  
+
   const ExtraAction = ({ text, selectedFlatRows, ...rest }) => (
     <Button onClick={() => console.log(`Extra Action ${text}`, selectedFlatRows, rest)}>
       {`Extra Action ${text}`}
     </Button>
   );
-  
+
   return (
     <DataTable
       isSelectable
@@ -734,7 +734,7 @@ You can pass a function to render custom components for bulk actions and table a
     </DataTable>
   )
 }
-  
+
 ```
 
 #### Actions with Data view toggle enabled
@@ -889,7 +889,7 @@ a responsive grid of cards.
       Clear Selection
     </Component>
   );
-  
+
   return (
     <DataTable
       isFilterable
@@ -1103,7 +1103,7 @@ Use `columnSizes` prop of `CardView` component to define how many `Cards` are sh
 
   const ExampleCard = ({ className, original }) => {
     const { name, color, famous_for: famousFor } = original;
-		
+
     return (
       <Card className={className}>
         <Card.ImageCap src="https://picsum.photos/360/200/" srcAlt="Card image" />
@@ -1195,7 +1195,7 @@ You can also display `Cards` with horizontal view. If the table is selectable co
           <Card.Header title={name} />
           <Card.Section>
             <dl>
-              <dt>Color</dt>								
+              <dt>Color</dt>
               <dd>{color}</dd>
               <dt>Famous For</dt>
               <dd>{famousFor}</dd>
@@ -1217,7 +1217,7 @@ You can also display `Cards` with horizontal view. If the table is selectable co
           name: 'Lil Bub',
           color: 'brown tabby',
           famous_for: 'weird tongue',
-        }, 
+        },
         {
           name: 'Grumpy Cat',
           color: 'siamese',
@@ -1258,6 +1258,7 @@ For a more desktop friendly view, you can move filters into a sidebar by providi
 ```jsx live
   <DataTable
     showFiltersInSidebar
+    filtersTitle="Color filters"
     isFilterable
     isSortable
     defaultColumnValues={{ Filter: TextFilter }}
@@ -1330,17 +1331,17 @@ For a more desktop friendly view, you can move filters into a sidebar by providi
 ```
 
 ## Expandable rows
-`DataTable` supports expandable rows which once expanded render additional content under the row. Displayed content 
+`DataTable` supports expandable rows which once expanded render additional content under the row. Displayed content
 is controlled by the `renderRowSubComponent` prop, which is a function that receives `row` as its single prop and renders expanded view, you also
 need to pass `isEpandable` prop to `DataTable` to indicate that it should support expand behavior for rows.
-Finally, an additional column is required to be included into `columns` prop which will contain handlers for expand / collapse behavior, see examples below. 
+Finally, an additional column is required to be included into `columns` prop which will contain handlers for expand / collapse behavior, see examples below.
 
 ### Default view
 
 Here we use default expander column offered by Paragon and for each row render value of the `name` attribute as its subcomponent.
 
 ```jsx live
-<DataTable 
+<DataTable
   isExpandable
   itemCount={7}
   renderRowSubComponent={({ row }) => <div className='text-center'>{row.values.name}</div>}
@@ -1457,10 +1458,10 @@ You can create your own custom expander column and use it, see code example belo
       </DataTable>
     </div>
   )
-	
+
   return (
     <DataTable
-      isExpandable 
+      isExpandable
       renderRowSubComponent={renderSubComponent}
       itemCount={3}
       data={[
@@ -1481,7 +1482,7 @@ You can create your own custom expander column and use it, see code example belo
           reason: 'Felt like it',
         },
         {
-          name: 'Smoothie', 
+          name: 'Smoothie',
           color: 'orange tabby',
           famous_for: 'modeling',
           date_modified: currentDate,
@@ -1527,7 +1528,7 @@ You can create your own cell content by passing the `Cell` property to a specifi
     newColors[index] = cellColors[index] < 3 ? cellColors[index] + 1 : 0;
     setCellColors(newColors);
   };
-  
+
   return (
     <DataTable
       isExpandable
@@ -1544,7 +1545,7 @@ You can create your own cell content by passing the `Cell` property to a specifi
           famous_for: 'serving moods',
         },
         {
-          name: 'Smoothie', 
+          name: 'Smoothie',
           color: 'orange tabby',
           famous_for: 'modeling',
         },