@quillsql/react 2.13.48 → 2.13.50

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 (297) hide show
  1. package/dist/cjs/Chart.d.ts +2 -2
  2. package/dist/cjs/Chart.d.ts.map +1 -1
  3. package/dist/cjs/Chart.js +31 -43
  4. package/dist/cjs/ChartBuilder.d.ts +2 -2
  5. package/dist/cjs/ChartBuilder.d.ts.map +1 -1
  6. package/dist/cjs/ChartBuilder.js +172 -147
  7. package/dist/cjs/ChartEditor.d.ts +2 -2
  8. package/dist/cjs/ChartEditor.d.ts.map +1 -1
  9. package/dist/cjs/ChartEditor.js +3 -1
  10. package/dist/cjs/Context.d.ts +10 -3
  11. package/dist/cjs/Context.d.ts.map +1 -1
  12. package/dist/cjs/Context.js +328 -250
  13. package/dist/cjs/Dashboard.d.ts.map +1 -1
  14. package/dist/cjs/Dashboard.js +12 -25
  15. package/dist/cjs/DateRangePicker/QuillDateRangePicker.d.ts.map +1 -1
  16. package/dist/cjs/DateRangePicker/QuillDateRangePicker.js +32 -14
  17. package/dist/cjs/DateRangePicker/dateRangePickerUtils.d.ts +24 -10
  18. package/dist/cjs/DateRangePicker/dateRangePickerUtils.d.ts.map +1 -1
  19. package/dist/cjs/DateRangePicker/dateRangePickerUtils.js +472 -96
  20. package/dist/cjs/QuillProvider.d.ts +7 -1
  21. package/dist/cjs/QuillProvider.d.ts.map +1 -1
  22. package/dist/cjs/QuillProvider.js +6 -5
  23. package/dist/cjs/ReportBuilder.d.ts.map +1 -1
  24. package/dist/cjs/ReportBuilder.js +23 -11
  25. package/dist/cjs/SQLEditor.d.ts +1 -1
  26. package/dist/cjs/SQLEditor.d.ts.map +1 -1
  27. package/dist/cjs/SQLEditor.js +52 -18
  28. package/dist/cjs/Table.d.ts.map +1 -1
  29. package/dist/cjs/Table.js +20 -7
  30. package/dist/cjs/assets/ExclamationFilledIcon.d.ts.map +1 -1
  31. package/dist/cjs/components/Chart/BarChart.d.ts.map +1 -1
  32. package/dist/cjs/components/Chart/BarChart.js +4 -2
  33. package/dist/cjs/components/Chart/BarList.d.ts.map +1 -1
  34. package/dist/cjs/components/Chart/BarList.js +2 -1
  35. package/dist/cjs/components/Chart/CustomReferenceLine.d.ts +1 -1
  36. package/dist/cjs/components/Chart/CustomReferenceLine.d.ts.map +1 -1
  37. package/dist/cjs/components/Chart/CustomReferenceLine.js +7 -6
  38. package/dist/cjs/components/Chart/GaugeChart.d.ts +1 -1
  39. package/dist/cjs/components/Chart/GaugeChart.d.ts.map +1 -1
  40. package/dist/cjs/components/Chart/GaugeChart.js +62 -35
  41. package/dist/cjs/components/Chart/InternalChart.d.ts.map +1 -1
  42. package/dist/cjs/components/Chart/InternalChart.js +32 -34
  43. package/dist/cjs/components/Chart/LineChart.d.ts.map +1 -1
  44. package/dist/cjs/components/Chart/LineChart.js +5 -2
  45. package/dist/cjs/components/Chart/MapChart.d.ts +3 -3
  46. package/dist/cjs/components/Chart/MapChart.d.ts.map +1 -1
  47. package/dist/cjs/components/Chart/MapChart.js +62 -34
  48. package/dist/cjs/components/Chart/PieChart.d.ts +3 -1
  49. package/dist/cjs/components/Chart/PieChart.d.ts.map +1 -1
  50. package/dist/cjs/components/Chart/PieChart.js +82 -40
  51. package/dist/cjs/components/Dashboard/DashboardFilter.d.ts.map +1 -1
  52. package/dist/cjs/components/Dashboard/DashboardFilter.js +4 -20
  53. package/dist/cjs/components/Dashboard/DashboardTemplate.d.ts.map +1 -1
  54. package/dist/cjs/components/Dashboard/DashboardTemplate.js +2 -1
  55. package/dist/cjs/components/Dashboard/DataLoader.d.ts +4 -4
  56. package/dist/cjs/components/Dashboard/DataLoader.d.ts.map +1 -1
  57. package/dist/cjs/components/Dashboard/DataLoader.js +31 -14
  58. package/dist/cjs/components/Dashboard/MetricComponent.js +4 -3
  59. package/dist/cjs/components/Dashboard/util.d.ts +1 -1
  60. package/dist/cjs/components/Dashboard/util.d.ts.map +1 -1
  61. package/dist/cjs/components/Dashboard/util.js +7 -6
  62. package/dist/cjs/components/QuillMultiSelect.d.ts.map +1 -1
  63. package/dist/cjs/components/QuillMultiSelect.js +15 -9
  64. package/dist/cjs/components/QuillMultiSelectSectionList.d.ts.map +1 -1
  65. package/dist/cjs/components/QuillMultiSelectSectionList.js +52 -34
  66. package/dist/cjs/components/QuillMultiSelectWithCombo.d.ts.map +1 -1
  67. package/dist/cjs/components/QuillMultiSelectWithCombo.js +204 -171
  68. package/dist/cjs/components/QuillSelect.d.ts.map +1 -1
  69. package/dist/cjs/components/QuillSelect.js +93 -82
  70. package/dist/cjs/components/QuillSelectWithCombo.d.ts.map +1 -1
  71. package/dist/cjs/components/QuillSelectWithCombo.js +101 -99
  72. package/dist/cjs/components/QuillTable.d.ts.map +1 -1
  73. package/dist/cjs/components/QuillTable.js +1 -0
  74. package/dist/cjs/components/ReportBuilder/FilterStack.d.ts +2 -1
  75. package/dist/cjs/components/ReportBuilder/FilterStack.d.ts.map +1 -1
  76. package/dist/cjs/components/ReportBuilder/FilterStack.js +3 -4
  77. package/dist/cjs/components/ReportBuilder/ui.d.ts +2 -2
  78. package/dist/cjs/components/ReportBuilder/ui.d.ts.map +1 -1
  79. package/dist/cjs/components/ReportBuilder/ui.js +5 -7
  80. package/dist/cjs/components/UiComponents.d.ts +7 -0
  81. package/dist/cjs/components/UiComponents.d.ts.map +1 -1
  82. package/dist/cjs/components/UiComponents.js +92 -5
  83. package/dist/cjs/hooks/useAskQuill.d.ts.map +1 -1
  84. package/dist/cjs/hooks/useAskQuill.js +5 -1
  85. package/dist/cjs/hooks/useDashboard.d.ts.map +1 -1
  86. package/dist/cjs/hooks/useDashboard.js +96 -58
  87. package/dist/cjs/hooks/useExport.d.ts.map +1 -1
  88. package/dist/cjs/hooks/useExport.js +23 -13
  89. package/dist/cjs/hooks/useOnClickOutside.d.ts.map +1 -1
  90. package/dist/cjs/hooks/useQuill.d.ts.map +1 -1
  91. package/dist/cjs/hooks/useQuill.js +8 -10
  92. package/dist/cjs/hooks/useReport.d.ts.map +1 -1
  93. package/dist/cjs/hooks/useVirtualTables.d.ts.map +1 -1
  94. package/dist/cjs/hooks/useVirtualTables.js +16 -22
  95. package/dist/cjs/index.d.ts +2 -2
  96. package/dist/cjs/index.d.ts.map +1 -1
  97. package/dist/cjs/index.js +2 -1
  98. package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts +2 -1
  99. package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
  100. package/dist/cjs/internals/ReportBuilder/PivotModal.js +19 -7
  101. package/dist/cjs/models/Client.d.ts +0 -1
  102. package/dist/cjs/models/Client.d.ts.map +1 -1
  103. package/dist/cjs/models/Data.d.ts +20 -0
  104. package/dist/cjs/models/Data.d.ts.map +1 -0
  105. package/dist/cjs/models/Data.js +2 -0
  106. package/dist/cjs/models/Filter.d.ts +42 -4
  107. package/dist/cjs/models/Filter.d.ts.map +1 -1
  108. package/dist/cjs/models/Pivot.d.ts.map +1 -1
  109. package/dist/cjs/utils/astProcessing.d.ts +3 -2
  110. package/dist/cjs/utils/astProcessing.d.ts.map +1 -1
  111. package/dist/cjs/utils/astProcessing.js +28 -37
  112. package/dist/cjs/utils/client.d.ts +3 -2
  113. package/dist/cjs/utils/client.d.ts.map +1 -1
  114. package/dist/cjs/utils/client.js +38 -39
  115. package/dist/cjs/utils/columnProcessing.d.ts.map +1 -1
  116. package/dist/cjs/utils/columnProcessing.js +14 -3
  117. package/dist/cjs/utils/constants.d.ts +1 -0
  118. package/dist/cjs/utils/constants.d.ts.map +1 -1
  119. package/dist/cjs/utils/constants.js +2 -1
  120. package/dist/cjs/utils/dashboard.d.ts +3 -2
  121. package/dist/cjs/utils/dashboard.d.ts.map +1 -1
  122. package/dist/cjs/utils/dashboard.js +30 -12
  123. package/dist/cjs/utils/dataFetcher.d.ts +8 -5
  124. package/dist/cjs/utils/dataFetcher.d.ts.map +1 -1
  125. package/dist/cjs/utils/dataFetcher.js +188 -65
  126. package/dist/cjs/utils/filterProcessing.d.ts +2 -1
  127. package/dist/cjs/utils/filterProcessing.d.ts.map +1 -1
  128. package/dist/cjs/utils/filterProcessing.js +24 -38
  129. package/dist/cjs/utils/getDomain.d.ts.map +1 -1
  130. package/dist/cjs/utils/pivotConstructor.d.ts +2 -1
  131. package/dist/cjs/utils/pivotConstructor.d.ts.map +1 -1
  132. package/dist/cjs/utils/pivotConstructor.js +15 -11
  133. package/dist/cjs/utils/pivotProcessing.d.ts.map +1 -1
  134. package/dist/cjs/utils/pivotProcessing.js +3 -5
  135. package/dist/cjs/utils/queryConstructor.js +1 -1
  136. package/dist/cjs/utils/report.d.ts +10 -7
  137. package/dist/cjs/utils/report.d.ts.map +1 -1
  138. package/dist/cjs/utils/report.js +52 -60
  139. package/dist/cjs/utils/schema.d.ts +4 -3
  140. package/dist/cjs/utils/schema.d.ts.map +1 -1
  141. package/dist/cjs/utils/schema.js +30 -44
  142. package/dist/cjs/utils/tableProcessing.d.ts +16 -10
  143. package/dist/cjs/utils/tableProcessing.d.ts.map +1 -1
  144. package/dist/cjs/utils/tableProcessing.js +91 -90
  145. package/dist/cjs/utils/textProcessing.d.ts.map +1 -1
  146. package/dist/cjs/utils/textProcessing.js +2 -1
  147. package/dist/cjs/utils/ui.d.ts.map +1 -1
  148. package/dist/esm/Chart.d.ts +2 -2
  149. package/dist/esm/Chart.d.ts.map +1 -1
  150. package/dist/esm/Chart.js +33 -45
  151. package/dist/esm/ChartBuilder.d.ts +2 -2
  152. package/dist/esm/ChartBuilder.d.ts.map +1 -1
  153. package/dist/esm/ChartBuilder.js +173 -148
  154. package/dist/esm/ChartEditor.d.ts +2 -2
  155. package/dist/esm/ChartEditor.d.ts.map +1 -1
  156. package/dist/esm/ChartEditor.js +4 -2
  157. package/dist/esm/Context.d.ts +10 -3
  158. package/dist/esm/Context.d.ts.map +1 -1
  159. package/dist/esm/Context.js +330 -252
  160. package/dist/esm/Dashboard.d.ts.map +1 -1
  161. package/dist/esm/Dashboard.js +14 -27
  162. package/dist/esm/DateRangePicker/QuillDateRangePicker.d.ts.map +1 -1
  163. package/dist/esm/DateRangePicker/QuillDateRangePicker.js +32 -14
  164. package/dist/esm/DateRangePicker/dateRangePickerUtils.d.ts +24 -10
  165. package/dist/esm/DateRangePicker/dateRangePickerUtils.d.ts.map +1 -1
  166. package/dist/esm/DateRangePicker/dateRangePickerUtils.js +471 -95
  167. package/dist/esm/QuillProvider.d.ts +7 -1
  168. package/dist/esm/QuillProvider.d.ts.map +1 -1
  169. package/dist/esm/QuillProvider.js +6 -5
  170. package/dist/esm/ReportBuilder.d.ts.map +1 -1
  171. package/dist/esm/ReportBuilder.js +25 -13
  172. package/dist/esm/SQLEditor.d.ts +1 -1
  173. package/dist/esm/SQLEditor.d.ts.map +1 -1
  174. package/dist/esm/SQLEditor.js +55 -21
  175. package/dist/esm/Table.d.ts.map +1 -1
  176. package/dist/esm/Table.js +21 -8
  177. package/dist/esm/assets/ExclamationFilledIcon.d.ts.map +1 -1
  178. package/dist/esm/components/Chart/BarChart.d.ts.map +1 -1
  179. package/dist/esm/components/Chart/BarChart.js +4 -2
  180. package/dist/esm/components/Chart/BarList.d.ts.map +1 -1
  181. package/dist/esm/components/Chart/BarList.js +2 -1
  182. package/dist/esm/components/Chart/CustomReferenceLine.d.ts +1 -1
  183. package/dist/esm/components/Chart/CustomReferenceLine.d.ts.map +1 -1
  184. package/dist/esm/components/Chart/CustomReferenceLine.js +8 -7
  185. package/dist/esm/components/Chart/GaugeChart.d.ts +1 -1
  186. package/dist/esm/components/Chart/GaugeChart.d.ts.map +1 -1
  187. package/dist/esm/components/Chart/GaugeChart.js +64 -37
  188. package/dist/esm/components/Chart/InternalChart.d.ts.map +1 -1
  189. package/dist/esm/components/Chart/InternalChart.js +34 -36
  190. package/dist/esm/components/Chart/LineChart.d.ts.map +1 -1
  191. package/dist/esm/components/Chart/LineChart.js +5 -2
  192. package/dist/esm/components/Chart/MapChart.d.ts +3 -3
  193. package/dist/esm/components/Chart/MapChart.d.ts.map +1 -1
  194. package/dist/esm/components/Chart/MapChart.js +67 -39
  195. package/dist/esm/components/Chart/PieChart.d.ts +3 -1
  196. package/dist/esm/components/Chart/PieChart.d.ts.map +1 -1
  197. package/dist/esm/components/Chart/PieChart.js +82 -40
  198. package/dist/esm/components/Dashboard/DashboardFilter.d.ts.map +1 -1
  199. package/dist/esm/components/Dashboard/DashboardFilter.js +5 -21
  200. package/dist/esm/components/Dashboard/DashboardSection.js +2 -2
  201. package/dist/esm/components/Dashboard/DashboardTemplate.d.ts.map +1 -1
  202. package/dist/esm/components/Dashboard/DashboardTemplate.js +3 -2
  203. package/dist/esm/components/Dashboard/DataLoader.d.ts +4 -4
  204. package/dist/esm/components/Dashboard/DataLoader.d.ts.map +1 -1
  205. package/dist/esm/components/Dashboard/DataLoader.js +32 -15
  206. package/dist/esm/components/Dashboard/MetricComponent.js +4 -3
  207. package/dist/esm/components/Dashboard/util.d.ts +1 -1
  208. package/dist/esm/components/Dashboard/util.d.ts.map +1 -1
  209. package/dist/esm/components/Dashboard/util.js +8 -7
  210. package/dist/esm/components/QuillMultiSelect.d.ts.map +1 -1
  211. package/dist/esm/components/QuillMultiSelect.js +15 -9
  212. package/dist/esm/components/QuillMultiSelectSectionList.d.ts.map +1 -1
  213. package/dist/esm/components/QuillMultiSelectSectionList.js +52 -34
  214. package/dist/esm/components/QuillMultiSelectWithCombo.d.ts.map +1 -1
  215. package/dist/esm/components/QuillMultiSelectWithCombo.js +205 -172
  216. package/dist/esm/components/QuillSelect.d.ts.map +1 -1
  217. package/dist/esm/components/QuillSelect.js +95 -84
  218. package/dist/esm/components/QuillSelectWithCombo.d.ts.map +1 -1
  219. package/dist/esm/components/QuillSelectWithCombo.js +102 -100
  220. package/dist/esm/components/QuillTable.d.ts.map +1 -1
  221. package/dist/esm/components/QuillTable.js +1 -0
  222. package/dist/esm/components/ReportBuilder/FilterStack.d.ts +2 -1
  223. package/dist/esm/components/ReportBuilder/FilterStack.d.ts.map +1 -1
  224. package/dist/esm/components/ReportBuilder/FilterStack.js +3 -4
  225. package/dist/esm/components/ReportBuilder/ui.d.ts +2 -2
  226. package/dist/esm/components/ReportBuilder/ui.d.ts.map +1 -1
  227. package/dist/esm/components/ReportBuilder/ui.js +5 -7
  228. package/dist/esm/components/UiComponents.d.ts +7 -0
  229. package/dist/esm/components/UiComponents.d.ts.map +1 -1
  230. package/dist/esm/components/UiComponents.js +90 -4
  231. package/dist/esm/hooks/useAskQuill.d.ts.map +1 -1
  232. package/dist/esm/hooks/useAskQuill.js +6 -2
  233. package/dist/esm/hooks/useDashboard.d.ts.map +1 -1
  234. package/dist/esm/hooks/useDashboard.js +98 -60
  235. package/dist/esm/hooks/useExport.d.ts.map +1 -1
  236. package/dist/esm/hooks/useExport.js +25 -15
  237. package/dist/esm/hooks/useOnClickOutside.d.ts.map +1 -1
  238. package/dist/esm/hooks/useQuill.d.ts.map +1 -1
  239. package/dist/esm/hooks/useQuill.js +9 -11
  240. package/dist/esm/hooks/useReport.d.ts.map +1 -1
  241. package/dist/esm/hooks/useReport.js +1 -1
  242. package/dist/esm/hooks/useVirtualTables.d.ts.map +1 -1
  243. package/dist/esm/hooks/useVirtualTables.js +17 -23
  244. package/dist/esm/index.d.ts +2 -2
  245. package/dist/esm/index.d.ts.map +1 -1
  246. package/dist/esm/index.js +1 -1
  247. package/dist/esm/internals/ReportBuilder/PivotModal.d.ts +2 -1
  248. package/dist/esm/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
  249. package/dist/esm/internals/ReportBuilder/PivotModal.js +20 -8
  250. package/dist/esm/models/Client.d.ts +0 -1
  251. package/dist/esm/models/Client.d.ts.map +1 -1
  252. package/dist/esm/models/Data.d.ts +20 -0
  253. package/dist/esm/models/Data.d.ts.map +1 -0
  254. package/dist/esm/models/Data.js +1 -0
  255. package/dist/esm/models/Filter.d.ts +42 -4
  256. package/dist/esm/models/Filter.d.ts.map +1 -1
  257. package/dist/esm/models/Pivot.d.ts.map +1 -1
  258. package/dist/esm/utils/astProcessing.d.ts +3 -2
  259. package/dist/esm/utils/astProcessing.d.ts.map +1 -1
  260. package/dist/esm/utils/astProcessing.js +28 -37
  261. package/dist/esm/utils/client.d.ts +3 -2
  262. package/dist/esm/utils/client.d.ts.map +1 -1
  263. package/dist/esm/utils/client.js +38 -39
  264. package/dist/esm/utils/columnProcessing.d.ts.map +1 -1
  265. package/dist/esm/utils/columnProcessing.js +14 -3
  266. package/dist/esm/utils/constants.d.ts +1 -0
  267. package/dist/esm/utils/constants.d.ts.map +1 -1
  268. package/dist/esm/utils/constants.js +1 -0
  269. package/dist/esm/utils/dashboard.d.ts +3 -2
  270. package/dist/esm/utils/dashboard.d.ts.map +1 -1
  271. package/dist/esm/utils/dashboard.js +31 -13
  272. package/dist/esm/utils/dataFetcher.d.ts +8 -5
  273. package/dist/esm/utils/dataFetcher.d.ts.map +1 -1
  274. package/dist/esm/utils/dataFetcher.js +186 -65
  275. package/dist/esm/utils/filterProcessing.d.ts +2 -1
  276. package/dist/esm/utils/filterProcessing.d.ts.map +1 -1
  277. package/dist/esm/utils/filterProcessing.js +25 -39
  278. package/dist/esm/utils/getDomain.d.ts.map +1 -1
  279. package/dist/esm/utils/pivotConstructor.d.ts +2 -1
  280. package/dist/esm/utils/pivotConstructor.d.ts.map +1 -1
  281. package/dist/esm/utils/pivotConstructor.js +16 -12
  282. package/dist/esm/utils/pivotProcessing.d.ts.map +1 -1
  283. package/dist/esm/utils/pivotProcessing.js +5 -7
  284. package/dist/esm/utils/queryConstructor.js +1 -1
  285. package/dist/esm/utils/report.d.ts +10 -7
  286. package/dist/esm/utils/report.d.ts.map +1 -1
  287. package/dist/esm/utils/report.js +53 -61
  288. package/dist/esm/utils/schema.d.ts +4 -3
  289. package/dist/esm/utils/schema.d.ts.map +1 -1
  290. package/dist/esm/utils/schema.js +30 -44
  291. package/dist/esm/utils/tableProcessing.d.ts +16 -10
  292. package/dist/esm/utils/tableProcessing.d.ts.map +1 -1
  293. package/dist/esm/utils/tableProcessing.js +93 -92
  294. package/dist/esm/utils/textProcessing.d.ts.map +1 -1
  295. package/dist/esm/utils/textProcessing.js +2 -1
  296. package/dist/esm/utils/ui.d.ts.map +1 -1
  297. package/package.json +2 -1
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import useOnClickOutside, { getEffectiveZIndex } from '../hooks/useOnClickOutside';
2
+ import useOnClickOutside, { getEffectiveZIndex, } from '../hooks/useOnClickOutside';
3
3
  import { LoadingSpinner } from './UiComponents';
