@pega/cosmos-react-core 3.0.0-dev.3.0 → 3.0.0-dev.4.2

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 (130) hide show
  1. package/lib/components/AppShell/AppShell.d.ts.map +1 -1
  2. package/lib/components/AppShell/AppShell.js +58 -40
  3. package/lib/components/AppShell/AppShell.js.map +1 -1
  4. package/lib/components/AppShell/AppShell.styles.d.ts +1 -3
  5. package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
  6. package/lib/components/AppShell/AppShell.styles.js +11 -4
  7. package/lib/components/AppShell/AppShell.styles.js.map +1 -1
  8. package/lib/components/AppShell/AppShell.types.d.ts +5 -1
  9. package/lib/components/AppShell/AppShell.types.d.ts.map +1 -1
  10. package/lib/components/AppShell/AppShell.types.js.map +1 -1
  11. package/lib/components/Badges/Selection.d.ts.map +1 -1
  12. package/lib/components/Badges/Selection.js +3 -2
  13. package/lib/components/Badges/Selection.js.map +1 -1
  14. package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
  15. package/lib/components/ComboBox/ComboBox.js +10 -3
  16. package/lib/components/ComboBox/ComboBox.js.map +1 -1
  17. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
  18. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +8 -6
  19. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
  20. package/lib/components/Configuration/Configuration.d.ts.map +1 -1
  21. package/lib/components/Configuration/Configuration.js +2 -1
  22. package/lib/components/Configuration/Configuration.js.map +1 -1
  23. package/lib/components/Drawer/Drawer.d.ts.map +1 -1
  24. package/lib/components/Drawer/Drawer.js +1 -1
  25. package/lib/components/Drawer/Drawer.js.map +1 -1
  26. package/lib/components/FieldGroup/FieldGroup.d.ts +2 -0
  27. package/lib/components/FieldGroup/FieldGroup.d.ts.map +1 -1
  28. package/lib/components/FieldGroup/FieldGroup.js +18 -7
  29. package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
  30. package/lib/components/FieldGroup/FieldGroupList.d.ts.map +1 -1
  31. package/lib/components/FieldGroup/FieldGroupList.js +16 -13
  32. package/lib/components/FieldGroup/FieldGroupList.js.map +1 -1
  33. package/lib/components/File/FileUploadItem.js +1 -1
  34. package/lib/components/File/FileUploadItem.js.map +1 -1
  35. package/lib/components/Form/Form.d.ts.map +1 -1
  36. package/lib/components/Form/Form.js +2 -1
  37. package/lib/components/Form/Form.js.map +1 -1
  38. package/lib/components/HTML/HTML.d.ts +13 -0
  39. package/lib/components/HTML/HTML.d.ts.map +1 -0
  40. package/lib/components/HTML/HTML.js +148 -0
  41. package/lib/components/HTML/HTML.js.map +1 -0
  42. package/lib/components/HTML/index.d.ts +2 -0
  43. package/lib/components/HTML/index.d.ts.map +1 -0
  44. package/lib/components/HTML/index.js +2 -0
  45. package/lib/components/HTML/index.js.map +1 -0
  46. package/lib/components/Icon/iconNames.d.ts +1 -1
  47. package/lib/components/Icon/iconNames.d.ts.map +1 -1
  48. package/lib/components/Icon/iconNames.js +1 -0
  49. package/lib/components/Icon/iconNames.js.map +1 -1
  50. package/lib/components/Icon/icons/ai-assist.icon.d.ts +4 -0
  51. package/lib/components/Icon/icons/ai-assist.icon.d.ts.map +1 -0
  52. package/lib/components/Icon/icons/ai-assist.icon.js +6 -0
  53. package/lib/components/Icon/icons/ai-assist.icon.js.map +1 -0
  54. package/lib/components/Icon/icons/help-solid.icon.js +1 -1
  55. package/lib/components/Icon/icons/help-solid.icon.js.map +1 -1
  56. package/lib/components/Icon/icons/help.icon.js +1 -1
  57. package/lib/components/Icon/icons/help.icon.js.map +1 -1
  58. package/lib/components/Icon/icons/information-solid.icon.d.ts.map +1 -1
  59. package/lib/components/Icon/icons/information-solid.icon.js +1 -1
  60. package/lib/components/Icon/icons/information-solid.icon.js.map +1 -1
  61. package/lib/components/Icon/icons/information.icon.js +1 -1
  62. package/lib/components/Icon/icons/information.icon.js.map +1 -1
  63. package/lib/components/Icon/icons/open.icon.js +1 -1
  64. package/lib/components/Icon/icons/open.icon.js.map +1 -1
  65. package/lib/components/ListToolbar/ListToolbar.d.ts +6 -0
  66. package/lib/components/ListToolbar/ListToolbar.d.ts.map +1 -0
  67. package/lib/components/ListToolbar/ListToolbar.js +110 -0
  68. package/lib/components/ListToolbar/ListToolbar.js.map +1 -0
  69. package/lib/components/ListToolbar/ListToolbar.styles.d.ts +4 -0
  70. package/lib/components/ListToolbar/ListToolbar.styles.d.ts.map +1 -0
  71. package/lib/components/ListToolbar/ListToolbar.styles.js +29 -0
  72. package/lib/components/ListToolbar/ListToolbar.styles.js.map +1 -0
  73. package/lib/components/ListToolbar/ListToolbar.types.d.ts +73 -0
  74. package/lib/components/ListToolbar/ListToolbar.types.d.ts.map +1 -0
  75. package/lib/components/ListToolbar/ListToolbar.types.js +2 -0
  76. package/lib/components/ListToolbar/ListToolbar.types.js.map +1 -0
  77. package/lib/components/ListToolbar/QueryOptionPopover.d.ts +12 -0
  78. package/lib/components/ListToolbar/QueryOptionPopover.d.ts.map +1 -0
  79. package/lib/components/ListToolbar/QueryOptionPopover.js +66 -0
  80. package/lib/components/ListToolbar/QueryOptionPopover.js.map +1 -0
  81. package/lib/components/ListToolbar/index.d.ts +3 -0
  82. package/lib/components/ListToolbar/index.d.ts.map +1 -0
  83. package/lib/components/ListToolbar/index.js +2 -0
  84. package/lib/components/ListToolbar/index.js.map +1 -0
  85. package/lib/components/Menu/Menu.d.ts.map +1 -1
  86. package/lib/components/Menu/Menu.js +10 -39
  87. package/lib/components/Menu/Menu.js.map +1 -1
  88. package/lib/components/MenuButton/MenuButton.d.ts.map +1 -1
  89. package/lib/components/MenuButton/MenuButton.js +1 -0
  90. package/lib/components/MenuButton/MenuButton.js.map +1 -1
  91. package/lib/components/Popover/Popover.styles.d.ts.map +1 -1
  92. package/lib/components/Popover/Popover.styles.js +45 -20
  93. package/lib/components/Popover/Popover.styles.js.map +1 -1
  94. package/lib/hooks/index.d.ts +1 -1
  95. package/lib/hooks/index.d.ts.map +1 -1
  96. package/lib/hooks/index.js +1 -1
  97. package/lib/hooks/index.js.map +1 -1
  98. package/lib/hooks/useActiveDescendant.d.ts +9 -0
  99. package/lib/hooks/useActiveDescendant.d.ts.map +1 -1
  100. package/lib/hooks/useActiveDescendant.js +29 -0
  101. package/lib/hooks/useActiveDescendant.js.map +1 -1
  102. package/lib/hooks/useArrows.d.ts +2 -1
  103. package/lib/hooks/useArrows.d.ts.map +1 -1
  104. package/lib/hooks/useArrows.js +3 -2
  105. package/lib/hooks/useArrows.js.map +1 -1
  106. package/lib/hooks/useI18n.d.ts +62 -0
  107. package/lib/hooks/useI18n.d.ts.map +1 -1
  108. package/lib/hooks/useItemIntersection.d.ts.map +1 -1
  109. package/lib/hooks/useItemIntersection.js +18 -20
  110. package/lib/hooks/useItemIntersection.js.map +1 -1
  111. package/lib/i18n/default.d.ts +62 -0
  112. package/lib/i18n/default.d.ts.map +1 -1
  113. package/lib/i18n/default.js +70 -5
  114. package/lib/i18n/default.js.map +1 -1
  115. package/lib/i18n/i18n.d.ts +124 -0
  116. package/lib/i18n/i18n.d.ts.map +1 -1
  117. package/lib/index.d.ts +4 -0
  118. package/lib/index.d.ts.map +1 -1
  119. package/lib/index.js +4 -0
  120. package/lib/index.js.map +1 -1
  121. package/lib/styles/gradients.d.ts +102 -0
  122. package/lib/styles/gradients.d.ts.map +1 -0
  123. package/lib/styles/gradients.js +232 -0
  124. package/lib/styles/gradients.js.map +1 -0
  125. package/lib/styles/index.d.ts +1 -0
  126. package/lib/styles/index.d.ts.map +1 -1
  127. package/lib/styles/index.js +1 -0
  128. package/lib/styles/index.js.map +1 -1
  129. package/lib/theme/themes/buildTheme.json +1 -2
  130. package/package.json +10 -9
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  // This file is autogenerated. Any changes will be overwritten.
3
3
  export const name = 'information-solid';
