@vuu-ui/vuu-table-extras 1.0.2 → 2.0.0-alpha.1

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 (187) hide show
  1. package/cjs/{column-expression-panel/ColumnExpressionPanel.js → calculated-column/CalculatedColumnPanel.js} +13 -13
  2. package/cjs/calculated-column/CalculatedColumnPanel.js.map +1 -0
  3. package/cjs/{column-expression-panel/useColumnExpression.js → calculated-column/useCalculatedColumnPanel.js} +12 -10
  4. package/cjs/calculated-column/useCalculatedColumnPanel.js.map +1 -0
  5. package/cjs/calculated-column/useEditCalculatedColumn.js +138 -0
  6. package/cjs/calculated-column/useEditCalculatedColumn.js.map +1 -0
  7. package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js +1 -0
  8. package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js.map +1 -1
  9. package/cjs/column-formatting-settings/ColumnFormattingPanel.js +1 -0
  10. package/cjs/column-formatting-settings/ColumnFormattingPanel.js.map +1 -1
  11. package/cjs/column-menu/ColumnMenu.js +2 -3
  12. package/cjs/column-menu/ColumnMenu.js.map +1 -1
  13. package/cjs/column-menu/column-menu-utils.js +3 -18
  14. package/cjs/column-menu/column-menu-utils.js.map +1 -1
  15. package/cjs/column-menu/useColumnActions.js +0 -2
  16. package/cjs/column-menu/useColumnActions.js.map +1 -1
  17. package/cjs/column-picker/ColumnModel.js +58 -0
  18. package/cjs/column-picker/ColumnModel.js.map +1 -1
  19. package/cjs/column-picker/ColumnPicker.css.js +1 -1
  20. package/cjs/column-picker/ColumnPicker.js +37 -14
  21. package/cjs/column-picker/ColumnPicker.js.map +1 -1
  22. package/cjs/column-picker/ColumnPickerAction.js +34 -0
  23. package/cjs/column-picker/ColumnPickerAction.js.map +1 -0
  24. package/cjs/column-picker/useColumnPicker.js +2 -1
  25. package/cjs/column-picker/useColumnPicker.js.map +1 -1
  26. package/cjs/column-picker/useTableColumnPicker.js +35 -0
  27. package/cjs/column-picker/useTableColumnPicker.js.map +1 -0
  28. package/cjs/column-settings-panel/ColumnNameLabel.js.map +1 -0
  29. package/cjs/{table-column-settings → column-settings-panel}/ColumnSettingsPanel.css.js +1 -1
  30. package/cjs/column-settings-panel/ColumnSettingsPanel.js +161 -0
  31. package/cjs/column-settings-panel/ColumnSettingsPanel.js.map +1 -0
  32. package/cjs/{table-column-settings → column-settings-panel}/useColumnSettings.js +42 -79
  33. package/cjs/column-settings-panel/useColumnSettings.js.map +1 -0
  34. package/cjs/column-settings-panel/useTableAndColumnSettings.js +37 -0
  35. package/cjs/column-settings-panel/useTableAndColumnSettings.js.map +1 -0
  36. package/cjs/datasource-stats/DatasourceStats.css.js +1 -1
  37. package/cjs/index.js +22 -17
  38. package/cjs/index.js.map +1 -1
  39. package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.css.js +6 -0
  40. package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.css.js.map +1 -0
  41. package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.js +90 -0
  42. package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.js.map +1 -0
  43. package/cjs/tabbed-table-config-panel/TabbedTableSettingsAction.js +44 -0
  44. package/cjs/tabbed-table-config-panel/TabbedTableSettingsAction.js.map +1 -0
  45. package/cjs/tabbed-table-config-panel/useTabbedTableConfigPanel.js +49 -0
  46. package/cjs/tabbed-table-config-panel/useTabbedTableConfigPanel.js.map +1 -0
  47. package/cjs/table-footer/TableFooter.css.js +6 -0
  48. package/cjs/table-footer/TableFooter.css.js.map +1 -0
  49. package/cjs/table-footer/TableFooter.js +47 -0
  50. package/cjs/table-footer/TableFooter.js.map +1 -0
  51. package/cjs/{table-column-settings → table-settings-panel}/TableSettingsPanel.css.js +1 -1
  52. package/cjs/{table-column-settings → table-settings-panel}/TableSettingsPanel.js +12 -47
  53. package/cjs/table-settings-panel/TableSettingsPanel.js.map +1 -0
  54. package/cjs/table-settings-panel/useTableSettings.js +60 -0
  55. package/cjs/table-settings-panel/useTableSettings.js.map +1 -0
  56. package/esm/{column-expression-panel/ColumnExpressionPanel.js → calculated-column/CalculatedColumnPanel.js} +13 -13
  57. package/esm/calculated-column/CalculatedColumnPanel.js.map +1 -0
  58. package/esm/{column-expression-panel/useColumnExpression.js → calculated-column/useCalculatedColumnPanel.js} +12 -10
  59. package/esm/calculated-column/useCalculatedColumnPanel.js.map +1 -0
  60. package/esm/calculated-column/useEditCalculatedColumn.js +136 -0
  61. package/esm/calculated-column/useEditCalculatedColumn.js.map +1 -0
  62. package/esm/column-formatting-settings/BaseNumericFormattingSettings.js +1 -0
  63. package/esm/column-formatting-settings/BaseNumericFormattingSettings.js.map +1 -1
  64. package/esm/column-formatting-settings/ColumnFormattingPanel.js +1 -0
  65. package/esm/column-formatting-settings/ColumnFormattingPanel.js.map +1 -1
  66. package/esm/column-menu/ColumnMenu.js +2 -3
  67. package/esm/column-menu/ColumnMenu.js.map +1 -1
  68. package/esm/column-menu/column-menu-utils.js +3 -18
  69. package/esm/column-menu/column-menu-utils.js.map +1 -1
  70. package/esm/column-menu/useColumnActions.js +0 -2
  71. package/esm/column-menu/useColumnActions.js.map +1 -1
  72. package/esm/column-picker/ColumnModel.js +58 -0
  73. package/esm/column-picker/ColumnModel.js.map +1 -1
  74. package/esm/column-picker/ColumnPicker.css.js +1 -1
  75. package/esm/column-picker/ColumnPicker.js +39 -16
  76. package/esm/column-picker/ColumnPicker.js.map +1 -1
  77. package/esm/column-picker/ColumnPickerAction.js +32 -0
  78. package/esm/column-picker/ColumnPickerAction.js.map +1 -0
  79. package/esm/column-picker/useColumnPicker.js +2 -1
  80. package/esm/column-picker/useColumnPicker.js.map +1 -1
  81. package/esm/column-picker/useTableColumnPicker.js +33 -0
  82. package/esm/column-picker/useTableColumnPicker.js.map +1 -0
  83. package/esm/column-settings-panel/ColumnNameLabel.js.map +1 -0
  84. package/esm/{table-column-settings → column-settings-panel}/ColumnSettingsPanel.css.js +1 -1
  85. package/esm/column-settings-panel/ColumnSettingsPanel.js +159 -0
  86. package/esm/column-settings-panel/ColumnSettingsPanel.js.map +1 -0
  87. package/esm/{table-column-settings → column-settings-panel}/useColumnSettings.js +44 -81
  88. package/esm/column-settings-panel/useColumnSettings.js.map +1 -0
  89. package/esm/column-settings-panel/useTableAndColumnSettings.js +33 -0
  90. package/esm/column-settings-panel/useTableAndColumnSettings.js.map +1 -0
  91. package/esm/datasource-stats/DatasourceStats.css.js +1 -1
  92. package/esm/index.js +10 -7
  93. package/esm/index.js.map +1 -1
  94. package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.css.js +4 -0
  95. package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.css.js.map +1 -0
  96. package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.js +88 -0
  97. package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.js.map +1 -0
  98. package/esm/tabbed-table-config-panel/TabbedTableSettingsAction.js +42 -0
  99. package/esm/tabbed-table-config-panel/TabbedTableSettingsAction.js.map +1 -0
  100. package/esm/tabbed-table-config-panel/useTabbedTableConfigPanel.js +47 -0
  101. package/esm/tabbed-table-config-panel/useTabbedTableConfigPanel.js.map +1 -0
  102. package/esm/table-footer/TableFooter.css.js +4 -0
  103. package/esm/table-footer/TableFooter.css.js.map +1 -0
  104. package/esm/table-footer/TableFooter.js +44 -0
  105. package/esm/table-footer/TableFooter.js.map +1 -0
  106. package/esm/{table-column-settings → table-settings-panel}/TableSettingsPanel.css.js +1 -1
  107. package/esm/{table-column-settings → table-settings-panel}/TableSettingsPanel.js +13 -48
  108. package/esm/table-settings-panel/TableSettingsPanel.js.map +1 -0
  109. package/esm/table-settings-panel/useTableSettings.js +58 -0
  110. package/esm/table-settings-panel/useTableSettings.js.map +1 -0
  111. package/package.json +12 -11
  112. package/types/calculated-column/CalculatedColumnPanel.d.ts +12 -0
  113. package/types/calculated-column/useCalculatedColumnPanel.d.ts +10 -0
  114. package/types/calculated-column/useEditCalculatedColumn.d.ts +13 -0
  115. package/types/column-menu/column-action-types.d.ts +1 -4
  116. package/types/column-menu/column-menu-utils.d.ts +4 -4
  117. package/types/column-picker/ColumnModel.d.ts +26 -3
  118. package/types/column-picker/ColumnPicker.d.ts +7 -3
  119. package/types/column-picker/ColumnPickerAction.d.ts +5 -0
  120. package/types/column-picker/useColumnPicker.d.ts +5 -4
  121. package/types/column-picker/useTableColumnPicker.d.ts +7 -0
  122. package/types/column-picker/useTableColumnPickerDeprecated.d.ts +14 -0
  123. package/types/{table-column-settings → column-settings-panel}/ColumnNameLabel.d.ts +1 -1
  124. package/types/column-settings-panel/ColumnSettingsPanel.d.ts +5 -0
  125. package/types/{table-column-settings → column-settings-panel}/useColumnSettings.d.ts +14 -7
  126. package/types/column-settings-panel/useTableAndColumnSettings.d.ts +13 -0
  127. package/types/index.d.ts +11 -9
  128. package/types/tabbed-table-config-panel/TabbedTableConfigPanel.d.ts +17 -0
  129. package/types/tabbed-table-config-panel/TabbedTableSettingsAction.d.ts +7 -0
  130. package/types/tabbed-table-config-panel/useTabbedTableConfigPanel.d.ts +13 -0
  131. package/types/table-footer/TableFooter.d.ts +9 -0
  132. package/types/table-settings-panel/TableSettingsPanel.d.ts +22 -0
  133. package/types/table-settings-panel/useTableSettings.d.ts +14 -0
  134. package/cjs/column-expression-panel/ColumnExpressionPanel.js.map +0 -1
  135. package/cjs/column-expression-panel/useColumnExpression.js.map +0 -1
  136. package/cjs/column-list/ColumnList.css.js +0 -6
  137. package/cjs/column-list/ColumnList.css.js.map +0 -1
  138. package/cjs/column-list/ColumnList.js +0 -218
  139. package/cjs/column-list/ColumnList.js.map +0 -1
  140. package/cjs/column-list/useColumnList.js +0 -66
  141. package/cjs/column-list/useColumnList.js.map +0 -1
  142. package/cjs/table-column-settings/ColumnNameLabel.js.map +0 -1
  143. package/cjs/table-column-settings/ColumnSettingsPanel.js +0 -202
  144. package/cjs/table-column-settings/ColumnSettingsPanel.js.map +0 -1
  145. package/cjs/table-column-settings/TableSettingsPanel.js.map +0 -1
  146. package/cjs/table-column-settings/useColumnSettings.js.map +0 -1
  147. package/cjs/table-column-settings/useTableAndColumnSettings.js +0 -129
  148. package/cjs/table-column-settings/useTableAndColumnSettings.js.map +0 -1
  149. package/cjs/table-column-settings/useTableSettings.js +0 -176
  150. package/cjs/table-column-settings/useTableSettings.js.map +0 -1
  151. package/esm/column-expression-panel/ColumnExpressionPanel.js.map +0 -1
  152. package/esm/column-expression-panel/useColumnExpression.js.map +0 -1
  153. package/esm/column-list/ColumnList.css.js +0 -4
  154. package/esm/column-list/ColumnList.css.js.map +0 -1
  155. package/esm/column-list/ColumnList.js +0 -214
  156. package/esm/column-list/ColumnList.js.map +0 -1
  157. package/esm/column-list/useColumnList.js +0 -64
  158. package/esm/column-list/useColumnList.js.map +0 -1
  159. package/esm/table-column-settings/ColumnNameLabel.js.map +0 -1
  160. package/esm/table-column-settings/ColumnSettingsPanel.js +0 -200
  161. package/esm/table-column-settings/ColumnSettingsPanel.js.map +0 -1
  162. package/esm/table-column-settings/TableSettingsPanel.js.map +0 -1
  163. package/esm/table-column-settings/useColumnSettings.js.map +0 -1
  164. package/esm/table-column-settings/useTableAndColumnSettings.js +0 -125
  165. package/esm/table-column-settings/useTableAndColumnSettings.js.map +0 -1
  166. package/esm/table-column-settings/useTableSettings.js +0 -174
  167. package/esm/table-column-settings/useTableSettings.js.map +0 -1
  168. package/types/column-expression-panel/ColumnExpressionPanel.d.ts +0 -13
  169. package/types/column-expression-panel/index.d.ts +0 -1
  170. package/types/column-expression-panel/useColumnExpression.d.ts +0 -10
  171. package/types/column-list/ColumnList.d.ts +0 -11
  172. package/types/column-list/index.d.ts +0 -2
  173. package/types/column-list/useColumnList.d.ts +0 -22
  174. package/types/table-column-settings/ColumnSettingsPanel.d.ts +0 -2
  175. package/types/table-column-settings/TableSettingsPanel.d.ts +0 -9
  176. package/types/table-column-settings/useTableAndColumnSettings.d.ts +0 -18
  177. package/types/table-column-settings/useTableSettings.d.ts +0 -18
  178. /package/cjs/{table-column-settings → column-settings-panel}/ColumnNameLabel.css.js +0 -0
  179. /package/cjs/{table-column-settings → column-settings-panel}/ColumnNameLabel.css.js.map +0 -0
  180. /package/cjs/{table-column-settings → column-settings-panel}/ColumnNameLabel.js +0 -0
  181. /package/cjs/{table-column-settings → column-settings-panel}/ColumnSettingsPanel.css.js.map +0 -0
  182. /package/cjs/{table-column-settings → table-settings-panel}/TableSettingsPanel.css.js.map +0 -0
  183. /package/esm/{table-column-settings → column-settings-panel}/ColumnNameLabel.css.js +0 -0
  184. /package/esm/{table-column-settings → column-settings-panel}/ColumnNameLabel.css.js.map +0 -0
  185. /package/esm/{table-column-settings → column-settings-panel}/ColumnNameLabel.js +0 -0
  186. /package/esm/{table-column-settings → column-settings-panel}/ColumnSettingsPanel.css.js.map +0 -0
  187. /package/esm/{table-column-settings → table-settings-panel}/TableSettingsPanel.css.js.map +0 -0