4
4
  import React, { useContext, useEffect, useMemo, useRef, useState, } from 'react';
5
5
  import { ThemeContext } from '../Context';
@@ -120,15 +120,18 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
120
120
  if (!option) {
121
121
  return false;
122
122
  }
123
- return option.label
123
+ return (option.label
124
124
  .toString()
125
125
  .toLowerCase()
126
126
  .replace(/\s+/g, '')
127
- .includes(searchQuery.toLowerCase().replace(/\s+/g, ''))
128
- || (isNumber || isUuid ? option.value.toString()
129
- .toLowerCase()
130
- .replace(/\s+/g, '')
131
- .includes(searchQuery.toLowerCase().replace(/\s+/g, '')) : false);
127
+ .includes(searchQuery.toLowerCase().replace(/\s+/g, '')) ||
128
+ (isNumber || isUuid
129
+ ? option.value
130
+ .toString()
131
+ .toLowerCase()
132
+ .replace(/\s+/g, '')
133
+ .includes(searchQuery.toLowerCase().replace(/\s+/g, ''))
134
+ : false));
132
135
  })
133
136
  .sort((a, b) => {
134
137
  if (a.value === null) {
@@ -167,14 +170,19 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
167
170
  let mutationObserver;
168
171
  if (showModal && buttonRef.current) {
169
172
  updatePosition();
170
- setZ(getEffectiveZIndex(buttonRef.current));
173
+ setZ(getEffectiveZIndex(buttonRef.current) + 1);
171
174
  resizeObserver = new ResizeObserver(() => updatePosition());
172
175
  resizeObserver.observe(buttonRef.current);
173
176
  mutationObserver = new MutationObserver(() => updatePosition());
174
- mutationObserver.observe(buttonRef.current, { attributes: true, subtree: true });
177
+ mutationObserver.observe(buttonRef.current, {
178
+ attributes: true,
179
+ subtree: true,
180
+ });
175
181
  // Track scrolling of the nearest scrollable ancestor
176
182
  scrollableParentRef.current = getScrollableParent(buttonRef.current);
177
- scrollableParentRef.current.addEventListener('scroll', updatePosition, { passive: true });
183
+ scrollableParentRef.current.addEventListener('scroll', updatePosition, {
184
+ passive: true,
185
+ });
178
186
  const handleResize = () => requestAnimationFrame(updatePosition);
179
187
  window.addEventListener('resize', handleResize, { passive: true });
180
188
  return () => {
@@ -190,7 +198,7 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
190
198
  borderRadius: '6px',
191
199
  width: width,
192
200
  minWidth: width,
193
- ...style
201
+ ...style,
194
202
  }, children: [label && (_jsx("div", { style: {
195
203
  fontSize: 14,
196
204
  color: theme?.secondaryTextColor,
@@ -199,7 +207,6 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
199
207
  fontWeight: 600,
200
208
  }, children: label ?? nullLabel })), _jsxs("button", { style: {
201
209
  fontFamily: theme?.fontFamily,
202
- color: theme?.primaryTextColor,
203
210
  width: '100%',
204
211
  display: 'flex',
205
212
  alignItems: 'center',
@@ -219,8 +226,8 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
219
226
  height: 40,
220
227
  minHeight: 40,
221
228
  maxHeight: 40,
222
- }, className: 'quill-select-button', onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, ref: buttonRef, children: [_jsx("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; }
223
- .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
229
+ }, className: 'quill-select-button', onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, ref: buttonRef, children: [_jsx("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; color: ${theme?.primaryTextColor}; }
230
+ .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }
224
231
  .quill-select-button:disabled {
225
232
  cursor: not-allowed;
226
233
  background: ${theme?.hoverBackgroundColor};
@@ -232,183 +239,205 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
232
239
  width: '100%',
233
240
  textAlign: 'left',
234
241
  zIndex: 1,
235
- }, children: selectedOptionsLabel }), _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: _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 && createPortal(_jsxs("div", { style: {
236
- position: 'absolute',
237
- top: `${popoverPosition?.top ?? 0}px`,
238
- left: `${popoverPosition?.left ?? 0}px`,
239
- width: `${popoverPosition?.width ?? 0}px`,
240
- maxHeight: `${Math.max(popoverPosition?.maxHeight ?? 0, 100)}px`,
241
- minHeight: options.length > 2 ? 120 : options.length * 40,
242
- visibility: popoverPosition ? 'visible' : 'hidden',
243
- display: 'flex',
244
- flexDirection: 'column',
245
- boxSizing: 'border-box',
246
- borderWidth: 1,
247
- borderStyle: 'solid',
248
- borderColor: theme?.borderColor,
249
- borderRadius: 6,
250
- background: 'white',
251
- marginTop: 12,
252
- zIndex: z,
253
- padding: 6,
254
- fontFamily: theme?.fontFamily,
255
- overflow: 'scroll',
256
- fontSize: 14,
257
- }, ref: modalRef, "data-portal-ignore": "true", children: [!exceedsLimit && options && options.length > 20 && (_jsxs(_Fragment, { children: [_jsx(ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
258
- setSearchQuery(value);
259
- } }), _jsx("div", { style: {
260
- height: 9,
261
- width: 230,
262
- borderTop: '1px solid #e7e7e7',
263
- } })] })), !isLoading &&
264
- (!filteredItems || filteredItems.length === 0 || exceedsLimit) && (_jsxs("div", { style: {
265
- display: 'flex',
266
- alignItems: 'center',
267
- padding: 8,
268
- margin: 0,
269
- boxSizing: 'border-box',
270
- borderWidth: 0,
271
- fontSize: 14,
272
- borderStyle: 'solid',
273
- borderColor: theme?.borderColor,
274
- borderRadius: 4,
275
- fontFamily: theme?.fontFamily,
276
- textOverflow: 'ellipsis',
277
- whiteSpace: 'nowrap',
278
- height: 34,
279
- minHeight: 34,
280
- gap: 6,
281
- overflow: 'hidden',
282
- }, children: [_jsx("style", { children: `
242
+ fontWeight: value?.length || isLoading ? undefined : 300,
243
+ }, children: selectedOptionsLabel }), _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: _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 &&
244
+ createPortal(_jsxs("div", { style: {
245
+ position: 'absolute',
246
+ top: `${popoverPosition?.top ?? 0}px`,
247
+ left: `${popoverPosition?.left ?? 0}px`,
248
+ width: `${popoverPosition?.width ?? 0}px`,
249
+ maxHeight: `${Math.max(popoverPosition?.maxHeight ?? 0, 100)}px`,
250
+ minHeight: options.length > 2 ? 120 : options.length * 40,
251
+ visibility: popoverPosition ? 'visible' : 'hidden',
252
+ display: 'flex',
253
+ flexDirection: 'column',
254
+ boxSizing: 'border-box',
255
+ borderWidth: 1,
256
+ borderStyle: 'solid',
257
+ borderColor: theme?.borderColor,
258
+ borderRadius: 6,
259
+ background: theme?.backgroundColor,
260
+ marginTop: 12,
261
+ zIndex: z,
262
+ padding: 6,
263
+ fontFamily: theme?.fontFamily,
264
+ overflow: 'scroll',
265
+ fontSize: 14,
266
+ }, ref: modalRef, "data-portal-ignore": "true", children: [!exceedsLimit && options && options.length > 20 && (_jsxs(_Fragment, { children: [_jsx(ListboxTextInput, { value: searchQuery, placeholder: "Search", onChange: (value) => {
267
+ setSearchQuery(value);
268
+ } }), _jsx("div", { style: {
269
+ height: 9,
270
+ width: 230,
271
+ borderTop: '1px solid #e7e7e7',
272
+ } })] })), !isLoading &&
273
+ (!filteredItems ||
274
+ filteredItems.length === 0 ||
275
+ exceedsLimit) && (_jsxs("div", { style: {
276
+ display: 'flex',
277
+ alignItems: 'center',
278
+ padding: 8,
279
+ margin: 0,
280
+ boxSizing: 'border-box',
281
+ borderWidth: 0,
282
+ fontSize: 14,
283
+ borderStyle: 'solid',
284
+ borderColor: theme?.borderColor,
285
+ borderRadius: 4,
286
+ fontFamily: theme?.fontFamily,
287
+ textOverflow: 'ellipsis',
288
+ whiteSpace: 'nowrap',
289
+ height: 34,
290
+ minHeight: 34,
291
+ gap: 6,
292
+ overflow: 'hidden',
293
+ }, children: [_jsx("style", { children: `
283
294
  .quill-option {
284
- background: white;
295
+ background: ${theme?.backgroundColor};
296
+ color: ${theme?.primaryTextColor};
285
297
  }
286
298
  .quill-option:hover {
287
- background: #F4F4F5;
299
+ background: ${theme?.hoverBackgroundColor};
300
+ color: ${theme?.hoverTextColor};
288
301
  }
289
302
  ` }), _jsx("span", { style: {
290
- textOverflow: 'ellipsis',
291
- whiteSpace: 'nowrap',
292
- overflow: 'hidden',
293
- cursor: 'default',
294
- }, children: exceedsLimit
295
- ? 'Too many options'
296
- : (emptyLabel ?? 'No options available') })] })), !exceedsLimit && !isLoading ? (_jsxs(_Fragment, { children: [searchQuery === '' && potentialOptions.length > 0 && (_jsxs("button", { style: {
297
- display: 'flex',
298
- alignItems: 'center',
299
- padding: 8,
300
- margin: 0,
301
- boxSizing: 'border-box',
302
- borderWidth: 0,
303
- fontSize: 14,
304
- borderStyle: 'solid',
305
- borderColor: theme?.borderColor,
306
- borderRadius: 4,
307
- fontFamily: theme?.fontFamily,
308
- textOverflow: 'ellipsis',
309
- whiteSpace: 'nowrap',
310
- height: 34,
311
- minHeight: 34,
312
- gap: 6,
313
- overflow: 'hidden',
314
- }, className: "quill-option", onClick: () => {
315
- // if any are selected, deselect all
316
- if (selectAllCheckboxState === CheckboxState.SELECTED ||
317
- selectAllCheckboxState === CheckboxState.INDETERMINATE) {
318
- setSelectAllCheckboxState(CheckboxState.UNSELECTED);
319
- setSelectedOptions([]);
303
+ textOverflow: 'ellipsis',
304
+ whiteSpace: 'nowrap',
305
+ overflow: 'hidden',
306
+ cursor: 'default',
307
+ }, children: exceedsLimit
308
+ ? 'Too many options'
309
+ : (emptyLabel ?? 'No options available') })] })), !exceedsLimit && !isLoading ? (_jsxs(_Fragment, { children: [searchQuery === '' && potentialOptions.length > 0 && (_jsxs("button", { style: {
310
+ display: 'flex',
311
+ alignItems: 'center',
312
+ padding: 8,
313
+ margin: 0,
314
+ boxSizing: 'border-box',
315
+ borderWidth: 0,
316
+ fontSize: 14,
317
+ borderStyle: 'solid',
318
+ borderColor: theme?.borderColor,
319
+ borderRadius: 4,
320
+ fontFamily: theme?.fontFamily,
321
+ textOverflow: 'ellipsis',
322
+ whiteSpace: 'nowrap',
323
+ height: 34,
324
+ minHeight: 34,
325
+ gap: 6,
326
+ overflow: 'hidden',
327
+ }, className: "quill-option", onClick: () => {
328
+ // if any are selected, deselect all
329
+ if (selectAllCheckboxState === CheckboxState.SELECTED ||
330
+ selectAllCheckboxState === CheckboxState.INDETERMINATE) {
331
+ setSelectAllCheckboxState(CheckboxState.UNSELECTED);
332
+ setSelectedOptions([]);
333
+ const updatedChangeEvent = {
334
+ target: { value: [] },
335
+ };
336
+ debounce(updatedChangeEvent);
337
+ return;
338
+ }
339
+ // if none are selected, select all
320
340
  const updatedChangeEvent = {
321
- target: { value: [] },
341
+ target: {
342
+ value: options.map((opt) => opt.value),
343
+ },
322
344
  };
345
+ setSelectAllCheckboxState(CheckboxState.SELECTED);
346
+ setSelectedOptions(options.map((opt) => opt.value));
323
347
  debounce(updatedChangeEvent);
324
- return;
325
- }
326
- // if none are selected, select all
327
- const updatedChangeEvent = {
328
- target: {
329
- value: options.map((opt) => opt.value),
330
- },
331
- };
332
- setSelectAllCheckboxState(CheckboxState.SELECTED);
333
- setSelectedOptions(options.map((opt) => opt.value));
334
- debounce(updatedChangeEvent);
335
- }, children: [_jsx("style", { children: `
348
+ }, children: [_jsx("style", { children: `
336
349
  .quill-option {
337
- background: white;
350
+ background: ${theme?.backgroundColor};
351
+ color: ${theme?.primaryTextColor};
338
352
  }
339
353
  .quill-option:hover {
340
- background: #F4F4F5;
354
+ background: ${theme?.hoverBackgroundColor};
355
+ color: ${theme?.hoverTextColor};
341
356
  }
342
- ` }), _jsx("input", { ref: selectAllRef, type: "checkbox", checked: selectAllCheckboxState === CheckboxState.SELECTED, style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), _jsx("span", { style: {
343
- textOverflow: 'ellipsis',
344
- whiteSpace: 'nowrap',
345
- overflow: 'hidden',
346
- }, children: 'Select all' })] })), filteredItems.map((option) => (_jsxs("button", { style: {
347
- display: 'flex',
348
- alignItems: 'center',
349
- padding: 8,
350
- margin: 0,
351
- boxSizing: 'border-box',
352
- borderWidth: 0,
353
- fontSize: 14,
354
- borderStyle: 'solid',
355
- borderColor: theme?.borderColor,
356
- borderRadius: 4,
357
- fontFamily: theme?.fontFamily,
358
- textOverflow: 'ellipsis',
359
- whiteSpace: 'nowrap',
360
- height: 34,
361
- minHeight: 34,
362
- gap: 6,
363
- overflow: 'hidden',
364
- }, className: "quill-option", onClick: () => {
365
- // Manually create a synthetic ChangeEvent and pass it to callback
366
- const changeEvent = { target: { value: option.value } };
367
- let updateSelectedOptions = [...selectedOptions];
368
- if (selectedOptions.includes(changeEvent.target.value)) {
369
- updateSelectedOptions = selectedOptions.filter((opt) => opt !== changeEvent.target.value);
370
- if (updateSelectedOptions.length === 0) {
371
- setSelectAllCheckboxState(CheckboxState.UNSELECTED);
357
+ ` }), _jsx("input", { ref: selectAllRef, type: "checkbox", checked: selectAllCheckboxState === CheckboxState.SELECTED, style: {
358
+ width: '14px',
359
+ height: '14px',
360
+ margin: 'auto 0',
361
+ }, readOnly: true }), _jsx("span", { style: {
362
+ textOverflow: 'ellipsis',
363
+ whiteSpace: 'nowrap',
364
+ overflow: 'hidden',
365
+ }, children: _jsx("span", { style: {
366
+ fontWeight: 300,
367
+ }, children: "Select all" }) })] })), filteredItems.map((option) => (_jsxs("button", { style: {
368
+ display: 'flex',
369
+ alignItems: 'center',
370
+ padding: 8,
371
+ margin: 0,
372
+ boxSizing: 'border-box',
373
+ borderWidth: 0,
374
+ fontSize: 14,
375
+ borderStyle: 'solid',
376
+ borderColor: theme?.borderColor,
377
+ borderRadius: 4,
378
+ fontFamily: theme?.fontFamily,
379
+ textOverflow: 'ellipsis',
380
+ whiteSpace: 'nowrap',
381
+ height: 34,
382
+ minHeight: 34,
383
+ gap: 6,
384
+ overflow: 'hidden',
385
+ }, className: "quill-option", onClick: () => {
386
+ // Manually create a synthetic ChangeEvent and pass it to callback
387
+ const changeEvent = { target: { value: option.value } };
388
+ let updateSelectedOptions = [...selectedOptions];
389
+ if (selectedOptions.includes(changeEvent.target.value)) {
390
+ updateSelectedOptions = selectedOptions.filter((opt) => opt !== changeEvent.target.value);
391
+ if (updateSelectedOptions.length === 0) {
392
+ setSelectAllCheckboxState(CheckboxState.UNSELECTED);
393
+ }
394
+ else {
395
+ setSelectAllCheckboxState(CheckboxState.INDETERMINATE);
396
+ }
397
+ setSelectedOptions(updateSelectedOptions);
372
398
  }
373
399
  else {
374
- setSelectAllCheckboxState(CheckboxState.INDETERMINATE);
400
+ updateSelectedOptions = [
401
+ ...updateSelectedOptions,
402
+ changeEvent.target.value,
403
+ ];
404
+ if (updateSelectedOptions.length ===
405
+ potentialOptions.length) {
406
+ setSelectAllCheckboxState(CheckboxState.SELECTED);
407
+ }
408
+ else {
409
+ setSelectAllCheckboxState(CheckboxState.INDETERMINATE);
410
+ }
411
+ setSelectedOptions(updateSelectedOptions);
375
412
  }
376
- setSelectedOptions(updateSelectedOptions);
377
- }
378
- else {
379
- updateSelectedOptions = [
380
- ...updateSelectedOptions,
381
- changeEvent.target.value,
382
- ];
383
- if (updateSelectedOptions.length === potentialOptions.length) {
384
- setSelectAllCheckboxState(CheckboxState.SELECTED);
385
- }
386
- else {
387
- setSelectAllCheckboxState(CheckboxState.INDETERMINATE);
413
+ const updatedChangeEvent = {
414
+ target: { value: updateSelectedOptions },
415
+ };
416
+ if (updateSelectedOptions.length === 0) {
417
+ updatedChangeEvent.target.value = [];
388
418
  }
389
- setSelectedOptions(updateSelectedOptions);
390
- }
391
- const updatedChangeEvent = {
392
- target: { value: updateSelectedOptions },
393
- };
394
- if (updateSelectedOptions.length === 0) {
395
- updatedChangeEvent.target.value = [];
396
- }
397
- debounce(updatedChangeEvent);
398
- }, children: [_jsx("style", { children: `
419
+ debounce(updatedChangeEvent);
420
+ }, children: [_jsx("style", { children: `
399
421
  .quill-option {
400
- background: white;
422
+ background: ${theme?.backgroundColor};
423
+ color: ${theme?.primaryTextColor};
401
424
  }
402
425
  .quill-option:hover {
403
- background: #F4F4F5;
426
+ background: ${theme?.hoverBackgroundColor};
427
+ color: ${theme?.hoverTextColor};
404
428
  }
405
- ` }), _jsx("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), _jsx("span", { style: {
406
- textOverflow: 'ellipsis',
407
- whiteSpace: 'nowrap',
408
- overflow: 'hidden',
409
- }, children: option.label ?? nullLabel })] }, option.value)))] })) : isLoading ? (_jsx("div", { children: _jsx(LoadingSpinner, {}) })) : null] }), document.body)] }));
429
+ ` }), _jsx("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: {
430
+ width: '14px',
431
+ height: '14px',
432
+ margin: 'auto 0',
433
+ }, readOnly: true }), _jsx("span", { style: {
434
+ textOverflow: 'ellipsis',
435
+ whiteSpace: 'nowrap',
436
+ overflow: 'hidden',
437
+ }, children: option.label ?? nullLabel })] }, option.value)))] })) : isLoading ? (_jsx("div", { children: _jsx(LoadingSpinner, {}) })) : null] }), document.body)] }));
410
438
  }
411
439
  export const ListboxTextInput = ({ value, onChange, placeholder, }) => {
440
+ const [theme] = useContext(ThemeContext);
412
441
  return (_jsxs("div", { style: {
413
442
  position: 'relative',
414
443
  display: 'flex',
@@ -421,16 +450,20 @@ export const ListboxTextInput = ({ value, onChange, placeholder, }) => {
421
450
  height: 40px;
422
451
  width: 145px;
423
452
  z-index: 2;
424
- color: #384151;
453
+ color: ${theme?.primaryTextColor ?? '#384151'};
425
454
  border-radius: 4px;
426
455
  text-align: left;
427
456
  padding-top: 0px;
428
457
  padding-bottom: 0px;
429
458
  box-sizing: content-box;
430
459
  margin-left: 6px;
431
- border: 0 solid #e5e7eb;
460
+ border: 0 solid ${theme?.borderColor ?? '#e5e7eb'};
432
461
  }
433
462
  .quill-text-input:focus {
434
463
  outline: none;
435
- }` }), _jsx("div", { style: { width: 6 } }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "rgba(56, 65, 81, 0.7)", height: "16", width: "16", children: _jsx("path", { fillRule: "evenodd", d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z", clipRule: "evenodd" }) }), _jsx("input", { className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder })] }));
464
+ }` }), _jsx("div", { style: { width: 6 } }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "rgba(56, 65, 81, 0.7)", height: "16", width: "16", children: _jsx("path", { fillRule: "evenodd", d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z", clipRule: "evenodd" }) }), _jsx("input", { className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder, style: {
465
+ fontFamily: theme?.fontFamily,
466
+ color: theme?.primaryTextColor,
467
+ background: theme?.backgroundColor,
468
+ } })] }));
436
469
  };
@@ -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;AAMtE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,eAAe,GAChB,EAAE,oBAAoB,2CA0StB"}
1
+ {"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAatE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,eAAe,GAChB,EAAE,oBAAoB,2CA0TtB"}