@vuu-ui/vuu-table 2.1.18 → 2.1.19-beta.2
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.
- package/package.json +13 -16
- package/src/CellFocusState.mjs +25 -0
- package/src/Row.mjs +83 -0
- package/src/Table.css.js +441 -0
- package/src/Table.mjs +297 -0
- package/src/VirtualColSpan.mjs +12 -0
- package/src/applyHighlighting.mjs +28 -0
- package/src/bulk-edit/BulkEditPanel.css.js +27 -0
- package/src/bulk-edit/BulkEditPanel.mjs +77 -0
- package/src/bulk-edit/ColumnCascadingUpdateEditor.css.js +86 -0
- package/src/bulk-edit/ColumnCascadingUpdateEditor.mjs +59 -0
- package/src/bulk-edit/InsertNewRowEditor.css.js +86 -0
- package/src/bulk-edit/InsertNewRowEditor.mjs +59 -0
- package/src/bulk-edit/useBulkEditPanel.mjs +61 -0
- package/src/bulk-edit/useColumnCascadingEditor.mjs +124 -0
- package/src/cell-block/CellBlock.css.js +95 -0
- package/src/cell-block/CellBlock.mjs +32 -0
- package/src/cell-block/cellblock-utils.mjs +114 -0
- package/src/cell-block/useCellBlockSelection.mjs +245 -0
- package/src/cell-renderers/checkbox-cell/CheckboxCell.css.js +16 -0
- package/src/cell-renderers/checkbox-cell/CheckboxCell.mjs +56 -0
- package/src/cell-renderers/checkbox-cell/index.mjs +1 -0
- package/src/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +19 -0
- package/src/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.mjs +34 -0
- package/src/cell-renderers/checkbox-row-selector/index.mjs +1 -0
- package/src/cell-renderers/index.mjs +4 -0
- package/src/cell-renderers/input-cell/InputCell.css.js +81 -0
- package/src/cell-renderers/input-cell/InputCell.mjs +73 -0
- package/src/cell-renderers/input-cell/index.mjs +1 -0
- package/src/cell-renderers/input-cell/useInputCell.mjs +199 -0
- package/src/cell-renderers/toggle-cell/ToggleCell.css.js +31 -0
- package/src/cell-renderers/toggle-cell/ToggleCell.mjs +47 -0
- package/src/cell-renderers/toggle-cell/index.mjs +1 -0
- package/src/column-header-pill/ColumnHeaderPill.css.js +34 -0
- package/src/column-header-pill/ColumnHeaderPill.mjs +39 -0
- package/src/column-header-pill/GroupColumnPill.css.js +10 -0
- package/src/column-header-pill/GroupColumnPill.mjs +33 -0
- package/src/column-header-pill/SortIndicator.css.js +15 -0
- package/src/column-header-pill/SortIndicator.mjs +29 -0
- package/src/column-header-pill/index.mjs +3 -0
- package/src/column-resizing/ColumnResizer.css.js +32 -0
- package/src/column-resizing/ColumnResizer.mjs +69 -0
- package/src/column-resizing/index.mjs +2 -0
- package/src/column-resizing/useTableColumnResize.mjs +57 -0
- package/src/data-row/DataRow.mjs +298 -0
- package/src/header-cell/GroupHeaderCell.css.js +91 -0
- package/src/header-cell/GroupHeaderCell.mjs +98 -0
- package/src/header-cell/HeaderCell.css.js +182 -0
- package/src/header-cell/HeaderCell.mjs +126 -0
- package/src/header-cell/index.mjs +2 -0
- package/src/index.mjs +20 -0
- package/src/pagination/PaginationControl.css.js +18 -0
- package/src/pagination/PaginationControl.mjs +34 -0
- package/src/pagination/index.mjs +1 -0
- package/src/pagination/usePagination.mjs +29 -0
- package/src/table-cell/TableCell.css.js +67 -0
- package/src/table-cell/TableCell.mjs +54 -0
- package/src/table-cell/TableGroupCell.css.js +91 -0
- package/src/table-cell/TableGroupCell.mjs +61 -0
- package/src/table-cell/index.mjs +2 -0
- package/src/table-config/useTableConfig.mjs +49 -0
- package/src/table-config.mjs +38 -0
- package/src/table-data-source/DataRowMovingWindow.mjs +66 -0
- package/src/table-data-source/useDataSource.mjs +177 -0
- package/src/table-dom-utils.mjs +162 -0
- package/src/table-header/HeaderProvider.mjs +14 -0
- package/src/table-header/TableHeader.mjs +182 -0
- package/src/table-header/index.mjs +2 -0
- package/src/table-header/useTableHeader.mjs +69 -0
- package/src/useCell.mjs +22 -0
- package/src/useCellEditing.mjs +58 -0
- package/src/useCellFocus.mjs +112 -0
- package/src/useControlledTableNavigation.mjs +34 -0
- package/src/useEditableCell.mjs +18 -0
- package/src/useInitialValue.mjs +6 -0
- package/src/useKeyboardNavigation.mjs +275 -0
- package/src/useMeasuredHeight.mjs +44 -0
- package/src/useResizeObserver.mjs +118 -0
- package/src/useRowClassNameGenerators.mjs +21 -0
- package/src/useSelection.mjs +101 -0
- package/src/useTable.mjs +588 -0
- package/src/useTableContextMenu.mjs +54 -0
- package/src/useTableModel.mjs +344 -0
- package/src/useTableScroll.mjs +382 -0
- package/src/useTableViewport.mjs +120 -0
- package/types/VirtualColSpan.d.ts +2 -2
- package/types/cell-renderers/toggle-cell/ToggleCell.d.ts +1 -1
- package/types/useTable.d.ts +3 -3
- package/cjs/CellFocusState.js +0 -45
- package/cjs/CellFocusState.js.map +0 -1
- package/cjs/Row.js +0 -116
- package/cjs/Row.js.map +0 -1
- package/cjs/Table.css.js +0 -6
- package/cjs/Table.css.js.map +0 -1
- package/cjs/Table.js +0 -455
- package/cjs/Table.js.map +0 -1
- package/cjs/VirtualColSpan.js +0 -19
- package/cjs/VirtualColSpan.js.map +0 -1
- package/cjs/applyHighlighting.js +0 -33
- package/cjs/applyHighlighting.js.map +0 -1
- package/cjs/bulk-edit/BulkEditPanel.css.js +0 -6
- package/cjs/bulk-edit/BulkEditPanel.css.js.map +0 -1
- package/cjs/bulk-edit/BulkEditPanel.js +0 -107
- package/cjs/bulk-edit/BulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.css.js +0 -6
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.css.js.map +0 -1
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.js +0 -80
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.js.map +0 -1
- package/cjs/bulk-edit/InsertNewRowEditor.css.js +0 -6
- package/cjs/bulk-edit/InsertNewRowEditor.css.js.map +0 -1
- package/cjs/bulk-edit/InsertNewRowEditor.js +0 -80
- package/cjs/bulk-edit/InsertNewRowEditor.js.map +0 -1
- package/cjs/bulk-edit/useBulkEditPanel.js +0 -70
- package/cjs/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/useColumnCascadingEditor.js +0 -143
- package/cjs/bulk-edit/useColumnCascadingEditor.js.map +0 -1
- package/cjs/cell-block/CellBlock.css.js +0 -6
- package/cjs/cell-block/CellBlock.css.js.map +0 -1
- package/cjs/cell-block/CellBlock.js +0 -45
- package/cjs/cell-block/CellBlock.js.map +0 -1
- package/cjs/cell-block/cellblock-utils.js +0 -125
- package/cjs/cell-block/cellblock-utils.js.map +0 -1
- package/cjs/cell-block/useCellBlockSelection.js +0 -257
- package/cjs/cell-block/useCellBlockSelection.js.map +0 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js +0 -6
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +0 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js +0 -67
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +0 -6
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js.map +0 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +0 -51
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +0 -1
- package/cjs/cell-renderers/input-cell/InputCell.css.js +0 -6
- package/cjs/cell-renderers/input-cell/InputCell.css.js.map +0 -1
- package/cjs/cell-renderers/input-cell/InputCell.js +0 -63
- package/cjs/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/cjs/cell-renderers/input-cell/useInputCell.js +0 -211
- package/cjs/cell-renderers/input-cell/useInputCell.js.map +0 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js +0 -6
- package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js.map +0 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js +0 -66
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
- package/cjs/column-header-pill/ColumnHeaderPill.css.js +0 -6
- package/cjs/column-header-pill/ColumnHeaderPill.css.js.map +0 -1
- package/cjs/column-header-pill/ColumnHeaderPill.js +0 -53
- package/cjs/column-header-pill/ColumnHeaderPill.js.map +0 -1
- package/cjs/column-header-pill/GroupColumnPill.css.js +0 -6
- package/cjs/column-header-pill/GroupColumnPill.css.js.map +0 -1
- package/cjs/column-header-pill/GroupColumnPill.js +0 -29
- package/cjs/column-header-pill/GroupColumnPill.js.map +0 -1
- package/cjs/column-header-pill/SortIndicator.css.js +0 -6
- package/cjs/column-header-pill/SortIndicator.css.js.map +0 -1
- package/cjs/column-header-pill/SortIndicator.js +0 -27
- package/cjs/column-header-pill/SortIndicator.js.map +0 -1
- package/cjs/column-resizing/ColumnResizer.css.js +0 -6
- package/cjs/column-resizing/ColumnResizer.css.js.map +0 -1
- package/cjs/column-resizing/ColumnResizer.js +0 -82
- package/cjs/column-resizing/ColumnResizer.js.map +0 -1
- package/cjs/column-resizing/useTableColumnResize.js +0 -55
- package/cjs/column-resizing/useTableColumnResize.js.map +0 -1
- package/cjs/data-row/DataRow.js +0 -262
- package/cjs/data-row/DataRow.js.map +0 -1
- package/cjs/header-cell/GroupHeaderCell.css.js +0 -6
- package/cjs/header-cell/GroupHeaderCell.css.js.map +0 -1
- package/cjs/header-cell/GroupHeaderCell.js +0 -127
- package/cjs/header-cell/GroupHeaderCell.js.map +0 -1
- package/cjs/header-cell/HeaderCell.css.js +0 -6
- package/cjs/header-cell/HeaderCell.css.js.map +0 -1
- package/cjs/header-cell/HeaderCell.js +0 -139
- package/cjs/header-cell/HeaderCell.js.map +0 -1
- package/cjs/index.js +0 -64
- package/cjs/index.js.map +0 -1
- package/cjs/pagination/PaginationControl.css.js +0 -6
- package/cjs/pagination/PaginationControl.css.js.map +0 -1
- package/cjs/pagination/PaginationControl.js +0 -38
- package/cjs/pagination/PaginationControl.js.map +0 -1
- package/cjs/pagination/usePagination.js +0 -36
- package/cjs/pagination/usePagination.js.map +0 -1
- package/cjs/table-cell/TableCell.css.js +0 -6
- package/cjs/table-cell/TableCell.css.js.map +0 -1
- package/cjs/table-cell/TableCell.js +0 -75
- package/cjs/table-cell/TableCell.js.map +0 -1
- package/cjs/table-cell/TableGroupCell.css.js +0 -6
- package/cjs/table-cell/TableGroupCell.css.js.map +0 -1
- package/cjs/table-cell/TableGroupCell.js +0 -65
- package/cjs/table-cell/TableGroupCell.js.map +0 -1
- package/cjs/table-config/useTableConfig.js +0 -67
- package/cjs/table-config/useTableConfig.js.map +0 -1
- package/cjs/table-config.js +0 -35
- package/cjs/table-config.js.map +0 -1
- package/cjs/table-data-source/DataRowMovingWindow.js +0 -99
- package/cjs/table-data-source/DataRowMovingWindow.js.map +0 -1
- package/cjs/table-data-source/useDataSource.js +0 -236
- package/cjs/table-data-source/useDataSource.js.map +0 -1
- package/cjs/table-dom-utils.js +0 -206
- package/cjs/table-dom-utils.js.map +0 -1
- package/cjs/table-header/HeaderProvider.js +0 -18
- package/cjs/table-header/HeaderProvider.js.map +0 -1
- package/cjs/table-header/TableHeader.js +0 -180
- package/cjs/table-header/TableHeader.js.map +0 -1
- package/cjs/table-header/useTableHeader.js +0 -87
- package/cjs/table-header/useTableHeader.js.map +0 -1
- package/cjs/useCell.js +0 -26
- package/cjs/useCell.js.map +0 -1
- package/cjs/useCellEditing.js +0 -77
- package/cjs/useCellEditing.js.map +0 -1
- package/cjs/useCellFocus.js +0 -119
- package/cjs/useCellFocus.js.map +0 -1
- package/cjs/useControlledTableNavigation.js +0 -46
- package/cjs/useControlledTableNavigation.js.map +0 -1
- package/cjs/useEditableCell.js +0 -27
- package/cjs/useEditableCell.js.map +0 -1
- package/cjs/useKeyboardNavigation.js +0 -323
- package/cjs/useKeyboardNavigation.js.map +0 -1
- package/cjs/useMeasuredHeight.js +0 -51
- package/cjs/useMeasuredHeight.js.map +0 -1
- package/cjs/useRowClassNameGenerators.js +0 -34
- package/cjs/useRowClassNameGenerators.js.map +0 -1
- package/cjs/useSelection.js +0 -130
- package/cjs/useSelection.js.map +0 -1
- package/cjs/useTable.js +0 -742
- package/cjs/useTable.js.map +0 -1
- package/cjs/useTableContextMenu.js +0 -76
- package/cjs/useTableContextMenu.js.map +0 -1
- package/cjs/useTableModel.js +0 -421
- package/cjs/useTableModel.js.map +0 -1
- package/cjs/useTableScroll.js +0 -464
- package/cjs/useTableScroll.js.map +0 -1
- package/cjs/useTableViewport.js +0 -137
- package/cjs/useTableViewport.js.map +0 -1
- package/esm/CellFocusState.js +0 -43
- package/esm/CellFocusState.js.map +0 -1
- package/esm/Row.js +0 -114
- package/esm/Row.js.map +0 -1
- package/esm/Table.css.js +0 -4
- package/esm/Table.css.js.map +0 -1
- package/esm/Table.js +0 -453
- package/esm/Table.js.map +0 -1
- package/esm/VirtualColSpan.js +0 -17
- package/esm/VirtualColSpan.js.map +0 -1
- package/esm/applyHighlighting.js +0 -31
- package/esm/applyHighlighting.js.map +0 -1
- package/esm/bulk-edit/BulkEditPanel.css.js +0 -4
- package/esm/bulk-edit/BulkEditPanel.css.js.map +0 -1
- package/esm/bulk-edit/BulkEditPanel.js +0 -105
- package/esm/bulk-edit/BulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.css.js +0 -4
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.css.js.map +0 -1
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.js +0 -78
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.js.map +0 -1
- package/esm/bulk-edit/InsertNewRowEditor.css.js +0 -4
- package/esm/bulk-edit/InsertNewRowEditor.css.js.map +0 -1
- package/esm/bulk-edit/InsertNewRowEditor.js +0 -78
- package/esm/bulk-edit/InsertNewRowEditor.js.map +0 -1
- package/esm/bulk-edit/useBulkEditPanel.js +0 -68
- package/esm/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/useColumnCascadingEditor.js +0 -141
- package/esm/bulk-edit/useColumnCascadingEditor.js.map +0 -1
- package/esm/cell-block/CellBlock.css.js +0 -4
- package/esm/cell-block/CellBlock.css.js.map +0 -1
- package/esm/cell-block/CellBlock.js +0 -43
- package/esm/cell-block/CellBlock.js.map +0 -1
- package/esm/cell-block/cellblock-utils.js +0 -116
- package/esm/cell-block/cellblock-utils.js.map +0 -1
- package/esm/cell-block/useCellBlockSelection.js +0 -255
- package/esm/cell-block/useCellBlockSelection.js.map +0 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js +0 -4
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +0 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js +0 -65
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +0 -4
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js.map +0 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +0 -49
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +0 -1
- package/esm/cell-renderers/input-cell/InputCell.css.js +0 -4
- package/esm/cell-renderers/input-cell/InputCell.css.js.map +0 -1
- package/esm/cell-renderers/input-cell/InputCell.js +0 -61
- package/esm/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/esm/cell-renderers/input-cell/useInputCell.js +0 -209
- package/esm/cell-renderers/input-cell/useInputCell.js.map +0 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.css.js +0 -4
- package/esm/cell-renderers/toggle-cell/ToggleCell.css.js.map +0 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.js +0 -64
- package/esm/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
- package/esm/column-header-pill/ColumnHeaderPill.css.js +0 -4
- package/esm/column-header-pill/ColumnHeaderPill.css.js.map +0 -1
- package/esm/column-header-pill/ColumnHeaderPill.js +0 -51
- package/esm/column-header-pill/ColumnHeaderPill.js.map +0 -1
- package/esm/column-header-pill/GroupColumnPill.css.js +0 -4
- package/esm/column-header-pill/GroupColumnPill.css.js.map +0 -1
- package/esm/column-header-pill/GroupColumnPill.js +0 -27
- package/esm/column-header-pill/GroupColumnPill.js.map +0 -1
- package/esm/column-header-pill/SortIndicator.css.js +0 -4
- package/esm/column-header-pill/SortIndicator.css.js.map +0 -1
- package/esm/column-header-pill/SortIndicator.js +0 -25
- package/esm/column-header-pill/SortIndicator.js.map +0 -1
- package/esm/column-resizing/ColumnResizer.css.js +0 -4
- package/esm/column-resizing/ColumnResizer.css.js.map +0 -1
- package/esm/column-resizing/ColumnResizer.js +0 -80
- package/esm/column-resizing/ColumnResizer.js.map +0 -1
- package/esm/column-resizing/useTableColumnResize.js +0 -53
- package/esm/column-resizing/useTableColumnResize.js.map +0 -1
- package/esm/data-row/DataRow.js +0 -260
- package/esm/data-row/DataRow.js.map +0 -1
- package/esm/header-cell/GroupHeaderCell.css.js +0 -4
- package/esm/header-cell/GroupHeaderCell.css.js.map +0 -1
- package/esm/header-cell/GroupHeaderCell.js +0 -125
- package/esm/header-cell/GroupHeaderCell.js.map +0 -1
- package/esm/header-cell/HeaderCell.css.js +0 -4
- package/esm/header-cell/HeaderCell.css.js.map +0 -1
- package/esm/header-cell/HeaderCell.js +0 -137
- package/esm/header-cell/HeaderCell.js.map +0 -1
- package/esm/index.js +0 -27
- package/esm/index.js.map +0 -1
- package/esm/pagination/PaginationControl.css.js +0 -4
- package/esm/pagination/PaginationControl.css.js.map +0 -1
- package/esm/pagination/PaginationControl.js +0 -36
- package/esm/pagination/PaginationControl.js.map +0 -1
- package/esm/pagination/usePagination.js +0 -34
- package/esm/pagination/usePagination.js.map +0 -1
- package/esm/table-cell/TableCell.css.js +0 -4
- package/esm/table-cell/TableCell.css.js.map +0 -1
- package/esm/table-cell/TableCell.js +0 -73
- package/esm/table-cell/TableCell.js.map +0 -1
- package/esm/table-cell/TableGroupCell.css.js +0 -4
- package/esm/table-cell/TableGroupCell.css.js.map +0 -1
- package/esm/table-cell/TableGroupCell.js +0 -63
- package/esm/table-cell/TableGroupCell.js.map +0 -1
- package/esm/table-config/useTableConfig.js +0 -65
- package/esm/table-config/useTableConfig.js.map +0 -1
- package/esm/table-config.js +0 -33
- package/esm/table-config.js.map +0 -1
- package/esm/table-data-source/DataRowMovingWindow.js +0 -97
- package/esm/table-data-source/DataRowMovingWindow.js.map +0 -1
- package/esm/table-data-source/useDataSource.js +0 -234
- package/esm/table-data-source/useDataSource.js.map +0 -1
- package/esm/table-dom-utils.js +0 -188
- package/esm/table-dom-utils.js.map +0 -1
- package/esm/table-header/HeaderProvider.js +0 -15
- package/esm/table-header/HeaderProvider.js.map +0 -1
- package/esm/table-header/TableHeader.js +0 -178
- package/esm/table-header/TableHeader.js.map +0 -1
- package/esm/table-header/useTableHeader.js +0 -85
- package/esm/table-header/useTableHeader.js.map +0 -1
- package/esm/useCell.js +0 -24
- package/esm/useCell.js.map +0 -1
- package/esm/useCellEditing.js +0 -75
- package/esm/useCellEditing.js.map +0 -1
- package/esm/useCellFocus.js +0 -117
- package/esm/useCellFocus.js.map +0 -1
- package/esm/useControlledTableNavigation.js +0 -43
- package/esm/useControlledTableNavigation.js.map +0 -1
- package/esm/useEditableCell.js +0 -25
- package/esm/useEditableCell.js.map +0 -1
- package/esm/useKeyboardNavigation.js +0 -319
- package/esm/useKeyboardNavigation.js.map +0 -1
- package/esm/useMeasuredHeight.js +0 -49
- package/esm/useMeasuredHeight.js.map +0 -1
- package/esm/useRowClassNameGenerators.js +0 -32
- package/esm/useRowClassNameGenerators.js.map +0 -1
- package/esm/useSelection.js +0 -128
- package/esm/useSelection.js.map +0 -1
- package/esm/useTable.js +0 -740
- package/esm/useTable.js.map +0 -1
- package/esm/useTableContextMenu.js +0 -73
- package/esm/useTableContextMenu.js.map +0 -1
- package/esm/useTableModel.js +0 -419
- package/esm/useTableModel.js.map +0 -1
- package/esm/useTableScroll.js +0 -461
- package/esm/useTableScroll.js.map +0 -1
- package/esm/useTableViewport.js +0 -135
- package/esm/useTableViewport.js.map +0 -1
package/cjs/table-dom-utils.js
DELETED
|
@@ -1,206 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
|
|
5
|
-
const headerCellQuery = (colIdx) => `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx}']`;
|
|
6
|
-
const dataCellQuery = (ariaRowIdx, ariaColIdx) => `.vuuTable-table [aria-rowindex='${ariaRowIdx}'] > [aria-colindex='${ariaColIdx}']`;
|
|
7
|
-
const getLevelUp = (containerRef, cellPos) => {
|
|
8
|
-
const cell = getTableCell(containerRef, cellPos);
|
|
9
|
-
let row = cell?.parentElement;
|
|
10
|
-
const level = parseInt(row?.ariaLevel ?? "1");
|
|
11
|
-
if (level > 1) {
|
|
12
|
-
const targetLevel = `${level - 1}`;
|
|
13
|
-
while (row !== null && row.ariaLevel !== targetLevel) {
|
|
14
|
-
row = row.previousElementSibling;
|
|
15
|
-
}
|
|
16
|
-
if (row) {
|
|
17
|
-
const nextRowIndex = parseInt(row.ariaRowIndex ?? "- 1");
|
|
18
|
-
if (nextRowIndex !== -1) {
|
|
19
|
-
return [nextRowIndex, 1];
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
return cellPos;
|
|
24
|
-
};
|
|
25
|
-
const getTableCellElement = (containerRef, [rowIdx, colIdx]) => {
|
|
26
|
-
const cssQuery = dataCellQuery(rowIdx, colIdx);
|
|
27
|
-
return containerRef.current?.querySelector(cssQuery);
|
|
28
|
-
};
|
|
29
|
-
const getTableCell = (containerRef, cellPos) => {
|
|
30
|
-
const cell = getTableCellElement(containerRef, cellPos);
|
|
31
|
-
if (cellIsEditable(cell)) {
|
|
32
|
-
const focusableContent = cell.querySelector(
|
|
33
|
-
`button,input[type="checkbox"]`
|
|
34
|
-
);
|
|
35
|
-
return focusableContent || cell;
|
|
36
|
-
} else {
|
|
37
|
-
return cell;
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
const getHeaderCell = (containerRef, columnName) => containerRef.current?.querySelector(
|
|
41
|
-
`.vuuTableHeaderCell[data-column-name="${columnName}"]`
|
|
42
|
-
);
|
|
43
|
-
const getFocusedCell = (el) => {
|
|
44
|
-
if (el?.role == "cell" || el?.role === "columnheader") {
|
|
45
|
-
return el;
|
|
46
|
-
} else {
|
|
47
|
-
return el?.closest(
|
|
48
|
-
"[role='columnHeader'],[role='cell']"
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
const cellIsEditable = (cell) => cell?.classList.contains("vuuTableCell-editable");
|
|
53
|
-
const cellDropdownShowing = (cell) => {
|
|
54
|
-
if (cellIsEditable(cell)) {
|
|
55
|
-
return cell?.querySelector('.saltDropdown[aria-expanded="true"]') !== null;
|
|
56
|
-
}
|
|
57
|
-
return false;
|
|
58
|
-
};
|
|
59
|
-
const cellIsGroupCell = (cell) => cell?.classList.contains("vuuTableGroupCell");
|
|
60
|
-
const rowIsExpanded = (cell) => {
|
|
61
|
-
switch (cell.parentElement?.ariaExpanded) {
|
|
62
|
-
case "true":
|
|
63
|
-
return true;
|
|
64
|
-
case "false":
|
|
65
|
-
return false;
|
|
66
|
-
default:
|
|
67
|
-
return void 0;
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
const cellIsTextInput = (cell) => cell.querySelector(".vuuTableInputCell") !== null;
|
|
71
|
-
const getRowElementByAriaIndex = (container, rowIndex) => {
|
|
72
|
-
if (rowIndex === -1) {
|
|
73
|
-
return null;
|
|
74
|
-
} else {
|
|
75
|
-
const activeRow = container.querySelector(
|
|
76
|
-
`[aria-rowindex="${rowIndex}"]`
|
|
77
|
-
);
|
|
78
|
-
if (activeRow) {
|
|
79
|
-
return activeRow;
|
|
80
|
-
} else {
|
|
81
|
-
throw Error(
|
|
82
|
-
`getRowElementAtIndex no row found for index index ${rowIndex}`
|
|
83
|
-
);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
const getAriaCellPos = (tableCell) => {
|
|
88
|
-
const focusedRow = tableCell.closest("[role='row']");
|
|
89
|
-
return [vuuUtils.getAriaRowIndex(focusedRow), vuuUtils.getAriaColIndex(tableCell)];
|
|
90
|
-
};
|
|
91
|
-
const closestRow = (el) => el.closest('[role="row"]');
|
|
92
|
-
const closestRowIndex = (el) => vuuUtils.getAriaRowIndex(closestRow(el));
|
|
93
|
-
function getNextCellPos(key, [rowIdx, colIdx], columnCount, maxRowIndex) {
|
|
94
|
-
if (key === "ArrowUp") {
|
|
95
|
-
if (rowIdx > -1) {
|
|
96
|
-
return [rowIdx - 1, colIdx];
|
|
97
|
-
} else {
|
|
98
|
-
return [rowIdx, colIdx];
|
|
99
|
-
}
|
|
100
|
-
} else if (key === "ArrowDown") {
|
|
101
|
-
if (rowIdx === -1) {
|
|
102
|
-
return [1, colIdx];
|
|
103
|
-
} else if (rowIdx === maxRowIndex) {
|
|
104
|
-
return [rowIdx, colIdx];
|
|
105
|
-
} else {
|
|
106
|
-
return [rowIdx + 1, colIdx];
|
|
107
|
-
}
|
|
108
|
-
} else if (key === "ArrowRight") {
|
|
109
|
-
if (colIdx < columnCount) {
|
|
110
|
-
return [rowIdx, colIdx + 1];
|
|
111
|
-
} else {
|
|
112
|
-
return [rowIdx, colIdx];
|
|
113
|
-
}
|
|
114
|
-
} else if (key === "ArrowLeft") {
|
|
115
|
-
if (colIdx > 1) {
|
|
116
|
-
return [rowIdx, colIdx - 1];
|
|
117
|
-
} else {
|
|
118
|
-
return [rowIdx, colIdx];
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
return [rowIdx, colIdx];
|
|
122
|
-
}
|
|
123
|
-
const getNextEditableCellPos = (containerRef, key, cellPos, columnCount, maxRowIndex) => {
|
|
124
|
-
let [lastRowIdx, lastColIdx] = cellPos;
|
|
125
|
-
do {
|
|
126
|
-
const [nextRowIdx, nextColIdx] = getNextCellPos(
|
|
127
|
-
key,
|
|
128
|
-
[lastRowIdx, lastColIdx],
|
|
129
|
-
columnCount,
|
|
130
|
-
maxRowIndex
|
|
131
|
-
);
|
|
132
|
-
if (nextRowIdx === lastRowIdx && nextColIdx === lastColIdx) {
|
|
133
|
-
return cellPos;
|
|
134
|
-
}
|
|
135
|
-
const cell = getTableCellElement(containerRef, [nextRowIdx, nextColIdx]);
|
|
136
|
-
if (cellIsEditable(cell)) {
|
|
137
|
-
return [nextRowIdx, nextColIdx];
|
|
138
|
-
}
|
|
139
|
-
[lastRowIdx, lastColIdx] = [nextRowIdx, nextColIdx];
|
|
140
|
-
} while (true);
|
|
141
|
-
};
|
|
142
|
-
const getTreeNodeOperation = (containerRef, navigationStyle, cellPos, key, shiftKey) => {
|
|
143
|
-
const cell = getTableCell(containerRef, cellPos);
|
|
144
|
-
if (navigationStyle === "cell" && !cellIsGroupCell(cell)) {
|
|
145
|
-
return void 0;
|
|
146
|
-
}
|
|
147
|
-
if (navigationStyle == "cell" && !shiftKey) {
|
|
148
|
-
return void 0;
|
|
149
|
-
}
|
|
150
|
-
if (cellIsGroupCell(cell)) {
|
|
151
|
-
const isExpanded = rowIsExpanded(cell);
|
|
152
|
-
if (isExpanded === true) {
|
|
153
|
-
if (key === "ArrowLeft") {
|
|
154
|
-
return "collapse";
|
|
155
|
-
}
|
|
156
|
-
} else if (isExpanded === false) {
|
|
157
|
-
if (key === "ArrowRight") {
|
|
158
|
-
return "expand";
|
|
159
|
-
} else if (key === "ArrowLeft") {
|
|
160
|
-
return "level-up";
|
|
161
|
-
}
|
|
162
|
-
} else if (key === "ArrowLeft") {
|
|
163
|
-
return "level-up";
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
};
|
|
167
|
-
const NO_SCROLL_NECESSARY = [void 0, void 0];
|
|
168
|
-
const howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer = rowEl.closest(".vuuTable-contentContainer")) => {
|
|
169
|
-
if (contentContainer) {
|
|
170
|
-
const viewport = contentContainer?.getBoundingClientRect();
|
|
171
|
-
const upperBoundary = viewport.top + totalHeaderHeight;
|
|
172
|
-
const row = rowEl.getBoundingClientRect();
|
|
173
|
-
if (row) {
|
|
174
|
-
if (row.bottom > viewport.bottom) {
|
|
175
|
-
return ["down", row.bottom - viewport.bottom];
|
|
176
|
-
} else if (row.top < upperBoundary) {
|
|
177
|
-
return ["up", row.top - upperBoundary];
|
|
178
|
-
} else {
|
|
179
|
-
return NO_SCROLL_NECESSARY;
|
|
180
|
-
}
|
|
181
|
-
} else {
|
|
182
|
-
throw Error("Whats going on, row not found");
|
|
183
|
-
}
|
|
184
|
-
} else {
|
|
185
|
-
throw Error("Whats going on, scrollbar container not found");
|
|
186
|
-
}
|
|
187
|
-
};
|
|
188
|
-
|
|
189
|
-
exports.cellDropdownShowing = cellDropdownShowing;
|
|
190
|
-
exports.cellIsEditable = cellIsEditable;
|
|
191
|
-
exports.cellIsTextInput = cellIsTextInput;
|
|
192
|
-
exports.closestRowIndex = closestRowIndex;
|
|
193
|
-
exports.dataCellQuery = dataCellQuery;
|
|
194
|
-
exports.getAriaCellPos = getAriaCellPos;
|
|
195
|
-
exports.getFocusedCell = getFocusedCell;
|
|
196
|
-
exports.getHeaderCell = getHeaderCell;
|
|
197
|
-
exports.getLevelUp = getLevelUp;
|
|
198
|
-
exports.getNextCellPos = getNextCellPos;
|
|
199
|
-
exports.getNextEditableCellPos = getNextEditableCellPos;
|
|
200
|
-
exports.getRowElementByAriaIndex = getRowElementByAriaIndex;
|
|
201
|
-
exports.getTableCell = getTableCell;
|
|
202
|
-
exports.getTableCellElement = getTableCellElement;
|
|
203
|
-
exports.getTreeNodeOperation = getTreeNodeOperation;
|
|
204
|
-
exports.headerCellQuery = headerCellQuery;
|
|
205
|
-
exports.howFarIsRowOutsideViewport = howFarIsRowOutsideViewport;
|
|
206
|
-
//# sourceMappingURL=table-dom-utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"table-dom-utils.js","sources":["../../../packages/vuu-table/src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\nimport {\n getAriaColIndex,\n getAriaRowIndex,\n type ArrowKey,\n type PageKey,\n} from \"@vuu-ui/vuu-utils\";\nimport type { CellPos } from \"@vuu-ui/vuu-table-types\";\n\nexport type NavigationKey = PageKey | ArrowKey;\n\nexport const headerCellQuery = (colIdx: number) =>\n `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx}']`;\n\nexport const dataCellQuery = (ariaRowIdx: number, ariaColIdx: number) =>\n `.vuuTable-table [aria-rowindex='${ariaRowIdx}'] > [aria-colindex='${ariaColIdx}']`;\n\nexport const getLevelUp = (\n containerRef: RefObject<HTMLElement | null>,\n cellPos: CellPos,\n): CellPos => {\n const cell = getTableCell(containerRef, cellPos);\n let row = cell?.parentElement;\n const level = parseInt(row?.ariaLevel ?? \"1\");\n if (level > 1) {\n const targetLevel = `${level - 1}`;\n while (row !== null && row.ariaLevel !== targetLevel) {\n row = row.previousElementSibling as HTMLElement;\n }\n if (row) {\n const nextRowIndex = parseInt(row.ariaRowIndex ?? \"- 1\");\n if (nextRowIndex !== -1) {\n return [nextRowIndex, 1];\n }\n }\n }\n return cellPos;\n};\n\nexport const getTableCellElement = (\n containerRef: RefObject<HTMLElement | null>,\n [rowIdx, colIdx]: CellPos,\n) => {\n const cssQuery = dataCellQuery(rowIdx, colIdx);\n return containerRef.current?.querySelector(cssQuery) as HTMLDivElement;\n};\n\nexport const getTableCell = (\n containerRef: RefObject<HTMLElement | null>,\n cellPos: CellPos,\n) => {\n const cell = getTableCellElement(containerRef, cellPos);\n\n if (cellIsEditable(cell)) {\n // Dropdown gets focus, Input does not\n const focusableContent = cell.querySelector(\n `button,input[type=\"checkbox\"]`,\n ) as HTMLElement;\n return focusableContent || cell;\n } else {\n return cell;\n }\n};\n\nexport const getHeaderCell = (\n containerRef: RefObject<HTMLElement | null>,\n columnName: string,\n) =>\n containerRef.current?.querySelector(\n `.vuuTableHeaderCell[data-column-name=\"${columnName}\"]`,\n ) as HTMLDivElement | null;\n\nexport const getFocusedCell = (el: HTMLElement | Element | null) => {\n if (el?.role == \"cell\" || el?.role === \"columnheader\") {\n return el as HTMLDivElement;\n } else {\n return el?.closest(\n \"[role='columnHeader'],[role='cell']\",\n ) as HTMLDivElement | null;\n }\n};\n\nexport const cellIsEditable = (cell: HTMLDivElement | null) =>\n cell?.classList.contains(\"vuuTableCell-editable\");\n\nexport const cellDropdownShowing = (cell: HTMLDivElement | null) => {\n if (cellIsEditable(cell)) {\n return cell?.querySelector('.saltDropdown[aria-expanded=\"true\"]') !== null;\n }\n return false;\n};\n\nconst cellIsGroupCell = (cell: HTMLElement | null) =>\n cell?.classList.contains(\"vuuTableGroupCell\");\n\nconst rowIsExpanded = (cell: HTMLElement) => {\n switch (cell.parentElement?.ariaExpanded) {\n case \"true\":\n return true;\n case \"false\":\n return false;\n default:\n return undefined;\n }\n};\n\nexport const cellIsTextInput = (cell: HTMLElement) =>\n cell.querySelector(\".vuuTableInputCell\") !== null;\n\nexport const getRowElementByAriaIndex = (\n container: HTMLDivElement | EventTarget,\n rowIndex: number,\n) => {\n if (rowIndex === -1) {\n return null;\n } else {\n const activeRow = (container as HTMLElement).querySelector(\n `[aria-rowindex=\"${rowIndex}\"]`,\n ) as HTMLElement;\n\n if (activeRow) {\n return activeRow;\n } else {\n throw Error(\n `getRowElementAtIndex no row found for index index ${rowIndex}`,\n );\n }\n }\n};\n\nexport const getIndexFromCellElement = (cellElement: HTMLElement | null) =>\n getAriaColIndex(cellElement);\n\nexport const getAriaCellPos = (tableCell: HTMLDivElement): CellPos => {\n const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n return [getAriaRowIndex(focusedRow), getAriaColIndex(tableCell)];\n};\n\nconst closestRow = (el: HTMLElement) =>\n el.closest('[role=\"row\"]') as HTMLElement;\n\nexport const closestRowIndex = (el: HTMLElement) =>\n getAriaRowIndex(closestRow(el));\n\nexport function getNextCellPos(\n key: ArrowKey,\n [rowIdx, colIdx]: CellPos,\n columnCount: number,\n maxRowIndex: number,\n): CellPos {\n if (key === \"ArrowUp\") {\n if (rowIdx > -1) {\n return [rowIdx - 1, colIdx];\n } else {\n return [rowIdx, colIdx];\n }\n } else if (key === \"ArrowDown\") {\n if (rowIdx === -1) {\n return [1, colIdx];\n } else if (rowIdx === maxRowIndex) {\n return [rowIdx, colIdx];\n } else {\n return [rowIdx + 1, colIdx];\n }\n } else if (key === \"ArrowRight\") {\n if (colIdx < columnCount) {\n return [rowIdx, colIdx + 1];\n } else {\n return [rowIdx, colIdx];\n }\n } else if (key === \"ArrowLeft\") {\n if (colIdx > 1) {\n return [rowIdx, colIdx - 1];\n } else {\n return [rowIdx, colIdx];\n }\n }\n return [rowIdx, colIdx];\n}\n\nexport const getNextEditableCellPos = (\n containerRef: RefObject<HTMLElement | null>,\n key: ArrowKey,\n cellPos: CellPos,\n columnCount: number,\n maxRowIndex: number,\n) => {\n let [lastRowIdx, lastColIdx] = cellPos;\n do {\n const [nextRowIdx, nextColIdx] = getNextCellPos(\n key,\n [lastRowIdx, lastColIdx],\n columnCount,\n maxRowIndex,\n );\n if (nextRowIdx === lastRowIdx && nextColIdx === lastColIdx) {\n // we have not moved, we never found a new editable cell, bail\n return cellPos;\n }\n\n const cell = getTableCellElement(containerRef, [nextRowIdx, nextColIdx]);\n if (cellIsEditable(cell)) {\n return [nextRowIdx, nextColIdx];\n }\n // keep going\n [lastRowIdx, lastColIdx] = [nextRowIdx, nextColIdx];\n // eslint-disable-next-line no-constant-condition\n } while (true);\n};\n\nexport type TreeNodeOperation = \"expand\" | \"collapse\" | \"level-up\";\n\nexport const getTreeNodeOperation = (\n containerRef: RefObject<HTMLElement | null>,\n navigationStyle: \"cell\" | \"tree\",\n cellPos: CellPos,\n key: NavigationKey,\n shiftKey: boolean,\n): TreeNodeOperation | undefined => {\n const cell = getTableCell(containerRef, cellPos);\n if (navigationStyle === \"cell\" && !cellIsGroupCell(cell)) {\n return undefined;\n }\n if (navigationStyle == \"cell\" && !shiftKey) {\n return undefined;\n }\n if (cellIsGroupCell(cell)) {\n const isExpanded = rowIsExpanded(cell);\n if (isExpanded === true) {\n if (key === \"ArrowLeft\") {\n return \"collapse\";\n }\n } else if (isExpanded === false) {\n if (key === \"ArrowRight\") {\n return \"expand\";\n } else if (key === \"ArrowLeft\") {\n return \"level-up\";\n }\n } else if (key === \"ArrowLeft\") {\n return \"level-up\";\n }\n }\n};\n\nconst NO_SCROLL_NECESSARY = [undefined, undefined] as const;\n\nexport const howFarIsRowOutsideViewport = (\n rowEl: HTMLElement,\n totalHeaderHeight: number,\n contentContainer = rowEl.closest(\".vuuTable-contentContainer\"),\n): readonly [ScrollDirection | undefined, number | undefined] => {\n //TODO lots of scope for optimisation here\n if (contentContainer) {\n // TODO take totalHeaderHeight into consideration\n const viewport = contentContainer?.getBoundingClientRect();\n const upperBoundary = viewport.top + totalHeaderHeight;\n const row = rowEl.getBoundingClientRect();\n if (row) {\n if (row.bottom > viewport.bottom) {\n return [\"down\", row.bottom - viewport.bottom];\n } else if (row.top < upperBoundary) {\n return [\"up\", row.top - upperBoundary];\n } else {\n return NO_SCROLL_NECESSARY;\n }\n } else {\n throw Error(\"Whats going on, row not found\");\n }\n } else {\n throw Error(\"Whats going on, scrollbar container not found\");\n }\n};\n"],"names":["getAriaRowIndex","getAriaColIndex"],"mappings":"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"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
|
|
6
|
-
const HeaderContext = react.createContext({ columns: [] });
|
|
7
|
-
const HeaderProvider = ({
|
|
8
|
-
children,
|
|
9
|
-
columns,
|
|
10
|
-
virtualColSpan
|
|
11
|
-
}) => {
|
|
12
|
-
return /* @__PURE__ */ jsxRuntime.jsx(HeaderContext.Provider, { value: { columns, virtualColSpan }, children });
|
|
13
|
-
};
|
|
14
|
-
const useHeaderProps = () => react.useContext(HeaderContext);
|
|
15
|
-
|
|
16
|
-
exports.HeaderProvider = HeaderProvider;
|
|
17
|
-
exports.useHeaderProps = useHeaderProps;
|
|
18
|
-
//# sourceMappingURL=HeaderProvider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderProvider.js","sources":["../../../../packages/vuu-table/src/table-header/HeaderProvider.tsx"],"sourcesContent":["import { BaseRowProps } from \"@vuu-ui/vuu-table-types\";\nimport { createContext, FC, ReactNode, useContext } from \"react\";\n\nconst HeaderContext = createContext<BaseRowProps>({ columns: [] });\n\nexport const HeaderProvider: FC<BaseRowProps & { children: ReactNode }> = ({\n children,\n columns,\n virtualColSpan,\n}) => {\n return (\n <HeaderContext.Provider value={{ columns, virtualColSpan }}>\n {children}\n </HeaderContext.Provider>\n );\n};\n\nexport const useHeaderProps = () => useContext(HeaderContext);\n"],"names":["createContext","jsx","useContext"],"mappings":";;;;;AAGA,MAAM,gBAAgBA,mBAA4B,CAAA,EAAE,OAAS,EAAA,IAAI,CAAA;AAE1D,MAAM,iBAA6D,CAAC;AAAA,EACzE,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAAC,cAAA,CAAC,cAAc,QAAd,EAAA,EAAuB,OAAO,EAAE,OAAA,EAAS,cAAe,EAAA,EACtD,QACH,EAAA,CAAA;AAEJ;AAEa,MAAA,cAAA,GAAiB,MAAMC,gBAAA,CAAW,aAAa;;;;;"}
|
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var styles = require('@salt-ds/styles');
|
|
5
|
-
var window = require('@salt-ds/window');
|
|
6
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
7
|
-
var react = require('react');
|
|
8
|
-
var GroupHeaderCell = require('../header-cell/GroupHeaderCell.js');
|
|
9
|
-
var HeaderCell$1 = require('../header-cell/HeaderCell.js');
|
|
10
|
-
var HeaderProvider = require('./HeaderProvider.js');
|
|
11
|
-
var useTableHeader = require('./useTableHeader.js');
|
|
12
|
-
var HeaderCell = require('../header-cell/HeaderCell.css.js');
|
|
13
|
-
|
|
14
|
-
const isHeaderElement = (h) => react.isValidElement(h);
|
|
15
|
-
const classBase = "vuuTableHeader";
|
|
16
|
-
const TableHeader = react.memo(
|
|
17
|
-
({
|
|
18
|
-
HeaderCell: HeaderCell$2 = HeaderCell$1.HeaderCell,
|
|
19
|
-
allowDragColumnHeader,
|
|
20
|
-
allowSelectAll,
|
|
21
|
-
allRowsSelected,
|
|
22
|
-
columns,
|
|
23
|
-
customHeader,
|
|
24
|
-
headings,
|
|
25
|
-
onCheckBoxColumnHeaderClick,
|
|
26
|
-
onHeightMeasured,
|
|
27
|
-
onMoveColumn,
|
|
28
|
-
onMoveGroupColumn,
|
|
29
|
-
onRemoveGroupColumn,
|
|
30
|
-
onResizeColumn,
|
|
31
|
-
onSortColumn,
|
|
32
|
-
showBookends,
|
|
33
|
-
showColumnHeaderMenus,
|
|
34
|
-
tableConfig,
|
|
35
|
-
tableId,
|
|
36
|
-
virtualColSpan = 0
|
|
37
|
-
}) => {
|
|
38
|
-
const targetWindow = window.useWindow();
|
|
39
|
-
styles.useComponentCssInjection({
|
|
40
|
-
testId: "vuu-table-header-cell",
|
|
41
|
-
css: HeaderCell,
|
|
42
|
-
window: targetWindow
|
|
43
|
-
});
|
|
44
|
-
const [customHeaders, customHeaderCount] = react.useMemo(() => {
|
|
45
|
-
const offset = headings.length;
|
|
46
|
-
const createElement = (Component, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
47
|
-
Component,
|
|
48
|
-
{
|
|
49
|
-
ariaRowIndex: offset + index + 2,
|
|
50
|
-
ariaRole: "row",
|
|
51
|
-
columns,
|
|
52
|
-
virtualColSpan
|
|
53
|
-
},
|
|
54
|
-
index
|
|
55
|
-
);
|
|
56
|
-
const enrichElementWithAria = (el, rowIndex) => {
|
|
57
|
-
const offset2 = headings.length;
|
|
58
|
-
return react.cloneElement(el, {
|
|
59
|
-
"aria-rowindex": rowIndex + offset2 + 2,
|
|
60
|
-
ariaRole: "row"
|
|
61
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
62
|
-
});
|
|
63
|
-
};
|
|
64
|
-
if (customHeader === void 0) {
|
|
65
|
-
return [null, 0];
|
|
66
|
-
} else if (Array.isArray(customHeader)) {
|
|
67
|
-
const header = /* @__PURE__ */ jsxRuntime.jsx(HeaderProvider.HeaderProvider, { columns, virtualColSpan, children: customHeader.map(
|
|
68
|
-
(header2, i) => isHeaderElement(header2) ? enrichElementWithAria(header2, i) : createElement(header2, i)
|
|
69
|
-
) });
|
|
70
|
-
return [header, customHeader.length];
|
|
71
|
-
} else if (isHeaderElement(customHeader)) {
|
|
72
|
-
const header = /* @__PURE__ */ jsxRuntime.jsx(HeaderProvider.HeaderProvider, { columns, virtualColSpan, children: enrichElementWithAria(customHeader, 0) });
|
|
73
|
-
return [header, 1];
|
|
74
|
-
} else {
|
|
75
|
-
return [createElement(customHeader, 0), 1];
|
|
76
|
-
}
|
|
77
|
-
}, [columns, customHeader, headings.length, virtualColSpan]);
|
|
78
|
-
const { dragColumn, onClick, onDragEnd, onDragStart, setContainerRef } = useTableHeader.useTableHeader({
|
|
79
|
-
columns,
|
|
80
|
-
customHeaderCount,
|
|
81
|
-
headings,
|
|
82
|
-
onHeightMeasured,
|
|
83
|
-
onMoveColumn,
|
|
84
|
-
onSortColumn,
|
|
85
|
-
tableConfig
|
|
86
|
-
});
|
|
87
|
-
const visibleColumns = columns.filter(vuuUtils.isNotHidden);
|
|
88
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase, ref: setContainerRef, role: "rowgroup", children: [
|
|
89
|
-
headings.map((colHeaders, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
90
|
-
"div",
|
|
91
|
-
{
|
|
92
|
-
className: "vuuTable-heading",
|
|
93
|
-
role: "row",
|
|
94
|
-
"aria-rowindex": i + 1,
|
|
95
|
-
children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j))
|
|
96
|
-
},
|
|
97
|
-
i
|
|
98
|
-
)),
|
|
99
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
100
|
-
vuuUtils.DragDropProvider,
|
|
101
|
-
{
|
|
102
|
-
onDragEnd,
|
|
103
|
-
onDragStart,
|
|
104
|
-
modifiers: [vuuUtils.RestrictToHorizontalAxis],
|
|
105
|
-
sensors: [
|
|
106
|
-
vuuUtils.KeyboardSensor.configure({
|
|
107
|
-
keyboardCodes: {
|
|
108
|
-
start: ["Space"],
|
|
109
|
-
cancel: ["Escape"],
|
|
110
|
-
end: ["Space", "Enter"],
|
|
111
|
-
left: ["ArrowLeft"],
|
|
112
|
-
right: ["ArrowRight"],
|
|
113
|
-
up: [],
|
|
114
|
-
down: []
|
|
115
|
-
}
|
|
116
|
-
}),
|
|
117
|
-
vuuUtils.PointerSensor
|
|
118
|
-
],
|
|
119
|
-
children: [
|
|
120
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
121
|
-
"div",
|
|
122
|
-
{
|
|
123
|
-
className: "vuuTableColHeaderRow",
|
|
124
|
-
role: "row",
|
|
125
|
-
"aria-rowindex": headings.length + 1,
|
|
126
|
-
children: [
|
|
127
|
-
showBookends ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuSelectionDecorator vuuStickyLeft" }) : null,
|
|
128
|
-
visibleColumns.map((col, i) => {
|
|
129
|
-
const allowDragDrop = allowDragColumnHeader && !col.pin ? true : false;
|
|
130
|
-
return vuuUtils.isGroupColumn(col) ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
131
|
-
GroupHeaderCell.GroupHeaderCell,
|
|
132
|
-
{
|
|
133
|
-
column: col,
|
|
134
|
-
id: `${tableId}-${col.name}`,
|
|
135
|
-
onMoveColumn: onMoveGroupColumn,
|
|
136
|
-
onRemoveColumn: onRemoveGroupColumn,
|
|
137
|
-
onResize: onResizeColumn
|
|
138
|
-
},
|
|
139
|
-
col.name
|
|
140
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
141
|
-
HeaderCell$2,
|
|
142
|
-
{
|
|
143
|
-
allowDragColumnHeader: allowDragDrop,
|
|
144
|
-
allowSelectAll,
|
|
145
|
-
allRowsSelected,
|
|
146
|
-
column: col,
|
|
147
|
-
index: i,
|
|
148
|
-
id: `${tableId}-${col.name}`,
|
|
149
|
-
onCheckBoxColumnHeaderClick,
|
|
150
|
-
onClick,
|
|
151
|
-
onResize: onResizeColumn,
|
|
152
|
-
showColumnHeaderMenus
|
|
153
|
-
},
|
|
154
|
-
`${col.name}-${allowDragDrop}`
|
|
155
|
-
);
|
|
156
|
-
}),
|
|
157
|
-
showBookends ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuSelectionDecorator vuuStickyRight" }) : null
|
|
158
|
-
]
|
|
159
|
-
}
|
|
160
|
-
),
|
|
161
|
-
/* @__PURE__ */ jsxRuntime.jsx(vuuUtils.DragOverlay, { children: dragColumn ? /* @__PURE__ */ jsxRuntime.jsx("div", { id: dragColumn.id, className: "DragColumn", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
162
|
-
HeaderCell$2,
|
|
163
|
-
{
|
|
164
|
-
column: dragColumn.column,
|
|
165
|
-
className: "vuuDragging",
|
|
166
|
-
id: `${tableId}-${dragColumn.id}-dragging`,
|
|
167
|
-
index: -1
|
|
168
|
-
}
|
|
169
|
-
) }) : null })
|
|
170
|
-
]
|
|
171
|
-
}
|
|
172
|
-
),
|
|
173
|
-
customHeaders
|
|
174
|
-
] });
|
|
175
|
-
}
|
|
176
|
-
);
|
|
177
|
-
TableHeader.displayName = "TableHeader";
|
|
178
|
-
|
|
179
|
-
exports.TableHeader = TableHeader;
|
|
180
|
-
//# sourceMappingURL=TableHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","sources":["../../../../packages/vuu-table/src/table-header/TableHeader.tsx"],"sourcesContent":["import { VuuSortType } from \"@vuu-ui/vuu-protocol-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport {\n DragDropProvider,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n RestrictToHorizontalAxis,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n ColumnDescriptor,\n ColumnMoveHandler,\n CustomHeader,\n CustomHeaderComponent,\n CustomHeaderElement,\n HeaderCellProps,\n RuntimeColumnDescriptor,\n TableColumnResizeHandler,\n TableConfig,\n TableHeadings,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isGroupColumn, isNotHidden } from \"@vuu-ui/vuu-utils\";\nimport {\n cloneElement,\n FC,\n isValidElement,\n memo,\n ReactElement,\n useMemo,\n} from \"react\";\nimport {\n GroupHeaderCell,\n HeaderCell as DefaultHeaderCell,\n} from \"../header-cell\";\nimport { HeaderProvider } from \"./HeaderProvider\";\nimport { useTableHeader } from \"./useTableHeader\";\n\n// We import headercell css once here so it is available to custom\n// headercell implementations.\nimport headerCellCss from \"../header-cell/HeaderCell.css\";\n\nexport type ColumnSortHandler = (\n column: ColumnDescriptor,\n addToExistingSort: boolean,\n sortType?: VuuSortType,\n) => void;\n\nconst isHeaderElement = (h: CustomHeader): h is CustomHeaderElement =>\n isValidElement(h);\n\nconst classBase = \"vuuTableHeader\";\n\nexport interface TableHeaderProps\n extends Pick<\n HeaderCellProps,\n | \"allRowsSelected\"\n | \"allowDragColumnHeader\"\n | \"allowSelectAll\"\n | \"onCheckBoxColumnHeaderClick\"\n | \"showColumnHeaderMenus\"\n > {\n HeaderCell?: FC<HeaderCellProps>;\n columns: RuntimeColumnDescriptor[];\n customHeader?: CustomHeader | CustomHeader[];\n headings: TableHeadings;\n onHeightMeasured: (height: number, count: number) => void;\n onResizeColumn: TableColumnResizeHandler;\n onMoveColumn: ColumnMoveHandler;\n onMoveGroupColumn: (columns: ColumnDescriptor[]) => void;\n onRemoveGroupColumn: (column: RuntimeColumnDescriptor) => void;\n onSortColumn: ColumnSortHandler;\n showBookends?: boolean;\n tableConfig: TableConfig;\n tableId: string;\n virtualColSpan?: number;\n}\n\nexport const TableHeader = memo(\n ({\n HeaderCell = DefaultHeaderCell,\n allowDragColumnHeader,\n allowSelectAll,\n allRowsSelected,\n columns,\n customHeader,\n headings,\n onCheckBoxColumnHeaderClick,\n onHeightMeasured,\n onMoveColumn,\n onMoveGroupColumn,\n onRemoveGroupColumn,\n onResizeColumn,\n onSortColumn,\n showBookends,\n showColumnHeaderMenus,\n tableConfig,\n tableId,\n virtualColSpan = 0,\n }: TableHeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-header-cell\",\n css: headerCellCss,\n window: targetWindow,\n });\n\n const [customHeaders, customHeaderCount] = useMemo<\n [ReactElement | ReactElement[] | null, number]\n >(() => {\n const offset = headings.length;\n const createElement = (\n Component: CustomHeaderComponent,\n index: number,\n ) => (\n <Component\n ariaRowIndex={offset + index + 2}\n ariaRole=\"row\"\n columns={columns}\n key={index}\n virtualColSpan={virtualColSpan}\n />\n );\n\n const enrichElementWithAria = (el: ReactElement, rowIndex: number) => {\n const offset = headings.length;\n return cloneElement(el, {\n \"aria-rowindex\": rowIndex + offset + 2,\n ariaRole: \"row\",\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } as any);\n };\n\n if (customHeader === undefined) {\n return [null, 0];\n } else if (Array.isArray(customHeader)) {\n const header = (\n <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n {customHeader.map((header, i) =>\n isHeaderElement(header)\n ? enrichElementWithAria(header, i)\n : createElement(header, i),\n )}\n </HeaderProvider>\n );\n return [header, customHeader.length];\n } else if (isHeaderElement(customHeader)) {\n // TODO rowIndex and role\n const header = (\n <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n {enrichElementWithAria(customHeader, 0)}\n </HeaderProvider>\n );\n return [header, 1];\n } else {\n return [createElement(customHeader, 0), 1];\n }\n }, [columns, customHeader, headings.length, virtualColSpan]);\n\n const { dragColumn, onClick, onDragEnd, onDragStart, setContainerRef } =\n useTableHeader({\n columns,\n customHeaderCount,\n headings,\n onHeightMeasured,\n onMoveColumn,\n onSortColumn,\n tableConfig,\n });\n\n const visibleColumns = columns.filter(isNotHidden);\n\n return (\n <div className={classBase} ref={setContainerRef} role=\"rowgroup\">\n {headings.map((colHeaders, i) => (\n <div\n className=\"vuuTable-heading\"\n key={i}\n role=\"row\"\n aria-rowindex={i + 1}\n >\n {colHeaders.map(({ label, width }, j) => (\n <div key={j} className=\"vuuTable-headingCell\" style={{ width }}>\n {label}\n </div>\n ))}\n </div>\n ))}\n <DragDropProvider // whats the difference between this and DnDContext\n onDragEnd={onDragEnd}\n onDragStart={onDragStart}\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore typing error from dnd-kit\n modifiers={[RestrictToHorizontalAxis]}\n sensors={[\n KeyboardSensor.configure({\n keyboardCodes: {\n start: [\"Space\"],\n cancel: [\"Escape\"],\n end: [\"Space\", \"Enter\"],\n left: [\"ArrowLeft\"],\n right: [\"ArrowRight\"],\n up: [],\n down: [],\n },\n }),\n PointerSensor,\n ]}\n >\n <div\n className=\"vuuTableColHeaderRow\"\n role=\"row\"\n aria-rowindex={headings.length + 1}\n >\n {showBookends ? (\n <div className=\"vuuSelectionDecorator vuuStickyLeft\" />\n ) : null}\n\n {visibleColumns.map((col, i) => {\n const allowDragDrop =\n allowDragColumnHeader && !col.pin ? true : false;\n return isGroupColumn(col) ? (\n <GroupHeaderCell\n column={col}\n id={`${tableId}-${col.name}`}\n key={col.name}\n onMoveColumn={onMoveGroupColumn}\n onRemoveColumn={onRemoveGroupColumn}\n onResize={onResizeColumn}\n />\n ) : (\n <HeaderCell\n allowDragColumnHeader={allowDragDrop}\n allowSelectAll={allowSelectAll}\n allRowsSelected={allRowsSelected}\n column={col}\n index={i}\n id={`${tableId}-${col.name}`}\n key={`${col.name}-${allowDragDrop}`}\n onCheckBoxColumnHeaderClick={onCheckBoxColumnHeaderClick}\n onClick={onClick}\n onResize={onResizeColumn}\n showColumnHeaderMenus={showColumnHeaderMenus}\n />\n );\n })}\n {showBookends ? (\n <div className=\"vuuSelectionDecorator vuuStickyRight\" />\n ) : null}\n </div>\n\n <DragOverlay>\n {dragColumn ? (\n <div id={dragColumn.id} className=\"DragColumn\">\n <HeaderCell\n column={dragColumn.column}\n className=\"vuuDragging\"\n id={`${tableId}-${dragColumn.id}-dragging`}\n index={-1}\n />\n </div>\n ) : null}\n </DragOverlay>\n </DragDropProvider>\n {customHeaders}\n </div>\n );\n },\n);\nTableHeader.displayName = \"TableHeader\";\n"],"names":["isValidElement","memo","HeaderCell","DefaultHeaderCell","useWindow","useComponentCssInjection","headerCellCss","useMemo","jsx","offset","cloneElement","HeaderProvider","header","useTableHeader","isNotHidden","jsxs","DragDropProvider","RestrictToHorizontalAxis","KeyboardSensor","PointerSensor","isGroupColumn","GroupHeaderCell","DragOverlay"],"mappings":"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"}
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var useMeasuredHeight = require('../useMeasuredHeight.js');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
|
|
8
|
-
const useTableHeader = ({
|
|
9
|
-
columns,
|
|
10
|
-
customHeaderCount,
|
|
11
|
-
headings,
|
|
12
|
-
onHeightMeasured,
|
|
13
|
-
onMoveColumn,
|
|
14
|
-
onSortColumn
|
|
15
|
-
}) => {
|
|
16
|
-
const containerRef = react.useRef(null);
|
|
17
|
-
const scrollingContainerRef = react.useRef(null);
|
|
18
|
-
const [dragColumn, setDragColumn] = react.useState(null);
|
|
19
|
-
const handleHeightMeasured = react.useCallback(
|
|
20
|
-
(height) => {
|
|
21
|
-
onHeightMeasured(height, customHeaderCount + headings.length + 1);
|
|
22
|
-
},
|
|
23
|
-
[customHeaderCount, headings, onHeightMeasured]
|
|
24
|
-
);
|
|
25
|
-
const { measuredRef: rowRef } = useMeasuredHeight.useMeasuredHeight({
|
|
26
|
-
onHeightMeasured: handleHeightMeasured
|
|
27
|
-
});
|
|
28
|
-
const setContainerRef = react.useCallback((el) => {
|
|
29
|
-
containerRef.current = el;
|
|
30
|
-
if (el) {
|
|
31
|
-
scrollingContainerRef.current = el.closest(".vuuTable-contentContainer");
|
|
32
|
-
} else {
|
|
33
|
-
scrollingContainerRef.current = null;
|
|
34
|
-
}
|
|
35
|
-
}, []);
|
|
36
|
-
const handleDragStart = react.useCallback(
|
|
37
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
38
|
-
(evt) => {
|
|
39
|
-
const element = evt.operation.source;
|
|
40
|
-
const columnName = element.id.split("-").at(-1);
|
|
41
|
-
const column = columns.find((col) => col.name === columnName);
|
|
42
|
-
if (column === void 0) {
|
|
43
|
-
throw Error(`[useTableHeader] No column '${columnName}'`);
|
|
44
|
-
}
|
|
45
|
-
setDragColumn({ column, id: element.id });
|
|
46
|
-
},
|
|
47
|
-
[columns]
|
|
48
|
-
);
|
|
49
|
-
const handleDragEnd = react.useCallback(() => {
|
|
50
|
-
setTimeout(() => {
|
|
51
|
-
const listItems = containerRef.current?.querySelectorAll(
|
|
52
|
-
".vuuTableHeaderCell"
|
|
53
|
-
);
|
|
54
|
-
if (listItems && dragColumn?.column) {
|
|
55
|
-
const orderedColumnNames = Array.from(listItems).map(
|
|
56
|
-
({ dataset }) => dataset.columnName
|
|
57
|
-
);
|
|
58
|
-
onMoveColumn(
|
|
59
|
-
dragColumn?.column.name,
|
|
60
|
-
vuuUtils.reorderColumnItems(columns, orderedColumnNames)
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
}, 300);
|
|
64
|
-
}, [columns, dragColumn, onMoveColumn]);
|
|
65
|
-
const handleColumnHeaderClick = react.useCallback(
|
|
66
|
-
(evt) => {
|
|
67
|
-
const headerCell = vuuUtils.queryClosest(evt.target, ".vuuTableHeaderCell");
|
|
68
|
-
const colIdx = parseInt(headerCell?.dataset.index ?? "-1");
|
|
69
|
-
const column = vuuUtils.visibleColumnAtIndex(columns, colIdx);
|
|
70
|
-
if (column && column.sortable !== false) {
|
|
71
|
-
const isAdditive = evt.shiftKey;
|
|
72
|
-
onSortColumn(column, isAdditive);
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
[columns, onSortColumn]
|
|
76
|
-
);
|
|
77
|
-
return {
|
|
78
|
-
dragColumn,
|
|
79
|
-
onClick: handleColumnHeaderClick,
|
|
80
|
-
onDragEnd: handleDragEnd,
|
|
81
|
-
onDragStart: handleDragStart,
|
|
82
|
-
setContainerRef: core.useForkRef(setContainerRef, rowRef)
|
|
83
|
-
};
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
exports.useTableHeader = useTableHeader;
|
|
87
|
-
//# sourceMappingURL=useTableHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTableHeader.js","sources":["../../../../packages/vuu-table/src/table-header/useTableHeader.ts"],"sourcesContent":["import {\n ColumnDescriptor,\n RuntimeColumnDescriptor,\n TableHeadings,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n queryClosest,\n reorderColumnItems,\n visibleColumnAtIndex,\n} from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useRef, useState } from \"react\";\nimport { TableHeaderProps } from \"./TableHeader\";\nimport { useMeasuredHeight } from \"../useMeasuredHeight\";\nimport { useForkRef } from \"@salt-ds/core\";\n\nexport interface TableHeaderHookProps\n extends Pick<\n TableHeaderProps,\n \"columns\" | \"onMoveColumn\" | \"onSortColumn\" | \"tableConfig\"\n > {\n customHeaderCount: number;\n headings: TableHeadings;\n label?: string;\n onHeightMeasured: (height: number, customHeaderCount: number) => void;\n onMoveColumn: (columnName: string, columns: ColumnDescriptor[]) => void;\n onSortColumn: (column: ColumnDescriptor, addToExistingSort: boolean) => void;\n}\n\nexport type DragColumn = {\n id: string;\n column: RuntimeColumnDescriptor;\n};\n\nexport const useTableHeader = ({\n columns,\n customHeaderCount,\n headings,\n onHeightMeasured,\n onMoveColumn,\n onSortColumn,\n}: TableHeaderHookProps) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n const scrollingContainerRef = useRef<HTMLDivElement | null>(null);\n const [dragColumn, setDragColumn] = useState<DragColumn | null>(null);\n\n const handleHeightMeasured = useCallback(\n (height: number) => {\n onHeightMeasured(height, customHeaderCount + headings.length + 1);\n },\n [customHeaderCount, headings, onHeightMeasured],\n );\n\n const { measuredRef: rowRef } = useMeasuredHeight({\n onHeightMeasured: handleHeightMeasured,\n });\n\n const setContainerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n containerRef.current = el;\n if (el) {\n scrollingContainerRef.current = el.closest(\".vuuTable-contentContainer\");\n } else {\n scrollingContainerRef.current = null;\n }\n }, []);\n\n // const handleDropColumnHeader = useCallback(\n // ({ fromIndex: moveFrom, toIndex: moveTo }: DropOptions) => {\n // const column = columns[moveFrom];\n // // columns are what get rendered, so these are the columns that\n // // the drop operation relates to. We must translate these into\n // // columns within the table config. Grouping complicates this\n // // as the group columns are not present in columns but ARE in\n // // config.columns\n // const orderedColumns = moveColumnTo(columns, column, moveTo);\n\n // const ofColumn =\n // ({ name }: ColumnDescriptor) =>\n // (col: ColumnDescriptor) =>\n // col.name === name;\n\n // const targetIndex = orderedColumns.findIndex(ofColumn(column));\n // const nextColumn = orderedColumns[targetIndex + 1];\n // const insertPos = nextColumn\n // ? tableConfig.columns.findIndex(ofColumn(nextColumn))\n // : -1;\n\n // if (moveTo > moveFrom && insertPos !== -1) {\n // onMoveColumn(\n // dragColumn?.column?.name,\n // moveColumnTo(tableConfig.columns, column, insertPos - 1),\n // );\n // } else {\n // onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));\n // }\n // },\n // [columns, onMoveColumn, tableConfig.columns],\n // );\n\n const handleDragStart = useCallback(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (evt: any) => {\n const element = evt.operation.source as HTMLDivElement;\n const columnName = element.id.split(\"-\").at(-1);\n const column = columns.find((col) => col.name === columnName);\n if (column === undefined) {\n throw Error(`[useTableHeader] No column '${columnName}'`);\n }\n setDragColumn({ column, id: element.id });\n },\n [columns],\n );\n\n const handleDragEnd = useCallback(() => {\n setTimeout(() => {\n const listItems = containerRef.current?.querySelectorAll<HTMLDivElement>(\n \".vuuTableHeaderCell\",\n );\n\n if (listItems && dragColumn?.column) {\n const orderedColumnNames = Array.from<HTMLDivElement>(listItems).map(\n ({ dataset }) => dataset.columnName as string,\n );\n onMoveColumn(\n dragColumn?.column.name,\n reorderColumnItems(columns, orderedColumnNames),\n );\n }\n }, 300);\n }, [columns, dragColumn, onMoveColumn]);\n\n const handleColumnHeaderClick = useCallback(\n (evt: React.MouseEvent | React.KeyboardEvent) => {\n const headerCell = queryClosest(evt.target, \".vuuTableHeaderCell\");\n const colIdx = parseInt(headerCell?.dataset.index ?? \"-1\");\n const column = visibleColumnAtIndex(columns, colIdx);\n if (column && column.sortable !== false) {\n const isAdditive = evt.shiftKey;\n onSortColumn(column, isAdditive);\n }\n },\n [columns, onSortColumn],\n );\n\n return {\n dragColumn,\n onClick: handleColumnHeaderClick,\n onDragEnd: handleDragEnd,\n onDragStart: handleDragStart,\n setContainerRef: useForkRef(setContainerRef, rowRef),\n };\n};\n"],"names":["useRef","useState","useCallback","useMeasuredHeight","reorderColumnItems","queryClosest","visibleColumnAtIndex","useForkRef"],"mappings":"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"}
|
package/cjs/useCell.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var cx = require('clsx');
|
|
5
|
-
var react = require('react');
|
|
6
|
-
|
|
7
|
-
const useCell = (column, classBase, isHeader) => (
|
|
8
|
-
// TODO measure perf without the memo, might not be worth the cost
|
|
9
|
-
react.useMemo(() => {
|
|
10
|
-
const className = cx(classBase, column.className, {
|
|
11
|
-
vuuPinLeft: column.pin === "left",
|
|
12
|
-
vuuPinRight: column.pin === "right",
|
|
13
|
-
vuuEndPin: isHeader && column.pinnedWidth,
|
|
14
|
-
[`${classBase}-editable`]: column.editable,
|
|
15
|
-
[`${classBase}-right`]: column.align === "right"
|
|
16
|
-
});
|
|
17
|
-
const style = vuuUtils.getColumnStyle(column);
|
|
18
|
-
return {
|
|
19
|
-
className,
|
|
20
|
-
style
|
|
21
|
-
};
|
|
22
|
-
}, [classBase, column, isHeader])
|
|
23
|
-
);
|
|
24
|
-
|
|
25
|
-
exports.useCell = useCell;
|
|
26
|
-
//# sourceMappingURL=useCell.js.map
|
package/cjs/useCell.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useCell.js","sources":["../../../packages/vuu-table/src/useCell.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { getColumnStyle } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\n\nexport const useCell = (\n column: RuntimeColumnDescriptor,\n classBase: string,\n isHeader?: boolean,\n) =>\n // TODO measure perf without the memo, might not be worth the cost\n useMemo(() => {\n const className = cx(classBase, column.className, {\n vuuPinLeft: column.pin === \"left\",\n vuuPinRight: column.pin === \"right\",\n vuuEndPin: isHeader && column.pinnedWidth,\n [`${classBase}-editable`]: column.editable,\n [`${classBase}-right`]: column.align === \"right\",\n });\n\n const style = getColumnStyle(column);\n return {\n className,\n style,\n };\n }, [classBase, column, isHeader]);\n"],"names":["useMemo","getColumnStyle"],"mappings":";;;;;;AAKa,MAAA,OAAA,GAAU,CACrB,MAAA,EACA,SACA,EAAA,QAAA;AAAA;AAAA,EAGAA,cAAQ,MAAM;AACZ,IAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA;AAAA,MAChD,UAAA,EAAY,OAAO,GAAQ,KAAA,MAAA;AAAA,MAC3B,WAAA,EAAa,OAAO,GAAQ,KAAA,OAAA;AAAA,MAC5B,SAAA,EAAW,YAAY,MAAO,CAAA,WAAA;AAAA,MAC9B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,MAAO,CAAA,QAAA;AAAA,MAClC,CAAC,CAAG,EAAA,SAAS,CAAQ,MAAA,CAAA,GAAG,OAAO,KAAU,KAAA;AAAA,KAC1C,CAAA;AAED,IAAM,MAAA,KAAA,GAAQC,wBAAe,MAAM,CAAA;AACnC,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,MAAA,EAAQ,QAAQ,CAAC;AAAA;;;;"}
|