@@ -1,6 +1,6 @@
1
1
  import { Menu, MenuItem, MenuItemProps, MenuProps } from "@salt-ds/core";
2
2
  import { DataSource } from "@vuu-ui/vuu-data-types";
3
- import { ColumnDescriptor, TableSettingsPermissions } from "@vuu-ui/vuu-table-types";
3
+ import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
4
4
  import { MouseEventHandler, ReactElement } from "react";
5
5
  type MenuElement = ReactElement<MenuProps, typeof Menu>;
6
6
  type MenuItemElement = ReactElement<MenuItemProps, typeof MenuItem>;
@@ -8,14 +8,14 @@ type MenuElements = Array<MenuElement | MenuItemElement>;
8
8
  export type MenuItemClickHandler = MouseEventHandler<HTMLDivElement>;
9
9
  export type DataSourceColumnMenuActionType = "agg-count" | "agg-distinct" | "agg-sum" | "agg-avg" | "agg-high" | "agg-low" | "sort-asc" | "sort-dsc" | "sort-add-asc" | "sort-add-dsc" | "remove-sort" | "group-column" | "remove-group" | "add-to-group" | "remove-from-group" | "remove-column";
10
10
  export type ColumnDisplayColumnMenuActionType = "pin-column-left" | "pin-column-right" | "unpin-column" | "hide-column";
