@quillsql/react 2.12.52 → 2.12.53

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 (243) hide show
  1. package/dist/cjs/Chart.js +1 -1
  2. package/dist/cjs/ChartBuilder.d.ts +7 -3
  3. package/dist/cjs/ChartBuilder.d.ts.map +1 -1
  4. package/dist/cjs/ChartBuilder.js +54 -18
  5. package/dist/cjs/ChartEditor.d.ts +3 -1
  6. package/dist/cjs/ChartEditor.d.ts.map +1 -1
  7. package/dist/cjs/ChartEditor.js +42 -7
  8. package/dist/cjs/Context.d.ts +4 -5
  9. package/dist/cjs/Context.d.ts.map +1 -1
  10. package/dist/cjs/Context.js +22 -34
  11. package/dist/cjs/Dashboard.d.ts +4 -3
  12. package/dist/cjs/Dashboard.d.ts.map +1 -1
  13. package/dist/cjs/Dashboard.js +24 -29
  14. package/dist/cjs/DateRangePicker/QuillDateRangePicker.d.ts.map +1 -1
  15. package/dist/cjs/DateRangePicker/QuillDateRangePicker.js +8 -10
  16. package/dist/cjs/DateRangePicker/dateRangePickerUtils.d.ts +1 -0
  17. package/dist/cjs/DateRangePicker/dateRangePickerUtils.d.ts.map +1 -1
  18. package/dist/cjs/DateRangePicker/dateRangePickerUtils.js +1 -1
  19. package/dist/cjs/QuillProvider.js +1 -1
  20. package/dist/cjs/ReportBuilder.d.ts +8 -12
  21. package/dist/cjs/ReportBuilder.d.ts.map +1 -1
  22. package/dist/cjs/ReportBuilder.js +157 -83
  23. package/dist/cjs/SQLEditor.d.ts +8 -1
  24. package/dist/cjs/SQLEditor.d.ts.map +1 -1
  25. package/dist/cjs/SQLEditor.js +80 -28
  26. package/dist/cjs/Table.js +1 -1
  27. package/dist/cjs/assets/AdjustmentsIcon.d.ts +5 -0
  28. package/dist/cjs/assets/AdjustmentsIcon.d.ts.map +1 -0
  29. package/dist/cjs/assets/AdjustmentsIcon.js +5 -0
  30. package/dist/cjs/assets/ArrowDownHeadIcon.d.ts.map +1 -1
  31. package/dist/cjs/components/Chart/ChartError.js +2 -2
  32. package/dist/cjs/components/Dashboard/DashboardFilter.d.ts +2 -2
  33. package/dist/cjs/components/Dashboard/DashboardFilter.d.ts.map +1 -1
  34. package/dist/cjs/components/Dashboard/DashboardFilter.js +6 -6
  35. package/dist/cjs/components/Dashboard/DashboardTemplate.d.ts +2 -2
  36. package/dist/cjs/components/Dashboard/DashboardTemplate.d.ts.map +1 -1
  37. package/dist/cjs/components/Dashboard/DataLoader.d.ts +5 -1
  38. package/dist/cjs/components/Dashboard/DataLoader.d.ts.map +1 -1
  39. package/dist/cjs/components/Dashboard/DataLoader.js +23 -4
  40. package/dist/cjs/components/Dashboard/TableComponent.d.ts +2 -1
  41. package/dist/cjs/components/Dashboard/TableComponent.d.ts.map +1 -1
  42. package/dist/cjs/components/Dashboard/TableComponent.js +2 -2
  43. package/dist/cjs/components/Dashboard/util.d.ts +2 -2
  44. package/dist/cjs/components/Dashboard/util.d.ts.map +1 -1
  45. package/dist/cjs/components/Dashboard/util.js +2 -2
  46. package/dist/cjs/components/QuillMultiSelect.d.ts.map +1 -1
  47. package/dist/cjs/components/QuillMultiSelect.js +18 -13
  48. package/dist/cjs/components/QuillMultiSelectWithCombo.d.ts.map +1 -1
  49. package/dist/cjs/components/QuillMultiSelectWithCombo.js +67 -45
  50. package/dist/cjs/components/QuillSelect.d.ts +1 -1
  51. package/dist/cjs/components/QuillSelect.d.ts.map +1 -1
  52. package/dist/cjs/components/QuillSelect.js +28 -6
  53. package/dist/cjs/components/QuillSelectWithCombo.d.ts.map +1 -1
  54. package/dist/cjs/components/QuillSelectWithCombo.js +45 -24
  55. package/dist/cjs/components/QuillTable.d.ts +2 -1
  56. package/dist/cjs/components/QuillTable.d.ts.map +1 -1
  57. package/dist/cjs/components/QuillTable.js +7 -4
  58. package/dist/cjs/components/ReportBuilder/AddLimitPopover.d.ts +2 -1
  59. package/dist/cjs/components/ReportBuilder/AddLimitPopover.d.ts.map +1 -1
  60. package/dist/cjs/components/ReportBuilder/AddLimitPopover.js +2 -2
  61. package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts +2 -1
  62. package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts.map +1 -1
  63. package/dist/cjs/components/ReportBuilder/AddSortPopover.js +2 -2
  64. package/dist/cjs/components/ReportBuilder/FilterModal.d.ts +2 -1
  65. package/dist/cjs/components/ReportBuilder/FilterModal.d.ts.map +1 -1
  66. package/dist/cjs/components/ReportBuilder/FilterModal.js +17 -4
  67. package/dist/cjs/components/ReportBuilder/ui.d.ts +13 -7
  68. package/dist/cjs/components/ReportBuilder/ui.d.ts.map +1 -1
  69. package/dist/cjs/components/ReportBuilder/ui.js +14 -11
  70. package/dist/cjs/components/UiComponents.d.ts +15 -8
  71. package/dist/cjs/components/UiComponents.d.ts.map +1 -1
  72. package/dist/cjs/components/UiComponents.js +29 -23
  73. package/dist/cjs/hooks/useAstToFilterTree.d.ts +2 -2
  74. package/dist/cjs/hooks/useAstToFilterTree.d.ts.map +1 -1
  75. package/dist/cjs/hooks/useDashboard.d.ts +9 -4
  76. package/dist/cjs/hooks/useDashboard.d.ts.map +1 -1
  77. package/dist/cjs/hooks/useDashboard.js +61 -38
  78. package/dist/cjs/hooks/useExport.js +1 -1
  79. package/dist/cjs/hooks/useQuill.js +2 -2
  80. package/dist/cjs/hooks/useVirtualTables.d.ts +12 -3
  81. package/dist/cjs/hooks/useVirtualTables.d.ts.map +1 -1
  82. package/dist/cjs/hooks/useVirtualTables.js +105 -1
  83. package/dist/cjs/internals/ReportBuilder/PivotForm.d.ts +3 -1
  84. package/dist/cjs/internals/ReportBuilder/PivotForm.d.ts.map +1 -1
  85. package/dist/cjs/internals/ReportBuilder/PivotForm.js +9 -9
  86. package/dist/cjs/internals/ReportBuilder/PivotList.d.ts.map +1 -1
  87. package/dist/cjs/internals/ReportBuilder/PivotList.js +21 -15
  88. package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts +3 -2
  89. package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
  90. package/dist/cjs/internals/ReportBuilder/PivotModal.js +9 -9
  91. package/dist/cjs/models/Client.d.ts +10 -2
  92. package/dist/cjs/models/Client.d.ts.map +1 -1
  93. package/dist/cjs/utils/astProcessing.d.ts +3 -3
  94. package/dist/cjs/utils/astProcessing.d.ts.map +1 -1
  95. package/dist/cjs/utils/client.d.ts.map +1 -1
  96. package/dist/cjs/utils/client.js +2 -7
  97. package/dist/cjs/utils/dashboard.d.ts +5 -5
  98. package/dist/cjs/utils/dashboard.d.ts.map +1 -1
  99. package/dist/cjs/utils/dashboard.js +87 -7
  100. package/dist/cjs/utils/dataFetcher.d.ts +4 -4
  101. package/dist/cjs/utils/dataFetcher.d.ts.map +1 -1
  102. package/dist/cjs/utils/dataFetcher.js +1 -1
  103. package/dist/cjs/utils/filterProcessing.d.ts.map +1 -1
  104. package/dist/cjs/utils/filterProcessing.js +2 -8
  105. package/dist/cjs/utils/paginationProcessing.js +1 -1
  106. package/dist/cjs/utils/pivotConstructor.d.ts +2 -2
  107. package/dist/cjs/utils/pivotConstructor.d.ts.map +1 -1
  108. package/dist/cjs/utils/pivotConstructor.js +1 -1
  109. package/dist/cjs/utils/pivotProcessing.d.ts.map +1 -1
  110. package/dist/cjs/utils/pivotProcessing.js +6 -2
  111. package/dist/cjs/utils/queryConstructor.d.ts.map +1 -1
  112. package/dist/cjs/utils/queryConstructor.js +12 -9
  113. package/dist/cjs/utils/report.d.ts +6 -5
  114. package/dist/cjs/utils/report.d.ts.map +1 -1
  115. package/dist/cjs/utils/report.js +69 -24
  116. package/dist/cjs/utils/schema.d.ts +3 -3
  117. package/dist/cjs/utils/schema.d.ts.map +1 -1
  118. package/dist/cjs/utils/schema.js +39 -35
  119. package/dist/cjs/utils/tableProcessing.d.ts +17 -10
  120. package/dist/cjs/utils/tableProcessing.d.ts.map +1 -1
  121. package/dist/cjs/utils/tableProcessing.js +42 -23
  122. package/dist/esm/Chart.js +2 -2
  123. package/dist/esm/ChartBuilder.d.ts +7 -3
  124. package/dist/esm/ChartBuilder.d.ts.map +1 -1
  125. package/dist/esm/ChartBuilder.js +51 -18
  126. package/dist/esm/ChartEditor.d.ts +3 -1
  127. package/dist/esm/ChartEditor.d.ts.map +1 -1
  128. package/dist/esm/ChartEditor.js +43 -8
  129. package/dist/esm/Context.d.ts +4 -5
  130. package/dist/esm/Context.d.ts.map +1 -1
  131. package/dist/esm/Context.js +23 -35
  132. package/dist/esm/Dashboard.d.ts +4 -3
  133. package/dist/esm/Dashboard.d.ts.map +1 -1
  134. package/dist/esm/Dashboard.js +24 -29
  135. package/dist/esm/DateRangePicker/QuillDateRangePicker.d.ts.map +1 -1
  136. package/dist/esm/DateRangePicker/QuillDateRangePicker.js +8 -10
  137. package/dist/esm/DateRangePicker/dateRangePickerUtils.d.ts +1 -0
  138. package/dist/esm/DateRangePicker/dateRangePickerUtils.d.ts.map +1 -1
  139. package/dist/esm/DateRangePicker/dateRangePickerUtils.js +1 -1
  140. package/dist/esm/QuillProvider.js +1 -1
  141. package/dist/esm/ReportBuilder.d.ts +8 -12
  142. package/dist/esm/ReportBuilder.d.ts.map +1 -1
  143. package/dist/esm/ReportBuilder.js +160 -86
  144. package/dist/esm/SQLEditor.d.ts +8 -1
  145. package/dist/esm/SQLEditor.d.ts.map +1 -1
  146. package/dist/esm/SQLEditor.js +83 -31
  147. package/dist/esm/Table.js +2 -2
  148. package/dist/esm/assets/AdjustmentsIcon.d.ts +5 -0
  149. package/dist/esm/assets/AdjustmentsIcon.d.ts.map +1 -0
  150. package/dist/esm/assets/AdjustmentsIcon.js +3 -0
  151. package/dist/esm/assets/ArrowDownHeadIcon.d.ts.map +1 -1
  152. package/dist/esm/components/Chart/ChartError.js +2 -2
  153. package/dist/esm/components/Dashboard/DashboardFilter.d.ts +2 -2
  154. package/dist/esm/components/Dashboard/DashboardFilter.d.ts.map +1 -1
  155. package/dist/esm/components/Dashboard/DashboardFilter.js +6 -6
  156. package/dist/esm/components/Dashboard/DashboardTemplate.d.ts +2 -2
  157. package/dist/esm/components/Dashboard/DashboardTemplate.d.ts.map +1 -1
  158. package/dist/esm/components/Dashboard/DataLoader.d.ts +5 -1
  159. package/dist/esm/components/Dashboard/DataLoader.d.ts.map +1 -1
  160. package/dist/esm/components/Dashboard/DataLoader.js +25 -6
  161. package/dist/esm/components/Dashboard/TableComponent.d.ts +2 -1
  162. package/dist/esm/components/Dashboard/TableComponent.d.ts.map +1 -1
  163. package/dist/esm/components/Dashboard/TableComponent.js +2 -2
  164. package/dist/esm/components/Dashboard/util.d.ts +2 -2
  165. package/dist/esm/components/Dashboard/util.d.ts.map +1 -1
  166. package/dist/esm/components/Dashboard/util.js +2 -2
  167. package/dist/esm/components/QuillMultiSelect.d.ts.map +1 -1
  168. package/dist/esm/components/QuillMultiSelect.js +19 -14
  169. package/dist/esm/components/QuillMultiSelectWithCombo.d.ts.map +1 -1
  170. package/dist/esm/components/QuillMultiSelectWithCombo.js +68 -46
  171. package/dist/esm/components/QuillSelect.d.ts +1 -1
  172. package/dist/esm/components/QuillSelect.d.ts.map +1 -1
  173. package/dist/esm/components/QuillSelect.js +29 -7
  174. package/dist/esm/components/QuillSelectWithCombo.d.ts.map +1 -1
  175. package/dist/esm/components/QuillSelectWithCombo.js +46 -25
  176. package/dist/esm/components/QuillTable.d.ts +2 -1
  177. package/dist/esm/components/QuillTable.d.ts.map +1 -1
  178. package/dist/esm/components/QuillTable.js +7 -4
  179. package/dist/esm/components/ReportBuilder/AddLimitPopover.d.ts +2 -1
  180. package/dist/esm/components/ReportBuilder/AddLimitPopover.d.ts.map +1 -1
  181. package/dist/esm/components/ReportBuilder/AddLimitPopover.js +2 -2
  182. package/dist/esm/components/ReportBuilder/AddSortPopover.d.ts +2 -1
  183. package/dist/esm/components/ReportBuilder/AddSortPopover.d.ts.map +1 -1
  184. package/dist/esm/components/ReportBuilder/AddSortPopover.js +2 -2
  185. package/dist/esm/components/ReportBuilder/FilterModal.d.ts +2 -1
  186. package/dist/esm/components/ReportBuilder/FilterModal.d.ts.map +1 -1
  187. package/dist/esm/components/ReportBuilder/FilterModal.js +17 -4
  188. package/dist/esm/components/ReportBuilder/ui.d.ts +13 -7
  189. package/dist/esm/components/ReportBuilder/ui.d.ts.map +1 -1
  190. package/dist/esm/components/ReportBuilder/ui.js +14 -11
  191. package/dist/esm/components/UiComponents.d.ts +15 -8
  192. package/dist/esm/components/UiComponents.d.ts.map +1 -1
  193. package/dist/esm/components/UiComponents.js +29 -23
  194. package/dist/esm/hooks/useAstToFilterTree.d.ts +2 -2
  195. package/dist/esm/hooks/useAstToFilterTree.d.ts.map +1 -1
  196. package/dist/esm/hooks/useDashboard.d.ts +9 -4
  197. package/dist/esm/hooks/useDashboard.d.ts.map +1 -1
  198. package/dist/esm/hooks/useDashboard.js +62 -39
  199. package/dist/esm/hooks/useExport.js +1 -1
  200. package/dist/esm/hooks/useQuill.js +3 -3
  201. package/dist/esm/hooks/useVirtualTables.d.ts +12 -3
  202. package/dist/esm/hooks/useVirtualTables.d.ts.map +1 -1
  203. package/dist/esm/hooks/useVirtualTables.js +106 -2
  204. package/dist/esm/internals/ReportBuilder/PivotForm.d.ts +3 -1
  205. package/dist/esm/internals/ReportBuilder/PivotForm.d.ts.map +1 -1
  206. package/dist/esm/internals/ReportBuilder/PivotForm.js +9 -9
  207. package/dist/esm/internals/ReportBuilder/PivotList.d.ts.map +1 -1
  208. package/dist/esm/internals/ReportBuilder/PivotList.js +21 -15
  209. package/dist/esm/internals/ReportBuilder/PivotModal.d.ts +3 -2
  210. package/dist/esm/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
  211. package/dist/esm/internals/ReportBuilder/PivotModal.js +9 -9
  212. package/dist/esm/models/Client.d.ts +10 -2
  213. package/dist/esm/models/Client.d.ts.map +1 -1
  214. package/dist/esm/utils/astProcessing.d.ts +3 -3
  215. package/dist/esm/utils/astProcessing.d.ts.map +1 -1
  216. package/dist/esm/utils/client.d.ts.map +1 -1
  217. package/dist/esm/utils/client.js +2 -7
  218. package/dist/esm/utils/dashboard.d.ts +5 -5
  219. package/dist/esm/utils/dashboard.d.ts.map +1 -1
  220. package/dist/esm/utils/dashboard.js +87 -7
  221. package/dist/esm/utils/dataFetcher.d.ts +4 -4
  222. package/dist/esm/utils/dataFetcher.d.ts.map +1 -1
  223. package/dist/esm/utils/dataFetcher.js +1 -1
  224. package/dist/esm/utils/filterProcessing.d.ts.map +1 -1
  225. package/dist/esm/utils/filterProcessing.js +2 -8
  226. package/dist/esm/utils/paginationProcessing.js +1 -1
  227. package/dist/esm/utils/pivotConstructor.d.ts +2 -2
  228. package/dist/esm/utils/pivotConstructor.d.ts.map +1 -1
  229. package/dist/esm/utils/pivotConstructor.js +1 -1
  230. package/dist/esm/utils/pivotProcessing.d.ts.map +1 -1
  231. package/dist/esm/utils/pivotProcessing.js +6 -2
  232. package/dist/esm/utils/queryConstructor.d.ts.map +1 -1
  233. package/dist/esm/utils/queryConstructor.js +12 -9
  234. package/dist/esm/utils/report.d.ts +6 -5
  235. package/dist/esm/utils/report.d.ts.map +1 -1
  236. package/dist/esm/utils/report.js +68 -24
  237. package/dist/esm/utils/schema.d.ts +3 -3
  238. package/dist/esm/utils/schema.d.ts.map +1 -1
  239. package/dist/esm/utils/schema.js +39 -35
  240. package/dist/esm/utils/tableProcessing.d.ts +17 -10
  241. package/dist/esm/utils/tableProcessing.d.ts.map +1 -1
  242. package/dist/esm/utils/tableProcessing.js +39 -20
  243. package/package.json +1 -1
