@openedx/paragon 23.16.0 → 23.17.0

package/dist/Card/CardImageCap.js

@@ -19,7 +19,8 @@ const CardImageCap = /*#__PURE__*/React.forwardRef(({
   logoSkeletonHeight,
   logoSkeletonWidth,
   className,
-  imageLoadingType
+  imageLoadingType,
+  skeletonDuringImageLoad
 }, ref) => {
   const {
     orientation,
@@ -28,19 +29,21 @@ const CardImageCap = /*#__PURE__*/React.forwardRef(({
   const [showImageCap, setShowImageCap] = useState(false);
   const [showLogoCap, setShowLogoCap] = useState(false);
   const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;
+  const loadingSkeleton = () => /*#__PURE__*/React.createElement(Skeleton, {
+    containerClassName: "pgn__card-image-cap-loader",
+    height: orientation === 'horizontal' ? '100%' : skeletonHeight,
+    width: skeletonWidth
+  });
+  const loadingLogoSkeleton = () => /*#__PURE__*/React.createElement(Skeleton, {
+    containerClassName: "pgn__card-logo-cap",
+    height: logoSkeletonHeight,
+    width: logoSkeletonWidth
+  });
   if (isLoading) {
     return /*#__PURE__*/React.createElement("div", {
       className: classNames(wrapperClassName, className),
       "data-testid": "image-loader-wrapper"
-    }, /*#__PURE__*/React.createElement(Skeleton, {
-      containerClassName: "pgn__card-image-cap-loader",
-      height: orientation === 'horizontal' ? '100%' : skeletonHeight,
-      width: skeletonWidth
-    }), logoSkeleton && /*#__PURE__*/React.createElement(Skeleton, {
-      containerClassName: "pgn__card-logo-cap",
-      height: logoSkeletonHeight,
-      width: logoSkeletonWidth
-    }));
+    }, loadingSkeleton(), logoSkeleton && loadingLogoSkeleton());
   }
   const handleSrcFallback = (event, altSrc, imageKey) => {
     const {
@@ -59,7 +62,7 @@ const CardImageCap = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(className, wrapperClassName),
     ref: ref
-  }, !!src && /*#__PURE__*/React.createElement("img", {
+  }, !!src && /*#__PURE__*/React.createElement(React.Fragment, null, skeletonDuringImageLoad && !showImageCap && loadingSkeleton(), /*#__PURE__*/React.createElement("img", {
     className: classNames('pgn__card-image-cap', {
       show: showImageCap
     }),
@@ -68,7 +71,7 @@ const CardImageCap = /*#__PURE__*/React.forwardRef(({
     onLoad: () => setShowImageCap(true),
     alt: srcAlt,
     loading: imageLoadingType
-  }), !!logoSrc && /*#__PURE__*/React.createElement("img", {
+  })), !!logoSrc && /*#__PURE__*/React.createElement(React.Fragment, null, skeletonDuringImageLoad && !showLogoCap && loadingLogoSkeleton(), /*#__PURE__*/React.createElement("img", {
     className: classNames('pgn__card-logo-cap', {
       show: showLogoCap
     }),
@@ -77,7 +80,7 @@ const CardImageCap = /*#__PURE__*/React.forwardRef(({
     onLoad: () => setShowLogoCap(true),
     alt: logoAlt,
     loading: imageLoadingType
-  }));
+  })));
 });
 CardImageCap.propTypes = {
   /** Specifies class name to append to the base element. */
@@ -105,7 +108,10 @@ CardImageCap.propTypes = {
   /** Specifies width of Logo skeleton in loading state. */
   logoSkeletonWidth: PropTypes.number,
   /** Specifies loading type for images */
-  imageLoadingType: PropTypes.oneOf(['eager', 'lazy'])
+  imageLoadingType: PropTypes.oneOf(['eager', 'lazy']),
+  /** Render the loading skeleton when the image is loading in
+   *  addition to when the whole card is in `isLoading` state */
+  skeletonDuringImageLoad: PropTypes.bool
 };
 CardImageCap.defaultProps = {
   src: undefined,
@@ -120,7 +126,8 @@ CardImageCap.defaultProps = {
   logoSkeletonHeight: LOGO_SKELETON_HEIGHT_VALUE,
   skeletonWidth: undefined,
   logoSkeletonWidth: undefined,
-  imageLoadingType: 'eager'
+  imageLoadingType: 'eager',
+  skeletonDuringImageLoad: false
 };
 export default CardImageCap;
 //# sourceMappingURL=CardImageCap.js.map

package/dist/Card/CardImageCap.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardImageCap.js","names":["React","useContext","useState","PropTypes","classNames","Skeleton","CardContext","cardSrcFallbackImg","SKELETON_HEIGHT_VALUE","LOGO_SKELETON_HEIGHT_VALUE","CardImageCap","forwardRef","src","fallbackSrc","srcAlt","logoSrc","fallbackLogoSrc","logoAlt","skeletonHeight","skeletonWidth","logoSkeleton","logoSkeletonHeight","logoSkeletonWidth","className","imageLoadingType","ref","orientation","isLoading","showImageCap","setShowImageCap","showLogoCap","setShowLogoCap","wrapperClassName","createElement","containerClassName","height","width","handleSrcFallback","event","altSrc","imageKey","currentTarget","endsWith","show","onError","onLoad","alt","loading","propTypes","string","number","bool","oneOf","defaultProps","undefined"],"sources":["../../src/Card/CardImageCap.jsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\nimport { cardSrcFallbackImg } from './CardFallbackDefaultImage';\n\nconst SKELETON_HEIGHT_VALUE = 140;\nconst LOGO_SKELETON_HEIGHT_VALUE = 41;\n\nconst CardImageCap = React.forwardRef(({\n  src,\n  fallbackSrc,\n  srcAlt,\n  logoSrc,\n  fallbackLogoSrc,\n  logoAlt,\n  skeletonHeight,\n  skeletonWidth,\n  logoSkeleton,\n  logoSkeletonHeight,\n  logoSkeletonWidth,\n  className,\n  imageLoadingType,\n}, ref) => {\n  const { orientation, isLoading } = useContext(CardContext);\n  const [showImageCap, setShowImageCap] = useState(false);\n  const [showLogoCap, setShowLogoCap] = useState(false);\n\n  const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;\n\n  if (isLoading) {\n    return (\n      <div\n        className={classNames(wrapperClassName, className)}\n        data-testid=\"image-loader-wrapper\"\n      >\n        <Skeleton\n          containerClassName=\"pgn__card-image-cap-loader\"\n          height={orientation === 'horizontal' ? '100%' : skeletonHeight}\n          width={skeletonWidth}\n        />\n        {logoSkeleton && (\n          <Skeleton\n            containerClassName=\"pgn__card-logo-cap\"\n            height={logoSkeletonHeight}\n            width={logoSkeletonWidth}\n          />\n        )}\n      </div>\n    );\n  }\n\n  const handleSrcFallback = (event, altSrc, imageKey) => {\n    const { currentTarget } = event;\n\n    if (!altSrc || currentTarget.src.endsWith(altSrc)) {\n      if (imageKey === 'imageCap') {\n        currentTarget.src = cardSrcFallbackImg;\n      } else {\n        setShowLogoCap(false);\n      }\n\n      return;\n    }\n\n    currentTarget.src = altSrc;\n  };\n\n  return (\n    <div className={classNames(className, wrapperClassName)} ref={ref}>\n      {!!src && (\n        <img\n          className={classNames('pgn__card-image-cap', { show: showImageCap })}\n          src={src}\n          onError={(event) => handleSrcFallback(event, fallbackSrc, 'imageCap')}\n          onLoad={() => setShowImageCap(true)}\n          alt={srcAlt}\n          loading={imageLoadingType}\n        />\n      )}\n      {!!logoSrc && (\n        <img\n          className={classNames('pgn__card-logo-cap', { show: showLogoCap })}\n          src={logoSrc}\n          onError={(event) => handleSrcFallback(event, fallbackLogoSrc, 'logoCap')}\n          onLoad={() => setShowLogoCap(true)}\n          alt={logoAlt}\n          loading={imageLoadingType}\n        />\n      )}\n    </div>\n  );\n});\n\nCardImageCap.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies image src. */\n  src: PropTypes.string,\n  /** Specifies fallback image src. */\n  fallbackSrc: PropTypes.string,\n  /** Specifies image alt text. */\n  srcAlt: PropTypes.string,\n  /** Specifies logo src to put on top of the image. */\n  logoSrc: PropTypes.string,\n  /** Specifies fallback image logo src. */\n  fallbackLogoSrc: PropTypes.string,\n  /** Specifies logo image alt text. */\n  logoAlt: PropTypes.string,\n  /** Specifies height of Image skeleton in loading state. */\n  skeletonHeight: PropTypes.number,\n  /** Specifies width of Image skeleton in loading state. */\n  skeletonWidth: PropTypes.number,\n  /** Specifies whether the cap should be displayed during loading. */\n  logoSkeleton: PropTypes.bool,\n  /** Specifies height of Logo skeleton in loading state. */\n  logoSkeletonHeight: PropTypes.number,\n  /** Specifies width of Logo skeleton in loading state. */\n  logoSkeletonWidth: PropTypes.number,\n  /** Specifies loading type for images */\n  imageLoadingType: PropTypes.oneOf(['eager', 'lazy']),\n};\n\nCardImageCap.defaultProps = {\n  src: undefined,\n  fallbackSrc: cardSrcFallbackImg,\n  logoSrc: undefined,\n  fallbackLogoSrc: undefined,\n  className: undefined,\n  srcAlt: undefined,\n  logoAlt: undefined,\n  skeletonHeight: SKELETON_HEIGHT_VALUE,\n  logoSkeleton: false,\n  logoSkeletonHeight: LOGO_SKELETON_HEIGHT_VALUE,\n  skeletonWidth: undefined,\n  logoSkeletonWidth: undefined,\n  imageLoadingType: 'eager',\n};\n\nexport default CardImageCap;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardImageCap.js","names":["React","useContext","useState","PropTypes","classNames","Skeleton","CardContext","cardSrcFallbackImg","SKELETON_HEIGHT_VALUE","LOGO_SKELETON_HEIGHT_VALUE","CardImageCap","forwardRef","src","fallbackSrc","srcAlt","logoSrc","fallbackLogoSrc","logoAlt","skeletonHeight","skeletonWidth","logoSkeleton","logoSkeletonHeight","logoSkeletonWidth","className","imageLoadingType","skeletonDuringImageLoad","ref","orientation","isLoading","showImageCap","setShowImageCap","showLogoCap","setShowLogoCap","wrapperClassName","loadingSkeleton","createElement","containerClassName","height","width","loadingLogoSkeleton","handleSrcFallback","event","altSrc","imageKey","currentTarget","endsWith","Fragment","show","onError","onLoad","alt","loading","propTypes","string","number","bool","oneOf","defaultProps","undefined"],"sources":["../../src/Card/CardImageCap.jsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\nimport { cardSrcFallbackImg } from './CardFallbackDefaultImage';\n\nconst SKELETON_HEIGHT_VALUE = 140;\nconst LOGO_SKELETON_HEIGHT_VALUE = 41;\n\nconst CardImageCap = React.forwardRef(({\n  src,\n  fallbackSrc,\n  srcAlt,\n  logoSrc,\n  fallbackLogoSrc,\n  logoAlt,\n  skeletonHeight,\n  skeletonWidth,\n  logoSkeleton,\n  logoSkeletonHeight,\n  logoSkeletonWidth,\n  className,\n  imageLoadingType,\n  skeletonDuringImageLoad,\n}, ref) => {\n  const { orientation, isLoading } = useContext(CardContext);\n  const [showImageCap, setShowImageCap] = useState(false);\n  const [showLogoCap, setShowLogoCap] = useState(false);\n\n  const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;\n\n  const loadingSkeleton = () => (\n    <Skeleton\n      containerClassName=\"pgn__card-image-cap-loader\"\n      height={orientation === 'horizontal' ? '100%' : skeletonHeight}\n      width={skeletonWidth}\n    />\n  );\n\n  const loadingLogoSkeleton = () => (\n    <Skeleton\n      containerClassName=\"pgn__card-logo-cap\"\n      height={logoSkeletonHeight}\n      width={logoSkeletonWidth}\n    />\n  );\n\n  if (isLoading) {\n    return (\n      <div\n        className={classNames(wrapperClassName, className)}\n        data-testid=\"image-loader-wrapper\"\n      >\n        {loadingSkeleton()}\n        {logoSkeleton && loadingLogoSkeleton()}\n      </div>\n    );\n  }\n\n  const handleSrcFallback = (event, altSrc, imageKey) => {\n    const { currentTarget } = event;\n\n    if (!altSrc || currentTarget.src.endsWith(altSrc)) {\n      if (imageKey === 'imageCap') {\n        currentTarget.src = cardSrcFallbackImg;\n      } else {\n        setShowLogoCap(false);\n      }\n\n      return;\n    }\n\n    currentTarget.src = altSrc;\n  };\n\n  return (\n    <div className={classNames(className, wrapperClassName)} ref={ref}>\n      {!!src && (\n        <>\n          {skeletonDuringImageLoad && !showImageCap && loadingSkeleton()}\n          <img\n            className={classNames('pgn__card-image-cap', { show: showImageCap })}\n            src={src}\n            onError={(event) => handleSrcFallback(event, fallbackSrc, 'imageCap')}\n            onLoad={() => setShowImageCap(true)}\n            alt={srcAlt}\n            loading={imageLoadingType}\n          />\n        </>\n      )}\n      {!!logoSrc && (\n        <>\n          {skeletonDuringImageLoad && !showLogoCap && loadingLogoSkeleton()}\n          <img\n            className={classNames('pgn__card-logo-cap', { show: showLogoCap })}\n            src={logoSrc}\n            onError={(event) => handleSrcFallback(event, fallbackLogoSrc, 'logoCap')}\n            onLoad={() => setShowLogoCap(true)}\n            alt={logoAlt}\n            loading={imageLoadingType}\n          />\n        </>\n      )}\n    </div>\n  );\n});\n\nCardImageCap.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies image src. */\n  src: PropTypes.string,\n  /** Specifies fallback image src. */\n  fallbackSrc: PropTypes.string,\n  /** Specifies image alt text. */\n  srcAlt: PropTypes.string,\n  /** Specifies logo src to put on top of the image. */\n  logoSrc: PropTypes.string,\n  /** Specifies fallback image logo src. */\n  fallbackLogoSrc: PropTypes.string,\n  /** Specifies logo image alt text. */\n  logoAlt: PropTypes.string,\n  /** Specifies height of Image skeleton in loading state. */\n  skeletonHeight: PropTypes.number,\n  /** Specifies width of Image skeleton in loading state. */\n  skeletonWidth: PropTypes.number,\n  /** Specifies whether the cap should be displayed during loading. */\n  logoSkeleton: PropTypes.bool,\n  /** Specifies height of Logo skeleton in loading state. */\n  logoSkeletonHeight: PropTypes.number,\n  /** Specifies width of Logo skeleton in loading state. */\n  logoSkeletonWidth: PropTypes.number,\n  /** Specifies loading type for images */\n  imageLoadingType: PropTypes.oneOf(['eager', 'lazy']),\n  /** Render the loading skeleton when the image is loading in\n   *  addition to when the whole card is in `isLoading` state */\n  skeletonDuringImageLoad: PropTypes.bool,\n};\n\nCardImageCap.defaultProps = {\n  src: undefined,\n  fallbackSrc: cardSrcFallbackImg,\n  logoSrc: undefined,\n  fallbackLogoSrc: undefined,\n  className: undefined,\n  srcAlt: undefined,\n  logoAlt: undefined,\n  skeletonHeight: SKELETON_HEIGHT_VALUE,\n  logoSkeleton: false,\n  logoSkeletonHeight: LOGO_SKELETON_HEIGHT_VALUE,\n  skeletonWidth: undefined,\n  logoSkeletonWidth: undefined,\n  imageLoadingType: 'eager',\n  skeletonDuringImageLoad: false,\n};\n\nexport default CardImageCap;\n"],"mappings":"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","ignoreList":[]}

package/dist/DataTable/DropdownFilters.js

@@ -25,7 +25,7 @@ function DropdownFilters() {
     if (width < breakpoints.small.minWidth) {
       return [[], availableFilters];
     }
-    const numberOfBreakoutFilters = numBreakoutFilters || 1;
+    const numberOfBreakoutFilters = numBreakoutFilters ?? 1;
     const boFilters = availableFilters.slice(0, numberOfBreakoutFilters);
     const dropdownFilters = availableFilters.slice(numberOfBreakoutFilters);
     return [boFilters, dropdownFilters];

package/dist/DataTable/DropdownFilters.js.map

@@ -1 +1 @@
-{"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":[]}
+{"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

@@ -389,8 +389,8 @@ DataTable.propTypes = {
   PropTypes.element])), /** Function for rendering custom components */
   PropTypes.func, /** A custom component representing an action */
   PropTypes.element]),
-  /** Number between one and four filters that can be shown on the top row. */
-  numBreakoutFilters: PropTypes.oneOf([1, 2, 3, 4]),
+  /** Number between zero and four filters that can be shown on the top row. */
+  numBreakoutFilters: PropTypes.oneOf([0, 1, 2, 3, 4]),
   /** Component to be displayed when the table is empty */
   EmptyTableComponent: PropTypes.elementType,
   /** Component to be displayed for row status, ie, 10 of 20 rows. Displayed by default in the TableControlBar */

package/dist/DataTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useMemo","useReducer","PropTypes","useTable","useMountedLayoutEffect","classNames","Table","getVisibleColumns","requiredWhen","requiredWhenNot","getTableArgs","TableControlBar","EmptyTableContent","TableFooter","BulkActions","DropdownFilters","FilterStatus","RowStatus","SelectionStatus","ControlledSelectionStatus","SmartStatus","TableFilters","TableHeaderCell","TableCell","TableHeaderRow","TablePagination","TablePaginationMinimal","DataTableContext","TableActions","ControlledSelect","ControlledSelectHeader","DataTableLayout","ExpandAll","ExpandRow","useDataTableSelections","useSelectionActions","selectionsReducer","initialState","initialSelectionsState","DataTable","columns","data","defaultColumnValues","additionalColumns","isSelectable","isPaginated","manualPagination","pageCount","itemCount","isFilterable","manualFilters","fetchData","isSortable","manualSortBy","isExpandable","renderRowSubComponent","bulkActions","tableActions","numBreakoutFilters","initialTableOptions","EmptyTableComponent","manualSelectColumn","showFiltersInSidebar","filtersTitle","dataViewToggleOptions","disableElevation","className","isLoading","children","onSelectedRowsChanged","maxSelectedRows","onMaxSelectedRows","props","defaultColumn","tableOptions","updatedTableOptions","stateReducer","newState","action","previousState","type","value","selectedRowIds","rowIndex","parseInt","id","selectedRowsOrdered","newSelectedRowsOrdered","filter","item","selections","selectionsDispatch","tableArgs","push","hooks","visibleColumns","selectionProps","selectedRows","length","selectedRowsById","forEach","row","useControlledState","state","selectedFlatRows","controlledTableSelections","instance","pageSize","tableStatePageSize","pageIndex","tableStatePageIndex","sortBy","tableStateSortBy","filters","tableStateFilters","tableStateSelectedRowIds","selectionActions","page","isAllPageRowsSelected","enhancedInstance","createElement","Provider","Fragment","content","defaultProps","undefined","SelectionStatusComponent","FilterStatusComponent","RowStatusComponent","isDataViewToggleEnabled","onDataViewToggle","defaultActiveStateValue","togglePlacement","propTypes","arrayOf","shape","Header","oneOfType","elementType","node","isRequired","accessor","string","Cell","Filter","filterChoices","name","number","bool","disableSortBy","func","buttonText","handleClick","variant","disabled","element","oneOf","EmptyTable"],"sources":["../../src/DataTable/index.jsx"],"sourcesContent":["import React, {\n  useEffect, useMemo, useReducer,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { useTable, useMountedLayoutEffect } from 'react-table';\n\nimport classNames from 'classnames';\nimport Table from './Table';\nimport getVisibleColumns from './utils/getVisibleColumns';\nimport { requiredWhen, requiredWhenNot } from '../utils/propTypes';\nimport getTableArgs from './utils/getTableArgs';\nimport TableControlBar from './TableControlBar';\nimport EmptyTableContent from './EmptyTable';\nimport TableFooter from './TableFooter';\nimport BulkActions from './BulkActions';\nimport DropdownFilters from './DropdownFilters';\nimport FilterStatus from './FilterStatus';\nimport RowStatus from './RowStatus';\nimport SelectionStatus from './selection/SelectionStatus';\nimport ControlledSelectionStatus from './selection/ControlledSelectionStatus';\nimport SmartStatus from './SmartStatus';\nimport TableFilters from './TableFilters';\nimport TableHeaderCell from './TableHeaderCell';\nimport TableCell from './TableCell';\nimport TableHeaderRow from './TableHeaderRow';\nimport TablePagination from './TablePagination';\nimport TablePaginationMinimal from './TablePaginationMinimal';\nimport DataTableContext from './DataTableContext';\nimport TableActions from './TableActions';\nimport ControlledSelect from './selection/ControlledSelect';\nimport ControlledSelectHeader from './selection/ControlledSelectHeader';\nimport DataTableLayout from './DataTableLayout';\nimport ExpandAll from './ExpandAll';\nimport ExpandRow from './ExpandRow';\n\nimport { useDataTableSelections, useSelectionActions } from './hooks';\nimport selectionsReducer, {\n  initialState as initialSelectionsState,\n} from './selection/data/reducer';\n\nfunction DataTable({\n  columns, data, defaultColumnValues, additionalColumns, isSelectable,\n  isPaginated, manualPagination, pageCount, itemCount,\n  isFilterable, manualFilters, fetchData, initialState,\n  isSortable, manualSortBy,\n  isExpandable, renderRowSubComponent,\n  bulkActions, tableActions, numBreakoutFilters,\n  initialTableOptions,\n  EmptyTableComponent,\n  manualSelectColumn,\n  showFiltersInSidebar,\n  filtersTitle,\n  dataViewToggleOptions,\n  disableElevation,\n  className,\n  isLoading,\n  children,\n  onSelectedRowsChanged,\n  maxSelectedRows,\n  onMaxSelectedRows,\n  ...props\n}) {\n  const defaultColumn = useMemo(\n    () => (defaultColumnValues),\n    [defaultColumnValues],\n  );\n  const tableOptions = useMemo(() => {\n    const updatedTableOptions = {\n      stateReducer: (newState, action, previousState) => {\n        switch (action.type) {\n          // Note: we override the `toggleAllRowsSelected` action\n          // from react-table because it only clears the selections on the\n          // currently visible page; it does not clear the `selectedRowIds`\n          // as we would expect for selections on different pages. Instead, we\n          // force `selectedRowIds` to be cleared when `toggleAllRowsSelected(false)`\n          // is called.\n          case 'toggleAllRowsSelected': {\n            if (action.value) {\n              return newState;\n            }\n            return {\n              ...newState,\n              selectedRowIds: {},\n            };\n          }\n          /**\n           * Note: We override the `toggleRowSelected` action from react-table\n           * because we need to preserve the order of the selected rows.\n           * while `selectedRowIds` is an object that contains the selected rows as key-value pairs,\n           * it does not maintain the order of selection. Therefore, we have added the `selectedRowsOrdered` property\n           * to keep track of the order in which the rows were selected.\n           */\n          case 'toggleRowSelected': {\n            const rowIndex = parseInt(action.id, 10);\n            const { selectedRowsOrdered = [] } = previousState;\n\n            let newSelectedRowsOrdered;\n            if (action.value) {\n              newSelectedRowsOrdered = [...selectedRowsOrdered, rowIndex];\n            } else {\n              newSelectedRowsOrdered = selectedRowsOrdered.filter((item) => item !== rowIndex);\n            }\n\n            return {\n              ...newState,\n              selectedRowsOrdered: newSelectedRowsOrdered,\n            };\n          }\n          default:\n            return newState;\n        }\n      },\n      ...initialTableOptions,\n    };\n    return {\n      columns,\n      data,\n      defaultColumn,\n      manualFilters,\n      manualPagination,\n      manualSortBy,\n      initialState,\n      ...updatedTableOptions,\n    };\n  }, [initialTableOptions, columns, data, defaultColumn, manualFilters, manualPagination, manualSortBy, initialState]);\n\n  const [selections, selectionsDispatch] = useReducer(selectionsReducer, initialSelectionsState);\n\n  if (isPaginated && manualPagination) {\n    // pageCount is required when pagination is manual, if it's not there passing -1 as per react-table docs\n    tableOptions.pageCount = pageCount || -1;\n  }\n\n  // NB: Table args *must* be in a particular order\n  const tableArgs = getTableArgs({\n    tableOptions, isFilterable, isSelectable, isPaginated, isSortable, isExpandable,\n  });\n  // adds selection column and action columns as necessary\n  tableArgs.push(hooks => {\n    hooks.visibleColumns.push(\n      visibleColumns => getVisibleColumns(isSelectable, visibleColumns, additionalColumns, manualSelectColumn),\n    );\n  });\n\n  // Pass any controlled selections from context to the appropriate ``useTable`` arguments to maintain\n  // correct selection states on rows, both from a data perspective and in the UI.\n  const selectionProps = {};\n  const { selectedRows } = selections;\n  if (selectedRows.length > 0) {\n    const selectedRowsById = {};\n    selectedRows.forEach((row) => {\n      selectedRowsById[row.id] = true;\n    });\n    tableArgs.push(hooks => {\n      hooks.useControlledState.push(\n        (state) => ({ ...state, selectedRowIds: selectedRowsById }),\n      );\n    });\n    selectionProps.selectedFlatRows = selectedRows;\n  }\n  const controlledTableSelections = [selections, selectionsDispatch];\n\n  // Use the state and functions returned from useTable to build your UI\n  const instance = useTable(...tableArgs);\n\n  const {\n    pageSize: tableStatePageSize,\n    pageIndex: tableStatePageIndex,\n    sortBy: tableStateSortBy,\n    filters: tableStateFilters,\n    selectedRowIds: tableStateSelectedRowIds,\n  } = instance.state;\n\n  useEffect(() => {\n    if (fetchData) {\n      fetchData({\n        pageSize: tableStatePageSize,\n        pageIndex: tableStatePageIndex,\n        sortBy: tableStateSortBy,\n        filters: tableStateFilters,\n      });\n    }\n  }, [fetchData, tableStatePageSize, tableStatePageIndex, tableStateSortBy, tableStateFilters]);\n\n  useMountedLayoutEffect(() => {\n    if (onSelectedRowsChanged) {\n      onSelectedRowsChanged(tableStateSelectedRowIds);\n    }\n  }, [tableStateSelectedRowIds, onSelectedRowsChanged]);\n\n  const selectionActions = useSelectionActions(instance, controlledTableSelections);\n\n  useDataTableSelections({\n    selections,\n    selectionsDispatch,\n    itemCount,\n    selectedRows,\n    page: instance.page,\n    isAllPageRowsSelected: instance.isAllPageRowsSelected,\n  });\n\n  const enhancedInstance = {\n    ...instance,\n    manualFilters,\n    itemCount,\n    numBreakoutFilters,\n    bulkActions,\n    tableActions,\n    controlledTableSelections,\n    showFiltersInSidebar,\n    dataViewToggleOptions,\n    renderRowSubComponent,\n    disableElevation,\n    isLoading,\n    isSelectable,\n    isPaginated,\n    manualSelectColumn,\n    maxSelectedRows,\n    onMaxSelectedRows,\n    filtersTitle,\n    ...selectionProps,\n    ...selectionActions,\n    ...props,\n  };\n\n  return (\n    <DataTableContext.Provider value={enhancedInstance}>\n      <DataTableLayout filtersTitle={filtersTitle} className={className}>\n        <div className={classNames('pgn__data-table-wrapper', {\n          'hide-shadow': !!disableElevation,\n        })}\n        >\n          {children || (\n            <>\n              <TableControlBar />\n              <Table />\n              <EmptyTableComponent content=\"No results found\" />\n              <TableFooter />\n            </>\n          )}\n        </div>\n      </DataTableLayout>\n    </DataTableContext.Provider>\n  );\n}\n\nDataTable.defaultProps = {\n  additionalColumns: [],\n  defaultColumnValues: {},\n  isFilterable: false,\n  isPaginated: false,\n  isSelectable: false,\n  isSortable: false,\n  manualFilters: false,\n  manualPagination: false,\n  manualSortBy: false,\n  fetchData: null,\n  initialState: {},\n  initialTableOptions: {},\n  EmptyTableComponent: EmptyTableContent,\n  children: null,\n  bulkActions: [],\n  tableActions: [],\n  numBreakoutFilters: 1,\n  manualSelectColumn: undefined,\n  SelectionStatusComponent: SelectionStatus,\n  FilterStatusComponent: FilterStatus,\n  RowStatusComponent: RowStatus,\n  showFiltersInSidebar: false,\n  filtersTitle: undefined,\n  dataViewToggleOptions: {\n    isDataViewToggleEnabled: false,\n    onDataViewToggle: () => {},\n    defaultActiveStateValue: 'card',\n    togglePlacement: 'left',\n  },\n  disableElevation: false,\n  renderRowSubComponent: undefined,\n  className: undefined,\n  isExpandable: false,\n  isLoading: false,\n  onSelectedRowsChanged: undefined,\n  maxSelectedRows: undefined,\n  onMaxSelectedRows: undefined,\n};\n\nDataTable.propTypes = {\n  /** Definition of table columns */\n  columns: PropTypes.arrayOf(PropTypes.shape({\n    /** User visible column name */\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n    /** String used to access the correct cell data for this column */\n    accessor: requiredWhenNot(PropTypes.string, 'Cell'),\n    /** Specifies a function that receives `row` as argument and returns cell content */\n    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n    /** Specifies filter component */\n    Filter: PropTypes.elementType,\n    /** Specifies filter type */\n    filter: PropTypes.string,\n    /** Specifies filter choices */\n    filterChoices: PropTypes.arrayOf(PropTypes.shape({\n      name: PropTypes.string,\n      number: PropTypes.number,\n      value: PropTypes.string,\n    })),\n  })).isRequired,\n  /** Data to be displayed in the table */\n  data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n  /** table rows can be selected */\n  isSelectable: PropTypes.bool,\n  /** Alternate column for selecting rows. See react table useSort docs for more information */\n  manualSelectColumn: PropTypes.shape({\n    id: PropTypes.string.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n    disableSortBy: PropTypes.bool.isRequired,\n  }),\n  /** Table columns can be sorted */\n  isSortable: PropTypes.bool,\n  /** Indicates that sorting will be done via backend API. A fetchData function must be provided */\n  manualSortBy: PropTypes.bool,\n  /** Paginate the table */\n  isPaginated: PropTypes.bool,\n  /** Indicates that pagination will be done manually. A fetchData function must be provided */\n  manualPagination: PropTypes.bool,\n  /** Number of pages in the table. Required when manualPagination is true */\n  pageCount: requiredWhen(PropTypes.number, 'manualPagination'),\n  /** Table rows can be filtered, using a default filter in the default column values, or in the column definition */\n  isFilterable: PropTypes.bool,\n  /** Indicates that filtering will be done via a backend API. A fetchData function must be provided */\n  manualFilters: PropTypes.bool,\n\n  /** defaults that will be set on each column. Will be overridden by individual column values */\n  defaultColumnValues: PropTypes.shape({\n    /** A default filter component for the column */\n    Filter: PropTypes.elementType,\n  }),\n  /** Actions or other additional non-data columns can be added here  */\n  additionalColumns: PropTypes.arrayOf(PropTypes.shape({\n    /** id must be unique from other columns ids */\n    id: PropTypes.string.isRequired,\n    /** column header that will be displayed to the user */\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n    /** Component that renders in the added column. It will receive the row as a prop */\n    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n  })),\n  /** Function that will fetch table data. Called when page size, page index or filters change.\n   * Meant to be used with manual filters and pagination */\n  fetchData: PropTypes.func,\n  /** Initial state passed to react-table's documentation https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useTable.md */\n  initialState: PropTypes.shape({\n    pageSize: requiredWhen(PropTypes.number, 'isPaginated'),\n    pageIndex: requiredWhen(PropTypes.number, 'isPaginated'),\n    filters: requiredWhen(PropTypes.arrayOf(PropTypes.shape()), 'manualFilters'),\n    sortBy: requiredWhen(PropTypes.arrayOf(PropTypes.shape()), 'manualSortBy'),\n    selectedRowIds: PropTypes.shape(),\n    selectedRowsOrdered: PropTypes.arrayOf(PropTypes.number),\n  }),\n  /** Table options passed to react-table's useTable hook. Will override some options passed in to DataTable, such\n   as: data, columns, defaultColumn, manualFilters, manualPagination, manualSortBy, and initialState */\n  initialTableOptions: PropTypes.shape({}),\n  /** Actions to be performed on the table. Called with the table instance. Not displayed if rows are selected. */\n  itemCount: PropTypes.number.isRequired,\n  /** Actions to be performed on selected rows of the table. Called with the selected rows.\n   *  Only displayed if rows are selected. */\n  bulkActions: PropTypes.oneOfType([\n    PropTypes.arrayOf(\n      PropTypes.oneOfType([\n        PropTypes.shape({\n          /** Bulk action button text */\n          buttonText: PropTypes.string.isRequired,\n          /** handleClick will be passed the selected rows */\n          handleClick: PropTypes.func.isRequired,\n          /** classnames for button class */\n          className: PropTypes.string,\n          /** optional button variant; only relevant for the first two buttons */\n          variant: PropTypes.string,\n          /** disables button */\n          disabled: PropTypes.bool,\n        }),\n        /** function passed selected items, should return action object */\n        PropTypes.func,\n        /** A custom component representing an action */\n        PropTypes.element,\n      ]),\n    ),\n    /** Function for rendering custom components */\n    PropTypes.func,\n    /** A custom component representing an action */\n    PropTypes.element,\n  ]),\n  /** Function for rendering custom components, called with the table instance */\n  tableActions: PropTypes.oneOfType([\n    PropTypes.arrayOf(\n      PropTypes.oneOfType([\n        PropTypes.shape({\n          /** Bulk action button text */\n          buttonText: PropTypes.string.isRequired,\n          /** handleClick will be passed the selected rows */\n          handleClick: PropTypes.func.isRequired,\n          /** classnames for button class */\n          className: PropTypes.string,\n          /** optional button variant; only relevant for the first two buttons */\n          variant: PropTypes.string,\n          /** disables button */\n          disabled: PropTypes.bool,\n        }),\n        /** function passed table instance, should return action object */\n        PropTypes.func,\n        /** A custom component representing an action */\n        PropTypes.element,\n      ]),\n    ),\n    /** Function for rendering custom components */\n    PropTypes.func,\n    /** A custom component representing an action */\n    PropTypes.element,\n  ]),\n  /** Number between one and four filters that can be shown on the top row. */\n  numBreakoutFilters: PropTypes.oneOf([1, 2, 3, 4]),\n  /** Component to be displayed when the table is empty */\n  EmptyTableComponent: PropTypes.elementType,\n  /** Component to be displayed for row status, ie, 10 of 20 rows. Displayed by default in the TableControlBar */\n  RowStatusComponent: PropTypes.elementType,\n  /** Component to be displayed for selection status. Displayed when there are selected rows and no active filters */\n  SelectionStatusComponent: PropTypes.elementType,\n  /** Component to be displayed for filter status. Displayed when there are active filters. */\n  FilterStatusComponent: PropTypes.elementType,\n  /** If children are not provided a table with control bar and footer will be rendered */\n  children: PropTypes.node,\n  /** If true filters will be shown on sidebar instead */\n  showFiltersInSidebar: PropTypes.bool,\n  /** Class name for the data table layout */\n  className: PropTypes.string,\n  /** Title of the filters section */\n  filtersTitle: PropTypes.string,\n  /** options for data view toggle */\n  dataViewToggleOptions: PropTypes.shape({\n    /** Whether to show a toggle button group which allows view switching between card and table views */\n    isDataViewToggleEnabled: PropTypes.bool,\n    /** Callback invoked when the toggle buttons are clicked, with value of selected button passed in */\n    onDataViewToggle: PropTypes.func,\n    /** default value for toggle active state */\n    defaultActiveStateValue: PropTypes.string,\n    /** placement of toggle 'bottom' will push it to the bottom row in\n     * actions section. Only 'left' and 'bottom' are supported */\n    togglePlacement: PropTypes.string,\n  }),\n  /** Remove the default box shadow on the component */\n  disableElevation: PropTypes.bool,\n  /** A function that will render contents of expanded row, accepts `row` as a prop. */\n  renderRowSubComponent: PropTypes.func,\n  /** Indicates whether table supports expandable rows. */\n  isExpandable: PropTypes.bool,\n  /** Indicates whether the table should show loading states. */\n  isLoading: PropTypes.bool,\n  /** Callback function called when row selections change. */\n  onSelectedRowsChanged: PropTypes.func,\n  /** Indicates the max of rows selectable in the table. Requires isSelectable prop */\n  maxSelectedRows: PropTypes.number,\n  /** Callback after selected max rows. Requires isSelectable and maxSelectedRows props */\n  onMaxSelectedRows: PropTypes.func,\n};\n\nDataTable.BulkActions = BulkActions;\nDataTable.EmptyTable = EmptyTableContent;\nDataTable.DropdownFilters = DropdownFilters;\nDataTable.FilterStatus = FilterStatus;\nDataTable.RowStatus = RowStatus;\nDataTable.SelectionStatus = SelectionStatus;\nDataTable.SmartStatus = SmartStatus;\nDataTable.Table = Table;\nDataTable.TableCell = TableCell;\nDataTable.TableControlBar = TableControlBar;\nDataTable.TableFilters = TableFilters;\nDataTable.TableFooter = TableFooter;\nDataTable.TableHeaderCell = TableHeaderCell;\nDataTable.TableHeaderRow = TableHeaderRow;\nDataTable.TablePagination = TablePagination;\nDataTable.TablePaginationMinimal = TablePaginationMinimal;\nDataTable.TableActions = TableActions;\nDataTable.ControlledSelectionStatus = ControlledSelectionStatus;\nDataTable.ControlledSelect = ControlledSelect;\nDataTable.ControlledSelectHeader = ControlledSelectHeader;\nDataTable.ExpandAll = ExpandAll;\nDataTable.ExpandRow = ExpandRow;\n\nexport default DataTable;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useEffect","useMemo","useReducer","PropTypes","useTable","useMountedLayoutEffect","classNames","Table","getVisibleColumns","requiredWhen","requiredWhenNot","getTableArgs","TableControlBar","EmptyTableContent","TableFooter","BulkActions","DropdownFilters","FilterStatus","RowStatus","SelectionStatus","ControlledSelectionStatus","SmartStatus","TableFilters","TableHeaderCell","TableCell","TableHeaderRow","TablePagination","TablePaginationMinimal","DataTableContext","TableActions","ControlledSelect","ControlledSelectHeader","DataTableLayout","ExpandAll","ExpandRow","useDataTableSelections","useSelectionActions","selectionsReducer","initialState","initialSelectionsState","DataTable","columns","data","defaultColumnValues","additionalColumns","isSelectable","isPaginated","manualPagination","pageCount","itemCount","isFilterable","manualFilters","fetchData","isSortable","manualSortBy","isExpandable","renderRowSubComponent","bulkActions","tableActions","numBreakoutFilters","initialTableOptions","EmptyTableComponent","manualSelectColumn","showFiltersInSidebar","filtersTitle","dataViewToggleOptions","disableElevation","className","isLoading","children","onSelectedRowsChanged","maxSelectedRows","onMaxSelectedRows","props","defaultColumn","tableOptions","updatedTableOptions","stateReducer","newState","action","previousState","type","value","selectedRowIds","rowIndex","parseInt","id","selectedRowsOrdered","newSelectedRowsOrdered","filter","item","selections","selectionsDispatch","tableArgs","push","hooks","visibleColumns","selectionProps","selectedRows","length","selectedRowsById","forEach","row","useControlledState","state","selectedFlatRows","controlledTableSelections","instance","pageSize","tableStatePageSize","pageIndex","tableStatePageIndex","sortBy","tableStateSortBy","filters","tableStateFilters","tableStateSelectedRowIds","selectionActions","page","isAllPageRowsSelected","enhancedInstance","createElement","Provider","Fragment","content","defaultProps","undefined","SelectionStatusComponent","FilterStatusComponent","RowStatusComponent","isDataViewToggleEnabled","onDataViewToggle","defaultActiveStateValue","togglePlacement","propTypes","arrayOf","shape","Header","oneOfType","elementType","node","isRequired","accessor","string","Cell","Filter","filterChoices","name","number","bool","disableSortBy","func","buttonText","handleClick","variant","disabled","element","oneOf","EmptyTable"],"sources":["../../src/DataTable/index.jsx"],"sourcesContent":["import React, {\n  useEffect, useMemo, useReducer,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { useTable, useMountedLayoutEffect } from 'react-table';\n\nimport classNames from 'classnames';\nimport Table from './Table';\nimport getVisibleColumns from './utils/getVisibleColumns';\nimport { requiredWhen, requiredWhenNot } from '../utils/propTypes';\nimport getTableArgs from './utils/getTableArgs';\nimport TableControlBar from './TableControlBar';\nimport EmptyTableContent from './EmptyTable';\nimport TableFooter from './TableFooter';\nimport BulkActions from './BulkActions';\nimport DropdownFilters from './DropdownFilters';\nimport FilterStatus from './FilterStatus';\nimport RowStatus from './RowStatus';\nimport SelectionStatus from './selection/SelectionStatus';\nimport ControlledSelectionStatus from './selection/ControlledSelectionStatus';\nimport SmartStatus from './SmartStatus';\nimport TableFilters from './TableFilters';\nimport TableHeaderCell from './TableHeaderCell';\nimport TableCell from './TableCell';\nimport TableHeaderRow from './TableHeaderRow';\nimport TablePagination from './TablePagination';\nimport TablePaginationMinimal from './TablePaginationMinimal';\nimport DataTableContext from './DataTableContext';\nimport TableActions from './TableActions';\nimport ControlledSelect from './selection/ControlledSelect';\nimport ControlledSelectHeader from './selection/ControlledSelectHeader';\nimport DataTableLayout from './DataTableLayout';\nimport ExpandAll from './ExpandAll';\nimport ExpandRow from './ExpandRow';\n\nimport { useDataTableSelections, useSelectionActions } from './hooks';\nimport selectionsReducer, {\n  initialState as initialSelectionsState,\n} from './selection/data/reducer';\n\nfunction DataTable({\n  columns, data, defaultColumnValues, additionalColumns, isSelectable,\n  isPaginated, manualPagination, pageCount, itemCount,\n  isFilterable, manualFilters, fetchData, initialState,\n  isSortable, manualSortBy,\n  isExpandable, renderRowSubComponent,\n  bulkActions, tableActions, numBreakoutFilters,\n  initialTableOptions,\n  EmptyTableComponent,\n  manualSelectColumn,\n  showFiltersInSidebar,\n  filtersTitle,\n  dataViewToggleOptions,\n  disableElevation,\n  className,\n  isLoading,\n  children,\n  onSelectedRowsChanged,\n  maxSelectedRows,\n  onMaxSelectedRows,\n  ...props\n}) {\n  const defaultColumn = useMemo(\n    () => (defaultColumnValues),\n    [defaultColumnValues],\n  );\n  const tableOptions = useMemo(() => {\n    const updatedTableOptions = {\n      stateReducer: (newState, action, previousState) => {\n        switch (action.type) {\n          // Note: we override the `toggleAllRowsSelected` action\n          // from react-table because it only clears the selections on the\n          // currently visible page; it does not clear the `selectedRowIds`\n          // as we would expect for selections on different pages. Instead, we\n          // force `selectedRowIds` to be cleared when `toggleAllRowsSelected(false)`\n          // is called.\n          case 'toggleAllRowsSelected': {\n            if (action.value) {\n              return newState;\n            }\n            return {\n              ...newState,\n              selectedRowIds: {},\n            };\n          }\n          /**\n           * Note: We override the `toggleRowSelected` action from react-table\n           * because we need to preserve the order of the selected rows.\n           * while `selectedRowIds` is an object that contains the selected rows as key-value pairs,\n           * it does not maintain the order of selection. Therefore, we have added the `selectedRowsOrdered` property\n           * to keep track of the order in which the rows were selected.\n           */\n          case 'toggleRowSelected': {\n            const rowIndex = parseInt(action.id, 10);\n            const { selectedRowsOrdered = [] } = previousState;\n\n            let newSelectedRowsOrdered;\n            if (action.value) {\n              newSelectedRowsOrdered = [...selectedRowsOrdered, rowIndex];\n            } else {\n              newSelectedRowsOrdered = selectedRowsOrdered.filter((item) => item !== rowIndex);\n            }\n\n            return {\n              ...newState,\n              selectedRowsOrdered: newSelectedRowsOrdered,\n            };\n          }\n          default:\n            return newState;\n        }\n      },\n      ...initialTableOptions,\n    };\n    return {\n      columns,\n      data,\n      defaultColumn,\n      manualFilters,\n      manualPagination,\n      manualSortBy,\n      initialState,\n      ...updatedTableOptions,\n    };\n  }, [initialTableOptions, columns, data, defaultColumn, manualFilters, manualPagination, manualSortBy, initialState]);\n\n  const [selections, selectionsDispatch] = useReducer(selectionsReducer, initialSelectionsState);\n\n  if (isPaginated && manualPagination) {\n    // pageCount is required when pagination is manual, if it's not there passing -1 as per react-table docs\n    tableOptions.pageCount = pageCount || -1;\n  }\n\n  // NB: Table args *must* be in a particular order\n  const tableArgs = getTableArgs({\n    tableOptions, isFilterable, isSelectable, isPaginated, isSortable, isExpandable,\n  });\n  // adds selection column and action columns as necessary\n  tableArgs.push(hooks => {\n    hooks.visibleColumns.push(\n      visibleColumns => getVisibleColumns(isSelectable, visibleColumns, additionalColumns, manualSelectColumn),\n    );\n  });\n\n  // Pass any controlled selections from context to the appropriate ``useTable`` arguments to maintain\n  // correct selection states on rows, both from a data perspective and in the UI.\n  const selectionProps = {};\n  const { selectedRows } = selections;\n  if (selectedRows.length > 0) {\n    const selectedRowsById = {};\n    selectedRows.forEach((row) => {\n      selectedRowsById[row.id] = true;\n    });\n    tableArgs.push(hooks => {\n      hooks.useControlledState.push(\n        (state) => ({ ...state, selectedRowIds: selectedRowsById }),\n      );\n    });\n    selectionProps.selectedFlatRows = selectedRows;\n  }\n  const controlledTableSelections = [selections, selectionsDispatch];\n\n  // Use the state and functions returned from useTable to build your UI\n  const instance = useTable(...tableArgs);\n\n  const {\n    pageSize: tableStatePageSize,\n    pageIndex: tableStatePageIndex,\n    sortBy: tableStateSortBy,\n    filters: tableStateFilters,\n    selectedRowIds: tableStateSelectedRowIds,\n  } = instance.state;\n\n  useEffect(() => {\n    if (fetchData) {\n      fetchData({\n        pageSize: tableStatePageSize,\n        pageIndex: tableStatePageIndex,\n        sortBy: tableStateSortBy,\n        filters: tableStateFilters,\n      });\n    }\n  }, [fetchData, tableStatePageSize, tableStatePageIndex, tableStateSortBy, tableStateFilters]);\n\n  useMountedLayoutEffect(() => {\n    if (onSelectedRowsChanged) {\n      onSelectedRowsChanged(tableStateSelectedRowIds);\n    }\n  }, [tableStateSelectedRowIds, onSelectedRowsChanged]);\n\n  const selectionActions = useSelectionActions(instance, controlledTableSelections);\n\n  useDataTableSelections({\n    selections,\n    selectionsDispatch,\n    itemCount,\n    selectedRows,\n    page: instance.page,\n    isAllPageRowsSelected: instance.isAllPageRowsSelected,\n  });\n\n  const enhancedInstance = {\n    ...instance,\n    manualFilters,\n    itemCount,\n    numBreakoutFilters,\n    bulkActions,\n    tableActions,\n    controlledTableSelections,\n    showFiltersInSidebar,\n    dataViewToggleOptions,\n    renderRowSubComponent,\n    disableElevation,\n    isLoading,\n    isSelectable,\n    isPaginated,\n    manualSelectColumn,\n    maxSelectedRows,\n    onMaxSelectedRows,\n    filtersTitle,\n    ...selectionProps,\n    ...selectionActions,\n    ...props,\n  };\n\n  return (\n    <DataTableContext.Provider value={enhancedInstance}>\n      <DataTableLayout filtersTitle={filtersTitle} className={className}>\n        <div className={classNames('pgn__data-table-wrapper', {\n          'hide-shadow': !!disableElevation,\n        })}\n        >\n          {children || (\n            <>\n              <TableControlBar />\n              <Table />\n              <EmptyTableComponent content=\"No results found\" />\n              <TableFooter />\n            </>\n          )}\n        </div>\n      </DataTableLayout>\n    </DataTableContext.Provider>\n  );\n}\n\nDataTable.defaultProps = {\n  additionalColumns: [],\n  defaultColumnValues: {},\n  isFilterable: false,\n  isPaginated: false,\n  isSelectable: false,\n  isSortable: false,\n  manualFilters: false,\n  manualPagination: false,\n  manualSortBy: false,\n  fetchData: null,\n  initialState: {},\n  initialTableOptions: {},\n  EmptyTableComponent: EmptyTableContent,\n  children: null,\n  bulkActions: [],\n  tableActions: [],\n  numBreakoutFilters: 1,\n  manualSelectColumn: undefined,\n  SelectionStatusComponent: SelectionStatus,\n  FilterStatusComponent: FilterStatus,\n  RowStatusComponent: RowStatus,\n  showFiltersInSidebar: false,\n  filtersTitle: undefined,\n  dataViewToggleOptions: {\n    isDataViewToggleEnabled: false,\n    onDataViewToggle: () => {},\n    defaultActiveStateValue: 'card',\n    togglePlacement: 'left',\n  },\n  disableElevation: false,\n  renderRowSubComponent: undefined,\n  className: undefined,\n  isExpandable: false,\n  isLoading: false,\n  onSelectedRowsChanged: undefined,\n  maxSelectedRows: undefined,\n  onMaxSelectedRows: undefined,\n};\n\nDataTable.propTypes = {\n  /** Definition of table columns */\n  columns: PropTypes.arrayOf(PropTypes.shape({\n    /** User visible column name */\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n    /** String used to access the correct cell data for this column */\n    accessor: requiredWhenNot(PropTypes.string, 'Cell'),\n    /** Specifies a function that receives `row` as argument and returns cell content */\n    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n    /** Specifies filter component */\n    Filter: PropTypes.elementType,\n    /** Specifies filter type */\n    filter: PropTypes.string,\n    /** Specifies filter choices */\n    filterChoices: PropTypes.arrayOf(PropTypes.shape({\n      name: PropTypes.string,\n      number: PropTypes.number,\n      value: PropTypes.string,\n    })),\n  })).isRequired,\n  /** Data to be displayed in the table */\n  data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n  /** table rows can be selected */\n  isSelectable: PropTypes.bool,\n  /** Alternate column for selecting rows. See react table useSort docs for more information */\n  manualSelectColumn: PropTypes.shape({\n    id: PropTypes.string.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n    disableSortBy: PropTypes.bool.isRequired,\n  }),\n  /** Table columns can be sorted */\n  isSortable: PropTypes.bool,\n  /** Indicates that sorting will be done via backend API. A fetchData function must be provided */\n  manualSortBy: PropTypes.bool,\n  /** Paginate the table */\n  isPaginated: PropTypes.bool,\n  /** Indicates that pagination will be done manually. A fetchData function must be provided */\n  manualPagination: PropTypes.bool,\n  /** Number of pages in the table. Required when manualPagination is true */\n  pageCount: requiredWhen(PropTypes.number, 'manualPagination'),\n  /** Table rows can be filtered, using a default filter in the default column values, or in the column definition */\n  isFilterable: PropTypes.bool,\n  /** Indicates that filtering will be done via a backend API. A fetchData function must be provided */\n  manualFilters: PropTypes.bool,\n\n  /** defaults that will be set on each column. Will be overridden by individual column values */\n  defaultColumnValues: PropTypes.shape({\n    /** A default filter component for the column */\n    Filter: PropTypes.elementType,\n  }),\n  /** Actions or other additional non-data columns can be added here  */\n  additionalColumns: PropTypes.arrayOf(PropTypes.shape({\n    /** id must be unique from other columns ids */\n    id: PropTypes.string.isRequired,\n    /** column header that will be displayed to the user */\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n    /** Component that renders in the added column. It will receive the row as a prop */\n    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n  })),\n  /** Function that will fetch table data. Called when page size, page index or filters change.\n   * Meant to be used with manual filters and pagination */\n  fetchData: PropTypes.func,\n  /** Initial state passed to react-table's documentation https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useTable.md */\n  initialState: PropTypes.shape({\n    pageSize: requiredWhen(PropTypes.number, 'isPaginated'),\n    pageIndex: requiredWhen(PropTypes.number, 'isPaginated'),\n    filters: requiredWhen(PropTypes.arrayOf(PropTypes.shape()), 'manualFilters'),\n    sortBy: requiredWhen(PropTypes.arrayOf(PropTypes.shape()), 'manualSortBy'),\n    selectedRowIds: PropTypes.shape(),\n    selectedRowsOrdered: PropTypes.arrayOf(PropTypes.number),\n  }),\n  /** Table options passed to react-table's useTable hook. Will override some options passed in to DataTable, such\n   as: data, columns, defaultColumn, manualFilters, manualPagination, manualSortBy, and initialState */\n  initialTableOptions: PropTypes.shape({}),\n  /** Actions to be performed on the table. Called with the table instance. Not displayed if rows are selected. */\n  itemCount: PropTypes.number.isRequired,\n  /** Actions to be performed on selected rows of the table. Called with the selected rows.\n   *  Only displayed if rows are selected. */\n  bulkActions: PropTypes.oneOfType([\n    PropTypes.arrayOf(\n      PropTypes.oneOfType([\n        PropTypes.shape({\n          /** Bulk action button text */\n          buttonText: PropTypes.string.isRequired,\n          /** handleClick will be passed the selected rows */\n          handleClick: PropTypes.func.isRequired,\n          /** classnames for button class */\n          className: PropTypes.string,\n          /** optional button variant; only relevant for the first two buttons */\n          variant: PropTypes.string,\n          /** disables button */\n          disabled: PropTypes.bool,\n        }),\n        /** function passed selected items, should return action object */\n        PropTypes.func,\n        /** A custom component representing an action */\n        PropTypes.element,\n      ]),\n    ),\n    /** Function for rendering custom components */\n    PropTypes.func,\n    /** A custom component representing an action */\n    PropTypes.element,\n  ]),\n  /** Function for rendering custom components, called with the table instance */\n  tableActions: PropTypes.oneOfType([\n    PropTypes.arrayOf(\n      PropTypes.oneOfType([\n        PropTypes.shape({\n          /** Bulk action button text */\n          buttonText: PropTypes.string.isRequired,\n          /** handleClick will be passed the selected rows */\n          handleClick: PropTypes.func.isRequired,\n          /** classnames for button class */\n          className: PropTypes.string,\n          /** optional button variant; only relevant for the first two buttons */\n          variant: PropTypes.string,\n          /** disables button */\n          disabled: PropTypes.bool,\n        }),\n        /** function passed table instance, should return action object */\n        PropTypes.func,\n        /** A custom component representing an action */\n        PropTypes.element,\n      ]),\n    ),\n    /** Function for rendering custom components */\n    PropTypes.func,\n    /** A custom component representing an action */\n    PropTypes.element,\n  ]),\n  /** Number between zero and four filters that can be shown on the top row. */\n  numBreakoutFilters: PropTypes.oneOf([0, 1, 2, 3, 4]),\n  /** Component to be displayed when the table is empty */\n  EmptyTableComponent: PropTypes.elementType,\n  /** Component to be displayed for row status, ie, 10 of 20 rows. Displayed by default in the TableControlBar */\n  RowStatusComponent: PropTypes.elementType,\n  /** Component to be displayed for selection status. Displayed when there are selected rows and no active filters */\n  SelectionStatusComponent: PropTypes.elementType,\n  /** Component to be displayed for filter status. Displayed when there are active filters. */\n  FilterStatusComponent: PropTypes.elementType,\n  /** If children are not provided a table with control bar and footer will be rendered */\n  children: PropTypes.node,\n  /** If true filters will be shown on sidebar instead */\n  showFiltersInSidebar: PropTypes.bool,\n  /** Class name for the data table layout */\n  className: PropTypes.string,\n  /** Title of the filters section */\n  filtersTitle: PropTypes.string,\n  /** options for data view toggle */\n  dataViewToggleOptions: PropTypes.shape({\n    /** Whether to show a toggle button group which allows view switching between card and table views */\n    isDataViewToggleEnabled: PropTypes.bool,\n    /** Callback invoked when the toggle buttons are clicked, with value of selected button passed in */\n    onDataViewToggle: PropTypes.func,\n    /** default value for toggle active state */\n    defaultActiveStateValue: PropTypes.string,\n    /** placement of toggle 'bottom' will push it to the bottom row in\n     * actions section. Only 'left' and 'bottom' are supported */\n    togglePlacement: PropTypes.string,\n  }),\n  /** Remove the default box shadow on the component */\n  disableElevation: PropTypes.bool,\n  /** A function that will render contents of expanded row, accepts `row` as a prop. */\n  renderRowSubComponent: PropTypes.func,\n  /** Indicates whether table supports expandable rows. */\n  isExpandable: PropTypes.bool,\n  /** Indicates whether the table should show loading states. */\n  isLoading: PropTypes.bool,\n  /** Callback function called when row selections change. */\n  onSelectedRowsChanged: PropTypes.func,\n  /** Indicates the max of rows selectable in the table. Requires isSelectable prop */\n  maxSelectedRows: PropTypes.number,\n  /** Callback after selected max rows. Requires isSelectable and maxSelectedRows props */\n  onMaxSelectedRows: PropTypes.func,\n};\n\nDataTable.BulkActions = BulkActions;\nDataTable.EmptyTable = EmptyTableContent;\nDataTable.DropdownFilters = DropdownFilters;\nDataTable.FilterStatus = FilterStatus;\nDataTable.RowStatus = RowStatus;\nDataTable.SelectionStatus = SelectionStatus;\nDataTable.SmartStatus = SmartStatus;\nDataTable.Table = Table;\nDataTable.TableCell = TableCell;\nDataTable.TableControlBar = TableControlBar;\nDataTable.TableFilters = TableFilters;\nDataTable.TableFooter = TableFooter;\nDataTable.TableHeaderCell = TableHeaderCell;\nDataTable.TableHeaderRow = TableHeaderRow;\nDataTable.TablePagination = TablePagination;\nDataTable.TablePaginationMinimal = TablePaginationMinimal;\nDataTable.TableActions = TableActions;\nDataTable.ControlledSelectionStatus = ControlledSelectionStatus;\nDataTable.ControlledSelect = ControlledSelect;\nDataTable.ControlledSelectHeader = ControlledSelectHeader;\nDataTable.ExpandAll = ExpandAll;\nDataTable.ExpandRow = ExpandRow;\n\nexport default DataTable;\n"],"mappings":"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","ignoreList":[]}

package/package.json

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

package/src/Card/CardImageCap.jsx

@@ -22,6 +22,7 @@ const CardImageCap = React.forwardRef(({
   logoSkeletonWidth,
   className,
   imageLoadingType,
+  skeletonDuringImageLoad,
 }, ref) => {
   const { orientation, isLoading } = useContext(CardContext);
   const [showImageCap, setShowImageCap] = useState(false);
@@ -29,24 +30,30 @@ const CardImageCap = React.forwardRef(({
 
   const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;
 
+  const loadingSkeleton = () => (
+    <Skeleton
+      containerClassName="pgn__card-image-cap-loader"
+      height={orientation === 'horizontal' ? '100%' : skeletonHeight}
+      width={skeletonWidth}
+    />
+  );
+
+  const loadingLogoSkeleton = () => (
+    <Skeleton
+      containerClassName="pgn__card-logo-cap"
+      height={logoSkeletonHeight}
+      width={logoSkeletonWidth}
+    />
+  );
+
   if (isLoading) {
     return (
       <div
         className={classNames(wrapperClassName, className)}
         data-testid="image-loader-wrapper"
       >
-        <Skeleton
-          containerClassName="pgn__card-image-cap-loader"
-          height={orientation === 'horizontal' ? '100%' : skeletonHeight}
-          width={skeletonWidth}
-        />
-        {logoSkeleton && (
-          <Skeleton
-            containerClassName="pgn__card-logo-cap"
-            height={logoSkeletonHeight}
-            width={logoSkeletonWidth}
-          />
-        )}
+        {loadingSkeleton()}
+        {logoSkeleton && loadingLogoSkeleton()}
       </div>
     );
   }
@@ -70,24 +77,30 @@ const CardImageCap = React.forwardRef(({
   return (
     <div className={classNames(className, wrapperClassName)} ref={ref}>
       {!!src && (
-        <img
-          className={classNames('pgn__card-image-cap', { show: showImageCap })}
-          src={src}
-          onError={(event) => handleSrcFallback(event, fallbackSrc, 'imageCap')}
-          onLoad={() => setShowImageCap(true)}
-          alt={srcAlt}
-          loading={imageLoadingType}
-        />
+        <>
+          {skeletonDuringImageLoad && !showImageCap && loadingSkeleton()}
+          <img
+            className={classNames('pgn__card-image-cap', { show: showImageCap })}
+            src={src}
+            onError={(event) => handleSrcFallback(event, fallbackSrc, 'imageCap')}
+            onLoad={() => setShowImageCap(true)}
+            alt={srcAlt}
+            loading={imageLoadingType}
+          />
+        </>
       )}
       {!!logoSrc && (
-        <img
-          className={classNames('pgn__card-logo-cap', { show: showLogoCap })}
-          src={logoSrc}
-          onError={(event) => handleSrcFallback(event, fallbackLogoSrc, 'logoCap')}
-          onLoad={() => setShowLogoCap(true)}
-          alt={logoAlt}
-          loading={imageLoadingType}
-        />
+        <>
+          {skeletonDuringImageLoad && !showLogoCap && loadingLogoSkeleton()}
+          <img
+            className={classNames('pgn__card-logo-cap', { show: showLogoCap })}
+            src={logoSrc}
+            onError={(event) => handleSrcFallback(event, fallbackLogoSrc, 'logoCap')}
+            onLoad={() => setShowLogoCap(true)}
+            alt={logoAlt}
+            loading={imageLoadingType}
+          />
+        </>
       )}
     </div>
   );
@@ -120,6 +133,9 @@ CardImageCap.propTypes = {
   logoSkeletonWidth: PropTypes.number,
   /** Specifies loading type for images */
   imageLoadingType: PropTypes.oneOf(['eager', 'lazy']),
+  /** Render the loading skeleton when the image is loading in
+   *  addition to when the whole card is in `isLoading` state */
+  skeletonDuringImageLoad: PropTypes.bool,
 };
 
 CardImageCap.defaultProps = {
@@ -136,6 +152,7 @@ CardImageCap.defaultProps = {
   skeletonWidth: undefined,
   logoSkeletonWidth: undefined,
   imageLoadingType: 'eager',
+  skeletonDuringImageLoad: false,
 };
 
 export default CardImageCap;

package/src/DataTable/DropdownFilters.jsx

@@ -23,7 +23,7 @@ function DropdownFilters() {
       return [[], availableFilters];
     }
 
-    const numberOfBreakoutFilters = numBreakoutFilters || 1;
+    const numberOfBreakoutFilters = numBreakoutFilters ?? 1;
     const boFilters = availableFilters.slice(0, numberOfBreakoutFilters);
     const dropdownFilters = availableFilters.slice(numberOfBreakoutFilters);
 

package/src/DataTable/index.jsx

@@ -416,8 +416,8 @@ DataTable.propTypes = {
     /** A custom component representing an action */
     PropTypes.element,
   ]),
-  /** Number between one and four filters that can be shown on the top row. */
-  numBreakoutFilters: PropTypes.oneOf([1, 2, 3, 4]),
+  /** Number between zero and four filters that can be shown on the top row. */
+  numBreakoutFilters: PropTypes.oneOf([0, 1, 2, 3, 4]),
   /** Component to be displayed when the table is empty */
   EmptyTableComponent: PropTypes.elementType,
   /** Component to be displayed for row status, ie, 10 of 20 rows. Displayed by default in the TableControlBar */

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

@@ -162,6 +162,44 @@ describe('<DataTable />', () => {
     expect(screen.getByText('More')).toBeInTheDocument();
   });
 
+  it('places all filters in the dropdown if numBreakoutFilters is 0', async () => {
+    render(
+      <DataTableWrapper
+        {...props}
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        numBreakoutFilters={0}
+      />,
+    );
+
+    expect(screen.queryByPlaceholderText('Search name')).toBeNull();
+
+    const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
+    await userEvent.click(filtersButton);
+
+    expect(screen.getByPlaceholderText('Search name')).toBeInTheDocument();
+  });
+
+  it('displays two breakout filters if numBreakoutFilters is 2', async () => {
+    render(
+      <DataTableWrapper
+        {...props}
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        numBreakoutFilters={2}
+      />,
+    );
+
+    expect(screen.getByPlaceholderText('Search name')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Search famous for')).toBeInTheDocument();
+    expect(screen.queryByPlaceholderText('Search coat color')).toBeNull();
+
+    const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
+    await userEvent.click(filtersButton);
+
+    expect(screen.getByPlaceholderText('Search coat color')).toBeInTheDocument();
+  });
+
   it('displays the custom filters title in the sidebar', () => {
     render(
       <DataTableWrapper