@openedx/paragon 22.0.0-alpha.15 → 22.0.0-alpha.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +8 -8
  2. package/dist/DataTable/ExpandRow.js +3 -8
  3. package/dist/DataTable/ExpandRow.js.map +1 -1
  4. package/dist/DataTable/selection/ControlledSelect.js +3 -7
  5. package/dist/DataTable/selection/ControlledSelect.js.map +1 -1
  6. package/dist/DataTable/selection/ControlledSelectHeader.js +3 -7
  7. package/dist/DataTable/selection/ControlledSelectHeader.js.map +1 -1
  8. package/dist/DataTable/selection/ControlledSelectionStatus.js +5 -14
  9. package/dist/DataTable/selection/ControlledSelectionStatus.js.map +1 -1
  10. package/dist/Nav/index.scss +9 -9
  11. package/dist/Tabs/index.scss +8 -0
  12. package/dist/core.css +30 -13
  13. package/dist/core.css.map +1 -1
  14. package/dist/core.min.css +1 -1
  15. package/dist/light.css +20 -13
  16. package/dist/light.css.map +1 -1
  17. package/dist/light.min.css +1 -1
  18. package/package.json +1 -1
  19. package/src/DataTable/ExpandRow.jsx +2 -2
  20. package/src/DataTable/selection/ControlledSelect.jsx +1 -2
  21. package/src/DataTable/selection/ControlledSelectHeader.jsx +1 -2
  22. package/src/DataTable/selection/ControlledSelectionStatus.jsx +1 -2
  23. package/src/DataTable/tests/ExpandRow.test.jsx +2 -8
  24. package/src/Nav/index.scss +9 -9
  25. package/src/Tabs/index.scss +8 -0
  26. package/styles/css/core/variables.css +6 -6
  27. package/styles/css/themes/light/variables.css +20 -13
  28. package/tokens/src/core/components/Card.json +1 -1
  29. package/tokens/src/core/components/Carousel.json +2 -2
  30. package/tokens/src/core/components/DataTable.json +1 -1
  31. package/tokens/src/core/components/Nav.json +1 -1
  32. package/tokens/src/core/components/ProgressBar.json +0 -5
  33. package/tokens/src/core/components/Tab.json +2 -1
  34. package/tokens/src/themes/light/components/Breadcrumb.json +0 -1
  35. package/tokens/src/themes/light/components/Dropdown.json +6 -1
  36. package/tokens/src/themes/light/components/Form/color.json +2 -2
  37. package/tokens/src/themes/light/components/Nav.json +26 -5
  38. package/tokens/src/themes/light/components/Popover.json +1 -1
  39. package/tokens/src/themes/light/components/ProductTour.json +2 -2
  40. package/tokens/src/themes/light/components/Tab.json +8 -1
package/README.md CHANGED
@@ -15,6 +15,14 @@ Documentation lives at https://paragon-openedx.netlify.app/.
15
15
 
16
16
  ## Getting Started
17
17
 