4
- export const Component = () => (_jsx("path", { d: 'M20.9296875,20.9296875 C18.5351562,23.3242188 15.6617188,24.521875 12.2609375,24.521875 C8.86015625,24.521875 5.98671875,23.3242188 3.5921875,20.9296875 C1.19765625,18.5351562 0,15.6617188 0,12.2609375 C0,8.86015625 1.19765625,5.98671875 3.5921875,3.5921875 C5.98671875,1.19765625 8.86015625,0 12.2609375,0 C15.6617188,0 18.5351563,1.19765625 20.9296875,3.5921875 C23.3242188,5.98671875 24.521875,8.86015625 24.521875,12.2609375 C24.521875,15.6617188 23.3242188,18.5351563 20.9296875,20.9296875 Z M12.740625,4.88515625 C12.740625,4.88515625 11.7828125,4.88515625 11.7828125,4.88515625 C11.7828125,4.88515625 11.7828125,6.8484375 11.7828125,6.8484375 C11.7828125,6.8484375 12.740625,6.8484375 12.740625,6.8484375 C12.740625,6.8484375 12.740625,4.88515625 12.740625,4.88515625 Z M11.7820312,8.8125 C11.7820312,8.8125 11.7820312,19.684375 11.7820312,19.684375 C11.7820312,19.684375 12.7398437,19.6367188 12.7398437,19.6367188 C12.7398437,19.6367188 12.7398437,8.81328125 12.7398437,8.81328125 C12.7398437,8.81328125 11.7820312,8.81328125 11.7820312,8.81328125 L11.7820312,8.8125 Z' }, void 0));
4
+ export const Component = () => (_jsx("path", { d: 'm3.6622276 21.3377724c-2.44121957-2.4412196-3.6622276-5.3706831-3.6622276-8.8377724 0-3.46708933 1.22100803-6.39655282 3.6622276-8.8377724 2.44121958-2.44121957 5.37068307-3.6622276 8.8377724-3.6622276 3.4670893 0 6.3965528 1.22100803 8.8377724 3.6622276 2.4412196 2.44121958 3.6622276 5.37068307 3.6622276 8.8377724 0 3.4670893-1.221008 6.3965528-3.6622276 8.8377724s-5.3706831 3.6622276-8.8377724 3.6622276c-3.46708933 0-6.39655282-1.221008-8.8377724-3.6622276zm10.0877724-16.8377724c.916782 0 1.75.75004827 1.75 1.75s-.7500483 1.75-1.75 1.75c-.916782 0-1.75-.75004827-1.75-1.75 0-1.00017697.7500483-1.75 1.75-1.75zm-1.6840618 15.5c-1.3733775 0-2.36512098-1.1294309-1.9835384-2.4721512l1.6311339-4.7396064c.1526382-.5529194.3896555-1.5606002-.1443951-1.5606002-.3560337 0-.7911265.1779192-1.3052783.5337575.3813969-1.1848882 1.4494672-1.7613997 2.6702015-1.7613997 1.3733775 0 2.365121 1.1294309 1.9835384 2.4721512l-1.6311339 4.7396064c-.1526382.5529194-.1834504 1.4538487.3506002 1.4538487.3560338 0 .7223915-.1423354 1.0990732-.427006-.3813969 1.1848882-1.4494672 1.7613997-2.6702015 1.7613997z', fillRule: 'evenodd' }, void 0));
5
5
  export const viewBox = '0 0 25 25';
6
6
  //# sourceMappingURL=information-solid.icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"information-solid.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/information-solid.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,mBAAmB,CAAC;AAExC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eAAM,CAAC,EAAC,ujCAAujC,WAAG,CACnkC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport const name = 'information-solid';\n\nexport const Component = () => (\n <path d='M20.9296875,20.9296875 C18.5351562,23.3242188 15.6617188,24.521875 12.2609375,24.521875 C8.86015625,24.521875 5.98671875,23.3242188 3.5921875,20.9296875 C1.19765625,18.5351562 0,15.6617188 0,12.2609375 C0,8.86015625 1.19765625,5.98671875 3.5921875,3.5921875 C5.98671875,1.19765625 8.86015625,0 12.2609375,0 C15.6617188,0 18.5351563,1.19765625 20.9296875,3.5921875 C23.3242188,5.98671875 24.521875,8.86015625 24.521875,12.2609375 C24.521875,15.6617188 23.3242188,18.5351563 20.9296875,20.9296875 Z M12.740625,4.88515625 C12.740625,4.88515625 11.7828125,4.88515625 11.7828125,4.88515625 C11.7828125,4.88515625 11.7828125,6.8484375 11.7828125,6.8484375 C11.7828125,6.8484375 12.740625,6.8484375 12.740625,6.8484375 C12.740625,6.8484375 12.740625,4.88515625 12.740625,4.88515625 Z M11.7820312,8.8125 C11.7820312,8.8125 11.7820312,19.684375 11.7820312,19.684375 C11.7820312,19.684375 12.7398437,19.6367188 12.7398437,19.6367188 C12.7398437,19.6367188 12.7398437,8.81328125 12.7398437,8.81328125 C12.7398437,8.81328125 11.7820312,8.81328125 11.7820312,8.81328125 L11.7820312,8.8125 Z' />\n);\n\nexport const viewBox = '0 0 25 25';\n"]}
1
+ {"version":3,"file":"information-solid.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/information-solid.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,mBAAmB,CAAC;AAExC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,CAAC,EAAC,6kCAA6kC,EAC/kC,QAAQ,EAAC,SAAS,WAClB,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport const name = 'information-solid';\n\nexport const Component = () => (\n <path\n d='m3.6622276 21.3377724c-2.44121957-2.4412196-3.6622276-5.3706831-3.6622276-8.8377724 0-3.46708933 1.22100803-6.39655282 3.6622276-8.8377724 2.44121958-2.44121957 5.37068307-3.6622276 8.8377724-3.6622276 3.4670893 0 6.3965528 1.22100803 8.8377724 3.6622276 2.4412196 2.44121958 3.6622276 5.37068307 3.6622276 8.8377724 0 3.4670893-1.221008 6.3965528-3.6622276 8.8377724s-5.3706831 3.6622276-8.8377724 3.6622276c-3.46708933 0-6.39655282-1.221008-8.8377724-3.6622276zm10.0877724-16.8377724c.916782 0 1.75.75004827 1.75 1.75s-.7500483 1.75-1.75 1.75c-.916782 0-1.75-.75004827-1.75-1.75 0-1.00017697.7500483-1.75 1.75-1.75zm-1.6840618 15.5c-1.3733775 0-2.36512098-1.1294309-1.9835384-2.4721512l1.6311339-4.7396064c.1526382-.5529194.3896555-1.5606002-.1443951-1.5606002-.3560337 0-.7911265.1779192-1.3052783.5337575.3813969-1.1848882 1.4494672-1.7613997 2.6702015-1.7613997 1.3733775 0 2.365121 1.1294309 1.9835384 2.4721512l-1.6311339 4.7396064c-.1526382.5529194-.1834504 1.4538487.3506002 1.4538487.3560338 0 .7223915-.1423354 1.0990732-.427006-.3813969 1.1848882-1.4494672 1.7613997-2.6702015 1.7613997z'\n fillRule='evenodd'\n />\n);\n\nexport const viewBox = '0 0 25 25';\n"]}
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  // This file is autogenerated. Any changes will be overwritten.
3
3
  export const name = 'information';
