@pega/lists-react 9.0.0-build.6.9 → 9.0.0-build.7.0

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 (65) hide show
  1. package/lib/Core/Components/ContextMenu/ContextMenuContainer.d.ts.map +1 -1
  2. package/lib/Core/Components/ContextMenu/ContextMenuContainer.js +4 -2
  3. package/lib/Core/Components/ContextMenu/ContextMenuContainer.js.map +1 -1
  4. package/lib/Core/Components/Grouping/GroupingMenu.js +1 -1
  5. package/lib/Core/Components/Grouping/GroupingMenu.js.map +1 -1
  6. package/lib/Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.js +1 -1
  7. package/lib/Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.js.map +1 -1
  8. package/lib/Core/Components/Toolbar/hooks/useGroup/GroupRenderer.js +1 -1
  9. package/lib/Core/Components/Toolbar/hooks/useGroup/GroupRenderer.js.map +1 -1
  10. package/lib/Core/Components/Toolbar/hooks/useSort/Row.js +1 -1
  11. package/lib/Core/Components/Toolbar/hooks/useSort/Row.js.map +1 -1
  12. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.d.ts +97 -0
  13. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.d.ts.map +1 -0
  14. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.js +249 -0
  15. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.js.map +1 -0
  16. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.d.ts +22 -0
  17. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.d.ts.map +1 -0
  18. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.js +38 -0
  19. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useChildrenHeightResizeObserver.js.map +1 -0
  20. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useLoaderPositioning.d.ts +22 -0
  21. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useLoaderPositioning.d.ts.map +1 -0
  22. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useLoaderPositioning.js +45 -0
  23. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useLoaderPositioning.js.map +1 -0
  24. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.d.ts +49 -0
  25. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.d.ts.map +1 -0
  26. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.js +55 -0
  27. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.js.map +1 -0
  28. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useScroll.d.ts +21 -0
  29. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useScroll.d.ts.map +1 -0
  30. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useScroll.js +39 -0
  31. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useScroll.js.map +1 -0
  32. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useVirtualizerItemCount.d.ts +38 -0
  33. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useVirtualizerItemCount.d.ts.map +1 -0
  34. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useVirtualizerItemCount.js +62 -0
  35. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/useVirtualizerItemCount.js.map +1 -0
  36. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/utils.d.ts +112 -0
  37. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/utils.d.ts.map +1 -0
  38. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/utils.js +213 -0
  39. package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/utils.js.map +1 -0
  40. package/lib/Core/Components/Virtualise/utility.d.ts +1 -1
  41. package/lib/Core/Components/Virtualise/utility.d.ts.map +1 -1
  42. package/lib/Core/Components/Virtualise/utility.js +3 -2
  43. package/lib/Core/Components/Virtualise/utility.js.map +1 -1
  44. package/lib/Core/Hooks/useDragDrop.d.ts.map +1 -1
  45. package/lib/Core/Hooks/useDragDrop.js +2 -0
  46. package/lib/Core/Hooks/useDragDrop.js.map +1 -1
  47. package/lib/Core/Views/Table/Row.d.ts +3 -1
  48. package/lib/Core/Views/Table/Row.d.ts.map +1 -1
  49. package/lib/Core/Views/Table/Row.js +5 -3
  50. package/lib/Core/Views/Table/Row.js.map +1 -1
  51. package/lib/Core/Views/Table/StyledTableContainer.d.ts.map +1 -1
  52. package/lib/Core/Views/Table/StyledTableContainer.js +4 -0
  53. package/lib/Core/Views/Table/StyledTableContainer.js.map +1 -1
  54. package/lib/Core/Views/Table/VirtualizeWrapper.d.ts +3 -1
  55. package/lib/Core/Views/Table/VirtualizeWrapper.d.ts.map +1 -1
  56. package/lib/Core/Views/Table/VirtualizeWrapper.js +18 -2
  57. package/lib/Core/Views/Table/VirtualizeWrapper.js.map +1 -1
  58. package/lib/Core/Views/Table/index.d.ts.map +1 -1
  59. package/lib/Core/Views/Table/index.js +2 -2
  60. package/lib/Core/Views/Table/index.js.map +1 -1
  61. package/lib/Core/Views/Table/useCountChange.d.ts +10 -0
  62. package/lib/Core/Views/Table/useCountChange.d.ts.map +1 -0
  63. package/lib/Core/Views/Table/useCountChange.js +39 -0
  64. package/lib/Core/Views/Table/useCountChange.js.map +1 -0
  65. package/package.json +8 -8
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenuContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.jsx"],"names":[],"mappings":"AAwMA;;;mDA+GC;;;;;;;;;;;;sBAvTqB,YAAY"}
1
+ {"version":3,"file":"ContextMenuContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.jsx"],"names":[],"mappings":"AA4MA;;;mDA+GC;;;;;;;;;;;;sBA3TqB,YAAY"}
@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import PropTypes from 'prop-types';
3
3
  import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
4
4
  import styled, { css } from 'styled-components';
5
- import { Popover, Icon, useElement, useOuterEvent } from '@pega/cosmos-react-core';
5
+ import { mix } from 'polished';
6
+ import { Popover, Icon, useElement, useOuterEvent, tryCatch } from '@pega/cosmos-react-core';
6
7
  import { getRowContextData, getScrollerElem, isFilterApplied } from 'pega-repeating-structures-core';
7
8
  import { createClassName as cx } from '../../Utils';
8
9
  import useTranslate from '../../Hooks/useTranslate';
@@ -13,6 +14,7 @@ const StyledPopover = styled.div `
13
14
  width: 10rem;
14
15
  `;
