@openedx/paragon 23.14.0 → 23.14.2

package/README.md

@@ -136,6 +136,72 @@ Note that if you are using ``@edx/frontend-platform``'s ``AppProvider`` componen
   });
 ```
 
+## Available Scripts
+
+Paragon provides a comprehensive set of npm scripts to help with development, testing, building, and maintenance tasks. Here's a detailed explanation of each available script:
+
+### Build Scripts
+
+- **`npm run build`** - Builds the entire Paragon design system using the Makefile. This compiles TypeScript, SCSS, and creates the distribution files in the `dist/` directory.
+
+- **`npm run build-docs`** - Builds the documentation website specifically. This is useful when generating a static version of the docs for deployment.
+
+- **`npm run build-types`** - Generates TypeScript declaration files (`.d.ts`). This is essential for providing type information to TypeScript consumers.
+
+### Development Scripts
+
+- **`npm start`** - Starts the documentation website development server. This is the primary way to view and interact with Paragon components during development.
+
+- **`npm run generate-component`** - Launches the component generator tool. This interactive CLI helps create new components with all the necessary files and boilerplate code.
+
+- **`npm run example:start`** - Starts the example application, which allows testing Paragon components in a micro-frontend (MFE) environment.
+
+- **`npm run example:start:with-theme`** - Starts the example application with theme support, useful for testing branded components.
+
+### Testing Scripts
+
+- **`npm run test`** - Runs the full test suite with coverage reporting using Jest.
+
+- **`npm run test:watch`** - Runs tests in watch mode, automatically re-running tests when files change.
+
+- **`npm run debug-test`** - Runs tests with Node.js inspector enabled, allowing debugging tests in Chrome DevTools.
+
+- **`npm run snapshot`** - Updates Jest snapshot files. Run this when intentional changes to component rendering should be reflected in snapshots.
+
+### Code Quality Scripts
+
+- **`npm run lint`** - Runs both ESLint (for JavaScript/TypeScript) and Stylelint (for SCSS) to check code quality and enforce coding standards.
+
+- **`npm run stylelint`** - Runs Stylelint specifically on SCSS files to ensure consistent styling conventions.
+
+- **`npm run type-check`** - Performs TypeScript type checking without emitting files.
+
+- **`npm run type-check:watch`** - Runs TypeScript type checking in watch mode, continuously monitoring for type errors during development.
+
+### Internationalization Scripts
+
+- **`npm run i18n_extract`** - Extracts internationalization strings from React components and generates a JSON file for translation services like Transifex.
+
+- **`npm run i18n_compile`** - Compiles translated messages back into the format expected by react-intl.
+
+### Documentation and Playroom Scripts
+
+- **`npm run playroom:start`** - Starts Playroom, a tool for developing and testing components in isolation with live code editing.
+
+- **`npm run playroom:build`** - Builds a static version of Playroom for deployment.
+
+### Release and Maintenance Scripts
+
+- **`npm run semantic-release`** - Runs the semantic release process, which automatically determines version bumps, creates Git tags, and publishes to npm based on commit messages.
+
+- **`npm run generate-changelog`** - Generates a changelog file based on commit history and semantic versioning.
+
+- **`npm run commit`** - Runs the commitizen CLI, which helps create properly formatted commit messages that work with semantic-release.
+
+- **`npm run prepublishOnly`** - Automatically runs before npm publish to ensure the library is built before distribution.
+
+- **`npm run prepare`** - Sets up Git hooks (via Husky) for pre-commit linting and other checks.
+
 ## Contributing
 
 The branch to target with your PR depends on the type of change you are contributing to Paragon.
@@ -163,7 +229,7 @@ If you want to test the changes with local MFE setup, you need to create a "modu
 ```javascript
 module.exports = {
   /*
-  Modules you want to use from local source code. Adding a module here means that when 
+  Modules you want to use from local source code. Adding a module here means that when
   your MFE runs its build, it'll resolve the source from peer directories of the app.
 
   moduleName: the name you use to import code from the module.
@@ -188,26 +254,26 @@ Then, when importing Paragon's core SCSS in your MFE the import needs to begin w
 When developing a new component you should generally follow three rules:
 1. The component should not have **any** hardcoded strings as it would be impossible for consumers to translate it
 2. Internationalize all default values of props that expect strings, i.e.
-   
+
    - For places where you need to display a string, and it's okay if it is a React element use ``FormattedMessage``, e.g. (see [Alert](src/Alert/index.jsx) component for a full example)
-   
+
       ```javascript
       import { FormattedMessage } from 'react-intl';
-      
-      <FormattedMessage 
+
+      <FormattedMessage
         id="pgn.Alert.closeLabel"
         defaultMessage="Dismiss"
         description="Label of a close button on Alert component"
       />
       ```
-     
+
    - For places where the display string has to be a plain JavaScript string use ``formatMessage``, this would require access to ``intl`` object from ``react-intl``, e.g.
-      
+
       - For class components use ``injectIntl`` HOC
 
           ```javascript
           import { injectIntl } from 'react-intl';
-          
+
           class MyClassComponent extends React.Component {
             render() {
               const { altText, intl } = this.props;
@@ -216,7 +282,7 @@ When developing a new component you should generally follow three rules:
                 defaultMessage: 'Close',
                 description: 'Close label for Toast component',
               });
-              
+
               return (
                 <IconButton
                   alt={intlCloseLabel}
@@ -226,15 +292,15 @@ When developing a new component you should generally follow three rules:
               )
             }
           }
-          
+
           export default injectIntl(MyClassComponent);
           ```
 
       - For functional components use ``useIntl`` hook
 
-          ```javascript 
+          ```javascript
           import { useIntl } from 'react-intl';
-    
+
           const MyFunctionComponent = ({ altText }) => {
             const intls = useIntl();
             const intlAltText = altText || intl.formatMessage({
@@ -242,7 +308,7 @@ When developing a new component you should generally follow three rules:
               defaultMessage: 'Close',
               description: 'Close label for Toast component',
             });
-    
+
             return (
               <IconButton
                 alt={intlCloseLabel}
@@ -254,7 +320,7 @@ When developing a new component you should generally follow three rules:
 
           export default MyFunctionComponent;
           ```
-      
+
    **Notes on the format above**:
    - `id` is required and must be a dot-separated string of the format `pgn.<componentName>.<subcomponentName>.<propName>`
    - The `defaultMessage` is required, and should be the English display string.

package/dist/Alert/index.d.ts

@@ -1,29 +1,49 @@
 import React, { ReactNode, ElementType, FC, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { AlertProps as BaseAlertProps } from 'react-bootstrap';
+import { type TransitionComponent } from 'react-bootstrap/helpers';
 import { IconProps } from '../Icon';
 export declare const ALERT_CLOSE_LABEL_TEXT = "Dismiss";
 export type AlertVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light';
 export type BaseProps = Omit<BaseAlertProps, 'children' | 'variant' | 'closeLabel'>;
 export interface AlertProps extends BaseProps {
+    /** Specifies class name to append to the base element */
     className?: string;
+    /** Overrides underlying component base CSS class name */
     bsPrefix?: string;
+    /** Specifies variant to use. */
     variant?: AlertVariant;
+    /**
+     * Animate the entering and exiting of the Alert. `true` will use the `<Fade>` transition,
+     * more detailed customization is also provided.
+     */
+    transition?: boolean | TransitionComponent;
     children?: ReactNode;
+    /** Icon that will be shown in the alert */
     icon?: React.ComponentType<IconProps>;
+    /** Whether the alert is shown. */
     show?: boolean;
+    /** Whether the alert is dismissible. Defaults to false. */
     dismissible?: boolean;
+    /** Optional callback function for when the alert it dismissed. */
     onClose?: () => void;
+    /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */
     actions?: React.ReactElement[];
+    /** Position of the dismiss and call-to-action buttons. Defaults to `false`. */
     stacked?: boolean;
+    /** Sets the text for alert close button, defaults to 'Dismiss'. */
     closeLabel?: string | ReactNode;
 }
 export interface AlertHeadingProps {
+    /** Specifies the base element */
     as?: ElementType;
+    /** Overrides underlying component base CSS class name */
     bsPrefix?: string;
     children?: ReactNode;
 }
 export interface AlertLinkProps {
+    /** Specifies the base element */
     as?: ElementType;
+    /** Overrides underlying component base CSS class name */
     bsPrefix?: string;
     children?: ReactNode;
     href?: string;

package/dist/Alert/index.js

@@ -1,6 +1,5 @@
 /* eslint-disable react/require-default-props */
 import React, { useCallback, useEffect, useState, forwardRef, cloneElement } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Alert as BaseAlert } from 'react-bootstrap';
 import divWithClassName from 'react-bootstrap/divWithClassName';