4
- export const Component = () => (_jsx("path", { d: 'M3.5921875,20.9296875 C1.19765625,18.5351562 0,15.6617188 0,12.2609375 C0,8.86015625 1.19765625,5.98671875 3.5921875,3.5921875 C5.98671875,1.19765625 8.86015625,0 12.2609375,0 C15.6617188,0 18.5351563,1.19765625 20.9296875,3.5921875 C23.3242188,5.98671875 24.521875,8.86015625 24.521875,12.2609375 C24.521875,15.6617188 23.3242188,18.5351563 20.9296875,20.9296875 C18.5351563,23.3242188 15.6617188,24.521875 12.2609375,24.521875 C8.86015625,24.521875 5.98671875,23.3242188 3.5921875,20.9296875 Z M0.9578125,12.2609375 C0.9578125,12.2609375 0.9578125,12.2609375 0.9578125,12.2609375 C0.9578125,14.5601563 1.58046875,16.6671875 2.8734375,18.5351562 C4.11875,20.4507812 5.79453125,21.8398438 7.90234375,22.75 C10.0101563,23.6601562 12.2125,23.8515625 14.4632813,23.4203125 C16.7140625,22.9890625 18.6296875,21.9359375 20.2585938,20.3070313 C20.2585938,20.3070313 20.2585938,20.3070313 20.2585938,20.3070313 C21.8390625,18.7265625 22.8929688,16.7632812 23.371875,14.5117188 C23.803125,12.2609375 23.6109375,10.1054688 22.7015625,7.9984375 C22.7015625,7.9984375 22.7015625,7.9984375 22.7015625,7.9984375 C21.8398438,5.89140625 20.4507813,4.21484375 18.5828125,2.921875 C16.6671875,1.62890625 14.5601563,1.00625 12.2609375,1.00625 C12.2609375,1.00625 12.2609375,1.00625 12.2609375,1.00625 C9.14765625,1.00625 6.5140625,2.1078125 4.3109375,4.26328125 C2.1078125,6.46640625 1.00625,9.1484375 0.95859375,12.2617188 L0.9578125,12.2609375 Z M11.78125,6.84921875 C11.78125,6.84921875 11.78125,4.8859375 11.78125,4.8859375 C11.78125,4.8859375 12.7390625,4.8859375 12.7390625,4.8859375 C12.7390625,4.8859375 12.7390625,6.84921875 12.7390625,6.84921875 C12.7390625,6.84921875 11.78125,6.84921875 11.78125,6.84921875 Z M11.78125,19.684375 C11.78125,19.684375 12.7390625,19.6367188 12.7390625,19.6367188 C12.7390625,19.6367188 12.7390625,8.81328125 12.7390625,8.81328125 C12.7390625,8.81328125 11.78125,8.81328125 11.78125,8.81328125 C11.78125,8.81328125 11.78125,19.6851562 11.78125,19.6851562 L11.78125,19.684375 Z' }, void 0));
4
+ export const Component = () => (_jsx("path", { d: 'm3.6622276 21.3377724c-2.44121957-2.4412196-3.6622276-5.3706831-3.6622276-8.8377724 0-3.46708933 1.22100803-6.39655282 3.6622276-8.8377724 2.44121958-2.44121957 5.37068307-3.6622276 8.8377724-3.6622276 3.4670893 0 6.3965528 1.22100803 8.8377724 3.6622276 2.4412196 2.44121958 3.6622276 5.37068307 3.6622276 8.8377724 0 3.4670893-1.221008 6.3965528-3.6622276 8.8377724s-5.3706831 3.6622276-8.8377724 3.6622276c-3.46708933 0-6.39655282-1.221008-8.8377724-3.6622276zm-2.7044151-8.8949616c0 2.3363736.63272318 4.4774541 1.94659629 6.3756088 1.26544637 1.9465811 2.96832118 3.3580905 5.1102122 4.2829547 2.14189101.9248642 4.37984161 1.1193635 6.66701291.6811446s4.2337675-1.5083622 5.8890095-3.1635912c1.6060213-1.6060088 2.6769668-3.6010162 3.1636159-5.8889635.4382223-2.2871534.2429276-4.477454-.6811499-6.61853446-.8756508-2.14108042-2.2871713-3.84473581-4.1853408-5.15859865-1.9465963-1.31386285-4.0876934-1.94658109-6.4240853-1.94658109-3.16361594 0-5.8397889 1.11936351-8.07853341 3.30966417-2.23874451 2.23872703-3.35811677 4.96409932-3.40654351 8.12769053zm12.7921875-7.9428108c.916782 0 1.75.75004827 1.75 1.75s-.7500483 1.75-1.75 1.75c-.916782 0-1.75-.75004827-1.75-1.75 0-1.00017697.7500483-1.75 1.75-1.75zm-1.6840618 15.5c-1.3733775 0-2.36512098-1.1294309-1.9835384-2.4721512l1.6311339-4.7396064c.1526382-.5529194.3896555-1.5606002-.1443951-1.5606002-.3560337 0-.7911265.1779192-1.3052783.5337575.3813969-1.1848882 1.4494672-1.7613997 2.6702015-1.7613997 1.3733775 0 2.365121 1.1294309 1.9835384 2.4721512l-1.6311339 4.7396064c-.1526382.5529194-.1834504 1.4538487.3506002 1.4538487.3560338 0 .7223915-.1423354 1.0990732-.427006-.3813969 1.1848882-1.4494672 1.7613997-2.6702015 1.7613997z' }, void 0));
5
5
  export const viewBox = '0 0 25 25';
6
6
  //# sourceMappingURL=information.icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"information.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/information.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,aAAa,CAAC;AAElC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eAAM,CAAC,EAAC,i9DAAi9D,WAAG,CAC79D,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport const name = 'information';\n\nexport const Component = () => (\n <path d='M3.5921875,20.9296875 C1.19765625,18.5351562 0,15.6617188 0,12.2609375 C0,8.86015625 1.19765625,5.98671875 3.5921875,3.5921875 C5.98671875,1.19765625 8.86015625,0 12.2609375,0 C15.6617188,0 18.5351563,1.19765625 20.9296875,3.5921875 C23.3242188,5.98671875 24.521875,8.86015625 24.521875,12.2609375 C24.521875,15.6617188 23.3242188,18.5351563 20.9296875,20.9296875 C18.5351563,23.3242188 15.6617188,24.521875 12.2609375,24.521875 C8.86015625,24.521875 5.98671875,23.3242188 3.5921875,20.9296875 Z M0.9578125,12.2609375 C0.9578125,12.2609375 0.9578125,12.2609375 0.9578125,12.2609375 C0.9578125,14.5601563 1.58046875,16.6671875 2.8734375,18.5351562 C4.11875,20.4507812 5.79453125,21.8398438 7.90234375,22.75 C10.0101563,23.6601562 12.2125,23.8515625 14.4632813,23.4203125 C16.7140625,22.9890625 18.6296875,21.9359375 20.2585938,20.3070313 C20.2585938,20.3070313 20.2585938,20.3070313 20.2585938,20.3070313 C21.8390625,18.7265625 22.8929688,16.7632812 23.371875,14.5117188 C23.803125,12.2609375 23.6109375,10.1054688 22.7015625,7.9984375 C22.7015625,7.9984375 22.7015625,7.9984375 22.7015625,7.9984375 C21.8398438,5.89140625 20.4507813,4.21484375 18.5828125,2.921875 C16.6671875,1.62890625 14.5601563,1.00625 12.2609375,1.00625 C12.2609375,1.00625 12.2609375,1.00625 12.2609375,1.00625 C9.14765625,1.00625 6.5140625,2.1078125 4.3109375,4.26328125 C2.1078125,6.46640625 1.00625,9.1484375 0.95859375,12.2617188 L0.9578125,12.2609375 Z M11.78125,6.84921875 C11.78125,6.84921875 11.78125,4.8859375 11.78125,4.8859375 C11.78125,4.8859375 12.7390625,4.8859375 12.7390625,4.8859375 C12.7390625,4.8859375 12.7390625,6.84921875 12.7390625,6.84921875 C12.7390625,6.84921875 11.78125,6.84921875 11.78125,6.84921875 Z M11.78125,19.684375 C11.78125,19.684375 12.7390625,19.6367188 12.7390625,19.6367188 C12.7390625,19.6367188 12.7390625,8.81328125 12.7390625,8.81328125 C12.7390625,8.81328125 11.78125,8.81328125 11.78125,8.81328125 C11.78125,8.81328125 11.78125,19.6851562 11.78125,19.6851562 L11.78125,19.684375 Z' />\n);\n\nexport const viewBox = '0 0 25 25';\n"]}
1
+ {"version":3,"file":"information.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/information.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,aAAa,CAAC;AAElC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eAAM,CAAC,EAAC,iqDAAiqD,WAAG,CAC7qD,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport const name = 'information';\n\nexport const Component = () => (\n <path d='m3.6622276 21.3377724c-2.44121957-2.4412196-3.6622276-5.3706831-3.6622276-8.8377724 0-3.46708933 1.22100803-6.39655282 3.6622276-8.8377724 2.44121958-2.44121957 5.37068307-3.6622276 8.8377724-3.6622276 3.4670893 0 6.3965528 1.22100803 8.8377724 3.6622276 2.4412196 2.44121958 3.6622276 5.37068307 3.6622276 8.8377724 0 3.4670893-1.221008 6.3965528-3.6622276 8.8377724s-5.3706831 3.6622276-8.8377724 3.6622276c-3.46708933 0-6.39655282-1.221008-8.8377724-3.6622276zm-2.7044151-8.8949616c0 2.3363736.63272318 4.4774541 1.94659629 6.3756088 1.26544637 1.9465811 2.96832118 3.3580905 5.1102122 4.2829547 2.14189101.9248642 4.37984161 1.1193635 6.66701291.6811446s4.2337675-1.5083622 5.8890095-3.1635912c1.6060213-1.6060088 2.6769668-3.6010162 3.1636159-5.8889635.4382223-2.2871534.2429276-4.477454-.6811499-6.61853446-.8756508-2.14108042-2.2871713-3.84473581-4.1853408-5.15859865-1.9465963-1.31386285-4.0876934-1.94658109-6.4240853-1.94658109-3.16361594 0-5.8397889 1.11936351-8.07853341 3.30966417-2.23874451 2.23872703-3.35811677 4.96409932-3.40654351 8.12769053zm12.7921875-7.9428108c.916782 0 1.75.75004827 1.75 1.75s-.7500483 1.75-1.75 1.75c-.916782 0-1.75-.75004827-1.75-1.75 0-1.00017697.7500483-1.75 1.75-1.75zm-1.6840618 15.5c-1.3733775 0-2.36512098-1.1294309-1.9835384-2.4721512l1.6311339-4.7396064c.1526382-.5529194.3896555-1.5606002-.1443951-1.5606002-.3560337 0-.7911265.1779192-1.3052783.5337575.3813969-1.1848882 1.4494672-1.7613997 2.6702015-1.7613997 1.3733775 0 2.365121 1.1294309 1.9835384 2.4721512l-1.6311339 4.7396064c-.1526382.5529194-.1834504 1.4538487.3506002 1.4538487.3560338 0 .7223915-.1423354 1.0990732-.427006-.3813969 1.1848882-1.4494672 1.7613997-2.6702015 1.7613997z' />\n);\n\nexport const viewBox = '0 0 25 25';\n"]}
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  // This file is autogenerated. Any changes will be overwritten.
3
3
  export const name = 'open';