15
16
  const StyledContent = styled.div(({ theme }) => {
17
+ const hoverColor = tryCatch(() => mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive));
16
18
  return css `
17
19
  white-space: nowrap;
18
20
  overflow: hidden;
@@ -24,7 +26,7 @@ const StyledContent = styled.div(({ theme }) => {
24
26
  margin-top: 0.125rem;
25
27
  margin-bottom: 0.125rem;
26
28
  :hover {
27
- background-color: ${theme.base.colors.blue['extra-light']};
29
+ background-color: ${hoverColor};
28
30
  box-shadow: ${theme.base.shadow['focus-inset']};
29
31
  }
30
32
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenuContainer.js","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACnF,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,EAChB,MAAM,gCAAgC,CAAC;AAExC,OAAO,EAAE,eAAe,IAAI,EAAE,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,aAAa,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE/B,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;0BAWc,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;oBAC3C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;GAEjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;iBAcK,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;;GAE5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;WAQvB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;CAE/D,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAC1B,MAAM,EACN,cAAc,EACd,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,SAAS,EACT,EAAE;IACF,MAAM,UAAU,GAAG,eAAe,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC7D,OAAO;QACL;YACE,EAAE,EAAE,aAAa;YACjB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;YACrC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,gBAAgB,CAAC;YAC5E,IAAI,EAAE,CAAC,CAAC,kBAAkB,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;YACpD,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,UAAU,EAAE,CAAC;oBACf,OAAO,YAAY,CACjB,gBAAgB,EAChB,UAAU,EACV,qBAAqB,EACrB,oBAAoB,CACrB,CAAC;gBACJ,CAAC;gBACD,OAAO,WAAW,CAChB,OAAO,EACP,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,qBAAqB,CACtB,CAAC;YACJ,CAAC;SACF;QACD;YACE,EAAE,EAAE,UAAU;YACd,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC;YAC7B,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC;SACpC;QACD;YACE,EAAE,EAAE,WAAW;YACf,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,SAAS,CAAC,YAAY,CAAC;YAC9B,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,UAAU,EACV,MAAM,EACN,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,SAAS,EACT,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,EAAE,kBAAkB,IAAI,EAAE,CAAC;IACnE,OAAO;QACL,GAAG,mBAAmB,CACpB,MAAM,EACN,cAAc,EACd,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,SAAS,CACV;QACD,GAAG,mBAAmB;KACvB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,EAAE,EAAE;IACxD,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,KAAK,CAAC;IACf,CAAC;IACD,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC;IAErC,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC;IAC3F,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,EAAE,aAAa,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,GAAG,EAAE,EACT,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,EAAE,EACX,cAAc,GAAG,EAAE,EACnB,eAAe,GAAG,GAAG,EAAE,GAAE,CAAC,EAC3B,EAAE,EAAE;IACH,MAAM,EAAE,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAChF,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,aAAa,IACZ,OAAO,EAAE,GAAG,EAAE;YACZ,eAAe,EAAE,CAAC;YAClB,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC;QAC1C,CAAC,YAED,KAAC,cAAc,cACb,MAAC,YAAY,eACV,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EAC7B,eAAM,SAAS,EAAE,EAAE,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,CAAC,YAAG,KAAK,GAAQ,IAC7C,GACA,GACH,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,SAAS,GAAG;IACnB,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACvC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,cAAc,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACjD,eAAe,EAAE,SAAS,CAAC,IAAI;CAChC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE;IAC7D,MAAM,EACJ,OAAO,EACP,IAAI,EACJ,KAAK,EAAE,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,GAAG,EAAE,EACnD,YAAY,EACZ,IAAI,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,EACpD,GAAG,IAAI,CAAC;IACT,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC;IAC1C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAC/C,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAElE,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE;QAC3C,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,aAAa,CAAC,SAAS,EAAE,YAAY,EAAE,GAAG,EAAE;QAC1C,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE;QAC1C,IAAI,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QACD,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,CAAC,EAAE;QACF,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;QACxF,IACE,yBAAyB,CAAC,aAAa,EAAE,OAAO,CAAC;YACjD,mHAAmH;YACnH,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EACtB,CAAC;YACD,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,UAAU,GAAG,aAAa,CAAC;YAC1C,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC;YACpD,cAAc,CAAC,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;YAC3F,cAAc,CAAC,cAAc,GAAG,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,EAAE,aAAa,CAAC,CAAC;YAC1F,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC;YAClE,MAAM,OAAO,GAAG,YAAY,CAC1B,aAAa,EACb,cAAc,CAAC,MAAM,EACrB,cAAc,CAAC,cAAc,EAC7B,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,SAAS,CACV,CAAC;YACF,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,YAAY,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EAED;QACE,QAAQ;QACR,OAAO;QACP,cAAc,CAAC,UAAU;QACzB,cAAc,CAAC,MAAM;QACrB,cAAc,CAAC,cAAc;QAC7B,IAAI;QACJ,iBAAiB;QACjB,gBAAgB;QAChB,eAAe;QACf,WAAW;QACX,SAAS;KACV,CACF,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,gBAAgB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC;YAClE,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;QAC5D,CAAC;QACD,OAAO,GAAG,EAAE;YACV,IAAI,YAAY,EAAE,CAAC;gBACjB,YAAY,CAAC,mBAAmB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC;gBACrE,YAAY,CAAC,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;YAC/D,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,mBAAmB,EAAE,eAAe,CAAC,CAAC,CAAC;IAEzD,IAAI,CAAC,cAAc,CAAC,UAAU,IAAI,CAAC,QAAQ,IAAI,CAAC,YAAY,EAAE,CAAC;QAC7D,IAAI,cAAc,CAAC,UAAU,IAAI,QAAQ,EAAE,CAAC;YAC1C,cAAc,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC;QACnF,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,OAAO,IAAC,MAAM,QAAC,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,CAAC,UAAU,YAClE,KAAC,aAAa,cACX,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACrB,KAAC,QAAQ,IAEP,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,cAAc,CAAC,UAAU,EACjC,MAAM,EAAE,cAAc,CAAC,MAAM,EAC7B,cAAc,EAAE,cAAc,CAAC,cAAc,EAC7C,IAAI,EAAE,IAAI,IALL,IAAI,CAAC,EAAE,CAMZ,CACH,CAAC,GACY,GACR,CACX,CAAC;AACJ,CAAC;AAED,oBAAoB,CAAC,SAAS,GAAG;IAC/B,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IAClD,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;CACvD,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef, useState, useMemo, useEffect, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Popover, Icon, useElement, useOuterEvent } from '@pega/cosmos-react-core';\nimport {\n getRowContextData,\n getScrollerElem,\n isFilterApplied\n} from 'pega-repeating-structures-core';\n\nimport { createClassName as cx } from '../../Utils';\nimport useTranslate from '../../Hooks/useTranslate';\nimport useScrollAway from '../../Hooks/useScrollAway';\n\nimport { applyFilter, quickFilterEnabled, removeFilter } from './QuickFilter';\nimport copyText from './CopyPaste';\n\nconst StyledPopover = styled.div`\n width: 10rem;\n`;\n\nconst StyledContent = styled.div(({ theme }) => {\n return css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 0.25rem;\n border-radius: 0.156rem;\n box-sizing: border-box;\n cursor: pointer;\n margin-top: 0.125rem;\n margin-bottom: 0.125rem;\n :hover {\n background-color: ${theme.base.colors.blue['extra-light']};\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n `;\n});\n\nconst StyledListItem = styled.div(({ theme }) => {\n return css`\n button {\n display: flex;\n align-items: center;\n /* stylelint-disable unit-allowed-list */\n padding: 4px 8px;\n }\n .label {\n padding-left: 14px;\n vertical-align: text-top;\n }\n .disabled {\n padding-left: 14px;\n vertical-align: text-top;\n opacity: ${theme.base['disabled-opacity']};\n }\n `;\n});\n\nconst StyledButton = styled.button`\n display: block;\n text-align: start;\n background: none;\n border: none;\n line-height: 1;\n outline: none;\n cursor: pointer;\n color: ${props => props.theme.base.palette['foreground-color']};\n border-radius: 0;\n`;\n\nconst getDefaultMenuItems = (\n column,\n rowContextData,\n targetCell,\n columns,\n filterExpression,\n actionColumnFiltering,\n actionClearFiltering,\n translate\n) => {\n const isFiltered = isFilterApplied(column, filterExpression);\n return [\n {\n id: 'quickFilter',\n icon: isFiltered ? 'times' : 'filter',\n label: isFiltered ? translate('Remove filter') : translate('Filter by this'),\n show: !!quickFilterEnabled(columns, column.field.id),\n disabled: false,\n onClick: () => {\n if (isFiltered) {\n return removeFilter(\n filterExpression,\n targetCell,\n actionColumnFiltering,\n actionClearFiltering\n );\n }\n return applyFilter(\n columns,\n targetCell,\n rowContextData,\n filterExpression,\n actionColumnFiltering\n );\n }\n },\n {\n id: 'copyText',\n icon: 'copy',\n label: translate('Copy text'),\n show: true,\n disabled: false,\n onClick: () => copyText(targetCell)\n },\n {\n id: 'pasteText',\n icon: 'documents',\n label: translate('Paste text'),\n show: true,\n disabled: true,\n onClick: () => {}\n }\n ];\n};\n\nconst getMenuItems = (\n targetCell,\n column,\n rowContextData,\n columns,\n filterExpression,\n actionColumnFiltering,\n actionClearFiltering,\n translate\n) => {\n const fieldContextOptions = column.field?.contextMenuOptions || [];\n return [\n ...getDefaultMenuItems(\n column,\n rowContextData,\n targetCell,\n columns,\n filterExpression,\n actionColumnFiltering,\n actionClearFiltering,\n translate\n ),\n ...fieldContextOptions\n ];\n};\n\nconst shouldOverrideContextMenu = (targetCell, columns) => {\n if (!targetCell) {\n return false;\n }\n const { colId } = targetCell.dataset;\n\n const { field } = columns.find(col => col.field.id.toString() === colId?.toString()) || {};\n return !(!field || field?.noContextMenu);\n};\n\nconst MenuItem = ({\n menu = {},\n target = {},\n column = {},\n rowContextData = {},\n onMenuItemClick = () => {}\n}) => {\n const { onClick = () => {}, icon, disabled = false, show = true, label } = menu;\n if (!show) {\n return null;\n }\n\n return (\n <StyledContent\n onClick={() => {\n onMenuItemClick();\n onClick(target, column, rowContextData);\n }}\n >\n <StyledListItem>\n <StyledButton>\n {icon && <Icon name={icon} />}\n <span className={cx('label', { disabled })}>{label}</span>\n </StyledButton>\n </StyledListItem>\n </StyledContent>\n );\n};\n\nMenuItem.propTypes = {\n menu: PropTypes.objectOf(PropTypes.any),\n target: PropTypes.objectOf(PropTypes.any),\n column: PropTypes.objectOf(PropTypes.any),\n rowContextData: PropTypes.objectOf(PropTypes.any),\n onMenuItemClick: PropTypes.func\n};\n\nexport default function ContextMenuContainer({ view, selector }) {\n const {\n columns,\n data,\n state: { paginationOptions, filterExpression } = {},\n domContainer,\n type: { applyFilter: applyViewFilter, clearFilter }\n } = view;\n const [translate] = useTranslate();\n const contextMenuRef = useRef({}).current;\n const [showMenu, setShowMenu] = useState(false);\n const [menuItems, setMenuItems] = useState([]);\n const [popperRef, setPopperRef] = useElement();\n const scrollerElem = useMemo(() => getScrollerElem(view), [view]);\n\n useOuterEvent('mousedown', [popperRef], () => {\n setShowMenu(false);\n });\n\n useScrollAway(popperRef, scrollerElem, () => {\n setShowMenu(false);\n });\n\n const onMenuItemClick = useCallback(event => {\n if (event && event.key !== 'Escape') {\n return;\n }\n setShowMenu(false);\n }, []);\n\n const contextMenuListener = useCallback(\n e => {\n const targetElement = selector ? e.target.closest(selector.query.toString()) : e.target;\n if (\n shouldOverrideContextMenu(targetElement, columns) &&\n // TODO: We will add \"Open link in new tab\" option in context menu once the custom context menu is made accessible.\n !e.target.closest('a')\n ) {\n e.stopPropagation();\n e.preventDefault();\n contextMenuRef.targetCell = targetElement;\n const { colId } = contextMenuRef.targetCell.dataset;\n contextMenuRef.column = columns.find(col => col.field.id.toString() === colId?.toString());\n contextMenuRef.rowContextData = getRowContextData(data, paginationOptions, targetElement);\n targetElement.classList.add('selection-border', 'disable-select');\n const options = getMenuItems(\n targetElement,\n contextMenuRef.column,\n contextMenuRef.rowContextData,\n columns,\n filterExpression,\n applyViewFilter,\n clearFilter,\n translate\n );\n setShowMenu(true);\n setMenuItems(options);\n }\n },\n\n [\n selector,\n columns,\n contextMenuRef.targetCell,\n contextMenuRef.column,\n contextMenuRef.rowContextData,\n data,\n paginationOptions,\n filterExpression,\n applyViewFilter,\n clearFilter,\n translate\n ]\n );\n\n useEffect(() => {\n if (domContainer) {\n domContainer.addEventListener('contextmenu', contextMenuListener);\n domContainer.addEventListener('keydown', onMenuItemClick);\n }\n return () => {\n if (domContainer) {\n domContainer.removeEventListener('contextmenu', contextMenuListener);\n domContainer.removeEventListener('keydown', onMenuItemClick);\n }\n };\n }, [domContainer, contextMenuListener, onMenuItemClick]);\n\n if (!contextMenuRef.targetCell || !showMenu || !domContainer) {\n if (contextMenuRef.targetCell && selector) {\n contextMenuRef.targetCell.classList.remove('selection-border', 'disable-select');\n }\n return null;\n }\n\n return (\n <Popover portal ref={setPopperRef} target={contextMenuRef.targetCell}>\n <StyledPopover>\n {menuItems.map(menu => (\n <MenuItem\n key={menu.id}\n onMenuItemClick={onMenuItemClick}\n target={contextMenuRef.targetCell}\n column={contextMenuRef.column}\n rowContextData={contextMenuRef.rowContextData}\n menu={menu}\n />\n ))}\n </StyledPopover>\n </Popover>\n );\n}\n\nContextMenuContainer.propTypes = {\n view: PropTypes.objectOf(PropTypes.any).isRequired,\n selector: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}
1
+ {"version":3,"file":"ContextMenuContainer.js","sourceRoot":"","sources":["../../../../Core/Components/ContextMenu/ContextMenuContainer.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef, useState, useMemo, useEffect, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { Popover, Icon, useElement, useOuterEvent, tryCatch } from '@pega/cosmos-react-core';\nimport {\n getRowContextData,\n getScrollerElem,\n isFilterApplied\n} from 'pega-repeating-structures-core';\n\nimport { createClassName as cx } from '../../Utils';\nimport useTranslate from '../../Hooks/useTranslate';\nimport useScrollAway from '../../Hooks/useScrollAway';\n\nimport { applyFilter, quickFilterEnabled, removeFilter } from './QuickFilter';\nimport copyText from './CopyPaste';\n\nconst StyledPopover = styled.div`\n width: 10rem;\n`;\n\nconst StyledContent = styled.div(({ theme }) => {\n const hoverColor = tryCatch(() =>\n mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n return css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 0.25rem;\n border-radius: 0.156rem;\n box-sizing: border-box;\n cursor: pointer;\n margin-top: 0.125rem;\n margin-bottom: 0.125rem;\n :hover {\n background-color: ${hoverColor};\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n `;\n});\n\nconst StyledListItem = styled.div(({ theme }) => {\n return css`\n button {\n display: flex;\n align-items: center;\n /* stylelint-disable unit-allowed-list */\n padding: 4px 8px;\n }\n .label {\n padding-left: 14px;\n vertical-align: text-top;\n }\n .disabled {\n padding-left: 14px;\n vertical-align: text-top;\n opacity: ${theme.base['disabled-opacity']};\n }\n `;\n});\n\nconst StyledButton = styled.button`\n display: block;\n text-align: start;\n background: none;\n border: none;\n line-height: 1;\n outline: none;\n cursor: pointer;\n color: ${props => props.theme.base.palette['foreground-color']};\n border-radius: 0;\n`;\n\nconst getDefaultMenuItems = (\n column,\n rowContextData,\n targetCell,\n columns,\n filterExpression,\n actionColumnFiltering,\n actionClearFiltering,\n translate\n) => {\n const isFiltered = isFilterApplied(column, filterExpression);\n return [\n {\n id: 'quickFilter',\n icon: isFiltered ? 'times' : 'filter',\n label: isFiltered ? translate('Remove filter') : translate('Filter by this'),\n show: !!quickFilterEnabled(columns, column.field.id),\n disabled: false,\n onClick: () => {\n if (isFiltered) {\n return removeFilter(\n filterExpression,\n targetCell,\n actionColumnFiltering,\n actionClearFiltering\n );\n }\n return applyFilter(\n columns,\n targetCell,\n rowContextData,\n filterExpression,\n actionColumnFiltering\n );\n }\n },\n {\n id: 'copyText',\n icon: 'copy',\n label: translate('Copy text'),\n show: true,\n disabled: false,\n onClick: () => copyText(targetCell)\n },\n {\n id: 'pasteText',\n icon: 'documents',\n label: translate('Paste text'),\n show: true,\n disabled: true,\n onClick: () => {}\n }\n ];\n};\n\nconst getMenuItems = (\n targetCell,\n column,\n rowContextData,\n columns,\n filterExpression,\n actionColumnFiltering,\n actionClearFiltering,\n translate\n) => {\n const fieldContextOptions = column.field?.contextMenuOptions || [];\n return [\n ...getDefaultMenuItems(\n column,\n rowContextData,\n targetCell,\n columns,\n filterExpression,\n actionColumnFiltering,\n actionClearFiltering,\n translate\n ),\n ...fieldContextOptions\n ];\n};\n\nconst shouldOverrideContextMenu = (targetCell, columns) => {\n if (!targetCell) {\n return false;\n }\n const { colId } = targetCell.dataset;\n\n const { field } = columns.find(col => col.field.id.toString() === colId?.toString()) || {};\n return !(!field || field?.noContextMenu);\n};\n\nconst MenuItem = ({\n menu = {},\n target = {},\n column = {},\n rowContextData = {},\n onMenuItemClick = () => {}\n}) => {\n const { onClick = () => {}, icon, disabled = false, show = true, label } = menu;\n if (!show) {\n return null;\n }\n\n return (\n <StyledContent\n onClick={() => {\n onMenuItemClick();\n onClick(target, column, rowContextData);\n }}\n >\n <StyledListItem>\n <StyledButton>\n {icon && <Icon name={icon} />}\n <span className={cx('label', { disabled })}>{label}</span>\n </StyledButton>\n </StyledListItem>\n </StyledContent>\n );\n};\n\nMenuItem.propTypes = {\n menu: PropTypes.objectOf(PropTypes.any),\n target: PropTypes.objectOf(PropTypes.any),\n column: PropTypes.objectOf(PropTypes.any),\n rowContextData: PropTypes.objectOf(PropTypes.any),\n onMenuItemClick: PropTypes.func\n};\n\nexport default function ContextMenuContainer({ view, selector }) {\n const {\n columns,\n data,\n state: { paginationOptions, filterExpression } = {},\n domContainer,\n type: { applyFilter: applyViewFilter, clearFilter }\n } = view;\n const [translate] = useTranslate();\n const contextMenuRef = useRef({}).current;\n const [showMenu, setShowMenu] = useState(false);\n const [menuItems, setMenuItems] = useState([]);\n const [popperRef, setPopperRef] = useElement();\n const scrollerElem = useMemo(() => getScrollerElem(view), [view]);\n\n useOuterEvent('mousedown', [popperRef], () => {\n setShowMenu(false);\n });\n\n useScrollAway(popperRef, scrollerElem, () => {\n setShowMenu(false);\n });\n\n const onMenuItemClick = useCallback(event => {\n if (event && event.key !== 'Escape') {\n return;\n }\n setShowMenu(false);\n }, []);\n\n const contextMenuListener = useCallback(\n e => {\n const targetElement = selector ? e.target.closest(selector.query.toString()) : e.target;\n if (\n shouldOverrideContextMenu(targetElement, columns) &&\n // TODO: We will add \"Open link in new tab\" option in context menu once the custom context menu is made accessible.\n !e.target.closest('a')\n ) {\n e.stopPropagation();\n e.preventDefault();\n contextMenuRef.targetCell = targetElement;\n const { colId } = contextMenuRef.targetCell.dataset;\n contextMenuRef.column = columns.find(col => col.field.id.toString() === colId?.toString());\n contextMenuRef.rowContextData = getRowContextData(data, paginationOptions, targetElement);\n targetElement.classList.add('selection-border', 'disable-select');\n const options = getMenuItems(\n targetElement,\n contextMenuRef.column,\n contextMenuRef.rowContextData,\n columns,\n filterExpression,\n applyViewFilter,\n clearFilter,\n translate\n );\n setShowMenu(true);\n setMenuItems(options);\n }\n },\n\n [\n selector,\n columns,\n contextMenuRef.targetCell,\n contextMenuRef.column,\n contextMenuRef.rowContextData,\n data,\n paginationOptions,\n filterExpression,\n applyViewFilter,\n clearFilter,\n translate\n ]\n );\n\n useEffect(() => {\n if (domContainer) {\n domContainer.addEventListener('contextmenu', contextMenuListener);\n domContainer.addEventListener('keydown', onMenuItemClick);\n }\n return () => {\n if (domContainer) {\n domContainer.removeEventListener('contextmenu', contextMenuListener);\n domContainer.removeEventListener('keydown', onMenuItemClick);\n }\n };\n }, [domContainer, contextMenuListener, onMenuItemClick]);\n\n if (!contextMenuRef.targetCell || !showMenu || !domContainer) {\n if (contextMenuRef.targetCell && selector) {\n contextMenuRef.targetCell.classList.remove('selection-border', 'disable-select');\n }\n return null;\n }\n\n return (\n <Popover portal ref={setPopperRef} target={contextMenuRef.targetCell}>\n <StyledPopover>\n {menuItems.map(menu => (\n <MenuItem\n key={menu.id}\n onMenuItemClick={onMenuItemClick}\n target={contextMenuRef.targetCell}\n column={contextMenuRef.column}\n rowContextData={contextMenuRef.rowContextData}\n menu={menu}\n />\n ))}\n </StyledPopover>\n </Popover>\n );\n}\n\nContextMenuContainer.propTypes = {\n view: PropTypes.objectOf(PropTypes.any).isRequired,\n selector: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}
@@ -57,7 +57,7 @@ export default function GroupingMenu({ column, finishPopOver }) {
57
57
  applyGrouping([...groups, newGroup]);
58
58
  finishPopOver();
59
59
  };
60
- return (_jsxs(StyledGroupingMenu, { children: [_jsx(Select, { label: 'Date function', labelHidden: true, "data-test-id": 'GroupingDateFuncSelector', value: selectedDateFunction || 'NONE', onChange: e => setSelectedDateFunction(e.target.value), children: allOptions.map(o => (_jsx(Option, { value: o.key, children: o.label }, o.key))) }), _jsxs(StyledFooter, { children: [_jsx(Button, { onClick: finishPopOver, children: translate('Cancel') }), _jsx(Button, { variant: 'primary', onClick: onSubmit, children: translate('Submit') })] })] }));
60
+ return (_jsxs(StyledGroupingMenu, { children: [_jsx(Select, { label: 'Date function', labelHidden: true, "data-test-id": 'GroupingDateFuncSelector', value: selectedDateFunction || 'NONE', onChange: e => setSelectedDateFunction(e.target.value), children: allOptions.map(o => (_jsx(Option, { value: o.key, children: translate(o.label) }, o.key))) }), _jsxs(StyledFooter, { children: [_jsx(Button, { onClick: finishPopOver, children: translate('Cancel') }), _jsx(Button, { variant: 'primary', onClick: onSubmit, children: translate('Submit') })] })] }));
61
61
  }
62
62
  GroupingMenu.propTypes = {
63
63
  column: PropTypes.objectOf(PropTypes.any).isRequired,
@@ -1 +1 @@
1
- {"version":3,"file":"GroupingMenu.js","sourceRoot":"","sources":["../../../../Core/Components/Grouping/GroupingMenu.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Button, Flex, Option, Select } from '@pega/cosmos-react-core';\nimport { dateFunctionLabels, FieldType } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\n\nconst StyledFooter = styled.footer`\n margin-top: 0.625rem;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n`;\n\nconst StyledGroupingMenu = styled(Flex)`\n z-index: ${props => props.theme.base['z-index'].popover};\n max-height: 35.156rem;\n padding: 0.625rem;\n overflow: auto;\n max-width: ${props => props.theme.base['content-width'].lg};\n min-width: calc(${props => props.theme.base['content-width'].lg} * 0.3125);\n display: flex;\n flex-direction: column;\n`;\nexport default function GroupingMenu({ column, finishPopOver }) {\n const [translate] = useTranslate();\n const [selectedDateFunction, setSelectedDateFunction] = useState(undefined);\n const view = column.parent;\n const {\n meta: { dateFunctions },\n state: { groups = [] },\n type: { applyGrouping }\n } = view;\n\n const fieldType = column.field.type;\n const allOptions = useMemo(() => {\n // If date functions are disabled or not applicable to the current field type\n if (!dateFunctions || ![FieldType.DATE, FieldType.DATE_TIME].includes(fieldType)) {\n return [];\n }\n\n return [\n // Date functions applicable for the given field type\n ...dateFunctions[fieldType === FieldType.DATE ? 'DATE_ONLY' : 'DATE_TIME'].map(f => ({\n key: f,\n dateFunction: f,\n label: translate(dateFunctionLabels[f])\n })),\n\n // Option for grouping directly by the field values\n // The key 'NONE' is needed to work with the Select component\n { key: 'NONE', dateFunction: undefined, label: 'Default' }\n ];\n }, [dateFunctions, fieldType, translate]);\n\n if (allOptions.length === 0) {\n return null;\n }\n\n const onSubmit = () => {\n const newGroup = {\n columnId: column.field.id,\n dateFunction: selectedDateFunction,\n level: groups.length,\n order: 'asc'\n };\n applyGrouping([...groups, newGroup]);\n finishPopOver();\n };\n\n return (\n <StyledGroupingMenu>\n <Select\n label='Date function'\n labelHidden\n data-test-id='GroupingDateFuncSelector'\n value={selectedDateFunction || 'NONE'} // Can't set up `undefined` as value\n onChange={e => setSelectedDateFunction(e.target.value)}\n >\n {allOptions.map(o => (\n <Option key={o.key} value={o.key}>\n {o.label}\n </Option>\n ))}\n </Select>\n <StyledFooter>\n <Button onClick={finishPopOver}>{translate('Cancel')}</Button>\n <Button variant='primary' onClick={onSubmit}>\n {translate('Submit')}\n </Button>\n </StyledFooter>\n </StyledGroupingMenu>\n );\n}\n\nGroupingMenu.propTypes = {\n column: PropTypes.objectOf(PropTypes.any).isRequired,\n finishPopOver: PropTypes.func.isRequired\n};\n"]}
1
+ {"version":3,"file":"GroupingMenu.js","sourceRoot":"","sources":["../../../../Core/Components/Grouping/GroupingMenu.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Button, Flex, Option, Select } from '@pega/cosmos-react-core';\nimport { dateFunctionLabels, FieldType } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\n\nconst StyledFooter = styled.footer`\n margin-top: 0.625rem;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n`;\n\nconst StyledGroupingMenu = styled(Flex)`\n z-index: ${props => props.theme.base['z-index'].popover};\n max-height: 35.156rem;\n padding: 0.625rem;\n overflow: auto;\n max-width: ${props => props.theme.base['content-width'].lg};\n min-width: calc(${props => props.theme.base['content-width'].lg} * 0.3125);\n display: flex;\n flex-direction: column;\n`;\nexport default function GroupingMenu({ column, finishPopOver }) {\n const [translate] = useTranslate();\n const [selectedDateFunction, setSelectedDateFunction] = useState(undefined);\n const view = column.parent;\n const {\n meta: { dateFunctions },\n state: { groups = [] },\n type: { applyGrouping }\n } = view;\n\n const fieldType = column.field.type;\n const allOptions = useMemo(() => {\n // If date functions are disabled or not applicable to the current field type\n if (!dateFunctions || ![FieldType.DATE, FieldType.DATE_TIME].includes(fieldType)) {\n return [];\n }\n\n return [\n // Date functions applicable for the given field type\n ...dateFunctions[fieldType === FieldType.DATE ? 'DATE_ONLY' : 'DATE_TIME'].map(f => ({\n key: f,\n dateFunction: f,\n label: translate(dateFunctionLabels[f])\n })),\n\n // Option for grouping directly by the field values\n // The key 'NONE' is needed to work with the Select component\n { key: 'NONE', dateFunction: undefined, label: 'Default' }\n ];\n }, [dateFunctions, fieldType, translate]);\n\n if (allOptions.length === 0) {\n return null;\n }\n\n const onSubmit = () => {\n const newGroup = {\n columnId: column.field.id,\n dateFunction: selectedDateFunction,\n level: groups.length,\n order: 'asc'\n };\n applyGrouping([...groups, newGroup]);\n finishPopOver();\n };\n\n return (\n <StyledGroupingMenu>\n <Select\n label='Date function'\n labelHidden\n data-test-id='GroupingDateFuncSelector'\n value={selectedDateFunction || 'NONE'} // Can't set up `undefined` as value\n onChange={e => setSelectedDateFunction(e.target.value)}\n >\n {allOptions.map(o => (\n <Option key={o.key} value={o.key}>\n {translate(o.label)}\n </Option>\n ))}\n </Select>\n <StyledFooter>\n <Button onClick={finishPopOver}>{translate('Cancel')}</Button>\n <Button variant='primary' onClick={onSubmit}>\n {translate('Submit')}\n </Button>\n </StyledFooter>\n </StyledGroupingMenu>\n );\n}\n\nGroupingMenu.propTypes = {\n column: PropTypes.objectOf(PropTypes.any).isRequired,\n finishPopOver: PropTypes.func.isRequired\n};\n"]}
@@ -44,7 +44,7 @@ const DateFunctionSelector = props => {
44
44
  // If we instead appended `group.dateFunction` to `available`, the order or options will change on further selections.
45
45
  const { available } = groupingOptions.dateFuncs[group.columnId];
46
46
  const optionsToUse = allOptions.filter(o => available.includes(o.dateFunction) || o.dateFunction === group.dateFunction);
47
- return (_jsx(StyledDateFuncWrapper, { children: _jsx(Select, { label: 'Date function', labelHidden: true, "data-testid": 'GroupingDateFuncSelector', value: group.dateFunction || 'NONE', onChange: e => onChange(e.target.value === 'NONE' ? undefined : e.target.value), children: optionsToUse.map(o => (_jsx(Option, { value: o.key, children: o.label }, o.key))) }) }));
47
+ return (_jsx(StyledDateFuncWrapper, { children: _jsx(Select, { label: 'Date function', labelHidden: true, "data-testid": 'GroupingDateFuncSelector', value: group.dateFunction || 'NONE', onChange: e => onChange(e.target.value === 'NONE' ? undefined : e.target.value), children: optionsToUse.map(o => (_jsx(Option, { value: o.key, children: translate(o.label) }, o.key))) }) }));
48
48
  };
49
49
  DateFunctionSelector.propTypes = {
50
50
  group: PropTypes.objectOf(PropTypes.any).isRequired,
@@ -1 +1 @@
1
- {"version":3,"file":"DateFunctionSelector.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { Option, Select } from '@pega/cosmos-react-core';\nimport { dateFunctionLabels, FieldType } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../../../Hooks/useTranslate';\n\nimport { getFieldType } from './utils';\n\nconst StyledDateFuncWrapper = styled.div`\n width: 9rem;\n`;\n\n/** Renders a Date-function selector in a grouping row if applicable */\nconst DateFunctionSelector = props => {\n const { group, groupingOptions, dateFunctions, columns, onChange } = props;\n const [translate] = useTranslate();\n const fieldType = getFieldType(group.columnId, columns);\n\n /**\n * Determine what all date functions (if any) can be used for the given fieldType\n * @type { import(\"./Grouping.types\").DateSelectorOption[] }\n */\n const allOptions = useMemo(() => {\n // If date functions are disabled or not applicable to the current field type\n if (!dateFunctions || ![FieldType.DATE, FieldType.DATE_TIME].includes(fieldType)) {\n return [];\n }\n\n return [\n // Date functions applicable for the given field type\n ...dateFunctions[fieldType === FieldType.DATE ? 'DATE_ONLY' : 'DATE_TIME'].map(f => ({\n key: f,\n dateFunction: f,\n label: translate(dateFunctionLabels[f])\n })),\n\n // Option for grouping directly by the field values\n // The key 'NONE' is needed to work with the Select component\n { key: 'NONE', dateFunction: undefined, label: 'Default' }\n ];\n }, [dateFunctions, fieldType, translate]);\n\n // Skip if no options are available\n // i.e. date functions are disabled or not applicable to current field type\n if (allOptions.length === 0) {\n return null;\n }\n\n // NOTE: Doing it this way to preserve the order of options.\n // If we instead appended `group.dateFunction` to `available`, the order or options will change on further selections.\n const { available } = groupingOptions.dateFuncs[group.columnId];\n const optionsToUse = allOptions.filter(\n o => available.includes(o.dateFunction) || o.dateFunction === group.dateFunction\n );\n\n return (\n <StyledDateFuncWrapper>\n <Select\n label='Date function'\n labelHidden\n data-testid='GroupingDateFuncSelector'\n value={group.dateFunction || 'NONE'} // Can't set up `undefined` as value\n onChange={e => onChange(e.target.value === 'NONE' ? undefined : e.target.value)}\n >\n {optionsToUse.map(o => (\n <Option key={o.key} value={o.key}>\n {o.label}\n </Option>\n ))}\n </Select>\n </StyledDateFuncWrapper>\n );\n};\nDateFunctionSelector.propTypes = {\n group: PropTypes.objectOf(PropTypes.any).isRequired,\n dateFunctions: PropTypes.objectOf(PropTypes.any),\n groupingOptions: PropTypes.objectOf(PropTypes.any).isRequired,\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n onChange: PropTypes.func.isRequired\n};\n\nexport default DateFunctionSelector;\n"]}
1
+ {"version":3,"file":"DateFunctionSelector.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { Option, Select } from '@pega/cosmos-react-core';\nimport { dateFunctionLabels, FieldType } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../../../Hooks/useTranslate';\n\nimport { getFieldType } from './utils';\n\nconst StyledDateFuncWrapper = styled.div`\n width: 9rem;\n`;\n\n/** Renders a Date-function selector in a grouping row if applicable */\nconst DateFunctionSelector = props => {\n const { group, groupingOptions, dateFunctions, columns, onChange } = props;\n const [translate] = useTranslate();\n const fieldType = getFieldType(group.columnId, columns);\n\n /**\n * Determine what all date functions (if any) can be used for the given fieldType\n * @type { import(\"./Grouping.types\").DateSelectorOption[] }\n */\n const allOptions = useMemo(() => {\n // If date functions are disabled or not applicable to the current field type\n if (!dateFunctions || ![FieldType.DATE, FieldType.DATE_TIME].includes(fieldType)) {\n return [];\n }\n\n return [\n // Date functions applicable for the given field type\n ...dateFunctions[fieldType === FieldType.DATE ? 'DATE_ONLY' : 'DATE_TIME'].map(f => ({\n key: f,\n dateFunction: f,\n label: translate(dateFunctionLabels[f])\n })),\n\n // Option for grouping directly by the field values\n // The key 'NONE' is needed to work with the Select component\n { key: 'NONE', dateFunction: undefined, label: 'Default' }\n ];\n }, [dateFunctions, fieldType, translate]);\n\n // Skip if no options are available\n // i.e. date functions are disabled or not applicable to current field type\n if (allOptions.length === 0) {\n return null;\n }\n\n // NOTE: Doing it this way to preserve the order of options.\n // If we instead appended `group.dateFunction` to `available`, the order or options will change on further selections.\n const { available } = groupingOptions.dateFuncs[group.columnId];\n const optionsToUse = allOptions.filter(\n o => available.includes(o.dateFunction) || o.dateFunction === group.dateFunction\n );\n\n return (\n <StyledDateFuncWrapper>\n <Select\n label='Date function'\n labelHidden\n data-testid='GroupingDateFuncSelector'\n value={group.dateFunction || 'NONE'} // Can't set up `undefined` as value\n onChange={e => onChange(e.target.value === 'NONE' ? undefined : e.target.value)}\n >\n {optionsToUse.map(o => (\n <Option key={o.key} value={o.key}>\n {translate(o.label)}\n </Option>\n ))}\n </Select>\n </StyledDateFuncWrapper>\n );\n};\nDateFunctionSelector.propTypes = {\n group: PropTypes.objectOf(PropTypes.any).isRequired,\n dateFunctions: PropTypes.objectOf(PropTypes.any),\n groupingOptions: PropTypes.objectOf(PropTypes.any).isRequired,\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n onChange: PropTypes.func.isRequired\n};\n\nexport default DateFunctionSelector;\n"]}
@@ -101,7 +101,7 @@ const GroupRenderer = ({ appliedGroups, groupingOptions, setGroups, columns, dat
101
101
  itemGap: 0.5
102
102
  }, children: [_jsx(StyledDragHandle, { forwardedAs: 'div', role: 'button', icon: true, variant: 'simple', compact: true, ...dragProps, children: _jsx(Icon, { name: 'drag' }) }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(FieldSelector, { label: t('field'), labelHidden: true, columns: columns?.filter(c => c.field.grouping &&
103
103
  (c.field.id.toString() === group.columnId.toString() ||
104
- !groupingOptions.exhaustedFields.has(c.field.id))), value: group.columnId, disabled: !!group.customFunction, onChange: (newID) => handleColumnChange(group, index, newID), fieldProp: 'id' }) }), _jsx(DateFunctionSelector, { group: group, groupingOptions: groupingOptions, dateFunctions: dateFunctions, columns: columns, onChange: (newFunc) => handleDateFuncChange(group, index, newFunc) })] }) }), _jsx(Button, { "aria-label": t('delete_group'), icon: true, variant: 'simple', onClick: () => removeGroup(index), children: _jsx(Icon, { name: 'trash' }) })] })))) }), _jsx("div", { children: _jsx(Button, { variant: 'link', "aria-label": t('add_group'), onClick: addRow, children: _jsxs(Flex, { container: {
104
+ !groupingOptions.exhaustedFields.has(c.field.id))), value: group.columnId, disabled: !!group.customFunction, onChange: (newID) => handleColumnChange(group, index, newID), fieldProp: 'id' }) }), _jsx(DateFunctionSelector, { group: group, groupingOptions: groupingOptions, dateFunctions: dateFunctions, columns: columns, onChange: (newFunc) => handleDateFuncChange(group, index, newFunc) })] }) }), _jsx(Button, { icon: true, variant: 'simple', onClick: () => removeGroup(index), label: t('delete_group'), children: _jsx(Icon, { name: 'trash' }) })] })))) }), _jsx("div", { children: _jsx(Button, { variant: 'link', "aria-label": t('add_group'), onClick: addRow, children: _jsxs(Flex, { container: {
105
105
  inline: true,
106
106
  alignItems: 'start',
107
107
  gap: 1
@@ -1 +1 @@
1
- {"version":3,"file":"GroupRenderer.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/GroupRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled from 'styled-components';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button, createUID, Flex, Icon, useI18n } from '@pega/cosmos-react-core';\nimport { FieldType, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Group } from 'pega-repeating-structures-core/types/State.types';\n\nimport useRowFocus from '../useRowFocus';\nimport useDragDrop from '../../../../Hooks/useDragDrop';\nimport FieldSelector from '../../FieldSelector';\nimport type { GroupingOptions } from '../../Grouping.types';\n\nimport { getFieldType } from './utils';\nimport DateFunctionSelector from './DateFunctionSelector';\nimport type { AppliedGroup } from './useGroup';\n\nconst DropSelector = '[data-drop]';\n\nconst StyledDragHandle = styled(Button)`\n cursor: grab;\n`;\n\ninterface GroupRendererProps {\n appliedGroups: AppliedGroup[];\n groupingOptions: GroupingOptions;\n setGroups: (groups: (Group | { id: string })[]) => void;\n columns: RsCoreTypes.Column[];\n dateFunctions: RsCoreTypes.Meta['dateFunctions'];\n}\n\nconst GroupRenderer = ({\n appliedGroups,\n groupingOptions,\n setGroups,\n columns,\n dateFunctions\n}: GroupRendererProps) => {\n const t = useI18n();\n const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();\n\n const dragDropRef = useRef<HTMLDivElement>(null);\n const getAnimationSelector = useCallback((target: Element) => target.closest(DropSelector), []);\n const onDrop = useCallback(\n (dest: Element, src: Element) => {\n const dropIndex = Number(dest.getAttribute('data-index'));\n const dragIndex = Number(src.getAttribute('data-index'));\n if (dragIndex !== dropIndex) {\n const existingGroups = appliedGroups.map(v => ({ ...v }));\n const dragGroup = existingGroups.splice(dragIndex, 1)[0];\n existingGroups.splice(dropIndex, 0, dragGroup);\n setGroups(existingGroups);\n }\n },\n [appliedGroups, setGroups]\n );\n const { dragProps, dropProps } = useDragDrop({\n context: dragDropRef,\n getAnimationSelector,\n getGhostImageSelector: getAnimationSelector,\n getDraggedObject: getAnimationSelector,\n onDrop\n });\n\n const removeGroup = useCallback(\n (index: number) => {\n const existingGroups = appliedGroups.map(v => ({ ...v }));\n existingGroups.splice(index, 1);\n setGroups(existingGroups);\n\n if (existingGroups.length > 0)\n setFocusRowId(\n index === appliedGroups.length - 1\n ? existingGroups[index - 1].id\n : existingGroups[index].id\n );\n },\n [appliedGroups, setGroups, setFocusRowId]\n );\n\n const handleColumnChange = useCallback(\n (group: Group, index: number, newID: string) => {\n if (newID === group.columnId) return; // Ignore re-selecting the same\n const updatedGroup: Group = {\n ...group,\n columnId: newID,\n dateFunction: undefined // Reset for non-date/time fields\n };\n\n // For date/datetime field, pick a date function by default (if enabled)\n const fieldType = getFieldType(newID, columns);\n if (dateFunctions && (fieldType === FieldType.DATE || fieldType === FieldType.DATE_TIME)) {\n updatedGroup.dateFunction = groupingOptions.dateFuncs[newID]\n ? groupingOptions.dateFuncs[newID].available[0] // If the field is already picked before\n : groupingOptions.dateGroupVariants[fieldType][0]; // When picking the field for the first time\n }\n\n setGroups([\n ...appliedGroups.slice(0, index),\n updatedGroup,\n ...appliedGroups.slice(index + 1)\n ]);\n },\n [appliedGroups, groupingOptions, setGroups, dateFunctions, columns]\n );\n\n const handleDateFuncChange = useCallback(\n (group: Group, index: number, newFunc: Group['dateFunction']) => {\n if (newFunc === group.dateFunction) return; // Ignore re-selecting the same\n const updatedGroup = { ...group, dateFunction: newFunc };\n setGroups([\n ...appliedGroups.slice(0, index),\n updatedGroup,\n ...appliedGroups.slice(index + 1)\n ]);\n },\n [setGroups, appliedGroups]\n );\n\n const addRow = useCallback(() => {\n const newRow = { id: createUID(), columnId: '', order: 'asc' };\n const existingGroups = [...appliedGroups, newRow];\n setGroups(existingGroups);\n setFocusRowId(newRow.id);\n }, [appliedGroups, setGroups, setFocusRowId]);\n\n useEffect(() => {\n if (!appliedGroups.length) {\n addRow();\n }\n }, [appliedGroups, addRow]);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }} key='grouping'>\n <Flex container={{ direction: 'column', gap: 1 }} className='group-content' ref={dragDropRef}>\n {appliedGroups.map((group, index) => (\n <div {...dropProps} data-index={index} key={group.id}>\n <Flex\n container={{\n justify: 'between',\n alignItems: 'center',\n direction: 'row',\n wrap: 'nowrap',\n itemGap: 0.5\n }}\n ref={appliedGroups[index].id === focusRowId ? focusRowRef : null}\n >\n <Flex item={{ grow: 1 }}>\n <Flex\n container={{\n justify: 'start',\n alignItems: 'center',\n direction: 'row',\n wrap: 'nowrap',\n itemGap: 0.5\n }}\n >\n <StyledDragHandle\n forwardedAs='div'\n role='button'\n icon\n variant='simple'\n compact\n {...dragProps}\n >\n <Icon name='drag' />\n </StyledDragHandle>\n <Flex item={{ grow: 1 }}>\n <FieldSelector\n label={t('field')}\n labelHidden\n columns={columns?.filter(\n c =>\n c.field.grouping &&\n (c.field.id.toString() === group.columnId.toString() ||\n !groupingOptions.exhaustedFields.has(c.field.id))\n )}\n value={group.columnId}\n disabled={!!group.customFunction}\n onChange={(newID: string) => handleColumnChange(group, index, newID)}\n fieldProp='id'\n />\n </Flex>\n <DateFunctionSelector\n group={group}\n groupingOptions={groupingOptions}\n dateFunctions={dateFunctions}\n columns={columns}\n onChange={(newFunc: Group['dateFunction']) =>\n handleDateFuncChange(group, index, newFunc)\n }\n />\n </Flex>\n </Flex>\n <Button\n aria-label={t('delete_group')}\n icon\n variant='simple'\n onClick={() => removeGroup(index)}\n >\n <Icon name='trash' />\n </Button>\n </Flex>\n </div>\n ))}\n </Flex>\n <div>\n <Button variant='link' aria-label={t('add_group')} onClick={addRow}>\n <Flex\n container={{\n inline: true,\n alignItems: 'start',\n gap: 1\n }}\n as='span'\n >\n <Icon name='plus' />\n <span>{t('add')}</span>\n </Flex>\n </Button>\n </div>\n </Flex>\n );\n};\n\nexport default GroupRenderer;\n"]}
1
+ {"version":3,"file":"GroupRenderer.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/GroupRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled from 'styled-components';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button, createUID, Flex, Icon, useI18n } from '@pega/cosmos-react-core';\nimport { FieldType, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Group } from 'pega-repeating-structures-core/types/State.types';\n\nimport useRowFocus from '../useRowFocus';\nimport useDragDrop from '../../../../Hooks/useDragDrop';\nimport FieldSelector from '../../FieldSelector';\nimport type { GroupingOptions } from '../../Grouping.types';\n\nimport { getFieldType } from './utils';\nimport DateFunctionSelector from './DateFunctionSelector';\nimport type { AppliedGroup } from './useGroup';\n\nconst DropSelector = '[data-drop]';\n\nconst StyledDragHandle = styled(Button)`\n cursor: grab;\n`;\n\ninterface GroupRendererProps {\n appliedGroups: AppliedGroup[];\n groupingOptions: GroupingOptions;\n setGroups: (groups: (Group | { id: string })[]) => void;\n columns: RsCoreTypes.Column[];\n dateFunctions: RsCoreTypes.Meta['dateFunctions'];\n}\n\nconst GroupRenderer = ({\n appliedGroups,\n groupingOptions,\n setGroups,\n columns,\n dateFunctions\n}: GroupRendererProps) => {\n const t = useI18n();\n const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();\n\n const dragDropRef = useRef<HTMLDivElement>(null);\n const getAnimationSelector = useCallback((target: Element) => target.closest(DropSelector), []);\n const onDrop = useCallback(\n (dest: Element, src: Element) => {\n const dropIndex = Number(dest.getAttribute('data-index'));\n const dragIndex = Number(src.getAttribute('data-index'));\n if (dragIndex !== dropIndex) {\n const existingGroups = appliedGroups.map(v => ({ ...v }));\n const dragGroup = existingGroups.splice(dragIndex, 1)[0];\n existingGroups.splice(dropIndex, 0, dragGroup);\n setGroups(existingGroups);\n }\n },\n [appliedGroups, setGroups]\n );\n const { dragProps, dropProps } = useDragDrop({\n context: dragDropRef,\n getAnimationSelector,\n getGhostImageSelector: getAnimationSelector,\n getDraggedObject: getAnimationSelector,\n onDrop\n });\n\n const removeGroup = useCallback(\n (index: number) => {\n const existingGroups = appliedGroups.map(v => ({ ...v }));\n existingGroups.splice(index, 1);\n setGroups(existingGroups);\n\n if (existingGroups.length > 0)\n setFocusRowId(\n index === appliedGroups.length - 1\n ? existingGroups[index - 1].id\n : existingGroups[index].id\n );\n },\n [appliedGroups, setGroups, setFocusRowId]\n );\n\n const handleColumnChange = useCallback(\n (group: Group, index: number, newID: string) => {\n if (newID === group.columnId) return; // Ignore re-selecting the same\n const updatedGroup: Group = {\n ...group,\n columnId: newID,\n dateFunction: undefined // Reset for non-date/time fields\n };\n\n // For date/datetime field, pick a date function by default (if enabled)\n const fieldType = getFieldType(newID, columns);\n if (dateFunctions && (fieldType === FieldType.DATE || fieldType === FieldType.DATE_TIME)) {\n updatedGroup.dateFunction = groupingOptions.dateFuncs[newID]\n ? groupingOptions.dateFuncs[newID].available[0] // If the field is already picked before\n : groupingOptions.dateGroupVariants[fieldType][0]; // When picking the field for the first time\n }\n\n setGroups([\n ...appliedGroups.slice(0, index),\n updatedGroup,\n ...appliedGroups.slice(index + 1)\n ]);\n },\n [appliedGroups, groupingOptions, setGroups, dateFunctions, columns]\n );\n\n const handleDateFuncChange = useCallback(\n (group: Group, index: number, newFunc: Group['dateFunction']) => {\n if (newFunc === group.dateFunction) return; // Ignore re-selecting the same\n const updatedGroup = { ...group, dateFunction: newFunc };\n setGroups([\n ...appliedGroups.slice(0, index),\n updatedGroup,\n ...appliedGroups.slice(index + 1)\n ]);\n },\n [setGroups, appliedGroups]\n );\n\n const addRow = useCallback(() => {\n const newRow = { id: createUID(), columnId: '', order: 'asc' };\n const existingGroups = [...appliedGroups, newRow];\n setGroups(existingGroups);\n setFocusRowId(newRow.id);\n }, [appliedGroups, setGroups, setFocusRowId]);\n\n useEffect(() => {\n if (!appliedGroups.length) {\n addRow();\n }\n }, [appliedGroups, addRow]);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }} key='grouping'>\n <Flex container={{ direction: 'column', gap: 1 }} className='group-content' ref={dragDropRef}>\n {appliedGroups.map((group, index) => (\n <div {...dropProps} data-index={index} key={group.id}>\n <Flex\n container={{\n justify: 'between',\n alignItems: 'center',\n direction: 'row',\n wrap: 'nowrap',\n itemGap: 0.5\n }}\n ref={appliedGroups[index].id === focusRowId ? focusRowRef : null}\n >\n <Flex item={{ grow: 1 }}>\n <Flex\n container={{\n justify: 'start',\n alignItems: 'center',\n direction: 'row',\n wrap: 'nowrap',\n itemGap: 0.5\n }}\n >\n <StyledDragHandle\n forwardedAs='div'\n role='button'\n icon\n variant='simple'\n compact\n {...dragProps}\n >\n <Icon name='drag' />\n </StyledDragHandle>\n <Flex item={{ grow: 1 }}>\n <FieldSelector\n label={t('field')}\n labelHidden\n columns={columns?.filter(\n c =>\n c.field.grouping &&\n (c.field.id.toString() === group.columnId.toString() ||\n !groupingOptions.exhaustedFields.has(c.field.id))\n )}\n value={group.columnId}\n disabled={!!group.customFunction}\n onChange={(newID: string) => handleColumnChange(group, index, newID)}\n fieldProp='id'\n />\n </Flex>\n <DateFunctionSelector\n group={group}\n groupingOptions={groupingOptions}\n dateFunctions={dateFunctions}\n columns={columns}\n onChange={(newFunc: Group['dateFunction']) =>\n handleDateFuncChange(group, index, newFunc)\n }\n />\n </Flex>\n </Flex>\n <Button\n icon\n variant='simple'\n onClick={() => removeGroup(index)}\n label={t('delete_group')}\n >\n <Icon name='trash' />\n </Button>\n </Flex>\n </div>\n ))}\n </Flex>\n <div>\n <Button variant='link' aria-label={t('add_group')} onClick={addRow}>\n <Flex\n container={{\n inline: true,\n alignItems: 'start',\n gap: 1\n }}\n as='span'\n >\n <Icon name='plus' />\n <span>{t('add')}</span>\n </Flex>\n </Button>\n </div>\n </Flex>\n );\n};\n\nexport default GroupRenderer;\n"]}
@@ -35,7 +35,7 @@ const Row = ({ updateSortItemId, updateSortItemOrder, columns, removeSortItem, s
35
35
  if (o) {
36
36
  updateSortItemOrder(e, sequence, o.id);
37
37
  }
38
- }, children: [_jsx("option", { value: '', children: translate('Select...') }), validSortOrders.map((v, i) => (_jsx(Option, { value: v.label, children: translate(v.label) }, keyFrom(v.label, i))))] }) }), _jsx(Flex, { item: true, children: _jsx(Button, { "aria-label": translate('Remove sort'), icon: true, variant: 'simple', onClick: () => removeSortItem(index, order), children: _jsx(Icon, { name: 'trash' }) }) })] }) }));
38
+ }, children: [_jsx("option", { value: '', children: translate('Select...') }), validSortOrders.map((v, i) => (_jsx(Option, { value: v.label, children: translate(v.label) }, keyFrom(v.label, i))))] }) }), _jsx(Flex, { item: true, children: _jsx(Button, { icon: true, variant: 'simple', onClick: () => removeSortItem(index, order), label: translate('Remove sort'), children: _jsx(Icon, { name: 'trash' }) }) })] }) }));
39
39
  };
