@vuu-ui/vuu-table-extras 0.13.6 → 0.13.8

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 (217) hide show
  1. package/cjs/index.js +4254 -65
  2. package/cjs/index.js.map +1 -1
  3. package/esm/index.js +4221 -28
  4. package/esm/index.js.map +1 -1
  5. package/package.json +12 -13
  6. package/cjs/cell-edit-validators/CaseValidator.js +0 -25
  7. package/cjs/cell-edit-validators/CaseValidator.js.map +0 -1
  8. package/cjs/cell-edit-validators/PatternValidator.js +0 -31
  9. package/cjs/cell-edit-validators/PatternValidator.js.map +0 -1
  10. package/cjs/cell-renderers/background-cell/BackgroundCell.css.js +0 -6
  11. package/cjs/cell-renderers/background-cell/BackgroundCell.css.js.map +0 -1
  12. package/cjs/cell-renderers/background-cell/BackgroundCell.js +0 -76
  13. package/cjs/cell-renderers/background-cell/BackgroundCell.js.map +0 -1
  14. package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js +0 -6
  15. package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js.map +0 -1
  16. package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +0 -67
  17. package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +0 -1
  18. package/cjs/cell-renderers/background-cell/BackgroundKeyframes.css.js +0 -6
  19. package/cjs/cell-renderers/background-cell/BackgroundKeyframes.css.js.map +0 -1
  20. package/cjs/cell-renderers/background-cell/useDirection.js +0 -20
  21. package/cjs/cell-renderers/background-cell/useDirection.js.map +0 -1
  22. package/cjs/cell-renderers/dropdown-cell/DropdownCell.css.js +0 -6
  23. package/cjs/cell-renderers/dropdown-cell/DropdownCell.css.js.map +0 -1
  24. package/cjs/cell-renderers/dropdown-cell/DropdownCell.js +0 -94
  25. package/cjs/cell-renderers/dropdown-cell/DropdownCell.js.map +0 -1
  26. package/cjs/cell-renderers/lookup-cell/LookupCell.js +0 -23
  27. package/cjs/cell-renderers/lookup-cell/LookupCell.js.map +0 -1
  28. package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.css.js +0 -6
  29. package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.css.js.map +0 -1
  30. package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.js +0 -62
  31. package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.js.map +0 -1
  32. package/cjs/cell-renderers/progress-cell/ProgressCell.css.js +0 -6
  33. package/cjs/cell-renderers/progress-cell/ProgressCell.css.js.map +0 -1
  34. package/cjs/cell-renderers/progress-cell/ProgressCell.js +0 -69
  35. package/cjs/cell-renderers/progress-cell/ProgressCell.js.map +0 -1
  36. package/cjs/column-expression-input/ColumnExpressionInput.css.js +0 -6
  37. package/cjs/column-expression-input/ColumnExpressionInput.css.js.map +0 -1
  38. package/cjs/column-expression-input/ColumnExpressionInput.js +0 -39
  39. package/cjs/column-expression-input/ColumnExpressionInput.js.map +0 -1
  40. package/cjs/column-expression-input/column-function-descriptors.js +0 -307
  41. package/cjs/column-expression-input/column-function-descriptors.js.map +0 -1
  42. package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js +0 -28
  43. package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js.map +0 -1
  44. package/cjs/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js +0 -465
  45. package/cjs/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js.map +0 -1
  46. package/cjs/column-expression-input/column-language-parser/column-expression-parse-utils.js +0 -61
  47. package/cjs/column-expression-input/column-language-parser/column-expression-parse-utils.js.map +0 -1
  48. package/cjs/column-expression-input/column-language-parser/generated/column-parser.js +0 -21
  49. package/cjs/column-expression-input/column-language-parser/generated/column-parser.js.map +0 -1
  50. package/cjs/column-expression-input/functionDocInfo.js +0 -39
  51. package/cjs/column-expression-input/functionDocInfo.js.map +0 -1
  52. package/cjs/column-expression-input/highlighting.js +0 -16
  53. package/cjs/column-expression-input/highlighting.js.map +0 -1
  54. package/cjs/column-expression-input/theme.js +0 -63
  55. package/cjs/column-expression-input/theme.js.map +0 -1
  56. package/cjs/column-expression-input/useColumnAutoComplete.js +0 -358
  57. package/cjs/column-expression-input/useColumnAutoComplete.js.map +0 -1
  58. package/cjs/column-expression-input/useColumnExpressionEditor.js +0 -131
  59. package/cjs/column-expression-input/useColumnExpressionEditor.js.map +0 -1
  60. package/cjs/column-expression-input/useColumnExpressionSuggestionProvider.js +0 -213
  61. package/cjs/column-expression-input/useColumnExpressionSuggestionProvider.js.map +0 -1
  62. package/cjs/column-expression-panel/ColumnExpressionPanel.js +0 -85
  63. package/cjs/column-expression-panel/ColumnExpressionPanel.js.map +0 -1
  64. package/cjs/column-expression-panel/useColumnExpression.js +0 -69
  65. package/cjs/column-expression-panel/useColumnExpression.js.map +0 -1
  66. package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js +0 -97
  67. package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js.map +0 -1
  68. package/cjs/column-formatting-settings/ColumnFormattingPanel.js +0 -104
  69. package/cjs/column-formatting-settings/ColumnFormattingPanel.js.map +0 -1
  70. package/cjs/column-formatting-settings/DateTimeFormattingSettings.js +0 -99
  71. package/cjs/column-formatting-settings/DateTimeFormattingSettings.js.map +0 -1
  72. package/cjs/column-formatting-settings/LongTypeFormattingSettings.css.js +0 -6
  73. package/cjs/column-formatting-settings/LongTypeFormattingSettings.css.js.map +0 -1
  74. package/cjs/column-formatting-settings/LongTypeFormattingSettings.js +0 -49
  75. package/cjs/column-formatting-settings/LongTypeFormattingSettings.js.map +0 -1
  76. package/cjs/column-list/ColumnList.css.js +0 -6
  77. package/cjs/column-list/ColumnList.css.js.map +0 -1
  78. package/cjs/column-list/ColumnList.js +0 -174
  79. package/cjs/column-list/ColumnList.js.map +0 -1
  80. package/cjs/column-menu/ColumnMenu.css.js +0 -6
  81. package/cjs/column-menu/ColumnMenu.css.js.map +0 -1
  82. package/cjs/column-menu/ColumnMenu.js +0 -116
  83. package/cjs/column-menu/ColumnMenu.js.map +0 -1
  84. package/cjs/column-menu/column-menu-utils.js +0 -489
  85. package/cjs/column-menu/column-menu-utils.js.map +0 -1
  86. package/cjs/column-menu/useColumnActions.js +0 -75
  87. package/cjs/column-menu/useColumnActions.js.map +0 -1
  88. package/cjs/datasource-stats/DatasourceStats.css.js +0 -6
  89. package/cjs/datasource-stats/DatasourceStats.css.js.map +0 -1
  90. package/cjs/datasource-stats/DatasourceStats.js +0 -52
  91. package/cjs/datasource-stats/DatasourceStats.js.map +0 -1
  92. package/cjs/table-column-settings/ColumnNameLabel.css.js +0 -6
  93. package/cjs/table-column-settings/ColumnNameLabel.css.js.map +0 -1
  94. package/cjs/table-column-settings/ColumnNameLabel.js +0 -45
  95. package/cjs/table-column-settings/ColumnNameLabel.js.map +0 -1
  96. package/cjs/table-column-settings/ColumnSettingsPanel.css.js +0 -6
  97. package/cjs/table-column-settings/ColumnSettingsPanel.css.js.map +0 -1
  98. package/cjs/table-column-settings/ColumnSettingsPanel.js +0 -202
  99. package/cjs/table-column-settings/ColumnSettingsPanel.js.map +0 -1
  100. package/cjs/table-column-settings/TableSettingsPanel.css.js +0 -6
  101. package/cjs/table-column-settings/TableSettingsPanel.css.js.map +0 -1
  102. package/cjs/table-column-settings/TableSettingsPanel.js +0 -139
  103. package/cjs/table-column-settings/TableSettingsPanel.js.map +0 -1
  104. package/cjs/table-column-settings/useColumnSettings.js +0 -224
  105. package/cjs/table-column-settings/useColumnSettings.js.map +0 -1
  106. package/cjs/table-column-settings/useTableAndColumnSettings.js +0 -126
  107. package/cjs/table-column-settings/useTableAndColumnSettings.js.map +0 -1
  108. package/cjs/table-column-settings/useTableSettings.js +0 -172
  109. package/cjs/table-column-settings/useTableSettings.js.map +0 -1
  110. package/cjs/table-provider/TableProvider.js +0 -48
  111. package/cjs/table-provider/TableProvider.js.map +0 -1
  112. package/esm/cell-edit-validators/CaseValidator.js +0 -23
  113. package/esm/cell-edit-validators/CaseValidator.js.map +0 -1
  114. package/esm/cell-edit-validators/PatternValidator.js +0 -29
  115. package/esm/cell-edit-validators/PatternValidator.js.map +0 -1
  116. package/esm/cell-renderers/background-cell/BackgroundCell.css.js +0 -4
  117. package/esm/cell-renderers/background-cell/BackgroundCell.css.js.map +0 -1
  118. package/esm/cell-renderers/background-cell/BackgroundCell.js +0 -74
  119. package/esm/cell-renderers/background-cell/BackgroundCell.js.map +0 -1
  120. package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js +0 -4
  121. package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js.map +0 -1
  122. package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +0 -65
  123. package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +0 -1
  124. package/esm/cell-renderers/background-cell/BackgroundKeyframes.css.js +0 -4
  125. package/esm/cell-renderers/background-cell/BackgroundKeyframes.css.js.map +0 -1
  126. package/esm/cell-renderers/background-cell/useDirection.js +0 -18
  127. package/esm/cell-renderers/background-cell/useDirection.js.map +0 -1
  128. package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js +0 -4
  129. package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js.map +0 -1
  130. package/esm/cell-renderers/dropdown-cell/DropdownCell.js +0 -92
  131. package/esm/cell-renderers/dropdown-cell/DropdownCell.js.map +0 -1
  132. package/esm/cell-renderers/lookup-cell/LookupCell.js +0 -21
  133. package/esm/cell-renderers/lookup-cell/LookupCell.js.map +0 -1
  134. package/esm/cell-renderers/pct-progress-cell/PctProgressCell.css.js +0 -4
  135. package/esm/cell-renderers/pct-progress-cell/PctProgressCell.css.js.map +0 -1
  136. package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js +0 -60
  137. package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js.map +0 -1
  138. package/esm/cell-renderers/progress-cell/ProgressCell.css.js +0 -4
  139. package/esm/cell-renderers/progress-cell/ProgressCell.css.js.map +0 -1
  140. package/esm/cell-renderers/progress-cell/ProgressCell.js +0 -67
  141. package/esm/cell-renderers/progress-cell/ProgressCell.js.map +0 -1
  142. package/esm/column-expression-input/ColumnExpressionInput.css.js +0 -4
  143. package/esm/column-expression-input/ColumnExpressionInput.css.js.map +0 -1
  144. package/esm/column-expression-input/ColumnExpressionInput.js +0 -37
  145. package/esm/column-expression-input/ColumnExpressionInput.js.map +0 -1
  146. package/esm/column-expression-input/column-function-descriptors.js +0 -305
  147. package/esm/column-expression-input/column-function-descriptors.js.map +0 -1
  148. package/esm/column-expression-input/column-language-parser/ColumnExpressionLanguage.js +0 -26
  149. package/esm/column-expression-input/column-language-parser/ColumnExpressionLanguage.js.map +0 -1
  150. package/esm/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js +0 -463
  151. package/esm/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js.map +0 -1
  152. package/esm/column-expression-input/column-language-parser/column-expression-parse-utils.js +0 -56
  153. package/esm/column-expression-input/column-language-parser/column-expression-parse-utils.js.map +0 -1
  154. package/esm/column-expression-input/column-language-parser/generated/column-parser.js +0 -19
  155. package/esm/column-expression-input/column-language-parser/generated/column-parser.js.map +0 -1
  156. package/esm/column-expression-input/functionDocInfo.js +0 -37
  157. package/esm/column-expression-input/functionDocInfo.js.map +0 -1
  158. package/esm/column-expression-input/highlighting.js +0 -14
  159. package/esm/column-expression-input/highlighting.js.map +0 -1
  160. package/esm/column-expression-input/theme.js +0 -61
  161. package/esm/column-expression-input/theme.js.map +0 -1
  162. package/esm/column-expression-input/useColumnAutoComplete.js +0 -356
  163. package/esm/column-expression-input/useColumnAutoComplete.js.map +0 -1
  164. package/esm/column-expression-input/useColumnExpressionEditor.js +0 -129
  165. package/esm/column-expression-input/useColumnExpressionEditor.js.map +0 -1
  166. package/esm/column-expression-input/useColumnExpressionSuggestionProvider.js +0 -211
  167. package/esm/column-expression-input/useColumnExpressionSuggestionProvider.js.map +0 -1
  168. package/esm/column-expression-panel/ColumnExpressionPanel.js +0 -83
  169. package/esm/column-expression-panel/ColumnExpressionPanel.js.map +0 -1
  170. package/esm/column-expression-panel/useColumnExpression.js +0 -67
  171. package/esm/column-expression-panel/useColumnExpression.js.map +0 -1
  172. package/esm/column-formatting-settings/BaseNumericFormattingSettings.js +0 -95
  173. package/esm/column-formatting-settings/BaseNumericFormattingSettings.js.map +0 -1
  174. package/esm/column-formatting-settings/ColumnFormattingPanel.js +0 -102
  175. package/esm/column-formatting-settings/ColumnFormattingPanel.js.map +0 -1
  176. package/esm/column-formatting-settings/DateTimeFormattingSettings.js +0 -97
  177. package/esm/column-formatting-settings/DateTimeFormattingSettings.js.map +0 -1
  178. package/esm/column-formatting-settings/LongTypeFormattingSettings.css.js +0 -4
  179. package/esm/column-formatting-settings/LongTypeFormattingSettings.css.js.map +0 -1
  180. package/esm/column-formatting-settings/LongTypeFormattingSettings.js +0 -47
  181. package/esm/column-formatting-settings/LongTypeFormattingSettings.js.map +0 -1
  182. package/esm/column-list/ColumnList.css.js +0 -4
  183. package/esm/column-list/ColumnList.css.js.map +0 -1
  184. package/esm/column-list/ColumnList.js +0 -172
  185. package/esm/column-list/ColumnList.js.map +0 -1
  186. package/esm/column-menu/ColumnMenu.css.js +0 -4
  187. package/esm/column-menu/ColumnMenu.css.js.map +0 -1
  188. package/esm/column-menu/ColumnMenu.js +0 -114
  189. package/esm/column-menu/ColumnMenu.js.map +0 -1
  190. package/esm/column-menu/column-menu-utils.js +0 -480
  191. package/esm/column-menu/column-menu-utils.js.map +0 -1
  192. package/esm/column-menu/useColumnActions.js +0 -73
  193. package/esm/column-menu/useColumnActions.js.map +0 -1
  194. package/esm/datasource-stats/DatasourceStats.css.js +0 -4
  195. package/esm/datasource-stats/DatasourceStats.css.js.map +0 -1
  196. package/esm/datasource-stats/DatasourceStats.js +0 -50
  197. package/esm/datasource-stats/DatasourceStats.js.map +0 -1
  198. package/esm/table-column-settings/ColumnNameLabel.css.js +0 -4
  199. package/esm/table-column-settings/ColumnNameLabel.css.js.map +0 -1
  200. package/esm/table-column-settings/ColumnNameLabel.js +0 -43
  201. package/esm/table-column-settings/ColumnNameLabel.js.map +0 -1
  202. package/esm/table-column-settings/ColumnSettingsPanel.css.js +0 -4
  203. package/esm/table-column-settings/ColumnSettingsPanel.css.js.map +0 -1
  204. package/esm/table-column-settings/ColumnSettingsPanel.js +0 -200
  205. package/esm/table-column-settings/ColumnSettingsPanel.js.map +0 -1
  206. package/esm/table-column-settings/TableSettingsPanel.css.js +0 -4
  207. package/esm/table-column-settings/TableSettingsPanel.css.js.map +0 -1
  208. package/esm/table-column-settings/TableSettingsPanel.js +0 -136
  209. package/esm/table-column-settings/TableSettingsPanel.js.map +0 -1
  210. package/esm/table-column-settings/useColumnSettings.js +0 -222
  211. package/esm/table-column-settings/useColumnSettings.js.map +0 -1
  212. package/esm/table-column-settings/useTableAndColumnSettings.js +0 -122
  213. package/esm/table-column-settings/useTableAndColumnSettings.js.map +0 -1
  214. package/esm/table-column-settings/useTableSettings.js +0 -170
  215. package/esm/table-column-settings/useTableSettings.js.map +0 -1
  216. package/esm/table-provider/TableProvider.js +0 -44
  217. package/esm/table-provider/TableProvider.js.map +0 -1
