@vuu-ui/vuu-table 0.8.87 → 0.8.88
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/Row.js.map +1 -1
- package/cjs/Table.js +0 -4
- package/cjs/Table.js.map +1 -1
- package/cjs/bulk-edit/BulkEditPanel.js.map +1 -1
- package/cjs/bulk-edit/BulkEditRow.js.map +1 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map +1 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +1 -1
- package/cjs/cell-renderers/input-cell/InputCell.js.map +1 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map +1 -1
- package/cjs/column-header-pill/ColumnHeaderPill.js.map +1 -1
- package/cjs/column-header-pill/GroupColumnPill.js.map +1 -1
- package/cjs/column-header-pill/SortIndicator.js.map +1 -1
- package/cjs/column-menu/ColumnMenu.js.map +1 -1
- package/cjs/column-resizing/useTableColumnResize.js.map +1 -1
- package/cjs/context-menu/buildContextMenuDescriptors.js.map +1 -1
- package/cjs/context-menu/useHandleTableContextMenu.js.map +1 -1
- package/cjs/header-cell/GroupHeaderCell.js.map +1 -1
- package/cjs/header-cell/HeaderCell.css.js +1 -1
- package/cjs/header-cell/HeaderCell.js.map +1 -1
- package/cjs/moving-window.js.map +1 -1
- package/cjs/table-cell/TableCell.js.map +1 -1
- package/cjs/table-cell/TableGroupCell.js.map +1 -1
- package/cjs/table-config.js.map +1 -1
- package/cjs/table-header/HeaderProvider.js.map +1 -1
- package/cjs/table-header/TableHeader.js.map +1 -1
- package/cjs/table-header/useTableHeader.js.map +1 -1
- package/cjs/useCell.js.map +1 -1
- package/cjs/useCellEditing.js.map +1 -1
- package/cjs/useControlledTableNavigation.js.map +1 -1
- package/cjs/useDataSource.js +1 -6
- package/cjs/useDataSource.js.map +1 -1
- package/cjs/useKeyboardNavigation.js.map +1 -1
- package/cjs/useMeasuredHeight.js.map +1 -1
- package/cjs/useRowClassNameGenerators.js.map +1 -1
- package/cjs/useSelection.js.map +1 -1
- package/cjs/useTable.js +0 -2
- package/cjs/useTable.js.map +1 -1
- package/cjs/useTableAndColumnSettings.js.map +1 -1
- package/cjs/useTableContextMenu.js.map +1 -1
- package/cjs/useTableModel.js.map +1 -1
- package/cjs/useTableScroll.js.map +1 -1
- package/cjs/useTableViewport.js.map +1 -1
- package/esm/Row.js.map +1 -1
- package/esm/Table.js +0 -4
- package/esm/Table.js.map +1 -1
- package/esm/bulk-edit/BulkEditPanel.js.map +1 -1
- package/esm/bulk-edit/BulkEditRow.js.map +1 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map +1 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +1 -1
- package/esm/cell-renderers/input-cell/InputCell.js.map +1 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.js.map +1 -1
- package/esm/column-header-pill/ColumnHeaderPill.js.map +1 -1
- package/esm/column-header-pill/GroupColumnPill.js.map +1 -1
- package/esm/column-header-pill/SortIndicator.js.map +1 -1
- package/esm/column-menu/ColumnMenu.js.map +1 -1
- package/esm/column-resizing/useTableColumnResize.js.map +1 -1
- package/esm/context-menu/buildContextMenuDescriptors.js.map +1 -1
- package/esm/context-menu/useHandleTableContextMenu.js.map +1 -1
- package/esm/header-cell/GroupHeaderCell.js.map +1 -1
- package/esm/header-cell/HeaderCell.css.js +1 -1
- package/esm/header-cell/HeaderCell.js.map +1 -1
- package/esm/moving-window.js.map +1 -1
- package/esm/table-cell/TableCell.js.map +1 -1
- package/esm/table-cell/TableGroupCell.js.map +1 -1
- package/esm/table-config.js.map +1 -1
- package/esm/table-header/HeaderProvider.js.map +1 -1
- package/esm/table-header/TableHeader.js.map +1 -1
- package/esm/table-header/useTableHeader.js.map +1 -1
- package/esm/useCell.js.map +1 -1
- package/esm/useCellEditing.js.map +1 -1
- package/esm/useControlledTableNavigation.js.map +1 -1
- package/esm/useDataSource.js +2 -6
- package/esm/useDataSource.js.map +1 -1
- package/esm/useKeyboardNavigation.js.map +1 -1
- package/esm/useMeasuredHeight.js.map +1 -1
- package/esm/useRowClassNameGenerators.js.map +1 -1
- package/esm/useSelection.js.map +1 -1
- package/esm/useTable.js +0 -2
- package/esm/useTable.js.map +1 -1
- package/esm/useTableAndColumnSettings.js.map +1 -1
- package/esm/useTableContextMenu.js.map +1 -1
- package/esm/useTableModel.js.map +1 -1
- package/esm/useTableScroll.js.map +1 -1
- package/esm/useTableViewport.js.map +1 -1
- package/package.json +9 -9
- package/types/Table.d.ts +1 -6
- package/types/cell-renderers/input-cell/InputCell.d.ts +1 -1
- package/types/column-resizing/useTableColumnResize.d.ts +1 -1
- package/types/context-menu/useHandleTableContextMenu.d.ts +1 -1
- package/types/table-cell/TableCell.d.ts +1 -1
- package/types/table-cell/TableGroupCell.d.ts +1 -1
- package/types/table-header/TableHeader.d.ts +1 -1
- package/types/table-header/useTableHeader.d.ts +1 -1
- package/types/useDataSource.d.ts +2 -5
- package/types/useKeyboardNavigation.d.ts +1 -1
- package/types/useMeasuredHeight.d.ts +1 -1
- package/types/useRowClassNameGenerators.d.ts +1 -1
- package/types/useSelection.d.ts +1 -1
- package/types/useTable.d.ts +2 -2
- package/types/useTableAndColumnSettings.d.ts +1 -1
- package/types/useTableContextMenu.d.ts +1 -1
- package/types/useTableScroll.d.ts +1 -1
- package/types/useTableViewport.d.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCell.js","sources":["../../src/header-cell/HeaderCell.tsx"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-popups\";\nimport { HeaderCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n useCallback,\n useMemo,\n useRef
|
|
1
|
+
{"version":3,"file":"HeaderCell.js","sources":["../../src/header-cell/HeaderCell.tsx"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-popups\";\nimport { HeaderCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n useCallback,\n useMemo,\n useRef,\n} from \"react\";\nimport { SortIndicator } from \"../column-header-pill\";\nimport { ColumnMenu } from \"../column-menu\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport headerCellCss from \"./HeaderCell.css\";\n\nconst classBase = \"vuuTableHeaderCell\";\n\nexport const HeaderCell = ({\n className: classNameProp,\n column,\n onClick,\n onResize,\n showMenu = true,\n ...htmlAttributes\n}: HeaderCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-header-cell\",\n css: headerCellCss,\n window: targetWindow,\n });\n\n const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;\n const rootRef = useRef<HTMLDivElement>(null);\n const { isResizing, ...resizeProps } = useTableColumnResize({\n column,\n onResize,\n rootRef,\n });\n\n const [showContextMenu] = useContextMenu();\n\n const handleContextMenu = useMemo(() => {\n if (showMenu) {\n return undefined;\n } else {\n return (e: MouseEvent) => showContextMenu(e, \"column-menu\", { column });\n }\n }, [column, showContextMenu, showMenu]);\n\n const headerItems = useMemo(() => {\n const sortIndicator = <SortIndicator column={column} />;\n const columnLabel = HeaderCellLabelRenderer ? (\n <HeaderCellLabelRenderer\n className={`${classBase}-label`}\n column={column}\n />\n ) : (\n <div className={`${classBase}-label`}>{column.label ?? column.name}</div>\n );\n const columnContent = HeaderCellContentRenderer\n ? [<HeaderCellContentRenderer column={column} key=\"content\" />]\n : [];\n\n if (showMenu) {\n const columnMenu = <ColumnMenu column={column} />;\n\n if (column.align === \"right\") {\n return [sortIndicator, columnLabel, columnContent, columnMenu];\n } else {\n return [columnMenu, columnLabel, sortIndicator, columnContent];\n }\n } else {\n if (column.align === \"right\") {\n return [sortIndicator, columnLabel, columnContent];\n } else {\n return [columnLabel, sortIndicator, columnContent];\n }\n }\n }, [HeaderCellContentRenderer, HeaderCellLabelRenderer, column, showMenu]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (evt) => {\n !isResizing && onClick?.(evt);\n },\n [isResizing, onClick],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n onClick?.(evt);\n }\n },\n [onClick],\n );\n\n const { className, style } = useCell(column, classBase, true);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(className, classNameProp, {\n [`${classBase}-resizing`]: isResizing,\n [`${classBase}-noMenu`]: showMenu === false,\n })}\n onClick={handleClick}\n onContextMenu={handleContextMenu}\n onKeyDown={handleKeyDown}\n ref={rootRef}\n role=\"columnheader\"\n style={style}\n >\n {...headerItems}\n {column.resizeable !== false ? <ColumnResizer {...resizeProps} /> : null}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","headerCellCss","useRef","useTableColumnResize","useContextMenu","useMemo","jsx","SortIndicator","ColumnMenu","useCallback","useCell","jsxs","ColumnResizer"],"mappings":"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"}
|
package/cjs/moving-window.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"moving-window.js","sources":["../src/moving-window.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n isRowSelectedLast,\n metadataKeys,\n WindowRange
|
|
1
|
+
{"version":3,"file":"moving-window.js","sources":["../src/moving-window.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n isRowSelectedLast,\n metadataKeys,\n WindowRange,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\n\nconst { SELECTED } = metadataKeys;\n\nexport class MovingWindow {\n public data: DataSourceRow[];\n public rowCount = 0;\n private range: WindowRange;\n\n constructor({ from, to }: VuuRange) {\n this.range = new WindowRange(from, to);\n //internal data is always 0 based, we add range.from to determine an offset\n this.data = new Array(Math.max(0, to - from));\n this.rowCount = 0;\n }\n\n setRowCount = (rowCount: number) => {\n if (rowCount < this.data.length) {\n this.data.length = rowCount;\n }\n\n this.rowCount = rowCount;\n };\n\n add(data: DataSourceRow) {\n const [index] = data;\n if (this.isWithinRange(index)) {\n const internalIndex = index - this.range.from;\n this.data[internalIndex] = data;\n\n // Hack until we can deal with this more elegantly. When we have a block\n // select operation, first row is selected (and updated via server), then\n // remaining rows are selected when we select the block-end row. We get an\n // update for all rows except first. Because we're extending the select status\n // on the client, we have to adjust the first row selected (its still selected\n // but is no longer the 'last selected row in block')\n // Maybe answer is to apply ALL the selection status code here, not in Viewport\n if (data[SELECTED]) {\n const previousRow = this.data[internalIndex - 1];\n if (isRowSelectedLast(previousRow)) {\n this.data[internalIndex - 1] = previousRow.slice() as DataSourceRow;\n this.data[internalIndex - 1][SELECTED] -= 4;\n }\n }\n }\n }\n\n getAtIndex(index: number) {\n return this.range.isWithin(index) &&\n this.data[index - this.range.from] != null\n ? this.data[index - this.range.from]\n : undefined;\n }\n\n isWithinRange(index: number) {\n return this.range.isWithin(index);\n }\n\n setRange({ from, to }: VuuRange) {\n if (from !== this.range.from || to !== this.range.to) {\n const [overlapFrom, overlapTo] = this.range.overlap(from, to);\n const newData = new Array(Math.max(0, to - from));\n for (let i = overlapFrom; i < overlapTo; i++) {\n const data = this.getAtIndex(i);\n if (data) {\n const index = i - from;\n newData[index] = data;\n }\n }\n this.data = newData;\n this.range.from = from;\n this.range.to = to;\n }\n }\n\n getSelectedRows() {\n return this.data.filter((row) => row[SELECTED] !== 0);\n }\n}\n"],"names":["metadataKeys","WindowRange","isRowSelectedLast"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sources":["../../src/table-cell/TableCell.tsx"],"sourcesContent":["import { DataItemCommitHandler, TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { isNumericColumn } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MouseEventHandler, useCallback } from \"react\";\nimport { useCell } from \"../useCell\";\n\nimport tableCellCss from \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n column,\n columnMap,\n onClick,\n onDataEdited,\n row
|
|
1
|
+
{"version":3,"file":"TableCell.js","sources":["../../src/table-cell/TableCell.tsx"],"sourcesContent":["import { DataItemCommitHandler, TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { isNumericColumn } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MouseEventHandler, useCallback } from \"react\";\nimport { useCell } from \"../useCell\";\n\nimport tableCellCss from \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n column,\n columnMap,\n onClick,\n onDataEdited,\n row,\n}: TableCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-cell\",\n css: tableCellCss,\n window: targetWindow,\n });\n\n const { className, style } = useCell(column, classBase);\n const { CellRenderer, index, name, valueFormatter } = column;\n const dataIdx = columnMap[name];\n\n const handleDataItemEdited = useCallback<DataItemCommitHandler>(\n (value) => {\n if (onDataEdited) {\n let typedValue = value;\n if (isNumericColumn(column) && typeof value === \"string\") {\n typedValue =\n column.serverDataType === \"double\"\n ? parseFloat(value)\n : parseInt(value);\n }\n return onDataEdited?.(row, name, typedValue);\n } else {\n throw Error(\n \"TableCell onDataEdited prop not supplied for an editable cell\",\n );\n }\n },\n [column, name, onDataEdited, row],\n );\n\n const handleClick = useCallback<MouseEventHandler>(\n (evt) => {\n onClick?.(evt, column);\n },\n [column, onClick],\n );\n\n return (\n <div\n aria-colindex={index}\n className={className}\n onClick={onClick ? handleClick : undefined}\n role=\"cell\"\n style={style}\n >\n {CellRenderer ? (\n <CellRenderer\n column={column}\n columnMap={columnMap}\n onCommit={handleDataItemEdited}\n row={row}\n />\n ) : (\n valueFormatter(row[dataIdx])\n )}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","tableCellCss","useCell","useCallback","isNumericColumn","jsx"],"mappings":";;;;;;;;;;AASA,MAAM,SAAY,GAAA,cAAA,CAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AACF,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAAC,eAAA,CAAQ,QAAQ,SAAS,CAAA,CAAA;AACtD,EAAA,MAAM,EAAE,YAAA,EAAc,KAAO,EAAA,IAAA,EAAM,gBAAmB,GAAA,MAAA,CAAA;AACtD,EAAM,MAAA,OAAA,GAAU,UAAU,IAAI,CAAA,CAAA;AAE9B,EAAA,MAAM,oBAAuB,GAAAC,iBAAA;AAAA,IAC3B,CAAC,KAAU,KAAA;AACT,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,IAAI,UAAa,GAAA,KAAA,CAAA;AACjB,QAAA,IAAIC,wBAAgB,CAAA,MAAM,CAAK,IAAA,OAAO,UAAU,QAAU,EAAA;AACxD,UAAA,UAAA,GACE,OAAO,cAAmB,KAAA,QAAA,GACtB,WAAW,KAAK,CAAA,GAChB,SAAS,KAAK,CAAA,CAAA;AAAA,SACtB;AACA,QAAO,OAAA,YAAA,GAAe,GAAK,EAAA,IAAA,EAAM,UAAU,CAAA,CAAA;AAAA,OACtC,MAAA;AACL,QAAM,MAAA,KAAA;AAAA,UACJ,+DAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,MAAA,EAAQ,IAAM,EAAA,YAAA,EAAc,GAAG,CAAA;AAAA,GAClC,CAAA;AAEA,EAAA,MAAM,WAAc,GAAAD,iBAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO,CAAA;AAAA,GAClB,CAAA;AAEA,EACE,uBAAAE,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,KAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAA,EAAS,UAAU,WAAc,GAAA,KAAA,CAAA;AAAA,MACjC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MAEC,QACC,EAAA,YAAA,mBAAAA,cAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,SAAA;AAAA,UACA,QAAU,EAAA,oBAAA;AAAA,UACV,GAAA;AAAA,SAAA;AAAA,OAGF,GAAA,cAAA,CAAe,GAAI,CAAA,OAAO,CAAC,CAAA;AAAA,KAAA;AAAA,GAE/B,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableGroupCell.js","sources":["../../src/table-cell/TableGroupCell.tsx"],"sourcesContent":["import { GroupColumnDescriptor, TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { getGroupValueAndOffset, metadataKeys } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MouseEvent, useCallback } from \"react\";\nimport { useCell } from \"../useCell\";\nimport cx from \"clsx\";\n\nimport tableGroupCellCss from \"./TableGroupCell.css\";\n\nconst { IS_LEAF } = metadataKeys;\n\nconst classBase = \"vuuTableGroupCell\";\n\nexport const TableGroupCell = ({\n column,\n columnMap,\n onClick,\n row
|
|
1
|
+
{"version":3,"file":"TableGroupCell.js","sources":["../../src/table-cell/TableGroupCell.tsx"],"sourcesContent":["import { GroupColumnDescriptor, TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { getGroupValueAndOffset, metadataKeys } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MouseEvent, useCallback } from \"react\";\nimport { useCell } from \"../useCell\";\nimport cx from \"clsx\";\n\nimport tableGroupCellCss from \"./TableGroupCell.css\";\n\nconst { IS_LEAF } = metadataKeys;\n\nconst classBase = \"vuuTableGroupCell\";\n\nexport const TableGroupCell = ({\n column,\n columnMap,\n onClick,\n row,\n}: TableCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-group-cell\",\n css: tableGroupCellCss,\n window: targetWindow,\n });\n\n const { columns } = column as GroupColumnDescriptor;\n const [value, offset] = getGroupValueAndOffset(columns, row, columnMap);\n const { className, style } = useCell(column, classBase);\n\n const handleClick = useCallback(\n (evt: MouseEvent<HTMLDivElement>) => {\n onClick?.(evt, column);\n },\n [column, onClick],\n );\n\n const isLeaf = row[IS_LEAF];\n const spacers = Array(offset)\n .fill(0)\n .map((n, i) => <span className={`${classBase}-spacer`} key={i} />);\n\n return (\n <div\n className={cx(className, \"vuuTableCell\")}\n role=\"cell\"\n style={style}\n onClick={isLeaf ? undefined : handleClick}\n >\n {spacers}\n {isLeaf ? null : (\n <span className={`${classBase}-toggle`} data-icon=\"triangle-right\" />\n )}\n <span>{value}</span>\n </div>\n );\n};\n"],"names":["metadataKeys","useWindow","useComponentCssInjection","tableGroupCellCss","getGroupValueAndOffset","useCell","useCallback","jsxs","jsx"],"mappings":";;;;;;;;;;;AAUA,MAAM,EAAE,SAAY,GAAAA,qBAAA,CAAA;AAEpB,MAAM,SAAY,GAAA,mBAAA,CAAA;AAEX,MAAM,iBAAiB,CAAC;AAAA,EAC7B,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA;AACF,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,SAAY,GAAA,MAAA,CAAA;AACpB,EAAA,MAAM,CAAC,KAAO,EAAA,MAAM,IAAIC,+BAAuB,CAAA,OAAA,EAAS,KAAK,SAAS,CAAA,CAAA;AACtE,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAAC,eAAA,CAAQ,QAAQ,SAAS,CAAA,CAAA;AAEtD,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,GAAoC,KAAA;AACnC,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO,CAAA;AAAA,GAClB,CAAA;AAEA,EAAM,MAAA,MAAA,GAAS,IAAI,OAAO,CAAA,CAAA;AAC1B,EAAA,MAAM,UAAU,KAAM,CAAA,MAAM,EACzB,IAAK,CAAA,CAAC,EACN,GAAI,CAAA,CAAC,CAAG,EAAA,CAAA,oCAAO,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA,EAAA,EAAgB,CAAG,CAAE,CAAA,CAAA;AAEnE,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,cAAc,CAAA;AAAA,MACvC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MACA,OAAA,EAAS,SAAS,KAAY,CAAA,GAAA,WAAA;AAAA,MAE7B,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,QACA,MAAA,GAAS,uBACPC,cAAA,CAAA,MAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,CAAW,OAAA,CAAA,EAAA,WAAA,EAAU,gBAAiB,EAAA,CAAA;AAAA,wBAErEA,cAAA,CAAC,UAAM,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACf,CAAA;AAEJ;;;;"}
|
package/cjs/table-config.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-config.js","sources":["../src/table-config.ts"],"sourcesContent":["import {\n ColumnDescriptor,\n RuntimeColumnDescriptor,\n TableConfig
|
|
1
|
+
{"version":3,"file":"table-config.js","sources":["../src/table-config.ts"],"sourcesContent":["import {\n ColumnDescriptor,\n RuntimeColumnDescriptor,\n TableConfig,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getRuntimeColumnWidth } from \"@vuu-ui/vuu-utils\";\n\nexport type MoveColumnTableConfigAction = {\n type: \"col-move\";\n column: ColumnDescriptor;\n fromIndex: number;\n toIndex: number;\n};\n\nexport type ResizeColumnTableConfigAction = {\n type: \"col-size\";\n column: ColumnDescriptor;\n columns: RuntimeColumnDescriptor[];\n width: number;\n};\n\nexport type SubscribeColumnTableConfigAction = {\n type: \"subscribed\";\n column: ColumnDescriptor;\n value: boolean;\n};\n\nexport type UpdateColumnPropertyTableConfigAction = {\n type: \"column-prop\";\n column: ColumnDescriptor;\n property: keyof ColumnDescriptor;\n value: boolean | number | string;\n};\n\nexport type TableConfigAction =\n | MoveColumnTableConfigAction\n | ResizeColumnTableConfigAction\n | UpdateColumnPropertyTableConfigAction;\n\nexport const updateTableConfig = (\n config: TableConfig,\n action: TableConfigAction,\n): TableConfig => {\n switch (action.type) {\n case \"col-size\": {\n const { columns: runtimeColumns, width } = action;\n const isFit = config.columnLayout === \"fit\";\n return {\n ...config,\n columnLayout: isFit ? \"manual\" : config.columnLayout,\n columns: config.columns.map((col) => {\n if (isFit) {\n // When user resizes a column and 'fit' column layout is in effect,\n // column layout becomes 'manual' and all columns are set to\n // their current widths (unless subsequently resized by user).\n return col.name === action.column.name\n ? { ...col, width }\n : col.width\n ? col\n : { ...col, width: getRuntimeColumnWidth(col, runtimeColumns) };\n } else {\n return col.name === action.column.name\n ? { ...col, width: action.width }\n : col;\n }\n }),\n };\n }\n case \"column-prop\":\n return {\n ...config,\n columns: config.columns.map((col) =>\n col.name === action.column.name\n ? { ...col, [action.property]: action.value }\n : col,\n ),\n };\n\n default:\n return config;\n }\n};\n"],"names":["getRuntimeColumnWidth"],"mappings":";;;;AAuCa,MAAA,iBAAA,GAAoB,CAC/B,MAAA,EACA,MACgB,KAAA;AAChB,EAAA,QAAQ,OAAO,IAAM;AAAA,IACnB,KAAK,UAAY,EAAA;AACf,MAAA,MAAM,EAAE,OAAA,EAAS,cAAgB,EAAA,KAAA,EAAU,GAAA,MAAA,CAAA;AAC3C,MAAM,MAAA,KAAA,GAAQ,OAAO,YAAiB,KAAA,KAAA,CAAA;AACtC,MAAO,OAAA;AAAA,QACL,GAAG,MAAA;AAAA,QACH,YAAA,EAAc,KAAQ,GAAA,QAAA,GAAW,MAAO,CAAA,YAAA;AAAA,QACxC,OAAS,EAAA,MAAA,CAAO,OAAQ,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AACnC,UAAA,IAAI,KAAO,EAAA;AAIT,YAAO,OAAA,GAAA,CAAI,SAAS,MAAO,CAAA,MAAA,CAAO,OAC9B,EAAE,GAAG,KAAK,KAAM,EAAA,GAChB,IAAI,KACF,GAAA,GAAA,GACA,EAAE,GAAG,GAAA,EAAK,OAAOA,8BAAsB,CAAA,GAAA,EAAK,cAAc,CAAE,EAAA,CAAA;AAAA,WAC7D,MAAA;AACL,YAAO,OAAA,GAAA,CAAI,IAAS,KAAA,MAAA,CAAO,MAAO,CAAA,IAAA,GAC9B,EAAE,GAAG,GAAK,EAAA,KAAA,EAAO,MAAO,CAAA,KAAA,EACxB,GAAA,GAAA,CAAA;AAAA,WACN;AAAA,SACD,CAAA;AAAA,OACH,CAAA;AAAA,KACF;AAAA,IACA,KAAK,aAAA;AACH,MAAO,OAAA;AAAA,QACL,GAAG,MAAA;AAAA,QACH,OAAA,EAAS,OAAO,OAAQ,CAAA,GAAA;AAAA,UAAI,CAAC,GAC3B,KAAA,GAAA,CAAI,IAAS,KAAA,MAAA,CAAO,OAAO,IACvB,GAAA,EAAE,GAAG,GAAA,EAAK,CAAC,MAAO,CAAA,QAAQ,GAAG,MAAA,CAAO,OACpC,GAAA,GAAA;AAAA,SACN;AAAA,OACF,CAAA;AAAA,IAEF;AACE,MAAO,OAAA,MAAA,CAAA;AAAA,GACX;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderProvider.js","sources":["../../src/table-header/HeaderProvider.tsx"],"sourcesContent":["import { BaseRowProps } from \"@vuu-ui/vuu-table-types\";\nimport { createContext, FC, useContext } from \"react\";\n\nconst HeaderContext = createContext<BaseRowProps>({ columns: [] });\n\nexport const HeaderProvider: FC<BaseRowProps> = ({\n children,\n columns,\n virtualColSpan
|
|
1
|
+
{"version":3,"file":"HeaderProvider.js","sources":["../../src/table-header/HeaderProvider.tsx"],"sourcesContent":["import { BaseRowProps } from \"@vuu-ui/vuu-table-types\";\nimport { createContext, FC, useContext } from \"react\";\n\nconst HeaderContext = createContext<BaseRowProps>({ columns: [] });\n\nexport const HeaderProvider: FC<BaseRowProps> = ({\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,CAAA;AAE1D,MAAM,iBAAmC,CAAC;AAAA,EAC/C,QAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAAC,cAAA,CAAC,cAAc,QAAd,EAAA,EAAuB,OAAO,EAAE,OAAA,EAAS,cAAe,EAAA,EACtD,QACH,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,cAAA,GAAiB,MAAMC,gBAAA,CAAW,aAAa;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","sources":["../../src/table-header/TableHeader.tsx"],"sourcesContent":["import { VuuSortType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n ColumnDescriptor,\n CustomHeader,\n RuntimeColumnDescriptor,\n TableColumnResizeHandler,\n TableConfig,\n TableHeadings
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sources":["../../src/table-header/TableHeader.tsx"],"sourcesContent":["import { VuuSortType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n ColumnDescriptor,\n CustomHeader,\n RuntimeColumnDescriptor,\n TableColumnResizeHandler,\n TableConfig,\n TableHeadings,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isGroupColumn, isNotHidden } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { isValidElement, memo, useMemo } from \"react\";\nimport { GroupHeaderCell, HeaderCell } from \"../header-cell\";\nimport { useTableHeader } from \"./useTableHeader\";\nimport { HeaderProvider } from \"./HeaderProvider\";\n\nexport type ColumnSortHandler = (\n column: ColumnDescriptor,\n addToExistingSort: boolean,\n sortType?: VuuSortType,\n) => void;\n\nexport interface TableHeaderProps {\n allowDragColumnHeader: boolean;\n classBase?: string;\n columns: RuntimeColumnDescriptor[];\n customHeader?: CustomHeader | CustomHeader[];\n headings: TableHeadings;\n onHeightMeasured: (height: number) => void;\n onResizeColumn: TableColumnResizeHandler;\n onMoveColumn: (columns: ColumnDescriptor[]) => void;\n onMoveGroupColumn: (columns: ColumnDescriptor[]) => void;\n onRemoveGroupColumn: (column: RuntimeColumnDescriptor) => void;\n onSortColumn: ColumnSortHandler;\n showColumnHeaderMenus: boolean;\n tableConfig: TableConfig;\n tableId: string;\n virtualColSpan?: number;\n}\n\nexport const TableHeader = memo(\n ({\n allowDragColumnHeader,\n classBase = \"vuuTable\",\n columns,\n customHeader,\n headings,\n onHeightMeasured,\n onMoveColumn,\n onMoveGroupColumn,\n onRemoveGroupColumn,\n onResizeColumn,\n onSortColumn,\n showColumnHeaderMenus,\n tableConfig,\n tableId,\n virtualColSpan = 0,\n }: TableHeaderProps) => {\n const {\n draggableColumn,\n draggedColumnIndex,\n onClick,\n onMouseDown,\n setContainerRef,\n } = useTableHeader({\n allowDragColumnHeader,\n columns,\n onHeightMeasured,\n onMoveColumn,\n onSortColumn,\n tableConfig,\n });\n\n const customHeaders = useMemo(() => {\n const createElement = (Component: CustomHeader, key?: number) => (\n <Component\n columns={columns}\n key={key}\n virtualColSpan={virtualColSpan}\n />\n );\n if (customHeader === undefined) {\n return null;\n } else if (Array.isArray(customHeader)) {\n if (customHeader.some(isValidElement)) {\n return (\n <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n {customHeader.map((header, i) =>\n isValidElement(header) ? header : createElement(header, i),\n )}\n </HeaderProvider>\n );\n } else {\n return customHeader.map(createElement);\n }\n } else if (isValidElement(customHeader)) {\n return (\n <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n {customHeader}\n </HeaderProvider>\n );\n } else {\n return createElement(customHeader);\n }\n }, [columns, customHeader, virtualColSpan]);\n\n return (\n <div className={`${classBase}-col-headings`} ref={setContainerRef}>\n {headings.map((colHeaders, i) => (\n <div className=\"vuuTable-heading\" key={i}>\n {colHeaders.map(({ label, width }, j) => (\n <div key={j} className=\"vuuTable-headingCell\" style={{ width }}>\n {label}\n </div>\n ))}\n </div>\n ))}\n <div className={`${classBase}-col-headers`} role=\"row\">\n {virtualColSpan > 0 ? (\n <div\n role=\"cell\"\n className=\"vuuTableCell\"\n style={{ width: virtualColSpan }}\n />\n ) : null}\n {columns.filter(isNotHidden).map((col, i) =>\n isGroupColumn(col) ? (\n <GroupHeaderCell\n aria-colindex={col.index}\n column={col}\n data-index={i}\n key={col.name}\n onMoveColumn={onMoveGroupColumn}\n onRemoveColumn={onRemoveGroupColumn}\n onResize={onResizeColumn}\n />\n ) : (\n <HeaderCell\n aria-colindex={col.index}\n className={cx({\n \"vuuDraggable-dragAway\": i === draggedColumnIndex,\n })}\n column={col}\n data-index={i}\n id={`${tableId}-col-${i}`}\n key={col.name}\n onClick={onClick}\n onMouseDown={onMouseDown}\n onResize={onResizeColumn}\n showMenu={showColumnHeaderMenus}\n />\n ),\n )}\n {draggableColumn}\n </div>\n {customHeaders}\n </div>\n );\n },\n);\nTableHeader.displayName = \"TableHeader\";\n"],"names":["memo","useTableHeader","useMemo","jsx","isValidElement","HeaderProvider","isNotHidden","isGroupColumn","GroupHeaderCell","HeaderCell"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableHeader.js","sources":["../../src/table-header/useTableHeader.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n DropOptions,\n useDragDrop as useDragDrop
|
|
1
|
+
{"version":3,"file":"useTableHeader.js","sources":["../../src/table-header/useTableHeader.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n DropOptions,\n useDragDrop as useDragDrop,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n moveColumnTo,\n queryClosest,\n visibleColumnAtIndex,\n} from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useRef } 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 | \"allowDragColumnHeader\"\n | \"columns\"\n | \"onMoveColumn\"\n | \"onSortColumn\"\n | \"tableConfig\"\n > {\n label?: string;\n onHeightMeasured: (height: number) => void;\n onMoveColumn: (columns: ColumnDescriptor[]) => void;\n onSortColumn: (column: ColumnDescriptor, addToExistingSort: boolean) => void;\n}\n\nexport const useTableHeader = ({\n allowDragColumnHeader,\n columns,\n onHeightMeasured,\n onMoveColumn,\n onSortColumn,\n tableConfig,\n}: TableHeaderHookProps) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n const scrollingContainerRef = useRef<HTMLDivElement | null>(null);\n const { rowRef } = useMeasuredHeight({\n onHeightMeasured,\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(moveColumnTo(tableConfig.columns, column, insertPos - 1));\n } else {\n onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));\n }\n },\n [columns, onMoveColumn, tableConfig.columns],\n );\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 const isAdditive = evt.shiftKey;\n column && onSortColumn(column, isAdditive);\n },\n [columns, onSortColumn],\n );\n\n // Drag Drop column headers\n const {\n onMouseDown: columnHeaderDragMouseDown,\n draggable: draggableColumn,\n ...dragDropHook\n } = useDragDrop({\n allowDragDrop: allowDragColumnHeader,\n containerRef,\n draggableClassName: `vuuTable`,\n itemQuery: \".vuuTableHeaderCell\",\n onDrop: handleDropColumnHeader,\n orientation: \"horizontal\",\n scrollingContainerRef,\n });\n\n return {\n draggableColumn,\n draggedColumnIndex: dragDropHook.draggedItemIndex,\n onClick: handleColumnHeaderClick,\n onMouseDown: columnHeaderDragMouseDown,\n setContainerRef: useForkRef(setContainerRef, rowRef),\n };\n};\n"],"names":["useRef","useMeasuredHeight","useCallback","moveColumnTo","queryClosest","visibleColumnAtIndex","useDragDrop","useForkRef"],"mappings":"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"}
|
package/cjs/useCell.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCell.js","sources":["../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
|
|
1
|
+
{"version":3,"file":"useCell.js","sources":["../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, {\n vuuPinFloating: column.pin === \"floating\",\n vuuPinLeft: column.pin === \"left\",\n vuuPinRight: column.pin === \"right\",\n vuuEndPin: isHeader && column.endPin,\n // [`${classBase}-resizing`]: column.resizing,\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 }, [column, classBase, isHeader]);\n"],"names":["useMemo","getColumnStyle"],"mappings":";;;;;;AAKa,MAAA,OAAA,GAAU,CACrB,MAAA,EACA,SACA,EAAA,QAAA;AAAA;AAAA,EAGAA,cAAQ,MAAM;AACZ,IAAM,MAAA,SAAA,GAAY,GAAG,SAAW,EAAA;AAAA,MAC9B,cAAA,EAAgB,OAAO,GAAQ,KAAA,UAAA;AAAA,MAC/B,UAAA,EAAY,OAAO,GAAQ,KAAA,MAAA;AAAA,MAC3B,WAAA,EAAa,OAAO,GAAQ,KAAA,OAAA;AAAA,MAC5B,SAAA,EAAW,YAAY,MAAO,CAAA,MAAA;AAAA;AAAA,MAE9B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,MAAO,CAAA,QAAA;AAAA,MAClC,CAAC,CAAG,EAAA,SAAS,CAAQ,MAAA,CAAA,GAAG,OAAO,KAAU,KAAA,OAAA;AAAA,KAC1C,CAAA,CAAA;AAED,IAAM,MAAA,KAAA,GAAQC,wBAAe,MAAM,CAAA,CAAA;AACnC,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA,KAAA;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAA,EAAW,QAAQ,CAAC,CAAA;AAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCellEditing.js","sources":["../src/useCellEditing.ts"],"sourcesContent":["import { isCharacterKey } from \"@vuu-ui/vuu-utils\";\nimport {\n FocusEventHandler,\n KeyboardEvent as ReactKeyboardEvent,\n MouseEvent,\n useCallback
|
|
1
|
+
{"version":3,"file":"useCellEditing.js","sources":["../src/useCellEditing.ts"],"sourcesContent":["import { isCharacterKey } from \"@vuu-ui/vuu-utils\";\nimport {\n FocusEventHandler,\n KeyboardEvent as ReactKeyboardEvent,\n MouseEvent,\n useCallback,\n} from \"react\";\nimport { cellIsTextInput } from \"./table-dom-utils\";\n\nexport interface CellEditingHookProps {\n navigate: () => void;\n}\n\nexport const useCellEditing = ({ navigate }: CellEditingHookProps) => {\n const commitHandler = useCallback(() => {\n navigate();\n }, [navigate]);\n\n const editInput = useCallback(\n (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n const cellEl = evt.target as HTMLDivElement;\n const input = cellEl.matches(\"input\")\n ? (cellEl as HTMLInputElement)\n : cellEl.querySelector(\"input\");\n\n if (input) {\n input.focus();\n input.select();\n }\n },\n [],\n );\n\n const focusInput = useCallback(\n (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n const cellEl = evt.target as HTMLDivElement;\n const input = cellEl.querySelector(\"input\");\n if (input) {\n input.focus();\n input.select();\n }\n },\n [],\n );\n\n const handleKeyDown = useCallback(\n (e: ReactKeyboardEvent<HTMLElement>) => {\n const el = e.target as HTMLElement;\n if (cellIsTextInput(el)) {\n if (isCharacterKey(e.key)) {\n editInput(e);\n } else if (e.key === \"Enter\") {\n focusInput(e);\n }\n }\n },\n [editInput, focusInput],\n );\n\n const handleDoubleClick = useCallback(\n (e: MouseEvent<HTMLElement>) => {\n const el = e.target as HTMLElement;\n if (el.matches(\"input\") || el.querySelector(\"input\")) {\n editInput(e);\n e.stopPropagation();\n }\n },\n [editInput],\n );\n\n const handleBlur = useCallback<FocusEventHandler>(\n (e) => {\n const el = e.target as HTMLElement;\n el.removeEventListener(\"vuu-commit\", commitHandler, true);\n },\n [commitHandler],\n );\n\n const handleFocus = useCallback<FocusEventHandler>(\n (e) => {\n const el = e.target as HTMLElement;\n el.addEventListener(\"vuu-commit\", commitHandler, true);\n },\n [commitHandler],\n );\n\n return {\n onBlur: handleBlur,\n onDoubleClick: handleDoubleClick,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n };\n};\n"],"names":["useCallback","cellIsTextInput","isCharacterKey"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useControlledTableNavigation.js","sources":["../src/useControlledTableNavigation.ts"],"sourcesContent":["import { useStateRef } from \"@vuu-ui/vuu-ui-controls\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback, useRef } from \"react\";\n\nexport const useControlledTableNavigation = (\n initialValue: number,\n rowCount: number
|
|
1
|
+
{"version":3,"file":"useControlledTableNavigation.js","sources":["../src/useControlledTableNavigation.ts"],"sourcesContent":["import { useStateRef } from \"@vuu-ui/vuu-ui-controls\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback, useRef } from \"react\";\n\nexport const useControlledTableNavigation = (\n initialValue: number,\n rowCount: number,\n) => {\n const tableRef = useRef<HTMLDivElement>(null);\n\n const [highlightedIndexRef, setHighlightedIndex] = useStateRef<\n number | undefined\n >(initialValue);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"ArrowDown\") {\n setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));\n } else if (e.key === \"ArrowUp\") {\n setHighlightedIndex((index = -1) => Math.max(0, index - 1));\n } else if (e.key === \"Enter\" || e.key === \" \") {\n const { current: rowIdx } = highlightedIndexRef;\n // induce an onSelect event by 'clicking' the row\n if (typeof rowIdx === \"number\") {\n const rowEl = tableRef.current?.querySelector(\n `[aria-rowindex=\"${rowIdx + 1}\"]`,\n ) as HTMLElement;\n if (rowEl) {\n dispatchMouseEvent(rowEl, \"click\");\n }\n }\n }\n },\n [highlightedIndexRef, rowCount, setHighlightedIndex],\n );\n\n const handleHighlight = useCallback(\n (idx: number) => {\n setHighlightedIndex(idx);\n },\n [setHighlightedIndex],\n );\n\n return {\n highlightedIndexRef,\n onHighlight: handleHighlight,\n onKeyDown: handleKeyDown,\n tableRef,\n };\n};\n"],"names":["useRef","useStateRef","useCallback","dispatchMouseEvent"],"mappings":";;;;;;AAIa,MAAA,4BAAA,GAA+B,CAC1C,YAAA,EACA,QACG,KAAA;AACH,EAAM,MAAA,QAAA,GAAWA,aAAuB,IAAI,CAAA,CAAA;AAE5C,EAAA,MAAM,CAAC,mBAAA,EAAqB,mBAAmB,CAAA,GAAIC,0BAEjD,YAAY,CAAA,CAAA;AAEd,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,WAAa,EAAA;AACzB,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,QAAW,GAAA,CAAA,EAAG,KAAQ,GAAA,CAAC,CAAC,CAAA,CAAA;AAAA,OACvE,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,SAAW,EAAA;AAC9B,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,CAAG,EAAA,KAAA,GAAQ,CAAC,CAAC,CAAA,CAAA;AAAA,iBACjD,CAAE,CAAA,GAAA,KAAQ,OAAW,IAAA,CAAA,CAAE,QAAQ,GAAK,EAAA;AAC7C,QAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,mBAAA,CAAA;AAE5B,QAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,UAAM,MAAA,KAAA,GAAQ,SAAS,OAAS,EAAA,aAAA;AAAA,YAC9B,CAAA,gBAAA,EAAmB,SAAS,CAAC,CAAA,EAAA,CAAA;AAAA,WAC/B,CAAA;AACA,UAAA,IAAI,KAAO,EAAA;AACT,YAAAC,2BAAA,CAAmB,OAAO,OAAO,CAAA,CAAA;AAAA,WACnC;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAqB,EAAA,QAAA,EAAU,mBAAmB,CAAA;AAAA,GACrD,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAAD,iBAAA;AAAA,IACtB,CAAC,GAAgB,KAAA;AACf,MAAA,mBAAA,CAAoB,GAAG,CAAA,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,mBAAmB,CAAA;AAAA,GACtB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,mBAAA;AAAA,IACA,WAAa,EAAA,eAAA;AAAA,IACb,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
package/cjs/useDataSource.js
CHANGED
|
@@ -4,10 +4,8 @@ var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
|
4
4
|
var react = require('react');
|
|
5
5
|
var movingWindow = require('./moving-window.js');
|
|
6
6
|
|
|
7
|
-
const isVuuFeatureInvocation = (action) => action.type === "vuu-link-created" || action.type === "vuu-link-removed";
|
|
8
7
|
const useDataSource = ({
|
|
9
8
|
dataSource,
|
|
10
|
-
onFeatureInvocation,
|
|
11
9
|
onSizeChange,
|
|
12
10
|
onSubscribed,
|
|
13
11
|
range = vuuUtils.NULL_RANGE,
|
|
@@ -56,13 +54,11 @@ const useDataSource = ({
|
|
|
56
54
|
data.current = dataWindow.data;
|
|
57
55
|
hasUpdated.current = true;
|
|
58
56
|
}
|
|
59
|
-
} else if (isVuuFeatureInvocation(message)) {
|
|
60
|
-
onFeatureInvocation?.(message);
|
|
61
57
|
} else {
|
|
62
58
|
console.log(`useDataSource unexpected message ${message.type}`);
|
|
63
59
|
}
|
|
64
60
|
},
|
|
65
|
-
[dataWindow,
|
|
61
|
+
[dataWindow, onSizeChange, onSubscribed, setData]
|
|
66
62
|
);
|
|
67
63
|
const getSelectedRows = react.useCallback(() => {
|
|
68
64
|
return dataWindow.getSelectedRows();
|
|
@@ -105,6 +101,5 @@ const useDataSource = ({
|
|
|
105
101
|
};
|
|
106
102
|
};
|
|
107
103
|
|
|
108
|
-
exports.isVuuFeatureInvocation = isVuuFeatureInvocation;
|
|
109
104
|
exports.useDataSource = useDataSource;
|
|
110
105
|
//# sourceMappingURL=useDataSource.js.map
|
package/cjs/useDataSource.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDataSource.js","sources":["../src/useDataSource.ts"],"sourcesContent":["import {\n DataSource,\n DataSourceRow,\n DataSourceSubscribedMessage,\n SubscribeCallback,\n
|
|
1
|
+
{"version":3,"file":"useDataSource.js","sources":["../src/useDataSource.ts"],"sourcesContent":["import {\n DataSource,\n DataSourceRow,\n DataSourceSubscribedMessage,\n SubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { getFullRange, NULL_RANGE, rangesAreSame } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { MovingWindow } from \"./moving-window\";\n\nexport interface DataSourceHookProps {\n dataSource: DataSource;\n onSizeChange: (size: number) => void;\n onSubscribed: (subscription: DataSourceSubscribedMessage) => void;\n range?: VuuRange;\n renderBufferSize?: number;\n}\n\nexport const useDataSource = ({\n dataSource,\n onSizeChange,\n onSubscribed,\n range = NULL_RANGE,\n renderBufferSize = 0,\n}: DataSourceHookProps) => {\n const [, forceUpdate] = useState<unknown>(null);\n const data = useRef<DataSourceRow[]>([]);\n const isMounted = useRef(true);\n const hasUpdated = useRef(false);\n const rangeRef = useRef<VuuRange>(range);\n\n const dataWindow = useMemo(\n () => new MovingWindow(getFullRange(range, renderBufferSize)),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [],\n );\n\n const setData = useCallback(\n (updates: DataSourceRow[]) => {\n for (const row of updates) {\n dataWindow.add(row);\n }\n data.current = dataWindow.data;\n if (isMounted.current) {\n // TODO do we ever need to worry about missing updates here ?\n forceUpdate({});\n } else {\n // do nothing\n }\n },\n [dataWindow],\n );\n\n const datasourceMessageHandler: SubscribeCallback = useCallback(\n (message) => {\n if (message.type === \"subscribed\") {\n onSubscribed?.(message);\n } else if (message.type === \"viewport-update\") {\n if (typeof message.size === \"number\") {\n onSizeChange?.(message.size);\n const size = dataWindow.data.length;\n dataWindow.setRowCount(message.size);\n if (dataWindow.data.length < size) {\n forceUpdate({});\n }\n }\n if (message.rows) {\n setData(message.rows);\n } else if (message.size === 0) {\n setData([]);\n } else if (typeof message.size === \"number\") {\n data.current = dataWindow.data;\n hasUpdated.current = true;\n }\n } else {\n console.log(`useDataSource unexpected message ${message.type}`);\n }\n },\n [dataWindow, onSizeChange, onSubscribed, setData],\n );\n\n const getSelectedRows = useCallback(() => {\n return dataWindow.getSelectedRows();\n }, [dataWindow]);\n\n useEffect(() => {\n isMounted.current = true;\n dataSource.resume?.();\n return () => {\n isMounted.current = false;\n dataSource.suspend?.();\n };\n }, [dataSource]);\n\n useEffect(() => {\n if (dataSource.status === \"disabled\") {\n dataSource.enable?.(datasourceMessageHandler);\n } else {\n //TODO could we improve this by using a ref for range ?\n dataSource?.subscribe(\n { range: getFullRange(range, renderBufferSize) },\n datasourceMessageHandler,\n );\n }\n }, [dataSource, datasourceMessageHandler, range, renderBufferSize]);\n\n const setRange = useCallback(\n (range: VuuRange) => {\n if (!rangesAreSame(range, rangeRef.current)) {\n const fullRange = getFullRange(range, renderBufferSize);\n dataWindow.setRange(fullRange);\n dataSource.range = rangeRef.current = fullRange;\n // emit a range event omitting the renderBufferSize\n // This isn't great, we're using the dataSource as a conduit to emit a\n // message that has nothing to do with the dataSource itself. CLient\n // is the DataSourceState component.\n dataSource.emit(\"range\", range);\n }\n },\n [dataSource, dataWindow, renderBufferSize],\n );\n\n return {\n data: data.current,\n dataRef: data,\n getSelectedRows,\n range: rangeRef.current,\n setRange,\n };\n};\n"],"names":["NULL_RANGE","useState","useRef","useMemo","MovingWindow","getFullRange","useCallback","useEffect","range","rangesAreSame"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/useKeyboardNavigation.ts"],"sourcesContent":["import { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { getIndexFromRowElement, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n KeyboardEvent,\n MouseEvent,\n RefObject,\n useCallback,\n useEffect,\n useRef\n} from \"react\";\nimport { TableNavigationStyle } from \"./Table\";\nimport {\n CellPos,\n cellDropdownShowing,\n closestRowIndex,\n dataCellQuery,\n getTableCell,\n headerCellQuery\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\n\nconst rowNavigationKeys = new Set<NavigationKey>([\n \"Home\",\n \"End\",\n \"PageUp\",\n \"PageDown\",\n \"ArrowDown\",\n \"ArrowUp\"\n]);\n\nconst cellNavigationKeys = new Set(rowNavigationKeys);\ncellNavigationKeys.add(\"ArrowLeft\");\ncellNavigationKeys.add(\"ArrowRight\");\n\nexport const isNavigationKey = (\n key: string,\n navigationStyle: TableNavigationStyle\n): key is NavigationKey => {\n switch (navigationStyle) {\n case \"cell\":\n return cellNavigationKeys.has(key as NavigationKey);\n case \"row\":\n return rowNavigationKeys.has(key as NavigationKey);\n default:\n return false;\n }\n};\n\ntype ArrowKey = \"ArrowUp\" | \"ArrowDown\" | \"ArrowLeft\" | \"ArrowRight\";\ntype PageKey = \"Home\" | \"End\" | \"PageUp\" | \"PageDown\";\ntype NavigationKey = PageKey | ArrowKey;\n\nconst PageKeys = [\"Home\", \"End\", \"PageUp\", \"PageDown\"];\nexport const isPagingKey = (key: string): key is PageKey =>\n PageKeys.includes(key);\n\nconst NULL_CELL_POS: CellPos = [-1, -1];\n\nfunction nextCellPos(\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 // The colIdx is 1 based, because of the selection decorator\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 interface NavigationHookProps {\n containerRef: RefObject<HTMLElement>;\n columnCount?: number;\n defaultHighlightedIndex?: number;\n disableFocus?: boolean;\n disableHighlightOnFocus?: boolean;\n highlightedIndex?: number;\n label?: string;\n navigationStyle: TableNavigationStyle;\n viewportRange: VuuRange;\n onHighlight?: (idx: number) => void;\n requestScroll?: ScrollRequestHandler;\n restoreLastFocus?: boolean;\n rowCount?: number;\n selected?: unknown;\n viewportRowCount: number;\n}\n\nexport const useKeyboardNavigation = ({\n columnCount = 0,\n containerRef,\n disableFocus = false,\n defaultHighlightedIndex,\n disableHighlightOnFocus,\n highlightedIndex: highlightedIndexProp,\n navigationStyle,\n requestScroll,\n onHighlight,\n rowCount = 0,\n viewportRowCount\n}: // viewportRange,\nNavigationHookProps) => {\n // const { from: viewportFirstRow, to: viewportLastRow } = viewportRange;\n const focusedCellPos = useRef<CellPos>([-1, -1]);\n const focusableCell = useRef<HTMLElement>();\n const activeCellPos = useRef<CellPos>([-1, 0]);\n // Keep this in sync with state value. This can be used by functions that need\n // to reference highlightedIndex at call time but do not need to be regenerated\n // every time it changes (i.e keep highlightedIndex out of their dependency\n // arrays, as it can update frequently)\n const highlightedIndexRef = useRef<number | undefined>();\n\n const [highlightedIndex, setHighlightedIdx] = useControlled({\n controlled: highlightedIndexProp,\n default: defaultHighlightedIndex,\n name: \"UseKeyboardNavigation\"\n });\n highlightedIndexRef.current = highlightedIndex;\n const setHighlightedIndex = useCallback(\n (idx: number, fromKeyboard = false) => {\n onHighlight?.(idx);\n setHighlightedIdx(idx);\n if (fromKeyboard) {\n // lastFocus.current = idx;\n }\n },\n [onHighlight, setHighlightedIdx]\n );\n\n const getFocusedCell = (element: HTMLElement | Element | null) =>\n element?.closest(\n \"[role='columnHeader'],[role='cell']\"\n ) as HTMLDivElement | null;\n\n const getTableCellPos = (tableCell: HTMLDivElement): CellPos => {\n if (tableCell.role === \"columnHeader\") {\n const colIdx = parseInt(tableCell.dataset.idx ?? \"-1\", 10);\n return [-1, colIdx];\n } else {\n const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n if (focusedRow) {\n const rowIdx = getIndexFromRowElement(focusedRow);\n // TODO will get trickier when we introduce horizontal virtualisation\n const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);\n return [rowIdx, colIdx];\n }\n }\n return NULL_CELL_POS;\n };\n\n const focusCell = useCallback(\n (cellPos: CellPos) => {\n if (containerRef.current) {\n const activeCell = getTableCell(containerRef, cellPos);\n if (activeCell) {\n if (activeCell !== focusableCell.current) {\n focusableCell.current?.removeAttribute(\"tabindex\");\n focusableCell.current = activeCell;\n activeCell.setAttribute(\"tabindex\", \"0\");\n }\n // TODO needs to be scroll cell\n requestScroll?.({ type: \"scroll-row\", rowIndex: cellPos[0] });\n activeCell.focus({ preventScroll: true });\n }\n }\n },\n // TODO we recreate this function whenever viewportRange changes, which will\n // be often whilst scrolling - store range in a a ref ?\n [containerRef, requestScroll]\n );\n\n const setActiveCell = useCallback(\n (rowIdx: number, colIdx: number, fromKeyboard = false) => {\n const pos: CellPos = [rowIdx, colIdx];\n activeCellPos.current = pos;\n if (navigationStyle === \"row\") {\n setHighlightedIdx(rowIdx);\n } else {\n focusCell(pos);\n }\n if (fromKeyboard) {\n focusedCellPos.current = pos;\n }\n },\n [focusCell, navigationStyle, setHighlightedIdx]\n );\n\n const nextPageItemIdx = useCallback(\n (\n key: \"PageDown\" | \"PageUp\" | \"Home\" | \"End\",\n [rowIdx, colIdx]: CellPos\n ): Promise<CellPos> =>\n new Promise((resolve) => {\n let newRowIdx = rowIdx;\n switch (key) {\n case \"PageDown\": {\n newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);\n if (newRowIdx !== rowIdx) {\n requestScroll?.({ type: \"scroll-page\", direction: \"down\" });\n }\n break;\n }\n case \"PageUp\": {\n newRowIdx = Math.max(0, rowIdx - viewportRowCount);\n if (newRowIdx !== rowIdx) {\n requestScroll?.({ type: \"scroll-page\", direction: \"up\" });\n }\n break;\n }\n case \"Home\": {\n newRowIdx = 0;\n if (newRowIdx !== rowIdx) {\n requestScroll?.({ type: \"scroll-end\", direction: \"home\" });\n }\n break;\n }\n case \"End\": {\n newRowIdx = rowCount - 1;\n if (newRowIdx !== rowIdx) {\n requestScroll?.({ type: \"scroll-end\", direction: \"end\" });\n }\n break;\n }\n }\n // Introduce a delay to allow the scroll operation to complete,\n // which will trigger a range reset and rerender of rows. We\n // might need to tweak how this works. If we introduce too big\n // a delay, we risk seeing the newly rendered rows, with the focus\n // still on the old cell, which will be apparent as a brief flash\n // of the old cell focus before switching to correct cell. If we were\n // to change the way re assign keys such that we can guarantee that\n // when we page down, rows in same position get same keys, then same\n // cell would be focussed in new page as previous and issue would not\n // arise.\n setTimeout(() => {\n resolve([newRowIdx, colIdx]);\n }, 35);\n }),\n [requestScroll, rowCount, viewportRowCount]\n );\n\n const handleFocus = useCallback(() => {\n if (disableHighlightOnFocus !== true) {\n if (containerRef.current?.contains(document.activeElement)) {\n // IF focus arrives via keyboard, a cell will have received focus,\n // we handle that here. If focus arrives via click on a cell with\n // no tabindex (i.e all cells except one) we leave that to the\n // click handler.\n const focusedCell = getFocusedCell(document.activeElement);\n if (focusedCell) {\n focusedCellPos.current = getTableCellPos(focusedCell);\n if (navigationStyle === \"row\") {\n setHighlightedIdx(focusedCellPos.current[0]);\n }\n }\n }\n }\n }, [\n disableHighlightOnFocus,\n containerRef,\n navigationStyle,\n setHighlightedIdx\n ]);\n\n const navigateChildItems = useCallback(\n async (key: NavigationKey) => {\n const [nextRowIdx, nextColIdx] = isPagingKey(key)\n ? await nextPageItemIdx(key, activeCellPos.current)\n : nextCellPos(key, activeCellPos.current, columnCount, rowCount);\n const [rowIdx, colIdx] = activeCellPos.current;\n if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {\n setActiveCell(nextRowIdx, nextColIdx, true);\n }\n },\n [columnCount, nextPageItemIdx, rowCount, setActiveCell]\n );\n\n const scrollRowIntoViewIfNecessary = useCallback(\n (rowIndex: number) => {\n requestScroll?.({ type: \"scroll-row\", rowIndex });\n },\n [requestScroll]\n );\n\n const moveHighlightedRow = useCallback(\n async (key: NavigationKey) => {\n const { current: highlighted } = highlightedIndexRef;\n const [nextRowIdx] = isPagingKey(key)\n ? await nextPageItemIdx(key, [highlighted ?? -1, 0])\n : nextCellPos(key, [highlighted ?? -1, 0], columnCount, rowCount);\n if (nextRowIdx !== highlighted) {\n setHighlightedIndex(nextRowIdx);\n // TO(DO make this a scroll request)\n scrollRowIntoViewIfNecessary(nextRowIdx);\n }\n },\n [\n columnCount,\n nextPageItemIdx,\n rowCount,\n scrollRowIntoViewIfNecessary,\n setHighlightedIndex\n ]\n );\n\n useEffect(() => {\n if (highlightedIndexProp !== undefined && highlightedIndexProp !== -1) {\n scrollRowIntoViewIfNecessary(highlightedIndexProp);\n }\n }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n const cell = queryClosest<HTMLDivElement>(e.target, \".vuuTableCell\");\n if (cellDropdownShowing(cell)) {\n return;\n }\n if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {\n e.preventDefault();\n e.stopPropagation();\n if (navigationStyle === \"row\") {\n moveHighlightedRow(e.key);\n } else {\n void navigateChildItems(e.key);\n }\n }\n },\n [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems]\n );\n\n const handleClick = useCallback(\n // Might not be a cell e.g the Settings button\n (evt: MouseEvent) => {\n const target = evt.target as HTMLElement;\n const focusedCell = getFocusedCell(target);\n if (focusedCell) {\n const [rowIdx, colIdx] = getTableCellPos(focusedCell);\n setActiveCell(rowIdx, colIdx);\n }\n },\n [setActiveCell]\n );\n\n const handleMouseLeave = useCallback(() => {\n setHighlightedIndex(-1);\n }, [setHighlightedIndex]);\n\n const handleMouseMove = useCallback(\n (evt: MouseEvent) => {\n const idx = closestRowIndex(evt.target as HTMLElement);\n if (idx !== -1 && idx !== highlightedIndexRef.current) {\n setHighlightedIndex(idx);\n }\n },\n [setHighlightedIndex]\n );\n\n const navigate = useCallback(() => {\n navigateChildItems(\"ArrowDown\");\n }, [navigateChildItems]);\n\n // First render will only render the outer container when explicit\n // sizing has not been provided. Outer container is measured and\n // only then, on second render, is content rendered.\n const fullyRendered = containerRef.current?.firstChild != null;\n useEffect(() => {\n if (fullyRendered && focusableCell.current === undefined && !disableFocus) {\n const { current: container } = containerRef;\n const cell = (container?.querySelector(headerCellQuery(0)) ||\n container?.querySelector(dataCellQuery(0, 0))) as HTMLElement;\n if (cell) {\n cell.setAttribute(\"tabindex\", \"0\");\n focusableCell.current = cell;\n }\n }\n }, [containerRef, disableFocus, fullyRendered]);\n\n return {\n highlightedIndexRef,\n navigate,\n onClick: handleClick,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n onMouseLeave: navigationStyle === \"row\" ? handleMouseLeave : undefined,\n onMouseMove: navigationStyle === \"row\" ? handleMouseMove : undefined\n };\n};\n"],"names":["useRef","useControlled","useCallback","getIndexFromRowElement","getTableCell","useEffect","queryClosest","cellDropdownShowing","closestRowIndex","headerCellQuery","dataCellQuery"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/useKeyboardNavigation.ts"],"sourcesContent":["import { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { getIndexFromRowElement, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n KeyboardEvent,\n MouseEvent,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport { TableNavigationStyle } from \"./Table\";\nimport {\n CellPos,\n cellDropdownShowing,\n closestRowIndex,\n dataCellQuery,\n getTableCell,\n headerCellQuery,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\n\nconst rowNavigationKeys = new Set<NavigationKey>([\n \"Home\",\n \"End\",\n \"PageUp\",\n \"PageDown\",\n \"ArrowDown\",\n \"ArrowUp\",\n]);\n\nconst cellNavigationKeys = new Set(rowNavigationKeys);\ncellNavigationKeys.add(\"ArrowLeft\");\ncellNavigationKeys.add(\"ArrowRight\");\n\nexport const isNavigationKey = (\n key: string,\n navigationStyle: TableNavigationStyle,\n): key is NavigationKey => {\n switch (navigationStyle) {\n case \"cell\":\n return cellNavigationKeys.has(key as NavigationKey);\n case \"row\":\n return rowNavigationKeys.has(key as NavigationKey);\n default:\n return false;\n }\n};\n\ntype ArrowKey = \"ArrowUp\" | \"ArrowDown\" | \"ArrowLeft\" | \"ArrowRight\";\ntype PageKey = \"Home\" | \"End\" | \"PageUp\" | \"PageDown\";\ntype NavigationKey = PageKey | ArrowKey;\n\nconst PageKeys = [\"Home\", \"End\", \"PageUp\", \"PageDown\"];\nexport const isPagingKey = (key: string): key is PageKey =>\n PageKeys.includes(key);\n\nconst NULL_CELL_POS: CellPos = [-1, -1];\n\nfunction nextCellPos(\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 // The colIdx is 1 based, because of the selection decorator\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 interface NavigationHookProps {\n containerRef: RefObject<HTMLElement>;\n columnCount?: number;\n defaultHighlightedIndex?: number;\n disableFocus?: boolean;\n disableHighlightOnFocus?: boolean;\n highlightedIndex?: number;\n label?: string;\n navigationStyle: TableNavigationStyle;\n viewportRange: VuuRange;\n onHighlight?: (idx: number) => void;\n requestScroll?: ScrollRequestHandler;\n restoreLastFocus?: boolean;\n rowCount?: number;\n selected?: unknown;\n viewportRowCount: number;\n}\n\nexport const useKeyboardNavigation = ({\n columnCount = 0,\n containerRef,\n disableFocus = false,\n defaultHighlightedIndex,\n disableHighlightOnFocus,\n highlightedIndex: highlightedIndexProp,\n navigationStyle,\n requestScroll,\n onHighlight,\n rowCount = 0,\n viewportRowCount,\n}: // viewportRange,\nNavigationHookProps) => {\n // const { from: viewportFirstRow, to: viewportLastRow } = viewportRange;\n const focusedCellPos = useRef<CellPos>([-1, -1]);\n const focusableCell = useRef<HTMLElement>();\n const activeCellPos = useRef<CellPos>([-1, 0]);\n // Keep this in sync with state value. This can be used by functions that need\n // to reference highlightedIndex at call time but do not need to be regenerated\n // every time it changes (i.e keep highlightedIndex out of their dependency\n // arrays, as it can update frequently)\n const highlightedIndexRef = useRef<number | undefined>();\n\n const [highlightedIndex, setHighlightedIdx] = useControlled({\n controlled: highlightedIndexProp,\n default: defaultHighlightedIndex,\n name: \"UseKeyboardNavigation\",\n });\n highlightedIndexRef.current = highlightedIndex;\n const setHighlightedIndex = useCallback(\n (idx: number, fromKeyboard = false) => {\n onHighlight?.(idx);\n setHighlightedIdx(idx);\n if (fromKeyboard) {\n // lastFocus.current = idx;\n }\n },\n [onHighlight, setHighlightedIdx],\n );\n\n const getFocusedCell = (element: HTMLElement | Element | null) =>\n element?.closest(\n \"[role='columnHeader'],[role='cell']\",\n ) as HTMLDivElement | null;\n\n const getTableCellPos = (tableCell: HTMLDivElement): CellPos => {\n if (tableCell.role === \"columnHeader\") {\n const colIdx = parseInt(tableCell.dataset.idx ?? \"-1\", 10);\n return [-1, colIdx];\n } else {\n const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n if (focusedRow) {\n const rowIdx = getIndexFromRowElement(focusedRow);\n // TODO will get trickier when we introduce horizontal virtualisation\n const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);\n return [rowIdx, colIdx];\n }\n }\n return NULL_CELL_POS;\n };\n\n const focusCell = useCallback(\n (cellPos: CellPos) => {\n if (containerRef.current) {\n const activeCell = getTableCell(containerRef, cellPos);\n if (activeCell) {\n if (activeCell !== focusableCell.current) {\n focusableCell.current?.removeAttribute(\"tabindex\");\n focusableCell.current = activeCell;\n activeCell.setAttribute(\"tabindex\", \"0\");\n }\n // TODO needs to be scroll cell\n requestScroll?.({ type: \"scroll-row\", rowIndex: cellPos[0] });\n activeCell.focus({ preventScroll: true });\n }\n }\n },\n // TODO we recreate this function whenever viewportRange changes, which will\n // be often whilst scrolling - store range in a a ref ?\n [containerRef, requestScroll],\n );\n\n const setActiveCell = useCallback(\n (rowIdx: number, colIdx: number, fromKeyboard = false) => {\n const pos: CellPos = [rowIdx, colIdx];\n activeCellPos.current = pos;\n if (navigationStyle === \"row\") {\n setHighlightedIdx(rowIdx);\n } else {\n focusCell(pos);\n }\n if (fromKeyboard) {\n focusedCellPos.current = pos;\n }\n },\n [focusCell, navigationStyle, setHighlightedIdx],\n );\n\n const nextPageItemIdx = useCallback(\n (\n key: \"PageDown\" | \"PageUp\" | \"Home\" | \"End\",\n [rowIdx, colIdx]: CellPos,\n ): Promise<CellPos> =>\n new Promise((resolve) => {\n let newRowIdx = rowIdx;\n switch (key) {\n case \"PageDown\": {\n newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);\n if (newRowIdx !== rowIdx) {\n requestScroll?.({ type: \"scroll-page\", direction: \"down\" });\n }\n break;\n }\n case \"PageUp\": {\n newRowIdx = Math.max(0, rowIdx - viewportRowCount);\n if (newRowIdx !== rowIdx) {\n requestScroll?.({ type: \"scroll-page\", direction: \"up\" });\n }\n break;\n }\n case \"Home\": {\n newRowIdx = 0;\n if (newRowIdx !== rowIdx) {\n requestScroll?.({ type: \"scroll-end\", direction: \"home\" });\n }\n break;\n }\n case \"End\": {\n newRowIdx = rowCount - 1;\n if (newRowIdx !== rowIdx) {\n requestScroll?.({ type: \"scroll-end\", direction: \"end\" });\n }\n break;\n }\n }\n // Introduce a delay to allow the scroll operation to complete,\n // which will trigger a range reset and rerender of rows. We\n // might need to tweak how this works. If we introduce too big\n // a delay, we risk seeing the newly rendered rows, with the focus\n // still on the old cell, which will be apparent as a brief flash\n // of the old cell focus before switching to correct cell. If we were\n // to change the way re assign keys such that we can guarantee that\n // when we page down, rows in same position get same keys, then same\n // cell would be focussed in new page as previous and issue would not\n // arise.\n setTimeout(() => {\n resolve([newRowIdx, colIdx]);\n }, 35);\n }),\n [requestScroll, rowCount, viewportRowCount],\n );\n\n const handleFocus = useCallback(() => {\n if (disableHighlightOnFocus !== true) {\n if (containerRef.current?.contains(document.activeElement)) {\n // IF focus arrives via keyboard, a cell will have received focus,\n // we handle that here. If focus arrives via click on a cell with\n // no tabindex (i.e all cells except one) we leave that to the\n // click handler.\n const focusedCell = getFocusedCell(document.activeElement);\n if (focusedCell) {\n focusedCellPos.current = getTableCellPos(focusedCell);\n if (navigationStyle === \"row\") {\n setHighlightedIdx(focusedCellPos.current[0]);\n }\n }\n }\n }\n }, [\n disableHighlightOnFocus,\n containerRef,\n navigationStyle,\n setHighlightedIdx,\n ]);\n\n const navigateChildItems = useCallback(\n async (key: NavigationKey) => {\n const [nextRowIdx, nextColIdx] = isPagingKey(key)\n ? await nextPageItemIdx(key, activeCellPos.current)\n : nextCellPos(key, activeCellPos.current, columnCount, rowCount);\n const [rowIdx, colIdx] = activeCellPos.current;\n if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {\n setActiveCell(nextRowIdx, nextColIdx, true);\n }\n },\n [columnCount, nextPageItemIdx, rowCount, setActiveCell],\n );\n\n const scrollRowIntoViewIfNecessary = useCallback(\n (rowIndex: number) => {\n requestScroll?.({ type: \"scroll-row\", rowIndex });\n },\n [requestScroll],\n );\n\n const moveHighlightedRow = useCallback(\n async (key: NavigationKey) => {\n const { current: highlighted } = highlightedIndexRef;\n const [nextRowIdx] = isPagingKey(key)\n ? await nextPageItemIdx(key, [highlighted ?? -1, 0])\n : nextCellPos(key, [highlighted ?? -1, 0], columnCount, rowCount);\n if (nextRowIdx !== highlighted) {\n setHighlightedIndex(nextRowIdx);\n // TO(DO make this a scroll request)\n scrollRowIntoViewIfNecessary(nextRowIdx);\n }\n },\n [\n columnCount,\n nextPageItemIdx,\n rowCount,\n scrollRowIntoViewIfNecessary,\n setHighlightedIndex,\n ],\n );\n\n useEffect(() => {\n if (highlightedIndexProp !== undefined && highlightedIndexProp !== -1) {\n scrollRowIntoViewIfNecessary(highlightedIndexProp);\n }\n }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n const cell = queryClosest<HTMLDivElement>(e.target, \".vuuTableCell\");\n if (cellDropdownShowing(cell)) {\n return;\n }\n if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {\n e.preventDefault();\n e.stopPropagation();\n if (navigationStyle === \"row\") {\n moveHighlightedRow(e.key);\n } else {\n void navigateChildItems(e.key);\n }\n }\n },\n [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems],\n );\n\n const handleClick = useCallback(\n // Might not be a cell e.g the Settings button\n (evt: MouseEvent) => {\n const target = evt.target as HTMLElement;\n const focusedCell = getFocusedCell(target);\n if (focusedCell) {\n const [rowIdx, colIdx] = getTableCellPos(focusedCell);\n setActiveCell(rowIdx, colIdx);\n }\n },\n [setActiveCell],\n );\n\n const handleMouseLeave = useCallback(() => {\n setHighlightedIndex(-1);\n }, [setHighlightedIndex]);\n\n const handleMouseMove = useCallback(\n (evt: MouseEvent) => {\n const idx = closestRowIndex(evt.target as HTMLElement);\n if (idx !== -1 && idx !== highlightedIndexRef.current) {\n setHighlightedIndex(idx);\n }\n },\n [setHighlightedIndex],\n );\n\n const navigate = useCallback(() => {\n navigateChildItems(\"ArrowDown\");\n }, [navigateChildItems]);\n\n // First render will only render the outer container when explicit\n // sizing has not been provided. Outer container is measured and\n // only then, on second render, is content rendered.\n const fullyRendered = containerRef.current?.firstChild != null;\n useEffect(() => {\n if (fullyRendered && focusableCell.current === undefined && !disableFocus) {\n const { current: container } = containerRef;\n const cell = (container?.querySelector(headerCellQuery(0)) ||\n container?.querySelector(dataCellQuery(0, 0))) as HTMLElement;\n if (cell) {\n cell.setAttribute(\"tabindex\", \"0\");\n focusableCell.current = cell;\n }\n }\n }, [containerRef, disableFocus, fullyRendered]);\n\n return {\n highlightedIndexRef,\n navigate,\n onClick: handleClick,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n onMouseLeave: navigationStyle === \"row\" ? handleMouseLeave : undefined,\n onMouseMove: navigationStyle === \"row\" ? handleMouseMove : undefined,\n };\n};\n"],"names":["useRef","useControlled","useCallback","getIndexFromRowElement","getTableCell","useEffect","queryClosest","cellDropdownShowing","closestRowIndex","headerCellQuery","dataCellQuery"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMeasuredHeight.js","sources":["../src/useMeasuredHeight.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useMemo, useState } from \"react\";\n\ninterface MeasuredHeightHookProps {\n onHeightMeasured?: (height: number) => void;\n height?: number;\n}\n\nexport const useMeasuredHeight = ({\n onHeightMeasured,\n height: heightProp = 0
|
|
1
|
+
{"version":3,"file":"useMeasuredHeight.js","sources":["../src/useMeasuredHeight.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useMemo, useState } from \"react\";\n\ninterface MeasuredHeightHookProps {\n onHeightMeasured?: (height: number) => void;\n height?: number;\n}\n\nexport const useMeasuredHeight = ({\n onHeightMeasured,\n height: heightProp = 0,\n}: MeasuredHeightHookProps) => {\n const [rowHeight, setRowHeight] = useState(heightProp);\n\n const resizeObserver = useMemo(() => {\n return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n const [{ blockSize: measuredSize }] = entry.borderBoxSize;\n const newHeight = Math.round(measuredSize);\n if (isValidNumber(newHeight)) {\n setRowHeight(newHeight);\n onHeightMeasured?.(newHeight);\n }\n }\n });\n }, [onHeightMeasured]);\n\n const rowRef = useCallback<RefCallback<HTMLDivElement>>(\n (el) => {\n if (el) {\n if (heightProp === 0) {\n const { height } = el.getBoundingClientRect();\n resizeObserver.observe(el);\n setRowHeight(height);\n }\n } else {\n resizeObserver.disconnect();\n }\n },\n [resizeObserver, heightProp],\n );\n return { rowHeight, rowRef };\n};\n"],"names":["useState","useMemo","isValidNumber","useCallback"],"mappings":";;;;;AAQO,MAAM,oBAAoB,CAAC;AAAA,EAChC,gBAAA;AAAA,EACA,QAAQ,UAAa,GAAA,CAAA;AACvB,CAA+B,KAAA;AAC7B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,UAAU,CAAA,CAAA;AAErD,EAAM,MAAA,cAAA,GAAiBC,cAAQ,MAAM;AACnC,IAAO,OAAA,IAAI,cAAe,CAAA,CAAC,OAAmC,KAAA;AAC5D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAM,CAAC,EAAE,SAAA,EAAW,YAAa,EAAC,IAAI,KAAM,CAAA,aAAA,CAAA;AAC5C,QAAM,MAAA,SAAA,GAAY,IAAK,CAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AACzC,QAAI,IAAAC,sBAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,UAAA,YAAA,CAAa,SAAS,CAAA,CAAA;AACtB,UAAA,gBAAA,GAAmB,SAAS,CAAA,CAAA;AAAA,SAC9B;AAAA,OACF;AAAA,KACD,CAAA,CAAA;AAAA,GACH,EAAG,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAErB,EAAA,MAAM,MAAS,GAAAC,iBAAA;AAAA,IACb,CAAC,EAAO,KAAA;AACN,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,IAAI,eAAe,CAAG,EAAA;AACpB,UAAA,MAAM,EAAE,MAAA,EAAW,GAAA,EAAA,CAAG,qBAAsB,EAAA,CAAA;AAC5C,UAAA,cAAA,CAAe,QAAQ,EAAE,CAAA,CAAA;AACzB,UAAA,YAAA,CAAa,MAAM,CAAA,CAAA;AAAA,SACrB;AAAA,OACK,MAAA;AACL,QAAA,cAAA,CAAe,UAAW,EAAA,CAAA;AAAA,OAC5B;AAAA,KACF;AAAA,IACA,CAAC,gBAAgB,UAAU,CAAA;AAAA,GAC7B,CAAA;AACA,EAAO,OAAA,EAAE,WAAW,MAAO,EAAA,CAAA;AAC7B;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRowClassNameGenerators.js","sources":["../src/useRowClassNameGenerators.ts"],"sourcesContent":["import { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport {\n getRowClassNameGenerator,\n RowClassNameGenerator
|
|
1
|
+
{"version":3,"file":"useRowClassNameGenerators.js","sources":["../src/useRowClassNameGenerators.ts"],"sourcesContent":["import { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport {\n getRowClassNameGenerator,\n RowClassNameGenerator,\n} from \"@vuu-ui/vuu-utils\";\nimport { useMemo } from \"react\";\n\nconst createClassNameGenerator = (\n ids?: string[],\n): RowClassNameGenerator | undefined => {\n const functions: RowClassNameGenerator[] = [];\n ids?.forEach((id) => {\n const fn = getRowClassNameGenerator(id);\n if (fn) {\n functions.push(fn.fn);\n }\n });\n return (row, columnMap) => {\n const classNames: string[] = [];\n functions?.forEach((fn) => {\n const className = fn(row, columnMap);\n if (className) {\n classNames.push(className);\n }\n });\n return classNames.join(\" \");\n };\n};\n\nexport const useRowClassNameGenerators = ({\n rowClassNameGenerators,\n}: TableConfig) => {\n return useMemo<RowClassNameGenerator | undefined>(() => {\n return createClassNameGenerator(rowClassNameGenerators);\n }, [rowClassNameGenerators]);\n};\n"],"names":["getRowClassNameGenerator","useMemo"],"mappings":";;;;;AAOA,MAAM,wBAAA,GAA2B,CAC/B,GACsC,KAAA;AACtC,EAAA,MAAM,YAAqC,EAAC,CAAA;AAC5C,EAAK,GAAA,EAAA,OAAA,CAAQ,CAAC,EAAO,KAAA;AACnB,IAAM,MAAA,EAAA,GAAKA,kCAAyB,EAAE,CAAA,CAAA;AACtC,IAAA,IAAI,EAAI,EAAA;AACN,MAAU,SAAA,CAAA,IAAA,CAAK,GAAG,EAAE,CAAA,CAAA;AAAA,KACtB;AAAA,GACD,CAAA,CAAA;AACD,EAAO,OAAA,CAAC,KAAK,SAAc,KAAA;AACzB,IAAA,MAAM,aAAuB,EAAC,CAAA;AAC9B,IAAW,SAAA,EAAA,OAAA,CAAQ,CAAC,EAAO,KAAA;AACzB,MAAM,MAAA,SAAA,GAAY,EAAG,CAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AACnC,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,UAAA,CAAW,KAAK,SAAS,CAAA,CAAA;AAAA,OAC3B;AAAA,KACD,CAAA,CAAA;AACD,IAAO,OAAA,UAAA,CAAW,KAAK,GAAG,CAAA,CAAA;AAAA,GAC5B,CAAA;AACF,CAAA,CAAA;AAEO,MAAM,4BAA4B,CAAC;AAAA,EACxC,sBAAA;AACF,CAAmB,KAAA;AACjB,EAAA,OAAOC,cAA2C,MAAM;AACtD,IAAA,OAAO,yBAAyB,sBAAsB,CAAA,CAAA;AAAA,GACxD,EAAG,CAAC,sBAAsB,CAAC,CAAA,CAAA;AAC7B;;;;"}
|
package/cjs/useSelection.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelection.js","sources":["../src/useSelection.ts"],"sourcesContent":["import {\n TableRowClickHandlerInternal,\n TableRowSelectHandlerInternal,\n TableSelectionModel
|
|
1
|
+
{"version":3,"file":"useSelection.js","sources":["../src/useSelection.ts"],"sourcesContent":["import {\n TableRowClickHandlerInternal,\n TableRowSelectHandlerInternal,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n deselectItem,\n dispatchMouseEvent,\n getRowElementAtIndex,\n isRowSelected,\n metadataKeys,\n queryClosest,\n selectItem,\n} from \"@vuu-ui/vuu-utils\";\nimport { Selection, SelectionChangeHandler } from \"@vuu-ui/vuu-data-types\";\nimport {\n KeyboardEvent,\n KeyboardEventHandler,\n MutableRefObject,\n useCallback,\n useRef,\n} from \"react\";\n\nconst { IDX } = metadataKeys;\n\nconst NO_SELECTION: Selection = [];\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport interface SelectionHookProps {\n highlightedIndexRef: MutableRefObject<number | undefined>;\n selectionKeys?: string[];\n selectionModel: TableSelectionModel;\n onSelect?: TableRowSelectHandlerInternal;\n onSelectionChange: SelectionChangeHandler;\n}\n\nexport const useSelection = ({\n highlightedIndexRef,\n selectionKeys = defaultSelectionKeys,\n selectionModel,\n onSelect,\n onSelectionChange,\n}: SelectionHookProps) => {\n selectionModel === \"extended\" || selectionModel === \"checkbox\";\n const lastActiveRef = useRef(-1);\n const selectedRef = useRef<Selection>(NO_SELECTION);\n\n const isSelectionEvent = useCallback(\n (evt: KeyboardEvent<HTMLElement>) => selectionKeys.includes(evt.key),\n [selectionKeys],\n );\n\n const handleRowClick = useCallback<TableRowClickHandlerInternal>(\n (e, row, rangeSelect, keepExistingSelection) => {\n const { [IDX]: idx } = row;\n const { current: active } = lastActiveRef;\n const { current: selected } = selectedRef;\n\n const selectOperation = isRowSelected(row) ? deselectItem : selectItem;\n\n if (selectionModel === \"checkbox\") {\n const cell = queryClosest(e.target, \".vuuTableCell\");\n if (!cell?.querySelector(\".vuuCheckboxRowSelector\")) {\n return;\n }\n }\n\n const newSelected = selectOperation(\n selectionModel,\n selected,\n idx,\n rangeSelect,\n keepExistingSelection,\n active,\n );\n\n selectedRef.current = newSelected;\n lastActiveRef.current = idx;\n\n onSelect?.(selectOperation === selectItem ? row : null);\n onSelectionChange?.(newSelected);\n },\n [onSelect, onSelectionChange, selectionModel],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLElement>>(\n (e) => {\n if (isSelectionEvent(e)) {\n const { current: rowIndex } = highlightedIndexRef;\n if (rowIndex !== undefined && rowIndex !== -1) {\n const rowEl = getRowElementAtIndex(e.target, rowIndex);\n // const rowEl = (e.target as HTMLElement).querySelector(\n // `[aria-rowindex=\"${rowIndex + 1}\"]`\n // ) as HTMLElement;\n if (rowEl) {\n dispatchMouseEvent(rowEl, \"click\");\n }\n }\n }\n },\n [highlightedIndexRef, isSelectionEvent],\n );\n\n return {\n onKeyDown: handleKeyDown,\n onRowClick: handleRowClick,\n };\n};\n"],"names":["metadataKeys","useRef","useCallback","isRowSelected","deselectItem","selectItem","queryClosest","getRowElementAtIndex","dispatchMouseEvent"],"mappings":";;;;;AAuBA,MAAM,EAAE,KAAQ,GAAAA,qBAAA,CAAA;AAEhB,MAAM,eAA0B,EAAC,CAAA;AAEjC,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA,CAAA;AAUnC,MAAM,eAAe,CAAC;AAAA,EAC3B,mBAAA;AAAA,EACA,aAAgB,GAAA,oBAAA;AAAA,EAChB,cAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AACF,CAA0B,KAAA;AAExB,EAAM,MAAA,aAAA,GAAgBC,aAAO,CAAE,CAAA,CAAA,CAAA;AAC/B,EAAM,MAAA,WAAA,GAAcA,aAAkB,YAAY,CAAA,CAAA;AAElD,EAAA,MAAM,gBAAmB,GAAAC,iBAAA;AAAA,IACvB,CAAC,GAAA,KAAoC,aAAc,CAAA,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IACnE,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,MAAM,cAAiB,GAAAA,iBAAA;AAAA,IACrB,CAAC,CAAA,EAAG,GAAK,EAAA,WAAA,EAAa,qBAA0B,KAAA;AAC9C,MAAA,MAAM,EAAE,CAAC,GAAG,GAAG,KAAQ,GAAA,GAAA,CAAA;AACvB,MAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,aAAA,CAAA;AAC5B,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,WAAA,CAAA;AAE9B,MAAA,MAAM,eAAkB,GAAAC,sBAAA,CAAc,GAAG,CAAA,GAAIC,qBAAe,GAAAC,mBAAA,CAAA;AAE5D,MAAA,IAAI,mBAAmB,UAAY,EAAA;AACjC,QAAA,MAAM,IAAO,GAAAC,qBAAA,CAAa,CAAE,CAAA,MAAA,EAAQ,eAAe,CAAA,CAAA;AACnD,QAAA,IAAI,CAAC,IAAA,EAAM,aAAc,CAAA,yBAAyB,CAAG,EAAA;AACnD,UAAA,OAAA;AAAA,SACF;AAAA,OACF;AAEA,MAAA,MAAM,WAAc,GAAA,eAAA;AAAA,QAClB,cAAA;AAAA,QACA,QAAA;AAAA,QACA,GAAA;AAAA,QACA,WAAA;AAAA,QACA,qBAAA;AAAA,QACA,MAAA;AAAA,OACF,CAAA;AAEA,MAAA,WAAA,CAAY,OAAU,GAAA,WAAA,CAAA;AACtB,MAAA,aAAA,CAAc,OAAU,GAAA,GAAA,CAAA;AAExB,MAAW,QAAA,GAAA,eAAA,KAAoBD,mBAAa,GAAA,GAAA,GAAM,IAAI,CAAA,CAAA;AACtD,MAAA,iBAAA,GAAoB,WAAW,CAAA,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAU,EAAA,iBAAA,EAAmB,cAAc,CAAA;AAAA,GAC9C,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAAH,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,gBAAA,CAAiB,CAAC,CAAG,EAAA;AACvB,QAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,mBAAA,CAAA;AAC9B,QAAI,IAAA,QAAA,KAAa,KAAa,CAAA,IAAA,QAAA,KAAa,CAAI,CAAA,EAAA;AAC7C,UAAA,MAAM,KAAQ,GAAAK,6BAAA,CAAqB,CAAE,CAAA,MAAA,EAAQ,QAAQ,CAAA,CAAA;AAIrD,UAAA,IAAI,KAAO,EAAA;AACT,YAAAC,2BAAA,CAAmB,OAAO,OAAO,CAAA,CAAA;AAAA,WACnC;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,qBAAqB,gBAAgB,CAAA;AAAA,GACxC,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA,cAAA;AAAA,GACd,CAAA;AACF;;;;"}
|
package/cjs/useTable.js
CHANGED
|
@@ -45,7 +45,6 @@ const useTable = ({
|
|
|
45
45
|
onConfigChange,
|
|
46
46
|
onDragStart,
|
|
47
47
|
onDrop,
|
|
48
|
-
onFeatureInvocation,
|
|
49
48
|
onHighlight,
|
|
50
49
|
onRowClick: onRowClickProp,
|
|
51
50
|
onSelect,
|
|
@@ -150,7 +149,6 @@ const useTable = ({
|
|
|
150
149
|
const { data, dataRef, getSelectedRows, range, setRange } = useDataSource.useDataSource({
|
|
151
150
|
dataSource,
|
|
152
151
|
// We need to factor this out of Table
|
|
153
|
-
onFeatureInvocation,
|
|
154
152
|
renderBufferSize,
|
|
155
153
|
onSizeChange: onDataRowcountChange,
|
|
156
154
|
onSubscribed,
|