@@ -17,10 +16,11 @@ const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     icon,
     actions,
-    dismissible,
-    onClose,
+    dismissible = false,
+    onClose = () => {},
     closeLabel,
-    stacked,
+    stacked = false,
+    show = true,
     ...props
   } = _ref;
   const [isStacked, setIsStacked] = useState(stacked);
@@ -45,6 +45,7 @@ const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
   return /*#__PURE__*/React.createElement(BaseAlert, {
     ...props,
     className: classNames('alert-content', props.className),
+    show: show,
     ref: ref
   }, icon && /*#__PURE__*/React.createElement(Icon, {
     src: icon,
@@ -74,90 +75,30 @@ const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
 // so there seems to be no other way of providing correct default prop for base element
 const DivStyledAsH4 = divWithClassName('h4');
 DivStyledAsH4.displayName = 'DivStyledAsH4';
-function AlertHeading(props) {
+function AlertHeading(_ref2) {
+  let {
+    as = DivStyledAsH4,
+    bsPrefix = 'alert-heading',
+    ...props
+  } = _ref2;
   return /*#__PURE__*/React.createElement(BaseAlert.Heading, {
+    as,
+    bsPrefix,
     ...props
   });
 }
-function AlertLink(props) {
+function AlertLink(_ref3) {
+  let {
+    as = 'a',
+    bsPrefix = 'alert-link',
+    ...props
+  } = _ref3;
   return /*#__PURE__*/React.createElement(BaseAlert.Link, {
+    as,
+    bsPrefix,
     ...props
   });
 }
-AlertLink.propTypes = {
-  /** Specifies the base element */
-  as: PropTypes.elementType,
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string
-};
-AlertHeading.propTypes = {
-  /** Specifies the base element */
-  as: PropTypes.elementType,
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string
-};
-AlertLink.defaultProps = {
-  as: 'a',
-  bsPrefix: 'alert-link'
-};
-AlertHeading.defaultProps = {
-  as: DivStyledAsH4,
-  bsPrefix: 'alert-heading'
-};
-Alert.propTypes = {
-  ...BaseAlert.propTypes,
-  /** Specifies class name to append to the base element */
-  className: PropTypes.string,
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string,
-  /** Specifies variant to use. */
-  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light']),
-  /**
-   * Animate the entering and exiting of the Alert. `true` will use the `<Fade>` transition,
-   * more detailed customization is also provided.
-   */
-  transition: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    in: PropTypes.bool,
-    appear: PropTypes.bool,
-    children: PropTypes.node,
-    onEnter: PropTypes.func,
-    onEntered: PropTypes.func,
-    onEntering: PropTypes.func,
-    onExit: PropTypes.func,
-    onExited: PropTypes.func,
-    onExiting: PropTypes.func
-  })]),
-  /** Docstring for the children prop */
-  children: PropTypes.node,
-  /** Docstring for the icon prop... Icon that will be shown in the alert */
-  icon: PropTypes.func,
-  /** Whether the alert is shown. */
-  show: PropTypes.bool,
-  /** Whether the alert is dismissible. Defaults to true. */
-  dismissible: PropTypes.bool,
-  /** Optional callback function for when the alert it dismissed. */
-  onClose: PropTypes.func,
-  /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */
-  actions: PropTypes.arrayOf(PropTypes.element),
-  /** Position of the dismiss and call-to-action buttons. Defaults to ``false``. */
-  stacked: PropTypes.bool,
-  /** Sets the text for alert close button, defaults to 'Dismiss'. */
-  closeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-};
-Alert.defaultProps = {
-  ...BaseAlert.defaultProps,
-  children: undefined,
-  icon: undefined,
-  actions: undefined,
-  dismissible: false,
-  onClose: () => {},
-  closeLabel: undefined,
-  show: true,
-  stacked: false,
-  className: undefined,
-  bsPrefix: undefined,
-  variant: undefined
-};
 Alert.Heading = AlertHeading;
 Alert.Link = AlertLink;
 export default Alert;

package/dist/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","forwardRef","cloneElement","PropTypes","classNames","Alert","BaseAlert","divWithClassName","FormattedMessage","useMediaQuery","Icon","breakpoints","Button","ActionRow","ALERT_CLOSE_LABEL_TEXT","_ref","ref","children","icon","actions","dismissible","onClose","closeLabel","stacked","props","isStacked","setIsStacked","isExtraSmall","maxWidth","extraSmall","actionButtonSize","cloneActionElement","Action","addtlActionProps","size","key","createElement","className","src","length","Spacer","variant","onClick","id","defaultMessage","description","map","DivStyledAsH4","displayName","AlertHeading","Heading","AlertLink","Link","propTypes","as","elementType","bsPrefix","string","defaultProps","oneOf","transition","oneOfType","bool","shape","in","appear","node","onEnter","func","onEntered","onEntering","onExit","onExited","onExiting","show","arrayOf","element","undefined"],"sources":["../../src/Alert/index.tsx"],"sourcesContent":["/* eslint-disable react/require-default-props */\nimport React, {\n  useCallback,\n  useEffect,\n  useState,\n  ReactNode,\n  ElementType,\n  forwardRef,\n  FC,\n  ForwardRefExoticComponent,\n  RefAttributes,\n  cloneElement,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport {\n  Alert as BaseAlert,\n  AlertProps as BaseAlertProps,\n} from 'react-bootstrap';\nimport divWithClassName from 'react-bootstrap/divWithClassName';\nimport { FormattedMessage } from 'react-intl';\nimport { useMediaQuery } from 'react-responsive';\nimport Icon, { IconProps } from '../Icon';\nimport breakpoints from '../utils/breakpoints';\nimport Button from '../Button';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ActionRow from '../ActionRow';\n\nexport const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';\n\nexport type AlertVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light';\n\nexport type BaseProps = Omit<BaseAlertProps, 'children' | 'variant' | 'closeLabel'>;\n\nexport interface AlertProps extends BaseProps {\n  className?: string;\n  bsPrefix?: string;\n  variant?: AlertVariant;\n  children?: ReactNode;\n  icon?: React.ComponentType<IconProps>;\n  show?: boolean;\n  dismissible?: boolean;\n  onClose?: () => void;\n  actions?: React.ReactElement[];\n  stacked?: boolean;\n  closeLabel?: string | ReactNode;\n}\n\nexport interface AlertHeadingProps {\n  as?: ElementType;\n  bsPrefix?: string;\n  children?: ReactNode;\n}\n\nexport interface AlertLinkProps {\n  as?: ElementType;\n  bsPrefix?: string;\n  children?: ReactNode;\n  href?: string;\n}\n\nexport interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {\n  Heading: FC<AlertHeadingProps>;\n  Link: FC<AlertLinkProps>;\n}\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(({\n  children,\n  icon,\n  actions,\n  dismissible,\n  onClose,\n  closeLabel,\n  stacked,\n  ...props\n}, ref) => {\n  const [isStacked, setIsStacked] = useState(stacked);\n  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });\n  const actionButtonSize = 'sm';\n\n  useEffect(() => {\n    if (isExtraSmall) {\n      setIsStacked(true);\n    } else {\n      setIsStacked(stacked);\n    }\n  }, [isExtraSmall, stacked]);\n\n  const cloneActionElement = useCallback(\n    (Action: React.ReactElement) => {\n      const addtlActionProps = { size: actionButtonSize, key: Action.props.children };\n      return cloneElement(Action, addtlActionProps);\n    },\n    [],\n  );\n\n  return (\n    <BaseAlert\n      {...props}\n      className={classNames('alert-content', props.className)}\n      ref={ref}\n    >\n      {icon && <Icon src={icon} className=\"alert-icon\" />}\n      <div\n        className={classNames({\n          'pgn__alert-message-wrapper': !isStacked,\n          'pgn__alert-message-wrapper-stacked': isStacked,\n        })}\n      >\n        <div className=\"alert-message-content\">\n          {children}\n        </div>\n        {(dismissible || (actions && actions.length > 0)) && (\n          <ActionRow className=\"pgn__alert-actions\">\n            <ActionRow.Spacer />\n            {dismissible && (\n              <Button\n                size={actionButtonSize}\n                variant=\"tertiary\"\n                onClick={onClose}\n              >\n                {closeLabel || (\n                  <FormattedMessage\n                    id=\"pgn.Alert.closeLabel\"\n                    defaultMessage=\"Dismiss\"\n                    description=\"Label of a close button on Alert component\"\n                  />\n                )}\n              </Button>\n            )}\n            {actions && actions.map(cloneActionElement)}\n          </ActionRow>\n        )}\n      </div>\n    </BaseAlert>\n  );\n}) as AlertComponent;\n\n// This is needed to display a default prop for Alert.Heading element\n// Copied from react-bootstrap since BaseAlert.Heading component doesn't have defaultProps,\n// so there seems to be no other way of providing correct default prop for base element\nconst DivStyledAsH4 = divWithClassName('h4');\nDivStyledAsH4.displayName = 'DivStyledAsH4';\n\nfunction AlertHeading(props: AlertHeadingProps): JSX.Element {\n  return <BaseAlert.Heading {...props} />;\n}\n\nfunction AlertLink(props: AlertLinkProps): JSX.Element {\n  return <BaseAlert.Link {...props} />;\n}\n\nAlertLink.propTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType as PropTypes.Validator<ElementType>,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nAlertHeading.propTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType as PropTypes.Validator<ElementType>,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nAlertLink.defaultProps = {\n  as: 'a' as ElementType,\n  bsPrefix: 'alert-link',\n};\n\nAlertHeading.defaultProps = {\n  as: DivStyledAsH4,\n  bsPrefix: 'alert-heading',\n};\n\nAlert.propTypes = {\n  ...BaseAlert.propTypes,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'] as AlertVariant[]),\n  /**\n   * Animate the entering and exiting of the Alert. `true` will use the `<Fade>` transition,\n   * more detailed customization is also provided.\n   */\n  transition: PropTypes.oneOfType([\n    PropTypes.bool,\n    PropTypes.shape({\n      in: PropTypes.bool,\n      appear: PropTypes.bool,\n      children: PropTypes.node,\n      onEnter: PropTypes.func,\n      onEntered: PropTypes.func,\n      onEntering: PropTypes.func,\n      onExit: PropTypes.func,\n      onExited: PropTypes.func,\n      onExiting: PropTypes.func,\n    }),\n  ]) as PropTypes.Validator<BaseAlertProps['transition']>,\n  /** Docstring for the children prop */\n  children: PropTypes.node as PropTypes.Validator<ReactNode>,\n  /** Docstring for the icon prop... Icon that will be shown in the alert */\n  icon: PropTypes.func,\n  /** Whether the alert is shown. */\n  show: PropTypes.bool,\n  /** Whether the alert is dismissible. Defaults to true. */\n  dismissible: PropTypes.bool,\n  /** Optional callback function for when the alert it dismissed. */\n  onClose: PropTypes.func,\n  /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */\n  actions: PropTypes.arrayOf(PropTypes.element) as PropTypes.Validator<React.ReactElement[]>,\n  /** Position of the dismiss and call-to-action buttons. Defaults to ``false``. */\n  stacked: PropTypes.bool,\n  /** Sets the text for alert close button, defaults to 'Dismiss'. */\n  closeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nAlert.defaultProps = {\n  ...BaseAlert.defaultProps,\n  children: undefined,\n  icon: undefined,\n  actions: undefined,\n  dismissible: false,\n  onClose: () => {},\n  closeLabel: undefined,\n  show: true,\n  stacked: false,\n  className: undefined,\n  bsPrefix: undefined,\n  variant: undefined,\n};\n\nAlert.Heading = AlertHeading;\nAlert.Link = AlertLink;\n\nexport default Alert;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","forwardRef","cloneElement","classNames","Alert","BaseAlert","divWithClassName","FormattedMessage","useMediaQuery","Icon","breakpoints","Button","ActionRow","ALERT_CLOSE_LABEL_TEXT","_ref","ref","children","icon","actions","dismissible","onClose","closeLabel","stacked","show","props","isStacked","setIsStacked","isExtraSmall","maxWidth","extraSmall","actionButtonSize","cloneActionElement","Action","addtlActionProps","size","key","createElement","className","src","length","Spacer","variant","onClick","id","defaultMessage","description","map","DivStyledAsH4","displayName","AlertHeading","_ref2","as","bsPrefix","Heading","AlertLink","_ref3","Link"],"sources":["../../src/Alert/index.tsx"],"sourcesContent":["/* eslint-disable react/require-default-props */\nimport React, {\n  useCallback,\n  useEffect,\n  useState,\n  ReactNode,\n  ElementType,\n  forwardRef,\n  FC,\n  ForwardRefExoticComponent,\n  RefAttributes,\n  cloneElement,\n} from 'react';\nimport classNames from 'classnames';\nimport {\n  Alert as BaseAlert,\n  AlertProps as BaseAlertProps,\n} from 'react-bootstrap';\nimport { type TransitionComponent } from 'react-bootstrap/helpers';\nimport divWithClassName from 'react-bootstrap/divWithClassName';\nimport { FormattedMessage } from 'react-intl';\nimport { useMediaQuery } from 'react-responsive';\nimport Icon, { IconProps } from '../Icon';\nimport breakpoints from '../utils/breakpoints';\nimport Button from '../Button';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ActionRow from '../ActionRow';\n\nexport const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';\n\nexport type AlertVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light';\n\nexport type BaseProps = Omit<BaseAlertProps, 'children' | 'variant' | 'closeLabel'>;\n\nexport interface AlertProps extends BaseProps {\n  /** Specifies class name to append to the base element */\n  className?: string;\n  /** Overrides underlying component base CSS class name */\n  bsPrefix?: string;\n  /** Specifies variant to use. */\n  variant?: AlertVariant;\n  /**\n   * Animate the entering and exiting of the Alert. `true` will use the `<Fade>` transition,\n   * more detailed customization is also provided.\n   */\n  transition?: boolean | TransitionComponent;\n  children?: ReactNode;\n  /** Icon that will be shown in the alert */\n  icon?: React.ComponentType<IconProps>;\n  /** Whether the alert is shown. */\n  show?: boolean;\n  /** Whether the alert is dismissible. Defaults to false. */\n  dismissible?: boolean;\n  /** Optional callback function for when the alert it dismissed. */\n  onClose?: () => void;\n  /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */\n  actions?: React.ReactElement[];\n  /** Position of the dismiss and call-to-action buttons. Defaults to `false`. */\n  stacked?: boolean;\n  /** Sets the text for alert close button, defaults to 'Dismiss'. */\n  closeLabel?: string | ReactNode;\n}\n\nexport interface AlertHeadingProps {\n  /** Specifies the base element */\n  as?: ElementType;\n  /** Overrides underlying component base CSS class name */\n  bsPrefix?: string;\n  // eslint-disable-next-line react/no-unused-prop-types\n  children?: ReactNode;\n}\n\nexport interface AlertLinkProps {\n  /** Specifies the base element */\n  as?: ElementType;\n  /** Overrides underlying component base CSS class name */\n  bsPrefix?: string;\n  // eslint-disable-next-line react/no-unused-prop-types\n  children?: ReactNode;\n  // eslint-disable-next-line react/no-unused-prop-types\n  href?: string;\n}\n\nexport interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {\n  Heading: FC<AlertHeadingProps>;\n  Link: FC<AlertLinkProps>;\n}\n\nconst Alert = forwardRef(({\n  children,\n  icon,\n  actions,\n  dismissible = false,\n  onClose = () => {},\n  closeLabel,\n  stacked = false,\n  show = true,\n  ...props\n}: AlertProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const [isStacked, setIsStacked] = useState(stacked);\n  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });\n  const actionButtonSize = 'sm';\n\n  useEffect(() => {\n    if (isExtraSmall) {\n      setIsStacked(true);\n    } else {\n      setIsStacked(stacked);\n    }\n  }, [isExtraSmall, stacked]);\n\n  const cloneActionElement = useCallback(\n    (Action: React.ReactElement) => {\n      const addtlActionProps = { size: actionButtonSize, key: Action.props.children };\n      return cloneElement(Action, addtlActionProps);\n    },\n    [],\n  );\n\n  return (\n    <BaseAlert\n      {...props}\n      className={classNames('alert-content', props.className)}\n      show={show}\n      ref={ref}\n    >\n      {icon && <Icon src={icon} className=\"alert-icon\" />}\n      <div\n        className={classNames({\n          'pgn__alert-message-wrapper': !isStacked,\n          'pgn__alert-message-wrapper-stacked': isStacked,\n        })}\n      >\n        <div className=\"alert-message-content\">\n          {children}\n        </div>\n        {(dismissible || (actions && actions.length > 0)) && (\n          <ActionRow className=\"pgn__alert-actions\">\n            <ActionRow.Spacer />\n            {dismissible && (\n              <Button\n                size={actionButtonSize}\n                variant=\"tertiary\"\n                onClick={onClose}\n              >\n                {closeLabel || (\n                  <FormattedMessage\n                    id=\"pgn.Alert.closeLabel\"\n                    defaultMessage=\"Dismiss\"\n                    description=\"Label of a close button on Alert component\"\n                  />\n                )}\n              </Button>\n            )}\n            {actions && actions.map(cloneActionElement)}\n          </ActionRow>\n        )}\n      </div>\n    </BaseAlert>\n  );\n}) as AlertComponent;\n\n// This is needed to display a default prop for Alert.Heading element\n// Copied from react-bootstrap since BaseAlert.Heading component doesn't have defaultProps,\n// so there seems to be no other way of providing correct default prop for base element\nconst DivStyledAsH4 = divWithClassName('h4');\nDivStyledAsH4.displayName = 'DivStyledAsH4';\n\nfunction AlertHeading({\n  as = DivStyledAsH4,\n  bsPrefix = 'alert-heading',\n  ...props\n}: AlertHeadingProps): JSX.Element {\n  return <BaseAlert.Heading {...{ as, bsPrefix, ...props }} />;\n}\n\nfunction AlertLink({\n  as = 'a',\n  bsPrefix = 'alert-link',\n  ...props\n}: AlertLinkProps): JSX.Element {\n  return <BaseAlert.Link {...{ as, bsPrefix, ...props }} />;\n}\n\nAlert.Heading = AlertHeading;\nAlert.Link = AlertLink;\n\nexport default Alert;\n"],"mappings":"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","ignoreList":[]}

package/dist/Bubble/index.d.ts

@@ -1,11 +1,15 @@
 import React from 'react';
-declare const STYLE_VARIANTS: readonly ["primary", "success", "error", "warning"];
-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;
 }
 declare const Bubble: React.ForwardRefExoticComponent<BubbleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/Bubble/index.js

@@ -1,14 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
-const STYLE_VARIANTS = ['primary', 'success', 'error', 'warning'];
 const Bubble = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-    variant,
+    variant = 'primary',
     className,
-    children,
-    disabled,
-    expandable,
+    children = null,
+    disabled = false,
+    expandable = false,
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
@@ -20,25 +18,5 @@ const Bubble = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...props
   }, children);
 });