11
- export type TableSettingsActionType = "column-settings" | "table-settings";
12
- export type ColumnMenuActionType = DataSourceColumnMenuActionType | ColumnDisplayColumnMenuActionType | TableSettingsActionType;
11
+ export type ColumnSettingsActionType = "column-settings";
12
+ export type ColumnMenuActionType = DataSourceColumnMenuActionType | ColumnDisplayColumnMenuActionType | ColumnSettingsActionType;
13
13
  export declare const isColumnMenuActionType: (value?: string) => value is ColumnMenuActionType;
14
14
  export declare const getColumnMenuActionType: (target: EventTarget | HTMLElement) => ColumnMenuActionType;
15
15
  export declare function buildSortMenu(column: ColumnDescriptor, dataSource: DataSource, menuActionClickHandler: MenuItemClickHandler, isAllowed?: boolean): MenuElement | null;
16
16
  export declare function buildGroupMenu(column: ColumnDescriptor, dataSource: DataSource, menuActionClickHandler: MenuItemClickHandler, isAllowed?: boolean): MenuElement | null;
17
17
  export declare const buildVisibilityMenuItems: (column: ColumnDescriptor, menuActionClickHandler: MenuItemClickHandler, allowHide?: boolean, allowRemove?: boolean) => MenuElements | null;
18
18
  export declare const buildPinMenuItems: (column: ColumnDescriptor, menuActionClickHandler: MenuItemClickHandler, isAllowed?: boolean) => MenuElements;
19
- export declare const buildSettingsMenuItems: (_: ColumnDescriptor, menuActionClickHandler: MenuItemClickHandler, allowColumnSettings?: boolean, allowTableSettings?: boolean | TableSettingsPermissions) => MenuElements | null;
19
+ export declare const buildSettingsMenuItems: (_: ColumnDescriptor, menuActionClickHandler: MenuItemClickHandler, allowColumnSettings?: boolean) => MenuElements | null;
20
20
  export declare function buildAggregationMenuItems(column: ColumnDescriptor, dataSource: DataSource, menuActionClickHandler: MenuItemClickHandler, isAllowed?: boolean): MenuElements | null;
21
21
  export {};
@@ -2,12 +2,15 @@ import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
2
2
  import { EventEmitter, ValueOf } from "@vuu-ui/vuu-utils";
3
3
  export declare const ColumnChangeSource: {
4
4
  readonly ColumnPicker: "column-picker";
5
+ readonly ColumnSettings: "column-settings";
5
6
  readonly Table: "table";
6
7
  };
7
8
  export type ColumnChangeSource = ValueOf<typeof ColumnChangeSource>;
8
9
  export declare const SelectedColumnChangeType: {
10
+ readonly CalculatedColumnAdded: "calculated-column-added";
9
11
  readonly ColumnAdded: "column-added";
10
12
  readonly ColumnRemoved: "column-removed";
13
+ readonly ColumnUpdated: "column-updated";
11
14
  readonly ColumnsReordered: "columns-reordered";
12
15
  };
13
16
  export type SelectedColumnChangeType = ValueOf<typeof SelectedColumnChangeType>;
@@ -15,6 +18,14 @@ export interface SelectedColumnChangeColumnAdded {
15
18
  type: Extract<SelectedColumnChangeType, "column-added">;
16
19
  column: ColumnDescriptor;
17
20
  }