4
- export const Component = () => (_jsx("path", { d: 'M23.5578125,1.478125 C23.5578125,1.478125 23.5578125,1.478125 23.5578125,1.478125 C23.5578125,1.478125 23.5578125,9.3328125 23.5578125,9.3328125 C23.5578125,9.66796875 23.4140625,9.81171875 23.0789062,9.81171875 C22.74375,9.81171875 22.6,9.66796875 22.6,9.3328125 C22.6,9.3328125 22.6,9.3328125 22.6,9.3328125 C22.6,9.3328125 22.6,2.67578125 22.6,2.67578125 C22.6,2.67578125 10.675,14.6007812 10.675,14.6007812 C10.4835938,14.696875 10.3875,14.7445312 10.3398438,14.7445312 C10.3398438,14.7445312 10.3398438,14.7445312 10.3398438,14.7445312 C10.0046875,14.7445312 9.81328125,14.553125 9.81328125,14.2179687 C9.81328125,14.2179687 9.81328125,14.2179687 9.81328125,14.2179687 C9.81328125,14.0742187 9.8609375,13.9789062 9.95703125,13.8828125 C9.95703125,13.8828125 9.95703125,13.8828125 9.95703125,13.8828125 C9.95703125,13.8828125 21.8820312,1.9578125 21.8820312,1.9578125 C21.8820312,1.9578125 15.225,1.9578125 15.225,1.9578125 C14.8898437,1.9578125 14.7460937,1.8140625 14.7460937,1.47890625 C14.7460937,1.14375 14.8898437,1 15.225,1 C15.225,1 15.225,1 15.225,1 C15.225,1 23.0796875,1 23.0796875,1 C23.4148437,1 23.5585937,1.14375 23.5585937,1.47890625 L23.5578125,1.478125 Z M21.59375,13.2601562 C21.59375,12.925 21.45,12.78125 21.1148437,12.78125 C20.7796875,12.78125 20.6359375,12.925 20.6359375,13.2601562 C20.6359375,13.2601562 20.6359375,13.2601562 20.6359375,13.2601562 C20.6359375,13.2601562 20.6359375,22.0726562 20.6359375,22.0726562 C20.6359375,22.4078125 20.4445312,22.5515625 20.109375,22.5515625 C20.109375,22.5515625 20.109375,22.5515625 20.109375,22.5515625 C20.109375,22.5515625 2.48515625,22.5515625 2.48515625,22.5515625 C2.15,22.5515625 1.95859375,22.4078125 1.95859375,22.0726562 C1.95859375,22.0726562 1.95859375,22.0726562 1.95859375,22.0726562 C1.95859375,22.0726562 1.95859375,4.4484375 1.95859375,4.4484375 C1.95859375,4.11328125 2.15,3.921875 2.48515625,3.921875 C2.48515625,3.921875 2.48515625,3.921875 2.48515625,3.921875 C2.48515625,3.921875 11.2976562,3.921875 11.2976562,3.921875 C11.6328125,3.921875 11.7765625,3.778125 11.7765625,3.44296875 C11.7765625,3.1078125 11.6328125,2.9640625 11.2976562,2.9640625 C11.2976562,2.9640625 11.2976562,2.9640625 11.2976562,2.9640625 C11.2976562,2.9640625 2.48515625,2.9640625 2.48515625,2.9640625 C2.05390625,2.9640625 1.71875,3.1078125 1.43125,3.3953125 C1.14375,3.6828125 1,4.01796875 1,4.44921875 C1,4.44921875 1,4.44921875 1,4.44921875 C1,4.44921875 1,22.0734375 1,22.0734375 C1,22.5046875 1.14375,22.8398438 1.43125,23.1273437 C1.71875,23.4148437 2.05390625,23.5585938 2.48515625,23.5585938 C2.48515625,23.5585938 2.48515625,23.5585938 2.48515625,23.5585938 C2.48515625,23.5585938 20.109375,23.5585938 20.109375,23.5585938 C20.540625,23.5585938 20.8757812,23.4148437 21.1632813,23.1273438 C21.4507812,22.8398438 21.5945312,22.5046875 21.5945312,22.0734375 C21.5945312,22.0734375 21.5945312,22.0734375 21.5945312,22.0734375 C21.5945312,22.0734375 21.5945312,13.2609375 21.5945312,13.2609375 L21.59375,13.2601562 Z' }, void 0));
4
+ export const Component = () => (_jsx("path", { d: 'm20.9992187 12h-.9578125c0-4.21614583 0-6.32421875 0-6.32421875s-2.975 2.975-8.925 8.92499995l-.7179687-.7179687c5.95-5.95 8.925-8.925 8.925-8.925s-2.1078125 0-6.3234375 0v-.9578125h8zm-1.9992187 2h-1v5.5c0 .3351562-.1648438.5-.5.5h-12.01484375c-.33515625 0-.5265625-.1648438-.5265625-.5v-12.015625c0-.33515625.19140625-.5265625.5265625-.5265625h5.51484375v-.9578125h-5.51484375c-.43125 0-.76640625.14375-1.05390625.43125s-.43125.62265625-.43125 1.05390625v12.01484375c0 .43125.14375.7125.43125 1s.62265625.5 1.05390625.5h12.01484375c.43125 0 .7125-.2125 1-.5s.5-.56875.5-1c0 0 0-1.8333333 0-5.5z' }, void 0));
5
5
  export const viewBox = '0 0 25 25';
6
6
  //# sourceMappingURL=open.icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"open.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/open.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAE3B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eAAM,CAAC,EAAC,86FAA86F,WAAG,CAC17F,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport const name = 'open';\n\nexport const Component = () => (\n <path d='M23.5578125,1.478125 C23.5578125,1.478125 23.5578125,1.478125 23.5578125,1.478125 C23.5578125,1.478125 23.5578125,9.3328125 23.5578125,9.3328125 C23.5578125,9.66796875 23.4140625,9.81171875 23.0789062,9.81171875 C22.74375,9.81171875 22.6,9.66796875 22.6,9.3328125 C22.6,9.3328125 22.6,9.3328125 22.6,9.3328125 C22.6,9.3328125 22.6,2.67578125 22.6,2.67578125 C22.6,2.67578125 10.675,14.6007812 10.675,14.6007812 C10.4835938,14.696875 10.3875,14.7445312 10.3398438,14.7445312 C10.3398438,14.7445312 10.3398438,14.7445312 10.3398438,14.7445312 C10.0046875,14.7445312 9.81328125,14.553125 9.81328125,14.2179687 C9.81328125,14.2179687 9.81328125,14.2179687 9.81328125,14.2179687 C9.81328125,14.0742187 9.8609375,13.9789062 9.95703125,13.8828125 C9.95703125,13.8828125 9.95703125,13.8828125 9.95703125,13.8828125 C9.95703125,13.8828125 21.8820312,1.9578125 21.8820312,1.9578125 C21.8820312,1.9578125 15.225,1.9578125 15.225,1.9578125 C14.8898437,1.9578125 14.7460937,1.8140625 14.7460937,1.47890625 C14.7460937,1.14375 14.8898437,1 15.225,1 C15.225,1 15.225,1 15.225,1 C15.225,1 23.0796875,1 23.0796875,1 C23.4148437,1 23.5585937,1.14375 23.5585937,1.47890625 L23.5578125,1.478125 Z M21.59375,13.2601562 C21.59375,12.925 21.45,12.78125 21.1148437,12.78125 C20.7796875,12.78125 20.6359375,12.925 20.6359375,13.2601562 C20.6359375,13.2601562 20.6359375,13.2601562 20.6359375,13.2601562 C20.6359375,13.2601562 20.6359375,22.0726562 20.6359375,22.0726562 C20.6359375,22.4078125 20.4445312,22.5515625 20.109375,22.5515625 C20.109375,22.5515625 20.109375,22.5515625 20.109375,22.5515625 C20.109375,22.5515625 2.48515625,22.5515625 2.48515625,22.5515625 C2.15,22.5515625 1.95859375,22.4078125 1.95859375,22.0726562 C1.95859375,22.0726562 1.95859375,22.0726562 1.95859375,22.0726562 C1.95859375,22.0726562 1.95859375,4.4484375 1.95859375,4.4484375 C1.95859375,4.11328125 2.15,3.921875 2.48515625,3.921875 C2.48515625,3.921875 2.48515625,3.921875 2.48515625,3.921875 C2.48515625,3.921875 11.2976562,3.921875 11.2976562,3.921875 C11.6328125,3.921875 11.7765625,3.778125 11.7765625,3.44296875 C11.7765625,3.1078125 11.6328125,2.9640625 11.2976562,2.9640625 C11.2976562,2.9640625 11.2976562,2.9640625 11.2976562,2.9640625 C11.2976562,2.9640625 2.48515625,2.9640625 2.48515625,2.9640625 C2.05390625,2.9640625 1.71875,3.1078125 1.43125,3.3953125 C1.14375,3.6828125 1,4.01796875 1,4.44921875 C1,4.44921875 1,4.44921875 1,4.44921875 C1,4.44921875 1,22.0734375 1,22.0734375 C1,22.5046875 1.14375,22.8398438 1.43125,23.1273437 C1.71875,23.4148437 2.05390625,23.5585938 2.48515625,23.5585938 C2.48515625,23.5585938 2.48515625,23.5585938 2.48515625,23.5585938 C2.48515625,23.5585938 20.109375,23.5585938 20.109375,23.5585938 C20.540625,23.5585938 20.8757812,23.4148437 21.1632813,23.1273438 C21.4507812,22.8398438 21.5945312,22.5046875 21.5945312,22.0734375 C21.5945312,22.0734375 21.5945312,22.0734375 21.5945312,22.0734375 C21.5945312,22.0734375 21.5945312,13.2609375 21.5945312,13.2609375 L21.59375,13.2601562 Z' />\n);\n\nexport const viewBox = '0 0 25 25';\n"]}