@@ -11,7 +11,7 @@ const ChartError_1 = __importDefault(require("../Chart/ChartError"));
11
11
  const useExport_1 = require("../../hooks/useExport");
12
12
  const paginationProcessing_1 = require("../../utils/paginationProcessing");
13
13
  const Context_1 = require("../../Context");
14
- function QuillTableComponent({ report, onClick, isLoading, error, rowCount, onPageChange, onSortChange, }) {
14
+ function QuillTableComponent({ report, onClick, isLoading, error, rowCount, rowCountIsLoading, onPageChange, onSortChange, }) {
15
15
  const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
16
16
  const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
17
17
  const { downloadCSV } = (0, useExport_1.useExport)(report?.id);
@@ -45,7 +45,7 @@ function QuillTableComponent({ report, onClick, isLoading, error, rowCount, onPa
45
45
  } })) : error ? ((0, jsx_runtime_1.jsx)("div", { style: {
46
46
  width: '100%',
47
47
  height: '400px',
48
- }, children: (0, jsx_runtime_1.jsx)(ChartError_1.default, { errorMessage: error }) })) : ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { isLoading: isLoading, rows: report.rows ?? [], rowCount: rowCount, columns: report.columns, rowsPerPage: report.pagination?.rowsPerPage ?? paginationProcessing_1.DEFAULT_PAGINATION.rowsPerPage, containerStyle: {
48
+ }, children: (0, jsx_runtime_1.jsx)(ChartError_1.default, { errorMessage: error }) })) : ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { isLoading: isLoading, rows: report.rows ?? [], rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, columns: report.columns, rowsPerPage: report.pagination?.rowsPerPage ?? paginationProcessing_1.DEFAULT_PAGINATION.rowsPerPage, containerStyle: {
49
49
  width: '100%',
50
50
  height: '400px',
51
51
  }, downloadCSV: () => {
@@ -1,7 +1,7 @@
1
- import { Client } from '../../models/Client';
1
+ import { QuillProviderClient } from '../../models/Client';
2
2
  export declare function validateTemplatesAgainstFilters(filters: any[], templates: any[]): {
3
3
  valid: boolean;
4
4
  error: string;
5
5
  };
6
- export declare function addTemplatesToDashboard(name: any, newTemplates: any[], client: Client, dashboardData: any): Promise<any>;
6
+ export declare function addTemplatesToDashboard(name: any, newTemplates: any[], client: QuillProviderClient, dashboardData: any): Promise<any>;
7
7
  //# sourceMappingURL=util.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,GAAG,EAAE,EACd,SAAS,EAAE,GAAG,EAAE,GACf;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAiCnC;AAED,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,GAAG,EAAE,EACnB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,GAAG,GACjB,OAAO,CAAC,GAAG,CAAC,CAiDd"}
1
+ {"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG1D,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,GAAG,EAAE,EACd,SAAS,EAAE,GAAG,EAAE,GACf;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAiCnC;AAED,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,GAAG,EAAE,EACnB,MAAM,EAAE,mBAAmB,EAC3B,aAAa,EAAE,GAAG,GACjB,OAAO,CAAC,GAAG,CAAC,CAiDd"}
@@ -40,13 +40,13 @@ function validateTemplatesAgainstFilters(filters, templates) {
40
40
  exports.validateTemplatesAgainstFilters = validateTemplatesAgainstFilters;
41
41
  async function addTemplatesToDashboard(name, newTemplates, client, dashboardData) {
42
42
  try {
43
- const { publicKey, customerId } = client;
43
+ const { publicKey, organizationId } = client;
44
44
  const hostedBody = {
45
45
  metadata: {
46
46
  dashboardName: name,
47
47
  task: 'add-from-template',
48
48
  clientId: publicKey,
49
- orgId: customerId || '*',
49
+ orgId: organizationId || '*',
50
50
  templateReportIds: newTemplates.map((template) => template._id),
51
51
  },
52
52
  };
@@ -1 +1 @@
1
- {"version":3,"file":"QuillMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAgC3E;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CA4Q3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAyDpB,CAAC"}
1
+ {"version":3,"file":"QuillMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAsO3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAyDpB,CAAC"}
@@ -18,7 +18,7 @@ function displaySelectedOptionLabels({ options, value, }) {
18
18
  return 'Select';
19
19
  }
20
20
  return matchingOptions
21
- .map((elem) => elem.label)
21
+ .map((elem) => elem.label ?? '-')
22
22
  .join(', ');
23
23
  }
24
24
  /**
@@ -30,8 +30,6 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
30
30
  const [showModal, setShowModal] = (0, react_1.useState)(false);
31
31
  const modalRef = (0, react_1.useRef)(null);
32
32
  const debounceTimeoutId = (0, react_1.useRef)(null);
33
- // const [searchQuery, setSearchQuery] = useState('');
34
- // const [filteredOptions, setFilteredOptions] = useState(options);
35
33
  (0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false));
36
34
  (0, react_1.useEffect)(() => {
37
35
  if (!value) {
@@ -41,6 +39,21 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
41
39
  setSelectedOptions(value);
42
40
  }
43
41
  }, [value]);
42
+ const sortedItems = (0, react_1.useMemo)(() => {
43
+ // Sort null to top
44
+ return options.sort((a, b) => {
45
+ if (a.value === null) {
46
+ return -1;
47
+ }
48
+ if (b.value === null) {
49
+ return 1;
50
+ }
51
+ return a.label.localeCompare(b.label);
52
+ });
53
+ }, [options]);
54
+ const nullLabel = (0, react_1.useMemo)(() => {
55
+ return sortedItems.some((item) => item.value === '-') ? 'None' : '-';
56
+ }, [sortedItems]);
44
57
  const debounce = (updatedChangeEvent) => {
45
58
  if (debounceTimeoutId.current) {
46
59
  clearTimeout(debounceTimeoutId.current);
@@ -49,14 +62,6 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
49
62
  onChange(updatedChangeEvent);
50
63
  }, 500);
51
64
  };
52
- // const filterOptions = (query: string) => {
53
- // setSearchQuery(query);
54
- // setFilteredOptions(
55
- // options.filter((option) =>
56
- // option.label.toLowerCase().includes(query.toLowerCase()),
57
- // ),
58
- // );
59
- // };
60
65
  return ((0, jsx_runtime_1.jsxs)("div", { style: {
61
66
  position: 'relative',
62
67
  borderRadius: '6px',
@@ -116,7 +121,7 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
116
121
  fontFamily: theme?.fontFamily,
117
122
  maxHeight: '50vh',
118
123
  overflow: 'scroll',
119
- }, children: !isLoading ? (options.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
124
+ }, children: !isLoading ? (sortedItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
120
125
  display: 'flex',
121
126
  alignItems: 'center',
122
127
  padding: 8,
@@ -167,7 +172,7 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
167
172
  textOverflow: 'ellipsis',
168
173
  whiteSpace: 'nowrap',
169
174
  overflow: 'hidden',
170
- }, children: option.label })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {})) }))] }));
175
+ }, children: option.label ?? nullLabel })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {})) }))] }));
171
176
  }
172
177
  exports.QuillMultiSelectComponent = QuillMultiSelectComponent;
173
178
  const ListboxTextInput = ({ value, onChange, placeholder, }) => {
@@ -1 +1 @@
1
- {"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAgC3E;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAuV3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAwDpB,CAAC"}
1
+ {"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CA4U3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAwDpB,CAAC"}
@@ -54,27 +54,15 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
54
54
  const modalRef = (0, react_1.useRef)(null);
55
55
  const debounceTimeoutId = (0, react_1.useRef)(null);
56
56
  const [searchQuery, setSearchQuery] = react_1.default.useState('');
57
- const [filteredItems, setFilteredItems] = react_1.default.useState(options.slice(0, 20));
57
+ const [exceedsLimit, setExceedsLimit] = (0, react_1.useState)(false);
58
58
  (0, react_1.useEffect)(() => {
59
- setFilteredItems(options.slice(0, 20));
59
+ if (options.length > 0 && options?.[0]?.value === 'EXCEEDS_LIMIT') {
60
+ setExceedsLimit(true);
61
+ }
62
+ else {
63
+ setExceedsLimit(false);
64
+ }
60
65
  }, [options]);
61
- const handleSearchChange = (value) => {
62
- setSearchQuery(value);
63
- const curFilteredItems = value === ''
64
- ? options.slice(0, 20)
65
- : options
66
- .filter((option) => {
67
- if (!option) {
68
- return false;
69
- }
70
- return option.value
71
- .toLowerCase()
72
- .replace(/\s+/g, '')
73
- .includes(value.toLowerCase().replace(/\s+/g, ''));
74
- })
75
- .slice(0, 20);
76
- setFilteredItems(curFilteredItems);
77
- };
78
66
  (0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false));
79
67
  (0, react_1.useEffect)(() => {
80
68
  if (!value) {
@@ -92,14 +80,43 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
92
80
  onChange(updatedChangeEvent);
93
81
  }, 500);
94
82
  };
95
- // const filterOptions = (query: string) => {
96
- // setSearchQuery(query);
97
- // setFilteredOptions(
98
- // options.filter((option) =>
99
- // option.label.toLowerCase().includes(query.toLowerCase()),
100
- // ),
101
- // );
102
- // };
83
+ const filteredItems = react_1.default.useMemo(function () {
84
+ // Sort null to top
85
+ if (searchQuery === '') {
86
+ return options.sort((a, b) => {
87
+ if (a.value === null) {
88
+ return -1;
89
+ }
90
+ if (b.value === null) {
91
+ return 1;
92
+ }
93
+ return a.label.localeCompare(b.label);
94
+ });
95
+ }
96
+ return options
97
+ .filter((option) => {
98
+ if (!option) {
99
+ return false;
100
+ }
101
+ return option.value
102
+ .toLowerCase()
103
+ .replace(/\s+/g, '')
104
+ .includes(searchQuery.toLowerCase().replace(/\s+/g, ''));
105
+ })
106
+ .sort((a, b) => {
107
+ if (a.value === null) {
108
+ return -1;
109
+ }
110
+ if (b.value === null) {
111
+ return 1;
112
+ }
113
+ return a.label.localeCompare(b.label);
114
+ })
115
+ .slice(0, 20);
116
+ }, [options, searchQuery]);
117
+ const nullLabel = (0, react_1.useMemo)(() => {
118
+ return filteredItems.some((item) => item.value === '-') ? 'None' : '-';
119
+ }, [filteredItems]);
103
120
  return ((0, jsx_runtime_1.jsxs)("div", { style: {
104
121
  position: 'relative',
105
122
  borderRadius: '6px',
@@ -111,7 +128,7 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
111
128
  fontFamily: theme?.fontFamily,
112
129
  paddingBottom: 5,
113
130
  fontWeight: 600,
114
- }, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
131
+ }, children: label ?? nullLabel })), (0, jsx_runtime_1.jsxs)("button", { style: {
115
132
  fontFamily: theme?.fontFamily,
116
133
  color: theme?.primaryTextColor,
117
134
  width: '100%',
@@ -160,9 +177,14 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
160
177
  maxHeight: '50vh',
161
178
  overflow: 'scroll',
162
179
  fontSize: 14,
163
- }, children: [options && options.length > 20 && !isLoading && ((0, jsx_runtime_1.jsx)(exports.ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
164
- handleSearchChange(value);
165
- } })), options && options.length > 20 && ((0, jsx_runtime_1.jsx)("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } })), (!filteredItems || filteredItems.length === 0) && !isLoading && ((0, jsx_runtime_1.jsxs)("div", { style: {
180
+ }, children: [!exceedsLimit && options && options.length > 20 && ((0, jsx_runtime_1.jsx)(exports.ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
181
+ setSearchQuery(value);
182
+ } })), !exceedsLimit && options && options.length > 20 && ((0, jsx_runtime_1.jsx)("div", { style: {
183
+ height: 9,
184
+ width: 230,
185
+ borderTop: '1px solid #e7e7e7',
186
+ } })), !isLoading &&
187
+ (!filteredItems || filteredItems.length === 0 || exceedsLimit) && ((0, jsx_runtime_1.jsxs)("div", { style: {
166
188
  display: 'flex',
167
189
  alignItems: 'center',
168
190
  padding: 8,
@@ -181,18 +203,18 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
181
203
  gap: 6,
182
204
  overflow: 'hidden',
183
205
  }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
184
- .quill-option {
185
- background: white;
186
- }
187
- .quill-option:hover {
188
- background: #F4F4F5;
206
+ .quill-option {
207
+ background: white;
189
208
  }
190
- ` }), (0, jsx_runtime_1.jsx)("span", { style: {
209
+ .quill-option:hover {
210
+ background: #F4F4F5;
211
+ }
212
+ ` }), (0, jsx_runtime_1.jsx)("span", { style: {
191
213
  textOverflow: 'ellipsis',
192
214
  whiteSpace: 'nowrap',
193
215
  overflow: 'hidden',
194
216
  cursor: 'default',
195
- }, children: "No options available" })] })), !isLoading ? (filteredItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
217
+ }, children: exceedsLimit ? 'Too many options' : 'No options available' })] })), !exceedsLimit && !isLoading ? (filteredItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
196
218
  display: 'flex',
197
219
  alignItems: 'center',
198
220
  padding: 8,
@@ -233,17 +255,17 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
233
255
  }
234
256
  debounce(updatedChangeEvent);
235
257
  }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
236
- .quill-option {
237
- background: white;
238
- }
239
- .quill-option:hover {
240
- background: #F4F4F5;
258
+ .quill-option {
259
+ background: white;
241
260
  }
242
- ` }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
261
+ .quill-option:hover {
262
+ background: #F4F4F5;
263
+ }
264
+ ` }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
243
265
  textOverflow: 'ellipsis',
244
266
  whiteSpace: 'nowrap',
245
267
  overflow: 'hidden',
246
- }, children: option.label })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }))] }));
268
+ }, children: option.label ?? nullLabel })] }, option.value)))) : isLoading ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : null] }))] }));
247
269
  }
248
270
  exports.QuillMultiSelectComponentWithCombo = QuillMultiSelectComponentWithCombo;
249
271
  const ListboxTextInput = ({ value, onChange, placeholder, }) => {
@@ -2,5 +2,5 @@ import { SelectComponentProps } from './UiComponents';
2
2
  /**
3
3
  * A robust select component that implements the new minimal Select interface.
4
4
  */
5
- export declare function QuillSelectComponent({ options, value, width, onChange, label, isLoading, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
5
+ export declare function QuillSelectComponent({ options, value, width, onChange, label, isLoading, disabled, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
6
6
  //# sourceMappingURL=QuillSelect.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAItE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE,oBAAoB,2CAiNtB"}
1
+ {"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAItE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE,oBAAoB,2CA8OtB"}
@@ -9,11 +9,26 @@ const Context_1 = require("../Context");
9
9
  /**
10
10
  * A robust select component that implements the new minimal Select interface.
11
11
  */
12
- function QuillSelectComponent({ options, value, width, onChange, label, isLoading, }) {
12
+ function QuillSelectComponent({ options, value, width, onChange, label, isLoading, disabled, }) {
13
13
  const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
14
14
  const [showModal, setShowModal] = (0, react_1.useState)(false);
15
15
  const modalRef = (0, react_1.useRef)(null);
16
16
  (0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false));
17
+ const sortedItems = (0, react_1.useMemo)(() => {
18
+ // Sort null to top
19
+ return options.sort((a, b) => {
20
+ if (a.value === null) {
21
+ return -1;
22
+ }
23
+ if (b.value === null) {
24
+ return 1;
25
+ }
26
+ return a.label.localeCompare(b.label);
27
+ });
28
+ }, [options]);
29
+ const nullLabel = (0, react_1.useMemo)(() => {
30
+ return sortedItems.some((item) => item.value === '-') ? 'None' : '-';
31
+ }, [sortedItems]);
17
32
  return ((0, jsx_runtime_1.jsxs)("div", { style: {
18
33
  position: 'relative',
19
34
  // width: 200,
@@ -27,7 +42,7 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
27
42
  fontFamily: theme?.fontFamily,
28
43
  paddingBottom: 5,
29
44
  fontWeight: 600,
30
- }, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
45
+ }, children: label ?? nullLabel })), (0, jsx_runtime_1.jsxs)("button", { style: {
31
46
  fontFamily: theme?.fontFamily,
32
47
  color: theme?.primaryTextColor,
33
48
  width: '100%',
@@ -48,7 +63,14 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
48
63
  height: 40,
49
64
  minHeight: 40,
50
65
  maxHeight: 40,
51
- }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; } .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }` }), (0, jsx_runtime_1.jsx)("span", { style: {
66
+ }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: `
67
+ .quill-select-button { background: ${theme?.backgroundColor}; }
68
+ .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
69
+ .quill-select-button:disabled {
70
+ opacity: 0.5;
71
+ cursor: not-allowed;
72
+ }
73
+ ` }), (0, jsx_runtime_1.jsx)("span", { style: {
52
74
  textOverflow: 'ellipsis',
53
75
  whiteSpace: 'nowrap',
54
76
  overflow: 'hidden',
@@ -95,7 +117,7 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
95
117
  const changeEvent = { target: { value: '' } };
96
118
  onChange(changeEvent);
97
119
  setShowModal(false);
98
- }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
120
+ }, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: `
99
121
  .quill-option {
100
122
  background: white;
101
123
  }
@@ -125,7 +147,7 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
125
147
  const changeEvent = { target: { value: option.value } };
126
148
  onChange(changeEvent);
127
149
  setShowModal(false);
128
- }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
150
+ }, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("style", { children: `
129
151
  .quill-option {
130
152
  background: white;
131
153
  }
@@ -136,6 +158,6 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
136
158
  textOverflow: 'ellipsis',
137
159
  whiteSpace: 'nowrap',
138
160
  overflow: 'hidden',
139
- }, children: option.label })] }, option.label)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }))] }));
161
+ }, children: option.label ?? '-' })] }, option.label)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }))] }));
140
162
  }
141
163
  exports.QuillSelectComponent = QuillSelectComponent;
@@ -1 +1 @@
1
- {"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAWtE;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE,oBAAoB,2CAwPtB"}
1
+ {"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAWtE;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE,oBAAoB,2CA8QtB"}
@@ -38,28 +38,49 @@ function QuillSelectComponentWithCombo({ options, value, width, onChange, label,
38
38
  const [showModal, setShowModal] = (0, react_1.useState)(false);
39
39
  const modalRef = (0, react_1.useRef)(null);
40
40
  const [searchQuery, setSearchQuery] = react_1.default.useState('');
41
- const [filteredItems, setFilteredItems] = react_1.default.useState([]);
42
- (0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false));
43
- (0, react_1.useEffect)(() => {
44
- setFilteredItems(options.slice(0, 20));
45
- }, [options]);
46
- const handleSearchChange = (value) => {
47
- setSearchQuery(value);
48
- const curFilteredItems = value === ''
49
- ? options.slice(0, 20)
50
- : options
51
- .filter((option) => {
52
- if (!option) {
53
- return false;
41
+ const filteredItems = react_1.default.useMemo(function () {
42
+ // Sort null to top
43
+ if (searchQuery === '') {
44
+ return options.sort((a, b) => {
45
+ if (a.value === null) {
46
+ return -1;
47
+ }
48
+ if (b.value === null) {
49
+ return 1;
54
50
  }
55
- return option.value
56
- .toLowerCase()
57
- .replace(/\s+/g, '')
58
- .includes(value.toLowerCase().replace(/\s+/g, ''));
59
- })
60
- .slice(0, 20);
61
- setFilteredItems(curFilteredItems);
62
- };
51
+ return a.label.localeCompare(b.label);
52
+ });
53
+ }
54
+ return options
55
+ .filter((option) => {
56
+ if (!option) {
57
+ return false;
58
+ }
59
+ return option.value
60
+ .toLowerCase()
61
+ .replace(/\s+/g, '')
62
+ .includes(searchQuery.toLowerCase().replace(/\s+/g, ''));
63
+ })
64
+ .sort((a, b) => {
65
+ if (a.value === null) {
66
+ return -1;
67
+ }
68
+ if (b.value === null) {
69
+ return 1;
70
+ }
71
+ return a.label.localeCompare(b.label);
72
+ })
73
+ .slice(0, 20);
74
+ }, [options, searchQuery]);
75
+ const nullLabel = (0, react_1.useMemo)(() => {
76
+ return filteredItems.some((item) => item.value === '-') ? 'None' : '-';
77
+ }, [filteredItems]);
78
+ const selectedLabel = (0, react_1.useMemo)(() => {
79
+ const selectedOption = options.find((elem) => elem.value === value);
80
+ return selectedOption && selectedOption.label == null
81
+ ? nullLabel
82
+ : selectedOption?.label ?? 'Select';
83
+ }, [value, options, nullLabel]);
63
84
  (0, hooks_1.useOnClickOutside)(modalRef, () => setShowModal(false));
64
85
  return ((0, jsx_runtime_1.jsxs)("div", { style: {
65
86
  position: 'relative',
@@ -99,7 +120,7 @@ function QuillSelectComponentWithCombo({ options, value, width, onChange, label,
99
120
  textOverflow: 'ellipsis',
100
121
  whiteSpace: 'nowrap',
101
122
  overflow: 'hidden',
102
- }, children: options.find((elem) => elem.value === value)?.label || 'Select' }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && ((0, jsx_runtime_1.jsxs)("div", { ref: modalRef, style: {
123
+ }, children: selectedLabel }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && ((0, jsx_runtime_1.jsxs)("div", { ref: modalRef, style: {
103
124
  position: 'absolute',
104
125
  width: '100%',
105
126
  display: 'flex',
@@ -121,7 +142,7 @@ function QuillSelectComponentWithCombo({ options, value, width, onChange, label,
121
142
  overflow: 'scroll',
122
143
  fontSize: 14,
123
144
  }, children: [options && options.length > 20 && !isLoading && ((0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
124
- handleSearchChange(value);
145
+ setSearchQuery(value);
125
146
  } })), searchQuery === '' && !isLoading && ((0, jsx_runtime_1.jsxs)("button", { style: {
126
147
  display: 'flex',
127
148
  alignItems: 'center',
@@ -186,6 +207,6 @@ function QuillSelectComponentWithCombo({ options, value, width, onChange, label,
186
207
  textOverflow: 'ellipsis',
187
208
  whiteSpace: 'nowrap',
188
209
  overflow: 'hidden',
189
- }, children: option.label })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }))] }));
210
+ }, children: option.label ?? nullLabel })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}))] }))] }));
190
211
  }
191
212
  exports.QuillSelectComponentWithCombo = QuillSelectComponentWithCombo;
@@ -3,6 +3,7 @@ import { ButtonComponentProps } from './UiComponents';
3
3
  export interface TableComponentProps {
4
4
  rows: object[];
5
5
  rowCount?: number;
6
+ rowCountIsLoading?: boolean;
6
7
  columns: {
7
8
  label: string;
8
9
  field: string;
@@ -27,5 +28,5 @@ export interface TableComponentProps {
27
28
  direction: string;
28
29
  }) => void;
29
30
  }
30
- export default function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hideCSVDownloadButton, containerStyle, className, LoadingComponent, rowsPerPage, emptyStateLabel, downloadCSV, onPageChange, onSortChange, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
31
+ export default function QuillTable({ rows, rowCount, rowCountIsLoading, columns, isLoading, currentPage, sort, hideCSVDownloadButton, containerStyle, className, LoadingComponent, rowsPerPage, emptyStateLabel, downloadCSV, onPageChange, onSortChange, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
31
32
  //# sourceMappingURL=QuillTable.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,oBAAoB,EAAyB,MAAM,gBAAgB,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,WAAW,EACX,IAAI,EACJ,qBAA4B,EAC5B,cAAc,EACd,SAAS,EACT,gBAAwC,EACxC,WAAgB,EAChB,eAA8B,EAC9B,WAAW,EACX,YAAY,EACZ,YAAY,GACb,EAAE,mBAAmB,2CA+crB"}
1
+ {"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,oBAAoB,EAAyB,MAAM,gBAAgB,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,WAAW,EACX,IAAI,EACJ,qBAA4B,EAC5B,cAAc,EACd,SAAS,EACT,gBAAwC,EACxC,WAAgB,EAChB,eAA8B,EAC9B,WAAW,EACX,YAAY,EACZ,YAAY,GACb,EAAE,mBAAmB,2CAidrB"}
@@ -5,7 +5,7 @@ const react_1 = require("react");
5
5
  const valueFormatter_1 = require("../utils/valueFormatter");
6
6
  const Context_1 = require("../Context");
7
7
  const UiComponents_1 = require("./UiComponents");
8
- function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hideCSVDownloadButton = true, containerStyle, className, LoadingComponent = UiComponents_1.QuillLoadingComponent, rowsPerPage = 10, emptyStateLabel = 'No results', downloadCSV, onPageChange, onSortChange, }) {
8
+ function QuillTable({ rows, rowCount, rowCountIsLoading, columns, isLoading, currentPage, sort, hideCSVDownloadButton = true, containerStyle, className, LoadingComponent = UiComponents_1.QuillLoadingComponent, rowsPerPage = 10, emptyStateLabel = 'No results', downloadCSV, onPageChange, onSortChange, }) {
9
9
  const [activeRows, setActiveRows] = (0, react_1.useState)([]);
10
10
  const [pageIndex, setPageIndex] = (0, react_1.useState)(currentPage || 0);
11
11
  const [maxPage, setMaxPage] = (0, react_1.useState)(1);
@@ -13,16 +13,16 @@ function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hid
13
13
  const [sortDirection, setSortDirection] = (0, react_1.useState)(sort?.direction || 'desc');
14
14
  const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
15
15
  const [isPaginating, setIsPaginating] = (0, react_1.useState)(true);
16
- const [initialLoad, setInitialLoad] = (0, react_1.useState)(isLoading);
16
+ const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
17
17
  (0, react_1.useEffect)(() => {
18
18
  setSortColumn(sort?.field || '');
19
19
  setSortDirection(sort?.direction || 'desc');
20
20
  }, [sort]);
21
21
  (0, react_1.useEffect)(() => {
22
- setIsPaginating(true);
23
22
  if (rows?.length === 0 && isLoading) {
24
23
  return;
25
24
  }
25
+ setIsPaginating(true);
26
26
  const start = pageIndex * rowsPerPage;
27
27
  const end = (pageIndex + 1) * rowsPerPage;
28
28
  if (rowCount && onSortChange && rowCount !== rows.length) {
@@ -104,6 +104,7 @@ function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hid
104
104
  margin: 0,
105
105
  boxSizing: 'border-box',
106
106
  outline: 'none',
107
+ position: 'relative',
107
108
  }, children: (0, jsx_runtime_1.jsxs)("div", { role: "table", className: "table", style: {
108
109
  display: 'flex',
109
110
  flexDirection: 'column',
@@ -177,6 +178,8 @@ function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hid
177
178
  alignItems: 'center',
178
179
  fontSize: 13,
179
180
  color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
181
+ position: 'absolute',
182
+ width: '100%',
180
183
  }, children: emptyStateLabel })) : ((0, jsx_runtime_1.jsx)("div", { role: "rowgroup", className: "tbody", children: activeRows &&
181
184
  activeRows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
182
185
  display: isPaginating || isLoading ? 'none' : 'flex',
@@ -261,7 +264,7 @@ function QuillTable({ rows, rowCount, columns, isLoading, currentPage, sort, hid
261
264
  fontSize: 12,
262
265
  fontFamily: theme?.fontFamily,
263
266
  color: theme?.primaryTextColor,
264
- }, children: [pageIndex + 1, ' of ', maxPage] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8 } }), (0, jsx_runtime_1.jsx)("button", { onClick: decreasePage, style: {
267
+ }, children: [pageIndex + 1, ' of ', rowCountIsLoading && maxPage >= 30 ? 'many' : maxPage] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 8 } }), (0, jsx_runtime_1.jsx)("button", { onClick: decreasePage, style: {
265
268
  cursor: 'pointer',
266
269
  border: 'none',
267
270
  background: 'transparent',
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { ButtonComponentProps, TextInputComponentProps } from '../UiComponents';
3
3
  import { LimitPopoverComponentProps } from './ui';
4
- export declare const LimitSentence: ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle, LimitPopover, EditPopover, TextInput, Button, SecondaryButton, }: {
4
+ export declare const LimitSentence: ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle, LimitPopover, EditPopover, TextInput, Button, SecondaryButton, disabled, }: {
5
5
  limit: any;
6
6
  handleDelete: () => void;
7
7
  setOpenPopover: (arg: any) => void;
@@ -12,6 +12,7 @@ export declare const LimitSentence: ({ limit, handleDelete, setOpenPopover, onSa
12
12
  TextInput: any;
13
13
  Button: (props: ButtonComponentProps) => JSX.Element;
14
14
  SecondaryButton: (props: ButtonComponentProps) => JSX.Element;
15
+ disabled?: boolean | undefined;
15
16
  }) => import("react/jsx-runtime").JSX.Element;
16
17
  export interface AddLimitPopoverProps {
17
18
  onSave: (limit: number) => void;
@@ -1 +1 @@
1
- {"version":3,"file":"AddLimitPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddLimitPopover.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,oBAAoB,EAIpB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,MAAM,CAAC;AAElD,eAAO,MAAM,aAAa;WAYjB,GAAG;kBACI,MAAM,IAAI;0BACF,GAAG,KAAK,IAAI;qBACjB,GAAG,aAAa,GAAG,KAAK,IAAI;;0BAEvB,0BAA0B,KAAK,WAAW;iBACnD,GAAG;eACL,GAAG;oBACE,oBAAoB,KAAK,WAAW;6BAC3B,oBAAoB,KAAK,WAAW;6CAiC9D,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kBAAkB,CAAC,EACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC,GACjD,KAAK,CAAC,yBAAyB,CAC7B,uBAAuB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAChE,CAAC;IACN,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CAChE;AAED,eAAO,MAAM,eAAe,6FAQzB,oBAAoB,4CAwEtB,CAAC"}
1
+ {"version":3,"file":"AddLimitPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddLimitPopover.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,oBAAoB,EAIpB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,MAAM,CAAC;AAElD,eAAO,MAAM,aAAa;WAajB,GAAG;kBACI,MAAM,IAAI;0BACF,GAAG,KAAK,IAAI;qBACjB,GAAG,aAAa,GAAG,KAAK,IAAI;;0BAEvB,0BAA0B,KAAK,WAAW;iBACnD,GAAG;eACL,GAAG;oBACE,oBAAoB,KAAK,WAAW;6BAC3B,oBAAoB,KAAK,WAAW;;6CAmC9D,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kBAAkB,CAAC,EACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC,GACjD,KAAK,CAAC,yBAAyB,CAC7B,uBAAuB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAChE,CAAC;IACN,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CAChE;AAED,eAAO,MAAM,eAAe,6FAQzB,oBAAoB,4CAwEtB,CAAC"}
@@ -4,13 +4,13 @@ exports.AddLimitPopover = exports.LimitSentence = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const UiComponents_1 = require("../UiComponents");
7
- const LimitSentence = ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle = 'Edit limit', LimitPopover, EditPopover, TextInput = UiComponents_1.QuillTextInput, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, }) => {
7
+ const LimitSentence = ({ limit, handleDelete, setOpenPopover, onSave, popoverTitle = 'Edit limit', LimitPopover, EditPopover, TextInput = UiComponents_1.QuillTextInput, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, disabled = false, }) => {
8
8
  const [isOpen, setIsOpen] = (0, react_1.useState)(false);
9
9
  const handleClickDelete = () => {
10
10
  setOpenPopover(null);
11
11
  handleDelete();
12
12
  };
13
- return ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(LimitPopover, { isOpen: isOpen, setIsOpen: setIsOpen, limitLabel: `limit ${limit.value[0].value}`, onClickDelete: handleClickDelete, popoverTitle: popoverTitle, popoverChildren: (0, jsx_runtime_1.jsx)(EditPopover, { onSave: (column, direction) => {
13
+ return ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(LimitPopover, { isOpen: isOpen, setIsOpen: setIsOpen, limitLabel: `limit ${limit.value[0].value}`, onClickDelete: handleClickDelete, disabled: disabled, popoverTitle: popoverTitle, popoverChildren: (0, jsx_runtime_1.jsx)(EditPopover, { onSave: (column, direction) => {
14
14
  setIsOpen(false);
15
15
  onSave(column, direction);
16
16
  }, isEdit: true, onDelete: handleClickDelete, initialLimit: limit.value[0].value, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton }) }) }));