18
+ ### Getting Help
19
+
20
+ Please reach out to the Paragon Working Group (PWG):
21
+
22
+ * Open edX Slack ([request an invite](https://openedx.org/slack)): [#wg-paragon](https://openedx.slack.com/archives/C02NR285KV4)
23
+ * [Github Issues](https://github.com/openedx/paragon/issues/new?template=blank-issue.md)
24
+ * [Weekly PWG Meeting](https://calendar.google.com/calendar/embed?src=c_v86shrnegshsqgp4fj2k94u7bc%40group.calendar.google.com&ctz=America%2FNew_York)
25
+
18
26
  ### React Components
19
27
 
20
28
  Paragon components require React 16 or higher. To install Paragon into your project:
@@ -68,14 +76,6 @@ The Paragon CLI (Command Line Interface) is a tool that provides various utility
68
76
 
69
77
  Use `paragon help` to see more information.
70
78
 
71
- ## Getting Help
72
-
73
- Please reach out to the Paragon Working Group (PWG):
74
-
75
- * Open edX Slack ([request an invite](https://openedx.org/slack)): [#wg-paragon](https://openedx.slack.com/archives/C02NR285KV4)
76
- * [Github Issues](https://github.com/openedx/paragon/issues/new?template=blank-issue.md)
77
- * [Weekly PWG Meeting](https://calendar.google.com/calendar/embed?src=c_v86shrnegshsqgp4fj2k94u7bc%40group.calendar.google.com&ctz=America%2FNew_York)
78
-
79
79
  ## Internationalization
80
80
 
81
81
  Paragon supports internationalization for its components out of the box with the support of [react-intl](https://formatjs.io/docs/react-intl/). You may view translated strings for each component on the documentation website by switching languages in the settings.
@@ -1,7 +1,3 @@
1
- const _excluded = ["row"];
2
- 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); }
3
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
5
1
  import React from 'react';
6
2
  import PropTypes from 'prop-types';
7
3
  import { ExpandLess, ExpandMore } from '../../icons';
@@ -10,10 +6,9 @@ import IconButton from '../IconButton';
10
6
  const EXPAND_COLLAPSE_ICON_SIZE = 'inline';
11
7
  function ExpandRow(_ref) {
12
8
  let {
13
- row
14
- } = _ref,
15
- rest = _objectWithoutProperties(_ref, _excluded);
16
- return /*#__PURE__*/React.createElement("span", _extends({}, row.getToggleRowExpandedProps(), rest), row.isExpanded ? /*#__PURE__*/React.createElement(IconButton, {
9
+ row
10
+ } = _ref;
11
+ return /*#__PURE__*/React.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/React.createElement(IconButton, {
17
12
  src: ExpandLess,
18
13
  iconAs: Icon,
19
14
  alt: "Collapse row",
@@ -1 +1 @@
1
- {"version":3,"file":"ExpandRow.js","names":["React","PropTypes","ExpandLess","ExpandMore","Icon","IconButton","EXPAND_COLLAPSE_ICON_SIZE","ExpandRow","_ref","row","rest","_objectWithoutProperties","_excluded","createElement","_extends","getToggleRowExpandedProps","isExpanded","src","iconAs","alt","size","propTypes","shape","bool","func","isRequired"],"sources":["../../src/DataTable/ExpandRow.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ExpandLess, ExpandMore } from '../../icons';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\n\nconst EXPAND_COLLAPSE_ICON_SIZE = 'inline';\n\nfunction ExpandRow({ row, ...rest }) {\n return (\n <span {...row.getToggleRowExpandedProps()} {...rest}>\n {row.isExpanded\n ? <IconButton src={ExpandLess} iconAs={Icon} alt=\"Collapse row\" size={EXPAND_COLLAPSE_ICON_SIZE} />\n : <IconButton src={ExpandMore} iconAs={Icon} alt=\"Expand row\" size={EXPAND_COLLAPSE_ICON_SIZE} />}\n </span>\n );\n}\n\nExpandRow.propTypes = {\n /** Row data that is received from `react-table` API. */\n row: PropTypes.shape({\n /** Specifies if row is in expanded state. */\n isExpanded: PropTypes.bool,\n /** Function that returns props for the wrapper component to handle expand behaviour. */\n getToggleRowExpandedProps: PropTypes.func.isRequired,\n }).isRequired,\n};\n\nexport default ExpandRow;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,UAAU,EAAEC,UAAU,QAAQ,aAAa;AACpD,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,UAAU,MAAM,eAAe;AAEtC,MAAMC,yBAAyB,GAAG,QAAQ;AAE1C,SAASC,SAASA,CAAAC,IAAA,EAAmB;EAAA,IAAlB;MAAEC;IAAa,CAAC,GAAAD,IAAA;IAANE,IAAI,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAC/B,oBACEZ,KAAA,CAAAa,aAAA,SAAAC,QAAA,KAAUL,GAAG,CAACM,yBAAyB,CAAC,CAAC,EAAML,IAAI,GAChDD,GAAG,CAACO,UAAU,gBACXhB,KAAA,CAAAa,aAAA,CAACR,UAAU;IAACY,GAAG,EAAEf,UAAW;IAACgB,MAAM,EAAEd,IAAK;IAACe,GAAG,EAAC,cAAc;IAACC,IAAI,EAAEd;EAA0B,CAAE,CAAC,gBACjGN,KAAA,CAAAa,aAAA,CAACR,UAAU;IAACY,GAAG,EAAEd,UAAW;IAACe,MAAM,EAAEd,IAAK;IAACe,GAAG,EAAC,YAAY;IAACC,IAAI,EAAEd;EAA0B,CAAE,CAC9F,CAAC;AAEX;AAEAC,SAAS,CAACc,SAAS,GAAG;EACpB;EACAZ,GAAG,EAAER,SAAS,CAACqB,KAAK,CAAC;IACnB;IACAN,UAAU,EAAEf,SAAS,CAACsB,IAAI;IAC1B;IACAR,yBAAyB,EAAEd,SAAS,CAACuB,IAAI,CAACC;EAC5C,CAAC,CAAC,CAACA;AACL,CAAC;AAED,eAAelB,SAAS"}
1
+ {"version":3,"file":"ExpandRow.js","names":["React","PropTypes","ExpandLess","ExpandMore","Icon","IconButton","EXPAND_COLLAPSE_ICON_SIZE","ExpandRow","_ref","row","createElement","getToggleRowExpandedProps","isExpanded","src","iconAs","alt","size","propTypes","shape","bool","func","isRequired"],"sources":["../../src/DataTable/ExpandRow.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ExpandLess, ExpandMore } from '../../icons';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\n\nconst EXPAND_COLLAPSE_ICON_SIZE = 'inline';\n\nfunction ExpandRow({ row }) {\n return (\n <span {...row.getToggleRowExpandedProps()}>\n {row.isExpanded\n ? <IconButton src={ExpandLess} iconAs={Icon} alt=\"Collapse row\" size={EXPAND_COLLAPSE_ICON_SIZE} />\n : <IconButton src={ExpandMore} iconAs={Icon} alt=\"Expand row\" size={EXPAND_COLLAPSE_ICON_SIZE} />}\n </span>\n );\n}\n\nExpandRow.propTypes = {\n /** Row data that is received from `react-table` API. */\n row: PropTypes.shape({\n /** Specifies if row is in expanded state. */\n isExpanded: PropTypes.bool,\n /** Function that returns props for the wrapper component to handle expand behaviour. */\n getToggleRowExpandedProps: PropTypes.func.isRequired,\n }).isRequired,\n};\n\nexport default ExpandRow;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,UAAU,EAAEC,UAAU,QAAQ,aAAa;AACpD,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,UAAU,MAAM,eAAe;AAEtC,MAAMC,yBAAyB,GAAG,QAAQ;AAE1C,SAASC,SAASA,CAAAC,IAAA,EAAU;EAAA,IAAT;IAAEC;EAAI,CAAC,GAAAD,IAAA;EACxB,oBACER,KAAA,CAAAU,aAAA,SAAUD,GAAG,CAACE,yBAAyB,CAAC,CAAC,EACtCF,GAAG,CAACG,UAAU,gBACXZ,KAAA,CAAAU,aAAA,CAACL,UAAU;IAACQ,GAAG,EAAEX,UAAW;IAACY,MAAM,EAAEV,IAAK;IAACW,GAAG,EAAC,cAAc;IAACC,IAAI,EAAEV;EAA0B,CAAE,CAAC,gBACjGN,KAAA,CAAAU,aAAA,CAACL,UAAU;IAACQ,GAAG,EAAEV,UAAW;IAACW,MAAM,EAAEV,IAAK;IAACW,GAAG,EAAC,YAAY;IAACC,IAAI,EAAEV;EAA0B,CAAE,CAC9F,CAAC;AAEX;AAEAC,SAAS,CAACU,SAAS,GAAG;EACpB;EACAR,GAAG,EAAER,SAAS,CAACiB,KAAK,CAAC;IACnB;IACAN,UAAU,EAAEX,SAAS,CAACkB,IAAI;IAC1B;IACAR,yBAAyB,EAAEV,SAAS,CAACmB,IAAI,CAACC;EAC5C,CAAC,CAAC,CAACA;AACL,CAAC;AAED,eAAed,SAAS"}
@@ -1,7 +1,4 @@
1
- const _excluded = ["row"];
2
1
  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); }
3
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
5
2
  import React, { useContext, useCallback } from 'react';
6
3
  import PropTypes from 'prop-types';
7
4
  import { CheckboxControl } from '../../Form';
@@ -10,9 +7,8 @@ import useConvertIndeterminateProp from '../utils/useConvertIndeterminateProp';
10
7
  import { deleteSelectedRowAction, addSelectedRowAction } from './data/actions';
11
8
  function ControlledSelect(_ref) {
12
9
  let {
13
- row
14
- } = _ref,
15
- rest = _objectWithoutProperties(_ref, _excluded);
10
+ row
11
+ } = _ref;
16
12
  const {
17
13
  itemCount,
18
14
  controlledTableSelections: [, dispatch]
@@ -29,7 +25,7 @@ function ControlledSelect(_ref) {
29
25
  className: "pgn__data-table__controlled-select"
30
26
  }, /*#__PURE__*/React.createElement(CheckboxControl, _extends({}, updatedProps, {
31
27
  onChange: toggleSelected
32
- }, rest)));
28
+ })));
33
29
  }
34
30
  ControlledSelect.propTypes = {
35
31
  row: PropTypes.shape({
@@ -1 +1 @@
1
- {"version":3,"file":"ControlledSelect.js","names":["React","useContext","useCallback","PropTypes","CheckboxControl","DataTableContext","useConvertIndeterminateProp","deleteSelectedRowAction","addSelectedRowAction","ControlledSelect","_ref","row","rest","_objectWithoutProperties","_excluded","itemCount","controlledTableSelections","dispatch","toggleSelected","isSelected","id","updatedProps","getToggleRowSelectedProps","createElement","className","_extends","onChange","propTypes","shape","oneOfType","string","number","isRequired","func","bool"],"sources":["../../../src/DataTable/selection/ControlledSelect.jsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { CheckboxControl } from '../../Form';\nimport DataTableContext from '../DataTableContext';\nimport useConvertIndeterminateProp from '../utils/useConvertIndeterminateProp';\n\nimport {\n deleteSelectedRowAction,\n addSelectedRowAction,\n} from './data/actions';\n\nfunction ControlledSelect({ row, ...rest }) {\n const {\n itemCount,\n controlledTableSelections: [, dispatch],\n } = useContext(DataTableContext);\n\n const toggleSelected = useCallback(\n () => {\n if (row.isSelected) {\n dispatch(deleteSelectedRowAction(row.id));\n } else {\n dispatch(addSelectedRowAction(row, itemCount));\n }\n },\n [itemCount, row, dispatch],\n );\n\n const updatedProps = useConvertIndeterminateProp(row.getToggleRowSelectedProps());\n\n return (\n <div className=\"pgn__data-table__controlled-select\">\n <CheckboxControl\n {...updatedProps}\n onChange={toggleSelected}\n {...rest}\n />\n </div>\n );\n}\n\nControlledSelect.propTypes = {\n row: PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n getToggleRowSelectedProps: PropTypes.func.isRequired,\n isSelected: PropTypes.bool.isRequired,\n }).isRequired,\n};\n\nexport default ControlledSelect;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AACtD,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,eAAe,QAAQ,YAAY;AAC5C,OAAOC,gBAAgB,MAAM,qBAAqB;AAClD,OAAOC,2BAA2B,MAAM,sCAAsC;AAE9E,SACEC,uBAAuB,EACvBC,oBAAoB,QACf,gBAAgB;AAEvB,SAASC,gBAAgBA,CAAAC,IAAA,EAAmB;EAAA,IAAlB;MAAEC;IAAa,CAAC,GAAAD,IAAA;IAANE,IAAI,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACtC,MAAM;IACJC,SAAS;IACTC,yBAAyB,EAAE,GAAGC,QAAQ;EACxC,CAAC,GAAGhB,UAAU,CAACI,gBAAgB,CAAC;EAEhC,MAAMa,cAAc,GAAGhB,WAAW,CAChC,MAAM;IACJ,IAAIS,GAAG,CAACQ,UAAU,EAAE;MAClBF,QAAQ,CAACV,uBAAuB,CAACI,GAAG,CAACS,EAAE,CAAC,CAAC;IAC3C,CAAC,MAAM;MACLH,QAAQ,CAACT,oBAAoB,CAACG,GAAG,EAAEI,SAAS,CAAC,CAAC;IAChD;EACF,CAAC,EACD,CAACA,SAAS,EAAEJ,GAAG,EAAEM,QAAQ,CAC3B,CAAC;EAED,MAAMI,YAAY,GAAGf,2BAA2B,CAACK,GAAG,CAACW,yBAAyB,CAAC,CAAC,CAAC;EAEjF,oBACEtB,KAAA,CAAAuB,aAAA;IAAKC,SAAS,EAAC;EAAoC,gBACjDxB,KAAA,CAAAuB,aAAA,CAACnB,eAAe,EAAAqB,QAAA,KACVJ,YAAY;IAChBK,QAAQ,EAAER;EAAe,GACrBN,IAAI,CACT,CACE,CAAC;AAEV;AAEAH,gBAAgB,CAACkB,SAAS,GAAG;EAC3BhB,GAAG,EAAER,SAAS,CAACyB,KAAK,CAAC;IACnBR,EAAE,EAAEjB,SAAS,CAAC0B,SAAS,CAAC,CAAC1B,SAAS,CAAC2B,MAAM,EAAE3B,SAAS,CAAC4B,MAAM,CAAC,CAAC,CAACC,UAAU;IACxEV,yBAAyB,EAAEnB,SAAS,CAAC8B,IAAI,CAACD,UAAU;IACpDb,UAAU,EAAEhB,SAAS,CAAC+B,IAAI,CAACF;EAC7B,CAAC,CAAC,CAACA;AACL,CAAC;AAED,eAAevB,gBAAgB"}
1
+ {"version":3,"file":"ControlledSelect.js","names":["React","useContext","useCallback","PropTypes","CheckboxControl","DataTableContext","useConvertIndeterminateProp","deleteSelectedRowAction","addSelectedRowAction","ControlledSelect","_ref","row","itemCount","controlledTableSelections","dispatch","toggleSelected","isSelected","id","updatedProps","getToggleRowSelectedProps","createElement","className","_extends","onChange","propTypes","shape","oneOfType","string","number","isRequired","func","bool"],"sources":["../../../src/DataTable/selection/ControlledSelect.jsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { CheckboxControl } from '../../Form';\nimport DataTableContext from '../DataTableContext';\nimport useConvertIndeterminateProp from '../utils/useConvertIndeterminateProp';\n\nimport {\n deleteSelectedRowAction,\n addSelectedRowAction,\n} from './data/actions';\n\nfunction ControlledSelect({ row }) {\n const {\n itemCount,\n controlledTableSelections: [, dispatch],\n } = useContext(DataTableContext);\n\n const toggleSelected = useCallback(\n () => {\n if (row.isSelected) {\n dispatch(deleteSelectedRowAction(row.id));\n } else {\n dispatch(addSelectedRowAction(row, itemCount));\n }\n },\n [itemCount, row, dispatch],\n );\n\n const updatedProps = useConvertIndeterminateProp(row.getToggleRowSelectedProps());\n\n return (\n <div className=\"pgn__data-table__controlled-select\">\n <CheckboxControl\n {...updatedProps}\n onChange={toggleSelected}\n />\n </div>\n );\n}\n\nControlledSelect.propTypes = {\n row: PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n getToggleRowSelectedProps: PropTypes.func.isRequired,\n isSelected: PropTypes.bool.isRequired,\n }).isRequired,\n};\n\nexport default ControlledSelect;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AACtD,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,eAAe,QAAQ,YAAY;AAC5C,OAAOC,gBAAgB,MAAM,qBAAqB;AAClD,OAAOC,2BAA2B,MAAM,sCAAsC;AAE9E,SACEC,uBAAuB,EACvBC,oBAAoB,QACf,gBAAgB;AAEvB,SAASC,gBAAgBA,CAAAC,IAAA,EAAU;EAAA,IAAT;IAAEC;EAAI,CAAC,GAAAD,IAAA;EAC/B,MAAM;IACJE,SAAS;IACTC,yBAAyB,EAAE,GAAGC,QAAQ;EACxC,CAAC,GAAGb,UAAU,CAACI,gBAAgB,CAAC;EAEhC,MAAMU,cAAc,GAAGb,WAAW,CAChC,MAAM;IACJ,IAAIS,GAAG,CAACK,UAAU,EAAE;MAClBF,QAAQ,CAACP,uBAAuB,CAACI,GAAG,CAACM,EAAE,CAAC,CAAC;IAC3C,CAAC,MAAM;MACLH,QAAQ,CAACN,oBAAoB,CAACG,GAAG,EAAEC,SAAS,CAAC,CAAC;IAChD;EACF,CAAC,EACD,CAACA,SAAS,EAAED,GAAG,EAAEG,QAAQ,CAC3B,CAAC;EAED,MAAMI,YAAY,GAAGZ,2BAA2B,CAACK,GAAG,CAACQ,yBAAyB,CAAC,CAAC,CAAC;EAEjF,oBACEnB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAC;EAAoC,gBACjDrB,KAAA,CAAAoB,aAAA,CAAChB,eAAe,EAAAkB,QAAA,KACVJ,YAAY;IAChBK,QAAQ,EAAER;EAAe,EAC1B,CACE,CAAC;AAEV;AAEAN,gBAAgB,CAACe,SAAS,GAAG;EAC3Bb,GAAG,EAAER,SAAS,CAACsB,KAAK,CAAC;IACnBR,EAAE,EAAEd,SAAS,CAACuB,SAAS,CAAC,CAACvB,SAAS,CAACwB,MAAM,EAAExB,SAAS,CAACyB,MAAM,CAAC,CAAC,CAACC,UAAU;IACxEV,yBAAyB,EAAEhB,SAAS,CAAC2B,IAAI,CAACD,UAAU;IACpDb,UAAU,EAAEb,SAAS,CAAC4B,IAAI,CAACF;EAC7B,CAAC,CAAC,CAACA;AACL,CAAC;AAED,eAAepB,gBAAgB"}
@@ -1,7 +1,4 @@
1
- const _excluded = ["rows"];
2
1
  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); }
3
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
5
2
  import React, { useContext, useMemo, useCallback } from 'react';
6
3
  import PropTypes from 'prop-types';
7
4
  import { CheckboxControl } from '../../Form';
@@ -9,9 +6,8 @@ import DataTableContext from '../DataTableContext';
9
6
  import { clearPageSelectionAction, setSelectedRowsAction } from './data/actions';
10
7
  function ControlledSelectHeader(_ref) {
11
8
  let {
12
- rows
13
- } = _ref,
14
- rest = _objectWithoutProperties(_ref, _excluded);
9
+ rows
10
+ } = _ref;
15
11
  const {
16
12
  itemCount,
17
13
  controlledTableSelections: [, dispatch],
@@ -37,7 +33,7 @@ function ControlledSelectHeader(_ref) {
37
33
  className: "pgn__data-table__controlled-select"
38
34
  }, /*#__PURE__*/React.createElement(CheckboxControl, _extends({}, toggleAllPageRowsSelectedProps, {
39
35
  onChange: toggleAllPageRowsSelected
40
- }, rest)));
36
+ })));
41
37
  }
42
38
  ControlledSelectHeader.propTypes = {
43
39
  rows: PropTypes.arrayOf(PropTypes.shape({
@@ -1 +1 @@
1
- {"version":3,"file":"ControlledSelectHeader.js","names":["React","useContext","useMemo","useCallback","PropTypes","CheckboxControl","DataTableContext","clearPageSelectionAction","setSelectedRowsAction","ControlledSelectHeader","_ref","rows","rest","_objectWithoutProperties","_excluded","itemCount","controlledTableSelections","dispatch","getToggleAllPageRowsSelectedProps","state","selectedRowIds","isAllPageRowsSelected","selectedPageRowIds","Object","keys","toggleAllPageRowsSelected","toggleAllPageRowsSelectedProps","isIndeterminate","indeterminate","createElement","className","_extends","onChange","propTypes","arrayOf","shape","id","oneOfType","string","number","isRequired"],"sources":["../../../src/DataTable/selection/ControlledSelectHeader.jsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { CheckboxControl } from '../../Form';\nimport DataTableContext from '../DataTableContext';\n\nimport {\n clearPageSelectionAction,\n setSelectedRowsAction,\n} from './data/actions';\n\nfunction ControlledSelectHeader({ rows, ...rest }) {\n const {\n itemCount,\n controlledTableSelections: [, dispatch],\n getToggleAllPageRowsSelectedProps,\n state: { selectedRowIds },\n isAllPageRowsSelected,\n } = useContext(DataTableContext);\n\n const selectedPageRowIds = useMemo(\n () => Object.keys(selectedRowIds),\n [selectedRowIds],\n );\n\n const toggleAllPageRowsSelected = useCallback(\n () => {\n if (isAllPageRowsSelected) {\n dispatch(clearPageSelectionAction(selectedPageRowIds));\n } else {\n dispatch(setSelectedRowsAction(rows, itemCount));\n }\n },\n [rows, selectedPageRowIds, isAllPageRowsSelected, dispatch, itemCount],\n );\n\n const toggleAllPageRowsSelectedProps = getToggleAllPageRowsSelectedProps();\n toggleAllPageRowsSelectedProps.isIndeterminate = toggleAllPageRowsSelectedProps.indeterminate;\n // delete unused ``indeterminate`` prop\n delete toggleAllPageRowsSelectedProps.indeterminate;\n\n return (\n <div className=\"pgn__data-table__controlled-select\">\n <CheckboxControl\n {...toggleAllPageRowsSelectedProps}\n onChange={toggleAllPageRowsSelected}\n {...rest}\n />\n </div>\n );\n}\n\nControlledSelectHeader.propTypes = {\n rows: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n })).isRequired,\n};\n\nexport default ControlledSelectHeader;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,OAAO;AAC/D,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,eAAe,QAAQ,YAAY;AAC5C,OAAOC,gBAAgB,MAAM,qBAAqB;AAElD,SACEC,wBAAwB,EACxBC,qBAAqB,QAChB,gBAAgB;AAEvB,SAASC,sBAAsBA,CAAAC,IAAA,EAAoB;EAAA,IAAnB;MAAEC;IAAc,CAAC,GAAAD,IAAA;IAANE,IAAI,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAC7C,MAAM;IACJC,SAAS;IACTC,yBAAyB,EAAE,GAAGC,QAAQ,CAAC;IACvCC,iCAAiC;IACjCC,KAAK,EAAE;MAAEC;IAAe,CAAC;IACzBC;EACF,CAAC,GAAGpB,UAAU,CAACK,gBAAgB,CAAC;EAEhC,MAAMgB,kBAAkB,GAAGpB,OAAO,CAChC,MAAMqB,MAAM,CAACC,IAAI,CAACJ,cAAc,CAAC,EACjC,CAACA,cAAc,CACjB,CAAC;EAED,MAAMK,yBAAyB,GAAGtB,WAAW,CAC3C,MAAM;IACJ,IAAIkB,qBAAqB,EAAE;MACzBJ,QAAQ,CAACV,wBAAwB,CAACe,kBAAkB,CAAC,CAAC;IACxD,CAAC,MAAM;MACLL,QAAQ,CAACT,qBAAqB,CAACG,IAAI,EAAEI,SAAS,CAAC,CAAC;IAClD;EACF,CAAC,EACD,CAACJ,IAAI,EAAEW,kBAAkB,EAAED,qBAAqB,EAAEJ,QAAQ,EAAEF,SAAS,CACvE,CAAC;EAED,MAAMW,8BAA8B,GAAGR,iCAAiC,CAAC,CAAC;EAC1EQ,8BAA8B,CAACC,eAAe,GAAGD,8BAA8B,CAACE,aAAa;EAC7F;EACA,OAAOF,8BAA8B,CAACE,aAAa;EAEnD,oBACE5B,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAC;EAAoC,gBACjD9B,KAAA,CAAA6B,aAAA,CAACxB,eAAe,EAAA0B,QAAA,KACVL,8BAA8B;IAClCM,QAAQ,EAAEP;EAA0B,GAChCb,IAAI,CACT,CACE,CAAC;AAEV;AAEAH,sBAAsB,CAACwB,SAAS,GAAG;EACjCtB,IAAI,EAAEP,SAAS,CAAC8B,OAAO,CAAC9B,SAAS,CAAC+B,KAAK,CAAC;IACtCC,EAAE,EAAEhC,SAAS,CAACiC,SAAS,CAAC,CAACjC,SAAS,CAACkC,MAAM,EAAElC,SAAS,CAACmC,MAAM,CAAC,CAAC,CAACC;EAChE,CAAC,CAAC,CAAC,CAACA;AACN,CAAC;AAED,eAAe/B,sBAAsB"}
1
+ {"version":3,"file":"ControlledSelectHeader.js","names":["React","useContext","useMemo","useCallback","PropTypes","CheckboxControl","DataTableContext","clearPageSelectionAction","setSelectedRowsAction","ControlledSelectHeader","_ref","rows","itemCount","controlledTableSelections","dispatch","getToggleAllPageRowsSelectedProps","state","selectedRowIds","isAllPageRowsSelected","selectedPageRowIds","Object","keys","toggleAllPageRowsSelected","toggleAllPageRowsSelectedProps","isIndeterminate","indeterminate","createElement","className","_extends","onChange","propTypes","arrayOf","shape","id","oneOfType","string","number","isRequired"],"sources":["../../../src/DataTable/selection/ControlledSelectHeader.jsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { CheckboxControl } from '../../Form';\nimport DataTableContext from '../DataTableContext';\n\nimport {\n clearPageSelectionAction,\n setSelectedRowsAction,\n} from './data/actions';\n\nfunction ControlledSelectHeader({ rows }) {\n const {\n itemCount,\n controlledTableSelections: [, dispatch],\n getToggleAllPageRowsSelectedProps,\n state: { selectedRowIds },\n isAllPageRowsSelected,\n } = useContext(DataTableContext);\n\n const selectedPageRowIds = useMemo(\n () => Object.keys(selectedRowIds),\n [selectedRowIds],\n );\n\n const toggleAllPageRowsSelected = useCallback(\n () => {\n if (isAllPageRowsSelected) {\n dispatch(clearPageSelectionAction(selectedPageRowIds));\n } else {\n dispatch(setSelectedRowsAction(rows, itemCount));\n }\n },\n [rows, selectedPageRowIds, isAllPageRowsSelected, dispatch, itemCount],\n );\n\n const toggleAllPageRowsSelectedProps = getToggleAllPageRowsSelectedProps();\n toggleAllPageRowsSelectedProps.isIndeterminate = toggleAllPageRowsSelectedProps.indeterminate;\n // delete unused ``indeterminate`` prop\n delete toggleAllPageRowsSelectedProps.indeterminate;\n\n return (\n <div className=\"pgn__data-table__controlled-select\">\n <CheckboxControl\n {...toggleAllPageRowsSelectedProps}\n onChange={toggleAllPageRowsSelected}\n />\n </div>\n );\n}\n\nControlledSelectHeader.propTypes = {\n rows: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n })).isRequired,\n};\n\nexport default ControlledSelectHeader;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,OAAO;AAC/D,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,eAAe,QAAQ,YAAY;AAC5C,OAAOC,gBAAgB,MAAM,qBAAqB;AAElD,SACEC,wBAAwB,EACxBC,qBAAqB,QAChB,gBAAgB;AAEvB,SAASC,sBAAsBA,CAAAC,IAAA,EAAW;EAAA,IAAV;IAAEC;EAAK,CAAC,GAAAD,IAAA;EACtC,MAAM;IACJE,SAAS;IACTC,yBAAyB,EAAE,GAAGC,QAAQ,CAAC;IACvCC,iCAAiC;IACjCC,KAAK,EAAE;MAAEC;IAAe,CAAC;IACzBC;EACF,CAAC,GAAGjB,UAAU,CAACK,gBAAgB,CAAC;EAEhC,MAAMa,kBAAkB,GAAGjB,OAAO,CAChC,MAAMkB,MAAM,CAACC,IAAI,CAACJ,cAAc,CAAC,EACjC,CAACA,cAAc,CACjB,CAAC;EAED,MAAMK,yBAAyB,GAAGnB,WAAW,CAC3C,MAAM;IACJ,IAAIe,qBAAqB,EAAE;MACzBJ,QAAQ,CAACP,wBAAwB,CAACY,kBAAkB,CAAC,CAAC;IACxD,CAAC,MAAM;MACLL,QAAQ,CAACN,qBAAqB,CAACG,IAAI,EAAEC,SAAS,CAAC,CAAC;IAClD;EACF,CAAC,EACD,CAACD,IAAI,EAAEQ,kBAAkB,EAAED,qBAAqB,EAAEJ,QAAQ,EAAEF,SAAS,CACvE,CAAC;EAED,MAAMW,8BAA8B,GAAGR,iCAAiC,CAAC,CAAC;EAC1EQ,8BAA8B,CAACC,eAAe,GAAGD,8BAA8B,CAACE,aAAa;EAC7F;EACA,OAAOF,8BAA8B,CAACE,aAAa;EAEnD,oBACEzB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAC;EAAoC,gBACjD3B,KAAA,CAAA0B,aAAA,CAACrB,eAAe,EAAAuB,QAAA,KACVL,8BAA8B;IAClCM,QAAQ,EAAEP;EAA0B,EACrC,CACE,CAAC;AAEV;AAEAb,sBAAsB,CAACqB,SAAS,GAAG;EACjCnB,IAAI,EAAEP,SAAS,CAAC2B,OAAO,CAAC3B,SAAS,CAAC4B,KAAK,CAAC;IACtCC,EAAE,EAAE7B,SAAS,CAAC8B,SAAS,CAAC,CAAC9B,SAAS,CAAC+B,MAAM,EAAE/B,SAAS,CAACgC,MAAM,CAAC,CAAC,CAACC;EAChE,CAAC,CAAC,CAAC,CAACA;AACN,CAAC;AAED,eAAe5B,sBAAsB"}
@@ -1,11 +1,3 @@
1
- const _excluded = ["className", "clearSelectionText"];
2
- 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; }
3
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
- function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
6
- function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
7
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
8
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
9
1
  import React, { useContext, useEffect } from 'react';
10
2
  import PropTypes from 'prop-types';
11
3
  import DataTableContext from '../DataTableContext';
@@ -14,10 +6,9 @@ import { clearSelectionAction, setSelectAllRowsAllPagesAction, setSelectedRowsAc
14
6
  import { getUnselectedPageRows, getRowIds } from './data/helpers';
15
7
  function ControlledSelectionStatus(_ref) {
16
8
  let {
17
- className,
18
- clearSelectionText
19
- } = _ref,
20
- rest = _objectWithoutProperties(_ref, _excluded);
9
+ className,
10
+ clearSelectionText
11
+ } = _ref;
21
12
  const {
22
13
  itemCount,
23
14
  page,
@@ -37,14 +28,14 @@ function ControlledSelectionStatus(_ref) {
37
28
  }, [isEntireTableSelected, selectedRows, itemCount, page, dispatch]);
38
29
  const numSelectedRows = isEntireTableSelected ? itemCount : selectedRows.length;
39
30
  const numSelectedRowsOnPage = (page || []).filter(r => r.isSelected).length;
40
- const selectionStatusProps = _objectSpread({
31
+ const selectionStatusProps = {
41
32
  className,
42
33
  numSelectedRows,
43
34
  numSelectedRowsOnPage,
44
35
  clearSelectionText,
45
36
  onSelectAll: () => dispatch(setSelectAllRowsAllPagesAction()),
46
37
  onClear: () => dispatch(clearSelectionAction())
47
- }, rest);
38
+ };
48
39
  return /*#__PURE__*/React.createElement(BaseSelectionStatus, selectionStatusProps);
49
40
  }
50
41
  ControlledSelectionStatus.defaultProps = {
@@ -1 +1 @@
1
- {"version":3,"file":"ControlledSelectionStatus.js","names":["React","useContext","useEffect","PropTypes","DataTableContext","BaseSelectionStatus","clearSelectionAction","setSelectAllRowsAllPagesAction","setSelectedRowsAction","getUnselectedPageRows","getRowIds","ControlledSelectionStatus","_ref","className","clearSelectionText","rest","_objectWithoutProperties","_excluded","itemCount","page","controlledTableSelections","selectedRows","isEntireTableSelected","dispatch","selectedRowIds","unselectedPageRows","length","numSelectedRows","numSelectedRowsOnPage","filter","r","isSelected","selectionStatusProps","_objectSpread","onSelectAll","onClear","createElement","defaultProps","undefined","propTypes","string","oneOfType","element"],"sources":["../../../src/DataTable/selection/ControlledSelectionStatus.jsx"],"sourcesContent":["import React, { useContext, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nimport DataTableContext from '../DataTableContext';\nimport BaseSelectionStatus from './BaseSelectionStatus';\n\nimport {\n clearSelectionAction,\n setSelectAllRowsAllPagesAction,\n setSelectedRowsAction,\n} from './data/actions';\nimport {\n getUnselectedPageRows,\n getRowIds,\n} from './data/helpers';\n\nfunction ControlledSelectionStatus({ className, clearSelectionText, ...rest }) {\n const {\n itemCount,\n page,\n controlledTableSelections: [{ selectedRows, isEntireTableSelected }, dispatch],\n } = useContext(DataTableContext);\n\n useEffect(\n () => {\n if (isEntireTableSelected) {\n const selectedRowIds = getRowIds(selectedRows);\n const unselectedPageRows = getUnselectedPageRows(selectedRowIds, page);\n if (unselectedPageRows.length) {\n dispatch(setSelectedRowsAction(unselectedPageRows, itemCount));\n }\n }\n },\n [isEntireTableSelected, selectedRows, itemCount, page, dispatch],\n );\n\n const numSelectedRows = isEntireTableSelected ? itemCount : selectedRows.length;\n const numSelectedRowsOnPage = (page || []).filter(r => r.isSelected).length;\n\n const selectionStatusProps = {\n className,\n numSelectedRows,\n numSelectedRowsOnPage,\n clearSelectionText,\n onSelectAll: () => dispatch(setSelectAllRowsAllPagesAction()),\n onClear: () => dispatch(clearSelectionAction()),\n ...rest,\n };\n return <BaseSelectionStatus {...selectionStatusProps} />;\n}\n\nControlledSelectionStatus.defaultProps = {\n className: undefined,\n clearSelectionText: undefined,\n};\n\nControlledSelectionStatus.propTypes = {\n /** A class name to append to the base element */\n className: PropTypes.string,\n /** A text that appears on the `Clear selection` button, defaults to 'Clear Selection' */\n clearSelectionText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nexport default ControlledSelectionStatus;\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,QAAQ,OAAO;AACpD,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,gBAAgB,MAAM,qBAAqB;AAClD,OAAOC,mBAAmB,MAAM,uBAAuB;AAEvD,SACEC,oBAAoB,EACpBC,8BAA8B,EAC9BC,qBAAqB,QAChB,gBAAgB;AACvB,SACEC,qBAAqB,EACrBC,SAAS,QACJ,gBAAgB;AAEvB,SAASC,yBAAyBA,CAAAC,IAAA,EAA6C;EAAA,IAA5C;MAAEC,SAAS;MAAEC;IAA4B,CAAC,GAAAF,IAAA;IAANG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACzE,MAAM;IACJC,SAAS;IACTC,IAAI;IACJC,yBAAyB,EAAE,CAAC;MAAEC,YAAY;MAAEC;IAAsB,CAAC,EAAEC,QAAQ;EAC/E,CAAC,GAAGtB,UAAU,CAACG,gBAAgB,CAAC;EAEhCF,SAAS,CACP,MAAM;IACJ,IAAIoB,qBAAqB,EAAE;MACzB,MAAME,cAAc,GAAGd,SAAS,CAACW,YAAY,CAAC;MAC9C,MAAMI,kBAAkB,GAAGhB,qBAAqB,CAACe,cAAc,EAAEL,IAAI,CAAC;MACtE,IAAIM,kBAAkB,CAACC,MAAM,EAAE;QAC7BH,QAAQ,CAACf,qBAAqB,CAACiB,kBAAkB,EAAEP,SAAS,CAAC,CAAC;MAChE;IACF;EACF,CAAC,EACD,CAACI,qBAAqB,EAAED,YAAY,EAAEH,SAAS,EAAEC,IAAI,EAAEI,QAAQ,CACjE,CAAC;EAED,MAAMI,eAAe,GAAGL,qBAAqB,GAAGJ,SAAS,GAAGG,YAAY,CAACK,MAAM;EAC/E,MAAME,qBAAqB,GAAG,CAACT,IAAI,IAAI,EAAE,EAAEU,MAAM,CAACC,CAAC,IAAIA,CAAC,CAACC,UAAU,CAAC,CAACL,MAAM;EAE3E,MAAMM,oBAAoB,GAAAC,aAAA;IACxBpB,SAAS;IACTc,eAAe;IACfC,qBAAqB;IACrBd,kBAAkB;IAClBoB,WAAW,EAAEA,CAAA,KAAMX,QAAQ,CAAChB,8BAA8B,CAAC,CAAC,CAAC;IAC7D4B,OAAO,EAAEA,CAAA,KAAMZ,QAAQ,CAACjB,oBAAoB,CAAC,CAAC;EAAC,GAC5CS,IAAI,CACR;EACD,oBAAOf,KAAA,CAAAoC,aAAA,CAAC/B,mBAAmB,EAAK2B,oBAAuB,CAAC;AAC1D;AAEArB,yBAAyB,CAAC0B,YAAY,GAAG;EACvCxB,SAAS,EAAEyB,SAAS;EACpBxB,kBAAkB,EAAEwB;AACtB,CAAC;AAED3B,yBAAyB,CAAC4B,SAAS,GAAG;EACpC;EACA1B,SAAS,EAAEV,SAAS,CAACqC,MAAM;EAC3B;EACA1B,kBAAkB,EAAEX,SAAS,CAACsC,SAAS,CAAC,CAACtC,SAAS,CAACqC,MAAM,EAAErC,SAAS,CAACuC,OAAO,CAAC;AAC/E,CAAC;AAED,eAAe/B,yBAAyB"}
1
+ {"version":3,"file":"ControlledSelectionStatus.js","names":["React","useContext","useEffect","PropTypes","DataTableContext","BaseSelectionStatus","clearSelectionAction","setSelectAllRowsAllPagesAction","setSelectedRowsAction","getUnselectedPageRows","getRowIds","ControlledSelectionStatus","_ref","className","clearSelectionText","itemCount","page","controlledTableSelections","selectedRows","isEntireTableSelected","dispatch","selectedRowIds","unselectedPageRows","length","numSelectedRows","numSelectedRowsOnPage","filter","r","isSelected","selectionStatusProps","onSelectAll","onClear","createElement","defaultProps","undefined","propTypes","string","oneOfType","element"],"sources":["../../../src/DataTable/selection/ControlledSelectionStatus.jsx"],"sourcesContent":["import React, { useContext, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nimport DataTableContext from '../DataTableContext';\nimport BaseSelectionStatus from './BaseSelectionStatus';\n\nimport {\n clearSelectionAction,\n setSelectAllRowsAllPagesAction,\n setSelectedRowsAction,\n} from './data/actions';\nimport {\n getUnselectedPageRows,\n getRowIds,\n} from './data/helpers';\n\nfunction ControlledSelectionStatus({ className, clearSelectionText }) {\n const {\n itemCount,\n page,\n controlledTableSelections: [{ selectedRows, isEntireTableSelected }, dispatch],\n } = useContext(DataTableContext);\n\n useEffect(\n () => {\n if (isEntireTableSelected) {\n const selectedRowIds = getRowIds(selectedRows);\n const unselectedPageRows = getUnselectedPageRows(selectedRowIds, page);\n if (unselectedPageRows.length) {\n dispatch(setSelectedRowsAction(unselectedPageRows, itemCount));\n }\n }\n },\n [isEntireTableSelected, selectedRows, itemCount, page, dispatch],\n );\n\n const numSelectedRows = isEntireTableSelected ? itemCount : selectedRows.length;\n const numSelectedRowsOnPage = (page || []).filter(r => r.isSelected).length;\n\n const selectionStatusProps = {\n className,\n numSelectedRows,\n numSelectedRowsOnPage,\n clearSelectionText,\n onSelectAll: () => dispatch(setSelectAllRowsAllPagesAction()),\n onClear: () => dispatch(clearSelectionAction()),\n };\n return <BaseSelectionStatus {...selectionStatusProps} />;\n}\n\nControlledSelectionStatus.defaultProps = {\n className: undefined,\n clearSelectionText: undefined,\n};\n\nControlledSelectionStatus.propTypes = {\n /** A class name to append to the base element */\n className: PropTypes.string,\n /** A text that appears on the `Clear selection` button, defaults to 'Clear Selection' */\n clearSelectionText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nexport default ControlledSelectionStatus;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,QAAQ,OAAO;AACpD,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,gBAAgB,MAAM,qBAAqB;AAClD,OAAOC,mBAAmB,MAAM,uBAAuB;AAEvD,SACEC,oBAAoB,EACpBC,8BAA8B,EAC9BC,qBAAqB,QAChB,gBAAgB;AACvB,SACEC,qBAAqB,EACrBC,SAAS,QACJ,gBAAgB;AAEvB,SAASC,yBAAyBA,CAAAC,IAAA,EAAoC;EAAA,IAAnC;IAAEC,SAAS;IAAEC;EAAmB,CAAC,GAAAF,IAAA;EAClE,MAAM;IACJG,SAAS;IACTC,IAAI;IACJC,yBAAyB,EAAE,CAAC;MAAEC,YAAY;MAAEC;IAAsB,CAAC,EAAEC,QAAQ;EAC/E,CAAC,GAAGnB,UAAU,CAACG,gBAAgB,CAAC;EAEhCF,SAAS,CACP,MAAM;IACJ,IAAIiB,qBAAqB,EAAE;MACzB,MAAME,cAAc,GAAGX,SAAS,CAACQ,YAAY,CAAC;MAC9C,MAAMI,kBAAkB,GAAGb,qBAAqB,CAACY,cAAc,EAAEL,IAAI,CAAC;MACtE,IAAIM,kBAAkB,CAACC,MAAM,EAAE;QAC7BH,QAAQ,CAACZ,qBAAqB,CAACc,kBAAkB,EAAEP,SAAS,CAAC,CAAC;MAChE;IACF;EACF,CAAC,EACD,CAACI,qBAAqB,EAAED,YAAY,EAAEH,SAAS,EAAEC,IAAI,EAAEI,QAAQ,CACjE,CAAC;EAED,MAAMI,eAAe,GAAGL,qBAAqB,GAAGJ,SAAS,GAAGG,YAAY,CAACK,MAAM;EAC/E,MAAME,qBAAqB,GAAG,CAACT,IAAI,IAAI,EAAE,EAAEU,MAAM,CAACC,CAAC,IAAIA,CAAC,CAACC,UAAU,CAAC,CAACL,MAAM;EAE3E,MAAMM,oBAAoB,GAAG;IAC3BhB,SAAS;IACTW,eAAe;IACfC,qBAAqB;IACrBX,kBAAkB;IAClBgB,WAAW,EAAEA,CAAA,KAAMV,QAAQ,CAACb,8BAA8B,CAAC,CAAC,CAAC;IAC7DwB,OAAO,EAAEA,CAAA,KAAMX,QAAQ,CAACd,oBAAoB,CAAC,CAAC;EAChD,CAAC;EACD,oBAAON,KAAA,CAAAgC,aAAA,CAAC3B,mBAAmB,EAAKwB,oBAAuB,CAAC;AAC1D;AAEAlB,yBAAyB,CAACsB,YAAY,GAAG;EACvCpB,SAAS,EAAEqB,SAAS;EACpBpB,kBAAkB,EAAEoB;AACtB,CAAC;AAEDvB,yBAAyB,CAACwB,SAAS,GAAG;EACpC;EACAtB,SAAS,EAAEV,SAAS,CAACiC,MAAM;EAC3B;EACAtB,kBAAkB,EAAEX,SAAS,CAACkC,SAAS,CAAC,CAAClC,SAAS,CAACiC,MAAM,EAAEjC,SAAS,CAACmC,OAAO,CAAC;AAC/E,CAAC;AAED,eAAe3B,yBAAyB"}
@@ -55,7 +55,7 @@
55
55
  .nav-item.show .nav-link {
56
56
  color: var(--pgn-color-nav-pills-base-link-active-text);
57
57
  background-color: var(--pgn-color-nav-pills-base-link-active-bg);
58
- border-color: var(--pgn-color-primary-base);
58
+ border-color: var(--pgn-color-nav-pills-base-link-active-border);
59
59
 
60
60
  &:focus {
61
61
  // stylelint-disable-next-line max-line-length
@@ -104,9 +104,9 @@
104
104
  background-color: var(--pgn-color-white);
105
105
 
106
106
  &:hover {
107
- // background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-hover);
107
+ background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-focus-hover);
108
108
  color: var(--pgn-color-nav-pills-inverse-link-text-active-focus);
109
- // border-color: $nav-inverse-pills-link-active-focus-hover-border-color;
109
+ border-color: var(--pgn-color-nav-pills-inverse-link-border-focus-hover);
110
110
  }
111
111
  }
112
112
  }
@@ -122,7 +122,7 @@
122
122
  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-link-border-bottom);
123
123
 
124
124
  .dropdown .dropdown-toggle {
125
- border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent;
125
+ border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-dropdown-border);
126
126
 
127
127
  &:hover {
128
128
  border-bottom: none;
@@ -156,14 +156,14 @@
156
156
  }
157
157
 
158
158
  .nav-tabs {
159
- border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border);
159
+ border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-base);
160
160
 
161
161
  button.nav-link {
162
162
  border: none;
163
163
  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-link-border);
164
164
 
165
165
  &.disabled {
166
- border-color: transparent;
166
+ border-color: var(--pgn-color-nav-tabs-base-link-disabled-border);
167
167
  }
168
168
  }
169
169
 
@@ -181,14 +181,14 @@
181
181
  }
182
182
 
183
183
  &:focus {
184
- border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent;
184
+ border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-focus);
185
185
 
186
186
  @include nav-tabs-link-focus(var(--pgn-border-color-nav-tabs-link-border-focus));
187
187
  }
188
188
 
189
189
  &.disabled {
190
190
  color: var(--pgn-color-nav-link-text-disabled);
191
- background-color: transparent;
191
+ background-color: var(--pgn-color-nav-tabs-base-text-disabled);
192
192
  }
193
193
  }
194
194
 
@@ -238,7 +238,7 @@
238
238
 
239
239
  .nav-button-group {
240
240
  .nav-link {
241
- border: solid 1px var(--pgn-color-nav-tabs-base-border);
241
+ border: solid 1px var(--pgn-color-nav-tabs-base-border-base);
242
242
 
243
243
  &:first-child {
244
244
  @include border-left-radius(var(--pgn-size-nav-pills-border-radius));
@@ -79,6 +79,14 @@
79
79
  color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover);
80
80
  background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover);
81
81
  }
82
+
83
+ &:focus {
84
+ @include nav-tabs-link-focus(
85
+ var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus),
86
+ var(--pgn-size-nav-tabs-border-radius),
87
+ var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance)
88
+ );
89
+ }
82
90
  }
83
91
  }
84
92
 
package/dist/core.css CHANGED
@@ -56,7 +56,6 @@
56
56
  --pgn-elevation-tooltip-zindex: 1070;
57
57
  --pgn-elevation-sheet-zindex-main: 1032;
58
58
  --pgn-elevation-sheet-zindex-backdrop: 1031;
59
- --pgn-elevation-progress-bar-box-shadow: none;
60
59
  --pgn-elevation-product-tour-checkpoint-zindex: 1060;
61
60
  --pgn-elevation-popover-zindex: 1060;
62
61
  --pgn-elevation-modal-zindex: 1050;
@@ -159,6 +158,7 @@
159
158
  --pgn-spacing-toast-container-gutter-lg: 1.25rem;
160
159
  --pgn-spacing-toast-padding-y: .25rem;
161
160
  --pgn-spacing-toast-padding-x: .75rem;
161
+ --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px;
162
162
  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem;
163
163
  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem;
164
164
  --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem;
@@ -187,7 +187,7 @@
187
187
  --pgn-spacing-navbar-toggler-padding-x: .75rem;
188
188
  --pgn-spacing-navbar-toggler-padding-y: .25rem;
189
189
  --pgn-spacing-navbar-padding-x-nav-link: .5rem;
190
- --pgn-spacing-nav-link-distance-to-border: .313rem;
190
+ --pgn-spacing-nav-link-distance-to-border: 4px;
191
191
  --pgn-spacing-nav-link-padding-x: 1rem;
192
192
  --pgn-spacing-nav-link-padding-y: .5rem;
193
193
  --pgn-spacing-modal-dialog-margin: 1.5rem;
@@ -238,7 +238,7 @@
238
238
  --pgn-spacing-dropdown-padding-x-base: 0;
239
239
  --pgn-spacing-dropdown-spacer: .125rem;
240
240
  --pgn-spacing-data-table-footer-position: center;
241
- --pgn-spacing-data-table-padding-cell: .75rem;
241
+ --pgn-spacing-data-table-padding-cell: .5rem .75rem;
242
242
  --pgn-spacing-data-table-padding-small: .5rem;
243
243
  --pgn-spacing-data-table-padding-y: .75rem;
244
244
  --pgn-spacing-data-table-padding-x: .75rem;
@@ -401,14 +401,13 @@
401
401
  --pgn-size-chip-icon: 1.25rem;
402
402
  --pgn-size-chip-border-radius: .25rem;
403
403
  --pgn-size-carousel-caption-width: 70%;
404
- --pgn-size-carousel-indicator-height-area-hit: 3px;
404
+ --pgn-size-carousel-indicator-height-area-hit: 10px;
405
405
  --pgn-size-carousel-indicator-height-base: 3px;
406
406
  --pgn-size-carousel-indicator-width: 30px;
407
407
  --pgn-size-carousel-control-width-icon: 20px;
408
408
  --pgn-size-carousel-control-width-base: 15%;
409
409
  --pgn-size-card-logo-height: 4.125rem;
410
410
  --pgn-size-card-logo-width: 7.25rem;
411
- --pgn-size-card-image-border-radius: .3125rem;
412
411
  --pgn-size-card-image-vertical-max-height: 140px;
413
412
  --pgn-size-card-image-horizontal-width-max: 240px;
414
413
  --pgn-size-card-focus-border-width: 2px;
@@ -618,6 +617,7 @@
618
617
  --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border));