1
+ {"version":3,"file":"open.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/open.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAE3B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eAAM,CAAC,EAAC,slBAAslB,WAAG,CAClmB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport const name = 'open';\n\nexport const Component = () => (\n <path d='m20.9992187 12h-.9578125c0-4.21614583 0-6.32421875 0-6.32421875s-2.975 2.975-8.925 8.92499995l-.7179687-.7179687c5.95-5.95 8.925-8.925 8.925-8.925s-2.1078125 0-6.3234375 0v-.9578125h8zm-1.9992187 2h-1v5.5c0 .3351562-.1648438.5-.5.5h-12.01484375c-.33515625 0-.5265625-.1648438-.5265625-.5v-12.015625c0-.33515625.19140625-.5265625.5265625-.5265625h5.51484375v-.9578125h-5.51484375c-.43125 0-.76640625.14375-1.05390625.43125s-.43125.62265625-.43125 1.05390625v12.01484375c0 .43125.14375.7125.43125 1s.62265625.5 1.05390625.5h12.01484375c.43125 0 .7125-.2125 1-.5s.5-.56875.5-1c0 0 0-1.8333333 0-5.5z' />\n);\n\nexport const viewBox = '0 0 25 25';\n"]}
@@ -0,0 +1,6 @@
1
+ import { FunctionComponent } from 'react';
2
+ import { ForwardProps } from '../../types';
3
+ import { ListToolbarProps } from './ListToolbar.types';
4
+ declare const ListToolbar: FunctionComponent<ListToolbarProps & ForwardProps>;
5
+ export default ListToolbar;
6
+ //# sourceMappingURL=ListToolbar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ListToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAe3C,OAAO,EACL,gBAAgB,EAKjB,MAAM,qBAAqB,CAAC;AA2G7B,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqJnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -0,0 +1,110 @@
1
+ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
+ import Actions from '../Actions';
4
+ import Text from '../Text';
5
+ import Button from '../Button';
6
+ import { useBreakpoint, useI18n } from '../../hooks';
7
+ import Flex from '../Flex';
8
+ import SearchInput from '../SearchInput';
9
+ import Icon, { registerIcon } from '../Icon';
10
+ import * as filterIcon from '../Icon/icons/filter.icon';
11
+ import * as arrowUpDownIcon from '../Icon/icons/arrow-up-down.icon';
12
+ import * as rowIcon from '../Icon/icons/row.icon';
13
+ import * as plusIcon from '../Icon/icons/plus.icon';
14
+ import * as moreIcon from '../Icon/icons/more.icon';
15
+ import { hasProp } from '../../utils';
16
+ import MenuButton from '../MenuButton';
17
+ import { Count } from '../Badges';
18
+ import { StyledViewSelector, StyledSearchForm, StyledListToolbar } from './ListToolbar.styles';
19
+ import QueryOptionPopover from './QueryOptionPopover';
20
+ registerIcon(filterIcon, arrowUpDownIcon, rowIcon, plusIcon, moreIcon);
21
+ const CountMeta = ({ count }) => {
22
+ const t = useI18n();
23
+ return (_jsxs(Text, { variant: 'secondary', children: [count.total !== undefined && t('results_count', [count.total], { count: count.total }), count.total && count.selected && ' ', count.selected !== undefined &&
24
+ `(${t('selected_count', [count.selected], { count: count.selected })})`] }, void 0));
25
+ };
26
+ const QueryOptionButton = ({ id, queryOptionProps, iconOnly, setCurrentQueryOption }) => {
27
+ const t = useI18n();
28
+ let i18nKey;
29
+ let icon;
30
+ if (id === 'filter') {
31
+ i18nKey = 'filter';
32
+ icon = 'filter';
33
+ }
34
+ else if (id === 'sort') {
35
+ i18nKey = 'sort';
36
+ icon = 'arrow-up-down';
37
+ }
38
+ else if (id === 'group') {
39
+ i18nKey = 'group';
40
+ icon = 'row';
41
+ }
42
+ const text = t(i18nKey);
43
+ const variant = iconOnly ? 'simple' : 'text';
44
+ useEffect(() => {
45
+ if (!queryOptionProps || !hasProp(queryOptionProps, 'renderer')) {
46
+ return;
47
+ }
48
+ setCurrentQueryOption(cur => {
49
+ if (!cur)
50
+ return null;
51
+ return {
52
+ ...cur,
53
+ props: queryOptionProps
54
+ };
55
+ });
56
+ }, [queryOptionProps, setCurrentQueryOption]);
57
+ if (hasProp(queryOptionProps, 'renderer')) {
58
+ return (_jsx("div", { children: _jsx(Button, { variant: variant, icon: iconOnly, label: iconOnly ? text : undefined, onClick: (e) => {
59
+ setCurrentQueryOption({
60
+ id,
61
+ props: queryOptionProps,
62
+ popoverTarget: e.currentTarget
63
+ });
64
+ }, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: 'span', children: [_jsx(Icon, { name: icon }, void 0), !iconOnly && text, !iconOnly && queryOptionProps.count && _jsx(Count, { children: queryOptionProps.count }, void 0)] }, void 0) }, void 0) }, void 0));
65
+ }
66
+ if (hasProp(queryOptionProps, 'items')) {
67
+ return (_jsx("div", { children: _jsx(MenuButton, { variant: variant, text: text, icon: icon, iconOnly: iconOnly, count: queryOptionProps.count, menu: {
68
+ mode: queryOptionProps.mode,
69
+ items: queryOptionProps.items.map(item => ({ ...item, primary: item.text })),
70
+ onItemClick: queryOptionProps.onItemClick
71
+ } }, void 0) }, void 0));
72
+ }
73
+ return null;
74
+ };
75
+ const ListToolbar = forwardRef(({ heading, onCreateNew, search, count, filter, sort, group, actions }, ref) => {
76
+ const t = useI18n();
77
+ const isSmallOrAbove = useBreakpoint('sm');
78
+ const isMediumOrAbove = useBreakpoint('md');
79
+ const actionsButtonRef = useRef(null);
80
+ const [queryOptionDialogState, setQueryOptionDialogState] = useState(null);
81
+ const createNewButton = useMemo(() => {
82
+ if (!onCreateNew)
83
+ return null;
84
+ const text = t('create_new');
85
+ return (_jsx(Button, { variant: isSmallOrAbove ? 'secondary' : 'simple', icon: !isSmallOrAbove, label: isSmallOrAbove ? undefined : text, onClick: onCreateNew, children: _jsxs(Flex, { as: 'span', container: { inline: true, alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'plus' }, void 0), isSmallOrAbove && _jsx("span", { children: text }, void 0)] }, void 0) }, void 0));
86
+ }, [t, onCreateNew, isSmallOrAbove]);
87
+ const filterButton = filter && (_jsx(QueryOptionButton, { id: 'filter', queryOptionProps: filter, iconOnly: !isMediumOrAbove, setCurrentQueryOption: setQueryOptionDialogState }, void 0));
88
+ const sortButton = sort && (_jsx(QueryOptionButton, { id: 'sort', queryOptionProps: sort, iconOnly: !isMediumOrAbove, setCurrentQueryOption: setQueryOptionDialogState }, void 0));
89
+ const groupButton = group && (_jsx(QueryOptionButton, { id: 'group', queryOptionProps: group, iconOnly: !isMediumOrAbove, setCurrentQueryOption: setQueryOptionDialogState }, void 0));
90
+ const onQueryOptionCancel = useCallback(() => {
91
+ if (queryOptionDialogState?.props.onCancel() === false)
92
+ return;
93
+ setQueryOptionDialogState(null);
94
+ }, [queryOptionDialogState]);
95
+ const onQueryOptionSubmit = useCallback(() => {
96
+ if (queryOptionDialogState?.props.onSubmit() === false)
97
+ return;
98
+ setQueryOptionDialogState(null);
99
+ }, [queryOptionDialogState]);
100
+ return (_jsxs(Flex, { as: StyledListToolbar, container: { direction: 'column', gap: 2 }, item: { grow: 1 }, ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [typeof heading === 'string' ? (_jsx(Text, { variant: 'h3', children: heading }, void 0)) : (_jsx(StyledViewSelector, { variant: 'text', text: heading.views.find(view => view.selected)?.text ?? heading.views[0].text, menu: {
101
+ mode: 'single-select',
102
+ items: heading.views.map(view => ({ ...view, primary: view.text })),
103
+ onItemClick: heading.onViewSelect
104
+ } }, void 0)), createNewButton] }, void 0), _jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 2 }, children: [_jsxs(Flex, { as: StyledSearchForm, container: { alignItems: 'center', wrap: 'wrap', gap: 2 }, item: { grow: 1 }, children: [search && _jsx(SearchInput, { ...search }, void 0), isSmallOrAbove && count && _jsx(CountMeta, { count: count }, void 0)] }, void 0), (filterButton || sortButton || groupButton || actions) && (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, md: { container: { gap: 3 } }, children: [_jsxs(_Fragment, { children: [filterButton, sortButton, groupButton] }, void 0), actions && (_jsx(Actions, { items: actions.map(({ icon, ...restProps }) => ({
105
+ visual: icon ? _jsx(Icon, { name: icon }, void 0) : undefined,
106
+ ...restProps
107
+ })), menuAt: 1, ref: actionsButtonRef }, void 0))] }, void 0))] }, void 0), !isSmallOrAbove && count && (_jsx(Flex, { container: { alignItems: 'center', wrap: 'wrap', gap: 2 }, children: _jsx(CountMeta, { count: count }, void 0) }, void 0)), queryOptionDialogState && (_jsx(QueryOptionPopover, { target: queryOptionDialogState.popoverTarget, heading: t(`${queryOptionDialogState.id}_by`), onCancel: onQueryOptionCancel, onSubmit: onQueryOptionSubmit, children: _jsx(queryOptionDialogState.props.renderer, {}, void 0) }, void 0))] }, void 0));
108
+ });
109
+ export default ListToolbar;
110
+ //# sourceMappingURL=ListToolbar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ListToolbar.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Dispatch,\n forwardRef,\n FunctionComponent,\n MouseEvent,\n PropsWithoutRef,\n SetStateAction,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport Actions from '../Actions';\nimport Text from '../Text';\nimport Button from '../Button';\nimport { ForwardProps } from '../../types';\nimport { useBreakpoint, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport SearchInput from '../SearchInput';\nimport Icon, { registerIcon } from '../Icon';\nimport * as filterIcon from '../Icon/icons/filter.icon';\nimport * as arrowUpDownIcon from '../Icon/icons/arrow-up-down.icon';\nimport * as rowIcon from '../Icon/icons/row.icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as moreIcon from '../Icon/icons/more.icon';\nimport { hasProp } from '../../utils';\nimport MenuButton from '../MenuButton';\nimport { Count } from '../Badges';\n\nimport { StyledViewSelector, StyledSearchForm, StyledListToolbar } from './ListToolbar.styles';\nimport {\n ListToolbarProps,\n PresetMenuProps,\n QueryOptionDialogProps,\n QueryOptionDialogState,\n QueryOptionId\n} from './ListToolbar.types';\nimport QueryOptionPopover from './QueryOptionPopover';\n\nregisterIcon(filterIcon, arrowUpDownIcon, rowIcon, plusIcon, moreIcon);\n\nconst CountMeta = ({ count }: { count: NonNullable<ListToolbarProps['count']> }) => {\n const t = useI18n();\n return (\n <Text variant='secondary'>\n {count.total !== undefined && t('results_count', [count.total], { count: count.total })}\n {count.total && count.selected && ' '}\n {count.selected !== undefined &&\n `(${t('selected_count', [count.selected], { count: count.selected })})`}\n </Text>\n );\n};\n\nconst QueryOptionButton = ({\n id,\n queryOptionProps,\n iconOnly,\n setCurrentQueryOption\n}: {\n id: QueryOptionId;\n queryOptionProps: QueryOptionDialogProps | PresetMenuProps;\n iconOnly: boolean;\n setCurrentQueryOption: Dispatch<SetStateAction<QueryOptionDialogState>>;\n}) => {\n const t = useI18n();\n let i18nKey!: 'filter' | 'sort' | 'group';\n let icon!: 'filter' | 'arrow-up-down' | 'row';\n\n if (id === 'filter') {\n i18nKey = 'filter';\n icon = 'filter';\n } else if (id === 'sort') {\n i18nKey = 'sort';\n icon = 'arrow-up-down';\n } else if (id === 'group') {\n i18nKey = 'group';\n icon = 'row';\n }\n\n const text = t(i18nKey);\n const variant = iconOnly ? 'simple' : 'text';\n\n useEffect(() => {\n if (!queryOptionProps || !hasProp(queryOptionProps, 'renderer')) {\n return;\n }\n\n setCurrentQueryOption(cur => {\n if (!cur) return null;\n return {\n ...cur,\n props: queryOptionProps\n };\n });\n }, [queryOptionProps, setCurrentQueryOption]);\n\n if (hasProp(queryOptionProps, 'renderer')) {\n return (\n <div>\n <Button\n variant={variant}\n icon={iconOnly}\n label={iconOnly ? text : undefined}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n setCurrentQueryOption({\n id,\n props: queryOptionProps,\n popoverTarget: e.currentTarget\n });\n }}\n >\n <Flex container={{ inline: true, alignItems: 'center', gap: 1 }} as='span'>\n <Icon name={icon} />\n {!iconOnly && text}\n {!iconOnly && queryOptionProps.count && <Count>{queryOptionProps.count}</Count>}\n </Flex>\n </Button>\n </div>\n );\n }\n\n if (hasProp(queryOptionProps, 'items')) {\n return (\n <div>\n <MenuButton\n variant={variant}\n text={text}\n icon={icon}\n iconOnly={iconOnly}\n count={queryOptionProps.count}\n menu={{\n mode: queryOptionProps.mode,\n items: queryOptionProps.items.map(item => ({ ...item, primary: item.text })),\n onItemClick: queryOptionProps.onItemClick\n }}\n />\n </div>\n );\n }\n\n return null;\n};\n\nconst ListToolbar: FunctionComponent<ListToolbarProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n onCreateNew,\n search,\n count,\n filter,\n sort,\n group,\n actions\n }: PropsWithoutRef<ListToolbarProps>,\n ref: ListToolbarProps['ref']\n ) => {\n const t = useI18n();\n const isSmallOrAbove = useBreakpoint('sm');\n const isMediumOrAbove = useBreakpoint('md');\n const actionsButtonRef = useRef<HTMLButtonElement>(null);\n\n const [queryOptionDialogState, setQueryOptionDialogState] =\n useState<QueryOptionDialogState>(null);\n\n const createNewButton = useMemo(() => {\n if (!onCreateNew) return null;\n const text = t('create_new');\n\n return (\n <Button\n variant={isSmallOrAbove ? 'secondary' : 'simple'}\n icon={!isSmallOrAbove}\n label={isSmallOrAbove ? undefined : text}\n onClick={onCreateNew}\n >\n <Flex as='span' container={{ inline: true, alignItems: 'center', gap: 1 }}>\n <Icon name='plus' />\n {isSmallOrAbove && <span>{text}</span>}\n </Flex>\n </Button>\n );\n }, [t, onCreateNew, isSmallOrAbove]);\n\n const filterButton = filter && (\n <QueryOptionButton\n id='filter'\n queryOptionProps={filter}\n iconOnly={!isMediumOrAbove}\n setCurrentQueryOption={setQueryOptionDialogState}\n />\n );\n\n const sortButton = sort && (\n <QueryOptionButton\n id='sort'\n queryOptionProps={sort}\n iconOnly={!isMediumOrAbove}\n setCurrentQueryOption={setQueryOptionDialogState}\n />\n );\n\n const groupButton = group && (\n <QueryOptionButton\n id='group'\n queryOptionProps={group}\n iconOnly={!isMediumOrAbove}\n setCurrentQueryOption={setQueryOptionDialogState}\n />\n );\n\n const onQueryOptionCancel = useCallback(() => {\n if (queryOptionDialogState?.props.onCancel() === false) return;\n setQueryOptionDialogState(null);\n }, [queryOptionDialogState]);\n\n const onQueryOptionSubmit = useCallback(() => {\n if (queryOptionDialogState?.props.onSubmit() === false) return;\n setQueryOptionDialogState(null);\n }, [queryOptionDialogState]);\n\n return (\n <Flex\n as={StyledListToolbar}\n container={{ direction: 'column', gap: 2 }}\n item={{ grow: 1 }}\n ref={ref}\n >\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {typeof heading === 'string' ? (\n <Text variant='h3'>{heading}</Text>\n ) : (\n <StyledViewSelector\n variant='text'\n text={heading.views.find(view => view.selected)?.text ?? heading.views[0].text}\n menu={{\n mode: 'single-select',\n items: heading.views.map(view => ({ ...view, primary: view.text })),\n onItemClick: heading.onViewSelect\n }}\n />\n )}\n {createNewButton}\n </Flex>\n <Flex container={{ alignItems: 'start', justify: 'between', gap: 2 }}>\n <Flex\n as={StyledSearchForm}\n container={{ alignItems: 'center', wrap: 'wrap', gap: 2 }}\n item={{ grow: 1 }}\n >\n {search && <SearchInput {...search} />}\n {isSmallOrAbove && count && <CountMeta count={count} />}\n </Flex>\n {(filterButton || sortButton || groupButton || actions) && (\n <Flex container={{ alignItems: 'center', gap: 1 }} md={{ container: { gap: 3 } }}>\n <>\n {filterButton}\n {sortButton}\n {groupButton}\n </>\n {actions && (\n <Actions\n items={actions.map(({ icon, ...restProps }) => ({\n visual: icon ? <Icon name={icon} /> : undefined,\n ...restProps\n }))}\n menuAt={1}\n ref={actionsButtonRef}\n />\n )}\n </Flex>\n )}\n </Flex>\n {!isSmallOrAbove && count && (\n <Flex container={{ alignItems: 'center', wrap: 'wrap', gap: 2 }}>\n <CountMeta count={count} />\n </Flex>\n )}\n\n {queryOptionDialogState && (\n <QueryOptionPopover\n target={queryOptionDialogState.popoverTarget}\n heading={t(`${queryOptionDialogState.id}_by`)}\n onCancel={onQueryOptionCancel}\n onSubmit={onQueryOptionSubmit}\n >\n <queryOptionDialogState.props.renderer />\n </QueryOptionPopover>\n )}\n </Flex>\n );\n }\n);\n\nexport default ListToolbar;\n"]}
@@ -0,0 +1,4 @@
1
+ export declare const StyledSearchForm: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
2
+ export declare const StyledViewSelector: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../..").ForwardProps & import("../MenuButton").MenuButtonProps>, import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const StyledListToolbar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
4
+ //# sourceMappingURL=ListToolbar.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ListToolbar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,6MAS7B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAI7B,CAAC"}
@@ -0,0 +1,29 @@
1
+ import styled, { css } from 'styled-components';
2
+ import { StyledSearchInput } from '../SearchInput';
3
+ import MenuButton from '../MenuButton';
4
+ import { StyledText } from '../Text';
5
+ import { defaultThemeProp } from '../../theme';
6
+ import { calculateFontSize } from '../../styles';
7
+ import { StyledButton } from '../Button';
8
+ export const StyledSearchForm = styled.div `
9
+ ${StyledSearchInput} {
10
+ flex-grow: 1;
11
+ max-width: min(100%, 40ch);
12
+ }
13
+ `;
14
+ export const StyledViewSelector = styled(MenuButton)(({ theme }) => {
15
+ const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
16
+ return css `
17
+ ${StyledText} {
18
+ font-size: ${fontSizes[theme.components.text.h3['font-size']]};
19
+ font-weight: ${theme.components.text.h3['font-weight']};
20
+ }
21
+ `;
22
+ });
23
+ StyledViewSelector.defaultProps = defaultThemeProp;
24
+ export const StyledListToolbar = styled.div `
25
+ ${StyledButton} + ${StyledButton} {
26
+ margin-inline-start: 0;
27
+ }
28
+ `;
29
+ //# sourceMappingURL=ListToolbar.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ListToolbar.styles.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;IACtC,iBAAiB;;;;CAIpB,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEvF,OAAO,GAAG,CAAA;MACN,UAAU;mBACG,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBAC1D,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;GAEzD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;IACvC,YAAY,MAAM,YAAY;;;CAGjC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledSearchInput } from '../SearchInput';\nimport MenuButton from '../MenuButton';\nimport { StyledText } from '../Text';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { StyledButton } from '../Button';\n\nexport const StyledSearchForm = styled.div`\n ${StyledSearchInput} {\n flex-grow: 1;\n max-width: min(100%, 40ch);\n }\n`;\n\nexport const StyledViewSelector = styled(MenuButton)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n ${StyledText} {\n font-size: ${fontSizes[theme.components.text.h3['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h3['font-weight']};\n }\n `;\n});\n\nStyledViewSelector.defaultProps = defaultThemeProp;\n\nexport const StyledListToolbar = styled.div`\n ${StyledButton} + ${StyledButton} {\n margin-inline-start: 0;\n }\n`;\n"]}
@@ -0,0 +1,73 @@
1
+ import { MouseEvent, Ref, ComponentType } from 'react';
2
+ import { SearchInputProps } from '../SearchInput';
3
+ import { MenuProps } from '../Menu';
4
+ import { Action, BaseProps } from '../../types';
5
+ export interface ViewSelectorProps {
6
+ /** A list of pre-defined data views. */
7
+ views: {
8
+ id: string;
9
+ text: string;
10
+ selected: boolean;
11
+ }[];
12
+ /** Called when a view is selected. */
13
+ onViewSelect: MenuProps['onItemClick'];
14
+ }
15
+ export interface QueryOption {
16
+ /** A count representing the number of applied conditions within the query option. */
17
+ count?: number;
18
+ }
19
+ export interface QueryOptionDialogProps extends QueryOption {
20
+ /** A component to render the content portion of the query option dialog. */
21
+ renderer: ComponentType;
22
+ /**
23
+ * Called when the user explicitly or implicitly cancels(closes) the query dialog.
24
+ * Returning false will block the dialog from closing.
25
+ */
26
+ onCancel: () => boolean | void;
27
+ /**
28
+ * Called when the user explicitly applies the query option conditions.
29
+ * Returning false will block the dialog from closing.
30
+ */
31
+ onSubmit: () => boolean | void;
32
+ }
33
+ /** Optionally provide query option presets. */
34
+ export interface PresetMenuProps extends QueryOption {
35
+ mode?: Exclude<MenuProps['mode'], 'action'>;
36
+ items: {
37
+ id: string;
38
+ text: string;
39
+ selected: boolean;
40
+ icon?: string;
41
+ }[];
42
+ onItemClick: MenuProps['onItemClick'];
43
+ }
44
+ export declare type QueryOptionId = 'filter' | 'sort' | 'group';
45
+ export declare type QueryOptionDialogState = {
46
+ id: 'filter' | 'sort' | 'group';
47
+ props: QueryOptionDialogProps;
48
+ popoverTarget: HTMLButtonElement | null;
49
+ } | null;
50
+ export interface ListToolbarProps extends BaseProps {
51
+ /** Rendering a simple heading or view selection menu.. */
52
+ heading: string | ViewSelectorProps;
53
+ /** Callback that will render a Create new button and is fired when that button is clicked. */
54
+ onCreateNew?: (e: MouseEvent) => void;
55
+ /** Props related to the Search Input. */
56
+ search?: SearchInputProps;
57
+ /** Total returned results related for a given search. Optional indication of a selected item count. */
58
+ count?: {
59
+ total?: number;
60
+ selected?: number;
61
+ };
62
+ /** Custom Rendering or available presets for filtering. */
63
+ filter?: QueryOptionDialogProps | PresetMenuProps;
64
+ /** Custom Rendering or available presets for sorting. */
65
+ sort?: QueryOptionDialogProps | PresetMenuProps;
66
+ /** Custom Rendering or available presets for grouping. */
67
+ group?: QueryOptionDialogProps | PresetMenuProps;
68
+ /** Top level dataset actions. */
69
+ actions?: Action[];
70
+ /** Ref for the wrapping element. */
71
+ ref?: Ref<HTMLDivElement>;
72
+ }
73
+ //# sourceMappingURL=ListToolbar.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ListToolbar.types.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,WAAW,iBAAiB;IAChC,wCAAwC;IACxC,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IACzD,sCAAsC;IACtC,YAAY,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CACxC;AACD,MAAM,WAAW,WAAW;IAC1B,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,4EAA4E;IAC5E,QAAQ,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;IAC/B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;CAChC;AAED,+CAA+C;AAC/C,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC5C,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACxE,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CACvC;AACD,oBAAY,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAExD,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChC,KAAK,EAAE,sBAAsB,CAAC;IAC9B,aAAa,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACzC,GAAG,IAAI,CAAC;AAET,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,0DAA0D;IAC1D,OAAO,EAAE,MAAM,GAAG,iBAAiB,CAAC;IACpC,8FAA8F;IAC9F,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,yCAAyC;IACzC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,uGAAuG;IACvG,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,2DAA2D;IAC3D,MAAM,CAAC,EAAE,sBAAsB,GAAG,eAAe,CAAC;IAClD,yDAAyD;IACzD,IAAI,CAAC,EAAE,sBAAsB,GAAG,eAAe,CAAC;IAChD,0DAA0D;IAC1D,KAAK,CAAC,EAAE,sBAAsB,GAAG,eAAe,CAAC;IACjD,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=ListToolbar.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ListToolbar.types.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, Ref, ComponentType } from 'react';\n\nimport { SearchInputProps } from '../SearchInput';\nimport { MenuProps } from '../Menu';\nimport { Action, BaseProps } from '../../types';\n\nexport interface ViewSelectorProps {\n /** A list of pre-defined data views. */\n views: { id: string; text: string; selected: boolean }[];\n /** Called when a view is selected. */\n onViewSelect: MenuProps['onItemClick'];\n}\nexport interface QueryOption {\n /** A count representing the number of applied conditions within the query option. */\n count?: number;\n}\n\nexport interface QueryOptionDialogProps extends QueryOption {\n /** A component to render the content portion of the query option dialog. */\n renderer: ComponentType;\n /**\n * Called when the user explicitly or implicitly cancels(closes) the query dialog.\n * Returning false will block the dialog from closing.\n */\n onCancel: () => boolean | void;\n /**\n * Called when the user explicitly applies the query option conditions.\n * Returning false will block the dialog from closing.\n */\n onSubmit: () => boolean | void;\n}\n\n/** Optionally provide query option presets. */\nexport interface PresetMenuProps extends QueryOption {\n mode?: Exclude<MenuProps['mode'], 'action'>;\n items: { id: string; text: string; selected: boolean; icon?: string }[];\n onItemClick: MenuProps['onItemClick'];\n}\nexport type QueryOptionId = 'filter' | 'sort' | 'group';\n\nexport type QueryOptionDialogState = {\n id: 'filter' | 'sort' | 'group';\n props: QueryOptionDialogProps;\n popoverTarget: HTMLButtonElement | null;\n} | null;\n\nexport interface ListToolbarProps extends BaseProps {\n /** Rendering a simple heading or view selection menu.. */\n heading: string | ViewSelectorProps;\n /** Callback that will render a Create new button and is fired when that button is clicked. */\n onCreateNew?: (e: MouseEvent) => void;\n /** Props related to the Search Input. */\n search?: SearchInputProps;\n /** Total returned results related for a given search. Optional indication of a selected item count. */\n count?: {\n total?: number;\n selected?: number;\n };\n /** Custom Rendering or available presets for filtering. */\n filter?: QueryOptionDialogProps | PresetMenuProps;\n /** Custom Rendering or available presets for sorting. */\n sort?: QueryOptionDialogProps | PresetMenuProps;\n /** Custom Rendering or available presets for grouping. */\n group?: QueryOptionDialogProps | PresetMenuProps;\n /** Top level dataset actions. */\n actions?: Action[];\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
@@ -0,0 +1,12 @@
1
+ import { FunctionComponent, ReactNode } from 'react';
2
+ import { ForwardProps, OmitStrict } from '../../types';
3
+ import { PopoverProps } from '../Popover';
4
+ import { QueryOptionDialogProps } from './ListToolbar.types';
5
+ interface ListToolbarPopoverProps extends OmitStrict<PopoverProps, 'target'>, Pick<QueryOptionDialogProps, 'onCancel' | 'onSubmit'> {
6
+ heading: string;
7
+ children: ReactNode;
8
+ target?: HTMLButtonElement | null;
9
+ }
10
+ declare const QueryOptionPopover: FunctionComponent<ListToolbarPopoverProps & ForwardProps>;
11
+ export default QueryOptionPopover;
12
+ //# sourceMappingURL=QueryOptionPopover.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"QueryOptionPopover.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/QueryOptionPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGjB,SAAS,EAGV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIvD,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,UAAU,uBACR,SAAQ,UAAU,CAAC,YAAY,EAAE,QAAQ,CAAC,EACxC,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,UAAU,CAAC;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACnC;AAMD,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,GAAG,YAAY,CAiGjF,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
@@ -0,0 +1,66 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { forwardRef, useEffect, useCallback } from 'react';
3
+ import styled from 'styled-components';
4
+ import { useConsolidatedRef, useI18n, useOuterEvent, useUID } from '../../hooks';
5
+ import { getFocusables } from '../../utils';
6
+ import Button from '../Button';
7
+ import Flex from '../Flex';
8
+ import Popover from '../Popover';
9
+ import Text from '../Text';
10
+ const StyledQueryListPopover = styled(Popover) `
11
+ min-width: 40ch;
12
+ `;
13
+ const QueryOptionPopover = forwardRef(({ target, heading, children, onCancel, onSubmit }, ref) => {
14
+ const t = useI18n();
15
+ const headingId = useUID();
16
+ const popoverRef = useConsolidatedRef(ref);
17
+ const onKeydown = useCallback((e) => {
18
+ if (e.repeat)
19
+ return;
20
+ if (e.key === 'Escape') {
21
+ onCancel();
22
+ target?.focus();
23
+ return;
24
+ }
25
+ if (e.key === 'Tab') {
26
+ const focusables = getFocusables(popoverRef);
27
+ if (!focusables || focusables.length < 2)
28
+ return;
29
+ const firstFocusable = focusables[0];
30
+ const lastFocusable = focusables[focusables.length - 1];
31
+ if (!e.shiftKey &&
32
+ (document.activeElement === popoverRef.current ||
33
+ document.activeElement === lastFocusable)) {
34
+ firstFocusable?.focus();
35
+ e.preventDefault();
36
+ }
37
+ else if (e.shiftKey &&
38
+ (document.activeElement === popoverRef.current ||
39
+ document.activeElement === firstFocusable)) {
40
+ lastFocusable?.focus();
41
+ e.preventDefault();
42
+ }
43
+ }
44
+ }, [onCancel, popoverRef, target]);
45
+ useOuterEvent('mousedown', [popoverRef], () => {
46
+ onCancel();
47
+ });
48
+ useEffect(() => {
49
+ document.addEventListener('keydown', onKeydown);
50
+ return () => {
51
+ document.removeEventListener('keydown', onKeydown);
52
+ };
53
+ }, [onKeydown]);
54
+ useEffect(() => {
55
+ getFocusables(popoverRef)[0]?.focus();
56
+ }, [popoverRef]);
57
+ return (_jsx(StyledQueryListPopover, { target: target, ref: popoverRef, role: 'dialog', "aria-labelledby": headingId, arrow: true, onKeyDown: onKeydown, children: _jsxs(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, children: [_jsx(Text, { variant: 'h3', id: headingId, children: heading }, void 0), children, _jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { onClick: () => {
58
+ onCancel();
59
+ target?.focus();
60
+ }, children: t('cancel') }, void 0), _jsx(Button, { variant: 'primary', onClick: () => {
61
+ onSubmit();
62
+ target?.focus();
63
+ }, children: t('submit') }, void 0)] }, void 0)] }, void 0) }, void 0));
64
+ });
65
+ export default QueryOptionPopover;
66
+ //# sourceMappingURL=QueryOptionPopover.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"QueryOptionPopover.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/QueryOptionPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n forwardRef,\n ReactNode,\n useEffect,\n useCallback\n} from 'react';\nimport styled from 'styled-components';\n\nimport { useConsolidatedRef, useI18n, useOuterEvent, useUID } from '../../hooks';\nimport { ForwardProps, OmitStrict } from '../../types';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Popover, { PopoverProps } from '../Popover';\nimport Text from '../Text';\n\nimport { QueryOptionDialogProps } from './ListToolbar.types';\n\ninterface ListToolbarPopoverProps\n extends OmitStrict<PopoverProps, 'target'>,\n Pick<QueryOptionDialogProps, 'onCancel' | 'onSubmit'> {\n heading: string;\n children: ReactNode;\n target?: HTMLButtonElement | null;\n}\n\nconst StyledQueryListPopover = styled(Popover)`\n min-width: 40ch;\n`;\n\nconst QueryOptionPopover: FunctionComponent<ListToolbarPopoverProps & ForwardProps> = forwardRef(\n (\n { target, heading, children, onCancel, onSubmit }: PropsWithoutRef<ListToolbarPopoverProps>,\n ref: ListToolbarPopoverProps['ref']\n ) => {\n const t = useI18n();\n const headingId = useUID();\n const popoverRef = useConsolidatedRef(ref);\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n if (e.repeat) return;\n\n if (e.key === 'Escape') {\n onCancel();\n target?.focus();\n return;\n }\n\n if (e.key === 'Tab') {\n const focusables = getFocusables(popoverRef);\n if (!focusables || focusables.length < 2) return;\n const firstFocusable = focusables[0];\n const lastFocusable = focusables[focusables.length - 1];\n\n if (\n !e.shiftKey &&\n (document.activeElement === popoverRef.current ||\n document.activeElement === lastFocusable)\n ) {\n firstFocusable?.focus();\n e.preventDefault();\n } else if (\n e.shiftKey &&\n (document.activeElement === popoverRef.current ||\n document.activeElement === firstFocusable)\n ) {\n lastFocusable?.focus();\n e.preventDefault();\n }\n }\n },\n [onCancel, popoverRef, target]\n );\n\n useOuterEvent('mousedown', [popoverRef], () => {\n onCancel();\n });\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [onKeydown]);\n\n useEffect(() => {\n getFocusables(popoverRef)[0]?.focus();\n }, [popoverRef]);\n\n return (\n <StyledQueryListPopover\n target={target}\n ref={popoverRef}\n role='dialog'\n aria-labelledby={headingId}\n arrow\n onKeyDown={onKeydown}\n >\n <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n <Text variant='h3' id={headingId}>\n {heading}\n </Text>\n {children}\n <Flex container={{ justify: 'between' }}>\n <Button\n onClick={() => {\n onCancel();\n target?.focus();\n }}\n >\n {t('cancel')}\n </Button>\n <Button\n variant='primary'\n onClick={() => {\n onSubmit();\n target?.focus();\n }}\n >\n {t('submit')}\n </Button>\n </Flex>\n </Flex>\n </StyledQueryListPopover>\n );\n }\n);\n\nexport default QueryOptionPopover;\n"]}
@@ -0,0 +1,3 @@
1
+ export { default } from './ListToolbar';
2
+ export { ListToolbarProps } from './ListToolbar.types';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './ListToolbar';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ListToolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './ListToolbar';\nexport { ListToolbarProps } from './ListToolbar.types';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAUf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAG3D,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA2UrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAG3D,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA4SrD,CAAC;AAEF,eAAe,IAAI,CAAC"}