-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;
 //# sourceMappingURL=index.js.map

package/dist/Bubble/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","STYLE_VARIANTS","Bubble","forwardRef","_ref","ref","variant","className","children","disabled","expandable","props","createElement","propTypes","node","oneOf","bool","string","defaultProps","undefined"],"sources":["../../src/Bubble/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst STYLE_VARIANTS = ['primary', 'success', 'error', 'warning'] as const;\n\nexport type BubbleVariant = typeof STYLE_VARIANTS[number];\n\nexport interface BubbleProps {\n  children: React.ReactNode;\n  variant?: BubbleVariant;\n  disabled?: boolean;\n  className?: string;\n  expandable?: boolean;\n}\n\nconst Bubble = React.forwardRef<HTMLDivElement, BubbleProps>(({\n  variant,\n  className,\n  children,\n  disabled,\n  expandable,\n  ...props\n}, ref) => (\n  <div\n    ref={ref}\n    className={classNames(\n      'pgn__bubble',\n      `pgn__bubble-${variant}`,\n      className,\n      { disabled, expandable },\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n));\n\nBubble.propTypes = {\n  /** Specifies contents of the component. */\n  // @ts-ignore\n  children: PropTypes.node,\n  /** The `Bubble` style variant to use. */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Activates disabled variant. */\n  disabled: PropTypes.bool,\n  /** A class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies whether to add padding to the `Bubble` or not. */\n  expandable: PropTypes.bool,\n};\n\nBubble.defaultProps = {\n  children: null,\n  variant: 'primary',\n  disabled: false,\n  className: undefined,\n  expandable: false,\n};\n\nexport default Bubble;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,MAAMC,cAAc,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAU;AAY1E,MAAMC,MAAM,gBAAGJ,KAAK,CAACK,UAAU,CAA8B,CAAAC,IAAA,EAO1DC,GAAG;EAAA,IAPwD;IAC5DC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACV,GAAGC;EACL,CAAC,GAAAP,IAAA;EAAA,oBACCN,KAAA,CAAAc,aAAA;IACEP,GAAG,EAAEA,GAAI;IACTE,SAAS,EAAEP,UAAU,CACnB,aAAa,EACb,eAAeM,OAAO,EAAE,EACxBC,SAAS,EACT;MAAEE,QAAQ;MAAEC;IAAW,CACzB,CAAE;IAAA,GACEC;EAAK,GAERH,QACE,CAAC;AAAA,CACP,CAAC;AAEFN,MAAM,CAACW,SAAS,GAAG;EACjB;EACA;EACAL,QAAQ,EAAET,SAAS,CAACe,IAAI;EACxB;EACAR,OAAO,EAAEP,SAAS,CAACgB,KAAK,CAACd,cAAc,CAAC;EACxC;EACAQ,QAAQ,EAAEV,SAAS,CAACiB,IAAI;EACxB;EACAT,SAAS,EAAER,SAAS,CAACkB,MAAM;EAC3B;EACAP,UAAU,EAAEX,SAAS,CAACiB;AACxB,CAAC;AAEDd,MAAM,CAACgB,YAAY,GAAG;EACpBV,QAAQ,EAAE,IAAI;EACdF,OAAO,EAAE,SAAS;EAClBG,QAAQ,EAAE,KAAK;EACfF,SAAS,EAAEY,SAAS;EACpBT,UAAU,EAAE;AACd,CAAC;AAED,eAAeR,MAAM","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","classNames","Bubble","forwardRef","_ref","ref","variant","className","children","disabled","expandable","props","createElement"],"sources":["../../src/Bubble/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nexport type BubbleVariant = 'primary' | 'success' | 'error' | 'warning';\n\nexport interface BubbleProps {\n  /** Specifies contents of the component. */\n  children: React.ReactNode;\n  /** The `Bubble` style variant to use. */\n  variant?: BubbleVariant;\n  /** Activates disabled variant. */\n  disabled?: boolean;\n  /** Optional class name(s) to append to the base element. */\n  className?: string;\n  /** Specifies whether to add padding to the `Bubble` or not. */\n  expandable?: boolean;\n}\n\nconst Bubble = React.forwardRef(({\n  variant = 'primary',\n  className,\n  children = null,\n  disabled = false,\n  expandable = false,\n  ...props\n}: BubbleProps, ref: React.ForwardedRef<HTMLDivElement>) => (\n  <div\n    ref={ref}\n    className={classNames(\n      'pgn__bubble',\n      `pgn__bubble-${variant}`,\n      className,\n      { disabled, expandable },\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n));\n\nexport default Bubble;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAiBnC,MAAMC,MAAM,gBAAGF,KAAK,CAACG,UAAU,CAAC,CAAAC,IAAA,EAOhBC,GAAuC;EAAA,IAPtB;IAC/BC,OAAO,GAAG,SAAS;IACnBC,SAAS;IACTC,QAAQ,GAAG,IAAI;IACfC,QAAQ,GAAG,KAAK;IAChBC,UAAU,GAAG,KAAK;IAClB,GAAGC;EACQ,CAAC,GAAAP,IAAA;EAAA,oBACZJ,KAAA,CAAAY,aAAA;IACEP,GAAG,EAAEA,GAAI;IACTE,SAAS,EAAEN,UAAU,CACnB,aAAa,EACb,eAAeK,OAAO,EAAE,EACxBC,SAAS,EACT;MAAEE,QAAQ;MAAEC;IAAW,CACzB,CAAE;IAAA,GACEC;EAAK,GAERH,QACE,CAAC;AAAA,CACP,CAAC;AAEF,eAAeN,MAAM","ignoreList":[]}

package/dist/DataTable/DropdownFilters.js

@@ -1,17 +1,21 @@
 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
+    numBreakoutFilters,
+    filtersTitle
   } = useContext(DataTableContext);
   const [breakoutFilters, otherFilters] = useMemo(() => {
     if (!columns) {
@@ -26,6 +30,7 @@ function DropdownFilters() {
     const dropdownFilters = availableFilters.slice(numberOfBreakoutFilters);
     return [boFilters, dropdownFilters];
   }, [columns, width, numBreakoutFilters]);
+  const dropdownTitle = filtersTitle || intl.formatMessage(messages.filtersDropdownTitle);
   return /*#__PURE__*/React.createElement("div", {
     className: "pgn__data-table-filters"
   }, breakoutFilters.length > 0 && breakoutFilters.map(column => /*#__PURE__*/React.createElement("div", {
@@ -34,7 +39,7 @@ function DropdownFilters() {
   }, column.render('Filter'))), otherFilters.length > 0 && /*#__PURE__*/React.createElement(DropdownButton, {
     variant: "outline-primary",
     id: "table-filters-dropdown",
-    title: "Filters"
+    title: dropdownTitle
   }, otherFilters.map(column => /*#__PURE__*/React.createElement("div", {
     key: column.Header,
     className: "pgn__data-table-filters-dropdown-item"

package/dist/DataTable/DropdownFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownFilters.js","names":["React","useContext","useMemo","DataTableContext","DropdownButton","useWindowSize","breakpoints","DropdownFilters","width","columns","numBreakoutFilters","breakoutFilters","otherFilters","availableFilters","filter","column","canFilter","small","minWidth","numberOfBreakoutFilters","boFilters","slice","dropdownFilters","createElement","className","length","map","key","Header","render","variant","id","title"],"sources":["../../src/DataTable/DropdownFilters.jsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react';\nimport DataTableContext from './DataTableContext';\nimport { DropdownButton } from '../Dropdown';\nimport useWindowSize from '../hooks/useWindowSizeHook';\nimport breakpoints from '../utils/breakpoints';\n\n/** The first filter will be as an input, additional filters will be available in a dropdown.  */\nfunction DropdownFilters() {\n  const { width } = useWindowSize();\n  const { columns, numBreakoutFilters } = useContext(DataTableContext);\n\n  const [breakoutFilters, otherFilters] = useMemo(() => {\n    if (!columns) {\n      return [[], []];\n    }\n    const availableFilters = columns.filter((column) => column.canFilter);\n    if (width < breakpoints.small.minWidth) {\n      return [[], availableFilters];\n    }\n\n    const numberOfBreakoutFilters = numBreakoutFilters || 1;\n    const boFilters = availableFilters.slice(0, numberOfBreakoutFilters);\n    const dropdownFilters = availableFilters.slice(numberOfBreakoutFilters);\n\n    return [boFilters, dropdownFilters];\n  }, [columns, width, numBreakoutFilters]);\n\n  return (\n    <div className=\"pgn__data-table-filters\">\n      {breakoutFilters.length > 0 && breakoutFilters.map((column) => (\n        <div className=\"pgn__data-table-filters-breakout-filter\" key={column.Header}>\n          {column.render('Filter')}\n        </div>\n      ))}\n      {otherFilters.length > 0 && (\n        <DropdownButton variant=\"outline-primary\" id=\"table-filters-dropdown\" title=\"Filters\">\n          {otherFilters.map((column) => (\n            <div\n              key={column.Header}\n              className=\"pgn__data-table-filters-dropdown-item\"\n            >\n              {column.render('Filter')}\n            </div>\n          ))}\n        </DropdownButton>\n      )}\n    </div>\n  );\n}\n\nexport default DropdownFilters;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,SAASC,cAAc,QAAQ,aAAa;AAC5C,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,WAAW,MAAM,sBAAsB;;AAE9C;AACA,SAASC,eAAeA,CAAA,EAAG;EACzB,MAAM;IAAEC;EAAM,CAAC,GAAGH,aAAa,CAAC,CAAC;EACjC,MAAM;IAAEI,OAAO;IAAEC;EAAmB,CAAC,GAAGT,UAAU,CAACE,gBAAgB,CAAC;EAEpE,MAAM,CAACQ,eAAe,EAAEC,YAAY,CAAC,GAAGV,OAAO,CAAC,MAAM;IACpD,IAAI,CAACO,OAAO,EAAE;MACZ,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC;IACjB;IACA,MAAMI,gBAAgB,GAAGJ,OAAO,CAACK,MAAM,CAAEC,MAAM,IAAKA,MAAM,CAACC,SAAS,CAAC;IACrE,IAAIR,KAAK,GAAGF,WAAW,CAACW,KAAK,CAACC,QAAQ,EAAE;MACtC,OAAO,CAAC,EAAE,EAAEL,gBAAgB,CAAC;IAC/B;IAEA,MAAMM,uBAAuB,GAAGT,kBAAkB,IAAI,CAAC;IACvD,MAAMU,SAAS,GAAGP,gBAAgB,CAACQ,KAAK,CAAC,CAAC,EAAEF,uBAAuB,CAAC;IACpE,MAAMG,eAAe,GAAGT,gBAAgB,CAACQ,KAAK,CAACF,uBAAuB,CAAC;IAEvE,OAAO,CAACC,SAAS,EAAEE,eAAe,CAAC;EACrC,CAAC,EAAE,CAACb,OAAO,EAAED,KAAK,EAAEE,kBAAkB,CAAC,CAAC;EAExC,oBACEV,KAAA,CAAAuB,aAAA;IAAKC,SAAS,EAAC;EAAyB,GACrCb,eAAe,CAACc,MAAM,GAAG,CAAC,IAAId,eAAe,CAACe,GAAG,CAAEX,MAAM,iBACxDf,KAAA,CAAAuB,aAAA;IAAKC,SAAS,EAAC,yCAAyC;IAACG,GAAG,EAAEZ,MAAM,CAACa;EAAO,GACzEb,MAAM,CAACc,MAAM,CAAC,QAAQ,CACpB,CACN,CAAC,EACDjB,YAAY,CAACa,MAAM,GAAG,CAAC,iBACtBzB,KAAA,CAAAuB,aAAA,CAACnB,cAAc;IAAC0B,OAAO,EAAC,iBAAiB;IAACC,EAAE,EAAC,wBAAwB;IAACC,KAAK,EAAC;EAAS,GAClFpB,YAAY,CAACc,GAAG,CAAEX,MAAM,iBACvBf,KAAA,CAAAuB,aAAA;IACEI,GAAG,EAAEZ,MAAM,CAACa,MAAO;IACnBJ,SAAS,EAAC;EAAuC,GAEhDT,MAAM,CAACc,MAAM,CAAC,QAAQ,CACpB,CACN,CACa,CAEf,CAAC;AAEV;AAEA,eAAetB,eAAe","ignoreList":[]}
+{"version":3,"file":"DropdownFilters.js","names":["React","useContext","useMemo","useIntl","DataTableContext","DropdownButton","useWindowSize","breakpoints","messages","DropdownFilters","intl","width","columns","numBreakoutFilters","filtersTitle","breakoutFilters","otherFilters","availableFilters","filter","column","canFilter","small","minWidth","numberOfBreakoutFilters","boFilters","slice","dropdownFilters","dropdownTitle","formatMessage","filtersDropdownTitle","createElement","className","length","map","key","Header","render","variant","id","title"],"sources":["../../src/DataTable/DropdownFilters.jsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\nimport DataTableContext from './DataTableContext';\nimport { DropdownButton } from '../Dropdown';\nimport useWindowSize from '../hooks/useWindowSizeHook';\nimport breakpoints from '../utils/breakpoints';\nimport messages from './messages';\n\n/** The first filter will be as an input, additional filters will be available in a dropdown.  */\nfunction DropdownFilters() {\n  const intl = useIntl();\n  const { width } = useWindowSize();\n  const {\n    columns, numBreakoutFilters, filtersTitle,\n  } = useContext(DataTableContext);\n\n  const [breakoutFilters, otherFilters] = useMemo(() => {\n    if (!columns) {\n      return [[], []];\n    }\n    const availableFilters = columns.filter((column) => column.canFilter);\n    if (width < breakpoints.small.minWidth) {\n      return [[], availableFilters];\n    }\n\n    const numberOfBreakoutFilters = numBreakoutFilters || 1;\n    const boFilters = availableFilters.slice(0, numberOfBreakoutFilters);\n    const dropdownFilters = availableFilters.slice(numberOfBreakoutFilters);\n\n    return [boFilters, dropdownFilters];\n  }, [columns, width, numBreakoutFilters]);\n\n  const dropdownTitle = filtersTitle || intl.formatMessage(messages.filtersDropdownTitle);\n\n  return (\n    <div className=\"pgn__data-table-filters\">\n      {breakoutFilters.length > 0 && breakoutFilters.map((column) => (\n        <div className=\"pgn__data-table-filters-breakout-filter\" key={column.Header}>\n          {column.render('Filter')}\n        </div>\n      ))}\n      {otherFilters.length > 0 && (\n        <DropdownButton variant=\"outline-primary\" id=\"table-filters-dropdown\" title={dropdownTitle}>\n          {otherFilters.map((column) => (\n            <div\n              key={column.Header}\n              className=\"pgn__data-table-filters-dropdown-item\"\n            >\n              {column.render('Filter')}\n            </div>\n          ))}\n        </DropdownButton>\n      )}\n    </div>\n  );\n}\n\nexport default DropdownFilters;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,SAASC,OAAO,QAAQ,YAAY;AACpC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,SAASC,cAAc,QAAQ,aAAa;AAC5C,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,WAAW,MAAM,sBAAsB;AAC9C,OAAOC,QAAQ,MAAM,YAAY;;AAEjC;AACA,SAASC,eAAeA,CAAA,EAAG;EACzB,MAAMC,IAAI,GAAGP,OAAO,CAAC,CAAC;EACtB,MAAM;IAAEQ;EAAM,CAAC,GAAGL,aAAa,CAAC,CAAC;EACjC,MAAM;IACJM,OAAO;IAAEC,kBAAkB;IAAEC;EAC/B,CAAC,GAAGb,UAAU,CAACG,gBAAgB,CAAC;EAEhC,MAAM,CAACW,eAAe,EAAEC,YAAY,CAAC,GAAGd,OAAO,CAAC,MAAM;IACpD,IAAI,CAACU,OAAO,EAAE;MACZ,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC;IACjB;IACA,MAAMK,gBAAgB,GAAGL,OAAO,CAACM,MAAM,CAAEC,MAAM,IAAKA,MAAM,CAACC,SAAS,CAAC;IACrE,IAAIT,KAAK,GAAGJ,WAAW,CAACc,KAAK,CAACC,QAAQ,EAAE;MACtC,OAAO,CAAC,EAAE,EAAEL,gBAAgB,CAAC;IAC/B;IAEA,MAAMM,uBAAuB,GAAGV,kBAAkB,IAAI,CAAC;IACvD,MAAMW,SAAS,GAAGP,gBAAgB,CAACQ,KAAK,CAAC,CAAC,EAAEF,uBAAuB,CAAC;IACpE,MAAMG,eAAe,GAAGT,gBAAgB,CAACQ,KAAK,CAACF,uBAAuB,CAAC;IAEvE,OAAO,CAACC,SAAS,EAAEE,eAAe,CAAC;EACrC,CAAC,EAAE,CAACd,OAAO,EAAED,KAAK,EAAEE,kBAAkB,CAAC,CAAC;EAExC,MAAMc,aAAa,GAAGb,YAAY,IAAIJ,IAAI,CAACkB,aAAa,CAACpB,QAAQ,CAACqB,oBAAoB,CAAC;EAEvF,oBACE7B,KAAA,CAAA8B,aAAA;IAAKC,SAAS,EAAC;EAAyB,GACrChB,eAAe,CAACiB,MAAM,GAAG,CAAC,IAAIjB,eAAe,CAACkB,GAAG,CAAEd,MAAM,iBACxDnB,KAAA,CAAA8B,aAAA;IAAKC,SAAS,EAAC,yCAAyC;IAACG,GAAG,EAAEf,MAAM,CAACgB;EAAO,GACzEhB,MAAM,CAACiB,MAAM,CAAC,QAAQ,CACpB,CACN,CAAC,EACDpB,YAAY,CAACgB,MAAM,GAAG,CAAC,iBACtBhC,KAAA,CAAA8B,aAAA,CAACzB,cAAc;IAACgC,OAAO,EAAC,iBAAiB;IAACC,EAAE,EAAC,wBAAwB;IAACC,KAAK,EAAEZ;EAAc,GACxFX,YAAY,CAACiB,GAAG,CAAEd,MAAM,iBACvBnB,KAAA,CAAA8B,aAAA;IACEI,GAAG,EAAEf,MAAM,CAACgB,MAAO;IACnBJ,SAAS,EAAC;EAAuC,GAEhDZ,MAAM,CAACiB,MAAM,CAAC,QAAQ,CACpB,CACN,CACa,CAEf,CAAC;AAEV;AAEA,eAAe3B,eAAe","ignoreList":[]}

package/dist/DataTable/index.js

@@ -57,6 +57,7 @@ function DataTable(_ref) {
     EmptyTableComponent,
     manualSelectColumn,
     showFiltersInSidebar,
+    filtersTitle,
     dataViewToggleOptions,
     disableElevation,
     isLoading,
@@ -220,13 +221,16 @@ function DataTable(_ref) {
     manualSelectColumn,
     maxSelectedRows,
     onMaxSelectedRows,
+    filtersTitle,
     ...selectionProps,
     ...selectionActions,
     ...props
   };
   return /*#__PURE__*/React.createElement(DataTableContext.Provider, {
     value: enhancedInstance
-  }, /*#__PURE__*/React.createElement(DataTableLayout, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(DataTableLayout, {
+    filtersTitle: filtersTitle
+  }, /*#__PURE__*/React.createElement("div", {
     className: classNames('pgn__data-table-wrapper', {
       'hide-shadow': !!disableElevation
     })
@@ -257,6 +261,7 @@ DataTable.defaultProps = {
   FilterStatusComponent: FilterStatus,
   RowStatusComponent: RowStatus,
   showFiltersInSidebar: false,
+  filtersTitle: undefined,
   dataViewToggleOptions: {
     isDataViewToggleEnabled: false,
     onDataViewToggle: () => {},
@@ -396,6 +401,8 @@ DataTable.propTypes = {
   children: PropTypes.node,
   /** If true filters will be shown on sidebar instead */
   showFiltersInSidebar: PropTypes.bool,
+  /** Title of the filters section */
+  filtersTitle: PropTypes.string,
   /** options for data view toggle */
   dataViewToggleOptions: PropTypes.shape({
     /** Whether to show a toggle button group which allows view switching between card and table views */