@@ -1,95 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { FormField, FormFieldLabel, Input, Switch } from '@salt-ds/core';
3
- import { getTypeFormattingFromColumn } from '@vuu-ui/vuu-utils';
4
- import { useState, useCallback } from 'react';
5
-
6
- const classBase = "vuuFormattingSettings";
7
- const BaseNumericFormattingSettings = ({
8
- column,
9
- onChangeFormatting: onChange
10
- }) => {
11
- const [formattingSettings, setFormattingSettings] = useState(getTypeFormattingFromColumn(column));
12
- const handleInputKeyDown = useCallback(
13
- (evt) => {
14
- if (evt.key === "Enter" || evt.key === "Tab") {
15
- onChange(formattingSettings);
16
- }
17
- },
18
- [formattingSettings, onChange]
19
- );
20
- const handleChangeDecimals = useCallback(
21
- (evt) => {
22
- const { value } = evt.target;
23
- const numericValue = value === "" ? void 0 : isNaN(parseInt(value)) ? void 0 : parseInt(value);
24
- const newFormattingSettings = {
25
- ...formattingSettings,
26
- decimals: numericValue
27
- };
28
- setFormattingSettings(newFormattingSettings);
29
- },
30
- [formattingSettings]
31
- );
32
- const handleChangeAlignDecimals = useCallback(
33
- (evt) => {
34
- const { checked } = evt.target;
35
- const newFormattingSettings = {
36
- ...formattingSettings,
37
- alignOnDecimals: checked
38
- };
39
- setFormattingSettings(newFormattingSettings);
40
- onChange(newFormattingSettings);
41
- },
42
- [formattingSettings, onChange]
43
- );
44
- const handleChangeZeroPad = useCallback(
45
- (evt) => {
46
- const { checked } = evt.target;
47
- const newFormattingSettings = {
48
- ...formattingSettings,
49
- zeroPad: checked
50
- };
51
- setFormattingSettings(newFormattingSettings);
52
- onChange(newFormattingSettings);
53
- },
54
- [formattingSettings, onChange]
55
- );
56
- return /* @__PURE__ */ jsxs("div", { className: classBase, children: [
57
- /* @__PURE__ */ jsxs(FormField, { "data-field": "decimals", children: [
58
- /* @__PURE__ */ jsx(FormFieldLabel, { children: "Number of decimals" }),
59
- /* @__PURE__ */ jsx(
60
- Input,
61
- {
62
- className: "vuuInput",
63
- onChange: handleChangeDecimals,
64
- onKeyDown: handleInputKeyDown,
65
- value: formattingSettings.decimals ?? ""
66
- }
67
- )
68
- ] }),
69
- /* @__PURE__ */ jsxs(FormField, { labelPlacement: "left", children: [
70
- /* @__PURE__ */ jsx(FormFieldLabel, { children: "Align on decimals" }),
71
- /* @__PURE__ */ jsx(
72
- Switch,
73
- {
74
- checked: formattingSettings.alignOnDecimals ?? false,
75
- onChange: handleChangeAlignDecimals,
76
- value: "align-decimals"
77
- }
78
- )
79
- ] }),
80
- /* @__PURE__ */ jsxs(FormField, { labelPlacement: "left", children: [
81
- /* @__PURE__ */ jsx(FormFieldLabel, { children: "Zero pad decimals" }),
82
- /* @__PURE__ */ jsx(
83
- Switch,
84
- {
85
- checked: formattingSettings.zeroPad ?? false,
86
- onChange: handleChangeZeroPad,
87
- value: "zero-pad"
88
- }
89
- )
90
- ] })
91
- ] });
92
- };
93
-
94
- export { BaseNumericFormattingSettings };
95
- //# sourceMappingURL=BaseNumericFormattingSettings.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BaseNumericFormattingSettings.js","sources":["../../src/column-formatting-settings/BaseNumericFormattingSettings.tsx"],"sourcesContent":["import { FormField, FormFieldLabel, Input, Switch } from \"@salt-ds/core\";\nimport {\n ColumnTypeFormatting,\n FormattingSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getTypeFormattingFromColumn } from \"@vuu-ui/vuu-utils\";\nimport {\n ChangeEvent,\n KeyboardEvent,\n SyntheticEvent,\n useCallback,\n useState,\n} from \"react\";\n\nconst classBase = \"vuuFormattingSettings\";\n\nexport const BaseNumericFormattingSettings = ({\n column,\n onChangeFormatting: onChange,\n}: FormattingSettingsProps) => {\n const [formattingSettings, setFormattingSettings] =\n useState<ColumnTypeFormatting>(getTypeFormattingFromColumn(column));\n\n const handleInputKeyDown = useCallback(\n (evt: KeyboardEvent<HTMLInputElement>) => {\n if (evt.key === \"Enter\" || evt.key === \"Tab\") {\n onChange(formattingSettings);\n }\n },\n [formattingSettings, onChange],\n );\n\n const handleChangeDecimals = useCallback(\n (evt: SyntheticEvent) => {\n const { value } = evt.target as HTMLFormElement;\n const numericValue: number | undefined =\n value === \"\"\n ? undefined\n : isNaN(parseInt(value))\n ? undefined\n : parseInt(value);\n\n const newFormattingSettings = {\n ...formattingSettings,\n decimals: numericValue,\n };\n setFormattingSettings(newFormattingSettings);\n },\n [formattingSettings],\n );\n\n const handleChangeAlignDecimals = useCallback(\n (evt: ChangeEvent<HTMLInputElement>) => {\n const { checked } = evt.target as HTMLInputElement;\n const newFormattingSettings = {\n ...formattingSettings,\n alignOnDecimals: checked,\n };\n setFormattingSettings(newFormattingSettings);\n onChange(newFormattingSettings);\n },\n [formattingSettings, onChange],\n );\n\n const handleChangeZeroPad = useCallback(\n (evt: ChangeEvent<HTMLInputElement>) => {\n const { checked } = evt.target as HTMLInputElement;\n const newFormattingSettings = {\n ...formattingSettings,\n zeroPad: checked,\n };\n setFormattingSettings(newFormattingSettings);\n onChange(newFormattingSettings);\n },\n [formattingSettings, onChange],\n );\n\n return (\n <div className={classBase}>\n <FormField data-field=\"decimals\">\n <FormFieldLabel>Number of decimals</FormFieldLabel>\n <Input\n className=\"vuuInput\"\n onChange={handleChangeDecimals}\n onKeyDown={handleInputKeyDown}\n value={formattingSettings.decimals ?? \"\"}\n />\n </FormField>\n\n <FormField labelPlacement=\"left\">\n <FormFieldLabel>Align on decimals</FormFieldLabel>\n <Switch\n checked={formattingSettings.alignOnDecimals ?? false}\n onChange={handleChangeAlignDecimals}\n value=\"align-decimals\"\n />\n </FormField>\n <FormField labelPlacement=\"left\">\n <FormFieldLabel>Zero pad decimals</FormFieldLabel>\n <Switch\n checked={formattingSettings.zeroPad ?? false}\n onChange={handleChangeZeroPad}\n value=\"zero-pad\"\n />\n </FormField>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
@@ -1,102 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { isTypeDescriptor, isColumnTypeRenderer, getCellRendererOptions, getConfigurationEditor } from '@vuu-ui/vuu-utils';
3
- import { FormField, FormFieldLabel, Dropdown, Option } from '@salt-ds/core';
4
- import cx from 'clsx';
5
- import { useMemo, useCallback } from 'react';
6
- import { BaseNumericFormattingSettings } from './BaseNumericFormattingSettings.js';
7
- import { LongTypeFormattingSettings } from './LongTypeFormattingSettings.js';
8
-
9
- const classBase = "vuuColumnFormattingPanel";
10
- const ColumnFormattingPanel = ({
11
- availableRenderers,
12
- className,
13
- column,
14
- onChangeFormatting,
15
- onChangeColumnType,
16
- onChangeRendering,
17
- ...htmlAttributes
18
- }) => {
19
- const formattingSettingsComponent = useMemo(
20
- () => getFormattingSettingsComponent({
21
- column,
22
- onChangeFormatting,
23
- onChangeColumnType
24
- }),
25
- [column, onChangeColumnType, onChangeFormatting]
26
- );
27
- console.log({ formattingSettingsComponent });
28
- const ConfigEditor = useMemo(() => {
29
- const { type } = column;
30
- if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {
31
- const cellRendererOptions = getCellRendererOptions(type.renderer.name);
32
- return getConfigurationEditor(cellRendererOptions?.configEditor);
33
- }
34
- return void 0;
35
- }, [column]);
36
- const selectedCellRenderer = useMemo(() => {
37
- const { type } = column;
38
- const [defaultRenderer] = availableRenderers;
39
- const rendererName = isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer) ? type.renderer.name : void 0;
40
- const configuredRenderer = availableRenderers.find(
41
- (renderer) => renderer.name === rendererName
42
- );
43
- return configuredRenderer ?? defaultRenderer;
44
- }, [availableRenderers, column]);
45
- const handleChangeRenderer = useCallback(
46
- (_e, [cellRendererDescriptor]) => {
47
- const renderProps = {
48
- name: cellRendererDescriptor.name
49
- };
50
- onChangeRendering?.(renderProps);
51
- },
52
- [onChangeRendering]
53
- );
54
- const { serverDataType = "string" } = column;
55
- return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: `vuuColumnSettingsPanel-header`, children: [
56
- /* @__PURE__ */ jsx("div", { children: "Formatting" }),
57
- /* @__PURE__ */ jsxs(FormField, { children: [
58
- /* @__PURE__ */ jsx(FormFieldLabel, { children: `Renderer (data type ${column.serverDataType})` }),
59
- /* @__PURE__ */ jsx(
60
- Dropdown,
61
- {
62
- className: cx(`${classBase}-renderer`),
63
- onSelectionChange: handleChangeRenderer,
64
- selected: selectedCellRenderer ? [selectedCellRenderer] : [],
65
- value: selectedCellRenderer?.label ?? selectedCellRenderer?.name,
66
- children: availableRenderers.map((cellRenderer, i) => /* @__PURE__ */ jsx(Option, { value: cellRenderer, children: cellRenderer.label ?? cellRenderer.name }, i))
67
- }
68
- )
69
- ] }),
70
- /* @__PURE__ */ jsxs(
71
- "div",
72
- {
73
- className: cx(classBase, className, `${classBase}-${serverDataType}`),
74
- children: [
75
- formattingSettingsComponent,
76
- ConfigEditor ? /* @__PURE__ */ jsx(
77
- ConfigEditor,
78
- {
79
- column,
80
- onChangeRendering
81
- }
82
- ) : null
83
- ]
84
- }
85
- )
86
- ] });
87
- };
88
- function getFormattingSettingsComponent(props) {
89
- const { column } = props;
90
- switch (column.serverDataType) {
91
- case "double":
92
- case "int":
93
- return /* @__PURE__ */ jsx(BaseNumericFormattingSettings, { ...props });
94
- case "long":
95
- return /* @__PURE__ */ jsx(LongTypeFormattingSettings, { ...props });
96
- default:
97
- return null;
98
- }
99
- }
100
-
101
- export { ColumnFormattingPanel };
102
- //# sourceMappingURL=ColumnFormattingPanel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ColumnFormattingPanel.js","sources":["../../src/column-formatting-settings/ColumnFormattingPanel.tsx"],"sourcesContent":["import {\n ColumnDescriptor,\n ColumnDescriptorCustomRenderer,\n ColumnTypeRendering,\n FormattingSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n CellRendererDescriptor,\n ConfigurationEditorProps,\n getCellRendererOptions,\n getConfigurationEditor,\n isColumnTypeRenderer,\n isTypeDescriptor,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, FormField, FormFieldLabel, Option } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, SyntheticEvent, useCallback, useMemo } from \"react\";\nimport { BaseNumericFormattingSettings } from \"./BaseNumericFormattingSettings\";\nimport { LongTypeFormattingSettings } from \"./LongTypeFormattingSettings\";\n\nconst classBase = \"vuuColumnFormattingPanel\";\n\nexport interface ColumnFormattingPanelProps\n extends HTMLAttributes<HTMLDivElement>,\n FormattingSettingsProps {\n availableRenderers: CellRendererDescriptor[];\n column: ColumnDescriptor;\n onChangeRendering: (renderProps: ColumnTypeRendering) => void;\n}\n\nexport const ColumnFormattingPanel = ({\n availableRenderers,\n className,\n column,\n onChangeFormatting,\n onChangeColumnType,\n onChangeRendering,\n ...htmlAttributes\n}: ColumnFormattingPanelProps) => {\n const formattingSettingsComponent = useMemo(\n () =>\n getFormattingSettingsComponent({\n column,\n onChangeFormatting,\n onChangeColumnType,\n }),\n [column, onChangeColumnType, onChangeFormatting],\n );\n\n console.log({ formattingSettingsComponent });\n\n const ConfigEditor = useMemo<\n React.FC<ConfigurationEditorProps> | undefined\n >(() => {\n const { type } = column;\n if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {\n const cellRendererOptions = getCellRendererOptions(type.renderer.name);\n return getConfigurationEditor(cellRendererOptions?.configEditor);\n }\n return undefined;\n }, [column]);\n\n const selectedCellRenderer = useMemo(() => {\n const { type } = column;\n const [defaultRenderer] = availableRenderers;\n const rendererName =\n isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)\n ? type.renderer.name\n : undefined;\n const configuredRenderer = availableRenderers.find(\n (renderer) => renderer.name === rendererName,\n );\n return configuredRenderer ?? defaultRenderer;\n }, [availableRenderers, column]);\n\n const handleChangeRenderer = useCallback(\n (\n _e: SyntheticEvent,\n [cellRendererDescriptor]: CellRendererDescriptor[],\n ) => {\n const renderProps: ColumnTypeRendering = {\n name: cellRendererDescriptor.name,\n };\n onChangeRendering?.(renderProps);\n },\n [onChangeRendering],\n );\n\n const { serverDataType = \"string\" } = column;\n\n return (\n <div {...htmlAttributes} className={`vuuColumnSettingsPanel-header`}>\n <div>Formatting</div>\n\n <FormField>\n <FormFieldLabel>\n {`Renderer (data type ${column.serverDataType})`}\n </FormFieldLabel>\n <Dropdown<CellRendererDescriptor>\n className={cx(`${classBase}-renderer`)}\n onSelectionChange={handleChangeRenderer}\n selected={selectedCellRenderer ? [selectedCellRenderer] : []}\n value={selectedCellRenderer?.label ?? selectedCellRenderer?.name}\n >\n {availableRenderers.map((cellRenderer, i) => (\n <Option key={i} value={cellRenderer}>\n {cellRenderer.label ?? cellRenderer.name}\n </Option>\n ))}\n </Dropdown>\n </FormField>\n <div\n className={cx(classBase, className, `${classBase}-${serverDataType}`)}\n >\n {formattingSettingsComponent}\n {ConfigEditor ? (\n <ConfigEditor\n column={column as ColumnDescriptorCustomRenderer}\n onChangeRendering={onChangeRendering}\n />\n ) : null}\n </div>\n </div>\n );\n};\n\nfunction getFormattingSettingsComponent(props: FormattingSettingsProps) {\n const { column } = props;\n\n switch (column.serverDataType) {\n case \"double\":\n case \"int\":\n return <BaseNumericFormattingSettings {...props} />;\n case \"long\":\n return <LongTypeFormattingSettings {...props} />;\n default:\n return null;\n }\n}\n"],"names":[],"mappings":"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"}
@@ -1,97 +0,0 @@
1
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
- import { getTypeFormattingFromColumn, defaultPatternsByType, dateTimeLabelByType, supportedDateTimePatterns, isDatePattern, isTimePattern, fallbackDateTimePattern } from '@vuu-ui/vuu-utils';
3
- import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton, Dropdown, Option } from '@salt-ds/core';
4
- import { useMemo, useState, useCallback } from 'react';
5
-
6
- const toggleValues = ["date", "time", "both"];
7
- function getToggleValue(pattern) {
8
- return !pattern.time ? "date" : !pattern.date ? "time" : "both";
9
- }
10
- const getSelectedPattern = (pattern) => {
11
- if (isDatePattern(pattern)) {
12
- return [pattern];
13
- } else if (isTimePattern(pattern)) {
14
- return [pattern];
15
- } else {
16
- return void 0;
17
- }
18
- };
19
- const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
20
- const formatting = getTypeFormattingFromColumn(column);
21
- const { pattern = fallbackDateTimePattern } = formatting;
22
- const toggleValue = useMemo(() => getToggleValue(pattern), [pattern]);
23
- const [fallbackState, setFallbackState] = useState(
24
- {
25
- time: pattern.time ?? defaultPatternsByType.time,
26
- date: pattern.date ?? defaultPatternsByType.date
27
- }
28
- );
29
- const onPatternChange = useCallback(
30
- (pattern2) => onChange({ ...formatting, pattern: pattern2 }),
31
- [onChange, formatting]
32
- );
33
- const onDropdownChange = useCallback(
34
- (dateTime) => (_, [selectedPattern]) => {
35
- const updatedPattern = {
36
- ...pattern ?? {},
37
- [dateTime]: selectedPattern
38
- };
39
- setFallbackState((s) => ({
40
- time: updatedPattern.time ?? s.time,
41
- date: updatedPattern.date ?? s.date
42
- }));
43
- onPatternChange(updatedPattern);
44
- },
45
- [onPatternChange, pattern]
46
- );
47
- const onToggleChange = useCallback(
48
- (evnt) => {
49
- const value = evnt.currentTarget.value;
50
- switch (value) {
51
- case "time":
52
- return onPatternChange({
53
- [value]: pattern[value] ?? fallbackState[value]
54
- });
55
- case "date":
56
- return onPatternChange({
57
- [value]: pattern[value] ?? fallbackState[value]
58
- });
59
- case "both":
60
- return onPatternChange({
61
- time: pattern.time ?? fallbackState.time,
62
- date: pattern.date ?? fallbackState.date
63
- });
64
- }
65
- },
66
- [onPatternChange, pattern, fallbackState]
67
- );
68
- return /* @__PURE__ */ jsxs(Fragment, { children: [
69
- /* @__PURE__ */ jsxs(FormField, { labelPlacement: "top", children: [
70
- /* @__PURE__ */ jsx(FormFieldLabel, { children: "Display" }),
71
- /* @__PURE__ */ jsx(
72
- ToggleButtonGroup,
73
- {
74
- className: "vuuToggleButtonGroup",
75
- onChange: onToggleChange,
76
- value: toggleValue,
77
- "data-variant": "primary",
78
- children: toggleValues.map((v) => /* @__PURE__ */ jsx(ToggleButton, { value: v, children: v.toUpperCase() }, v))
79
- }
80
- )
81
- ] }),
82
- ["date", "time"].filter((v) => !!pattern[v]).map((v) => /* @__PURE__ */ jsxs(FormField, { labelPlacement: "top", children: [
83
- /* @__PURE__ */ jsx(FormFieldLabel, { children: `${dateTimeLabelByType[v]} pattern` }),
84
- /* @__PURE__ */ jsx(
85
- Dropdown,
86
- {
87
- onSelectionChange: onDropdownChange(v),
88
- selected: getSelectedPattern(pattern[v]),
89
- children: supportedDateTimePatterns[v].map((pattern2, i) => /* @__PURE__ */ jsx(Option, { value: pattern2, children: pattern2 }, i))
90
- }
91
- )
92
- ] }, v))
93
- ] });
94
- };
95
-
96
- export { DateTimeFormattingSettings };
97
- //# sourceMappingURL=DateTimeFormattingSettings.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DateTimeFormattingSettings.js","sources":["../../src/column-formatting-settings/DateTimeFormattingSettings.tsx"],"sourcesContent":["import { DateTimeDataValueDescriptor } from \"@vuu-ui/vuu-data-types\";\nimport { FormattingSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n DatePattern,\n DateTimePattern,\n TimePattern,\n dateTimeLabelByType,\n defaultPatternsByType,\n fallbackDateTimePattern,\n getTypeFormattingFromColumn,\n isDatePattern,\n isTimePattern,\n supportedDateTimePatterns,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n Dropdown,\n FormField,\n FormFieldLabel,\n Option,\n ToggleButton,\n ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport React, { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\n\nconst toggleValues = [\"date\", \"time\", \"both\"] as const;\ntype ToggleValue = (typeof toggleValues)[number];\n\nfunction getToggleValue(pattern: DateTimePattern): ToggleValue {\n return !pattern.time ? \"date\" : !pattern.date ? \"time\" : \"both\";\n}\n\ntype DateTime = keyof DateTimePattern;\n\nconst getSelectedPattern = (\n pattern?: DatePattern | TimePattern,\n): DatePattern[] | TimePattern[] | undefined => {\n if (isDatePattern(pattern)) {\n return [pattern] as DatePattern[];\n } else if (isTimePattern(pattern)) {\n return [pattern] as TimePattern[];\n } else {\n return undefined;\n }\n};\n\nexport const DateTimeFormattingSettings: React.FC<\n FormattingSettingsProps<DateTimeDataValueDescriptor>\n> = ({ column, onChangeFormatting: onChange }) => {\n const formatting = getTypeFormattingFromColumn(column);\n const { pattern = fallbackDateTimePattern } = formatting;\n const toggleValue = useMemo(() => getToggleValue(pattern), [pattern]);\n\n const [fallbackState, setFallbackState] = useState<Required<DateTimePattern>>(\n {\n time: pattern.time ?? defaultPatternsByType.time,\n date: pattern.date ?? defaultPatternsByType.date,\n },\n );\n\n const onPatternChange = useCallback(\n (pattern: DateTimePattern) => onChange({ ...formatting, pattern }),\n [onChange, formatting],\n );\n\n const onDropdownChange = useCallback<\n <T extends DateTime>(\n dateTime: T,\n ) => (\n e: SyntheticEvent,\n newSelected: Array<Required<DateTimePattern>[T]>,\n ) => void\n >(\n (dateTime) =>\n (_, [selectedPattern]) => {\n const updatedPattern = {\n ...(pattern ?? {}),\n [dateTime]: selectedPattern,\n };\n setFallbackState((s) => ({\n time: updatedPattern.time ?? s.time,\n date: updatedPattern.date ?? s.date,\n }));\n onPatternChange(updatedPattern);\n },\n [onPatternChange, pattern],\n );\n\n const onToggleChange = useCallback(\n (evnt: SyntheticEvent<HTMLButtonElement, Event>) => {\n const value = evnt.currentTarget.value as ToggleValue;\n switch (value) {\n case \"time\":\n return onPatternChange({\n [value]: pattern[value] ?? fallbackState[value],\n });\n case \"date\":\n return onPatternChange({\n [value]: pattern[value] ?? fallbackState[value],\n });\n case \"both\":\n return onPatternChange({\n time: pattern.time ?? fallbackState.time,\n date: pattern.date ?? fallbackState.date,\n });\n }\n },\n [onPatternChange, pattern, fallbackState],\n );\n\n return (\n <>\n <FormField labelPlacement=\"top\">\n <FormFieldLabel>{\"Display\"}</FormFieldLabel>\n <ToggleButtonGroup\n className=\"vuuToggleButtonGroup\"\n onChange={onToggleChange}\n value={toggleValue}\n data-variant=\"primary\"\n >\n {toggleValues.map((v) => (\n <ToggleButton key={v} value={v}>\n {v.toUpperCase()}\n </ToggleButton>\n ))}\n </ToggleButtonGroup>\n </FormField>\n\n {([\"date\", \"time\"] as const)\n .filter((v) => !!pattern[v])\n .map((v) => (\n <FormField labelPlacement=\"top\" key={v}>\n <FormFieldLabel>{`${dateTimeLabelByType[v]} pattern`}</FormFieldLabel>\n <Dropdown<Required<DateTimePattern>[typeof v]>\n onSelectionChange={onDropdownChange(v)}\n selected={getSelectedPattern(pattern[v])}\n >\n {supportedDateTimePatterns[v].map((pattern, i) => (\n <Option key={i} value={pattern}>\n {pattern}\n </Option>\n ))}\n </Dropdown>\n </FormField>\n ))}\n </>\n );\n};\n"],"names":["pattern"],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- var longTypeFormattingSettingsCss = ".vuuLongColumnFormattingSettings {\n display: flex;\n flex-direction: column;\n gap: var(--salt-spacing-200);\n padding-top: 6px;\n}\n";
2
-
3
- export { longTypeFormattingSettingsCss as default };
4
- //# sourceMappingURL=LongTypeFormattingSettings.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LongTypeFormattingSettings.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,47 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { useCallback } from 'react';
3
- import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
4
- import { useComponentCssInjection } from '@salt-ds/styles';
5
- import { useWindow } from '@salt-ds/window';
6
- import { isTypeDescriptor, isDateTimeDataValue } from '@vuu-ui/vuu-utils';
7
- import { DateTimeFormattingSettings } from './DateTimeFormattingSettings.js';
8
- import { BaseNumericFormattingSettings } from './BaseNumericFormattingSettings.js';
9
- import longTypeFormattingSettingsCss from './LongTypeFormattingSettings.css.js';
10
-
11
- const classBase = "vuuLongColumnFormattingSettings";
12
- const LongTypeFormattingSettings = (props) => {
13
- const targetWindow = useWindow();
14
- useComponentCssInjection({
15
- testId: "vuu-long-formatting-settings",
16
- css: longTypeFormattingSettingsCss,
17
- window: targetWindow
18
- });
19
- const { column, onChangeColumnType: onChangeType } = props;
20
- const type = isTypeDescriptor(column.type) ? column.type.name : column.type;
21
- const handleToggleChange = useCallback(
22
- (event) => {
23
- const value = event.currentTarget.value;
24
- onChangeType(value);
25
- },
26
- [onChangeType]
27
- );
28
- return /* @__PURE__ */ jsxs("div", { className: classBase, children: [
29
- /* @__PURE__ */ jsxs(FormField, { children: [
30
- /* @__PURE__ */ jsx(FormFieldLabel, { children: "Type inferred as" }),
31
- /* @__PURE__ */ jsx(
32
- ToggleButtonGroup,
33
- {
34
- className: "vuuToggleButtonGroup",
35
- onChange: handleToggleChange,
36
- value: type ?? "number",
37
- children: toggleValues.map((v) => /* @__PURE__ */ jsx(ToggleButton, { value: v, children: v.toUpperCase() }, v))
38
- }
39
- )
40
- ] }),
41
- isDateTimeDataValue(column) ? /* @__PURE__ */ jsx(DateTimeFormattingSettings, { ...props, column }) : /* @__PURE__ */ jsx(BaseNumericFormattingSettings, { ...props })
42
- ] });
43
- };
44
- const toggleValues = ["number", "date/time"];
45
-
46
- export { LongTypeFormattingSettings };
47
- //# sourceMappingURL=LongTypeFormattingSettings.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LongTypeFormattingSettings.js","sources":["../../src/column-formatting-settings/LongTypeFormattingSettings.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport {\n FormField,\n FormFieldLabel,\n ToggleButton,\n ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { isDateTimeDataValue, isTypeDescriptor } from \"@vuu-ui/vuu-utils\";\nimport { DateTimeFormattingSettings } from \"./DateTimeFormattingSettings\";\nimport { BaseNumericFormattingSettings } from \"./BaseNumericFormattingSettings\";\nimport { FormattingSettingsProps } from \"@vuu-ui/vuu-table-types\";\n\nimport longTypeFormattingSettingsCss from \"./LongTypeFormattingSettings.css\";\n\nconst classBase = \"vuuLongColumnFormattingSettings\";\n\nexport const LongTypeFormattingSettings = (props: FormattingSettingsProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-long-formatting-settings\",\n css: longTypeFormattingSettingsCss,\n window: targetWindow,\n });\n\n const { column, onChangeColumnType: onChangeType } = props;\n const type = isTypeDescriptor(column.type) ? column.type.name : column.type;\n\n const handleToggleChange = useCallback(\n (event: React.SyntheticEvent<HTMLButtonElement, Event>) => {\n const value = event.currentTarget.value as ToggleValue;\n onChangeType(value);\n },\n [onChangeType],\n );\n\n return (\n <div className={classBase}>\n <FormField>\n <FormFieldLabel>{\"Type inferred as\"}</FormFieldLabel>\n <ToggleButtonGroup\n className=\"vuuToggleButtonGroup\"\n onChange={handleToggleChange}\n value={type ?? \"number\"}\n >\n {toggleValues.map((v) => (\n <ToggleButton key={v} value={v}>\n {v.toUpperCase()}\n </ToggleButton>\n ))}\n </ToggleButtonGroup>\n </FormField>\n\n {isDateTimeDataValue(column) ? (\n <DateTimeFormattingSettings {...props} column={column} />\n ) : (\n <BaseNumericFormattingSettings {...props} />\n )}\n </div>\n );\n};\n\nconst toggleValues = [\"number\", \"date/time\"] as const;\ntype ToggleValue = (typeof toggleValues)[number];\n"],"names":[],"mappings":";;;;;;;;;;AAgBA,MAAM,SAAY,GAAA,iCAAA;AAEL,MAAA,0BAAA,GAA6B,CAAC,KAAmC,KAAA;AAC5E,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,8BAAA;AAAA,IACR,GAAK,EAAA,6BAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,MAAA,EAAQ,kBAAoB,EAAA,YAAA,EAAiB,GAAA,KAAA;AACrD,EAAM,MAAA,IAAA,GAAO,iBAAiB,MAAO,CAAA,IAAI,IAAI,MAAO,CAAA,IAAA,CAAK,OAAO,MAAO,CAAA,IAAA;AAEvE,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,KAA0D,KAAA;AACzD,MAAM,MAAA,KAAA,GAAQ,MAAM,aAAc,CAAA,KAAA;AAClC,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,SACd,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,SACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAgB,QAAmB,EAAA,kBAAA,EAAA,CAAA;AAAA,sBACpC,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,sBAAA;AAAA,UACV,QAAU,EAAA,kBAAA;AAAA,UACV,OAAO,IAAQ,IAAA,QAAA;AAAA,UAEd,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,CAAA,qBAChB,GAAA,CAAA,YAAA,EAAA,EAAqB,KAAO,EAAA,CAAA,EAC1B,QAAE,EAAA,CAAA,CAAA,WAAA,EADc,EAAA,EAAA,CAEnB,CACD;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA,IAEC,mBAAoB,CAAA,MAAM,CACzB,mBAAA,GAAA,CAAC,0BAA4B,EAAA,EAAA,GAAG,KAAO,EAAA,MAAA,EAAgB,CAEvD,mBAAA,GAAA,CAAC,6BAA+B,EAAA,EAAA,GAAG,KAAO,EAAA;AAAA,GAE9C,EAAA,CAAA;AAEJ;AAEA,MAAM,YAAA,GAAe,CAAC,QAAA,EAAU,WAAW,CAAA;;;;"}
@@ -1,4 +0,0 @@
1
- var columnList = ".vuuColumnList {\n --vuuMeasuredContainer-flex: 1 1 1px;\n --vuu-svg-function: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\"><path d=\"M5.8625 10.5V9.625H6.72291L8.4875 7.59792L6.72291 5.54167H5.64375L4.60833 10.8792C4.53055 11.3167 4.36527 11.6545 4.1125 11.8927C3.85972 12.1309 3.53402 12.25 3.13541 12.25C2.7368 12.25 2.40382 12.1333 2.13645 11.9C1.86909 11.6667 1.73541 11.375 1.73541 11.025C1.73541 10.7625 1.80833 10.551 1.95416 10.3906C2.1 10.2302 2.28958 10.15 2.52291 10.15C2.72708 10.15 2.89479 10.2083 3.02604 10.325C3.15729 10.4417 3.22291 10.5972 3.22291 10.7917C3.22291 10.8986 3.20104 10.9983 3.15729 11.0906C3.11354 11.183 3.05277 11.2583 2.975 11.3167C3.01388 11.3361 3.0552 11.3507 3.09895 11.3604C3.1427 11.3701 3.18888 11.375 3.2375 11.375C3.36388 11.375 3.47083 11.3142 3.55833 11.1927C3.64583 11.0712 3.70902 10.9132 3.74791 10.7188L4.75416 5.54167H2.91666V4.66667H4.91458L5.22083 3.12083C5.30833 2.68333 5.48333 2.34549 5.74583 2.10729C6.00833 1.8691 6.33402 1.75 6.72291 1.75C7.12152 1.75 7.44965 1.86667 7.70729 2.1C7.96493 2.33333 8.09375 2.625 8.09375 2.975C8.09375 3.2375 8.02083 3.44896 7.875 3.60938C7.72916 3.76979 7.53958 3.85 7.30625 3.85C7.1118 3.85 6.94652 3.7941 6.81041 3.68229C6.6743 3.57049 6.60625 3.42222 6.60625 3.2375C6.60625 3.14028 6.62569 3.04549 6.66458 2.95312C6.70347 2.86076 6.75208 2.78542 6.81041 2.72708C6.79097 2.70764 6.7618 2.69063 6.72291 2.67604C6.68402 2.66146 6.64513 2.65417 6.60625 2.65417C6.47986 2.65417 6.37048 2.7125 6.27812 2.82917C6.18576 2.94583 6.12013 3.09653 6.08125 3.28125L5.81875 4.66667H8.575V5.54167H7.88958L9.1 6.94167L10.2375 5.54167H9.5375V4.66667H12.25V5.54167H11.4042L9.65416 7.59792L11.4042 9.625H12.25V10.5H9.5375V9.625H10.2375L9.07083 8.26875L7.875 9.625H8.575V10.5H5.8625Z\"/></svg>');\n --vuuList-borderStyle: none;\n --vuuListItem-padding: 0;\n display: flex;\n flex-direction: column;\n\n\n .saltOption {\n align-items: center;\n background-color: var(--salt-container-primary-background);\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n gap: var(--salt-spacing-200);\n padding: var(--salt=spacin-100) 0;\n\n .vuuIcon {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n }\n }\n\n .vuuColumnList-text {\n flex: 1 1 auto;\n }\n\n}\n\n[data-icon=\"function\"] {\n --vuu-icon-svg: var(--vuu-svg-function);\n}\n\n\n\n.vuuColumnList-withColumnNavgation {\n .vuuColumnList-text:hover {\n font-weight: 600;\n text-decoration: underline;\n }\n}\n\n.vuuColumnList-header {\n border-top: solid 2px var(--vuu-color-gray-30);\n flex: 0 0 40px;\n font-size: 14px;\n font-weight: 600;\n padding-top: 24px;\n}\n\n.vuuColumnList-colHeadings {\n border-bottom: solid 2px var(--vuu-color-gray-30);\n color: var(--vuu-color-gray-50);\n display: flex;\n flex: 0 0 24px;\n font-size: 10px;\n justify-content: space-between;\n margin-top: 16px;\n padding-bottom: 8px;\n}\n";
2
-
3
- export { columnList as default };
4
- //# sourceMappingURL=ColumnList.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ColumnList.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,172 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { DragDropProvider } from '@dnd-kit/react';
3
- import { useSortable } from '@dnd-kit/react/sortable';
4
- import { ListBox, Option, Checkbox, Switch } from '@salt-ds/core';
5
- import { useComponentCssInjection } from '@salt-ds/styles';
6
- import { useWindow } from '@salt-ds/window';
7
- import { IconButton, Icon } from '@vuu-ui/vuu-ui-controls';
8
- import { queryClosest, reorderColumnItems, getColumnLabel } from '@vuu-ui/vuu-utils';
9
- import cx from 'clsx';
10
- import { useRef, useCallback, useMemo } from 'react';
11
- import columnList from './ColumnList.css.js';
12
-
13
- const classBase = "vuuColumnList";
14
- const classBaseListItem = "vuuColumnListItem";
15
- const useSorting = (id, index, allowSort = true) => {
16
- const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({
17
- id,
18
- index
19
- });
20
- const noopRef = useCallback(() => {
21
- }, []);
22
- const [handleRef, ref] = useMemo(() => {
23
- return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];
24
- }, [allowSort, noopRef, sortableHandleRef, sortableRef]);
25
- return {
26
- handleRef,
27
- ref
28
- };
29
- };
30
- const ColumnListItem = ({
31
- className: classNameProp,
32
- index,
33
- item,
34
- permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },
35
- ...optionProps
36
- }) => {
37
- const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);
38
- return /* @__PURE__ */ jsxs(
39
- Option,
40
- {
41
- ...optionProps,
42
- className: cx(classNameProp, classBaseListItem),
43
- "data-name": item.name,
44
- id: item.name,
45
- ref,
46
- children: [
47
- allowReorderColumns ? /* @__PURE__ */ jsx(
48
- IconButton,
49
- {
50
- "data-embedded": true,
51
- appearance: "transparent",
52
- icon: "draggable",
53
- ref: handleRef,
54
- size: 16
55
- }
56
- ) : null,
57
- item?.isCalculated ? /* @__PURE__ */ jsx(Icon, { name: "function" }) : /* @__PURE__ */ jsx(
58
- Checkbox,
59
- {
60
- className: `${classBase}-checkBox`,
61
- checked: item?.subscribed,
62
- readOnly: allowRemoveColumns === false
63
- }
64
- ),
65
- /* @__PURE__ */ jsx("span", { className: `${classBase}-text`, children: getColumnLabel(item) }),
66
- allowHideColumns !== false ? /* @__PURE__ */ jsx(
67
- Switch,
68
- {
69
- className: `${classBase}-switch`,
70
- checked: item?.hidden !== true,
71
- disabled: item?.subscribed !== true
72
- }
73
- ) : null
74
- ]
75
- }
76
- );
77
- };
78
- const defaultPermissions = {
79
- allowHideColumns: true,
80
- allowRemoveColumns: true,
81
- allowReorderColumns: true
82
- };
83
- const ColumnList = ({
84
- className,
85
- columnItems,
86
- onChange,
87
- onNavigateToColumn,
88
- onReorderColumnItems,
89
- permissions = defaultPermissions,
90
- ...htmlAttributes
91
- }) => {
92
- const targetWindow = useWindow();
93
- useComponentCssInjection({
94
- testId: "vuu-column-list",
95
- css: columnList,
96
- window: targetWindow
97
- });
98
- const listRef = useRef(null);
99
- const handleChange = useCallback(
100
- ({ target }) => {
101
- const input = target;
102
- const listItem = queryClosest(target, `.${classBaseListItem}`);
103
- if (listItem) {
104
- const {
105
- dataset: { name }
106
- } = listItem;
107
- if (name) {
108
- const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);
109
- const saltSwitch = queryClosest(target, `.${classBase}-switch`);
110
- if (saltCheckbox) {
111
- onChange(name, "subscribed", input.checked);
112
- } else if (saltSwitch) {
113
- onChange(name, "hidden", input.checked === false);
114
- }
115
- }
116
- }
117
- },
118
- [onChange]
119
- );
120
- const handleClick = useCallback(
121
- (evt) => {
122
- const targetEl = evt.target;
123
- if (targetEl.classList.contains("vuuColumnList-text")) {
124
- const listItemEl = targetEl.closest(".vuuListItem");
125
- if (listItemEl?.dataset.name) {
126
- onNavigateToColumn?.(listItemEl.dataset.name);
127
- }
128
- }
129
- },
130
- [onNavigateToColumn]
131
- );
132
- const handleDragEnd = useCallback(() => {
133
- setTimeout(() => {
134
- const listItems = listRef.current?.querySelectorAll(".saltOption");
135
- if (listItems) {
136
- const orderedIds = Array.from(listItems).map(({ id }) => id);
137
- onReorderColumnItems?.(reorderColumnItems(columnItems, orderedIds));
138
- }
139
- }, 300);
140
- }, [columnItems, onReorderColumnItems]);
141
- return /* @__PURE__ */ jsx(DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs(
142
- "div",
143
- {
144
- ...htmlAttributes,
145
- className: cx(classBase, className, {
146
- [`${classBase}-withColumnNavigation`]: typeof onNavigateToColumn === "function"
147
- }),
148
- children: [
149
- /* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx("span", { children: "Column Selection" }) }),
150
- /* @__PURE__ */ jsxs("div", { className: `${classBase}-colHeadings`, children: [
151
- /* @__PURE__ */ jsx("span", { children: "Column subscription" }),
152
- /* @__PURE__ */ jsx("span", { children: "Visibility" })
153
- ] }),
154
- /* @__PURE__ */ jsx(ListBox, { ref: listRef, children: columnItems.map((columnItem, index) => /* @__PURE__ */ jsx(
155
- ColumnListItem,
156
- {
157
- item: columnItem,
158
- index,
159
- onChange: handleChange,
160
- onClick: handleClick,
161
- permissions,
162
- value: columnItem
163
- },
164
- columnItem.name
165
- )) })
166
- ]
167
- }
168
- ) });
169
- };
170
-
171
- export { ColumnList };
172
- //# sourceMappingURL=ColumnList.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ColumnList.js","sources":["../../src/column-list/ColumnList.tsx"],"sourcesContent":["import { DragDropProvider } from \"@dnd-kit/react\";\nimport { useSortable } from \"@dnd-kit/react/sortable\";\nimport { Checkbox, ListBox, Option, OptionProps, Switch } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n ColumnDescriptor,\n ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n getColumnLabel,\n queryClosest,\n reorderColumnItems,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n HTMLAttributes,\n MouseEventHandler,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n} from \"react\";\nimport { ColumnItem } from \"../table-column-settings/useTableSettings\";\n\nimport columnList from \"./ColumnList.css\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\n\nconst useSorting = (id: string, index: number, allowSort = true) => {\n const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n id,\n index,\n });\n\n const noopRef = useCallback(() => {\n // do nothing\n }, []);\n\n const [handleRef, ref] = useMemo(() => {\n return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];\n }, [allowSort, noopRef, sortableHandleRef, sortableRef]);\n\n return {\n handleRef,\n ref,\n };\n};\n\nexport type ColumnChangeHandler = (\n columnName: string,\n propertyName: keyof ColumnDescriptor | \"subscribed\",\n value: string | number | boolean,\n) => void;\n\nexport interface ColumnListProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n columnItems: ColumnItem[];\n onChange: ColumnChangeHandler;\n onNavigateToColumn?: (columnName: string) => void;\n onReorderColumnItems?: (columnItems: ColumnItem[]) => void;\n permissions?: ColumnListPermissions;\n}\n\nconst ColumnListItem = ({\n className: classNameProp,\n index,\n item,\n permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },\n ...optionProps\n}: OptionProps & {\n index: number;\n item: ColumnItem;\n permissions: ColumnListPermissions;\n}) => {\n const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);\n return (\n <Option\n {...optionProps}\n className={cx(classNameProp, classBaseListItem)}\n data-name={item.name}\n id={item.name}\n ref={ref}\n >\n {allowReorderColumns ? (\n <IconButton\n data-embedded\n appearance=\"transparent\"\n icon=\"draggable\"\n ref={handleRef}\n size={16}\n />\n ) : null}\n {item?.isCalculated ? (\n <Icon name=\"function\" />\n ) : (\n <Checkbox\n className={`${classBase}-checkBox`}\n checked={item?.subscribed}\n readOnly={allowRemoveColumns === false}\n />\n )}\n <span className={`${classBase}-text`}>\n {getColumnLabel(item as ColumnDescriptor)}\n </span>\n {allowHideColumns !== false ? (\n <Switch\n className={`${classBase}-switch`}\n checked={item?.hidden !== true}\n disabled={item?.subscribed !== true}\n />\n ) : null}\n </Option>\n );\n};\n\nconst defaultPermissions: ColumnListPermissions = {\n allowHideColumns: true,\n allowRemoveColumns: true,\n allowReorderColumns: true,\n};\n\nexport const ColumnList = ({\n className,\n columnItems,\n onChange,\n onNavigateToColumn,\n onReorderColumnItems,\n permissions = defaultPermissions,\n ...htmlAttributes\n}: ColumnListProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-list\",\n css: columnList,\n window: targetWindow,\n });\n const listRef = useRef<HTMLDivElement>(null);\n\n const handleChange = useCallback(\n ({ target }: SyntheticEvent) => {\n const input = target as HTMLInputElement;\n const listItem = queryClosest(target, `.${classBaseListItem}`);\n if (listItem) {\n const {\n dataset: { name },\n } = listItem;\n if (name) {\n const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n if (saltCheckbox) {\n onChange(name, \"subscribed\", input.checked);\n } else if (saltSwitch) {\n onChange(name, \"hidden\", input.checked === false);\n }\n }\n }\n },\n [onChange],\n );\n\n const handleClick = useCallback<MouseEventHandler>(\n (evt) => {\n const targetEl = evt.target as HTMLElement;\n if (targetEl.classList.contains(\"vuuColumnList-text\")) {\n const listItemEl = targetEl.closest(\".vuuListItem\") as HTMLElement;\n if (listItemEl?.dataset.name) {\n onNavigateToColumn?.(listItemEl.dataset.name);\n }\n }\n },\n [onNavigateToColumn],\n );\n\n const handleDragEnd = useCallback(() => {\n setTimeout(() => {\n const listItems =\n listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n if (listItems) {\n const orderedIds = Array.from(listItems).map(({ id }) => id);\n onReorderColumnItems?.(reorderColumnItems(columnItems, orderedIds));\n }\n }, 300);\n }, [columnItems, onReorderColumnItems]);\n\n return (\n <DragDropProvider onDragEnd={handleDragEnd}>\n <div\n {...htmlAttributes}\n className={cx(classBase, className, {\n [`${classBase}-withColumnNavigation`]:\n typeof onNavigateToColumn === \"function\",\n })}\n >\n <div className={`${classBase}-header`}>\n <span>Column Selection</span>\n </div>\n <div className={`${classBase}-colHeadings`}>\n <span>Column subscription</span>\n <span>Visibility</span>\n </div>\n <ListBox ref={listRef}>\n {columnItems.map((columnItem, index) => (\n <ColumnListItem\n item={columnItem}\n index={index}\n key={columnItem.name}\n onChange={handleChange}\n onClick={handleClick}\n permissions={permissions}\n value={columnItem}\n />\n ))}\n </ListBox>\n </div>\n </DragDropProvider>\n );\n};\n"],"names":[],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- var columnMenuCss = ".vuuMenuItem {\n --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>');\n}\n.vuuColumnMenu {\n --menu-button-size: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-minWidth: var(--menu-button-size);\n --saltButton-height: var(--menu-button-size);\n --saltButton-width: var(--menu-button-size);\n\n --vuu-icon-height: var(--menu-button-size);\n --vuu-icon-left: 0px;\n --vuu-icon-top: 0px;\n --vuu-icon-width: var(--menu-button-size);\n\n border: none;\n border-radius: 4px;\n flex: 0 0 var(--menu-button-size);\n margin: var(--vuuTable-columnMenu-margin, 0);\n padding: 0;\n}\n";
2
-
3
- export { columnMenuCss as default };
4
- //# sourceMappingURL=ColumnMenu.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ColumnMenu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}