40
40
  Row.propTypes = {
41
41
  updateSortItemId: PropTypes.func.isRequired,
@@ -1 +1 @@
1
- {"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/Row.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\nimport { Button, defaultThemeProp, Flex, Icon, Option, Select } from '@pega/cosmos-react-core';\n\nimport FieldSelector from '../../FieldSelector';\nimport { keyFrom } from '../../../../Utils';\nimport useTranslate from '../../../../Hooks/useTranslate';\n\nimport { getValidSortColumnsInRow, getValidSortOrders } from './utils';\n\nconst StyledDragHandle = styled(Button)(({ theme }) => {\n return css`\n cursor: grab;\n margin-block: calc(${theme.base.spacing} * 0.5);\n\n @media (pointer: coarse) {\n margin-block: calc(${theme.base.spacing} * 1.25);\n }\n `;\n});\n\nStyledDragHandle.defaultProps = defaultThemeProp;\n\nconst Row = ({\n updateSortItemId,\n updateSortItemOrder,\n columns,\n removeSortItem,\n sortItems,\n index,\n id,\n order,\n sequence,\n dragProps,\n dropProps,\n focusRowRef\n}) => {\n const [translate] = useTranslate();\n const validSortColumnsInRow = getValidSortColumnsInRow(columns, sortItems, id);\n if (!validSortColumnsInRow || !validSortColumnsInRow.length) return null;\n const validSortOrders = getValidSortOrders();\n const { label } = validSortOrders.find(v => v.id === order) || {};\n\n return (\n <div {...dropProps} data-sequence={sequence}>\n <Flex\n container={{\n justify: 'between',\n alignItems: 'end',\n direction: 'row',\n wrap: 'no-wrap',\n itemGap: 0.5\n }}\n ref={focusRowRef}\n >\n <StyledDragHandle\n forwardedAs='div'\n role='button'\n icon\n variant='simple'\n compact\n {...dragProps}\n >\n <Icon name='drag' />\n </StyledDragHandle>\n <Flex item={{ grow: 1 }}>\n <FieldSelector\n label={translate('Field')}\n columns={validSortColumnsInRow}\n value={id}\n onChange={newID => updateSortItemId(newID, sequence)}\n fieldProp='id'\n />\n </Flex>\n <Flex item={{ grow: 1 }}>\n <Select\n label={translate('Sort order')}\n className='select-sorts'\n data-testid='SortSelector'\n value={label}\n onChange={e => {\n const o = validSortOrders.find(v => v.label === e.target.value);\n if (o) {\n updateSortItemOrder(e, sequence, o.id);\n }\n }}\n >\n <option value=''>{translate('Select...')}</option>\n {validSortOrders.map((v, i) => (\n <Option key={keyFrom(v.label, i)} value={v.label}>\n {translate(v.label)}\n </Option>\n ))}\n </Select>\n </Flex>\n <Flex item>\n <Button\n aria-label={translate('Remove sort')}\n icon\n variant='simple'\n onClick={() => removeSortItem(index, order)}\n >\n <Icon name='trash' />\n </Button>\n </Flex>\n </Flex>\n </div>\n );\n};\n\nRow.propTypes = {\n updateSortItemId: PropTypes.func.isRequired,\n updateSortItemOrder: PropTypes.func.isRequired,\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n removeSortItem: PropTypes.func.isRequired,\n sortItems: PropTypes.arrayOf(PropTypes.any).isRequired,\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n index: PropTypes.number.isRequired,\n order: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n sequence: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n dragProps: PropTypes.objectOf(PropTypes.any).isRequired,\n dropProps: PropTypes.objectOf(PropTypes.any).isRequired,\n focusRowRef: PropTypes.objectOf(PropTypes.any)\n};\n\nRow.displayName = 'Row';\n\nexport default Row;\n"]}
1
+ {"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/Row.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\nimport { Button, defaultThemeProp, Flex, Icon, Option, Select } from '@pega/cosmos-react-core';\n\nimport FieldSelector from '../../FieldSelector';\nimport { keyFrom } from '../../../../Utils';\nimport useTranslate from '../../../../Hooks/useTranslate';\n\nimport { getValidSortColumnsInRow, getValidSortOrders } from './utils';\n\nconst StyledDragHandle = styled(Button)(({ theme }) => {\n return css`\n cursor: grab;\n margin-block: calc(${theme.base.spacing} * 0.5);\n\n @media (pointer: coarse) {\n margin-block: calc(${theme.base.spacing} * 1.25);\n }\n `;\n});\n\nStyledDragHandle.defaultProps = defaultThemeProp;\n\nconst Row = ({\n updateSortItemId,\n updateSortItemOrder,\n columns,\n removeSortItem,\n sortItems,\n index,\n id,\n order,\n sequence,\n dragProps,\n dropProps,\n focusRowRef\n}) => {\n const [translate] = useTranslate();\n const validSortColumnsInRow = getValidSortColumnsInRow(columns, sortItems, id);\n if (!validSortColumnsInRow || !validSortColumnsInRow.length) return null;\n const validSortOrders = getValidSortOrders();\n const { label } = validSortOrders.find(v => v.id === order) || {};\n\n return (\n <div {...dropProps} data-sequence={sequence}>\n <Flex\n container={{\n justify: 'between',\n alignItems: 'end',\n direction: 'row',\n wrap: 'no-wrap',\n itemGap: 0.5\n }}\n ref={focusRowRef}\n >\n <StyledDragHandle\n forwardedAs='div'\n role='button'\n icon\n variant='simple'\n compact\n {...dragProps}\n >\n <Icon name='drag' />\n </StyledDragHandle>\n <Flex item={{ grow: 1 }}>\n <FieldSelector\n label={translate('Field')}\n columns={validSortColumnsInRow}\n value={id}\n onChange={newID => updateSortItemId(newID, sequence)}\n fieldProp='id'\n />\n </Flex>\n <Flex item={{ grow: 1 }}>\n <Select\n label={translate('Sort order')}\n className='select-sorts'\n data-testid='SortSelector'\n value={label}\n onChange={e => {\n const o = validSortOrders.find(v => v.label === e.target.value);\n if (o) {\n updateSortItemOrder(e, sequence, o.id);\n }\n }}\n >\n <option value=''>{translate('Select...')}</option>\n {validSortOrders.map((v, i) => (\n <Option key={keyFrom(v.label, i)} value={v.label}>\n {translate(v.label)}\n </Option>\n ))}\n </Select>\n </Flex>\n <Flex item>\n <Button\n icon\n variant='simple'\n onClick={() => removeSortItem(index, order)}\n label={translate('Remove sort')}\n >\n <Icon name='trash' />\n </Button>\n </Flex>\n </Flex>\n </div>\n );\n};\n\nRow.propTypes = {\n updateSortItemId: PropTypes.func.isRequired,\n updateSortItemOrder: PropTypes.func.isRequired,\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n removeSortItem: PropTypes.func.isRequired,\n sortItems: PropTypes.arrayOf(PropTypes.any).isRequired,\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n index: PropTypes.number.isRequired,\n order: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n sequence: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n dragProps: PropTypes.objectOf(PropTypes.any).isRequired,\n dropProps: PropTypes.objectOf(PropTypes.any).isRequired,\n focusRowRef: PropTypes.objectOf(PropTypes.any)\n};\n\nRow.displayName = 'Row';\n\nexport default Row;\n"]}
@@ -0,0 +1,97 @@
1
+ import type { ReactNode } from 'react';
2
+ export interface ItemsHeight {
3
+ [index: number]: number;
4
+ }
5
+ export interface LoadedDataRange {
6
+ startIndex?: number;
7
+ endIndex?: number;
8
+ }
9
+ export interface VariableHeightVirtualizerProps {
10
+ /** Unique identifier for the virtualizer instance. */
11
+ id: string;
12
+ /** The React children elements to render inside the virtualizer. */
13
+ children: ReactNode;
14
+ /** Callback to fetch paginated data. */
15
+ apiCallback: (params: {
16
+ startIndex: number;
17
+ endIndex: number;
18
+ id: string;
19
+ }, options: {
20
+ takeLatestAction: boolean;
21
+ }) => void;
22
+ /** Indicates if data is currently being fetched. */
23
+ isDataFetching: boolean;
24
+ /** Range of data that is already loaded. */
25
+ loadedDataRange: LoadedDataRange;
26
+ /** Default height for items if not measured. */
27
+ defaultItemHeight?: number;
28
+ /** Total number of items in the list. */
29
+ totalItemCount?: number | null;
30
+ /** Number of items to buffer before/after the visible range. */
31
+ buffer?: number;
32
+ /** Maximum number of items to render at once. */
33
+ maxItemsToPaint?: number;
34
+ /** Function to render the header. */
35
+ headerRenderer?: (() => ReactNode) | null;
36
+ /** Function to render the footer. */
37
+ footerRenderer?: (() => ReactNode) | null;
38
+ /** Function to render the no-result state. */
39
+ noResultRenderer?: (() => ReactNode) | null;
40
+ /** CSS class for the item container. */
41
+ itemContainerClass?: string;
42
+ /** Maximum height for the view container. */
43
+ viewMaxHeight?: string | number | null;
44
+ /** Minimum height for the view container. */
45
+ minHeight?: string | number;
46
+ /** Minimum height when no items are rendered. */
47
+ minHeightWhenNoItemsRendered?: string;
48
+ }
49
+ interface VirtualizerRef {
50
+ /** Scrolls the parent container to the top. */
51
+ scrollToTop: () => void;
52
+ /** Returns the parent container element. */
53
+ getParentContainer: () => HTMLElement | null;
54
+ /** Returns the buffer container element. */
55
+ getBufferContainer: () => HTMLElement | null;
56
+ /** Triggers a count change notification. */
57
+ notifyCountChange: () => void;
58
+ }
59
+ /**
60
+ * Flow:
61
+ * 1. First load/user scrolls/screen size change/column resize
62
+ * 2. Calculate new pagination range based on scroll position or if view not filled
63
+ * 3. Consumer executes API call to fetch new data
64
+ * 4. New items are prepared and rendered
65
+ * 5. Update cache of item heights
66
+ * 6. Update buffer height
67
+ * 7. Adjust itemContainer top
68
+ * 8. Adjust scrollTop (if needed) to keep the items at same position visually
69
+ */
70
+ /**
71
+ * VariableHeightVirtualizer is a React component that efficiently renders large lists with items of variable heights,
72
+ * using virtualization techniques to minimize DOM nodes and improve performance.
73
+ *
74
+ * @param props - {@link VariableHeightVirtualizerProps}
75
+ * @param ref - Forwarded ref exposing imperative APIs: scrollToTop, getParentContainer, getBufferContainer, notifyCountChange.
76
+ *
77
+ * @example
78
+ * ```tsx
79
+ * <VariableHeightVirtualizer
80
+ * id="my-list"
81
+ * totalItemCount={10000}
82
+ * loadedDataRange={{ startIndex: 0, endIndex: 49 }}
83
+ * isDataFetching={isLoading}
84
+ * apiCallback={fetchData}
85
+ * defaultItemHeight={40}
86
+ * buffer={10}
87
+ * headerRenderer={() => <Header />}
88
+ * footerRenderer={() => <Footer />}
89
+ * noResultRenderer={() => <NoResults />}
90
+ * >
91
+ * {items.map(item => <ListItem key={item.id} {...item} />)}
92
+ * </VariableHeightVirtualizer>
93
+ * ```
94
+ */
95
+ declare const VariableHeightVirtualizer: import("react").ForwardRefExoticComponent<VariableHeightVirtualizerProps & import("react").RefAttributes<VirtualizerRef>>;
96
+ export default VariableHeightVirtualizer;
97
+ //# sourceMappingURL=VariableHeightVirtualizer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"VariableHeightVirtualizer.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAsBrD,MAAM,WAAW,WAAW;IAC1B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AASD,MAAM,WAAW,8BAA8B;IAC7C,sDAAsD;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,WAAW,EAAE,CACX,MAAM,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAC5D,OAAO,EAAE;QAAE,gBAAgB,EAAE,OAAO,CAAA;KAAE,KACnC,IAAI,CAAC;IACV,oDAAoD;IACpD,cAAc,EAAE,OAAO,CAAC;IACxB,4CAA4C;IAC5C,eAAe,EAAE,eAAe,CAAC;IACjC,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qCAAqC;IACrC,cAAc,CAAC,EAAE,CAAC,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC;IAC1C,qCAAqC;IACrC,cAAc,CAAC,EAAE,CAAC,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC;IAC1C,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,CAAC,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC;IAC5C,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACvC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,iDAAiD;IACjD,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC;AAED,UAAU,cAAc;IACtB,+CAA+C;IAC/C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,4CAA4C;IAC5C,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,4CAA4C;IAC5C,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,4CAA4C;IAC5C,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAaD;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,yBAAyB,2HA0T9B,CAAC;AAIF,eAAe,yBAAyB,CAAC"}