@vuu-ui/vuu-table 0.13.39 → 0.13.41

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.
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var tableCellCss = ".vuuTableCell {\n border-right-color: var(--cell-borderColor);\n border-right-style: solid;\n border-right-width: 1px;\n /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n display: inline-block;\n white-space: nowrap;\n height: 100%;\n overflow: hidden;\n padding: var(--vuuTableCell-padding, 0 11px 0 12px);\n text-overflow: ellipsis;\n vertical-align: top;\n}\n\n.vuuTableCell-right {\n text-align: right;\n}\n\n.vuuTableCell-editable {\n align-items: center;\n display: inline-flex;\n text-overflow: unset;\n}\n\n.vuuTableCell:focus {\n outline: var(\n --vuuTableCell-outline,\n solid var(--salt-focused-outlineColor) 2px\n );\n outline-offset: -2px;\n /** This is to achieve a white background to outline dashes */\n box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n border-bottom: none;\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n outline: var(\n --vuuTableCell-outline,\n solid var(--salt-focused-outlineColor) 2px\n );\n\n &:has(.vuuCheckboxRowSelector) {\n outline: none;\n }\n}\n.vuuTableCell-editable:focus {\n outline: none;\n}\n";
3
+ var tableCellCss = ".vuuTableCell {\n border-right-color: var(--cell-borderColor);\n border-right-style: solid;\n border-right-width: 1px;\n /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n display: inline-block;\n white-space: nowrap;\n height: 100%;\n outline-offset: -2px;\n overflow: hidden;\n padding: var(--vuuTableCell-padding, 0 11px 0 12px);\n text-overflow: ellipsis;\n vertical-align: top;\n}\n\n.vuuTableCell-right {\n text-align: right;\n}\n\n.vuuTableCell-editable {\n align-items: center;\n display: inline-flex;\n text-overflow: unset;\n}\n\n.vuuTableCell:focus {\n outline: var(\n --vuuTableCell-outline,\n solid var(--salt-focused-outlineColor) 2px\n );\n /** This is to achieve a white background to outline dashes */\n box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n border-bottom: none;\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n outline: var(\n --vuuTableCell-outline,\n solid var(--salt-focused-outlineColor) 2px\n );\n\n &:has(.vuuCheckboxRowSelector) {\n outline: none;\n }\n}\n.vuuTableCell-editable:focus {\n outline: none;\n}\n\n.vuuTableCell.ContextOpen {\n outline: var(\n --vuuTableCell-outline,\n solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n );\n}\n";
4
4
 
5
5
  module.exports = tableCellCss;
6
6
  //# sourceMappingURL=TableCell.css.js.map
@@ -7,7 +7,7 @@ var tableDomUtils = require('./table-dom-utils.js');
7
7
 
8
8
  const NO_ROWS = [];
9
9
  const isTableLocation = (location) => ["grid", "header", "filter"].includes(location);