21
+ export interface SelectedColumnChangeCalculatedColumnAdded {
22
+ type: Extract<SelectedColumnChangeType, "calculated-column-added">;
23
+ column: ColumnDescriptor;
24
+ }
25
+ export interface SelectedColumnChangeColumnUpdated {
26
+ type: Extract<SelectedColumnChangeType, "column-updated">;
27
+ column: ColumnDescriptor;
28
+ }
18
29
  export interface SelectedColumnChangeColumnRemoved {
19
30
  type: Extract<SelectedColumnChangeType, "column-removed">;
20
31
  column: ColumnDescriptor;
@@ -22,9 +33,10 @@ export interface SelectedColumnChangeColumnRemoved {
22
33
  export interface SelectedColumnChangeColumnsReordered {
23
34
  type: Extract<SelectedColumnChangeType, "columns-reordered">;
24
35
  }
25
- export type SelectedColumnChangeDescriptor = SelectedColumnChangeColumnAdded | SelectedColumnChangeColumnRemoved | SelectedColumnChangeColumnsReordered;
36
+ export type SelectedColumnChangeDescriptor = SelectedColumnChangeCalculatedColumnAdded | SelectedColumnChangeColumnAdded | SelectedColumnChangeColumnRemoved | SelectedColumnChangeColumnUpdated | SelectedColumnChangeColumnsReordered;
26
37
  export declare const isColumnAdded: (change?: SelectedColumnChangeDescriptor) => change is SelectedColumnChangeColumnAdded;
27
38
  export declare const isColumnRemoved: (change?: SelectedColumnChangeDescriptor) => change is SelectedColumnChangeColumnRemoved;
39
+ export declare const isColumnUpdated: (change?: SelectedColumnChangeDescriptor) => change is SelectedColumnChangeColumnUpdated;
28
40
  export declare const isColumnsReordered: (change?: SelectedColumnChangeDescriptor) => change is SelectedColumnChangeColumnsReordered;
29
41
  export type ColumnsChangeHandler = (columns: readonly ColumnDescriptor[], changeSource: ColumnChangeSource, changeDescriptor?: SelectedColumnChangeDescriptor) => void;
30
42
  export type ColumnEvents = {
@@ -36,7 +48,7 @@ export declare class ColumnModel extends EventEmitter<ColumnEvents> {
36
48
  /**
37
49
  * All available columns, including selected columns.
38
50
  */
39
- readonly allColumns: readonly ColumnDescriptor[];
51
+ allColumns: readonly ColumnDescriptor[];
40
52
  constructor(
41
53
  /**
42
54
  * All available columns, including selected columns.
@@ -45,14 +57,25 @@ export declare class ColumnModel extends EventEmitter<ColumnEvents> {
45
57
  /**
46
58
  * Columns already selected and rendered in Table.
47
59
  */
48
- selectedColumns: ColumnDescriptor[]);
60
+ selectedColumns: readonly ColumnDescriptor[]);
49
61
  get availableColumns(): ColumnDescriptor[];
50
62
  set searchPattern(pattern: string);
51
63
  get searchPattern(): string;
52
64
  get selectedColumns(): readonly ColumnDescriptor[];
53
65
  setSelectedColumns(selectedColumns: ColumnDescriptor[], source: ColumnChangeSource, changeDescriptor?: SelectedColumnChangeDescriptor): void;
66
+ getColumn(name: string): ColumnDescriptor;
54
67
  addItemToSelectedColumns(name: string, source: ColumnChangeSource): void;
55
68
  removeItemFromSelectedColumns(name: string, source: ColumnChangeSource): void;
56
69
  reorderSelectedColumns(orderedColumnNames: string[], source: ColumnChangeSource): void;
70
+ updateColumn(currentColumn: ColumnDescriptor, newColumn: ColumnDescriptor): void;
71
+ updateColumn(column: ColumnDescriptor): void;
72
+ /**
73
+ * Used when adding a calculated column
74
+ *
75
+ * @param column
76
+ *
77
+ * @param addToSelectedColumns
78
+ */
79
+ addColumn(column: ColumnDescriptor, addToSelectedColumns?: boolean): void;
57
80
  private notifyListeners;
58
81
  }
@@ -1,6 +1,10 @@
1
- import { HTMLAttributes } from "react";
2
- import { ColumPickerHookProps } from "./useColumnPicker";
1
+ import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
2
+ import { HTMLAttributes, MouseEventHandler } from "react";
3
+ import { ListBoxProps } from "@salt-ds/core";
4
+ import { ColumnPickerHookProps } from "./useColumnPicker";
3
5
  export declare const classBaseListItem = "vuuColumnPickerListItem";
4
- export interface ColumnPickerProps extends ColumPickerHookProps, HTMLAttributes<HTMLDivElement> {
6
+ export interface ColumnPickerProps extends ColumnPickerHookProps, Pick<ListBoxProps<ColumnDescriptor>, "selected" | "onSelectionChange">, HTMLAttributes<HTMLDivElement> {
7
+ allowCreateCalculatedColumn?: boolean;
8
+ onClickCreateCalculatedColumn?: MouseEventHandler<HTMLButtonElement>;
5
9
  }
6
10
  export declare const ColumnPicker: import("react").ForwardRefExoticComponent<ColumnPickerProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,5 @@
1
+ import { IconButtonProps } from "@vuu-ui/vuu-ui-controls";
2
+ import { ColumnPickerHookProps } from "./useColumnPicker";
3
+ export interface ColumnPickerActionProps extends Partial<IconButtonProps>, ColumnPickerHookProps {
4
+ }
5
+ export declare const ColumnPickerAction: ({ appearance, columnModel, icon, sentiment, ...IconButtonProps }: ColumnPickerActionProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,12 +1,13 @@
1
- import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
1
+ import { ColumnDescriptor, TableSelectionModel } from "@vuu-ui/vuu-table-types";
2
2
  import { FormEventHandler, MouseEventHandler } from "react";
3
3
  import { ColumnModel, SelectedColumnChangeType } from "./ColumnModel";
4
- export type ColumnPickerAction = (column: ColumnDescriptor) => void;
4
+ export type ColumnSelectionModel = Extract<TableSelectionModel, "none" | "single">;
5
5
  export type SelectedColumnsChangeHandler = (columns: ColumnDescriptor[], changeType: SelectedColumnChangeType) => void;
6
- export interface ColumPickerHookProps {
6
+ export interface ColumnPickerHookProps {
7
7
  columnModel: ColumnModel;
8
+ selectionModel?: ColumnSelectionModel;
8
9
  }
9
- export declare const useColumnPicker: ({ columnModel: model, }: ColumPickerHookProps) => {
10
+ export declare const useColumnPicker: ({ columnModel: model, selectionModel, }: ColumnPickerHookProps) => {
10
11
  availableColumns: ColumnDescriptor[];
11
12
  onAddItemToSelectedList: MouseEventHandler<HTMLButtonElement>;
12
13
  onRemoveItemFromSelectedList: MouseEventHandler<HTMLButtonElement>;
@@ -0,0 +1,7 @@
1
+ import { ColumnModel } from "./ColumnModel";
2
+ export interface TableColumnPickerHookProps {
3
+ columnModel: ColumnModel;
4
+ }
5
+ export declare const useTableColumnPicker: ({ columnModel, }: TableColumnPickerHookProps) => {
6
+ showColumnPicker: (title?: string) => void;
7
+ };
@@ -0,0 +1,14 @@
1
+ import type { DataSource } from "@vuu-ui/vuu-data-types";
2
+ import { ColumnDescriptor, TableConfigChangeHandler } from "@vuu-ui/vuu-table-types";
3
+ export type TableColumnChangeHandler = (columns: ColumnDescriptor[], change: unknown) => void;
4
+ export interface ColumnPickerHookProps {
5
+ readonly availableColumns: ColumnDescriptor[];
6
+ dataSource: DataSource;
7
+ readonly selectedColumns: ColumnDescriptor[];
8
+ onTableColumnChange?: TableColumnChangeHandler;
9
+ }
10
+ export declare const useTableColumnPickerDeprecated: ({ availableColumns, dataSource, onTableColumnChange, selectedColumns: initialSelectedColumns, }: ColumnPickerHookProps) => {
11
+ onTableConfigChange: TableConfigChangeHandler;
12
+ showColumnPicker: (title?: string) => void;
13
+ selectedColumns: ColumnDescriptor[];
14
+ };
@@ -2,6 +2,6 @@ import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
2
2
  import { MouseEventHandler } from "react";
3
3
  export interface ColumnNameLabelProps {
4
4
  column: ColumnDescriptor;
5
- onClick: MouseEventHandler;
5
+ onClick?: MouseEventHandler;
6
6
  }
7
7
  export declare const ColumnNameLabel: ({ column, onClick }: ColumnNameLabelProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,5 @@
1
+ import { ColumnSettingsProps } from "./useColumnSettings";
2
+ export interface ColumnSettinsPanelProps extends ColumnSettingsProps {
3
+ onClickEditCalculatedColumn?: () => void;
4
+ }
5
+ export declare const ColumnSettingsPanel: ({ column: columnProp, columnModel, onClickEditCalculatedColumn, onConfigChange, }: ColumnSettinsPanelProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,15 +1,24 @@
1
- import { ColumnDescriptor, ColumnTypeFormatting, ColumnSettingsProps } from "@vuu-ui/vuu-table-types";
1
+ import { ColumnDescriptor, TableConfig, ColumnTypeFormatting } from "@vuu-ui/vuu-table-types";
2
2
  import { CellRendererDescriptor, ColumnRenderPropsChangeHandler } from "@vuu-ui/vuu-utils";
3
- import { VuuColumnDataType } from "@vuu-ui/vuu-protocol-types";
3
+ import { VuuColumnDataType, VuuTable } from "@vuu-ui/vuu-protocol-types";
4
4
  import { FormEventHandler } from "react";
5
5
  import { DataValueTypeSimple } from "@vuu-ui/vuu-data-types";
6
- export declare const useColumnSettings: ({ column: columnProp, onCancelCreateColumn, onConfigChange, onCreateCalculatedColumn, tableConfig, }: Omit<ColumnSettingsProps, "vuuTable">) => {
6
+ import { ColumnModel } from "../column-picker/ColumnModel";
7
+ /**
8
+ * Describes the props for a Column Configuration Editor, for which
9
+ * an implementation is provided in vuu-table-extras
10
+ */
11
+ export interface ColumnSettingsProps {
12
+ column: ColumnDescriptor;
13
+ columnModel: ColumnModel;
14
+ onConfigChange?: (config: TableConfig) => void;
15
+ vuuTable?: VuuTable;
16
+ }
17
+ export declare const useColumnSettings: ({ column: columnProp, columnModel, }: Omit<ColumnSettingsProps, "vuuTable">) => {
7
18
  availableRenderers: CellRendererDescriptor[];
8
- editCalculatedColumn: boolean;
9
19
  column: ColumnDescriptor;
10
20
  navigateNextColumn: () => void;
11
21
  navigatePrevColumn: () => void;
12
- onCancel: () => void;
13
22
  onChange: FormEventHandler;
14
23
  onChangeCalculatedColumnName: (name: string) => void;
15
24
  onChangeFormatting: (formatting: ColumnTypeFormatting) => void;
@@ -17,7 +26,5 @@ export declare const useColumnSettings: ({ column: columnProp, onCancelCreateCol
17
26
  onChangeServerDataType: (serverDataType: VuuColumnDataType) => void;
18
27
  onChangeToggleButton: FormEventHandler;
19
28
  onChangeType: (type: DataValueTypeSimple) => void;
20
- onEditCalculatedColumn: () => void;
21
29
  onInputCommit: () => void;
22
- onSave: () => void;
23
30
  };
@@ -0,0 +1,13 @@
1
+ import { DataSourceConfig } from "@vuu-ui/vuu-data-types";
2
+ import { ColumnMenuPermissions, SettingsPermissions, TableConfig } from "@vuu-ui/vuu-table-types";
3
+ import { DisplayColumnSettingsAction } from "@vuu-ui/vuu-table-extras/src/column-menu/column-action-types";
4
+ export interface TableAndColumnSettingsHookProps {
5
+ onDataSourceConfigChange: (dataSourceConfig: DataSourceConfig) => void;
6
+ settingsPermissions?: SettingsPermissions;
7
+ tableConfig: TableConfig;
8
+ }
9
+ export declare const columnSettingsFromColumnMenuPermissions: (settings?: boolean | ColumnMenuPermissions) => boolean;
10
+ export declare const tableSettingsFromColumnMenuPermissions: (settings?: boolean | ColumnMenuPermissions) => boolean | Readonly<import("@vuu-ui/vuu-table-types").TableSettingsPermissions>;
11
+ export declare const useTableAndColumnSettings: ({ tableConfig, }: TableAndColumnSettingsHookProps) => {
12
+ showColumnSettingsPanel: (action: DisplayColumnSettingsAction) => void;
13
+ };
package/types/index.d.ts CHANGED
@@ -1,22 +1,24 @@
1
+ export { CalculatedColumnPanel } from "./calculated-column/CalculatedColumnPanel";
1
2
  export * from "./cell-edit-validators";
2
3
  export * from "./cell-renderers";
3
4
  export * from "./column-expression-input";
4
- export * from "./column-expression-panel";
5
5
  export * from "./column-formatting-settings";
6
- export * from "./column-list";
7
- export { ColumnList, type ColumnChangeHandler, type ColumnItem, } from "./column-list";
8
6
  export type { ColumnDisplayActionHandler, TableSettingsActionHandler, } from "./column-menu/column-action-types";
9
7
  export { ColumnMenu } from "./column-menu/ColumnMenu";
10
8
  export { useColumnActions } from "./column-menu/useColumnActions";
11
9
  export { ColumnChangeSource, ColumnModel, isColumnAdded, isColumnRemoved, isColumnsReordered, SelectedColumnChangeType, type ColumnEvents, type ColumnsChangeHandler, } from "./column-picker/ColumnModel";
12
10
  export { ColumnPicker, type ColumnPickerProps, } from "./column-picker/ColumnPicker";
13
- export { type ColumnPickerAction, type SelectedColumnsChangeHandler, } from "./column-picker/useColumnPicker";
11
+ export { ColumnPickerAction } from "./column-picker/ColumnPickerAction";
12
+ export { type SelectedColumnsChangeHandler } from "./column-picker/useColumnPicker";
13
+ export { useTableColumnPicker } from "./column-picker/useTableColumnPicker";
14
+ export { ColumnSettingsPanel } from "./column-settings-panel/ColumnSettingsPanel";
15
+ export { useColumnSettings } from "./column-settings-panel/useColumnSettings";
16
+ export { columnSettingsFromColumnMenuPermissions, tableSettingsFromColumnMenuPermissions, useTableAndColumnSettings, } from "./column-settings-panel/useTableAndColumnSettings";
14
17
  export { DataSourceStats, type DataSourceStatsProps, } from "./datasource-stats/DatasourceStats";
15
18
  export { FreezeControl } from "./freeze-control/FreezeControl";
16
19
  export { FrozenBanner } from "./freeze-control/FrozenBanner";
17
- export { ColumnSettingsPanel } from "./table-column-settings/ColumnSettingsPanel";
18
- export { defaultTableSettingsPermissions, TableSettingsPanel, } from "./table-column-settings/TableSettingsPanel";
19
- export { useColumnSettings } from "./table-column-settings/useColumnSettings";
20
- export { columnSettingsFromColumnMenuPermissions, tableSettingsFromColumnMenuPermissions, useTableAndColumnSettings, } from "./table-column-settings/useTableAndColumnSettings";
21
- export { useTableSettings } from "./table-column-settings/useTableSettings";
20
+ export { TabbedTableConfigPanel } from "./tabbed-table-config-panel/TabbedTableConfigPanel";
21
+ export { TabbedTableSettingsAction } from "./tabbed-table-config-panel/TabbedTableSettingsAction";
22
+ export { TableFooter, TableFooterTray } from "./table-footer/TableFooter";
22
23
  export { TableProvider, useTableContext } from "./table-provider/TableProvider";
24
+ export { defaultTableSettingsPermissions, TableSettingsPanel, type TableDisplayAttributeChangeHandler, } from "./table-settings-panel/TableSettingsPanel";
@@ -0,0 +1,17 @@
1
+ import { VuuTable } from "@vuu-ui/vuu-protocol-types";
2
+ import type { TableProps } from "@vuu-ui/vuu-table";
3
+ import { HTMLAttributes } from "react";
4
+ import { ColumnPickerProps } from "../column-picker/ColumnPicker";
5
+ import { TableSettingsPanelProps } from "../table-settings-panel/TableSettingsPanel";
6
+ declare const TabLabels: {
7
+ readonly "table-settings": "Table";
8
+ readonly "table-columns": "Columns";
9
+ };
10
+ type TabName = keyof typeof TabLabels;
11
+ export interface TabbedTableConfigPanelProps extends ColumnPickerProps, Pick<TableSettingsPanelProps, "onDisplayAttributeChange">, Pick<TableProps, "config">, HTMLAttributes<HTMLDivElement> {
12
+ allowCreateCalculatedColumn?: boolean;
13
+ selectedTab?: TabName;
14
+ vuuTable?: VuuTable;
15
+ }
16
+ export declare const TabbedTableConfigPanel: ({ allowCreateCalculatedColumn, className, columnModel, config, onDisplayAttributeChange, selectedTab, vuuTable, ...htmlAttributes }: TabbedTableConfigPanelProps) => import("react/jsx-runtime").JSX.Element;
17
+ export {};
@@ -0,0 +1,7 @@
1
+ import { IconButtonProps } from "@vuu-ui/vuu-ui-controls";
2
+ import { TabbedTableConfigPanelHookProps } from "./useTabbedTableConfigPanel";
3
+ import { TableDisplayAttributeChangeHandler } from "../table-settings-panel/TableSettingsPanel";
4
+ export interface TabbedTableSettingsActionProps extends Partial<IconButtonProps>, TabbedTableConfigPanelHookProps {
5
+ onDisplayAttributeChange: TableDisplayAttributeChangeHandler;
6
+ }
7
+ export declare const TabbedTableSettingsAction: ({ allowCreateCalculatedColumn, appearance, columnModel, config, icon, onDisplayAttributeChange, sentiment, vuuTable, ...IconButtonProps }: TabbedTableSettingsActionProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,13 @@
1
+ import { TableSettingsPanelProps } from "../table-settings-panel/TableSettingsPanel";
2
+ import { TableProps } from "@vuu-ui/vuu-table";
3
+ import { ColumnPickerProps } from "../column-picker/ColumnPicker";
4
+ import { VuuTable } from "@vuu-ui/vuu-protocol-types";
5
+ export interface TabbedTableConfigPanelHookProps extends Pick<ColumnPickerProps, "allowCreateCalculatedColumn" | "columnModel">, Pick<TableSettingsPanelProps, "onDisplayAttributeChange">, Pick<TableProps, "config"> {
6
+ /**
7
+ * only required for calculated columns
8
+ */
9
+ vuuTable?: VuuTable;
10
+ }
11
+ export declare const useTabbedTableConfigPanel: ({ allowCreateCalculatedColumn, columnModel, config, onDisplayAttributeChange, vuuTable, }: TabbedTableConfigPanelHookProps) => {
12
+ showTabbedTableConfigPanel: (title?: string) => void;
13
+ };
@@ -0,0 +1,9 @@
1
+ import { HTMLAttributes, ReactNode } from "react";
2
+ export interface TableFooterProps extends HTMLAttributes<HTMLDivElement> {
3
+ onInvokeAction?: (action: string) => void;
4
+ tooltrayActions?: ReactNode;
5
+ }
6
+ export declare const TableFooterTray: ({ children }: {
7
+ children: ReactNode;
8
+ }) => import("react/jsx-runtime").JSX.Element;
9
+ export declare const TableFooter: ({ children, className, onInvokeAction, tooltrayActions, ...htmlAttributes }: TableFooterProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,22 @@
1
+ import { TableDisplayAttributes, TableSettingsPermissions } from "@vuu-ui/vuu-table-types";
2
+ export declare const defaultTableSettingsPermissions: Readonly<TableSettingsPermissions>;
3
+ export declare const noTableSettingsPermissions: Readonly<TableSettingsPermissions>;
4
+ export type TableDisplayAttributeChangeHandler = (displayAttributes: TableDisplayAttributes) => void;
5
+ /**
6
+ * Describes the props for a Table Configuration Editor, for which
7
+ * an implementation is provided in vuu-table-extras
8
+ */
9
+ export interface TableSettingsPanelProps {
10
+ allowColumnLabelCase?: boolean;
11
+ allowColumnDefaultWidth?: boolean;
12
+ allowGridRowStyling?: boolean;
13
+ onDisplayAttributeChange: TableDisplayAttributeChangeHandler;
14
+ tableDisplayAttributes: TableDisplayAttributes;
15
+ permissions?: TableSettingsPermissions | boolean;
16
+ }
17
+ /**
18
+ The TableSettingsPanel assumes 'ownership' of the tableSettings.
19
+ It updates the settings in state locally and notifies caller of
20
+ every change via onChange callback
21
+ */
22
+ export declare const TableSettingsPanel: ({ onDisplayAttributeChange, tableDisplayAttributes: tableDisplayAttributesProp, permissions: permissionsProp, }: TableSettingsPanelProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,14 @@
1
+ import { TableDisplayAttributes } from "@vuu-ui/vuu-table-types";
2
+ import { CommitHandler } from "@vuu-ui/vuu-utils";
3
+ import { MouseEvent, SyntheticEvent } from "react";
4
+ import { TableSettingsPanelProps } from "./TableSettingsPanel";
5
+ export type ColumnLike = {
6
+ name: string;
7
+ };
8
+ export declare const useTableSettings: ({ onDisplayAttributeChange, tableDisplayAttributes: tableDisplayAttributesProp, }: TableSettingsPanelProps) => {
9
+ columnLabelsValue: number;
10
+ onChangeColumnLabels: (evt: SyntheticEvent) => void;
11
+ onChangeTableAttribute: (evt: MouseEvent<HTMLButtonElement>) => void;
12
+ onCommitColumnWidth: CommitHandler;
13
+ tableDisplayAttributes: TableDisplayAttributes;
14
+ };
@@ -1 +0,0 @@
1
- {"version":3,"file":"ColumnExpressionPanel.js","sources":["../../../../packages/vuu-table-extras/src/column-expression-panel/ColumnExpressionPanel.tsx"],"sourcesContent":["import { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor, ColumnSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport { getCalculatedColumnDetails } from \"@vuu-ui/vuu-utils\";\nimport {\n Dropdown,\n FormField,\n FormFieldLabel,\n Input,\n Option,\n} from \"@salt-ds/core\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport {\n ColumnExpressionInput,\n ColumnExpressionSubmitHandler,\n useColumnExpressionSuggestionProvider,\n} from \"../column-expression-input\";\nimport { useColumnExpression } from \"./useColumnExpression\";\n\nconst classBase = \"vuuColumnExpressionPanel\";\n\nexport interface ColumnExpressionPanelProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<ColumnSettingsProps, \"tableConfig\" | \"vuuTable\"> {\n column: ColumnDescriptor;\n /**\n * Callback prop, invoked on every change to calculated column definition\n * @param calculatedColumnName the full calculated column name\n */\n onChangeName?: (name: string) => void;\n onChangeServerDataType?: (name: VuuColumnDataType) => void;\n}\n\nexport const ColumnExpressionPanel = ({\n column: columnProp,\n onChangeName: onChangeNameProp,\n onChangeServerDataType: onChangeServerDataTypeProp,\n tableConfig,\n vuuTable,\n}: ColumnExpressionPanelProps) => {\n const typeRef = useRef<HTMLButtonElement>(null);\n const { column, onChangeExpression, onChangeName, onChangeServerDataType } =\n useColumnExpression({\n column: columnProp,\n onChangeName: onChangeNameProp,\n onChangeServerDataType: onChangeServerDataTypeProp,\n });\n // The initial value to pass into the Expression Input. That is a\n // CodeMirror editor and will manage its own state once initialised.\n const initialExpressionRef = useRef<string>(\n getCalculatedColumnDetails(column).expression ?? \"\",\n );\n\n const suggestionProvider = useColumnExpressionSuggestionProvider({\n columns: tableConfig.columns,\n table: vuuTable,\n });\n\n const handleSubmitExpression =\n useCallback<ColumnExpressionSubmitHandler>(() => {\n if (typeRef.current) {\n (\n typeRef.current?.querySelector(\"button\") as HTMLButtonElement\n )?.focus();\n }\n }, []);\n\n const { name, serverDataType } = getCalculatedColumnDetails(column);\n\n return (\n <div className={classBase}>\n <div className=\"vuuColumnSettingsPanel-header\">\n <span>Calculation</span>\n </div>\n\n <FormField data-field=\"column-name\">\n <FormFieldLabel>Column Name</FormFieldLabel>\n <Input className=\"vuuInput\" onChange={onChangeName} value={name} />\n </FormField>\n\n <FormField data-field=\"column-expression\">\n <FormFieldLabel>Expression</FormFieldLabel>\n <ColumnExpressionInput\n onChange={onChangeExpression}\n onSubmitExpression={handleSubmitExpression}\n source={initialExpressionRef.current}\n suggestionProvider={suggestionProvider}\n />\n </FormField>\n <FormField data-field=\"type\">\n <FormFieldLabel>Column type</FormFieldLabel>\n <Dropdown\n className={`${classBase}-type`}\n onSelectionChange={onChangeServerDataType}\n ref={typeRef}\n selected={serverDataType ? [serverDataType] : []}\n value={serverDataType}\n >\n <Option value=\"boolean\">Boolean</Option>\n <Option value=\"double\">Double</Option>\n <Option value=\"long\">Long</Option>\n <Option value=\"string\">String</Option>\n </Dropdown>\n </FormField>\n </div>\n );\n};\n"],"names":["useRef","useColumnExpression","getCalculatedColumnDetails","useColumnExpressionSuggestionProvider","useCallback","jsxs","jsx","FormField","FormFieldLabel","Input","ColumnExpressionInput","Dropdown","Option"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,SAAY,GAAA,0BAAA;AAcX,MAAM,wBAAwB,CAAC;AAAA,EACpC,MAAQ,EAAA,UAAA;AAAA,EACR,YAAc,EAAA,gBAAA;AAAA,EACd,sBAAwB,EAAA,0BAAA;AAAA,EACxB,WAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAM,MAAA,OAAA,GAAUA,aAA0B,IAAI,CAAA;AAC9C,EAAA,MAAM,EAAE,MAAQ,EAAA,kBAAA,EAAoB,YAAc,EAAA,sBAAA,KAChDC,uCAAoB,CAAA;AAAA,IAClB,MAAQ,EAAA,UAAA;AAAA,IACR,YAAc,EAAA,gBAAA;AAAA,IACd,sBAAwB,EAAA;AAAA,GACzB,CAAA;AAGH,EAAA,MAAM,oBAAuB,GAAAD,YAAA;AAAA,IAC3BE,mCAAA,CAA2B,MAAM,CAAA,CAAE,UAAc,IAAA;AAAA,GACnD;AAEA,EAAA,MAAM,qBAAqBC,2EAAsC,CAAA;AAAA,IAC/D,SAAS,WAAY,CAAA,OAAA;AAAA,IACrB,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,sBAAA,GACJC,kBAA2C,MAAM;AAC/C,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MACE,OAAQ,CAAA,OAAA,EAAS,aAAc,CAAA,QAAQ,GACtC,KAAM,EAAA;AAAA;AACX,GACF,EAAG,EAAE,CAAA;AAEP,EAAA,MAAM,EAAE,IAAA,EAAM,cAAe,EAAA,GAAIF,oCAA2B,MAAM,CAAA;AAElE,EACE,uBAAAG,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,SACd,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,SAAI,SAAU,EAAA,+BAAA,EACb,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA,EAAK,yBAAW,CACnB,EAAA,CAAA;AAAA,oBAEAD,eAAA,CAACE,cAAU,EAAA,EAAA,YAAA,EAAW,aACpB,EAAA,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAACE,uBAAe,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,qCAC1BC,UAAM,EAAA,EAAA,SAAA,EAAU,YAAW,QAAU,EAAA,YAAA,EAAc,OAAO,IAAM,EAAA;AAAA,KACnE,EAAA,CAAA;AAAA,oBAEAJ,eAAA,CAACE,cAAU,EAAA,EAAA,YAAA,EAAW,mBACpB,EAAA,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAACE,uBAAe,QAAU,EAAA,YAAA,EAAA,CAAA;AAAA,sBAC1BF,cAAA;AAAA,QAACI,2CAAA;AAAA,QAAA;AAAA,UACC,QAAU,EAAA,kBAAA;AAAA,UACV,kBAAoB,EAAA,sBAAA;AAAA,UACpB,QAAQ,oBAAqB,CAAA,OAAA;AAAA,UAC7B;AAAA;AAAA;AACF,KACF,EAAA,CAAA;AAAA,oBACAL,eAAA,CAACE,cAAU,EAAA,EAAA,YAAA,EAAW,MACpB,EAAA,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAACE,uBAAe,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,sBAC3BH,eAAA;AAAA,QAACM,aAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,UACvB,iBAAmB,EAAA,sBAAA;AAAA,UACnB,GAAK,EAAA,OAAA;AAAA,UACL,QAAU,EAAA,cAAA,GAAiB,CAAC,cAAc,IAAI,EAAC;AAAA,UAC/C,KAAO,EAAA,cAAA;AAAA,UAEP,QAAA,EAAA;AAAA,4BAACL,cAAA,CAAAM,WAAA,EAAA,EAAO,KAAM,EAAA,SAAA,EAAU,QAAO,EAAA,SAAA,EAAA,CAAA;AAAA,4BAC9BN,cAAA,CAAAM,WAAA,EAAA,EAAO,KAAM,EAAA,QAAA,EAAS,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,4BAC5BN,cAAA,CAAAM,WAAA,EAAA,EAAO,KAAM,EAAA,MAAA,EAAO,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,4BACxBN,cAAA,CAAAM,WAAA,EAAA,EAAO,KAAM,EAAA,QAAA,EAAS,QAAM,EAAA,QAAA,EAAA;AAAA;AAAA;AAAA;AAC/B,KACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"useColumnExpression.js","sources":["../../../../packages/vuu-table-extras/src/column-expression-panel/useColumnExpression.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n getCalculatedColumnDetails,\n isVuuColumnDataType,\n setCalculatedColumnExpression,\n setCalculatedColumnName,\n setCalculatedColumnType,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n FormEventHandler,\n SyntheticEvent,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { ColumnExpressionPanelProps } from \"./ColumnExpressionPanel\";\n\nexport type ColumnExpressionHookProps = Pick<\n ColumnExpressionPanelProps,\n \"column\" | \"onChangeName\" | \"onChangeServerDataType\"\n>;\n\nconst applyDefaults = (column: ColumnDescriptor) => {\n const { name, expression, serverDataType } =\n getCalculatedColumnDetails(column);\n if (serverDataType === undefined) {\n return {\n ...column,\n name: `${name}:string:${expression}`,\n };\n } else {\n return column;\n }\n};\n\nexport const useColumnExpression = ({\n column: columnProp,\n onChangeName: onChangeNameProp,\n onChangeServerDataType: onChangeServerDataTypeProp,\n}: ColumnExpressionHookProps) => {\n const [column, _setColumn] = useState<ColumnDescriptor>(\n applyDefaults(columnProp),\n );\n const columnRef = useRef<ColumnDescriptor>(columnProp);\n const setColumn = useCallback((column: ColumnDescriptor) => {\n columnRef.current = column;\n _setColumn(column);\n }, []);\n\n // We need to track column name in a ref because ColunExpressionInput\n // is not a pure React component, it hosts a CodeMirror editor. We\n // do not want to cause it to render mid-edit. Therefore it uses memo\n // and only renders on initial load. onChangeExpression must be stable.\n // const columnNameRef = useRef<string>(column.name);\n // const expressionRef = useRef(getCalculatedColumnDetails(column)[1]);\n\n const onChangeName = useCallback<FormEventHandler>(\n (evt) => {\n const { value } = evt.target as HTMLInputElement;\n const newColumn = setCalculatedColumnName(column, value);\n // columnNameRef.current = newColumn.name;\n setColumn(newColumn);\n onChangeNameProp?.(newColumn.name);\n },\n [column, onChangeNameProp, setColumn],\n );\n\n const onChangeExpression = useCallback(\n (value: string) => {\n // we do not set state when this changes as the codemirror editor\n // manages state of the expression for us until complete\n const expression = value.trim();\n // expressionRef.current = expression;\n // const [name, , type] = column.name.split(\":\");\n // columnNameRef.current = `${name}:${expression}:${type}`;\n\n const { current: column } = columnRef;\n const newColumn = setCalculatedColumnExpression(column, expression);\n setColumn(newColumn);\n\n onChangeNameProp?.(newColumn.name);\n\n // console.log(`calculatedColumnName ${columnNameRef.current}`);\n },\n [onChangeNameProp, setColumn],\n );\n\n const onChangeServerDataType = useCallback(\n (_e: SyntheticEvent, [serverDataType]: string[]) => {\n if (isVuuColumnDataType(serverDataType)) {\n const newColumn = setCalculatedColumnType(column, serverDataType);\n setColumn(newColumn);\n onChangeNameProp?.(newColumn.name);\n onChangeServerDataTypeProp?.(serverDataType);\n }\n },\n [column, onChangeNameProp, onChangeServerDataTypeProp, setColumn],\n );\n\n return {\n column,\n onChangeExpression,\n onChangeName,\n onChangeServerDataType,\n };\n};\n"],"names":["getCalculatedColumnDetails","useState","useRef","useCallback","column","setCalculatedColumnName","setCalculatedColumnExpression","isVuuColumnDataType","setCalculatedColumnType"],"mappings":";;;;;AAsBA,MAAM,aAAA,GAAgB,CAAC,MAA6B,KAAA;AAClD,EAAA,MAAM,EAAE,IAAM,EAAA,UAAA,EAAY,cAAe,EAAA,GACvCA,oCAA2B,MAAM,CAAA;AACnC,EAAA,IAAI,mBAAmB,KAAW,CAAA,EAAA;AAChC,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,IAAM,EAAA,CAAA,EAAG,IAAI,CAAA,QAAA,EAAW,UAAU,CAAA;AAAA,KACpC;AAAA,GACK,MAAA;AACL,IAAO,OAAA,MAAA;AAAA;AAEX,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,MAAQ,EAAA,UAAA;AAAA,EACR,YAAc,EAAA,gBAAA;AAAA,EACd,sBAAwB,EAAA;AAC1B,CAAiC,KAAA;AAC/B,EAAM,MAAA,CAAC,MAAQ,EAAA,UAAU,CAAI,GAAAC,cAAA;AAAA,IAC3B,cAAc,UAAU;AAAA,GAC1B;AACA,EAAM,MAAA,SAAA,GAAYC,aAAyB,UAAU,CAAA;AACrD,EAAM,MAAA,SAAA,GAAYC,iBAAY,CAAA,CAACC,OAA6B,KAAA;AAC1D,IAAA,SAAA,CAAU,OAAUA,GAAAA,OAAAA;AACpB,IAAA,UAAA,CAAWA,OAAM,CAAA;AAAA,GACnB,EAAG,EAAE,CAAA;AASL,EAAA,MAAM,YAAe,GAAAD,iBAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAM,MAAA,SAAA,GAAYE,gCAAwB,CAAA,MAAA,EAAQ,KAAK,CAAA;AAEvD,MAAA,SAAA,CAAU,SAAS,CAAA;AACnB,MAAA,gBAAA,GAAmB,UAAU,IAAI,CAAA;AAAA,KACnC;AAAA,IACA,CAAC,MAAQ,EAAA,gBAAA,EAAkB,SAAS;AAAA,GACtC;AAEA,EAAA,MAAM,kBAAqB,GAAAF,iBAAA;AAAA,IACzB,CAAC,KAAkB,KAAA;AAGjB,MAAM,MAAA,UAAA,GAAa,MAAM,IAAK,EAAA;AAK9B,MAAM,MAAA,EAAE,OAASC,EAAAA,OAAAA,EAAW,GAAA,SAAA;AAC5B,MAAM,MAAA,SAAA,GAAYE,sCAA8BF,CAAAA,OAAAA,EAAQ,UAAU,CAAA;AAClE,MAAA,SAAA,CAAU,SAAS,CAAA;AAEnB,MAAA,gBAAA,GAAmB,UAAU,IAAI,CAAA;AAAA,KAGnC;AAAA,IACA,CAAC,kBAAkB,SAAS;AAAA,GAC9B;AAEA,EAAA,MAAM,sBAAyB,GAAAD,iBAAA;AAAA,IAC7B,CAAC,EAAA,EAAoB,CAAC,cAAc,CAAgB,KAAA;AAClD,MAAI,IAAAI,4BAAA,CAAoB,cAAc,CAAG,EAAA;AACvC,QAAM,MAAA,SAAA,GAAYC,gCAAwB,CAAA,MAAA,EAAQ,cAAc,CAAA;AAChE,QAAA,SAAA,CAAU,SAAS,CAAA;AACnB,QAAA,gBAAA,GAAmB,UAAU,IAAI,CAAA;AACjC,QAAA,0BAAA,GAA6B,cAAc,CAAA;AAAA;AAC7C,KACF;AAAA,IACA,CAAC,MAAA,EAAQ,gBAAkB,EAAA,0BAAA,EAA4B,SAAS;AAAA,GAClE;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var cssColumnList = ".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 padding: 0 var(--salt-spacing-100);\n\n .saltListBox {\n background-color: inherit;\n }\n\n .saltOption {\n align-items: center;\n background-color: inherit;\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n gap: var(--salt-spacing-200);\n height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n .vuuIcon {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n }\n\n .vuuHighlight {\n color: var(--vuu-color-blue-40);\n text-decoration: underline;\n }\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.vuuColumnList-withColumnNavgation {\n .vuuColumnList-text:hover {\n font-weight: 600;\n text-decoration: underline;\n }\n}\n\n.vuuColumnList-search {\n --saltInput-paddingLeft: var(--salt-spacing-300);\n padding: var(--salt-spacing-200) var(--salt-spacing-300) var(--salt-spacing-300) var(--salt-spacing-300);\n}\n\n.vuuColumnList-header {\n align-items: center;\n border-top: solid 2px var(--vuu-color-gray-30);\n display: flex;\n font-size: 14px;\n font-weight: 600;\n flex: 0 0 var(--vuuColumnList-headerHeight, 32px);\n padding-left: var(--salt-spacing-400);\n\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";
4
-
5
- module.exports = cssColumnList;
6
- //# sourceMappingURL=ColumnList.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ColumnList.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}