619
618
  --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
620
619
  --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
620
+ --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
621
621
  --pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
622
622
  --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
623
623
  --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
@@ -8453,7 +8453,7 @@ p > a.brand-link[href]:not(.btn):hover, a.brand-link.inline-link:hover {
8453
8453
  /**
8454
8454
  * IMPORTANT: This file is the result of assembling design tokens
8455
8455
  * Do not edit directly
8456
- * Generated on Fri, 22 Sep 2023 08:20:17 GMT
8456
+ * Generated on Thu, 16 Nov 2023 10:44:11 GMT
8457
8457
  */
8458
8458
  /**
8459
8459
  * IMPORTANT: This file is the result of assembling design tokens
@@ -13521,7 +13521,7 @@ select.form-control {
13521
13521
  .pgn__tabs.nav-pills .nav-link .nav-item.show .nav-link {
13522
13522
  color: var(--pgn-color-nav-pills-base-link-active-text);
13523
13523
  background-color: var(--pgn-color-nav-pills-base-link-active-bg);
13524
- border-color: var(--pgn-color-primary-base);
13524
+ border-color: var(--pgn-color-nav-pills-base-link-active-border);
13525
13525
  }
13526
13526
  .pgn__tabs.nav-pills .nav-link.active:focus,
13527
13527
  .pgn__tabs.nav-pills .nav-link .nav-item.show .nav-link:focus {
@@ -13587,7 +13587,9 @@ select.form-control {
13587
13587
  }
13588
13588
  .pgn__tabs.nav-inverse-pills .nav-link.active:focus:hover,
13589
13589
  .pgn__tabs.nav-inverse-pills .nav-item.show .nav-link:focus:hover {
13590
+ background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-focus-hover);
13590
13591
  color: var(--pgn-color-nav-pills-inverse-link-text-active-focus);
13592
+ border-color: var(--pgn-color-nav-pills-inverse-link-border-focus-hover);
13591
13593
  }
13592
13594
  .pgn__tabs.nav-inverse-tabs + .tab-content {
13593
13595
  color: var(--pgn-color-nav-tabs-inverse-link-tab-content-color);
@@ -13597,7 +13599,7 @@ select.form-control {
13597
13599
  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-link-border-bottom);
13598
13600
  }
13599
13601
  .pgn__tabs.nav-inverse-tabs .nav-link .dropdown .dropdown-toggle {
13600
- border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent;
13602
+ border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-dropdown-border);
13601
13603
  }
13602
13604
  .pgn__tabs.nav-inverse-tabs .nav-link .dropdown .dropdown-toggle:hover {
13603
13605
  border-bottom: none;
@@ -13633,14 +13635,14 @@ select.form-control {
13633
13635
  background-color: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover);
13634
13636
  }
13635
13637
  .nav-tabs {
13636
- border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border);
13638
+ border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-base);
13637
13639
  }
13638
13640
  .nav-tabs button.nav-link {
13639
13641
  border: none;
13640
13642
  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-link-border);
13641
13643
  }
13642
13644
  .nav-tabs button.nav-link.disabled {
13643
- border-color: transparent;
13645
+ border-color: var(--pgn-color-nav-tabs-base-link-disabled-border);
13644
13646
  }
13645
13647
  .nav-tabs .nav-link {
13646
13648
  margin-bottom: calc(var(--pgn-size-nav-tabs-border-width) * -1);
@@ -13654,7 +13656,7 @@ select.form-control {
13654
13656
  padding-bottom: 0.125rem;
13655
13657
  }
13656
13658
  .nav-tabs .nav-link:focus {
13657
- border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent;
13659
+ border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-focus);
13658
13660
  position: relative;
13659
13661
  outline: 0;
13660
13662
  z-index: 200;
@@ -13671,7 +13673,7 @@ select.form-control {
13671
13673
  }
13672
13674
  .nav-tabs .nav-link.disabled {
13673
13675
  color: var(--pgn-color-nav-link-text-disabled);
13674
- background-color: transparent;
13676
+ background-color: var(--pgn-color-nav-tabs-base-text-disabled);
13675
13677
  }
13676
13678
  .nav-tabs .nav-link.active,
13677
13679
  .nav-tabs .nav-item.show .nav-link {
@@ -13714,7 +13716,7 @@ select.form-control {
13714
13716
  background-color: var(--pgn-color-nav-pills-base-link-active-bg);
13715
13717
  }
13716
13718
  .nav-button-group .nav-link {
13717
- border: solid 1px var(--pgn-color-nav-tabs-base-border);
13719
+ border: solid 1px var(--pgn-color-nav-tabs-base-border-base);
13718
13720
  }
13719
13721
  .nav-button-group .nav-link:first-child {
13720
13722
  border-top-left-radius: var(--pgn-size-nav-pills-border-radius);
@@ -16588,6 +16590,21 @@ select.form-control {
16588
16590
  color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover);
16589
16591
  background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover);
16590
16592
  }
16593
+ .pgn__tabs.nav-inverse-pills .pgn__tab_more.nav-link.active .dropdown .dropdown-toggle:focus {
16594
+ position: relative;
16595
+ outline: 0;
16596
+ z-index: 200;
16597
+ }
16598
+ .pgn__tabs.nav-inverse-pills .pgn__tab_more.nav-link.active .dropdown .dropdown-toggle:focus::before {
16599
+ content: "";
16600
+ position: absolute;
16601
+ top: calc(var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance) * -1);
16602
+ right: calc(var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance) * -1);
16603
+ bottom: calc(var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance) * -1);
16604
+ left: calc(var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance) * -1);
16605
+ border: solid var(--pgn-size-nav-tabs-border-width) var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus);
16606
+ border-radius: var(--pgn-size-nav-tabs-border-radius);
16607
+ }
16591
16608
  .pgn__tabs.nav-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle {
16592
16609
  padding: 0.563rem var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y);
16593
16610
  }