@vuu-ui/vuu-table 0.8.96 → 0.8.98
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/cjs/Table.css.js +1 -1
- package/cjs/Table.js +12 -0
- package/cjs/Table.js.map +1 -1
- package/cjs/bulk-edit/BulkEditRow.js.map +1 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +1 -1
- package/cjs/column-menu/ColumnMenu.js +2 -1
- package/cjs/column-menu/ColumnMenu.js.map +1 -1
- package/cjs/table-cell/TableCell.css.js +1 -1
- package/cjs/table-dom-utils.js.map +1 -1
- package/cjs/useCellFocus.js +76 -19
- package/cjs/useCellFocus.js.map +1 -1
- package/cjs/useKeyboardNavigation.js +56 -20
- package/cjs/useKeyboardNavigation.js.map +1 -1
- package/cjs/useTable.js +31 -2
- package/cjs/useTable.js.map +1 -1
- package/cjs/useTableModel.js +7 -7
- package/cjs/useTableModel.js.map +1 -1
- package/cjs/useTableScroll.js +116 -62
- package/cjs/useTableScroll.js.map +1 -1
- package/esm/Table.css.js +1 -1
- package/esm/Table.js +12 -0
- package/esm/Table.js.map +1 -1
- package/esm/bulk-edit/BulkEditRow.js.map +1 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +1 -1
- package/esm/column-menu/ColumnMenu.js +2 -1
- package/esm/column-menu/ColumnMenu.js.map +1 -1
- package/esm/table-cell/TableCell.css.js +1 -1
- package/esm/table-dom-utils.js.map +1 -1
- package/esm/useCellFocus.js +78 -21
- package/esm/useCellFocus.js.map +1 -1
- package/esm/useKeyboardNavigation.js +56 -20
- package/esm/useKeyboardNavigation.js.map +1 -1
- package/esm/useTable.js +31 -2
- package/esm/useTable.js.map +1 -1
- package/esm/useTableModel.js +7 -7
- package/esm/useTableModel.js.map +1 -1
- package/esm/useTableScroll.js +116 -62
- package/esm/useTableScroll.js.map +1 -1
- package/package.json +9 -9
- package/types/table-dom-utils.d.ts +1 -4
- package/types/useCellFocus.d.ts +7 -4
- package/types/useKeyboardNavigation.d.ts +5 -3
- package/types/useTable.d.ts +2 -0
- package/types/useTableScroll.d.ts +15 -5
package/cjs/Table.css.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var tableCss = ".vuuTable {\n --vuu-table-footer-height: 0px;\n --vuu-table-cell-outlineWidth: 1px;\n --table-height: var(--measured-px-height);\n --table-width: var(--measured-px-width);\n --vuu-table-next-selection-bookend-width: 4px;\n --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n --vuu-table-col-heading-height: 25px;\n --columnResizer-color: transparent;\n --row-height: var(\n --row-height-prop,\n var(--vuu-table-row-height, var(--salt-size-base))\n );\n\n --cell-borderColor: transparent;\n --row-borderColor: var(--row-background);\n --table-background: var(--salt-container-primary-background);\n\n background: var(--table-background);\n font-family: var(\n --vuuTable-fontFamily,\n var(--salt-typography-fontFamily, sans-serif)\n );\n font-size: var(--vuuTable-fontSize, var(--salt-text-fontSize, 12px));\n position: relative;\n user-select: none;\n\n &.vuuTable-viewportRowLimit {\n height: fit-content;\n /* With a viewportRowLimit, table is content sized, not container sized. */\n .vuuTable-contentContainer {\n height: calc(var(--measured-px-height) + var(--total-header-height));\n }\n .vuuTable-scrollbarContainer {\n height: calc(\n var(--measured-px-height) + var(--horizontal-scrollbar-height)\n );\n }\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n\n &.vuuTable-maxViewportRowLimit {\n /* With a maxVviewportRowLimit, table is content sized, not container sized. */\n height: fit-content;\n padding-bottom: var(--horizontal-scrollbar-height);\n\n .vuuTable-contentContainer {\n height: min(\n calc(var(--measured-px-height) + var(--total-header-height)),\n calc(var(--content-height) + var(--total-header-height))\n );\n }\n .vuuTable-scrollbarContainer {\n height: min(\n calc(var(--measured-px-height) + var(--horizontal-scrollbar-height)),\n calc(var(--content-height) + var(--horizontal-scrollbar-height))\n );\n }\n\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n}\n\n.vuuTable-zebra {\n --row-background-even: var(--salt-palette-neutral-secondary-background);\n}\n\n.vuuTable-colLines {\n --cell-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-rowLines {\n --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n border-bottom: none !important;\n border-top: none !important;\n height: var(--viewport-body-height);\n left: 0px;\n overflow: auto;\n position: absolute;\n top: var(--total-header-height);\n width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n height: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n border-radius: 10px;\n border: 2px solid rgba(0, 0, 0, 0);\n background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n position: absolute;\n width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n background: var(--table-background);\n height: calc(\n 100% - var(--horizontal-scrollbar-height) - var(--vuu-table-footer-height)\n );\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n.vuuTable-table {\n position: absolute;\n top: 0;\n left: 0;\n table-layout: fixed;\n width: var(--content-width);\n margin: 0;\n border: none;\n border-collapse: separate;\n border-spacing: 0;\n}\n\n.vuuTable-body {\n height: var(--content-height);\n position: relative;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n background-color: inherit;\n position: sticky;\n z-index: 1;\n}\n\n.vuuTable-col-headings {\n background-color: var(\n --vuuTableColHeadings-background,\n var(--table-background)\n );\n padding: 0 var(--vuu-table-next-selection-bookend-width, 0);\n position: sticky;\n top: 0;\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n}\n\n.vuuTable-col-headings:hover {\n --columnResizer-height: var(--vuu-table-col-header-height);\n --columnResizer-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-heading {\n height: var(--vuu-table-col-heading-height);\n}\n\n.vuuTable-col-headers {\n background-color: var(\n --vuuTableColHeadings-background,\n var(--vuuTableColHeadings-background)\n );\n border-bottom: solid 1px\n var(\n --vuuTableColHeaders-borderColor,\n var(--salt-separable-secondary-borderColor)\n );\n color: var(--salt-content-secondary-foreground);\n height: var(--vuu-table-col-header-height);\n white-space: nowrap;\n\n .vuuDraggable-spacer {\n border-bottom: solid 1px #ccc;\n height: var(--vuu-table-col-header-height);\n }\n}\n\n.sizer-cell {\n border: none !important;\n height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n --cell-borderColor: transparent;\n --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n --vuuTableHeaderCell-background: var(--salt-container-secondary-background);\n}\n.vuuDraggable-vuuTable {\n --row-height: 25px;\n}\n\n.vuuTable-pagination {\n --vuu-table-footer-height: 32px;\n .vuuTable-col-headings {\n position: relative;\n }\n\n .vuuTable-body {\n height: calc(var(--content-height) - var(--total-header-height));\n position: relative;\n }\n\n .vuuTableRow {\n position: relative;\n top: auto;\n }\n}\n\n.vuuTable-footer {\n align-items: center;\n display: flex;\n height: var(--vuu-table-footer-height);\n justify-content: flex-end;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n}\n";
|
|
3
|
+
var tableCss = ".vuuTable {\n --vuu-table-footer-height: 0px;\n --vuu-table-cell-outlineWidth: 1px;\n --table-height: var(--measured-px-height);\n --table-width: var(--measured-px-width);\n --vuu-table-next-selection-bookend-width: 4px;\n --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n --vuu-table-col-heading-height: 25px;\n --columnResizer-color: transparent;\n --row-height: var(\n --row-height-prop,\n var(--vuu-table-row-height, var(--salt-size-base))\n );\n\n --cell-borderColor: transparent;\n --row-borderColor: var(--row-background);\n --table-background: var(--salt-container-primary-background);\n\n background: var(--table-background);\n font-family: var(\n --vuuTable-fontFamily,\n var(--salt-typography-fontFamily, sans-serif)\n );\n font-size: var(--vuuTable-fontSize, var(--salt-text-fontSize, 12px));\n position: relative;\n user-select: none;\n\n &.vuuTable-viewportRowLimit {\n height: fit-content;\n /* With a viewportRowLimit, table is content sized, not container sized. */\n .vuuTable-contentContainer {\n height: calc(var(--measured-px-height) + var(--total-header-height));\n }\n .vuuTable-scrollbarContainer {\n height: calc(\n var(--measured-px-height) + var(--horizontal-scrollbar-height)\n );\n }\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n\n &.vuuTable-maxViewportRowLimit {\n /* With a maxVviewportRowLimit, table is content sized, not container sized. */\n height: fit-content;\n padding-bottom: var(--horizontal-scrollbar-height);\n\n .vuuTable-contentContainer {\n height: min(\n calc(var(--measured-px-height) + var(--total-header-height)),\n calc(var(--content-height) + var(--total-header-height))\n );\n }\n .vuuTable-scrollbarContainer {\n height: min(\n calc(var(--measured-px-height) + var(--horizontal-scrollbar-height)),\n calc(var(--content-height) + var(--horizontal-scrollbar-height))\n );\n }\n\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n}\n\n.vuuTable-zebra {\n --row-background-even: var(--salt-palette-neutral-secondary-background);\n}\n\n.vuuTable-colLines {\n --cell-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-rowLines {\n --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n border-bottom: none !important;\n border-top: none !important;\n height: var(--viewport-body-height);\n left: 0px;\n overflow: auto;\n position: absolute;\n top: var(--total-header-height);\n width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n height: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n border-radius: 10px;\n border: 2px solid rgba(0, 0, 0, 0);\n background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n position: absolute;\n width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n background: var(--table-background);\n height: calc(\n 100% - var(--horizontal-scrollbar-height) - var(--vuu-table-footer-height)\n );\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n.vuuTable-table {\n position: absolute;\n top: 0;\n left: 0;\n table-layout: fixed;\n width: var(--content-width);\n margin: 0;\n border: none;\n border-collapse: separate;\n border-spacing: 0;\n}\n\n.vuuTable-body {\n height: var(--content-height);\n position: relative;\n}\n\n.vuuTable-focusCellPlaceholder {\n height: var(--row-height);\n position: absolute;\n width: 50px;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n background-color: inherit;\n position: sticky;\n z-index: 1;\n}\n\n.vuuTable-col-headings {\n background-color: var(\n --vuuTableColHeadings-background,\n var(--table-background)\n );\n padding: 0 var(--vuu-table-next-selection-bookend-width, 0);\n position: sticky;\n top: 0;\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n}\n\n.vuuTable-col-headings:hover {\n --columnResizer-height: var(--vuu-table-col-header-height);\n --columnResizer-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-heading {\n height: var(--vuu-table-col-heading-height);\n}\n\n.vuuTable-col-headers {\n background-color: var(\n --vuuTableColHeadings-background,\n var(--vuuTableColHeadings-background)\n );\n border-bottom: solid 1px\n var(\n --vuuTableColHeaders-borderColor,\n var(--salt-separable-secondary-borderColor)\n );\n color: var(--salt-content-secondary-foreground);\n height: var(--vuu-table-col-header-height);\n white-space: nowrap;\n\n .vuuDraggable-spacer {\n border-bottom: solid 1px #ccc;\n height: var(--vuu-table-col-header-height);\n }\n}\n\n.sizer-cell {\n border: none !important;\n height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n --cell-borderColor: transparent;\n --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n --vuuTableHeaderCell-background: var(--salt-container-secondary-background);\n}\n.vuuDraggable-vuuTable {\n --row-height: 25px;\n}\n\n.vuuTable-pagination {\n --vuu-table-footer-height: 32px;\n .vuuTable-col-headings {\n position: relative;\n }\n\n .vuuTable-body {\n height: calc(var(--content-height) - var(--total-header-height));\n position: relative;\n }\n\n .vuuTableRow {\n position: relative;\n top: auto;\n }\n}\n\n.vuuTable-footer {\n align-items: center;\n display: flex;\n height: var(--vuu-table-footer-height);\n justify-content: flex-end;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = tableCss;
|
|
6
6
|
//# sourceMappingURL=Table.css.js.map
|
package/cjs/Table.js
CHANGED
|
@@ -58,6 +58,8 @@ const TableCore = ({
|
|
|
58
58
|
columns,
|
|
59
59
|
data,
|
|
60
60
|
draggableRow,
|
|
61
|
+
focusCellPlaceholderKeyDown,
|
|
62
|
+
focusCellPlaceholderRef,
|
|
61
63
|
getRowOffset,
|
|
62
64
|
handleContextMenuAction,
|
|
63
65
|
headerHeight,
|
|
@@ -140,6 +142,7 @@ const TableCore = ({
|
|
|
140
142
|
className: `${classBase}-scrollbarContainer`,
|
|
141
143
|
ref: scrollProps.scrollbarContainerRef,
|
|
142
144
|
style: cssVariables,
|
|
145
|
+
tabIndex: -1,
|
|
143
146
|
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-scrollbarContent` })
|
|
144
147
|
}
|
|
145
148
|
) : null,
|
|
@@ -195,6 +198,15 @@ const TableCore = ({
|
|
|
195
198
|
},
|
|
196
199
|
data2[RENDER_IDX]
|
|
197
200
|
)),
|
|
201
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
202
|
+
"div",
|
|
203
|
+
{
|
|
204
|
+
className: `${classBase}-focusCellPlaceholder`,
|
|
205
|
+
onKeyDown: focusCellPlaceholderKeyDown,
|
|
206
|
+
ref: focusCellPlaceholderRef,
|
|
207
|
+
tabIndex: -1
|
|
208
|
+
}
|
|
209
|
+
),
|
|
198
210
|
cellBlock
|
|
199
211
|
] }) : null
|
|
200
212
|
]
|
package/cjs/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../src/Table.tsx"],"sourcesContent":["import {\n DataSource,\n SchemaColumn,\n SelectionChangeHandler,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-popups\";\nimport {\n CustomHeader,\n RowProps,\n TableConfig,\n TableConfigChangeHandler,\n TableRowClickHandler,\n TableRowSelectHandler,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { DragDropState } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n DragStartHandler,\n MeasuredContainer,\n MeasuredContainerProps,\n MeasuredSize,\n dragStrategy,\n reduceSizeHeight,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { metadataKeys, useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n CSSProperties,\n FC,\n ForwardedRef,\n RefObject,\n forwardRef,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Row as DefaultRow, RowProxy } from \"./Row\";\nimport { PaginationControl } from \"./pagination\";\nimport { TableHeader } from \"./table-header\";\nimport { useMeasuredHeight } from \"./useMeasuredHeight\";\nimport { useTable } from \"./useTable\";\nimport { ScrollingAPI } from \"./useTableScroll\";\n\nimport tableCss from \"./Table.css\";\nimport { TableCellBlock } from \"./cell-block/cellblock-utils\";\n\nconst classBase = \"vuuTable\";\n\nconst { IDX, RENDER_IDX } = metadataKeys;\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\";\n\nexport interface TableProps\n extends Omit<MeasuredContainerProps, \"onDragStart\" | \"onDrop\" | \"onSelect\"> {\n Row?: FC<RowProps>;\n /**\n * Allow a block of cells to be selected. Typically to be copied.\n */\n allowCellBlockSelection?: boolean;\n allowConfigEditing?: boolean;\n /**\n * Allow column headers to be dragged to re-arrange\n */\n allowDragColumnHeader?: boolean;\n /**\n * Allow rows to be draggable\n */\n allowDragDrop?: boolean | dragStrategy;\n\n /**\n * required if a fully featured column picker is to be available\n */\n availableColumns?: SchemaColumn[];\n /**\n * Provide configuration settings for Table. At minimun, column\n * descriptors must be provided.\n */\n config: TableConfig;\n dataSource: DataSource;\n disableFocus?: boolean;\n /**\n * Allows additional custom element(s) to be embedded immediately below column headers.\n * Could be used to present inline filters for example.\n * Accepts either a React Element or a Function Component or an array of these. If a React\n * Function Component is used, it will be passed the props described in BaseRowProps.\n */\n customHeader?: CustomHeader | CustomHeader[];\n /**\n * Defined how focus navigation within data cells will be handled by table.\n * Default is cell.\n */\n highlightedIndex?: number;\n\n /**\n * Behaves in most respects like viewportRowLimit except that, when there are fewer\n * rows available than the limit set here, the Table height will reduce. This can be\n * useful where a Table is used in a dropdown control.\n */\n maxViewportRowLimit?: number;\n\n /**\n * Determines bahaviour of keyboard navigation , either row focused or cell focused.\n */\n navigationStyle?: TableNavigationStyle;\n /**\n * required if a fully featured column picker is to be available.\n * Available columns can be changed by the addition or removal of\n * one or more calculated columns.\n */\n onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n /**\n * This callback will be invoked any time a config attribute of TableConfig\n * is changed. By persisting this value and providing it to the Table as a\n * prop, table state can be persisted across sessions.\n */\n onConfigChange?: TableConfigChangeHandler;\n onDragStart?: DragStartHandler;\n onDrop?: (dragDropState: DragDropState) => void;\n\n onHighlight?: (idx: number) => void;\n /**\n * callback invoked when user 'clicks' a table row. CLick triggered either\n * via mouse click or keyboard (default ENTER);\n */\n onRowClick?: TableRowClickHandler;\n onSelect?: TableRowSelectHandler;\n /**\n * Triggered when a block of cells is selected. CellBlock selection can be\n * effected with either mouse or keyboard.\n * - mouse: hold down mouse and drag over selection area\n * - keyboard: press and hold shift key from start cell, then use arrow keys\n * to extend selection block.\n *\n * This callback is invoked when mouse is released or shift key released.\n */\n onSelectCellBlock?: (cellBlock: TableCellBlock) => void;\n\n onSelectionChange?: SelectionChangeHandler;\n renderBufferSize?: number;\n /**\n * Pixel height of rows. If specified here, this will take precedence over CSS\n * values and Table will not respond to density changes.\n */\n rowHeight?: number;\n /**\n * imperative API for scrolling table\n */\n scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n\n /**\n * Selection Bookends style the left and right edge of a selection block.\n * They are optional, value defaults to zero.\n * TODO this should just live in CSS\n */\n selectionBookendWidth?: number;\n /**\n * Selection behaviour for Table:\n * `none` selection disabled\n * `single` no more than one row may be selected\n * `extended` (default) multiple rows can be selected\n * `checkbox` same behaviour as extended, with checkbox column for selection\n */\n selectionModel?: TableSelectionModel;\n /**\n * if false, table rendered without headers. Useful when table is being included in a\n * composite component.\n */\n showColumnHeaders?: boolean;\n /**\n * if false, column headers will not display menu icon. Menu items are still available\n * from contexct menu\n */\n showColumnHeaderMenus?: boolean;\n /**\n * if true, pagination will be used to navigate data, scrollbars will not be rendered\n */\n showPaginationControls?: boolean;\n\n /**\n * As an alternative to sizing the Table height via CSS or via an explicit height value,\n * specify the number of rows to be displayed within the Viewport. The actual height\n * will then be the product of viewportRowLimit and rowHeight. Row Height will be\n * determined in the usual way, it can be specified explicitly in a prop or set via\n * CSS. If both explicit height and viewportRowLimit are provided by props, rowHeight\n * will be derived from these. Do not pass props for all three values - height,\n * rowHeight and viewportRowLimit. That will be rejected.\n * Use maxViewportRowLimit rather than viewportRowLimit if the height of the table\n * should be reduced when fewer rows are actually available than the limit specified.\n */\n viewportRowLimit?: number;\n}\n\nconst TableCore = ({\n Row = DefaultRow,\n allowCellBlockSelection,\n allowDragColumnHeader = true,\n allowDragDrop,\n availableColumns,\n config,\n containerRef,\n customHeader,\n dataSource,\n disableFocus = false,\n highlightedIndex: highlightedIndexProp,\n id: idProp,\n navigationStyle = \"cell\",\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onHighlight,\n onRowClick: onRowClickProp,\n onSelect,\n onSelectCellBlock,\n onSelectionChange,\n renderBufferSize = 0,\n rowHeight,\n scrollingApiRef,\n selectionModel = \"extended\",\n showColumnHeaders = true,\n showColumnHeaderMenus = true,\n showPaginationControls,\n size,\n}: Omit<\n TableProps,\n \"maxViewportRowLimit\" | \"rowHeight\" | \"viewportRowLimit\"\n> & {\n containerRef: RefObject<HTMLDivElement>;\n rowHeight: number;\n size: MeasuredSize;\n}) => {\n const id = useId(idProp);\n const {\n cellBlock,\n columnMap,\n columns,\n data,\n draggableRow,\n getRowOffset,\n handleContextMenuAction,\n headerHeight,\n headings,\n highlightedIndex,\n menuBuilder,\n onDataEdited,\n onHeaderHeightMeasured,\n onMoveColumn,\n onMoveGroupColumn,\n onRemoveGroupColumn,\n onResizeColumn,\n onRowClick,\n onSortColumn,\n onToggleGroup,\n rowClassNameGenerator,\n scrollProps,\n tableAttributes,\n tableBodyRef,\n tableConfig,\n viewportMeasurements,\n ...tableProps\n } = useTable({\n allowCellBlockSelection,\n allowDragDrop,\n availableColumns,\n config,\n containerRef,\n dataSource,\n disableFocus,\n highlightedIndex: highlightedIndexProp,\n id,\n navigationStyle,\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onHighlight,\n onRowClick: onRowClickProp,\n onSelect,\n onSelectCellBlock,\n onSelectionChange,\n renderBufferSize,\n rowHeight,\n scrollingApiRef,\n selectionModel,\n showColumnHeaders,\n showPaginationControls,\n size,\n });\n\n const contentContainerClassName = cx(`${classBase}-contentContainer`, {\n [`${classBase}-colLines`]: tableAttributes.columnSeparators,\n [`${classBase}-rowLines`]: tableAttributes.rowSeparators,\n [`${classBase}-zebra`]: tableAttributes.zebraStripes,\n });\n\n const cssScrollbarSize = {\n \"--horizontal-scrollbar-height\": `${viewportMeasurements.horizontalScrollbarHeight}px`,\n \"--vertical-scrollbar-width\": `${viewportMeasurements.verticalScrollbarWidth}px`,\n } as CSSProperties;\n\n const cssVariables = {\n ...cssScrollbarSize,\n \"--content-height\": `${viewportMeasurements.contentHeight}px`,\n \"--content-width\": `${viewportMeasurements.contentWidth}px`,\n \"--pinned-width-left\": `${viewportMeasurements.pinnedWidthLeft}px`,\n \"--pinned-width-right\": `${viewportMeasurements.pinnedWidthRight}px`,\n \"--total-header-height\": `${headerHeight}px`,\n \"--viewport-body-height\": `${viewportMeasurements.viewportBodyHeight}px`,\n } as CSSProperties;\n\n const headersReady = showColumnHeaders === false || headerHeight > 0;\n const readyToRenderTableBody = headersReady && data.length > 0;\n\n return (\n <ContextMenuProvider\n menuActionHandler={handleContextMenuAction}\n menuBuilder={menuBuilder}\n >\n {showPaginationControls !== true ? (\n <div\n className={`${classBase}-scrollbarContainer`}\n ref={scrollProps.scrollbarContainerRef}\n style={cssVariables}\n >\n <div className={`${classBase}-scrollbarContent`} />\n </div>\n ) : null}\n <div\n className={contentContainerClassName}\n ref={scrollProps.contentContainerRef}\n style={cssVariables}\n >\n <div\n {...tableProps}\n className={`${classBase}-table`}\n role=\"table\"\n tabIndex={disableFocus ? undefined : -1}\n >\n {showColumnHeaders ? (\n <TableHeader\n allowDragColumnHeader={allowDragColumnHeader}\n columns={scrollProps.columnsWithinViewport}\n customHeader={customHeader}\n headings={headings}\n onHeightMeasured={onHeaderHeightMeasured}\n onMoveColumn={onMoveColumn}\n onMoveGroupColumn={onMoveGroupColumn}\n onRemoveGroupColumn={onRemoveGroupColumn}\n onResizeColumn={onResizeColumn}\n onSortColumn={onSortColumn}\n showColumnHeaderMenus={showColumnHeaderMenus}\n tableConfig={tableConfig}\n tableId={id}\n virtualColSpan={scrollProps.virtualColSpan}\n />\n ) : null}\n {readyToRenderTableBody ? (\n <div className={`${classBase}-body`} ref={tableBodyRef}>\n {data.map((data) => (\n <Row\n aria-rowindex={data[0] + 1}\n classNameGenerator={rowClassNameGenerator}\n columnMap={columnMap}\n columns={scrollProps.columnsWithinViewport}\n highlighted={highlightedIndex === data[IDX]}\n key={data[RENDER_IDX]}\n onClick={onRowClick}\n onDataEdited={onDataEdited}\n row={data}\n offset={showPaginationControls ? 0 : getRowOffset(data)}\n onToggleGroup={onToggleGroup}\n virtualColSpan={scrollProps.virtualColSpan}\n zebraStripes={tableAttributes.zebraStripes}\n />\n ))}\n {cellBlock}\n </div>\n ) : null}\n </div>\n </div>\n {/* \n This keeps the heights of content container and scrollbar container aligned for\n cases where we rely on height: fit-content. (ScrollbarContainer isn't taken into \n account because its absolutely positioned).\n */}\n <div\n className={`${classBase}-scrollbarFiller`}\n style={cssScrollbarSize}\n />\n {draggableRow}\n </ContextMenuProvider>\n );\n};\n\nexport const Table = forwardRef(function Table(\n {\n Row,\n allowCellBlockSelection,\n allowDragColumnHeader,\n allowDragDrop,\n availableColumns,\n className: classNameProp,\n config,\n customHeader,\n dataSource,\n disableFocus,\n height,\n highlightedIndex,\n id,\n maxViewportRowLimit,\n navigationStyle,\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onHighlight,\n onRowClick,\n onSelect,\n onSelectCellBlock,\n onSelectionChange,\n renderBufferSize,\n rowHeight: rowHeightProp,\n scrollingApiRef,\n selectionModel,\n showColumnHeaders,\n showColumnHeaderMenus,\n showPaginationControls,\n style: styleProp,\n viewportRowLimit,\n width,\n ...htmlAttributes\n }: TableProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table\",\n css: tableCss,\n window: targetWindow,\n });\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [size, _setSize] = useState<MeasuredSize>();\n // TODO this will rerender entire table, move footer into seperate component\n const { measuredHeight: rowHeight, measuredRef: rowRef } = useMeasuredHeight({\n height: rowHeightProp,\n });\n const { measuredHeight: footerHeight, measuredRef: footerRef } =\n useMeasuredHeight({});\n\n const rowLimit = maxViewportRowLimit ?? viewportRowLimit;\n\n if (config === undefined) {\n throw Error(\n \"vuu Table requires config prop. Minimum config is list of Column Descriptors\",\n );\n }\n if (dataSource === undefined) {\n throw Error(\"vuu Table requires dataSource prop\");\n }\n\n if (showPaginationControls && renderBufferSize !== undefined) {\n console.warn(\n `Table: When pagination controls are used, renderBufferSize is ignored`,\n );\n }\n\n if (rowLimit && height && rowHeightProp) {\n console.warn(\n `Table: when viewportRowLimit, rowHeight and height are used in combination, height is ignored`,\n );\n height = rowLimit * rowHeightProp;\n } else if (rowLimit && rowHeightProp) {\n height = rowLimit * rowHeightProp;\n } else if (rowLimit) {\n height = rowLimit * rowHeight;\n }\n\n const sizeRef = useRef<MeasuredSize>();\n const setSize = useCallback(\n (size: MeasuredSize) => {\n if (viewportRowLimit && !rowHeight) {\n sizeRef.current = size;\n } else if (\n size.height !== sizeRef.current?.height ||\n size.width !== sizeRef.current?.width\n ) {\n _setSize(size);\n }\n },\n [rowHeight, viewportRowLimit],\n );\n useMemo(() => {\n if (sizeRef.current && rowHeight) {\n const size = {\n ...sizeRef.current,\n height: rowHeight * (viewportRowLimit as number),\n };\n sizeRef.current = size;\n _setSize(size);\n }\n }, [rowHeight, viewportRowLimit]);\n\n // TODO render TableHeader here and measure before row construction begins\n // TODO we could have MeasuredContainer render a Provider and make size available via a context hook ?\n return (\n <MeasuredContainer\n {...htmlAttributes}\n className={cx(classBase, classNameProp, {\n [`${classBase}-pagination`]: showPaginationControls,\n [`${classBase}-maxViewportRowLimit`]: maxViewportRowLimit,\n [`${classBase}-viewportRowLimit`]: viewportRowLimit,\n })}\n height={height}\n id={id}\n onResize={setSize}\n ref={useForkRef(containerRef, forwardedRef)}\n style={\n {\n \"--row-height-prop\": rowHeight > 0 ? `${rowHeight}px` : undefined,\n } as CSSProperties\n }\n width={width}\n >\n <RowProxy ref={rowRef} height={rowHeightProp} />\n {size &&\n rowHeight &&\n (footerHeight || showPaginationControls !== true) ? (\n <TableCore\n Row={Row}\n allowCellBlockSelection={allowCellBlockSelection}\n allowDragColumnHeader={allowDragColumnHeader}\n allowDragDrop={allowDragDrop}\n availableColumns={availableColumns}\n config={config}\n containerRef={containerRef}\n customHeader={customHeader}\n dataSource={dataSource}\n disableFocus={disableFocus}\n highlightedIndex={highlightedIndex}\n id={id}\n navigationStyle={navigationStyle}\n onAvailableColumnsChange={onAvailableColumnsChange}\n onConfigChange={onConfigChange}\n onDragStart={onDragStart}\n onDrop={onDrop}\n onHighlight={onHighlight}\n onRowClick={onRowClick}\n onSelect={onSelect}\n onSelectCellBlock={onSelectCellBlock}\n onSelectionChange={onSelectionChange}\n renderBufferSize={\n showPaginationControls ? 0 : Math.max(5, renderBufferSize ?? 0)\n }\n rowHeight={rowHeight}\n scrollingApiRef={scrollingApiRef}\n selectionModel={selectionModel}\n showColumnHeaders={showColumnHeaders}\n showColumnHeaderMenus={showColumnHeaderMenus}\n showPaginationControls={showPaginationControls}\n size={reduceSizeHeight(size, footerHeight)}\n />\n ) : null}\n {showPaginationControls ? (\n <div className={`${classBase}-footer`} ref={footerRef}>\n <PaginationControl dataSource={dataSource} />\n </div>\n ) : null}\n </MeasuredContainer>\n );\n});\n"],"names":["metadataKeys","Row","DefaultRow","useId","useTable","jsxs","ContextMenuProvider","jsx","TableHeader","data","forwardRef","Table","useWindow","useComponentCssInjection","tableCss","useRef","useState","useMeasuredHeight","useCallback","size","useMemo","MeasuredContainer","useForkRef","RowProxy","reduceSizeHeight","PaginationControl"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../src/Table.tsx"],"sourcesContent":["import {\n DataSource,\n SchemaColumn,\n SelectionChangeHandler,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-popups\";\nimport {\n CustomHeader,\n RowProps,\n TableConfig,\n TableConfigChangeHandler,\n TableRowClickHandler,\n TableRowSelectHandler,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { DragDropState } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n DragStartHandler,\n MeasuredContainer,\n MeasuredContainerProps,\n MeasuredSize,\n dragStrategy,\n reduceSizeHeight,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { metadataKeys, useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n CSSProperties,\n FC,\n ForwardedRef,\n RefObject,\n forwardRef,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Row as DefaultRow, RowProxy } from \"./Row\";\nimport { PaginationControl } from \"./pagination\";\nimport { TableHeader } from \"./table-header\";\nimport { useMeasuredHeight } from \"./useMeasuredHeight\";\nimport { useTable } from \"./useTable\";\nimport { ScrollingAPI } from \"./useTableScroll\";\n\nimport tableCss from \"./Table.css\";\nimport { TableCellBlock } from \"./cell-block/cellblock-utils\";\n\nconst classBase = \"vuuTable\";\n\nconst { IDX, RENDER_IDX } = metadataKeys;\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\";\n\nexport interface TableProps\n extends Omit<MeasuredContainerProps, \"onDragStart\" | \"onDrop\" | \"onSelect\"> {\n Row?: FC<RowProps>;\n /**\n * Allow a block of cells to be selected. Typically to be copied.\n */\n allowCellBlockSelection?: boolean;\n allowConfigEditing?: boolean;\n /**\n * Allow column headers to be dragged to re-arrange\n */\n allowDragColumnHeader?: boolean;\n /**\n * Allow rows to be draggable\n */\n allowDragDrop?: boolean | dragStrategy;\n\n /**\n * required if a fully featured column picker is to be available\n */\n availableColumns?: SchemaColumn[];\n /**\n * Provide configuration settings for Table. At minimun, column\n * descriptors must be provided.\n */\n config: TableConfig;\n dataSource: DataSource;\n disableFocus?: boolean;\n /**\n * Allows additional custom element(s) to be embedded immediately below column headers.\n * Could be used to present inline filters for example.\n * Accepts either a React Element or a Function Component or an array of these. If a React\n * Function Component is used, it will be passed the props described in BaseRowProps.\n */\n customHeader?: CustomHeader | CustomHeader[];\n /**\n * Defined how focus navigation within data cells will be handled by table.\n * Default is cell.\n */\n highlightedIndex?: number;\n\n /**\n * Behaves in most respects like viewportRowLimit except that, when there are fewer\n * rows available than the limit set here, the Table height will reduce. This can be\n * useful where a Table is used in a dropdown control.\n */\n maxViewportRowLimit?: number;\n\n /**\n * Determines bahaviour of keyboard navigation , either row focused or cell focused.\n */\n navigationStyle?: TableNavigationStyle;\n /**\n * required if a fully featured column picker is to be available.\n * Available columns can be changed by the addition or removal of\n * one or more calculated columns.\n */\n onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n /**\n * This callback will be invoked any time a config attribute of TableConfig\n * is changed. By persisting this value and providing it to the Table as a\n * prop, table state can be persisted across sessions.\n */\n onConfigChange?: TableConfigChangeHandler;\n onDragStart?: DragStartHandler;\n onDrop?: (dragDropState: DragDropState) => void;\n\n onHighlight?: (idx: number) => void;\n /**\n * callback invoked when user 'clicks' a table row. CLick triggered either\n * via mouse click or keyboard (default ENTER);\n */\n onRowClick?: TableRowClickHandler;\n onSelect?: TableRowSelectHandler;\n /**\n * Triggered when a block of cells is selected. CellBlock selection can be\n * effected with either mouse or keyboard.\n * - mouse: hold down mouse and drag over selection area\n * - keyboard: press and hold shift key from start cell, then use arrow keys\n * to extend selection block.\n *\n * This callback is invoked when mouse is released or shift key released.\n */\n onSelectCellBlock?: (cellBlock: TableCellBlock) => void;\n\n onSelectionChange?: SelectionChangeHandler;\n renderBufferSize?: number;\n /**\n * Pixel height of rows. If specified here, this will take precedence over CSS\n * values and Table will not respond to density changes.\n */\n rowHeight?: number;\n /**\n * imperative API for scrolling table\n */\n scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n\n /**\n * Selection Bookends style the left and right edge of a selection block.\n * They are optional, value defaults to zero.\n * TODO this should just live in CSS\n */\n selectionBookendWidth?: number;\n /**\n * Selection behaviour for Table:\n * `none` selection disabled\n * `single` no more than one row may be selected\n * `extended` (default) multiple rows can be selected\n * `checkbox` same behaviour as extended, with checkbox column for selection\n */\n selectionModel?: TableSelectionModel;\n /**\n * if false, table rendered without headers. Useful when table is being included in a\n * composite component.\n */\n showColumnHeaders?: boolean;\n /**\n * if false, column headers will not display menu icon. Menu items are still available\n * from contexct menu\n */\n showColumnHeaderMenus?: boolean;\n /**\n * if true, pagination will be used to navigate data, scrollbars will not be rendered\n */\n showPaginationControls?: boolean;\n\n /**\n * As an alternative to sizing the Table height via CSS or via an explicit height value,\n * specify the number of rows to be displayed within the Viewport. The actual height\n * will then be the product of viewportRowLimit and rowHeight. Row Height will be\n * determined in the usual way, it can be specified explicitly in a prop or set via\n * CSS. If both explicit height and viewportRowLimit are provided by props, rowHeight\n * will be derived from these. Do not pass props for all three values - height,\n * rowHeight and viewportRowLimit. That will be rejected.\n * Use maxViewportRowLimit rather than viewportRowLimit if the height of the table\n * should be reduced when fewer rows are actually available than the limit specified.\n */\n viewportRowLimit?: number;\n}\n\nconst TableCore = ({\n Row = DefaultRow,\n allowCellBlockSelection,\n allowDragColumnHeader = true,\n allowDragDrop,\n availableColumns,\n config,\n containerRef,\n customHeader,\n dataSource,\n disableFocus = false,\n highlightedIndex: highlightedIndexProp,\n id: idProp,\n navigationStyle = \"cell\",\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onHighlight,\n onRowClick: onRowClickProp,\n onSelect,\n onSelectCellBlock,\n onSelectionChange,\n renderBufferSize = 0,\n rowHeight,\n scrollingApiRef,\n selectionModel = \"extended\",\n showColumnHeaders = true,\n showColumnHeaderMenus = true,\n showPaginationControls,\n size,\n}: Omit<\n TableProps,\n \"maxViewportRowLimit\" | \"rowHeight\" | \"viewportRowLimit\"\n> & {\n containerRef: RefObject<HTMLDivElement>;\n rowHeight: number;\n size: MeasuredSize;\n}) => {\n const id = useId(idProp);\n const {\n cellBlock,\n columnMap,\n columns,\n data,\n draggableRow,\n focusCellPlaceholderKeyDown,\n focusCellPlaceholderRef,\n getRowOffset,\n handleContextMenuAction,\n headerHeight,\n headings,\n highlightedIndex,\n menuBuilder,\n onDataEdited,\n onHeaderHeightMeasured,\n onMoveColumn,\n onMoveGroupColumn,\n onRemoveGroupColumn,\n onResizeColumn,\n onRowClick,\n onSortColumn,\n onToggleGroup,\n rowClassNameGenerator,\n scrollProps,\n tableAttributes,\n tableBodyRef,\n tableConfig,\n viewportMeasurements,\n ...tableProps\n } = useTable({\n allowCellBlockSelection,\n allowDragDrop,\n availableColumns,\n config,\n containerRef,\n dataSource,\n disableFocus,\n highlightedIndex: highlightedIndexProp,\n id,\n navigationStyle,\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onHighlight,\n onRowClick: onRowClickProp,\n onSelect,\n onSelectCellBlock,\n onSelectionChange,\n renderBufferSize,\n rowHeight,\n scrollingApiRef,\n selectionModel,\n showColumnHeaders,\n showPaginationControls,\n size,\n });\n\n const contentContainerClassName = cx(`${classBase}-contentContainer`, {\n [`${classBase}-colLines`]: tableAttributes.columnSeparators,\n [`${classBase}-rowLines`]: tableAttributes.rowSeparators,\n [`${classBase}-zebra`]: tableAttributes.zebraStripes,\n });\n\n const cssScrollbarSize = {\n \"--horizontal-scrollbar-height\": `${viewportMeasurements.horizontalScrollbarHeight}px`,\n \"--vertical-scrollbar-width\": `${viewportMeasurements.verticalScrollbarWidth}px`,\n } as CSSProperties;\n\n const cssVariables = {\n ...cssScrollbarSize,\n \"--content-height\": `${viewportMeasurements.contentHeight}px`,\n \"--content-width\": `${viewportMeasurements.contentWidth}px`,\n \"--pinned-width-left\": `${viewportMeasurements.pinnedWidthLeft}px`,\n \"--pinned-width-right\": `${viewportMeasurements.pinnedWidthRight}px`,\n \"--total-header-height\": `${headerHeight}px`,\n \"--viewport-body-height\": `${viewportMeasurements.viewportBodyHeight}px`,\n } as CSSProperties;\n\n const headersReady = showColumnHeaders === false || headerHeight > 0;\n const readyToRenderTableBody = headersReady && data.length > 0;\n\n return (\n <ContextMenuProvider\n menuActionHandler={handleContextMenuAction}\n menuBuilder={menuBuilder}\n >\n {showPaginationControls !== true ? (\n <div\n className={`${classBase}-scrollbarContainer`}\n ref={scrollProps.scrollbarContainerRef}\n style={cssVariables}\n tabIndex={-1}\n >\n <div className={`${classBase}-scrollbarContent`} />\n </div>\n ) : null}\n <div\n className={contentContainerClassName}\n ref={scrollProps.contentContainerRef}\n style={cssVariables}\n >\n <div\n {...tableProps}\n className={`${classBase}-table`}\n role=\"table\"\n tabIndex={disableFocus ? undefined : -1}\n >\n {showColumnHeaders ? (\n <TableHeader\n allowDragColumnHeader={allowDragColumnHeader}\n columns={scrollProps.columnsWithinViewport}\n customHeader={customHeader}\n headings={headings}\n onHeightMeasured={onHeaderHeightMeasured}\n onMoveColumn={onMoveColumn}\n onMoveGroupColumn={onMoveGroupColumn}\n onRemoveGroupColumn={onRemoveGroupColumn}\n onResizeColumn={onResizeColumn}\n onSortColumn={onSortColumn}\n showColumnHeaderMenus={showColumnHeaderMenus}\n tableConfig={tableConfig}\n tableId={id}\n virtualColSpan={scrollProps.virtualColSpan}\n />\n ) : null}\n {readyToRenderTableBody ? (\n <div className={`${classBase}-body`} ref={tableBodyRef}>\n {data.map((data) => (\n <Row\n aria-rowindex={data[0] + 1}\n classNameGenerator={rowClassNameGenerator}\n columnMap={columnMap}\n columns={scrollProps.columnsWithinViewport}\n highlighted={highlightedIndex === data[IDX]}\n key={data[RENDER_IDX]}\n onClick={onRowClick}\n onDataEdited={onDataEdited}\n row={data}\n offset={showPaginationControls ? 0 : getRowOffset(data)}\n onToggleGroup={onToggleGroup}\n virtualColSpan={scrollProps.virtualColSpan}\n zebraStripes={tableAttributes.zebraStripes}\n />\n ))}\n {/* \n The focusCellPlaceholder allows us to deal with the situation where a cell \n that has focus is scrolled out of the viewport. That cell, along with the \n containing row, will be recycled to render another DataRow. The html table \n cell must not retain focus once it is re-used but we need to track the \n original focus, in case user uses arrow key to resume navigation. \n The placeholder is fixed in place at the location where the focused cell \n was last rendered. It assumes focus. If we get an arrowkey mousedown event \n on the placeholder, the user has resumed navigation whilst the focused cell \n is offscreen. We scroll back to the focus location and pass focus back to \n the correct target cell.\n */}\n <div\n className={`${classBase}-focusCellPlaceholder`}\n onKeyDown={focusCellPlaceholderKeyDown}\n ref={focusCellPlaceholderRef}\n tabIndex={-1}\n />\n\n {cellBlock}\n </div>\n ) : null}\n </div>\n </div>\n {/* \n This keeps the heights of content container and scrollbar container aligned for\n cases where we rely on height: fit-content. (ScrollbarContainer isn't taken into \n account because its absolutely positioned).\n */}\n <div\n className={`${classBase}-scrollbarFiller`}\n style={cssScrollbarSize}\n />\n {draggableRow}\n </ContextMenuProvider>\n );\n};\n\nexport const Table = forwardRef(function Table(\n {\n Row,\n allowCellBlockSelection,\n allowDragColumnHeader,\n allowDragDrop,\n availableColumns,\n className: classNameProp,\n config,\n customHeader,\n dataSource,\n disableFocus,\n height,\n highlightedIndex,\n id,\n maxViewportRowLimit,\n navigationStyle,\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onHighlight,\n onRowClick,\n onSelect,\n onSelectCellBlock,\n onSelectionChange,\n renderBufferSize,\n rowHeight: rowHeightProp,\n scrollingApiRef,\n selectionModel,\n showColumnHeaders,\n showColumnHeaderMenus,\n showPaginationControls,\n style: styleProp,\n viewportRowLimit,\n width,\n ...htmlAttributes\n }: TableProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table\",\n css: tableCss,\n window: targetWindow,\n });\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [size, _setSize] = useState<MeasuredSize>();\n // TODO this will rerender entire table, move footer into seperate component\n const { measuredHeight: rowHeight, measuredRef: rowRef } = useMeasuredHeight({\n height: rowHeightProp,\n });\n const { measuredHeight: footerHeight, measuredRef: footerRef } =\n useMeasuredHeight({});\n\n const rowLimit = maxViewportRowLimit ?? viewportRowLimit;\n\n if (config === undefined) {\n throw Error(\n \"vuu Table requires config prop. Minimum config is list of Column Descriptors\",\n );\n }\n if (dataSource === undefined) {\n throw Error(\"vuu Table requires dataSource prop\");\n }\n\n if (showPaginationControls && renderBufferSize !== undefined) {\n console.warn(\n `Table: When pagination controls are used, renderBufferSize is ignored`,\n );\n }\n\n if (rowLimit && height && rowHeightProp) {\n console.warn(\n `Table: when viewportRowLimit, rowHeight and height are used in combination, height is ignored`,\n );\n height = rowLimit * rowHeightProp;\n } else if (rowLimit && rowHeightProp) {\n height = rowLimit * rowHeightProp;\n } else if (rowLimit) {\n height = rowLimit * rowHeight;\n }\n\n const sizeRef = useRef<MeasuredSize>();\n const setSize = useCallback(\n (size: MeasuredSize) => {\n if (viewportRowLimit && !rowHeight) {\n sizeRef.current = size;\n } else if (\n size.height !== sizeRef.current?.height ||\n size.width !== sizeRef.current?.width\n ) {\n _setSize(size);\n }\n },\n [rowHeight, viewportRowLimit],\n );\n useMemo(() => {\n if (sizeRef.current && rowHeight) {\n const size = {\n ...sizeRef.current,\n height: rowHeight * (viewportRowLimit as number),\n };\n sizeRef.current = size;\n _setSize(size);\n }\n }, [rowHeight, viewportRowLimit]);\n\n // TODO render TableHeader here and measure before row construction begins\n // TODO we could have MeasuredContainer render a Provider and make size available via a context hook ?\n return (\n <MeasuredContainer\n {...htmlAttributes}\n className={cx(classBase, classNameProp, {\n [`${classBase}-pagination`]: showPaginationControls,\n [`${classBase}-maxViewportRowLimit`]: maxViewportRowLimit,\n [`${classBase}-viewportRowLimit`]: viewportRowLimit,\n })}\n height={height}\n id={id}\n onResize={setSize}\n ref={useForkRef(containerRef, forwardedRef)}\n style={\n {\n \"--row-height-prop\": rowHeight > 0 ? `${rowHeight}px` : undefined,\n } as CSSProperties\n }\n width={width}\n >\n <RowProxy ref={rowRef} height={rowHeightProp} />\n {size &&\n rowHeight &&\n (footerHeight || showPaginationControls !== true) ? (\n <TableCore\n Row={Row}\n allowCellBlockSelection={allowCellBlockSelection}\n allowDragColumnHeader={allowDragColumnHeader}\n allowDragDrop={allowDragDrop}\n availableColumns={availableColumns}\n config={config}\n containerRef={containerRef}\n customHeader={customHeader}\n dataSource={dataSource}\n disableFocus={disableFocus}\n highlightedIndex={highlightedIndex}\n id={id}\n navigationStyle={navigationStyle}\n onAvailableColumnsChange={onAvailableColumnsChange}\n onConfigChange={onConfigChange}\n onDragStart={onDragStart}\n onDrop={onDrop}\n onHighlight={onHighlight}\n onRowClick={onRowClick}\n onSelect={onSelect}\n onSelectCellBlock={onSelectCellBlock}\n onSelectionChange={onSelectionChange}\n renderBufferSize={\n showPaginationControls ? 0 : Math.max(5, renderBufferSize ?? 0)\n }\n rowHeight={rowHeight}\n scrollingApiRef={scrollingApiRef}\n selectionModel={selectionModel}\n showColumnHeaders={showColumnHeaders}\n showColumnHeaderMenus={showColumnHeaderMenus}\n showPaginationControls={showPaginationControls}\n size={reduceSizeHeight(size, footerHeight)}\n />\n ) : null}\n {showPaginationControls ? (\n <div className={`${classBase}-footer`} ref={footerRef}>\n <PaginationControl dataSource={dataSource} />\n </div>\n ) : null}\n </MeasuredContainer>\n );\n});\n"],"names":["metadataKeys","Row","DefaultRow","useId","useTable","jsxs","ContextMenuProvider","jsx","TableHeader","data","forwardRef","Table","useWindow","useComponentCssInjection","tableCss","useRef","useState","useMeasuredHeight","useCallback","size","useMemo","MeasuredContainer","useForkRef","RowProxy","reduceSizeHeight","PaginationControl"],"mappings":";;;;;;;;;;;;;;;;;;;AAkDA,MAAM,SAAY,GAAA,UAAA,CAAA;AAElB,MAAM,EAAE,GAAK,EAAA,UAAA,EAAe,GAAAA,qBAAA,CAAA;AAgJ5B,MAAM,YAAY,CAAC;AAAA,OACjBC,KAAM,GAAAC,OAAA;AAAA,EACN,uBAAA;AAAA,EACA,qBAAwB,GAAA,IAAA;AAAA,EACxB,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAe,GAAA,KAAA;AAAA,EACf,gBAAkB,EAAA,oBAAA;AAAA,EAClB,EAAI,EAAA,MAAA;AAAA,EACJ,eAAkB,GAAA,MAAA;AAAA,EAClB,wBAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAmB,GAAA,CAAA;AAAA,EACnB,SAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAiB,GAAA,UAAA;AAAA,EACjB,iBAAoB,GAAA,IAAA;AAAA,EACpB,qBAAwB,GAAA,IAAA;AAAA,EACxB,sBAAA;AAAA,EACA,IAAA;AACF,CAOM,KAAA;AACJ,EAAM,MAAA,EAAA,GAAKC,eAAM,MAAM,CAAA,CAAA;AACvB,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,2BAAA;AAAA,IACA,uBAAA;AAAA,IACA,YAAA;AAAA,IACA,uBAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,sBAAA;AAAA,IACA,YAAA;AAAA,IACA,iBAAA;AAAA,IACA,mBAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,qBAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,oBAAA;AAAA,IACA,GAAG,UAAA;AAAA,MACDC,iBAAS,CAAA;AAAA,IACX,uBAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAkB,EAAA,oBAAA;AAAA,IAClB,EAAA;AAAA,IACA,eAAA;AAAA,IACA,wBAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAY,EAAA,cAAA;AAAA,IACZ,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,iBAAA;AAAA,IACA,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,sBAAA;AAAA,IACA,IAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,yBAA4B,GAAA,EAAA,CAAG,CAAG,EAAA,SAAS,CAAqB,iBAAA,CAAA,EAAA;AAAA,IACpE,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,eAAgB,CAAA,gBAAA;AAAA,IAC3C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,eAAgB,CAAA,aAAA;AAAA,IAC3C,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,eAAgB,CAAA,YAAA;AAAA,GACzC,CAAA,CAAA;AAED,EAAA,MAAM,gBAAmB,GAAA;AAAA,IACvB,+BAAA,EAAiC,CAAG,EAAA,oBAAA,CAAqB,yBAAyB,CAAA,EAAA,CAAA;AAAA,IAClF,4BAAA,EAA8B,CAAG,EAAA,oBAAA,CAAqB,sBAAsB,CAAA,EAAA,CAAA;AAAA,GAC9E,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB,GAAG,gBAAA;AAAA,IACH,kBAAA,EAAoB,CAAG,EAAA,oBAAA,CAAqB,aAAa,CAAA,EAAA,CAAA;AAAA,IACzD,iBAAA,EAAmB,CAAG,EAAA,oBAAA,CAAqB,YAAY,CAAA,EAAA,CAAA;AAAA,IACvD,qBAAA,EAAuB,CAAG,EAAA,oBAAA,CAAqB,eAAe,CAAA,EAAA,CAAA;AAAA,IAC9D,sBAAA,EAAwB,CAAG,EAAA,oBAAA,CAAqB,gBAAgB,CAAA,EAAA,CAAA;AAAA,IAChE,uBAAA,EAAyB,GAAG,YAAY,CAAA,EAAA,CAAA;AAAA,IACxC,wBAAA,EAA0B,CAAG,EAAA,oBAAA,CAAqB,kBAAkB,CAAA,EAAA,CAAA;AAAA,GACtE,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,iBAAsB,KAAA,KAAA,IAAS,YAAe,GAAA,CAAA,CAAA;AACnE,EAAM,MAAA,sBAAA,GAAyB,YAAgB,IAAA,IAAA,CAAK,MAAS,GAAA,CAAA,CAAA;AAE7D,EACE,uBAAAC,eAAA;AAAA,IAACC,6BAAA;AAAA,IAAA;AAAA,MACC,iBAAmB,EAAA,uBAAA;AAAA,MACnB,WAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,sBAAA,KAA2B,IAC1B,mBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,mBAAA,CAAA;AAAA,YACvB,KAAK,WAAY,CAAA,qBAAA;AAAA,YACjB,KAAO,EAAA,YAAA;AAAA,YACP,QAAU,EAAA,CAAA,CAAA;AAAA,YAEV,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAqB,iBAAA,CAAA,EAAA,CAAA;AAAA,WAAA;AAAA,SAEjD,GAAA,IAAA;AAAA,wBACJA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,yBAAA;AAAA,YACX,KAAK,WAAY,CAAA,mBAAA;AAAA,YACjB,KAAO,EAAA,YAAA;AAAA,YAEP,QAAA,kBAAAF,eAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACE,GAAG,UAAA;AAAA,gBACJ,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,gBACvB,IAAK,EAAA,OAAA;AAAA,gBACL,QAAA,EAAU,eAAe,KAAY,CAAA,GAAA,CAAA,CAAA;AAAA,gBAEpC,QAAA,EAAA;AAAA,kBACC,iBAAA,mBAAAE,cAAA;AAAA,oBAACC,uBAAA;AAAA,oBAAA;AAAA,sBACC,qBAAA;AAAA,sBACA,SAAS,WAAY,CAAA,qBAAA;AAAA,sBACrB,YAAA;AAAA,sBACA,QAAA;AAAA,sBACA,gBAAkB,EAAA,sBAAA;AAAA,sBAClB,YAAA;AAAA,sBACA,iBAAA;AAAA,sBACA,mBAAA;AAAA,sBACA,cAAA;AAAA,sBACA,YAAA;AAAA,sBACA,qBAAA;AAAA,sBACA,WAAA;AAAA,sBACA,OAAS,EAAA,EAAA;AAAA,sBACT,gBAAgB,WAAY,CAAA,cAAA;AAAA,qBAAA;AAAA,mBAE5B,GAAA,IAAA;AAAA,kBACH,sBAAA,mCACE,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAS,KAAK,YACvC,EAAA,QAAA,EAAA;AAAA,oBAAK,IAAA,CAAA,GAAA,CAAI,CAACC,KACT,qBAAAF,cAAA;AAAA,sBAACN,KAAA;AAAA,sBAAA;AAAA,wBACC,eAAA,EAAeQ,KAAK,CAAA,CAAC,CAAI,GAAA,CAAA;AAAA,wBACzB,kBAAoB,EAAA,qBAAA;AAAA,wBACpB,SAAA;AAAA,wBACA,SAAS,WAAY,CAAA,qBAAA;AAAA,wBACrB,WAAA,EAAa,gBAAqBA,KAAAA,KAAAA,CAAK,GAAG,CAAA;AAAA,wBAE1C,OAAS,EAAA,UAAA;AAAA,wBACT,YAAA;AAAA,wBACA,GAAKA,EAAAA,KAAAA;AAAA,wBACL,MAAQ,EAAA,sBAAA,GAAyB,CAAI,GAAA,YAAA,CAAaA,KAAI,CAAA;AAAA,wBACtD,aAAA;AAAA,wBACA,gBAAgB,WAAY,CAAA,cAAA;AAAA,wBAC5B,cAAc,eAAgB,CAAA,YAAA;AAAA,uBAAA;AAAA,sBAPzBA,MAAK,UAAU,CAAA;AAAA,qBASvB,CAAA;AAAA,oCAaDF,cAAA;AAAA,sBAAC,KAAA;AAAA,sBAAA;AAAA,wBACC,SAAA,EAAW,GAAG,SAAS,CAAA,qBAAA,CAAA;AAAA,wBACvB,SAAW,EAAA,2BAAA;AAAA,wBACX,GAAK,EAAA,uBAAA;AAAA,wBACL,QAAU,EAAA,CAAA,CAAA;AAAA,uBAAA;AAAA,qBACZ;AAAA,oBAEC,SAAA;AAAA,mBAAA,EACH,CACE,GAAA,IAAA;AAAA,iBAAA;AAAA,eAAA;AAAA,aACN;AAAA,WAAA;AAAA,SACF;AAAA,wBAMAA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,gBAAA,CAAA;AAAA,YACvB,KAAO,EAAA,gBAAA;AAAA,WAAA;AAAA,SACT;AAAA,QACC,YAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAA,CAAA;AAEa,MAAA,KAAA,GAAQG,gBAAW,CAAA,SAASC,MACvC,CAAA;AAAA,OACEV,KAAA;AAAA,EACA,uBAAA;AAAA,EACA,qBAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,MAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,gBAAA;AAAA,EACA,EAAA;AAAA,EACA,mBAAA;AAAA,EACA,eAAA;AAAA,EACA,wBAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,eAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,qBAAA;AAAA,EACA,sBAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeW,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAeC,aAAuB,IAAI,CAAA,CAAA;AAEhD,EAAA,MAAM,CAAC,IAAA,EAAM,QAAQ,CAAA,GAAIC,cAAuB,EAAA,CAAA;AAEhD,EAAA,MAAM,EAAE,cAAgB,EAAA,SAAA,EAAW,WAAa,EAAA,MAAA,KAAWC,mCAAkB,CAAA;AAAA,IAC3E,MAAQ,EAAA,aAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAM,MAAA,EAAE,gBAAgB,YAAc,EAAA,WAAA,EAAa,WACjD,GAAAA,mCAAA,CAAkB,EAAE,CAAA,CAAA;AAEtB,EAAA,MAAM,WAAW,mBAAuB,IAAA,gBAAA,CAAA;AAExC,EAAA,IAAI,WAAW,KAAW,CAAA,EAAA;AACxB,IAAM,MAAA,KAAA;AAAA,MACJ,8EAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAA,IAAI,eAAe,KAAW,CAAA,EAAA;AAC5B,IAAA,MAAM,MAAM,oCAAoC,CAAA,CAAA;AAAA,GAClD;AAEA,EAAI,IAAA,sBAAA,IAA0B,qBAAqB,KAAW,CAAA,EAAA;AAC5D,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN,CAAA,qEAAA,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAI,IAAA,QAAA,IAAY,UAAU,aAAe,EAAA;AACvC,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN,CAAA,6FAAA,CAAA;AAAA,KACF,CAAA;AACA,IAAA,MAAA,GAAS,QAAW,GAAA,aAAA,CAAA;AAAA,GACtB,MAAA,IAAW,YAAY,aAAe,EAAA;AACpC,IAAA,MAAA,GAAS,QAAW,GAAA,aAAA,CAAA;AAAA,aACX,QAAU,EAAA;AACnB,IAAA,MAAA,GAAS,QAAW,GAAA,SAAA,CAAA;AAAA,GACtB;AAEA,EAAA,MAAM,UAAUF,YAAqB,EAAA,CAAA;AACrC,EAAA,MAAM,OAAU,GAAAG,iBAAA;AAAA,IACd,CAACC,KAAuB,KAAA;AACtB,MAAI,IAAA,gBAAA,IAAoB,CAAC,SAAW,EAAA;AAClC,QAAA,OAAA,CAAQ,OAAUA,GAAAA,KAAAA,CAAAA;AAAA,OACpB,MAAA,IACEA,KAAK,CAAA,MAAA,KAAW,OAAQ,CAAA,OAAA,EAAS,UACjCA,KAAK,CAAA,KAAA,KAAU,OAAQ,CAAA,OAAA,EAAS,KAChC,EAAA;AACA,QAAA,QAAA,CAASA,KAAI,CAAA,CAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,CAAC,WAAW,gBAAgB,CAAA;AAAA,GAC9B,CAAA;AACA,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAI,IAAA,OAAA,CAAQ,WAAW,SAAW,EAAA;AAChC,MAAA,MAAMD,KAAO,GAAA;AAAA,QACX,GAAG,OAAQ,CAAA,OAAA;AAAA,QACX,QAAQ,SAAa,GAAA,gBAAA;AAAA,OACvB,CAAA;AACA,MAAA,OAAA,CAAQ,OAAUA,GAAAA,KAAAA,CAAAA;AAClB,MAAA,QAAA,CAASA,KAAI,CAAA,CAAA;AAAA,KACf;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,gBAAgB,CAAC,CAAA,CAAA;AAIhC,EACE,uBAAAd,eAAA;AAAA,IAACgB,+BAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,WAAA,CAAa,GAAG,sBAAA;AAAA,QAC7B,CAAC,CAAA,EAAG,SAAS,CAAA,oBAAA,CAAsB,GAAG,mBAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,iBAAA,CAAmB,GAAG,gBAAA;AAAA,OACpC,CAAA;AAAA,MACD,MAAA;AAAA,MACA,EAAA;AAAA,MACA,QAAU,EAAA,OAAA;AAAA,MACV,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAAA,MAC1C,KACE,EAAA;AAAA,QACE,mBAAqB,EAAA,SAAA,GAAY,CAAI,GAAA,CAAA,EAAG,SAAS,CAAO,EAAA,CAAA,GAAA,KAAA,CAAA;AAAA,OAC1D;AAAA,MAEF,KAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAf,cAAA,CAACgB,YAAS,EAAA,EAAA,GAAA,EAAK,MAAQ,EAAA,MAAA,EAAQ,aAAe,EAAA,CAAA;AAAA,QAC7C,IACD,IAAA,SAAA,KACC,YAAgB,IAAA,sBAAA,KAA2B,IAC1C,CAAA,mBAAAhB,cAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,iBACCN,KAAA;AAAA,YACA,uBAAA;AAAA,YACA,qBAAA;AAAA,YACA,aAAA;AAAA,YACA,gBAAA;AAAA,YACA,MAAA;AAAA,YACA,YAAA;AAAA,YACA,YAAA;AAAA,YACA,UAAA;AAAA,YACA,YAAA;AAAA,YACA,gBAAA;AAAA,YACA,EAAA;AAAA,YACA,eAAA;AAAA,YACA,wBAAA;AAAA,YACA,cAAA;AAAA,YACA,WAAA;AAAA,YACA,MAAA;AAAA,YACA,WAAA;AAAA,YACA,UAAA;AAAA,YACA,QAAA;AAAA,YACA,iBAAA;AAAA,YACA,iBAAA;AAAA,YACA,kBACE,sBAAyB,GAAA,CAAA,GAAI,KAAK,GAAI,CAAA,CAAA,EAAG,oBAAoB,CAAC,CAAA;AAAA,YAEhE,SAAA;AAAA,YACA,eAAA;AAAA,YACA,cAAA;AAAA,YACA,iBAAA;AAAA,YACA,qBAAA;AAAA,YACA,sBAAA;AAAA,YACA,IAAA,EAAMuB,8BAAiB,CAAA,IAAA,EAAM,YAAY,CAAA;AAAA,WAAA;AAAA,SAEzC,GAAA,IAAA;AAAA,QACH,sBACC,mBAAAjB,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAW,OAAA,CAAA,EAAA,GAAA,EAAK,SAC1C,EAAA,QAAA,kBAAAA,cAAA,CAACkB,mCAAkB,EAAA,EAAA,UAAA,EAAwB,GAC7C,CACE,GAAA,IAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACN,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BulkEditRow.js","sources":["../../src/bulk-edit/BulkEditRow.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport {\n DataSource,\n SuggestionFetcher,\n TypeaheadSuggestionProvider,\n} from \"@vuu-ui/vuu-data-types\";\nimport { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n CommitHandler,\n isTypeaheadSuggestionProvider,\n queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport { InputProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback, useMemo, useRef } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\nimport bulkEditRowCss from \"./BulkEditRow.css\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n column: ColumnDescriptor,\n value: string,\n) => void;\nexport interface BulkEditProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n dataSource: DataSource;\n onChange: EditValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n placeholder: \"Enter value\",\n variant: \"primary\",\n};\n\nexport const BulkEditRow = ({\n dataSource,\n onChange,\n ...htmlAttributes\n}: BulkEditProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-bulk-edit-row\",\n css: bulkEditRowCss,\n window: targetWindow,\n });\n\n const fieldRef = useRef(\"\");\n\n const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n const onCommit = useCallback<CommitHandler<HTMLElement, string | undefined>>(\n (evt, value) => {\n if (value !== undefined && String(value).trim() !== \"\") {\n const columnName = fieldRef.current;\n if (columnName) {\n const column = columns.find((c) => c.name === columnName);\n if (column) {\n onChange(column, value);\n }\n }\n }\n },\n [columns, onChange],\n );\n\n const handleFocus = useCallback((evt) => {\n const field = queryClosest(evt.target, \"[data-field]\");\n if (field) {\n const columnName = field.dataset.field;\n if (columnName) {\n fieldRef.current = columnName;\n }\n }\n }, []);\n\n const getSuggestions = useCallback<SuggestionFetcher>(\n ([, column, pattern]: TypeaheadParams) => {\n const a = (\n dataSource as TypeaheadSuggestionProvider\n ).getTypeaheadSuggestions(column, pattern);\n console.log(a);\n return a;\n },\n [dataSource],\n );\n\n const suggestionProvider = useMemo(() => {\n if (isTypeaheadSuggestionProvider(dataSource)) {\n return () => getSuggestions;\n }\n }, [dataSource, getSuggestions]);\n\n return (\n <div {...htmlAttributes} className={classBase} onFocus={handleFocus}>\n <VirtualColSpan width={virtualColSpan} />\n {columns.map((column) => (\n <div\n className={`${classBase}-filter`}\n data-field={column.name}\n key={column.name}\n style={{ width: column.width }}\n >\n {getDataItemEditControl({\n InputProps,\n dataDescriptor: column,\n onCommit,\n suggestionProvider,\n table: dataSource.table,\n })}\n </div>\n ))}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditRowCss","useRef","useHeaderProps","useCallback","queryClosest","useMemo","isTypeaheadSuggestionProvider","jsx","VirtualColSpan","getDataItemEditControl"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BulkEditRow.js","sources":["../../src/bulk-edit/BulkEditRow.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport {\n DataSource,\n SuggestionFetcher,\n TypeaheadSuggestionProvider,\n} from \"@vuu-ui/vuu-data-types\";\nimport { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n CommitHandler,\n isTypeaheadSuggestionProvider,\n queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport type { InputProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback, useMemo, useRef } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\nimport bulkEditRowCss from \"./BulkEditRow.css\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n column: ColumnDescriptor,\n value: string,\n) => void;\nexport interface BulkEditProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n dataSource: DataSource;\n onChange: EditValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n placeholder: \"Enter value\",\n variant: \"primary\",\n};\n\nexport const BulkEditRow = ({\n dataSource,\n onChange,\n ...htmlAttributes\n}: BulkEditProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-bulk-edit-row\",\n css: bulkEditRowCss,\n window: targetWindow,\n });\n\n const fieldRef = useRef(\"\");\n\n const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n const onCommit = useCallback<CommitHandler<HTMLElement, string | undefined>>(\n (evt, value) => {\n if (value !== undefined && String(value).trim() !== \"\") {\n const columnName = fieldRef.current;\n if (columnName) {\n const column = columns.find((c) => c.name === columnName);\n if (column) {\n onChange(column, value);\n }\n }\n }\n },\n [columns, onChange],\n );\n\n const handleFocus = useCallback((evt) => {\n const field = queryClosest(evt.target, \"[data-field]\");\n if (field) {\n const columnName = field.dataset.field;\n if (columnName) {\n fieldRef.current = columnName;\n }\n }\n }, []);\n\n const getSuggestions = useCallback<SuggestionFetcher>(\n ([, column, pattern]: TypeaheadParams) => {\n const a = (\n dataSource as TypeaheadSuggestionProvider\n ).getTypeaheadSuggestions(column, pattern);\n console.log(a);\n return a;\n },\n [dataSource],\n );\n\n const suggestionProvider = useMemo(() => {\n if (isTypeaheadSuggestionProvider(dataSource)) {\n return () => getSuggestions;\n }\n }, [dataSource, getSuggestions]);\n\n return (\n <div {...htmlAttributes} className={classBase} onFocus={handleFocus}>\n <VirtualColSpan width={virtualColSpan} />\n {columns.map((column) => (\n <div\n className={`${classBase}-filter`}\n data-field={column.name}\n key={column.name}\n style={{ width: column.width }}\n >\n {getDataItemEditControl({\n InputProps,\n dataDescriptor: column,\n onCommit,\n suggestionProvider,\n table: dataSource.table,\n })}\n </div>\n ))}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditRowCss","useRef","useHeaderProps","useCallback","queryClosest","useMemo","isTypeaheadSuggestionProvider","jsx","VirtualColSpan","getDataItemEditControl"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var checkboxRowSelectorCss = ".vuuTableCell {\n .vuuCheckboxRowSelectorIcon {\n
|
|
3
|
+
var checkboxRowSelectorCss = ".vuuTableCell {\n .vuuCheckboxRowSelector {\n align-items: center;\n height: 100%;\n\n .saltCheckboxIcon {\n margin-top: 0;\n }\n }\n .vuuCheckboxRowSelectorIcon {\n margin-top: calc(var(--row-height) / 2 - 6px);\n }\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = checkboxRowSelectorCss;
|
|
6
6
|
//# sourceMappingURL=CheckboxRowSelectorCell.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnMenu.js","sources":["../../src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\n\nconst classBase = \"vuuColumnMenu\";\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n column: RuntimeColumnDescriptor;\n}\n\nexport const ColumnMenu = ({ className, column }: ColumnMenuProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-menu\",\n css: columnMenuCss,\n window: targetWindow,\n });\n\n return (\n <PopupMenu\n className={cx(classBase, className)}\n data-embedded\n menuLocation=\"column-menu\"\n menuOptions={{ column }}\n />\n );\n};\n"],"names":["useWindow","useComponentCssInjection","columnMenuCss","jsx","PopupMenu"],"mappings":";;;;;;;;;AASA,MAAM,SAAY,GAAA,eAAA,CAAA;AAKX,MAAM,UAAa,GAAA,CAAC,EAAE,SAAA,EAAW,QAA8B,KAAA;AACpE,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,eAAa,EAAA,IAAA;AAAA,MACb,YAAa,EAAA,aAAA;AAAA,MACb,WAAA,EAAa,EAAE,MAAO,EAAA;AAAA,KAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"ColumnMenu.js","sources":["../../src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\n\nconst classBase = \"vuuColumnMenu\";\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n column: RuntimeColumnDescriptor;\n}\n\nexport const ColumnMenu = ({ className, column }: ColumnMenuProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-menu\",\n css: columnMenuCss,\n window: targetWindow,\n });\n\n return (\n <PopupMenu\n className={cx(classBase, className)}\n data-embedded\n menuLocation=\"column-menu\"\n menuOptions={{ column }}\n tabIndex={-1}\n />\n );\n};\n"],"names":["useWindow","useComponentCssInjection","columnMenuCss","jsx","PopupMenu"],"mappings":";;;;;;;;;AASA,MAAM,SAAY,GAAA,eAAA,CAAA;AAKX,MAAM,UAAa,GAAA,CAAC,EAAE,SAAA,EAAW,QAA8B,KAAA;AACpE,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,eAAa,EAAA,IAAA;AAAA,MACb,YAAa,EAAA,aAAA;AAAA,MACb,WAAA,EAAa,EAAE,MAAO,EAAA;AAAA,MACtB,QAAU,EAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GACZ,CAAA;AAEJ;;;;"}
|
|
@@ -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
|
|
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 outline-offset: -1px;\n\n &:has(.vuuCheckboxRowSelector) {\n outline: none;\n }\n}\n.vuuTableCell-editable:focus {\n outline: none;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = tableCellCss;
|
|
6
6
|
//# sourceMappingURL=TableCell.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-dom-utils.js","sources":["../src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\nimport type { ArrowKey, PageKey } from \"@vuu-ui/vuu-utils\";\
|
|
1
|
+
{"version":3,"file":"table-dom-utils.js","sources":["../src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\nimport type { ArrowKey, PageKey } from \"@vuu-ui/vuu-utils\";\nimport type { CellPos } from \"@vuu-ui/vuu-table-types\";\n\nconst NULL_CELL_POS: CellPos = [-1, -1];\n\nexport type NavigationKey = PageKey | ArrowKey;\n\nexport const headerCellQuery = (colIdx: number) =>\n `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx + 1}']`;\n\nexport const dataCellQuery = (rowIdx: number, colIdx: number) =>\n `.vuuTable-body > [aria-rowindex='${rowIdx + 1}'] > [aria-colindex='${colIdx + 1}']`;\n\nexport const getTableCell = (\n containerRef: RefObject<HTMLElement>,\n [rowIdx, colIdx]: CellPos,\n) => {\n const cssQuery =\n rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);\n const cell = containerRef.current?.querySelector(\n cssQuery,\n ) as HTMLTableCellElement;\n\n if (cellIsEditable(cell)) {\n // Dropdown gets focus, Input does not\n const focusableContent = cell.querySelector(\"button\") as HTMLElement;\n return focusableContent || cell;\n } else {\n return cell;\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\nexport const cellIsTextInput = (cell: HTMLElement) =>\n cell.querySelector(\".vuuTableInputCell\") !== null;\n\nexport const getIndexFromRowElement = (rowElement: HTMLElement | null) => {\n const rowIndex = rowElement?.ariaRowIndex;\n if (rowIndex != null) {\n const index = parseInt(rowIndex) - 1;\n if (!isNaN(index)) {\n return index;\n }\n }\n return -1;\n};\n\nexport const getIndexFromCellElement = (cellElement: HTMLElement | null) => {\n const colIndex = cellElement?.ariaColIndex;\n if (colIndex != null) {\n const index = parseInt(colIndex) - 1;\n if (!isNaN(index)) {\n return index;\n }\n }\n return -1;\n};\n\nexport const getTableCellPos = (tableCell: HTMLDivElement): CellPos => {\n const colIdx = getIndexFromCellElement(tableCell);\n if (tableCell.role === \"columnHeader\") {\n return [-1, colIdx];\n } else {\n const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n if (focusedRow) {\n return [getIndexFromRowElement(focusedRow), colIdx];\n }\n }\n return NULL_CELL_POS;\n};\n\nconst closestRow = (el: HTMLElement) =>\n el.closest('[role=\"row\"]') as HTMLElement;\n\nexport const closestRowIndex = (el: HTMLElement) =>\n getIndexFromRowElement(closestRow(el));\n\nexport function getNextCellPos(\n key: ArrowKey,\n [rowIdx, colIdx]: CellPos,\n columnCount: number,\n rowCount: 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 [0, colIdx];\n } else if (rowIdx === rowCount - 1) {\n return [rowIdx, colIdx];\n } else {\n return [rowIdx + 1, colIdx];\n }\n } else if (key === \"ArrowRight\") {\n if (colIdx < columnCount - 1) {\n return [rowIdx, colIdx + 1];\n } else {\n return [rowIdx, colIdx];\n }\n } else if (key === \"ArrowLeft\") {\n if (colIdx > 0) {\n return [rowIdx, colIdx - 1];\n } else {\n return [rowIdx, colIdx];\n }\n }\n return [rowIdx, colIdx];\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":[],"mappings":"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"}
|
package/cjs/useCellFocus.js
CHANGED
|
@@ -4,50 +4,107 @@ var react = require('react');
|
|
|
4
4
|
var tableDomUtils = require('./table-dom-utils.js');
|
|
5
5
|
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
6
6
|
|
|
7
|
+
const getCellPosition = (el) => {
|
|
8
|
+
const top = parseInt(el.parentElement?.style.top ?? "-1");
|
|
9
|
+
return { top };
|
|
10
|
+
};
|
|
7
11
|
const useCellFocus = ({
|
|
12
|
+
cellFocusStateRef,
|
|
8
13
|
containerRef,
|
|
9
14
|
disableFocus = false,
|
|
10
15
|
requestScroll
|
|
11
16
|
}) => {
|
|
12
|
-
const
|
|
17
|
+
const focusCellPlaceholderRef = react.useCallback(
|
|
18
|
+
(el) => cellFocusStateRef.current.placeholderEl = el,
|
|
19
|
+
[cellFocusStateRef]
|
|
20
|
+
);
|
|
13
21
|
const focusCell = react.useCallback(
|
|
14
|
-
(cellPos) => {
|
|
22
|
+
(cellPos, fromKeyboard = false) => {
|
|
15
23
|
if (containerRef.current) {
|
|
16
|
-
const
|
|
17
|
-
if (
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
24
|
+
const { current: state } = cellFocusStateRef;
|
|
25
|
+
if (fromKeyboard && state.outsideViewport) {
|
|
26
|
+
state.cellPos = cellPos;
|
|
27
|
+
} else {
|
|
28
|
+
const activeCell = tableDomUtils.getTableCell(containerRef, cellPos);
|
|
29
|
+
if (activeCell) {
|
|
30
|
+
if (activeCell !== state.el) {
|
|
31
|
+
state.el?.removeAttribute("tabindex");
|
|
32
|
+
activeCell.setAttribute("tabindex", "0");
|
|
33
|
+
state.cellPos = cellPos;
|
|
34
|
+
state.el = activeCell;
|
|
35
|
+
state.pos = getCellPosition(activeCell);
|
|
36
|
+
state.outsideViewport = false;
|
|
37
|
+
if (state.placeholderEl) {
|
|
38
|
+
state.placeholderEl.style.top = `${state.pos.top}px`;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
requestScroll?.({ type: "scroll-row", rowIndex: cellPos[0] });
|
|
42
|
+
activeCell.focus({ preventScroll: true });
|
|
22
43
|
}
|
|
23
|
-
requestScroll?.({ type: "scroll-row", rowIndex: cellPos[0] });
|
|
24
|
-
activeCell.focus({ preventScroll: true });
|
|
25
44
|
}
|
|
26
45
|
}
|
|
27
46
|
},
|
|
28
|
-
|
|
29
|
-
// be often whilst scrolling - store range in a a ref ?
|
|
30
|
-
[containerRef, requestScroll]
|
|
47
|
+
[cellFocusStateRef, containerRef, requestScroll]
|
|
31
48
|
);
|
|
32
49
|
const tableBodyRef = react.useCallback(
|
|
33
50
|
(el) => {
|
|
34
51
|
if (el) {
|
|
52
|
+
const { current: state } = cellFocusStateRef;
|
|
35
53
|
const table = vuuUtils.queryClosest(el, ".vuuTable");
|
|
36
54
|
if (table) {
|
|
37
|
-
if (
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
55
|
+
if (state.el === null && !disableFocus) {
|
|
56
|
+
const headerCell = table.querySelector(
|
|
57
|
+
tableDomUtils.headerCellQuery(0)
|
|
58
|
+
);
|
|
59
|
+
if (headerCell) {
|
|
60
|
+
headerCell.setAttribute("tabindex", "0");
|
|
61
|
+
state.cellPos = [-1, 0];
|
|
62
|
+
state.el = headerCell;
|
|
63
|
+
state.pos = { top: -20 };
|
|
64
|
+
if (state.placeholderEl) {
|
|
65
|
+
state.placeholderEl.style.top = `-20px`;
|
|
66
|
+
}
|
|
67
|
+
} else {
|
|
68
|
+
const cell = table.querySelector(
|
|
69
|
+
tableDomUtils.dataCellQuery(0, 0)
|
|
70
|
+
);
|
|
71
|
+
if (cell) {
|
|
72
|
+
cell.setAttribute("tabindex", "0");
|
|
73
|
+
state.cellPos = [0, 0];
|
|
74
|
+
state.el = cell;
|
|
75
|
+
state.pos = { top: 0 };
|
|
76
|
+
if (state.placeholderEl) {
|
|
77
|
+
state.placeholderEl.style.top = `0px`;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
42
80
|
}
|
|
43
81
|
}
|
|
44
82
|
}
|
|
45
83
|
}
|
|
46
84
|
},
|
|
47
|
-
[disableFocus]
|
|
85
|
+
[cellFocusStateRef, disableFocus]
|
|
86
|
+
);
|
|
87
|
+
const focusCellPlaceholderKeyDown = react.useCallback(
|
|
88
|
+
(evt) => {
|
|
89
|
+
const { outsideViewport, pos } = cellFocusStateRef.current;
|
|
90
|
+
if (pos && vuuUtils.isArrowKey(evt.key)) {
|
|
91
|
+
if (outsideViewport === "above") {
|
|
92
|
+
requestScroll?.({ type: "scroll-top", scrollPos: pos.top });
|
|
93
|
+
} else if (outsideViewport === "below") {
|
|
94
|
+
requestScroll?.({ type: "scroll-bottom", scrollPos: pos.top });
|
|
95
|
+
} else {
|
|
96
|
+
throw Error(
|
|
97
|
+
`cellFocusPlaceholder should not have focus if inside viewport`
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
[cellFocusStateRef, requestScroll]
|
|
48
103
|
);
|
|
49
104
|
return {
|
|
50
105
|
focusCell,
|
|
106
|
+
focusCellPlaceholderKeyDown,
|
|
107
|
+
focusCellPlaceholderRef,
|
|
51
108
|
tableBodyRef
|
|
52
109
|
};
|
|
53
110
|
};
|
package/cjs/useCellFocus.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCellFocus.js","sources":["../src/useCellFocus.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useCellFocus.js","sources":["../src/useCellFocus.ts"],"sourcesContent":["import {\n KeyboardEventHandler,\n MutableRefObject,\n RefCallback,\n RefObject,\n useCallback,\n} from \"react\";\nimport {\n dataCellQuery,\n getTableCell,\n headerCellQuery,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\nimport { isArrowKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { CellFocusState, CellPos } from \"@vuu-ui/vuu-table-types\";\n\nexport interface CellFocusHookProps {\n cellFocusStateRef: MutableRefObject<CellFocusState>;\n containerRef: RefObject<HTMLElement>;\n disableFocus?: boolean;\n requestScroll?: ScrollRequestHandler;\n}\n\nconst getCellPosition = (el: HTMLElement) => {\n const top = parseInt(el.parentElement?.style.top ?? \"-1\");\n return { top };\n};\n\nexport type FocusCell = (cellPos: CellPos, fromKeyboard?: boolean) => void;\n\nexport const useCellFocus = ({\n cellFocusStateRef,\n containerRef,\n disableFocus = false,\n requestScroll,\n}: CellFocusHookProps) => {\n const focusCellPlaceholderRef = useCallback<RefCallback<HTMLDivElement>>(\n (el) => (cellFocusStateRef.current.placeholderEl = el),\n [cellFocusStateRef],\n );\n\n const focusCell = useCallback<FocusCell>(\n (cellPos, fromKeyboard = false) => {\n if (containerRef.current) {\n const { current: state } = cellFocusStateRef;\n\n if (fromKeyboard && state.outsideViewport) {\n state.cellPos = cellPos;\n } else {\n const activeCell = getTableCell(containerRef, cellPos);\n if (activeCell) {\n if (activeCell !== state.el) {\n state.el?.removeAttribute(\"tabindex\");\n activeCell.setAttribute(\"tabindex\", \"0\");\n\n // TODO no need to measure if we're navigating horizontally\n state.cellPos = cellPos;\n state.el = activeCell;\n state.pos = getCellPosition(activeCell);\n state.outsideViewport = false;\n\n if (state.placeholderEl) {\n state.placeholderEl.style.top = `${state.pos.top}px`;\n }\n }\n // TODO needs to be scroll cell to accommodate horizontal virtualization\n requestScroll?.({ type: \"scroll-row\", rowIndex: cellPos[0] });\n activeCell.focus({ preventScroll: true });\n }\n }\n }\n },\n [cellFocusStateRef, containerRef, requestScroll],\n );\n\n const tableBodyRef = useCallback<RefCallback<HTMLDivElement>>(\n (el) => {\n if (el) {\n const { current: state } = cellFocusStateRef;\n const table = queryClosest<HTMLDivElement>(el, \".vuuTable\");\n if (table) {\n if (state.el === null && !disableFocus) {\n const headerCell = table.querySelector<HTMLDivElement>(\n headerCellQuery(0),\n );\n if (headerCell) {\n headerCell.setAttribute(\"tabindex\", \"0\");\n state.cellPos = [-1, 0];\n state.el = headerCell;\n state.pos = { top: -20 };\n if (state.placeholderEl) {\n state.placeholderEl.style.top = `-20px`;\n }\n } else {\n const cell = table.querySelector<HTMLDivElement>(\n dataCellQuery(0, 0),\n );\n if (cell) {\n cell.setAttribute(\"tabindex\", \"0\");\n state.cellPos = [0, 0];\n state.el = cell;\n state.pos = { top: 0 };\n if (state.placeholderEl) {\n state.placeholderEl.style.top = `0px`;\n }\n }\n }\n }\n }\n }\n },\n [cellFocusStateRef, disableFocus],\n );\n\n const focusCellPlaceholderKeyDown = useCallback<KeyboardEventHandler>(\n (evt) => {\n const { outsideViewport, pos } = cellFocusStateRef.current;\n if (pos && isArrowKey(evt.key)) {\n // TODO depends on whether we're scrolling up or down\n if (outsideViewport === \"above\") {\n requestScroll?.({ type: \"scroll-top\", scrollPos: pos.top });\n } else if (outsideViewport === \"below\") {\n requestScroll?.({ type: \"scroll-bottom\", scrollPos: pos.top });\n } else {\n throw Error(\n `cellFocusPlaceholder should not have focus if inside viewport`,\n );\n }\n }\n },\n [cellFocusStateRef, requestScroll],\n );\n\n return {\n focusCell,\n focusCellPlaceholderKeyDown,\n focusCellPlaceholderRef,\n tableBodyRef,\n };\n};\n"],"names":["useCallback","getTableCell","queryClosest","headerCellQuery","dataCellQuery","isArrowKey"],"mappings":"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"}
|