10
- const getDataSourceRpw = (rows, rowIndex) => {
10
+ const getDataSourceRow = (rows, rowIndex) => {
11
11
  const row = rows.find(([idx]) => idx === rowIndex);
12
12
  if (row) {
13
13
  return row;
@@ -36,7 +36,7 @@ const useTableContextMenu = ({
36
36
  const columnMap = vuuUtils.buildColumnMap(columns);
37
37
  const rowIndex = tableDomUtils.getAriaRowIndex(rowEl) - headerCount - 1;
38
38
  const cellIndex = tableDomUtils.getAriaColIndex(cellEl) - 1;
39
- const row = getDataSourceRpw(data, rowIndex);
39
+ const row = getDataSourceRow(data, rowIndex);
40
40
  const column = columns[cellIndex];
41
41
  const menuOptions = {
42
42
  columnMap,
@@ -46,7 +46,15 @@ const useTableContextMenu = ({
46
46
  selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),
47
47
  viewport: dataSource.viewport
48
48
  };
49
- showContextMenu(evt, "grid", menuOptions);
49
+ const menuShowing = showContextMenu(evt, "grid", menuOptions, {
50
+ onOpenChange: (isOpen) => {
51
+ console.log(`[useTableContextMenu] onOpenChange ${isOpen}`);
52
+ cellEl.classList.remove("ContextOpen");
53
+ }
54
+ });
55
+ if (menuShowing) {
56
+ cellEl.classList.add("ContextOpen");
57
+ }
50
58
  }
51
59
  },
52
60
  [columns, data, dataSource, getSelectedRows, headerCount, showContextMenu]
@@ -1 +1 @@
1
- {"version":3,"file":"useTableContextMenu.js","sources":["../../../packages/vuu-table/src/useTableContextMenu.ts"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\nimport { DataSource, DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { buildColumnMap, ColumnMap } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, useCallback } from \"react\";\nimport { getAriaColIndex, getAriaRowIndex } from \"./table-dom-utils\";\n\nexport interface TableContextMenuHookProps {\n allowContextMenu?: boolean;\n // columns: RuntimeColumnDescriptor[];\n columns: ColumnDescriptor[];\n data: DataSourceRow[];\n dataSource: DataSource;\n getSelectedRows: () => DataSourceRow[];\n // TODO can we eliminate this it is only needed to convert aria row index to actual row index\n headerCount?: number;\n}\n\nconst NO_ROWS: DataSourceRow[] = [] as const;\n\nexport type TableMenuLocation = \"grid\" | \"header\" | \"filter\";\n\nexport interface TableContextMenuOptions {\n columnMap: ColumnMap;\n column: ColumnDescriptor;\n columns?: ColumnDescriptor[];\n row: DataSourceRow;\n selectedRows: DataSourceRow[];\n viewport?: string;\n}\n\nexport const isTableLocation = (\n location: string,\n): location is TableMenuLocation =>\n [\"grid\", \"header\", \"filter\"].includes(location);\n\nconst getDataSourceRpw = (rows: DataSourceRow[], rowIndex: number) => {\n const row = rows.find(([idx]) => idx === rowIndex);\n if (row) {\n return row;\n } else {\n throw Error(\n `useTableContextMenu data row not found for rowIndex ${rowIndex}`,\n );\n }\n};\n\nexport const useTableContextMenu = ({\n allowContextMenu = true,\n columns,\n data,\n dataSource,\n getSelectedRows,\n headerCount = 1,\n}: TableContextMenuHookProps) => {\n const showContextMenu = useContextMenu();\n\n const onContextMenu = useCallback(\n (evt: MouseEvent<HTMLElement>) => {\n const target = evt.target as HTMLElement;\n const cellEl = target?.closest<HTMLElement>(\"div[role='cell']\");\n const rowEl = target?.closest<HTMLElement>(\"div[role='row']\");\n if (cellEl && rowEl) {\n const { selectedRowsCount } = dataSource;\n const columnMap = buildColumnMap(columns);\n const rowIndex = getAriaRowIndex(rowEl) - headerCount - 1;\n const cellIndex = getAriaColIndex(cellEl) - 1;\n const row = getDataSourceRpw(data, rowIndex);\n const column = columns[cellIndex];\n // TODO does it really make sense to collect selected rows ?\n // We only have access to rows in local cache\n const menuOptions: TableContextMenuOptions = {\n columnMap,\n column,\n columns,\n row,\n selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),\n viewport: dataSource.viewport,\n };\n showContextMenu(evt, \"grid\", menuOptions);\n }\n },\n [columns, data, dataSource, getSelectedRows, headerCount, showContextMenu],\n );\n\n return allowContextMenu ? onContextMenu : undefined;\n};\n"],"names":["useContextMenu","useCallback","buildColumnMap","getAriaRowIndex","getAriaColIndex"],"mappings":";;;;;;;AAkBA,MAAM,UAA2B,EAAC;AAarB,MAAA,eAAA,GAAkB,CAC7B,QAEA,KAAA,CAAC,QAAQ,QAAU,EAAA,QAAQ,CAAE,CAAA,QAAA,CAAS,QAAQ;AAEhD,MAAM,gBAAA,GAAmB,CAAC,IAAA,EAAuB,QAAqB,KAAA;AACpE,EAAM,MAAA,GAAA,GAAM,KAAK,IAAK,CAAA,CAAC,CAAC,GAAG,CAAA,KAAM,QAAQ,QAAQ,CAAA;AACjD,EAAA,IAAI,GAAK,EAAA;AACP,IAAO,OAAA,GAAA;AAAA,GACF,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,uDAAuD,QAAQ,CAAA;AAAA,KACjE;AAAA;AAEJ,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,gBAAmB,GAAA,IAAA;AAAA,EACnB,OAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAc,GAAA;AAChB,CAAiC,KAAA;AAC/B,EAAA,MAAM,kBAAkBA,6BAAe,EAAA;AAEvC,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,GAAiC,KAAA;AAChC,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA;AACnB,MAAM,MAAA,MAAA,GAAS,MAAQ,EAAA,OAAA,CAAqB,kBAAkB,CAAA;AAC9D,MAAM,MAAA,KAAA,GAAQ,MAAQ,EAAA,OAAA,CAAqB,iBAAiB,CAAA;AAC5D,MAAA,IAAI,UAAU,KAAO,EAAA;AACnB,QAAM,MAAA,EAAE,mBAAsB,GAAA,UAAA;AAC9B,QAAM,MAAA,SAAA,GAAYC,wBAAe,OAAO,CAAA;AACxC,QAAA,MAAM,QAAW,GAAAC,6BAAA,CAAgB,KAAK,CAAA,GAAI,WAAc,GAAA,CAAA;AACxD,QAAM,MAAA,SAAA,GAAYC,6BAAgB,CAAA,MAAM,CAAI,GAAA,CAAA;AAC5C,QAAM,MAAA,GAAA,GAAM,gBAAiB,CAAA,IAAA,EAAM,QAAQ,CAAA;AAC3C,QAAM,MAAA,MAAA,GAAS,QAAQ,SAAS,CAAA;AAGhC,QAAA,MAAM,WAAuC,GAAA;AAAA,UAC3C,SAAA;AAAA,UACA,MAAA;AAAA,UACA,OAAA;AAAA,UACA,GAAA;AAAA,UACA,YAAc,EAAA,iBAAA,KAAsB,CAAI,GAAA,OAAA,GAAU,eAAgB,EAAA;AAAA,UAClE,UAAU,UAAW,CAAA;AAAA,SACvB;AACA,QAAgB,eAAA,CAAA,GAAA,EAAK,QAAQ,WAAW,CAAA;AAAA;AAC1C,KACF;AAAA,IACA,CAAC,OAAS,EAAA,IAAA,EAAM,UAAY,EAAA,eAAA,EAAiB,aAAa,eAAe;AAAA,GAC3E;AAEA,EAAA,OAAO,mBAAmB,aAAgB,GAAA,KAAA,CAAA;AAC5C;;;;;"}
1
+ {"version":3,"file":"useTableContextMenu.js","sources":["../../../packages/vuu-table/src/useTableContextMenu.ts"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\nimport { DataSource, DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n ColumnDescriptor,\n TableContextMenuOptions,\n TableMenuLocation,\n} from \"@vuu-ui/vuu-table-types\";\nimport { buildColumnMap } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, useCallback } from \"react\";\nimport { getAriaColIndex, getAriaRowIndex } from \"./table-dom-utils\";\n\nexport interface TableContextMenuHookProps {\n allowContextMenu?: boolean;\n // columns: RuntimeColumnDescriptor[];\n columns: ColumnDescriptor[];\n data: DataSourceRow[];\n dataSource: DataSource;\n getSelectedRows: () => DataSourceRow[];\n // TODO can we eliminate this it is only needed to convert aria row index to actual row index\n headerCount?: number;\n}\n\nconst NO_ROWS: DataSourceRow[] = [] as const;\n\nexport const isTableLocation = (\n location: string,\n): location is TableMenuLocation =>\n [\"grid\", \"header\", \"filter\"].includes(location);\n\nconst getDataSourceRow = (rows: DataSourceRow[], rowIndex: number) => {\n const row = rows.find(([idx]) => idx === rowIndex);\n if (row) {\n return row;\n } else {\n throw Error(\n `useTableContextMenu data row not found for rowIndex ${rowIndex}`,\n );\n }\n};\n\nexport const useTableContextMenu = ({\n allowContextMenu = true,\n columns,\n data,\n dataSource,\n getSelectedRows,\n headerCount = 1,\n}: TableContextMenuHookProps) => {\n const showContextMenu = useContextMenu();\n\n const onContextMenu = useCallback(\n (evt: MouseEvent<HTMLElement>) => {\n const target = evt.target as HTMLElement;\n const cellEl = target?.closest<HTMLElement>(\"div[role='cell']\");\n const rowEl = target?.closest<HTMLElement>(\"div[role='row']\");\n if (cellEl && rowEl) {\n const { selectedRowsCount } = dataSource;\n const columnMap = buildColumnMap(columns);\n const rowIndex = getAriaRowIndex(rowEl) - headerCount - 1;\n const cellIndex = getAriaColIndex(cellEl) - 1;\n const row = getDataSourceRow(data, rowIndex);\n const column = columns[cellIndex];\n\n // TODO does it really make sense to collect selected rows ?\n // We only have access to rows in local cache\n const menuOptions: TableContextMenuOptions = {\n columnMap,\n column,\n columns,\n row,\n selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),\n viewport: dataSource.viewport,\n };\n\n const menuShowing = showContextMenu(evt, \"grid\", menuOptions, {\n onOpenChange: (isOpen: boolean) => {\n console.log(`[useTableContextMenu] onOpenChange ${isOpen}`);\n cellEl.classList.remove(\"ContextOpen\");\n },\n });\n if (menuShowing) {\n cellEl.classList.add(\"ContextOpen\");\n }\n }\n },\n [columns, data, dataSource, getSelectedRows, headerCount, showContextMenu],\n );\n\n return allowContextMenu ? onContextMenu : undefined;\n};\n"],"names":["useContextMenu","useCallback","buildColumnMap","getAriaRowIndex","getAriaColIndex"],"mappings":";;;;;;;AAsBA,MAAM,UAA2B,EAAC;AAErB,MAAA,eAAA,GAAkB,CAC7B,QAEA,KAAA,CAAC,QAAQ,QAAU,EAAA,QAAQ,CAAE,CAAA,QAAA,CAAS,QAAQ;AAEhD,MAAM,gBAAA,GAAmB,CAAC,IAAA,EAAuB,QAAqB,KAAA;AACpE,EAAM,MAAA,GAAA,GAAM,KAAK,IAAK,CAAA,CAAC,CAAC,GAAG,CAAA,KAAM,QAAQ,QAAQ,CAAA;AACjD,EAAA,IAAI,GAAK,EAAA;AACP,IAAO,OAAA,GAAA;AAAA,GACF,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,uDAAuD,QAAQ,CAAA;AAAA,KACjE;AAAA;AAEJ,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,gBAAmB,GAAA,IAAA;AAAA,EACnB,OAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAc,GAAA;AAChB,CAAiC,KAAA;AAC/B,EAAA,MAAM,kBAAkBA,6BAAe,EAAA;AAEvC,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,GAAiC,KAAA;AAChC,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA;AACnB,MAAM,MAAA,MAAA,GAAS,MAAQ,EAAA,OAAA,CAAqB,kBAAkB,CAAA;AAC9D,MAAM,MAAA,KAAA,GAAQ,MAAQ,EAAA,OAAA,CAAqB,iBAAiB,CAAA;AAC5D,MAAA,IAAI,UAAU,KAAO,EAAA;AACnB,QAAM,MAAA,EAAE,mBAAsB,GAAA,UAAA;AAC9B,QAAM,MAAA,SAAA,GAAYC,wBAAe,OAAO,CAAA;AACxC,QAAA,MAAM,QAAW,GAAAC,6BAAA,CAAgB,KAAK,CAAA,GAAI,WAAc,GAAA,CAAA;AACxD,QAAM,MAAA,SAAA,GAAYC,6BAAgB,CAAA,MAAM,CAAI,GAAA,CAAA;AAC5C,QAAM,MAAA,GAAA,GAAM,gBAAiB,CAAA,IAAA,EAAM,QAAQ,CAAA;AAC3C,QAAM,MAAA,MAAA,GAAS,QAAQ,SAAS,CAAA;AAIhC,QAAA,MAAM,WAAuC,GAAA;AAAA,UAC3C,SAAA;AAAA,UACA,MAAA;AAAA,UACA,OAAA;AAAA,UACA,GAAA;AAAA,UACA,YAAc,EAAA,iBAAA,KAAsB,CAAI,GAAA,OAAA,GAAU,eAAgB,EAAA;AAAA,UAClE,UAAU,UAAW,CAAA;AAAA,SACvB;AAEA,QAAA,MAAM,WAAc,GAAA,eAAA,CAAgB,GAAK,EAAA,MAAA,EAAQ,WAAa,EAAA;AAAA,UAC5D,YAAA,EAAc,CAAC,MAAoB,KAAA;AACjC,YAAQ,OAAA,CAAA,GAAA,CAAI,CAAsC,mCAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AAC1D,YAAO,MAAA,CAAA,SAAA,CAAU,OAAO,aAAa,CAAA;AAAA;AACvC,SACD,CAAA;AACD,QAAA,IAAI,WAAa,EAAA;AACf,UAAO,MAAA,CAAA,SAAA,CAAU,IAAI,aAAa,CAAA;AAAA;AACpC;AACF,KACF;AAAA,IACA,CAAC,OAAS,EAAA,IAAA,EAAM,UAAY,EAAA,eAAA,EAAiB,aAAa,eAAe;AAAA,GAC3E;AAEA,EAAA,OAAO,mBAAmB,aAAgB,GAAA,KAAA,CAAA;AAC5C;;;;;"}
@@ -1,4 +1,4 @@
1
- var tableCellCss = ".vuuTableCell {\n border-right-color: var(--cell-borderColor);\n border-right-style: solid;\n border-right-width: 1px;\n /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n display: inline-block;\n white-space: nowrap;\n height: 100%;\n overflow: hidden;\n padding: var(--vuuTableCell-padding, 0 11px 0 12px);\n text-overflow: ellipsis;\n vertical-align: top;\n}\n\n.vuuTableCell-right {\n text-align: right;\n}\n\n.vuuTableCell-editable {\n align-items: center;\n display: inline-flex;\n text-overflow: unset;\n}\n\n.vuuTableCell:focus {\n outline: var(\n --vuuTableCell-outline,\n solid var(--salt-focused-outlineColor) 2px\n );\n outline-offset: -2px;\n /** This is to achieve a white background to outline dashes */\n box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n border-bottom: none;\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n outline: var(\n --vuuTableCell-outline,\n solid var(--salt-focused-outlineColor) 2px\n );\n\n &:has(.vuuCheckboxRowSelector) {\n outline: none;\n }\n}\n.vuuTableCell-editable:focus {\n outline: none;\n}\n";
1
+ var tableCellCss = ".vuuTableCell {\n border-right-color: var(--cell-borderColor);\n border-right-style: solid;\n border-right-width: 1px;\n /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n display: inline-block;\n white-space: nowrap;\n height: 100%;\n outline-offset: -2px;\n overflow: hidden;\n padding: var(--vuuTableCell-padding, 0 11px 0 12px);\n text-overflow: ellipsis;\n vertical-align: top;\n}\n\n.vuuTableCell-right {\n text-align: right;\n}\n\n.vuuTableCell-editable {\n align-items: center;\n display: inline-flex;\n text-overflow: unset;\n}\n\n.vuuTableCell:focus {\n outline: var(\n --vuuTableCell-outline,\n solid var(--salt-focused-outlineColor) 2px\n );\n /** This is to achieve a white background to outline dashes */\n box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n border-bottom: none;\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n outline: var(\n --vuuTableCell-outline,\n solid var(--salt-focused-outlineColor) 2px\n );\n\n &:has(.vuuCheckboxRowSelector) {\n outline: none;\n }\n}\n.vuuTableCell-editable:focus {\n outline: none;\n}\n\n.vuuTableCell.ContextOpen {\n outline: var(\n --vuuTableCell-outline,\n solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n );\n}\n";
2
2
 
3
3
  export { tableCellCss as default };
4
4
  //# sourceMappingURL=TableCell.css.js.map
@@ -5,7 +5,7 @@ import { getAriaRowIndex, getAriaColIndex } from './table-dom-utils.js';
5
5
 
6
6
  const NO_ROWS = [];
7
7
  const isTableLocation = (location) => ["grid", "header", "filter"].includes(location);
8
- const getDataSourceRpw = (rows, rowIndex) => {
8
+ const getDataSourceRow = (rows, rowIndex) => {
9
9
  const row = rows.find(([idx]) => idx === rowIndex);
10
10
  if (row) {
11
11
  return row;
@@ -34,7 +34,7 @@ const useTableContextMenu = ({
34
34
  const columnMap = buildColumnMap(columns);
35
35
  const rowIndex = getAriaRowIndex(rowEl) - headerCount - 1;
36
36
  const cellIndex = getAriaColIndex(cellEl) - 1;
37
- const row = getDataSourceRpw(data, rowIndex);
37
+ const row = getDataSourceRow(data, rowIndex);
38
38
  const column = columns[cellIndex];
39
39
  const menuOptions = {
40
40
  columnMap,
@@ -44,7 +44,15 @@ const useTableContextMenu = ({
44
44
  selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),
45
45
  viewport: dataSource.viewport
46
46
  };
47
- showContextMenu(evt, "grid", menuOptions);
47
+ const menuShowing = showContextMenu(evt, "grid", menuOptions, {
48
+ onOpenChange: (isOpen) => {
49
+ console.log(`[useTableContextMenu] onOpenChange ${isOpen}`);
50
+ cellEl.classList.remove("ContextOpen");
51
+ }
52
+ });
53
+ if (menuShowing) {
54
+ cellEl.classList.add("ContextOpen");
55
+ }
48
56
  }
49
57
  },
50
58
  [columns, data, dataSource, getSelectedRows, headerCount, showContextMenu]
@@ -1 +1 @@
1
- {"version":3,"file":"useTableContextMenu.js","sources":["../../../packages/vuu-table/src/useTableContextMenu.ts"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\nimport { DataSource, DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { buildColumnMap, ColumnMap } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, useCallback } from \"react\";\nimport { getAriaColIndex, getAriaRowIndex } from \"./table-dom-utils\";\n\nexport interface TableContextMenuHookProps {\n allowContextMenu?: boolean;\n // columns: RuntimeColumnDescriptor[];\n columns: ColumnDescriptor[];\n data: DataSourceRow[];\n dataSource: DataSource;\n getSelectedRows: () => DataSourceRow[];\n // TODO can we eliminate this it is only needed to convert aria row index to actual row index\n headerCount?: number;\n}\n\nconst NO_ROWS: DataSourceRow[] = [] as const;\n\nexport type TableMenuLocation = \"grid\" | \"header\" | \"filter\";\n\nexport interface TableContextMenuOptions {\n columnMap: ColumnMap;\n column: ColumnDescriptor;\n columns?: ColumnDescriptor[];\n row: DataSourceRow;\n selectedRows: DataSourceRow[];\n viewport?: string;\n}\n\nexport const isTableLocation = (\n location: string,\n): location is TableMenuLocation =>\n [\"grid\", \"header\", \"filter\"].includes(location);\n\nconst getDataSourceRpw = (rows: DataSourceRow[], rowIndex: number) => {\n const row = rows.find(([idx]) => idx === rowIndex);\n if (row) {\n return row;\n } else {\n throw Error(\n `useTableContextMenu data row not found for rowIndex ${rowIndex}`,\n );\n }\n};\n\nexport const useTableContextMenu = ({\n allowContextMenu = true,\n columns,\n data,\n dataSource,\n getSelectedRows,\n headerCount = 1,\n}: TableContextMenuHookProps) => {\n const showContextMenu = useContextMenu();\n\n const onContextMenu = useCallback(\n (evt: MouseEvent<HTMLElement>) => {\n const target = evt.target as HTMLElement;\n const cellEl = target?.closest<HTMLElement>(\"div[role='cell']\");\n const rowEl = target?.closest<HTMLElement>(\"div[role='row']\");\n if (cellEl && rowEl) {\n const { selectedRowsCount } = dataSource;\n const columnMap = buildColumnMap(columns);\n const rowIndex = getAriaRowIndex(rowEl) - headerCount - 1;\n const cellIndex = getAriaColIndex(cellEl) - 1;\n const row = getDataSourceRpw(data, rowIndex);\n const column = columns[cellIndex];\n // TODO does it really make sense to collect selected rows ?\n // We only have access to rows in local cache\n const menuOptions: TableContextMenuOptions = {\n columnMap,\n column,\n columns,\n row,\n selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),\n viewport: dataSource.viewport,\n };\n showContextMenu(evt, \"grid\", menuOptions);\n }\n },\n [columns, data, dataSource, getSelectedRows, headerCount, showContextMenu],\n );\n\n return allowContextMenu ? onContextMenu : undefined;\n};\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,UAA2B,EAAC;AAarB,MAAA,eAAA,GAAkB,CAC7B,QAEA,KAAA,CAAC,QAAQ,QAAU,EAAA,QAAQ,CAAE,CAAA,QAAA,CAAS,QAAQ;AAEhD,MAAM,gBAAA,GAAmB,CAAC,IAAA,EAAuB,QAAqB,KAAA;AACpE,EAAM,MAAA,GAAA,GAAM,KAAK,IAAK,CAAA,CAAC,CAAC,GAAG,CAAA,KAAM,QAAQ,QAAQ,CAAA;AACjD,EAAA,IAAI,GAAK,EAAA;AACP,IAAO,OAAA,GAAA;AAAA,GACF,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,uDAAuD,QAAQ,CAAA;AAAA,KACjE;AAAA;AAEJ,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,gBAAmB,GAAA,IAAA;AAAA,EACnB,OAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAc,GAAA;AAChB,CAAiC,KAAA;AAC/B,EAAA,MAAM,kBAAkB,cAAe,EAAA;AAEvC,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,GAAiC,KAAA;AAChC,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA;AACnB,MAAM,MAAA,MAAA,GAAS,MAAQ,EAAA,OAAA,CAAqB,kBAAkB,CAAA;AAC9D,MAAM,MAAA,KAAA,GAAQ,MAAQ,EAAA,OAAA,CAAqB,iBAAiB,CAAA;AAC5D,MAAA,IAAI,UAAU,KAAO,EAAA;AACnB,QAAM,MAAA,EAAE,mBAAsB,GAAA,UAAA;AAC9B,QAAM,MAAA,SAAA,GAAY,eAAe,OAAO,CAAA;AACxC,QAAA,MAAM,QAAW,GAAA,eAAA,CAAgB,KAAK,CAAA,GAAI,WAAc,GAAA,CAAA;AACxD,QAAM,MAAA,SAAA,GAAY,eAAgB,CAAA,MAAM,CAAI,GAAA,CAAA;AAC5C,QAAM,MAAA,GAAA,GAAM,gBAAiB,CAAA,IAAA,EAAM,QAAQ,CAAA;AAC3C,QAAM,MAAA,MAAA,GAAS,QAAQ,SAAS,CAAA;AAGhC,QAAA,MAAM,WAAuC,GAAA;AAAA,UAC3C,SAAA;AAAA,UACA,MAAA;AAAA,UACA,OAAA;AAAA,UACA,GAAA;AAAA,UACA,YAAc,EAAA,iBAAA,KAAsB,CAAI,GAAA,OAAA,GAAU,eAAgB,EAAA;AAAA,UAClE,UAAU,UAAW,CAAA;AAAA,SACvB;AACA,QAAgB,eAAA,CAAA,GAAA,EAAK,QAAQ,WAAW,CAAA;AAAA;AAC1C,KACF;AAAA,IACA,CAAC,OAAS,EAAA,IAAA,EAAM,UAAY,EAAA,eAAA,EAAiB,aAAa,eAAe;AAAA,GAC3E;AAEA,EAAA,OAAO,mBAAmB,aAAgB,GAAA,KAAA,CAAA;AAC5C;;;;"}
1
+ {"version":3,"file":"useTableContextMenu.js","sources":["../../../packages/vuu-table/src/useTableContextMenu.ts"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-context-menu\";\nimport { DataSource, DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n ColumnDescriptor,\n TableContextMenuOptions,\n TableMenuLocation,\n} from \"@vuu-ui/vuu-table-types\";\nimport { buildColumnMap } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, useCallback } from \"react\";\nimport { getAriaColIndex, getAriaRowIndex } from \"./table-dom-utils\";\n\nexport interface TableContextMenuHookProps {\n allowContextMenu?: boolean;\n // columns: RuntimeColumnDescriptor[];\n columns: ColumnDescriptor[];\n data: DataSourceRow[];\n dataSource: DataSource;\n getSelectedRows: () => DataSourceRow[];\n // TODO can we eliminate this it is only needed to convert aria row index to actual row index\n headerCount?: number;\n}\n\nconst NO_ROWS: DataSourceRow[] = [] as const;\n\nexport const isTableLocation = (\n location: string,\n): location is TableMenuLocation =>\n [\"grid\", \"header\", \"filter\"].includes(location);\n\nconst getDataSourceRow = (rows: DataSourceRow[], rowIndex: number) => {\n const row = rows.find(([idx]) => idx === rowIndex);\n if (row) {\n return row;\n } else {\n throw Error(\n `useTableContextMenu data row not found for rowIndex ${rowIndex}`,\n );\n }\n};\n\nexport const useTableContextMenu = ({\n allowContextMenu = true,\n columns,\n data,\n dataSource,\n getSelectedRows,\n headerCount = 1,\n}: TableContextMenuHookProps) => {\n const showContextMenu = useContextMenu();\n\n const onContextMenu = useCallback(\n (evt: MouseEvent<HTMLElement>) => {\n const target = evt.target as HTMLElement;\n const cellEl = target?.closest<HTMLElement>(\"div[role='cell']\");\n const rowEl = target?.closest<HTMLElement>(\"div[role='row']\");\n if (cellEl && rowEl) {\n const { selectedRowsCount } = dataSource;\n const columnMap = buildColumnMap(columns);\n const rowIndex = getAriaRowIndex(rowEl) - headerCount - 1;\n const cellIndex = getAriaColIndex(cellEl) - 1;\n const row = getDataSourceRow(data, rowIndex);\n const column = columns[cellIndex];\n\n // TODO does it really make sense to collect selected rows ?\n // We only have access to rows in local cache\n const menuOptions: TableContextMenuOptions = {\n columnMap,\n column,\n columns,\n row,\n selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),\n viewport: dataSource.viewport,\n };\n\n const menuShowing = showContextMenu(evt, \"grid\", menuOptions, {\n onOpenChange: (isOpen: boolean) => {\n console.log(`[useTableContextMenu] onOpenChange ${isOpen}`);\n cellEl.classList.remove(\"ContextOpen\");\n },\n });\n if (menuShowing) {\n cellEl.classList.add(\"ContextOpen\");\n }\n }\n },\n [columns, data, dataSource, getSelectedRows, headerCount, showContextMenu],\n );\n\n return allowContextMenu ? onContextMenu : undefined;\n};\n"],"names":[],"mappings":";;;;;AAsBA,MAAM,UAA2B,EAAC;AAErB,MAAA,eAAA,GAAkB,CAC7B,QAEA,KAAA,CAAC,QAAQ,QAAU,EAAA,QAAQ,CAAE,CAAA,QAAA,CAAS,QAAQ;AAEhD,MAAM,gBAAA,GAAmB,CAAC,IAAA,EAAuB,QAAqB,KAAA;AACpE,EAAM,MAAA,GAAA,GAAM,KAAK,IAAK,CAAA,CAAC,CAAC,GAAG,CAAA,KAAM,QAAQ,QAAQ,CAAA;AACjD,EAAA,IAAI,GAAK,EAAA;AACP,IAAO,OAAA,GAAA;AAAA,GACF,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,uDAAuD,QAAQ,CAAA;AAAA,KACjE;AAAA;AAEJ,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,gBAAmB,GAAA,IAAA;AAAA,EACnB,OAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAc,GAAA;AAChB,CAAiC,KAAA;AAC/B,EAAA,MAAM,kBAAkB,cAAe,EAAA;AAEvC,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,GAAiC,KAAA;AAChC,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA;AACnB,MAAM,MAAA,MAAA,GAAS,MAAQ,EAAA,OAAA,CAAqB,kBAAkB,CAAA;AAC9D,MAAM,MAAA,KAAA,GAAQ,MAAQ,EAAA,OAAA,CAAqB,iBAAiB,CAAA;AAC5D,MAAA,IAAI,UAAU,KAAO,EAAA;AACnB,QAAM,MAAA,EAAE,mBAAsB,GAAA,UAAA;AAC9B,QAAM,MAAA,SAAA,GAAY,eAAe,OAAO,CAAA;AACxC,QAAA,MAAM,QAAW,GAAA,eAAA,CAAgB,KAAK,CAAA,GAAI,WAAc,GAAA,CAAA;AACxD,QAAM,MAAA,SAAA,GAAY,eAAgB,CAAA,MAAM,CAAI,GAAA,CAAA;AAC5C,QAAM,MAAA,GAAA,GAAM,gBAAiB,CAAA,IAAA,EAAM,QAAQ,CAAA;AAC3C,QAAM,MAAA,MAAA,GAAS,QAAQ,SAAS,CAAA;AAIhC,QAAA,MAAM,WAAuC,GAAA;AAAA,UAC3C,SAAA;AAAA,UACA,MAAA;AAAA,UACA,OAAA;AAAA,UACA,GAAA;AAAA,UACA,YAAc,EAAA,iBAAA,KAAsB,CAAI,GAAA,OAAA,GAAU,eAAgB,EAAA;AAAA,UAClE,UAAU,UAAW,CAAA;AAAA,SACvB;AAEA,QAAA,MAAM,WAAc,GAAA,eAAA,CAAgB,GAAK,EAAA,MAAA,EAAQ,WAAa,EAAA;AAAA,UAC5D,YAAA,EAAc,CAAC,MAAoB,KAAA;AACjC,YAAQ,OAAA,CAAA,GAAA,CAAI,CAAsC,mCAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AAC1D,YAAO,MAAA,CAAA,SAAA,CAAU,OAAO,aAAa,CAAA;AAAA;AACvC,SACD,CAAA;AACD,QAAA,IAAI,WAAa,EAAA;AACf,UAAO,MAAA,CAAA,SAAA,CAAU,IAAI,aAAa,CAAA;AAAA;AACpC;AACF,KACF;AAAA,IACA,CAAC,OAAS,EAAA,IAAA,EAAM,UAAY,EAAA,eAAA,EAAiB,aAAa,eAAe;AAAA,GAC3E;AAEA,EAAA,OAAO,mBAAmB,aAAgB,GAAA,KAAA,CAAA;AAC5C;;;;"}
package/package.json CHANGED
@@ -1,22 +1,22 @@
1
1
  {
2
- "version": "0.13.39",
2
+ "version": "0.13.41",
3
3
  "author": "heswell",
4
4
  "license": "Apache-2.0",
5
5
  "devDependencies": {
6
- "@vuu-ui/vuu-data-types": "0.13.39",
7
- "@vuu-ui/vuu-table-types": "0.13.39",
8
- "@vuu-ui/vuu-protocol-types": "0.13.39"
6
+ "@vuu-ui/vuu-data-types": "0.13.41",
7
+ "@vuu-ui/vuu-table-types": "0.13.41",
8
+ "@vuu-ui/vuu-protocol-types": "0.13.41"
9
9
  },
10
10
  "dependencies": {
11
- "@salt-ds/core": "1.43.0",
11
+ "@salt-ds/core": "1.48.0",
12
12
  "@salt-ds/styles": "0.2.1",
13
13
  "@salt-ds/window": "0.1.1",
14
- "@vuu-ui/vuu-context-menu": "0.13.39",
15
- "@vuu-ui/vuu-data-react": "0.13.39",
16
- "@vuu-ui/vuu-popups": "0.13.39",
17
- "@vuu-ui/vuu-table-extras": "0.13.39",
18
- "@vuu-ui/vuu-ui-controls": "0.13.39",
19
- "@vuu-ui/vuu-utils": "0.13.39"
14
+ "@vuu-ui/vuu-context-menu": "0.13.41",
15
+ "@vuu-ui/vuu-data-react": "0.13.41",
16
+ "@vuu-ui/vuu-popups": "0.13.41",
17
+ "@vuu-ui/vuu-table-extras": "0.13.41",
18
+ "@vuu-ui/vuu-ui-controls": "0.13.41",
19
+ "@vuu-ui/vuu-utils": "0.13.41"
20
20
  },
21
21
  "peerDependencies": {
22
22
  "clsx": "^2.0.0",
@@ -1,6 +1,5 @@
1
1
  import { DataSource, DataSourceRow } from "@vuu-ui/vuu-data-types";
2
- import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
3
- import { ColumnMap } from "@vuu-ui/vuu-utils";
2
+ import { ColumnDescriptor, TableMenuLocation } from "@vuu-ui/vuu-table-types";
4
3
  import { MouseEvent } from "react";
5
4
  export interface TableContextMenuHookProps {
6
5
  allowContextMenu?: boolean;
@@ -10,14 +9,5 @@ export interface TableContextMenuHookProps {
10
9
  getSelectedRows: () => DataSourceRow[];
11
10
  headerCount?: number;
12
11
  }
13
- export type TableMenuLocation = "grid" | "header" | "filter";
14
- export interface TableContextMenuOptions {
15
- columnMap: ColumnMap;
16
- column: ColumnDescriptor;
17
- columns?: ColumnDescriptor[];
18
- row: DataSourceRow;
19
- selectedRows: DataSourceRow[];
20
- viewport?: string;
21
- }
22
12
  export declare const isTableLocation: (location: string) => location is TableMenuLocation;
23
13
  export declare const useTableContextMenu: ({ allowContextMenu, columns, data, dataSource, getSelectedRows, headerCount, }: TableContextMenuHookProps) => ((evt: MouseEvent<HTMLElement>) => void) | undefined;