@openedx/paragon 21.8.0 → 21.9.0

package/dist/DataTable/CollapsibleButtonGroup.js

@@ -92,7 +92,7 @@ CollapsibleButtonGroup.propTypes = {
   className: PropTypes.string,
   /** Array of action objects, containing a component and their callback args */
   actions: PropTypes.arrayOf(PropTypes.shape({
-    component: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,
+    component: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]).isRequired,
     args: PropTypes.shape({})
   })).isRequired
 };

package/dist/DataTable/CollapsibleButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleButtonGroup.js","names":["React","useContext","useMemo","useState","PropTypes","MoreVert","useToggle","useWindowSize","DataTableContext","Icon","IconButton","breakpoints","ModalPopup","Stack","Button","ACTION_OVERFLOW_BUTTON_TEXT","SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT","CollapsibleButtonGroup","_ref","className","actions","rest","_objectWithoutProperties","_excluded","isOverflowMenuOpen","openOverflowMenu","closeOverflowMenu","overflowMenuTarget","setOverflowMenuTarget","controlledTableSelections","isEntireTableSelected","selectedFlatRows","rows","width","selectedRows","visibleActions","dropdownActions","small","minWidth","firstTwoActions","splice","extraActions","slice","reverse","cloneAction","action","index","cloneElement","component","_objectSpread","key","as","args","createElement","_extends","length","Fragment","variant","iconAs","src","alt","id","ref","onClick","positionRef","onClose","placement","isOpen","gap","map","defaultProps","propTypes","string","arrayOf","shape","oneOfType","func","element","isRequired"],"sources":["../../src/DataTable/CollapsibleButtonGroup.jsx"],"sourcesContent":["import React, { useContext, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { MoreVert } from '../../icons';\nimport useToggle from '../hooks/useToggle';\nimport useWindowSize from '../hooks/useWindowSize';\nimport DataTableContext from './DataTableContext';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport breakpoints from '../utils/breakpoints';\nimport ModalPopup from '../Modal/ModalPopup';\nimport Stack from '../Stack';\nimport Button from '../Button';\n\nexport const ACTION_OVERFLOW_BUTTON_TEXT = 'More actions';\nexport const SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT = 'Actions';\n\nfunction CollapsibleButtonGroup({\n  className,\n  actions,\n  ...rest\n}) {\n  const [isOverflowMenuOpen, openOverflowMenu, closeOverflowMenu] = useToggle(false);\n  const [overflowMenuTarget, setOverflowMenuTarget] = useState(null);\n  const {\n    controlledTableSelections: [{ isEntireTableSelected }],\n    selectedFlatRows,\n    rows,\n  } = useContext(DataTableContext);\n  const { width } = useWindowSize();\n  const selectedRows = selectedFlatRows || rows;\n\n  const [visibleActions, dropdownActions] = useMemo(() => {\n    if (width < breakpoints.small.minWidth) {\n      // On a small screen, all actions will be in the overflow menu\n      return [[], [...actions]];\n    }\n    // The first two actions will be displayed as buttons, the rest will go in an overflow menu\n    const firstTwoActions = [...actions].splice(0, 2);\n    const extraActions = [...actions].slice(2);\n\n    /*  Reversing the array because to the user it makes sense to put the primary button first,\n        but we want it on the right */\n    return [firstTwoActions.reverse(), extraActions];\n  }, [actions, width]);\n\n  if (!isEntireTableSelected && !selectedRows) {\n    return null;\n  }\n\n  const cloneAction = (action, index) => React.cloneElement(\n    action.component,\n    {\n      // eslint-disable-next-line react/no-array-index-key\n      key: `${action}${index}`,\n      as: Button, // for backwards compatibility this is needed\n      ...action.args,\n    },\n  );\n\n  return (\n    <div className={className} {...rest}>\n      {dropdownActions.length > 0 && (\n        <>\n          <IconButton\n            variant=\"secondary\"\n            iconAs={Icon}\n            src={MoreVert}\n            alt={width > breakpoints.small.minWidth\n              ? ACTION_OVERFLOW_BUTTON_TEXT : SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT}\n            id=\"actions-dropdown\"\n            ref={setOverflowMenuTarget}\n            onClick={openOverflowMenu}\n          />\n          <ModalPopup\n            positionRef={overflowMenuTarget}\n            onClose={closeOverflowMenu}\n            placement=\"bottom-end\"\n            isOpen={isOverflowMenuOpen}\n          >\n            <div className=\"pgn__datatable__overflow-actions-menu\">\n              <Stack gap={2}>\n                {dropdownActions.map(cloneAction)}\n              </Stack>\n            </div>\n          </ModalPopup>\n        </>\n      )}\n      <div className=\"pgn__datatable__visible-actions\">\n        {visibleActions.map(cloneAction)}\n      </div>\n    </div>\n  );\n}\n\nCollapsibleButtonGroup.defaultProps = {\n  className: null,\n};\n\nCollapsibleButtonGroup.propTypes = {\n  /** Class names for the div wrapping the button components */\n  className: PropTypes.string,\n  /** Array of action objects, containing a component and their callback args */\n  actions: PropTypes.arrayOf(PropTypes.shape({\n    component: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,\n    args: PropTypes.shape({}),\n  })).isRequired,\n};\n\nexport default CollapsibleButtonGroup;\n"],"mappings":"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"}
+{"version":3,"file":"CollapsibleButtonGroup.js","names":["React","useContext","useMemo","useState","PropTypes","MoreVert","useToggle","useWindowSize","DataTableContext","Icon","IconButton","breakpoints","ModalPopup","Stack","Button","ACTION_OVERFLOW_BUTTON_TEXT","SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT","CollapsibleButtonGroup","_ref","className","actions","rest","_objectWithoutProperties","_excluded","isOverflowMenuOpen","openOverflowMenu","closeOverflowMenu","overflowMenuTarget","setOverflowMenuTarget","controlledTableSelections","isEntireTableSelected","selectedFlatRows","rows","width","selectedRows","visibleActions","dropdownActions","small","minWidth","firstTwoActions","splice","extraActions","slice","reverse","cloneAction","action","index","cloneElement","component","_objectSpread","key","as","args","createElement","_extends","length","Fragment","variant","iconAs","src","alt","id","ref","onClick","positionRef","onClose","placement","isOpen","gap","map","defaultProps","propTypes","string","arrayOf","shape","oneOfType","element","elementType","isRequired"],"sources":["../../src/DataTable/CollapsibleButtonGroup.jsx"],"sourcesContent":["import React, { useContext, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { MoreVert } from '../../icons';\nimport useToggle from '../hooks/useToggle';\nimport useWindowSize from '../hooks/useWindowSize';\nimport DataTableContext from './DataTableContext';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport breakpoints from '../utils/breakpoints';\nimport ModalPopup from '../Modal/ModalPopup';\nimport Stack from '../Stack';\nimport Button from '../Button';\n\nexport const ACTION_OVERFLOW_BUTTON_TEXT = 'More actions';\nexport const SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT = 'Actions';\n\nfunction CollapsibleButtonGroup({\n  className,\n  actions,\n  ...rest\n}) {\n  const [isOverflowMenuOpen, openOverflowMenu, closeOverflowMenu] = useToggle(false);\n  const [overflowMenuTarget, setOverflowMenuTarget] = useState(null);\n  const {\n    controlledTableSelections: [{ isEntireTableSelected }],\n    selectedFlatRows,\n    rows,\n  } = useContext(DataTableContext);\n  const { width } = useWindowSize();\n  const selectedRows = selectedFlatRows || rows;\n\n  const [visibleActions, dropdownActions] = useMemo(() => {\n    if (width < breakpoints.small.minWidth) {\n      // On a small screen, all actions will be in the overflow menu\n      return [[], [...actions]];\n    }\n    // The first two actions will be displayed as buttons, the rest will go in an overflow menu\n    const firstTwoActions = [...actions].splice(0, 2);\n    const extraActions = [...actions].slice(2);\n\n    /*  Reversing the array because to the user it makes sense to put the primary button first,\n        but we want it on the right */\n    return [firstTwoActions.reverse(), extraActions];\n  }, [actions, width]);\n\n  if (!isEntireTableSelected && !selectedRows) {\n    return null;\n  }\n\n  const cloneAction = (action, index) => React.cloneElement(\n    action.component,\n    {\n      // eslint-disable-next-line react/no-array-index-key\n      key: `${action}${index}`,\n      as: Button, // for backwards compatibility this is needed\n      ...action.args,\n    },\n  );\n\n  return (\n    <div className={className} {...rest}>\n      {dropdownActions.length > 0 && (\n        <>\n          <IconButton\n            variant=\"secondary\"\n            iconAs={Icon}\n            src={MoreVert}\n            alt={width > breakpoints.small.minWidth\n              ? ACTION_OVERFLOW_BUTTON_TEXT : SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT}\n            id=\"actions-dropdown\"\n            ref={setOverflowMenuTarget}\n            onClick={openOverflowMenu}\n          />\n          <ModalPopup\n            positionRef={overflowMenuTarget}\n            onClose={closeOverflowMenu}\n            placement=\"bottom-end\"\n            isOpen={isOverflowMenuOpen}\n          >\n            <div className=\"pgn__datatable__overflow-actions-menu\">\n              <Stack gap={2}>\n                {dropdownActions.map(cloneAction)}\n              </Stack>\n            </div>\n          </ModalPopup>\n        </>\n      )}\n      <div className=\"pgn__datatable__visible-actions\">\n        {visibleActions.map(cloneAction)}\n      </div>\n    </div>\n  );\n}\n\nCollapsibleButtonGroup.defaultProps = {\n  className: null,\n};\n\nCollapsibleButtonGroup.propTypes = {\n  /** Class names for the div wrapping the button components */\n  className: PropTypes.string,\n  /** Array of action objects, containing a component and their callback args */\n  actions: PropTypes.arrayOf(PropTypes.shape({\n    component: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]).isRequired,\n    args: PropTypes.shape({}),\n  })).isRequired,\n};\n\nexport default CollapsibleButtonGroup;\n"],"mappings":"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"}

package/dist/DataTable/TableFilters.js

@@ -22,7 +22,7 @@ TableFilters.defaultProps = {
 };
 TableFilters.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.shape({
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     canFilter: PropTypes.bool,
     render: PropTypes.func.isRequired
   })).isRequired,

package/dist/DataTable/TableFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFilters.js","names":["React","PropTypes","Button","TABLE_FILTERS_BUTTON_TEXT","TableFilters","_ref","columns","manualFilters","onFilter","currentFilters","createElement","map","column","key","Header","canFilter","render","type","onClick","defaultProps","propTypes","arrayOf","shape","oneOfType","func","node","isRequired","bool"],"sources":["../../src/DataTable/TableFilters.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '../Button';\n\nexport const TABLE_FILTERS_BUTTON_TEXT = 'Filter';\n\nfunction TableFilters({\n  columns, manualFilters, onFilter, currentFilters,\n}) {\n  return (\n    <div>\n      <h4>Filters</h4>\n      {columns.map(column => <div key={column.Header}>{column.canFilter ? column.render('Filter') : null}</div>)}\n      {manualFilters && (\n      <Button\n        type=\"primary\"\n        onClick={() => onFilter(currentFilters)}\n      >\n        {TABLE_FILTERS_BUTTON_TEXT}\n      </Button>\n      )}\n    </div>\n  );\n}\n\nTableFilters.defaultProps = {\n  manualFilters: false,\n  onFilter: () => {},\n};\n\nTableFilters.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.shape({\n    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,\n    canFilter: PropTypes.bool,\n    render: PropTypes.func.isRequired,\n  })).isRequired,\n  manualFilters: PropTypes.bool,\n  onFilter: PropTypes.func,\n  currentFilters: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n};\n\nexport default TableFilters;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,MAAM,MAAM,WAAW;AAE9B,OAAO,MAAMC,yBAAyB,GAAG,QAAQ;AAEjD,SAASC,YAAYA,CAAAC,IAAA,EAElB;EAAA,IAFmB;IACpBC,OAAO;IAAEC,aAAa;IAAEC,QAAQ;IAAEC;EACpC,CAAC,GAAAJ,IAAA;EACC,oBACEL,KAAA,CAAAU,aAAA,2BACEV,KAAA,CAAAU,aAAA,aAAI,SAAW,CAAC,EACfJ,OAAO,CAACK,GAAG,CAACC,MAAM,iBAAIZ,KAAA,CAAAU,aAAA;IAAKG,GAAG,EAAED,MAAM,CAACE;EAAO,GAAEF,MAAM,CAACG,SAAS,GAAGH,MAAM,CAACI,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAU,CAAC,CAAC,EACzGT,aAAa,iBACdP,KAAA,CAAAU,aAAA,CAACR,MAAM;IACLe,IAAI,EAAC,SAAS;IACdC,OAAO,EAAEA,CAAA,KAAMV,QAAQ,CAACC,cAAc;EAAE,GAEvCN,yBACK,CAEL,CAAC;AAEV;AAEAC,YAAY,CAACe,YAAY,GAAG;EAC1BZ,aAAa,EAAE,KAAK;EACpBC,QAAQ,EAAEA,CAAA,KAAM,CAAC;AACnB,CAAC;AAEDJ,YAAY,CAACgB,SAAS,GAAG;EACvBd,OAAO,EAAEL,SAAS,CAACoB,OAAO,CAACpB,SAAS,CAACqB,KAAK,CAAC;IACzCR,MAAM,EAAEb,SAAS,CAACsB,SAAS,CAAC,CAACtB,SAAS,CAACuB,IAAI,EAAEvB,SAAS,CAACwB,IAAI,CAAC,CAAC,CAACC,UAAU;IACxEX,SAAS,EAAEd,SAAS,CAAC0B,IAAI;IACzBX,MAAM,EAAEf,SAAS,CAACuB,IAAI,CAACE;EACzB,CAAC,CAAC,CAAC,CAACA,UAAU;EACdnB,aAAa,EAAEN,SAAS,CAAC0B,IAAI;EAC7BnB,QAAQ,EAAEP,SAAS,CAACuB,IAAI;EACxBf,cAAc,EAAER,SAAS,CAACoB,OAAO,CAACpB,SAAS,CAACqB,KAAK,CAAC,CAAC,CAAC,CAACI;AACvD,CAAC;AAED,eAAetB,YAAY"}
+{"version":3,"file":"TableFilters.js","names":["React","PropTypes","Button","TABLE_FILTERS_BUTTON_TEXT","TableFilters","_ref","columns","manualFilters","onFilter","currentFilters","createElement","map","column","key","Header","canFilter","render","type","onClick","defaultProps","propTypes","arrayOf","shape","oneOfType","elementType","node","isRequired","bool","func"],"sources":["../../src/DataTable/TableFilters.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '../Button';\n\nexport const TABLE_FILTERS_BUTTON_TEXT = 'Filter';\n\nfunction TableFilters({\n  columns, manualFilters, onFilter, currentFilters,\n}) {\n  return (\n    <div>\n      <h4>Filters</h4>\n      {columns.map(column => <div key={column.Header}>{column.canFilter ? column.render('Filter') : null}</div>)}\n      {manualFilters && (\n      <Button\n        type=\"primary\"\n        onClick={() => onFilter(currentFilters)}\n      >\n        {TABLE_FILTERS_BUTTON_TEXT}\n      </Button>\n      )}\n    </div>\n  );\n}\n\nTableFilters.defaultProps = {\n  manualFilters: false,\n  onFilter: () => {},\n};\n\nTableFilters.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.shape({\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n    canFilter: PropTypes.bool,\n    render: PropTypes.func.isRequired,\n  })).isRequired,\n  manualFilters: PropTypes.bool,\n  onFilter: PropTypes.func,\n  currentFilters: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n};\n\nexport default TableFilters;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,MAAM,MAAM,WAAW;AAE9B,OAAO,MAAMC,yBAAyB,GAAG,QAAQ;AAEjD,SAASC,YAAYA,CAAAC,IAAA,EAElB;EAAA,IAFmB;IACpBC,OAAO;IAAEC,aAAa;IAAEC,QAAQ;IAAEC;EACpC,CAAC,GAAAJ,IAAA;EACC,oBACEL,KAAA,CAAAU,aAAA,2BACEV,KAAA,CAAAU,aAAA,aAAI,SAAW,CAAC,EACfJ,OAAO,CAACK,GAAG,CAACC,MAAM,iBAAIZ,KAAA,CAAAU,aAAA;IAAKG,GAAG,EAAED,MAAM,CAACE;EAAO,GAAEF,MAAM,CAACG,SAAS,GAAGH,MAAM,CAACI,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAU,CAAC,CAAC,EACzGT,aAAa,iBACdP,KAAA,CAAAU,aAAA,CAACR,MAAM;IACLe,IAAI,EAAC,SAAS;IACdC,OAAO,EAAEA,CAAA,KAAMV,QAAQ,CAACC,cAAc;EAAE,GAEvCN,yBACK,CAEL,CAAC;AAEV;AAEAC,YAAY,CAACe,YAAY,GAAG;EAC1BZ,aAAa,EAAE,KAAK;EACpBC,QAAQ,EAAEA,CAAA,KAAM,CAAC;AACnB,CAAC;AAEDJ,YAAY,CAACgB,SAAS,GAAG;EACvBd,OAAO,EAAEL,SAAS,CAACoB,OAAO,CAACpB,SAAS,CAACqB,KAAK,CAAC;IACzCR,MAAM,EAAEb,SAAS,CAACsB,SAAS,CAAC,CAACtB,SAAS,CAACuB,WAAW,EAAEvB,SAAS,CAACwB,IAAI,CAAC,CAAC,CAACC,UAAU;IAC/EX,SAAS,EAAEd,SAAS,CAAC0B,IAAI;IACzBX,MAAM,EAAEf,SAAS,CAAC2B,IAAI,CAACF;EACzB,CAAC,CAAC,CAAC,CAACA,UAAU;EACdnB,aAAa,EAAEN,SAAS,CAAC0B,IAAI;EAC7BnB,QAAQ,EAAEP,SAAS,CAAC2B,IAAI;EACxBnB,cAAc,EAAER,SAAS,CAACoB,OAAO,CAACpB,SAAS,CAACqB,KAAK,CAAC,CAAC,CAAC,CAACI;AACvD,CAAC;AAED,eAAetB,YAAY"}

package/dist/DataTable/TableFooter.js

@@ -21,7 +21,7 @@ function TableFooter(_ref) {
 }
 TableFooter.propTypes = {
   /** Specifies the content of the `TableFooter` */
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.node]))]),
+  children: PropTypes.node,
   /** Specifies class name to append to the base element. */
   className: PropTypes.string
 };

package/dist/DataTable/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.js","names":["React","useContext","classNames","PropTypes","DataTableContext","RowStatusDefault","TablePagination","TablePaginationMinimal","TableFooter","_ref","className","children","RowStatusComponent","RowStatus","createElement","Fragment","propTypes","oneOfType","func","node","arrayOf","string","defaultProps","undefined"],"sources":["../../src/DataTable/TableFooter.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport DataTableContext from './DataTableContext';\nimport RowStatusDefault from './RowStatus';\nimport TablePagination from './TablePagination';\nimport TablePaginationMinimal from './TablePaginationMinimal';\n\nfunction TableFooter({ className, children }) {\n  const { RowStatusComponent } = useContext(DataTableContext);\n  const RowStatus = RowStatusComponent || RowStatusDefault;\n\n  return (\n    <div className={classNames(className, 'pgn__data-table-footer')} data-testid=\"table-footer\">\n      {children || (\n        <>\n          <RowStatus />\n          <TablePagination />\n          <TablePaginationMinimal />\n        </>\n      )}\n    </div>\n  );\n}\n\nTableFooter.propTypes = {\n  /** Specifies the content of the `TableFooter` */\n  children: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.node,\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.node])),\n  ]),\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n};\n\nTableFooter.defaultProps = {\n  children: null,\n  className: undefined,\n};\n\nexport default TableFooter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,gBAAgB,MAAM,aAAa;AAC1C,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,sBAAsB,MAAM,0BAA0B;AAE7D,SAASC,WAAWA,CAAAC,IAAA,EAA0B;EAAA,IAAzB;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAAF,IAAA;EAC1C,MAAM;IAAEG;EAAmB,CAAC,GAAGX,UAAU,CAACG,gBAAgB,CAAC;EAC3D,MAAMS,SAAS,GAAGD,kBAAkB,IAAIP,gBAAgB;EAExD,oBACEL,KAAA,CAAAc,aAAA;IAAKJ,SAAS,EAAER,UAAU,CAACQ,SAAS,EAAE,wBAAwB,CAAE;IAAC,eAAY;EAAc,GACxFC,QAAQ,iBACPX,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,qBACEf,KAAA,CAAAc,aAAA,CAACD,SAAS,MAAE,CAAC,eACbb,KAAA,CAAAc,aAAA,CAACR,eAAe,MAAE,CAAC,eACnBN,KAAA,CAAAc,aAAA,CAACP,sBAAsB,MAAE,CACzB,CAED,CAAC;AAEV;AAEAC,WAAW,CAACQ,SAAS,GAAG;EACtB;EACAL,QAAQ,EAAER,SAAS,CAACc,SAAS,CAAC,CAC5Bd,SAAS,CAACe,IAAI,EACdf,SAAS,CAACgB,IAAI,EACdhB,SAAS,CAACiB,OAAO,CAACjB,SAAS,CAACc,SAAS,CAAC,CAACd,SAAS,CAACe,IAAI,EAAEf,SAAS,CAACgB,IAAI,CAAC,CAAC,CAAC,CACzE,CAAC;EACF;EACAT,SAAS,EAAEP,SAAS,CAACkB;AACvB,CAAC;AAEDb,WAAW,CAACc,YAAY,GAAG;EACzBX,QAAQ,EAAE,IAAI;EACdD,SAAS,EAAEa;AACb,CAAC;AAED,eAAef,WAAW"}
+{"version":3,"file":"TableFooter.js","names":["React","useContext","classNames","PropTypes","DataTableContext","RowStatusDefault","TablePagination","TablePaginationMinimal","TableFooter","_ref","className","children","RowStatusComponent","RowStatus","createElement","Fragment","propTypes","node","string","defaultProps","undefined"],"sources":["../../src/DataTable/TableFooter.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport DataTableContext from './DataTableContext';\nimport RowStatusDefault from './RowStatus';\nimport TablePagination from './TablePagination';\nimport TablePaginationMinimal from './TablePaginationMinimal';\n\nfunction TableFooter({ className, children }) {\n  const { RowStatusComponent } = useContext(DataTableContext);\n  const RowStatus = RowStatusComponent || RowStatusDefault;\n\n  return (\n    <div className={classNames(className, 'pgn__data-table-footer')} data-testid=\"table-footer\">\n      {children || (\n        <>\n          <RowStatus />\n          <TablePagination />\n          <TablePaginationMinimal />\n        </>\n      )}\n    </div>\n  );\n}\n\nTableFooter.propTypes = {\n  /** Specifies the content of the `TableFooter` */\n  children: PropTypes.node,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n};\n\nTableFooter.defaultProps = {\n  children: null,\n  className: undefined,\n};\n\nexport default TableFooter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,gBAAgB,MAAM,aAAa;AAC1C,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,sBAAsB,MAAM,0BAA0B;AAE7D,SAASC,WAAWA,CAAAC,IAAA,EAA0B;EAAA,IAAzB;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAAF,IAAA;EAC1C,MAAM;IAAEG;EAAmB,CAAC,GAAGX,UAAU,CAACG,gBAAgB,CAAC;EAC3D,MAAMS,SAAS,GAAGD,kBAAkB,IAAIP,gBAAgB;EAExD,oBACEL,KAAA,CAAAc,aAAA;IAAKJ,SAAS,EAAER,UAAU,CAACQ,SAAS,EAAE,wBAAwB,CAAE;IAAC,eAAY;EAAc,GACxFC,QAAQ,iBACPX,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,qBACEf,KAAA,CAAAc,aAAA,CAACD,SAAS,MAAE,CAAC,eACbb,KAAA,CAAAc,aAAA,CAACR,eAAe,MAAE,CAAC,eACnBN,KAAA,CAAAc,aAAA,CAACP,sBAAsB,MAAE,CACzB,CAED,CAAC;AAEV;AAEAC,WAAW,CAACQ,SAAS,GAAG;EACtB;EACAL,QAAQ,EAAER,SAAS,CAACc,IAAI;EACxB;EACAP,SAAS,EAAEP,SAAS,CAACe;AACvB,CAAC;AAEDV,WAAW,CAACW,YAAY,GAAG;EACzBR,QAAQ,EAAE,IAAI;EACdD,SAAS,EAAEU;AACb,CAAC;AAED,eAAeZ,WAAW"}

package/dist/DataTable/filters/CheckboxFilter.js

@@ -70,7 +70,7 @@ CheckboxFilter.propTypes = {
    */
   column: PropTypes.shape({
     setFilter: PropTypes.func.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     filterChoices: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string.isRequired,
       value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

package/dist/DataTable/filters/CheckboxFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxFilter.js","names":["React","useRef","useMemo","PropTypes","Form","FormLabel","Badge","Stack","newId","CheckboxFilter","_ref","column","filterValue","setFilter","Header","filterChoices","getHeaderProps","ariaLabel","key","checkedBoxes","changeCheckbox","value","includes","newCheckedBoxes","filter","val","push","headerBasedId","createElement","Group","role","current","id","className","CheckboxSet","name","map","_ref2","number","Checkbox","checked","onChange","direction","gap","undefined","variant","propTypes","shape","func","isRequired","oneOfType","node","arrayOf","string"],"sources":["../../../src/DataTable/filters/CheckboxFilter.jsx"],"sourcesContent":["import React, { useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport Form, { FormLabel } from '../../Form';\nimport Badge from '../../Badge';\nimport Stack from '../../Stack';\nimport { newId } from '../../utils';\n\nfunction CheckboxFilter({\n  column: {\n    filterValue, setFilter, Header, filterChoices, getHeaderProps,\n  },\n}) {\n  // creates a unique label that does not change on re-render in case there are multiple checkbox filters in the dom\n  const ariaLabel = useRef(newId(`checkbox-filter-label-${getHeaderProps().key}-`));\n\n  const checkedBoxes = filterValue || [];\n  const changeCheckbox = (value) => {\n    if (checkedBoxes.includes(value)) {\n      const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);\n      return setFilter(newCheckedBoxes);\n    }\n    checkedBoxes.push(value);\n    return setFilter(checkedBoxes);\n  };\n  const headerBasedId = useMemo(() => `checkbox-filter-check-${getHeaderProps().key}-`, [getHeaderProps]);\n\n  return (\n    <Form.Group role=\"group\" aria-labelledby={ariaLabel.current}>\n      <FormLabel id={ariaLabel.current} className=\"pgn__checkbox-filter-label\">{Header}</FormLabel>\n      <Form.CheckboxSet name={Header}>\n        {filterChoices.map(({ name, number, value }) => (\n          <Form.Checkbox\n            key={`${headerBasedId}${name}`}\n            value={name}\n            checked={checkedBoxes.includes(value)}\n            onChange={() => changeCheckbox(value)}\n            aria-label={name}\n          >\n            <Stack direction=\"horizontal\" gap={2}>\n              {name} {number !== undefined && <Badge variant=\"light\">{number}</Badge>}\n            </Stack>\n          </Form.Checkbox>\n        ))}\n      </Form.CheckboxSet>\n    </Form.Group>\n  );\n}\n\nCheckboxFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `filterChoices`: Specifies array of choices.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   *\n   * `filterValue`: Value for the filter input.\n   */\n  column: PropTypes.shape({\n    setFilter: PropTypes.func.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,\n    filterChoices: PropTypes.arrayOf(PropTypes.shape({\n      name: PropTypes.string.isRequired,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n      number: PropTypes.number,\n    })).isRequired,\n    getHeaderProps: PropTypes.func.isRequired,\n    filterValue: PropTypes.arrayOf(PropTypes.string),\n  }).isRequired,\n};\n\nexport default CheckboxFilter;\n"],"mappings":"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"}
+{"version":3,"file":"CheckboxFilter.js","names":["React","useRef","useMemo","PropTypes","Form","FormLabel","Badge","Stack","newId","CheckboxFilter","_ref","column","filterValue","setFilter","Header","filterChoices","getHeaderProps","ariaLabel","key","checkedBoxes","changeCheckbox","value","includes","newCheckedBoxes","filter","val","push","headerBasedId","createElement","Group","role","current","id","className","CheckboxSet","name","map","_ref2","number","Checkbox","checked","onChange","direction","gap","undefined","variant","propTypes","shape","func","isRequired","oneOfType","elementType","node","arrayOf","string"],"sources":["../../../src/DataTable/filters/CheckboxFilter.jsx"],"sourcesContent":["import React, { useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport Form, { FormLabel } from '../../Form';\nimport Badge from '../../Badge';\nimport Stack from '../../Stack';\nimport { newId } from '../../utils';\n\nfunction CheckboxFilter({\n  column: {\n    filterValue, setFilter, Header, filterChoices, getHeaderProps,\n  },\n}) {\n  // creates a unique label that does not change on re-render in case there are multiple checkbox filters in the dom\n  const ariaLabel = useRef(newId(`checkbox-filter-label-${getHeaderProps().key}-`));\n\n  const checkedBoxes = filterValue || [];\n  const changeCheckbox = (value) => {\n    if (checkedBoxes.includes(value)) {\n      const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);\n      return setFilter(newCheckedBoxes);\n    }\n    checkedBoxes.push(value);\n    return setFilter(checkedBoxes);\n  };\n  const headerBasedId = useMemo(() => `checkbox-filter-check-${getHeaderProps().key}-`, [getHeaderProps]);\n\n  return (\n    <Form.Group role=\"group\" aria-labelledby={ariaLabel.current}>\n      <FormLabel id={ariaLabel.current} className=\"pgn__checkbox-filter-label\">{Header}</FormLabel>\n      <Form.CheckboxSet name={Header}>\n        {filterChoices.map(({ name, number, value }) => (\n          <Form.Checkbox\n            key={`${headerBasedId}${name}`}\n            value={name}\n            checked={checkedBoxes.includes(value)}\n            onChange={() => changeCheckbox(value)}\n            aria-label={name}\n          >\n            <Stack direction=\"horizontal\" gap={2}>\n              {name} {number !== undefined && <Badge variant=\"light\">{number}</Badge>}\n            </Stack>\n          </Form.Checkbox>\n        ))}\n      </Form.CheckboxSet>\n    </Form.Group>\n  );\n}\n\nCheckboxFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `filterChoices`: Specifies array of choices.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   *\n   * `filterValue`: Value for the filter input.\n   */\n  column: PropTypes.shape({\n    setFilter: PropTypes.func.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n    filterChoices: PropTypes.arrayOf(PropTypes.shape({\n      name: PropTypes.string.isRequired,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n      number: PropTypes.number,\n    })).isRequired,\n    getHeaderProps: PropTypes.func.isRequired,\n    filterValue: PropTypes.arrayOf(PropTypes.string),\n  }).isRequired,\n};\n\nexport default CheckboxFilter;\n"],"mappings":"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"}

package/dist/DataTable/filters/DropdownFilter.js

@@ -57,7 +57,7 @@ DropdownFilter.propTypes = {
    */
   column: PropTypes.shape({
     setFilter: PropTypes.func.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     filterChoices: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string.isRequired,
       number: PropTypes.number,

package/dist/DataTable/filters/DropdownFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownFilter.js","names":["React","useRef","PropTypes","Form","newId","DEFAULT_VALUE","DropdownFilter","_ref","column","setFilter","Header","filterChoices","getHeaderProps","ariaLabel","key","onChange","e","target","value","undefined","createElement","Group","Label","id","current","className","Control","as","default","map","_ref2","name","number","propTypes","shape","func","isRequired","oneOfType","node","arrayOf","string"],"sources":["../../../src/DataTable/filters/DropdownFilter.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Form from '../../Form';\nimport { newId } from '../../utils';\n\nconst DEFAULT_VALUE = '';\n\nfunction DropdownFilter({\n  column: {\n    setFilter, Header, filterChoices, getHeaderProps,\n  },\n}) {\n  // creates a unique label that does not change on re-render in case there are multiple checkbox filters in the dom\n  const ariaLabel = useRef(newId(`dropdown-filter-label-${getHeaderProps().key}-`));\n  const onChange = (e) => {\n    if (e.target.value === DEFAULT_VALUE) {\n      // setting undefined resets the filter\n      return setFilter(undefined);\n    }\n    return setFilter(e.target.value);\n  };\n\n  return (\n    <Form.Group>\n      <Form.Label id={ariaLabel.current} className=\"sr-only\">{Header}</Form.Label>\n      <Form.Control\n        as=\"select\"\n        default={DEFAULT_VALUE}\n        onChange={onChange}\n        aria-labelledby={ariaLabel.current}\n      >\n        <option value={DEFAULT_VALUE}>{Header}</option>\n        {filterChoices.map(({ name, number, value }) => (<option key={value} value={value}>{name} {number && `(${number})`}</option>))}\n      </Form.Control>\n    </Form.Group>\n  );\n}\n\nDropdownFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `filterChoices`: Specifies array of choices.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   */\n  column: PropTypes.shape({\n    setFilter: PropTypes.func.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,\n    filterChoices: PropTypes.arrayOf(PropTypes.shape({\n      name: PropTypes.string.isRequired,\n      number: PropTypes.number,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n    })).isRequired,\n    getHeaderProps: PropTypes.func.isRequired,\n  }).isRequired,\n};\n\nexport default DropdownFilter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,MAAM,YAAY;AAC7B,SAASC,KAAK,QAAQ,aAAa;AAEnC,MAAMC,aAAa,GAAG,EAAE;AAExB,SAASC,cAAcA,CAAAC,IAAA,EAIpB;EAAA,IAJqB;IACtBC,MAAM,EAAE;MACNC,SAAS;MAAEC,MAAM;MAAEC,aAAa;MAAEC;IACpC;EACF,CAAC,GAAAL,IAAA;EACC;EACA,MAAMM,SAAS,GAAGZ,MAAM,CAACG,KAAK,CAAE,yBAAwBQ,cAAc,CAAC,CAAC,CAACE,GAAI,GAAE,CAAC,CAAC;EACjF,MAAMC,QAAQ,GAAIC,CAAC,IAAK;IACtB,IAAIA,CAAC,CAACC,MAAM,CAACC,KAAK,KAAKb,aAAa,EAAE;MACpC;MACA,OAAOI,SAAS,CAACU,SAAS,CAAC;IAC7B;IACA,OAAOV,SAAS,CAACO,CAAC,CAACC,MAAM,CAACC,KAAK,CAAC;EAClC,CAAC;EAED,oBACElB,KAAA,CAAAoB,aAAA,CAACjB,IAAI,CAACkB,KAAK,qBACTrB,KAAA,CAAAoB,aAAA,CAACjB,IAAI,CAACmB,KAAK;IAACC,EAAE,EAAEV,SAAS,CAACW,OAAQ;IAACC,SAAS,EAAC;EAAS,GAAEf,MAAmB,CAAC,eAC5EV,KAAA,CAAAoB,aAAA,CAACjB,IAAI,CAACuB,OAAO;IACXC,EAAE,EAAC,QAAQ;IACXC,OAAO,EAAEvB,aAAc;IACvBU,QAAQ,EAAEA,QAAS;IACnB,mBAAiBF,SAAS,CAACW;EAAQ,gBAEnCxB,KAAA,CAAAoB,aAAA;IAAQF,KAAK,EAAEb;EAAc,GAAEK,MAAe,CAAC,EAC9CC,aAAa,CAACkB,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,IAAI;MAAEC,MAAM;MAAEd;IAAM,CAAC,GAAAY,KAAA;IAAA,oBAAM9B,KAAA,CAAAoB,aAAA;MAAQN,GAAG,EAAEI,KAAM;MAACA,KAAK,EAAEA;IAAM,GAAEa,IAAI,EAAC,GAAC,EAACC,MAAM,IAAK,IAAGA,MAAO,GAAW,CAAC;EAAA,CAAC,CACjH,CACJ,CAAC;AAEjB;AAEA1B,cAAc,CAAC2B,SAAS,GAAG;EACzB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEzB,MAAM,EAAEN,SAAS,CAACgC,KAAK,CAAC;IACtBzB,SAAS,EAAEP,SAAS,CAACiC,IAAI,CAACC,UAAU;IACpC1B,MAAM,EAAER,SAAS,CAACmC,SAAS,CAAC,CAACnC,SAAS,CAACiC,IAAI,EAAEjC,SAAS,CAACoC,IAAI,CAAC,CAAC,CAACF,UAAU;IACxEzB,aAAa,EAAET,SAAS,CAACqC,OAAO,CAACrC,SAAS,CAACgC,KAAK,CAAC;MAC/CH,IAAI,EAAE7B,SAAS,CAACsC,MAAM,CAACJ,UAAU;MACjCJ,MAAM,EAAE9B,SAAS,CAAC8B,MAAM;MACxBd,KAAK,EAAEhB,SAAS,CAACmC,SAAS,CAAC,CAACnC,SAAS,CAACsC,MAAM,EAAEtC,SAAS,CAAC8B,MAAM,CAAC,CAAC,CAACI;IACnE,CAAC,CAAC,CAAC,CAACA,UAAU;IACdxB,cAAc,EAAEV,SAAS,CAACiC,IAAI,CAACC;EACjC,CAAC,CAAC,CAACA;AACL,CAAC;AAED,eAAe9B,cAAc"}
+{"version":3,"file":"DropdownFilter.js","names":["React","useRef","PropTypes","Form","newId","DEFAULT_VALUE","DropdownFilter","_ref","column","setFilter","Header","filterChoices","getHeaderProps","ariaLabel","key","onChange","e","target","value","undefined","createElement","Group","Label","id","current","className","Control","as","default","map","_ref2","name","number","propTypes","shape","func","isRequired","oneOfType","elementType","node","arrayOf","string"],"sources":["../../../src/DataTable/filters/DropdownFilter.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Form from '../../Form';\nimport { newId } from '../../utils';\n\nconst DEFAULT_VALUE = '';\n\nfunction DropdownFilter({\n  column: {\n    setFilter, Header, filterChoices, getHeaderProps,\n  },\n}) {\n  // creates a unique label that does not change on re-render in case there are multiple checkbox filters in the dom\n  const ariaLabel = useRef(newId(`dropdown-filter-label-${getHeaderProps().key}-`));\n  const onChange = (e) => {\n    if (e.target.value === DEFAULT_VALUE) {\n      // setting undefined resets the filter\n      return setFilter(undefined);\n    }\n    return setFilter(e.target.value);\n  };\n\n  return (\n    <Form.Group>\n      <Form.Label id={ariaLabel.current} className=\"sr-only\">{Header}</Form.Label>\n      <Form.Control\n        as=\"select\"\n        default={DEFAULT_VALUE}\n        onChange={onChange}\n        aria-labelledby={ariaLabel.current}\n      >\n        <option value={DEFAULT_VALUE}>{Header}</option>\n        {filterChoices.map(({ name, number, value }) => (<option key={value} value={value}>{name} {number && `(${number})`}</option>))}\n      </Form.Control>\n    </Form.Group>\n  );\n}\n\nDropdownFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `filterChoices`: Specifies array of choices.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   */\n  column: PropTypes.shape({\n    setFilter: PropTypes.func.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n    filterChoices: PropTypes.arrayOf(PropTypes.shape({\n      name: PropTypes.string.isRequired,\n      number: PropTypes.number,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n    })).isRequired,\n    getHeaderProps: PropTypes.func.isRequired,\n  }).isRequired,\n};\n\nexport default DropdownFilter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,MAAM,YAAY;AAC7B,SAASC,KAAK,QAAQ,aAAa;AAEnC,MAAMC,aAAa,GAAG,EAAE;AAExB,SAASC,cAAcA,CAAAC,IAAA,EAIpB;EAAA,IAJqB;IACtBC,MAAM,EAAE;MACNC,SAAS;MAAEC,MAAM;MAAEC,aAAa;MAAEC;IACpC;EACF,CAAC,GAAAL,IAAA;EACC;EACA,MAAMM,SAAS,GAAGZ,MAAM,CAACG,KAAK,CAAE,yBAAwBQ,cAAc,CAAC,CAAC,CAACE,GAAI,GAAE,CAAC,CAAC;EACjF,MAAMC,QAAQ,GAAIC,CAAC,IAAK;IACtB,IAAIA,CAAC,CAACC,MAAM,CAACC,KAAK,KAAKb,aAAa,EAAE;MACpC;MACA,OAAOI,SAAS,CAACU,SAAS,CAAC;IAC7B;IACA,OAAOV,SAAS,CAACO,CAAC,CAACC,MAAM,CAACC,KAAK,CAAC;EAClC,CAAC;EAED,oBACElB,KAAA,CAAAoB,aAAA,CAACjB,IAAI,CAACkB,KAAK,qBACTrB,KAAA,CAAAoB,aAAA,CAACjB,IAAI,CAACmB,KAAK;IAACC,EAAE,EAAEV,SAAS,CAACW,OAAQ;IAACC,SAAS,EAAC;EAAS,GAAEf,MAAmB,CAAC,eAC5EV,KAAA,CAAAoB,aAAA,CAACjB,IAAI,CAACuB,OAAO;IACXC,EAAE,EAAC,QAAQ;IACXC,OAAO,EAAEvB,aAAc;IACvBU,QAAQ,EAAEA,QAAS;IACnB,mBAAiBF,SAAS,CAACW;EAAQ,gBAEnCxB,KAAA,CAAAoB,aAAA;IAAQF,KAAK,EAAEb;EAAc,GAAEK,MAAe,CAAC,EAC9CC,aAAa,CAACkB,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,IAAI;MAAEC,MAAM;MAAEd;IAAM,CAAC,GAAAY,KAAA;IAAA,oBAAM9B,KAAA,CAAAoB,aAAA;MAAQN,GAAG,EAAEI,KAAM;MAACA,KAAK,EAAEA;IAAM,GAAEa,IAAI,EAAC,GAAC,EAACC,MAAM,IAAK,IAAGA,MAAO,GAAW,CAAC;EAAA,CAAC,CACjH,CACJ,CAAC;AAEjB;AAEA1B,cAAc,CAAC2B,SAAS,GAAG;EACzB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEzB,MAAM,EAAEN,SAAS,CAACgC,KAAK,CAAC;IACtBzB,SAAS,EAAEP,SAAS,CAACiC,IAAI,CAACC,UAAU;IACpC1B,MAAM,EAAER,SAAS,CAACmC,SAAS,CAAC,CAACnC,SAAS,CAACoC,WAAW,EAAEpC,SAAS,CAACqC,IAAI,CAAC,CAAC,CAACH,UAAU;IAC/EzB,aAAa,EAAET,SAAS,CAACsC,OAAO,CAACtC,SAAS,CAACgC,KAAK,CAAC;MAC/CH,IAAI,EAAE7B,SAAS,CAACuC,MAAM,CAACL,UAAU;MACjCJ,MAAM,EAAE9B,SAAS,CAAC8B,MAAM;MACxBd,KAAK,EAAEhB,SAAS,CAACmC,SAAS,CAAC,CAACnC,SAAS,CAACuC,MAAM,EAAEvC,SAAS,CAAC8B,MAAM,CAAC,CAAC,CAACI;IACnE,CAAC,CAAC,CAAC,CAACA,UAAU;IACdxB,cAAc,EAAEV,SAAS,CAACiC,IAAI,CAACC;EACjC,CAAC,CAAC,CAACA;AACL,CAAC;AAED,eAAe9B,cAAc"}

package/dist/DataTable/filters/MultiSelectDropdownFilter.js

@@ -72,7 +72,7 @@ MultiSelectDropdownFilter.propTypes = {
     /** Function to set the filter value */
     setFilter: PropTypes.func.isRequired,
     /** Column header used for labels and placeholders */
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     /** Names and values for the select options */
     filterChoices: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string.isRequired,

package/dist/DataTable/filters/MultiSelectDropdownFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectDropdownFilter.js","names":["React","useRef","PropTypes","Badge","Stack","DropdownButton","newId","Form","MultiSelectDropdownFilter","_ref","column","setFilter","Header","filterChoices","getHeaderProps","filterValue","ariaLabel","key","checkedBoxes","changeCheckbox","value","includes","newCheckedBoxes","filter","val","push","createElement","variant","id","current","title","CheckboxSet","className","name","map","_ref2","number","Checkbox","checked","onChange","direction","gap","propTypes","shape","func","isRequired","oneOfType","node","arrayOf","string"],"sources":["../../../src/DataTable/filters/MultiSelectDropdownFilter.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Badge from '../../Badge';\nimport Stack from '../../Stack';\nimport { DropdownButton } from '../../Dropdown';\nimport { newId } from '../../utils';\nimport Form from '../../Form';\n\nfunction MultiSelectDropdownFilter({\n  column: {\n    setFilter, Header, filterChoices, getHeaderProps, filterValue,\n  },\n}) {\n  // creates a unique label that does not change on re-render in case there are multiple checkbox filters in the dom\n  const ariaLabel = useRef(newId(`multi-dropdown-filter-label-${getHeaderProps().key}-`));\n  const checkedBoxes = filterValue || [];\n  const changeCheckbox = (value) => {\n    if (checkedBoxes.includes(value)) {\n      const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);\n      return setFilter(newCheckedBoxes);\n    }\n    checkedBoxes.push(value);\n    return setFilter(checkedBoxes);\n  };\n\n  return (\n    <DropdownButton variant=\"outline-primary\" id={ariaLabel.current} title={Header}>\n      <Form.CheckboxSet\n        className=\"pgn__dropdown-filter-checkbox-group\"\n        name={Header}\n        aria-label={Header}\n      >\n        {filterChoices.map(({ name, number, value }) => (\n          <Form.Checkbox\n            key={name}\n            value={name}\n            checked={checkedBoxes.includes(value)}\n            onChange={() => changeCheckbox(value)}\n            aria-label={name}\n          >\n            <Stack direction=\"horizontal\" gap={2}>\n              {name} {number && <Badge variant=\"light\">{number}</Badge>}\n            </Stack>\n          </Form.Checkbox>\n        ))}\n      </Form.CheckboxSet>\n    </DropdownButton>\n  );\n}\n\nMultiSelectDropdownFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `filterChoices`: Specifies array of choices.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   *\n   * `filterValue`: Value for the filter input.\n   */\n  column: PropTypes.shape({\n    /** Function to set the filter value */\n    setFilter: PropTypes.func.isRequired,\n    /** Column header used for labels and placeholders */\n    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,\n    /** Names and values for the select options */\n    filterChoices: PropTypes.arrayOf(PropTypes.shape({\n      name: PropTypes.string.isRequired,\n      number: PropTypes.number,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n    })).isRequired,\n    /** Generates a key unique to the column being filtered */\n    getHeaderProps: PropTypes.func.isRequired,\n    filterValue: PropTypes.arrayOf(PropTypes.string),\n  }).isRequired,\n};\n\nexport default MultiSelectDropdownFilter;\n"],"mappings":"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"}
+{"version":3,"file":"MultiSelectDropdownFilter.js","names":["React","useRef","PropTypes","Badge","Stack","DropdownButton","newId","Form","MultiSelectDropdownFilter","_ref","column","setFilter","Header","filterChoices","getHeaderProps","filterValue","ariaLabel","key","checkedBoxes","changeCheckbox","value","includes","newCheckedBoxes","filter","val","push","createElement","variant","id","current","title","CheckboxSet","className","name","map","_ref2","number","Checkbox","checked","onChange","direction","gap","propTypes","shape","func","isRequired","oneOfType","elementType","node","arrayOf","string"],"sources":["../../../src/DataTable/filters/MultiSelectDropdownFilter.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Badge from '../../Badge';\nimport Stack from '../../Stack';\nimport { DropdownButton } from '../../Dropdown';\nimport { newId } from '../../utils';\nimport Form from '../../Form';\n\nfunction MultiSelectDropdownFilter({\n  column: {\n    setFilter, Header, filterChoices, getHeaderProps, filterValue,\n  },\n}) {\n  // creates a unique label that does not change on re-render in case there are multiple checkbox filters in the dom\n  const ariaLabel = useRef(newId(`multi-dropdown-filter-label-${getHeaderProps().key}-`));\n  const checkedBoxes = filterValue || [];\n  const changeCheckbox = (value) => {\n    if (checkedBoxes.includes(value)) {\n      const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);\n      return setFilter(newCheckedBoxes);\n    }\n    checkedBoxes.push(value);\n    return setFilter(checkedBoxes);\n  };\n\n  return (\n    <DropdownButton variant=\"outline-primary\" id={ariaLabel.current} title={Header}>\n      <Form.CheckboxSet\n        className=\"pgn__dropdown-filter-checkbox-group\"\n        name={Header}\n        aria-label={Header}\n      >\n        {filterChoices.map(({ name, number, value }) => (\n          <Form.Checkbox\n            key={name}\n            value={name}\n            checked={checkedBoxes.includes(value)}\n            onChange={() => changeCheckbox(value)}\n            aria-label={name}\n          >\n            <Stack direction=\"horizontal\" gap={2}>\n              {name} {number && <Badge variant=\"light\">{number}</Badge>}\n            </Stack>\n          </Form.Checkbox>\n        ))}\n      </Form.CheckboxSet>\n    </DropdownButton>\n  );\n}\n\nMultiSelectDropdownFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `filterChoices`: Specifies array of choices.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   *\n   * `filterValue`: Value for the filter input.\n   */\n  column: PropTypes.shape({\n    /** Function to set the filter value */\n    setFilter: PropTypes.func.isRequired,\n    /** Column header used for labels and placeholders */\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n    /** Names and values for the select options */\n    filterChoices: PropTypes.arrayOf(PropTypes.shape({\n      name: PropTypes.string.isRequired,\n      number: PropTypes.number,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n    })).isRequired,\n    /** Generates a key unique to the column being filtered */\n    getHeaderProps: PropTypes.func.isRequired,\n    filterValue: PropTypes.arrayOf(PropTypes.string),\n  }).isRequired,\n};\n\nexport default MultiSelectDropdownFilter;\n"],"mappings":"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"}

package/dist/DataTable/filters/TextFilter.js

@@ -52,7 +52,7 @@ TextFilter.propTypes = {
    */
   column: PropTypes.shape({
     setFilter: PropTypes.func.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     getHeaderProps: PropTypes.func.isRequired,
     filterValue: PropTypes.string
   }).isRequired

package/dist/DataTable/filters/TextFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFilter.js","names":["React","useRef","PropTypes","Form","FormLabel","Input","newId","formatHeaderForLabel","header","toLowerCase","TextFilter","_ref","column","filterValue","setFilter","Header","getHeaderProps","ariaLabel","key","formattedHeader","inputText","isValidElement","createElement","Group","id","current","className","value","type","onChange","e","target","undefined","placeholder","propTypes","shape","func","isRequired","oneOfType","node","string"],"sources":["../../../src/DataTable/filters/TextFilter.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Form, { FormLabel } from '../../Form';\nimport Input from '../../Input';\nimport { newId } from '../../utils';\n\nconst formatHeaderForLabel = (header) => {\n  if (typeof header === 'function') {\n    return header();\n  }\n  if (typeof header === 'string') {\n    return header.toLowerCase();\n  }\n  return header;\n};\n\nfunction TextFilter({\n  column: {\n    filterValue, setFilter, Header, getHeaderProps,\n  },\n}) {\n  const ariaLabel = useRef(newId(`text-filter-label-${getHeaderProps().key}-`));\n  const formattedHeader = formatHeaderForLabel(Header);\n  const inputText = React.isValidElement(formattedHeader) ? formattedHeader : `Search ${formattedHeader}`;\n  return (\n    <Form.Group>\n      <FormLabel id={ariaLabel.current} className=\"sr-only\">{inputText}</FormLabel>\n      <Input\n        aria-labelledby={ariaLabel.current}\n        value={filterValue || ''}\n        type=\"text\"\n        onChange={e => {\n          setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely\n        }}\n        placeholder={inputText}\n      />\n    </Form.Group>\n  );\n}\n\nTextFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   *\n   * `filterValue`: Value for the filter input.\n   */\n  column: PropTypes.shape({\n    setFilter: PropTypes.func.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,\n    getHeaderProps: PropTypes.func.isRequired,\n    filterValue: PropTypes.string,\n  }).isRequired,\n};\n\nexport default TextFilter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,IAAIC,SAAS,QAAQ,YAAY;AAC5C,OAAOC,KAAK,MAAM,aAAa;AAC/B,SAASC,KAAK,QAAQ,aAAa;AAEnC,MAAMC,oBAAoB,GAAIC,MAAM,IAAK;EACvC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;IAChC,OAAOA,MAAM,CAAC,CAAC;EACjB;EACA,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IAC9B,OAAOA,MAAM,CAACC,WAAW,CAAC,CAAC;EAC7B;EACA,OAAOD,MAAM;AACf,CAAC;AAED,SAASE,UAAUA,CAAAC,IAAA,EAIhB;EAAA,IAJiB;IAClBC,MAAM,EAAE;MACNC,WAAW;MAAEC,SAAS;MAAEC,MAAM;MAAEC;IAClC;EACF,CAAC,GAAAL,IAAA;EACC,MAAMM,SAAS,GAAGhB,MAAM,CAACK,KAAK,CAAE,qBAAoBU,cAAc,CAAC,CAAC,CAACE,GAAI,GAAE,CAAC,CAAC;EAC7E,MAAMC,eAAe,GAAGZ,oBAAoB,CAACQ,MAAM,CAAC;EACpD,MAAMK,SAAS,GAAG,aAAApB,KAAK,CAACqB,cAAc,CAACF,eAAe,CAAC,GAAGA,eAAe,GAAI,UAASA,eAAgB,EAAC;EACvG,oBACEnB,KAAA,CAAAsB,aAAA,CAACnB,IAAI,CAACoB,KAAK,qBACTvB,KAAA,CAAAsB,aAAA,CAAClB,SAAS;IAACoB,EAAE,EAAEP,SAAS,CAACQ,OAAQ;IAACC,SAAS,EAAC;EAAS,GAAEN,SAAqB,CAAC,eAC7EpB,KAAA,CAAAsB,aAAA,CAACjB,KAAK;IACJ,mBAAiBY,SAAS,CAACQ,OAAQ;IACnCE,KAAK,EAAEd,WAAW,IAAI,EAAG;IACzBe,IAAI,EAAC,MAAM;IACXC,QAAQ,EAAEC,CAAC,IAAI;MACbhB,SAAS,CAACgB,CAAC,CAACC,MAAM,CAACJ,KAAK,IAAIK,SAAS,CAAC,CAAC,CAAC;IAC1C,CAAE;;IACFC,WAAW,EAAEb;EAAU,CACxB,CACS,CAAC;AAEjB;AAEAV,UAAU,CAACwB,SAAS,GAAG;EACrB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEtB,MAAM,EAAEV,SAAS,CAACiC,KAAK,CAAC;IACtBrB,SAAS,EAAEZ,SAAS,CAACkC,IAAI,CAACC,UAAU;IACpCtB,MAAM,EAAEb,SAAS,CAACoC,SAAS,CAAC,CAACpC,SAAS,CAACkC,IAAI,EAAElC,SAAS,CAACqC,IAAI,CAAC,CAAC,CAACF,UAAU;IACxErB,cAAc,EAAEd,SAAS,CAACkC,IAAI,CAACC,UAAU;IACzCxB,WAAW,EAAEX,SAAS,CAACsC;EACzB,CAAC,CAAC,CAACH;AACL,CAAC;AAED,eAAe3B,UAAU"}
+{"version":3,"file":"TextFilter.js","names":["React","useRef","PropTypes","Form","FormLabel","Input","newId","formatHeaderForLabel","header","toLowerCase","TextFilter","_ref","column","filterValue","setFilter","Header","getHeaderProps","ariaLabel","key","formattedHeader","inputText","isValidElement","createElement","Group","id","current","className","value","type","onChange","e","target","undefined","placeholder","propTypes","shape","func","isRequired","oneOfType","elementType","node","string"],"sources":["../../../src/DataTable/filters/TextFilter.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Form, { FormLabel } from '../../Form';\nimport Input from '../../Input';\nimport { newId } from '../../utils';\n\nconst formatHeaderForLabel = (header) => {\n  if (typeof header === 'function') {\n    return header();\n  }\n  if (typeof header === 'string') {\n    return header.toLowerCase();\n  }\n  return header;\n};\n\nfunction TextFilter({\n  column: {\n    filterValue, setFilter, Header, getHeaderProps,\n  },\n}) {\n  const ariaLabel = useRef(newId(`text-filter-label-${getHeaderProps().key}-`));\n  const formattedHeader = formatHeaderForLabel(Header);\n  const inputText = React.isValidElement(formattedHeader) ? formattedHeader : `Search ${formattedHeader}`;\n  return (\n    <Form.Group>\n      <FormLabel id={ariaLabel.current} className=\"sr-only\">{inputText}</FormLabel>\n      <Input\n        aria-labelledby={ariaLabel.current}\n        value={filterValue || ''}\n        type=\"text\"\n        onChange={e => {\n          setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely\n        }}\n        placeholder={inputText}\n      />\n    </Form.Group>\n  );\n}\n\nTextFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   *\n   * `filterValue`: Value for the filter input.\n   */\n  column: PropTypes.shape({\n    setFilter: PropTypes.func.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,\n    getHeaderProps: PropTypes.func.isRequired,\n    filterValue: PropTypes.string,\n  }).isRequired,\n};\n\nexport default TextFilter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,IAAIC,SAAS,QAAQ,YAAY;AAC5C,OAAOC,KAAK,MAAM,aAAa;AAC/B,SAASC,KAAK,QAAQ,aAAa;AAEnC,MAAMC,oBAAoB,GAAIC,MAAM,IAAK;EACvC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;IAChC,OAAOA,MAAM,CAAC,CAAC;EACjB;EACA,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IAC9B,OAAOA,MAAM,CAACC,WAAW,CAAC,CAAC;EAC7B;EACA,OAAOD,MAAM;AACf,CAAC;AAED,SAASE,UAAUA,CAAAC,IAAA,EAIhB;EAAA,IAJiB;IAClBC,MAAM,EAAE;MACNC,WAAW;MAAEC,SAAS;MAAEC,MAAM;MAAEC;IAClC;EACF,CAAC,GAAAL,IAAA;EACC,MAAMM,SAAS,GAAGhB,MAAM,CAACK,KAAK,CAAE,qBAAoBU,cAAc,CAAC,CAAC,CAACE,GAAI,GAAE,CAAC,CAAC;EAC7E,MAAMC,eAAe,GAAGZ,oBAAoB,CAACQ,MAAM,CAAC;EACpD,MAAMK,SAAS,GAAG,aAAApB,KAAK,CAACqB,cAAc,CAACF,eAAe,CAAC,GAAGA,eAAe,GAAI,UAASA,eAAgB,EAAC;EACvG,oBACEnB,KAAA,CAAAsB,aAAA,CAACnB,IAAI,CAACoB,KAAK,qBACTvB,KAAA,CAAAsB,aAAA,CAAClB,SAAS;IAACoB,EAAE,EAAEP,SAAS,CAACQ,OAAQ;IAACC,SAAS,EAAC;EAAS,GAAEN,SAAqB,CAAC,eAC7EpB,KAAA,CAAAsB,aAAA,CAACjB,KAAK;IACJ,mBAAiBY,SAAS,CAACQ,OAAQ;IACnCE,KAAK,EAAEd,WAAW,IAAI,EAAG;IACzBe,IAAI,EAAC,MAAM;IACXC,QAAQ,EAAEC,CAAC,IAAI;MACbhB,SAAS,CAACgB,CAAC,CAACC,MAAM,CAACJ,KAAK,IAAIK,SAAS,CAAC,CAAC,CAAC;IAC1C,CAAE;;IACFC,WAAW,EAAEb;EAAU,CACxB,CACS,CAAC;AAEjB;AAEAV,UAAU,CAACwB,SAAS,GAAG;EACrB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEtB,MAAM,EAAEV,SAAS,CAACiC,KAAK,CAAC;IACtBrB,SAAS,EAAEZ,SAAS,CAACkC,IAAI,CAACC,UAAU;IACpCtB,MAAM,EAAEb,SAAS,CAACoC,SAAS,CAAC,CAACpC,SAAS,CAACqC,WAAW,EAAErC,SAAS,CAACsC,IAAI,CAAC,CAAC,CAACH,UAAU;IAC/ErB,cAAc,EAAEd,SAAS,CAACkC,IAAI,CAACC,UAAU;IACzCxB,WAAW,EAAEX,SAAS,CAACuC;EACzB,CAAC,CAAC,CAACJ;AACL,CAAC;AAED,eAAe3B,UAAU"}

package/dist/DataTable/index.js

@@ -264,13 +264,13 @@ DataTable.propTypes = {
   /** Definition of table columns */
   columns: PropTypes.arrayOf(PropTypes.shape({
     /** User visible column name */
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     /** String used to access the correct cell data for this column */
     accessor: requiredWhenNot(PropTypes.string, 'Cell'),
     /** Specifies a function that receives `row` as argument and returns cell content */
-    Cell: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
     /** Specifies filter component */
-    Filter: PropTypes.func,
+    Filter: PropTypes.elementType,
     /** Specifies filter type */
     filter: PropTypes.string,
     /** Specifies filter choices */
@@ -287,8 +287,8 @@ DataTable.propTypes = {
   /** Alternate column for selecting rows. See react table useSort docs for more information */
   manualSelectColumn: PropTypes.shape({
     id: PropTypes.string.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-    Cell: PropTypes.func.isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
+    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
     disableSortBy: PropTypes.bool.isRequired
   }),
   /** Table columns can be sorted */
@@ -308,16 +308,16 @@ DataTable.propTypes = {
   /** defaults that will be set on each column. Will be overridden by individual column values */
   defaultColumnValues: PropTypes.shape({
     /** A default filter component for the column */
-    Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+    Filter: PropTypes.elementType
   }),
   /** Actions or other additional non-data columns can be added here  */
   additionalColumns: PropTypes.arrayOf(PropTypes.shape({
     /** id must be unique from other columns ids */
     id: PropTypes.string.isRequired,
     /** column header that will be displayed to the user */
-    Header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
     /** Component that renders in the added column. It will receive the row as a prop */
-    Cell: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node])
   })),
   /** Function that will fetch table data. Called when page size, page index or filters change.
     * Meant to be used with manual filters and pagination */
@@ -374,15 +374,15 @@ DataTable.propTypes = {
   /** Number between one and four filters that can be shown on the top row. */
   numBreakoutFilters: PropTypes.oneOf([1, 2, 3, 4]),
   /** Component to be displayed when the table is empty */
-  EmptyTableComponent: PropTypes.func,
+  EmptyTableComponent: PropTypes.elementType,
   /** Component to be displayed for row status, ie, 10 of 20 rows. Displayed by default in the TableControlBar */
-  RowStatusComponent: PropTypes.func,
+  RowStatusComponent: PropTypes.elementType,
   /** Component to be displayed for selection status. Displayed when there are selected rows and no active filters */
-  SelectionStatusComponent: PropTypes.func,
+  SelectionStatusComponent: PropTypes.elementType,
   /** Component to be displayed for filter status. Displayed when there are active filters. */
-  FilterStatusComponent: PropTypes.func,
+  FilterStatusComponent: PropTypes.elementType,
   /** If children are not provided a table with control bar and footer will be rendered */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  children: PropTypes.node,
   /** If true filters will be shown on sidebar instead */
   showFiltersInSidebar: PropTypes.bool,
   /** options for data view toggle */

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","useSelectionActions","selectionsReducer","initialState","initialSelectionsState","DataTable","_ref","columns","data","defaultColumnValues","additionalColumns","isSelectable","isPaginated","manualPagination","pageCount","itemCount","isFilterable","manualFilters","fetchData","isSortable","manualSortBy","isExpandable","renderRowSubComponent","bulkActions","tableActions","numBreakoutFilters","initialTableOptions","EmptyTableComponent","manualSelectColumn","showFiltersInSidebar","dataViewToggleOptions","disableElevation","isLoading","children","onSelectedRowsChanged","maxSelectedRows","onMaxSelectedRows","props","_objectWithoutProperties","_excluded","defaultColumn","tableOptions","updatedTableOptions","_objectSpread","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","enhancedInstance","createElement","Provider","className","Fragment","content","defaultProps","undefined","SelectionStatusComponent","FilterStatusComponent","RowStatusComponent","isDataViewToggleEnabled","onDataViewToggle","defaultActiveStateValue","togglePlacement","propTypes","arrayOf","shape","Header","oneOfType","func","node","isRequired","accessor","string","Cell","element","Filter","filterChoices","name","number","bool","disableSortBy","buttonText","handleClick","variant","disabled","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 { useSelectionActions } from './hooks';\nimport selectionsReducer, { initialState as initialSelectionsState } 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  dataViewToggleOptions,\n  disableElevation,\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          /*  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  const enhancedInstance = {\n    ...instance,\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    ...selectionProps,\n    ...selectionActions,\n    ...props,\n  };\n\n  return (\n    <DataTableContext.Provider value={enhancedInstance}>\n      <DataTableLayout>\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  dataViewToggleOptions: {\n    isDataViewToggleEnabled: false,\n    onDataViewToggle: () => {},\n    defaultActiveStateValue: 'card',\n    togglePlacement: 'left',\n  },\n  disableElevation: false,\n  renderRowSubComponent: 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.func, 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.func, PropTypes.element]),\n    /** Specifies filter component */\n    Filter: PropTypes.func,\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.func, PropTypes.node]).isRequired,\n    Cell: PropTypes.func.isRequired,\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  // eslint-disable-next-line react/require-default-props\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.oneOfType([PropTypes.func, PropTypes.node]),\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.string, PropTypes.node]),\n    /** Component that renders in the added column. It will receive the row as a prop */\n    Cell: PropTypes.oneOfType([PropTypes.func, 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://react-table.tanstack.com/docs/api/useTable */\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.func,\n  /** Component to be displayed for row status, ie, 10 of 20 rows. Displayed by default in the TableControlBar */\n  RowStatusComponent: PropTypes.func,\n  /** Component to be displayed for selection status. Displayed when there are selected rows and no active filters */\n  SelectionStatusComponent: PropTypes.func,\n  /** Component to be displayed for filter status. Displayed when there are active filters. */\n  FilterStatusComponent: PropTypes.func,\n  /** If children are not provided a table with control bar and footer will be rendered */\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  /** If true filters will be shown on sidebar instead */\n  showFiltersInSidebar: PropTypes.bool,\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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"}
+{"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","useSelectionActions","selectionsReducer","initialState","initialSelectionsState","DataTable","_ref","columns","data","defaultColumnValues","additionalColumns","isSelectable","isPaginated","manualPagination","pageCount","itemCount","isFilterable","manualFilters","fetchData","isSortable","manualSortBy","isExpandable","renderRowSubComponent","bulkActions","tableActions","numBreakoutFilters","initialTableOptions","EmptyTableComponent","manualSelectColumn","showFiltersInSidebar","dataViewToggleOptions","disableElevation","isLoading","children","onSelectedRowsChanged","maxSelectedRows","onMaxSelectedRows","props","_objectWithoutProperties","_excluded","defaultColumn","tableOptions","updatedTableOptions","_objectSpread","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","enhancedInstance","createElement","Provider","className","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 { useSelectionActions } from './hooks';\nimport selectionsReducer, { initialState as initialSelectionsState } 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  dataViewToggleOptions,\n  disableElevation,\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          /*  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  const enhancedInstance = {\n    ...instance,\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    ...selectionProps,\n    ...selectionActions,\n    ...props,\n  };\n\n  return (\n    <DataTableContext.Provider value={enhancedInstance}>\n      <DataTableLayout>\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  dataViewToggleOptions: {\n    isDataViewToggleEnabled: false,\n    onDataViewToggle: () => {},\n    defaultActiveStateValue: 'card',\n    togglePlacement: 'left',\n  },\n  disableElevation: false,\n  renderRowSubComponent: 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  // eslint-disable-next-line react/require-default-props\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://react-table.tanstack.com/docs/api/useTable */\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  /** 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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"}

package/dist/Form/FormControl.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "className", "controlClassName", "leadingElement", "trailingElement", "floatingLabel", "autoResize", "onChange"],
+const _excluded = ["as", "className", "controlClassName", "leadingElement", "trailingElement", "floatingLabel", "autoResize", "onChange", "inputMask"],
   _excluded2 = ["isInvalid", "isValid", "getControlProps"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -12,6 +12,7 @@ import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import RBFormControl from 'react-bootstrap/FormControl';
+import { IMaskInput } from 'react-imask';
 import { useFormGroupContext } from './FormGroupContext';
 import FormControlFeedback from './FormControlFeedback';
 import FormControlDecoratorGroup from './FormControlDecoratorGroup';
@@ -25,7 +26,8 @@ const FormControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       trailingElement,
       floatingLabel,
       autoResize,
-      onChange
+      onChange,
+      inputMask
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const _useFormGroupContext = useFormGroupContext(),
@@ -72,7 +74,7 @@ const FormControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     floatingLabel: floatingLabel,
     className: className
   }, /*#__PURE__*/React.createElement(RBFormControl, _extends({
-    as: as,
+    as: inputMask ? IMaskInput : as,
     ref: resolvedRef,
     size: size,
     isInvalid: isInvalid,
@@ -80,7 +82,8 @@ const FormControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: classNames(controlClassName, {
       'has-value': hasValue
     }),
-    onChange: handleOnChange
+    onChange: handleOnChange,
+    mask: inputMask
   }, controlProps)));
 });
 const SIZE_CHOICES = ['sm', 'lg'];
@@ -116,7 +119,9 @@ FormControl.propTypes = {
   /** Specifies whether to display control in invalid state, this affects styling. */
   isInvalid: PropTypes.bool,
   /** Only for `as="textarea"`. Specifies whether the input can be resized according to the height of content. */
-  autoResize: PropTypes.bool
+  autoResize: PropTypes.bool,
+  /** Specifies what format to use for the input mask. */
+  inputMask: PropTypes.string
 };
 FormControl.defaultProps = {
   as: 'input',
@@ -133,7 +138,8 @@ FormControl.defaultProps = {
   plaintext: false,
   isValid: undefined,
   isInvalid: undefined,
-  autoResize: false
+  autoResize: false,
+  inputMask: undefined
 };
 export default FormControl;
 //# sourceMappingURL=FormControl.js.map

package/dist/Form/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","names":["React","useCallback","useEffect","PropTypes","classNames","RBFormControl","useFormGroupContext","FormControlFeedback","FormControlDecoratorGroup","callAllHandlers","useHasValue","FormControl","forwardRef","_ref","ref","as","className","controlClassName","leadingElement","trailingElement","floatingLabel","autoResize","onChange","props","_objectWithoutProperties","_excluded","_useFormGroupContext","isInvalid","isValid","getControlProps","formGroupContext","_excluded2","inputRef","useRef","resolvedRef","size","hasValue","checkInputEventValue","defaultValue","value","handleResize","current","initialHeight","offsets","offsetHeight","clientHeight","style","height","scrollHeight","controlProps","_objectSpread","onBlur","handleOnChange","e","createElement","_extends","SIZE_CHOICES","Feedback","Description","propTypes","string","elementType","func","oneOfType","number","id","oneOf","node","plaintext","bool","defaultProps","undefined"],"sources":["../../src/Form/FormControl.jsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport RBFormControl from 'react-bootstrap/FormControl';\nimport { useFormGroupContext } from './FormGroupContext';\nimport FormControlFeedback from './FormControlFeedback';\nimport FormControlDecoratorGroup from './FormControlDecoratorGroup';\n\nimport { callAllHandlers, useHasValue } from './fieldUtils';\n\nconst FormControl = React.forwardRef(({\n  as,\n  className,\n  controlClassName,\n  leadingElement,\n  trailingElement,\n  floatingLabel,\n  autoResize,\n  onChange,\n  ...props\n}, ref) => {\n  const {\n    isInvalid,\n    isValid,\n    getControlProps,\n    ...formGroupContext\n  } = useFormGroupContext();\n  const inputRef = React.useRef();\n  const resolvedRef = ref || inputRef;\n  const size = props.size || formGroupContext.size;\n\n  const [hasValue, checkInputEventValue] = useHasValue({\n    defaultValue: props.defaultValue,\n    value: props.value,\n  });\n\n  const handleResize = useCallback(() => {\n    if (as === 'textarea' && autoResize) {\n      if (!resolvedRef.current.initialHeight && !resolvedRef.current.offsets) {\n        resolvedRef.current.initialHeight = resolvedRef.current.offsetHeight;\n        resolvedRef.current.offsets = resolvedRef.current.offsetHeight - resolvedRef.current.clientHeight;\n      }\n      resolvedRef.current.style.height = `${resolvedRef.current.initialHeight}px`;\n      resolvedRef.current.style.height = `${resolvedRef.current.scrollHeight + resolvedRef.current.offsets}px`;\n    }\n  }, [as, autoResize, resolvedRef]);\n\n  useEffect(() => {\n    handleResize();\n  }, [handleResize]);\n\n  const controlProps = getControlProps({\n    ...props,\n    // eslint-disable-next-line react/prop-types\n    onBlur: callAllHandlers(checkInputEventValue, props.onBlur),\n  });\n\n  const handleOnChange = (e) => {\n    handleResize();\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <FormControlDecoratorGroup\n      size={size}\n      leadingElement={leadingElement}\n      trailingElement={trailingElement}\n      floatingLabel={floatingLabel}\n      className={className}\n    >\n      <RBFormControl\n        as={as}\n        ref={resolvedRef}\n        size={size}\n        isInvalid={isInvalid}\n        isValid={isValid}\n        className={classNames(controlClassName, {\n          'has-value': hasValue,\n        })}\n        onChange={handleOnChange}\n        {...controlProps}\n      />\n    </FormControlDecoratorGroup>\n  );\n});\n\nconst SIZE_CHOICES = ['sm', 'lg'];\n\nFormControl.Feedback = FormControlFeedback;\nFormControl.Description = FormControlFeedback;\n\nFormControl.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies base element for the control component. */\n  as: PropTypes.elementType,\n  /** Specifies function that is triggered on input value change. */\n  onChange: PropTypes.func,\n  /** Specifies default value of the input component. */\n  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Specifies current value of the input component. */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Specifies id of the control component. */\n  id: PropTypes.string,\n  /** Specifies class name for the control component. */\n  controlClassName: PropTypes.string,\n  /** Specifies size for the control component. */\n  size: PropTypes.oneOf(SIZE_CHOICES),\n  /** Specifies leading element to display for the input component. */\n  leadingElement: PropTypes.node,\n  /** Specifies trailing element to display for the input component. */\n  trailingElement: PropTypes.node,\n  /** Specifies floating label to display for the input component. */\n  floatingLabel: PropTypes.node,\n  /** Specifies whether to render input as plain text. */\n  plaintext: PropTypes.bool,\n  /** Specifies whether to display control in valid state, this affects styling. */\n  isValid: PropTypes.bool,\n  /** Specifies whether to display control in invalid state, this affects styling. */\n  isInvalid: PropTypes.bool,\n  /** Only for `as=\"textarea\"`. Specifies whether the input can be resized according to the height of content. */\n  autoResize: PropTypes.bool,\n};\n\nFormControl.defaultProps = {\n  as: 'input',\n  className: undefined,\n  id: undefined,\n  controlClassName: undefined,\n  onChange: undefined,\n  defaultValue: undefined,\n  value: undefined,\n  size: undefined,\n  leadingElement: undefined,\n  trailingElement: undefined,\n  floatingLabel: undefined,\n  plaintext: false,\n  isValid: undefined,\n  isInvalid: undefined,\n  autoResize: false,\n};\n\nexport default FormControl;\n"],"mappings":"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"}
+{"version":3,"file":"FormControl.js","names":["React","useCallback","useEffect","PropTypes","classNames","RBFormControl","IMaskInput","useFormGroupContext","FormControlFeedback","FormControlDecoratorGroup","callAllHandlers","useHasValue","FormControl","forwardRef","_ref","ref","as","className","controlClassName","leadingElement","trailingElement","floatingLabel","autoResize","onChange","inputMask","props","_objectWithoutProperties","_excluded","_useFormGroupContext","isInvalid","isValid","getControlProps","formGroupContext","_excluded2","inputRef","useRef","resolvedRef","size","hasValue","checkInputEventValue","defaultValue","value","handleResize","current","initialHeight","offsets","offsetHeight","clientHeight","style","height","scrollHeight","controlProps","_objectSpread","onBlur","handleOnChange","e","createElement","_extends","mask","SIZE_CHOICES","Feedback","Description","propTypes","string","elementType","func","oneOfType","number","id","oneOf","node","plaintext","bool","defaultProps","undefined"],"sources":["../../src/Form/FormControl.jsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport RBFormControl from 'react-bootstrap/FormControl';\nimport { IMaskInput } from 'react-imask';\nimport { useFormGroupContext } from './FormGroupContext';\nimport FormControlFeedback from './FormControlFeedback';\nimport FormControlDecoratorGroup from './FormControlDecoratorGroup';\n\nimport { callAllHandlers, useHasValue } from './fieldUtils';\n\nconst FormControl = React.forwardRef(({\n  as,\n  className,\n  controlClassName,\n  leadingElement,\n  trailingElement,\n  floatingLabel,\n  autoResize,\n  onChange,\n  inputMask,\n  ...props\n}, ref) => {\n  const {\n    isInvalid,\n    isValid,\n    getControlProps,\n    ...formGroupContext\n  } = useFormGroupContext();\n  const inputRef = React.useRef();\n  const resolvedRef = ref || inputRef;\n  const size = props.size || formGroupContext.size;\n\n  const [hasValue, checkInputEventValue] = useHasValue({\n    defaultValue: props.defaultValue,\n    value: props.value,\n  });\n\n  const handleResize = useCallback(() => {\n    if (as === 'textarea' && autoResize) {\n      if (!resolvedRef.current.initialHeight && !resolvedRef.current.offsets) {\n        resolvedRef.current.initialHeight = resolvedRef.current.offsetHeight;\n        resolvedRef.current.offsets = resolvedRef.current.offsetHeight - resolvedRef.current.clientHeight;\n      }\n      resolvedRef.current.style.height = `${resolvedRef.current.initialHeight}px`;\n      resolvedRef.current.style.height = `${resolvedRef.current.scrollHeight + resolvedRef.current.offsets}px`;\n    }\n  }, [as, autoResize, resolvedRef]);\n\n  useEffect(() => {\n    handleResize();\n  }, [handleResize]);\n\n  const controlProps = getControlProps({\n    ...props,\n    // eslint-disable-next-line react/prop-types\n    onBlur: callAllHandlers(checkInputEventValue, props.onBlur),\n  });\n\n  const handleOnChange = (e) => {\n    handleResize();\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <FormControlDecoratorGroup\n      size={size}\n      leadingElement={leadingElement}\n      trailingElement={trailingElement}\n      floatingLabel={floatingLabel}\n      className={className}\n    >\n      <RBFormControl\n        as={inputMask ? IMaskInput : as}\n        ref={resolvedRef}\n        size={size}\n        isInvalid={isInvalid}\n        isValid={isValid}\n        className={classNames(controlClassName, {\n          'has-value': hasValue,\n        })}\n        onChange={handleOnChange}\n        mask={inputMask}\n        {...controlProps}\n      />\n    </FormControlDecoratorGroup>\n  );\n});\n\nconst SIZE_CHOICES = ['sm', 'lg'];\n\nFormControl.Feedback = FormControlFeedback;\nFormControl.Description = FormControlFeedback;\n\nFormControl.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies base element for the control component. */\n  as: PropTypes.elementType,\n  /** Specifies function that is triggered on input value change. */\n  onChange: PropTypes.func,\n  /** Specifies default value of the input component. */\n  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Specifies current value of the input component. */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Specifies id of the control component. */\n  id: PropTypes.string,\n  /** Specifies class name for the control component. */\n  controlClassName: PropTypes.string,\n  /** Specifies size for the control component. */\n  size: PropTypes.oneOf(SIZE_CHOICES),\n  /** Specifies leading element to display for the input component. */\n  leadingElement: PropTypes.node,\n  /** Specifies trailing element to display for the input component. */\n  trailingElement: PropTypes.node,\n  /** Specifies floating label to display for the input component. */\n  floatingLabel: PropTypes.node,\n  /** Specifies whether to render input as plain text. */\n  plaintext: PropTypes.bool,\n  /** Specifies whether to display control in valid state, this affects styling. */\n  isValid: PropTypes.bool,\n  /** Specifies whether to display control in invalid state, this affects styling. */\n  isInvalid: PropTypes.bool,\n  /** Only for `as=\"textarea\"`. Specifies whether the input can be resized according to the height of content. */\n  autoResize: PropTypes.bool,\n  /** Specifies what format to use for the input mask. */\n  inputMask: PropTypes.string,\n};\n\nFormControl.defaultProps = {\n  as: 'input',\n  className: undefined,\n  id: undefined,\n  controlClassName: undefined,\n  onChange: undefined,\n  defaultValue: undefined,\n  value: undefined,\n  size: undefined,\n  leadingElement: undefined,\n  trailingElement: undefined,\n  floatingLabel: undefined,\n  plaintext: false,\n  isValid: undefined,\n  isInvalid: undefined,\n  autoResize: false,\n  inputMask: undefined,\n};\n\nexport default FormControl;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.8.0",
+  "version": "21.9.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -68,6 +68,7 @@
     "react-colorful": "^5.6.1",
     "react-dropzone": "^14.2.1",
     "react-focus-on": "^3.5.4",
+    "react-imask": "^7.1.3",
     "react-loading-skeleton": "^3.1.0",
     "react-popper": "^2.2.5",
     "react-proptype-conditional-require": "^1.0.4",
@@ -190,5 +191,8 @@
     "www",
     "icons",
     "dependent-usage-analyzer"
-  ]
+  ],
+  "overrides": {
+    "@testing-library/dom": "9.3.3"
+  }
 }

package/src/ActionRow/README.md

@@ -17,6 +17,7 @@ A layout utility for the common use case of aligning buttons, links or text
 in a row in a control bar or nav.
 
 ActionRow assumes that its last child is the primary action and lays out actions so that the last item is in a primary location. If horizontal, the primary action sits on the right. If stacked, the primary action sits at the top of the stack (this is done via `flex-direction: column-reverse;`).
+
 ## Basic Usage
 
 ```jsx live
@@ -36,7 +37,9 @@ ActionRow can also be used with a helper component ``ActionRow.Spacer`` to inser
 
 ```jsx live
 <ActionRow>
-  <Form.Checkbox className="flex-column flex-sm-row">Don't ask me again.</Form.Checkbox>
+  <Form.Checkbox className="flex-column flex-sm-row">
+      Don't ask me again.
+  </Form.Checkbox>
   <ActionRow.Spacer />
   <Button variant="tertiary">
     Cancel
@@ -49,7 +52,6 @@ ActionRow can also be used with a helper component ``ActionRow.Spacer`` to inser
 
 ## Stacked Usage
 
-
 ```jsx live
 <ActionRow isStacked>
   <p className="x-small">

package/src/DataTable/CollapsibleButtonGroup.jsx

@@ -102,7 +102,7 @@ CollapsibleButtonGroup.propTypes = {
   className: PropTypes.string,
   /** Array of action objects, containing a component and their callback args */
   actions: PropTypes.arrayOf(PropTypes.shape({
-    component: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,
+    component: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]).isRequired,
     args: PropTypes.shape({}),
   })).isRequired,
 };

package/src/DataTable/TableFilters.jsx

@@ -30,7 +30,7 @@ TableFilters.defaultProps = {
 
 TableFilters.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.shape({
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     canFilter: PropTypes.bool,
     render: PropTypes.func.isRequired,
   })).isRequired,

package/src/DataTable/TableFooter.jsx

@@ -25,11 +25,7 @@ function TableFooter({ className, children }) {
 
 TableFooter.propTypes = {
   /** Specifies the content of the `TableFooter` */
-  children: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.node,
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.node])),
-  ]),
+  children: PropTypes.node,
   /** Specifies class name to append to the base element. */
   className: PropTypes.string,
 };

package/src/DataTable/filters/CheckboxFilter.jsx

@@ -62,7 +62,7 @@ CheckboxFilter.propTypes = {
    */
   column: PropTypes.shape({
     setFilter: PropTypes.func.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     filterChoices: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string.isRequired,
       value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

package/src/DataTable/filters/DropdownFilter.jsx

@@ -50,7 +50,7 @@ DropdownFilter.propTypes = {
    */
   column: PropTypes.shape({
     setFilter: PropTypes.func.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     filterChoices: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string.isRequired,
       number: PropTypes.number,

package/src/DataTable/filters/MultiSelectDropdownFilter.jsx

@@ -66,7 +66,7 @@ MultiSelectDropdownFilter.propTypes = {
     /** Function to set the filter value */
     setFilter: PropTypes.func.isRequired,
     /** Column header used for labels and placeholders */
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     /** Names and values for the select options */
     filterChoices: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string.isRequired,

package/src/DataTable/filters/TextFilter.jsx

@@ -52,7 +52,7 @@ TextFilter.propTypes = {
    */
   column: PropTypes.shape({
     setFilter: PropTypes.func.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     getHeaderProps: PropTypes.func.isRequired,
     filterValue: PropTypes.string,
   }).isRequired,

package/src/DataTable/index.jsx

@@ -270,13 +270,13 @@ DataTable.propTypes = {
   /** Definition of table columns */
   columns: PropTypes.arrayOf(PropTypes.shape({
     /** User visible column name */
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     /** String used to access the correct cell data for this column */
     accessor: requiredWhenNot(PropTypes.string, 'Cell'),
     /** Specifies a function that receives `row` as argument and returns cell content */
-    Cell: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
     /** Specifies filter component */
-    Filter: PropTypes.func,
+    Filter: PropTypes.elementType,
     /** Specifies filter type */
     filter: PropTypes.string,
     /** Specifies filter choices */
@@ -293,8 +293,8 @@ DataTable.propTypes = {
   /** Alternate column for selecting rows. See react table useSort docs for more information */
   manualSelectColumn: PropTypes.shape({
     id: PropTypes.string.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-    Cell: PropTypes.func.isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
+    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
     disableSortBy: PropTypes.bool.isRequired,
   }),
   /** Table columns can be sorted */
@@ -315,16 +315,16 @@ DataTable.propTypes = {
   /** defaults that will be set on each column. Will be overridden by individual column values */
   defaultColumnValues: PropTypes.shape({
     /** A default filter component for the column */
-    Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+    Filter: PropTypes.elementType,
   }),
   /** Actions or other additional non-data columns can be added here  */
   additionalColumns: PropTypes.arrayOf(PropTypes.shape({
     /** id must be unique from other columns ids */
     id: PropTypes.string.isRequired,
     /** column header that will be displayed to the user */
-    Header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
     /** Component that renders in the added column. It will receive the row as a prop */
-    Cell: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
   })),
   /** Function that will fetch table data. Called when page size, page index or filters change.
     * Meant to be used with manual filters and pagination */
@@ -401,15 +401,15 @@ DataTable.propTypes = {
   /** Number between one and four filters that can be shown on the top row. */
   numBreakoutFilters: PropTypes.oneOf([1, 2, 3, 4]),
   /** Component to be displayed when the table is empty */
-  EmptyTableComponent: PropTypes.func,
+  EmptyTableComponent: PropTypes.elementType,
   /** Component to be displayed for row status, ie, 10 of 20 rows. Displayed by default in the TableControlBar */
-  RowStatusComponent: PropTypes.func,
+  RowStatusComponent: PropTypes.elementType,
   /** Component to be displayed for selection status. Displayed when there are selected rows and no active filters */
-  SelectionStatusComponent: PropTypes.func,
+  SelectionStatusComponent: PropTypes.elementType,
   /** Component to be displayed for filter status. Displayed when there are active filters. */
-  FilterStatusComponent: PropTypes.func,
+  FilterStatusComponent: PropTypes.elementType,
   /** If children are not provided a table with control bar and footer will be rendered */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  children: PropTypes.node,
   /** If true filters will be shown on sidebar instead */
   showFiltersInSidebar: PropTypes.bool,
   /** options for data view toggle */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import classNames from 'classnames';
 import TableActions from '../TableActions';
@@ -216,9 +216,10 @@ describe('<TableActions />', () => {
       expect(overflowToggle).toBeInTheDocument();
 
       userEvent.click(overflowToggle);
-
-      const buttons = screen.getAllByRole('button');
-      expect(buttons.length).toBeGreaterThan(1);
+      waitFor(() => {
+        const buttons = screen.getAllByRole('button');
+        expect(buttons.length).toBeGreaterThan(1);
+      });
     });
 
     it('renders the correct alt text for the dropdown', () => {

package/src/Form/FormControl.jsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import RBFormControl from 'react-bootstrap/FormControl';
+import { IMaskInput } from 'react-imask';
 import { useFormGroupContext } from './FormGroupContext';
 import FormControlFeedback from './FormControlFeedback';
 import FormControlDecoratorGroup from './FormControlDecoratorGroup';
@@ -17,6 +18,7 @@ const FormControl = React.forwardRef(({
   floatingLabel,
   autoResize,
   onChange,
+  inputMask,
   ...props
 }, ref) => {
   const {
@@ -71,7 +73,7 @@ const FormControl = React.forwardRef(({
       className={className}
     >
       <RBFormControl
-        as={as}
+        as={inputMask ? IMaskInput : as}
         ref={resolvedRef}
         size={size}
         isInvalid={isInvalid}
@@ -80,6 +82,7 @@ const FormControl = React.forwardRef(({
           'has-value': hasValue,
         })}
         onChange={handleOnChange}
+        mask={inputMask}
         {...controlProps}
       />
     </FormControlDecoratorGroup>
@@ -122,6 +125,8 @@ FormControl.propTypes = {
   isInvalid: PropTypes.bool,
   /** Only for `as="textarea"`. Specifies whether the input can be resized according to the height of content. */
   autoResize: PropTypes.bool,
+  /** Specifies what format to use for the input mask. */
+  inputMask: PropTypes.string,
 };
 
 FormControl.defaultProps = {
@@ -140,6 +145,7 @@ FormControl.defaultProps = {
   isValid: undefined,
   isInvalid: undefined,
   autoResize: false,
+  inputMask: undefined,
 };
 
 export default FormControl;

package/src/Form/form-control.mdx

@@ -43,7 +43,6 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 }
 ```
 
-
 ## Input types
 
 ```jsx live
@@ -163,6 +162,148 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 }
 ```
 
+## Input masks
+Paragon uses the [react-imask](https://www.npmjs.com/package/react-imask) library,
+which allows you to add masks of different types for inputs.
+To create your own mask, you need to pass the required mask pattern (`+{1} (000) 000-0000`) to the `inputMask` property. <br />
+See [react-imask](https://imask.js.org) for documentation on available props.
+
+```jsx live
+() => {
+  {/* start example state */}
+  const [maskType, setMaskType] = useState('phone');
+  {/* end example state */}
+
+  const inputsWithMask = {
+    phone: (
+      <>
+        <h3>Phone</h3>
+        <Form.Group>
+          <Form.Control
+            inputMask="+{1} (000) 000-0000"
+            value={value}
+            onChange={handleChange}
+            leadingElement={<Icon src={FavoriteBorder} />}
+            floatingLabel="What is your phone number?"
+          />
+        </Form.Group>
+      </>
+    ),
+    creditCard: (<>
+      <h3>Credit card</h3>
+      <Form.Group>
+        <Form.Control
+          inputMask="0000 0000 0000 0000"
+          value={value}
+          onChange={handleChange}
+          leadingElement={<Icon src={FavoriteBorder} />}
+          floatingLabel="What is your credit card number?"
+        />
+      </Form.Group>
+    </>),
+    securePassword: (<>
+      <h3>Secure password</h3>
+      <Form.Group>
+        <Form.Control
+          inputMask="XXX-XX-0000"
+          value={value}
+          definitions={{
+            X: {
+              mask: '0',
+              displayChar: 'X',
+              placeholderChar: '#',
+            },
+          }}
+          onChange={handleChange}
+          leadingElement={<Icon src={FavoriteBorder} />}
+          floatingLabel="What is your password?"
+        />
+      </Form.Group>
+    </>),
+    OTPpassword: (<>
+      <h3>OTP password</h3>
+      <Form.Group>
+        <Form.Control
+          inputMask="G-00000"
+          value={value}
+          onChange={handleChange}
+          leadingElement={<Icon src={FavoriteBorder} />}
+          floatingLabel="What is your OPT password?"
+        />
+      </Form.Group>
+    </>),
+    price: (
+        <>
+          <h3>Course priсe</h3>
+          <Form.Group>
+            <Form.Control
+              inputMask="$num"
+              blocks={{
+                num: {
+                  // nested masks are available!
+                  mask: Number,
+                  thousandsSeparator: ' '
+                }
+              }}
+              value={value}
+              onChange={handleChange}
+              leadingElement={<Icon src={FavoriteBorder} />}
+              floatingLabel="What is the price of this course?"
+            />
+          </Form.Group>
+        </>
+    ),
+  };
+
+  const [value, setValue] = useState('');
+
+  const handleChange = (e) => setValue(e.target.value);
+
+  return (
+    <>
+      {/* start example form block */}
+      <ExamplePropsForm
+        inputs={[
+          { value: maskType, setValue: setMaskType, options: Object.keys(inputsWithMask), name: 'Mask variants' },
+        ]}
+      />
+      {/* end example form block */}
+
+      {inputsWithMask[maskType]}
+    </>
+  );
+}
+```
+
+## Input masks with clear value
+To get a value without a mask, you need to use `onChange` instead of `onAccept` to handle changes.
+
+```jsx live
+() => {
+  const [value, setValue] = useState('');
+
+  return (
+      <>
+        <Form.Group>
+          <Form.Control
+            inputMask="+{1} (000) 000-0000"
+            leadingElement={<Icon src={FavoriteBorder} />}
+            trailingElement={<Icon src={Verified} />}
+            floatingLabel="What is your phone number?"
+            value={value}
+            // depending on prop above first argument is
+            // `value` if `unmask=false`,
+            // `unmaskedValue` if `unmask=true`,
+            // `typedValue` if `unmask='typed'`
+            onAccept={(_, mask) => setValue(mask._unmaskedValue)}
+          />
+        </Form.Group>
+        Unmasked value: {JSON.stringify(value)}
+      </>
+  );
+}
+```
+
 ## Textarea autoResize
 
 `autoResize` prop allows input to be resized according to the content height.

package/src/Form/tests/FormControl.test.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -8,8 +8,27 @@ const ref = {
   current: null,
 };
 
+let unmaskedInputValue;
+
+// eslint-disable-next-line react/prop-types
+function Component({ isClearValue }) {
+  const [inputValue, setInputValue] = useState('');
+  unmaskedInputValue = inputValue;
+
+  return (
+    <FormControl
+      inputMask="+{1} (000) 000-0000"
+      value={inputValue}
+      onChange={(e) => (!isClearValue ? setInputValue(e.target.value) : null)}
+      /* eslint-disable-next-line no-underscore-dangle */
+      onAccept={(_, mask) => (isClearValue ? setInputValue(mask._unmaskedValue) : null)}
+      data-testid="form-control-with-mask"
+    />
+  );
+}
+
 describe('FormControl', () => {
-  it('textarea changes its height with autoResize prop', async () => {
+  it('textarea changes its height with autoResize prop', () => {
     const useReferenceSpy = jest.spyOn(React, 'useRef').mockReturnValue(ref);
     const onChangeFunc = jest.fn();
     const inputText = 'new text';
@@ -26,9 +45,27 @@ describe('FormControl', () => {
     expect(useReferenceSpy).toHaveBeenCalledTimes(1);
     expect(ref.current.style.height).toBe('0px');
 
-    await userEvent.type(textarea, inputText);
+    userEvent.type(textarea, inputText);
 
     expect(onChangeFunc).toHaveBeenCalledTimes(inputText.length);
     expect(ref.current.style.height).toEqual(`${ref.current.scrollHeight + ref.current.offsetHeight}px`);
   });
+
+  it('should apply and accept input mask for phone numbers', () => {
+    render(<Component />);
+
+    const input = screen.getByTestId('form-control-with-mask');
+    userEvent.type(input, '5555555555');
+    expect(input.value).toBe('+1 (555) 555-5555');
+  });
+
+  it('should be cleared from the mask elements value', () => {
+    render(<Component isClearValue />);
+
+    const input = screen.getByTestId('form-control-with-mask');
+    userEvent.type(input, '5555555555');
+
+    expect(input.value).toBe('+1 (555) 555-5555');
+    expect(unmaskedInputValue).toBe('15555555555');
+  });
 });