@vuu-ui/vuu-table 0.8.96 → 0.8.98

package/esm/Table.js.map

@@ -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":["Row","DefaultRow","data","Table","size"],"mappings":"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"}
+{"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":["Row","DefaultRow","data","Table","size"],"mappings":"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"}

package/esm/bulk-edit/BulkEditRow.js.map

@@ -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":[],"mappings":"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"}
+{"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":[],"mappings":"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"}

package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js

@@ -1,4 +1,4 @@
-var checkboxRowSelectorCss = ".vuuTableCell {\n    .vuuCheckboxRowSelectorIcon {\n        margin-top: calc(var(--row-height) / 2 - 6px ); \n      }\n}";
+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";
 
 export { checkboxRowSelectorCss as default };
 //# sourceMappingURL=CheckboxRowSelectorCell.css.js.map

package/esm/column-menu/ColumnMenu.js

@@ -19,7 +19,8 @@ const ColumnMenu = ({ className, column }) => {
       className: cx(classBase, className),
       "data-embedded": true,
       menuLocation: "column-menu",
-      menuOptions: { column }
+      menuOptions: { column },
+      tabIndex: -1
     }
   );
 };

package/esm/column-menu/ColumnMenu.js.map

@@ -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":[],"mappings":";;;;;;;AASA,MAAM,SAAY,GAAA,eAAA,CAAA;AAKX,MAAM,UAAa,GAAA,CAAC,EAAE,SAAA,EAAW,QAA8B,KAAA;AACpE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;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,GACxB,CAAA;AAEJ;;;;"}
+{"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":[],"mappings":";;;;;;;AASA,MAAM,SAAY,GAAA,eAAA,CAAA;AAKX,MAAM,UAAa,GAAA,CAAC,EAAE,SAAA,EAAW,QAA8B,KAAA;AACpE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;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;;;;"}

package/esm/table-cell/TableCell.css.js

@@ -1,4 +1,4 @@
-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(--vuuTableCell-outline, solid var(--salt-focused-outlineColor) 2px);\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(--vuuTableCell-outline, solid var(--salt-focused-outlineColor) 2px);\n  outline-offset: -1px;\n\n}\n.vuuTableCell-editable:focus {\n  outline: none;\n}\n\n";
+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";
 
 export { tableCellCss as default };
 //# sourceMappingURL=TableCell.css.js.map

package/esm/table-dom-utils.js.map

@@ -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\";\n\nconst NULL_CELL_POS: CellPos = [-1, -1];\n\n/**\n * [rowIndex, colIndex\n */\nexport type CellPos = [number, number];\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":"AAIA,MAAM,aAAA,GAAyB,CAAC,CAAA,CAAA,EAAI,CAAE,CAAA,CAAA,CAAA;AAS/B,MAAM,eAAkB,GAAA,CAAC,MAC9B,KAAA,CAAA,yDAAA,EAA4D,SAAS,CAAC,CAAA,EAAA,EAAA;AAE3D,MAAA,aAAA,GAAgB,CAAC,MAAgB,EAAA,MAAA,KAC5C,oCAAoC,MAAS,GAAA,CAAC,CAAwB,qBAAA,EAAA,MAAA,GAAS,CAAC,CAAA,EAAA,EAAA;AAE3E,MAAM,eAAe,CAC1B,YAAA,EACA,CAAC,MAAA,EAAQ,MAAM,CACZ,KAAA;AACH,EAAM,MAAA,QAAA,GACJ,WAAW,CAAK,CAAA,GAAA,eAAA,CAAgB,MAAM,CAAI,GAAA,aAAA,CAAc,QAAQ,MAAM,CAAA,CAAA;AACxE,EAAM,MAAA,IAAA,GAAO,aAAa,OAAS,EAAA,aAAA;AAAA,IACjC,QAAA;AAAA,GACF,CAAA;AAEA,EAAI,IAAA,cAAA,CAAe,IAAI,CAAG,EAAA;AAExB,IAAM,MAAA,gBAAA,GAAmB,IAAK,CAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACpD,IAAA,OAAO,gBAAoB,IAAA,IAAA,CAAA;AAAA,GACtB,MAAA;AACL,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF,EAAA;AAEO,MAAM,iBAAiB,CAAC,IAAA,KAC7B,IAAM,EAAA,SAAA,CAAU,SAAS,uBAAuB,EAAA;AAErC,MAAA,mBAAA,GAAsB,CAAC,IAAgC,KAAA;AAClE,EAAI,IAAA,cAAA,CAAe,IAAI,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA,EAAM,aAAc,CAAA,qCAAqC,CAAM,KAAA,IAAA,CAAA;AAAA,GACxE;AACA,EAAO,OAAA,KAAA,CAAA;AACT,EAAA;AAEO,MAAM,kBAAkB,CAAC,IAAA,KAC9B,IAAK,CAAA,aAAA,CAAc,oBAAoB,CAAM,KAAA,KAAA;AAElC,MAAA,sBAAA,GAAyB,CAAC,UAAmC,KAAA;AACxE,EAAA,MAAM,WAAW,UAAY,EAAA,YAAA,CAAA;AAC7B,EAAA,IAAI,YAAY,IAAM,EAAA;AACpB,IAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,QAAQ,CAAI,GAAA,CAAA,CAAA;AACnC,IAAI,IAAA,CAAC,KAAM,CAAA,KAAK,CAAG,EAAA;AACjB,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAAA,GACF;AACA,EAAO,OAAA,CAAA,CAAA,CAAA;AACT,EAAA;AAEa,MAAA,uBAAA,GAA0B,CAAC,WAAoC,KAAA;AAC1E,EAAA,MAAM,WAAW,WAAa,EAAA,YAAA,CAAA;AAC9B,EAAA,IAAI,YAAY,IAAM,EAAA;AACpB,IAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,QAAQ,CAAI,GAAA,CAAA,CAAA;AACnC,IAAI,IAAA,CAAC,KAAM,CAAA,KAAK,CAAG,EAAA;AACjB,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAAA,GACF;AACA,EAAO,OAAA,CAAA,CAAA,CAAA;AACT,EAAA;AAEa,MAAA,eAAA,GAAkB,CAAC,SAAuC,KAAA;AACrE,EAAM,MAAA,MAAA,GAAS,wBAAwB,SAAS,CAAA,CAAA;AAChD,EAAI,IAAA,SAAA,CAAU,SAAS,cAAgB,EAAA;AACrC,IAAO,OAAA,CAAC,IAAI,MAAM,CAAA,CAAA;AAAA,GACb,MAAA;AACL,IAAM,MAAA,UAAA,GAAa,SAAU,CAAA,OAAA,CAAQ,cAAc,CAAA,CAAA;AACnD,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAO,CAAC,sBAAA,CAAuB,UAAU,CAAA,EAAG,MAAM,CAAA,CAAA;AAAA,KACpD;AAAA,GACF;AACA,EAAO,OAAA,aAAA,CAAA;AACT,EAAA;AAEA,MAAM,UAAa,GAAA,CAAC,EAClB,KAAA,EAAA,CAAG,QAAQ,cAAc,CAAA,CAAA;AAEpB,MAAM,kBAAkB,CAAC,EAAA,KAC9B,sBAAuB,CAAA,UAAA,CAAW,EAAE,CAAC,EAAA;AAEhC,SAAS,eACd,GACA,EAAA,CAAC,QAAQ,MAAM,CAAA,EACf,aACA,QACS,EAAA;AACT,EAAA,IAAI,QAAQ,SAAW,EAAA;AACrB,IAAA,IAAI,SAAS,CAAI,CAAA,EAAA;AACf,MAAO,OAAA,CAAC,MAAS,GAAA,CAAA,EAAG,MAAM,CAAA,CAAA;AAAA,KACrB,MAAA;AACL,MAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AAAA,KACxB;AAAA,GACF,MAAA,IAAW,QAAQ,WAAa,EAAA;AAC9B,IAAA,IAAI,WAAW,CAAI,CAAA,EAAA;AACjB,MAAO,OAAA,CAAC,GAAG,MAAM,CAAA,CAAA;AAAA,KACnB,MAAA,IAAW,MAAW,KAAA,QAAA,GAAW,CAAG,EAAA;AAClC,MAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AAAA,KACjB,MAAA;AACL,MAAO,OAAA,CAAC,MAAS,GAAA,CAAA,EAAG,MAAM,CAAA,CAAA;AAAA,KAC5B;AAAA,GACF,MAAA,IAAW,QAAQ,YAAc,EAAA;AAC/B,IAAI,IAAA,MAAA,GAAS,cAAc,CAAG,EAAA;AAC5B,MAAO,OAAA,CAAC,MAAQ,EAAA,MAAA,GAAS,CAAC,CAAA,CAAA;AAAA,KACrB,MAAA;AACL,MAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AAAA,KACxB;AAAA,GACF,MAAA,IAAW,QAAQ,WAAa,EAAA;AAC9B,IAAA,IAAI,SAAS,CAAG,EAAA;AACd,MAAO,OAAA,CAAC,MAAQ,EAAA,MAAA,GAAS,CAAC,CAAA,CAAA;AAAA,KACrB,MAAA;AACL,MAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AAAA,KACxB;AAAA,GACF;AACA,EAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AACxB,CAAA;AAEA,MAAM,mBAAA,GAAsB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,CAAA,CAAA;AAEpC,MAAA,0BAAA,GAA6B,CACxC,KACA,EAAA,iBAAA,EACA,mBAAmB,KAAM,CAAA,OAAA,CAAQ,4BAA4B,CACE,KAAA;AAE/D,EAAA,IAAI,gBAAkB,EAAA;AAEpB,IAAM,MAAA,QAAA,GAAW,kBAAkB,qBAAsB,EAAA,CAAA;AACzD,IAAM,MAAA,aAAA,GAAgB,SAAS,GAAM,GAAA,iBAAA,CAAA;AACrC,IAAM,MAAA,GAAA,GAAM,MAAM,qBAAsB,EAAA,CAAA;AACxC,IAAA,IAAI,GAAK,EAAA;AACP,MAAI,IAAA,GAAA,CAAI,MAAS,GAAA,QAAA,CAAS,MAAQ,EAAA;AAChC,QAAA,OAAO,CAAC,MAAA,EAAQ,GAAI,CAAA,MAAA,GAAS,SAAS,MAAM,CAAA,CAAA;AAAA,OAC9C,MAAA,IAAW,GAAI,CAAA,GAAA,GAAM,aAAe,EAAA;AAClC,QAAA,OAAO,CAAC,IAAA,EAAM,GAAI,CAAA,GAAA,GAAM,aAAa,CAAA,CAAA;AAAA,OAChC,MAAA;AACL,QAAO,OAAA,mBAAA,CAAA;AAAA,OACT;AAAA,KACK,MAAA;AACL,MAAA,MAAM,MAAM,+BAA+B,CAAA,CAAA;AAAA,KAC7C;AAAA,GACK,MAAA;AACL,IAAA,MAAM,MAAM,+CAA+C,CAAA,CAAA;AAAA,GAC7D;AACF;;;;"}
+{"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":"AAKA,MAAM,aAAA,GAAyB,CAAC,CAAA,CAAA,EAAI,CAAE,CAAA,CAAA,CAAA;AAI/B,MAAM,eAAkB,GAAA,CAAC,MAC9B,KAAA,CAAA,yDAAA,EAA4D,SAAS,CAAC,CAAA,EAAA,EAAA;AAE3D,MAAA,aAAA,GAAgB,CAAC,MAAgB,EAAA,MAAA,KAC5C,oCAAoC,MAAS,GAAA,CAAC,CAAwB,qBAAA,EAAA,MAAA,GAAS,CAAC,CAAA,EAAA,EAAA;AAE3E,MAAM,eAAe,CAC1B,YAAA,EACA,CAAC,MAAA,EAAQ,MAAM,CACZ,KAAA;AACH,EAAM,MAAA,QAAA,GACJ,WAAW,CAAK,CAAA,GAAA,eAAA,CAAgB,MAAM,CAAI,GAAA,aAAA,CAAc,QAAQ,MAAM,CAAA,CAAA;AACxE,EAAM,MAAA,IAAA,GAAO,aAAa,OAAS,EAAA,aAAA;AAAA,IACjC,QAAA;AAAA,GACF,CAAA;AAEA,EAAI,IAAA,cAAA,CAAe,IAAI,CAAG,EAAA;AAExB,IAAM,MAAA,gBAAA,GAAmB,IAAK,CAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACpD,IAAA,OAAO,gBAAoB,IAAA,IAAA,CAAA;AAAA,GACtB,MAAA;AACL,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF,EAAA;AAEO,MAAM,iBAAiB,CAAC,IAAA,KAC7B,IAAM,EAAA,SAAA,CAAU,SAAS,uBAAuB,EAAA;AAErC,MAAA,mBAAA,GAAsB,CAAC,IAAgC,KAAA;AAClE,EAAI,IAAA,cAAA,CAAe,IAAI,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA,EAAM,aAAc,CAAA,qCAAqC,CAAM,KAAA,IAAA,CAAA;AAAA,GACxE;AACA,EAAO,OAAA,KAAA,CAAA;AACT,EAAA;AAEO,MAAM,kBAAkB,CAAC,IAAA,KAC9B,IAAK,CAAA,aAAA,CAAc,oBAAoB,CAAM,KAAA,KAAA;AAElC,MAAA,sBAAA,GAAyB,CAAC,UAAmC,KAAA;AACxE,EAAA,MAAM,WAAW,UAAY,EAAA,YAAA,CAAA;AAC7B,EAAA,IAAI,YAAY,IAAM,EAAA;AACpB,IAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,QAAQ,CAAI,GAAA,CAAA,CAAA;AACnC,IAAI,IAAA,CAAC,KAAM,CAAA,KAAK,CAAG,EAAA;AACjB,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAAA,GACF;AACA,EAAO,OAAA,CAAA,CAAA,CAAA;AACT,EAAA;AAEa,MAAA,uBAAA,GAA0B,CAAC,WAAoC,KAAA;AAC1E,EAAA,MAAM,WAAW,WAAa,EAAA,YAAA,CAAA;AAC9B,EAAA,IAAI,YAAY,IAAM,EAAA;AACpB,IAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,QAAQ,CAAI,GAAA,CAAA,CAAA;AACnC,IAAI,IAAA,CAAC,KAAM,CAAA,KAAK,CAAG,EAAA;AACjB,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAAA,GACF;AACA,EAAO,OAAA,CAAA,CAAA,CAAA;AACT,EAAA;AAEa,MAAA,eAAA,GAAkB,CAAC,SAAuC,KAAA;AACrE,EAAM,MAAA,MAAA,GAAS,wBAAwB,SAAS,CAAA,CAAA;AAChD,EAAI,IAAA,SAAA,CAAU,SAAS,cAAgB,EAAA;AACrC,IAAO,OAAA,CAAC,IAAI,MAAM,CAAA,CAAA;AAAA,GACb,MAAA;AACL,IAAM,MAAA,UAAA,GAAa,SAAU,CAAA,OAAA,CAAQ,cAAc,CAAA,CAAA;AACnD,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAO,CAAC,sBAAA,CAAuB,UAAU,CAAA,EAAG,MAAM,CAAA,CAAA;AAAA,KACpD;AAAA,GACF;AACA,EAAO,OAAA,aAAA,CAAA;AACT,EAAA;AAEA,MAAM,UAAa,GAAA,CAAC,EAClB,KAAA,EAAA,CAAG,QAAQ,cAAc,CAAA,CAAA;AAEpB,MAAM,kBAAkB,CAAC,EAAA,KAC9B,sBAAuB,CAAA,UAAA,CAAW,EAAE,CAAC,EAAA;AAEhC,SAAS,eACd,GACA,EAAA,CAAC,QAAQ,MAAM,CAAA,EACf,aACA,QACS,EAAA;AACT,EAAA,IAAI,QAAQ,SAAW,EAAA;AACrB,IAAA,IAAI,SAAS,CAAI,CAAA,EAAA;AACf,MAAO,OAAA,CAAC,MAAS,GAAA,CAAA,EAAG,MAAM,CAAA,CAAA;AAAA,KACrB,MAAA;AACL,MAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AAAA,KACxB;AAAA,GACF,MAAA,IAAW,QAAQ,WAAa,EAAA;AAC9B,IAAA,IAAI,WAAW,CAAI,CAAA,EAAA;AACjB,MAAO,OAAA,CAAC,GAAG,MAAM,CAAA,CAAA;AAAA,KACnB,MAAA,IAAW,MAAW,KAAA,QAAA,GAAW,CAAG,EAAA;AAClC,MAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AAAA,KACjB,MAAA;AACL,MAAO,OAAA,CAAC,MAAS,GAAA,CAAA,EAAG,MAAM,CAAA,CAAA;AAAA,KAC5B;AAAA,GACF,MAAA,IAAW,QAAQ,YAAc,EAAA;AAC/B,IAAI,IAAA,MAAA,GAAS,cAAc,CAAG,EAAA;AAC5B,MAAO,OAAA,CAAC,MAAQ,EAAA,MAAA,GAAS,CAAC,CAAA,CAAA;AAAA,KACrB,MAAA;AACL,MAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AAAA,KACxB;AAAA,GACF,MAAA,IAAW,QAAQ,WAAa,EAAA;AAC9B,IAAA,IAAI,SAAS,CAAG,EAAA;AACd,MAAO,OAAA,CAAC,MAAQ,EAAA,MAAA,GAAS,CAAC,CAAA,CAAA;AAAA,KACrB,MAAA;AACL,MAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AAAA,KACxB;AAAA,GACF;AACA,EAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AACxB,CAAA;AAEA,MAAM,mBAAA,GAAsB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,CAAA,CAAA;AAEpC,MAAA,0BAAA,GAA6B,CACxC,KACA,EAAA,iBAAA,EACA,mBAAmB,KAAM,CAAA,OAAA,CAAQ,4BAA4B,CACE,KAAA;AAE/D,EAAA,IAAI,gBAAkB,EAAA;AAEpB,IAAM,MAAA,QAAA,GAAW,kBAAkB,qBAAsB,EAAA,CAAA;AACzD,IAAM,MAAA,aAAA,GAAgB,SAAS,GAAM,GAAA,iBAAA,CAAA;AACrC,IAAM,MAAA,GAAA,GAAM,MAAM,qBAAsB,EAAA,CAAA;AACxC,IAAA,IAAI,GAAK,EAAA;AACP,MAAI,IAAA,GAAA,CAAI,MAAS,GAAA,QAAA,CAAS,MAAQ,EAAA;AAChC,QAAA,OAAO,CAAC,MAAA,EAAQ,GAAI,CAAA,MAAA,GAAS,SAAS,MAAM,CAAA,CAAA;AAAA,OAC9C,MAAA,IAAW,GAAI,CAAA,GAAA,GAAM,aAAe,EAAA;AAClC,QAAA,OAAO,CAAC,IAAA,EAAM,GAAI,CAAA,GAAA,GAAM,aAAa,CAAA,CAAA;AAAA,OAChC,MAAA;AACL,QAAO,OAAA,mBAAA,CAAA;AAAA,OACT;AAAA,KACK,MAAA;AACL,MAAA,MAAM,MAAM,+BAA+B,CAAA,CAAA;AAAA,KAC7C;AAAA,GACK,MAAA;AACL,IAAA,MAAM,MAAM,+CAA+C,CAAA,CAAA;AAAA,GAC7D;AACF;;;;"}

package/esm/useCellFocus.js

@@ -1,51 +1,108 @@
-import { useRef, useCallback } from 'react';
+import { useCallback } from 'react';
 import { getTableCell, headerCellQuery, dataCellQuery } from './table-dom-utils.js';
-import { queryClosest } from '@vuu-ui/vuu-utils';
+import { queryClosest, isArrowKey } from '@vuu-ui/vuu-utils';
 
+const getCellPosition = (el) => {
+  const top = parseInt(el.parentElement?.style.top ?? "-1");
+  return { top };
+};
 const useCellFocus = ({
+  cellFocusStateRef,
   containerRef,
   disableFocus = false,
   requestScroll
 }) => {
-  const focusableCell = useRef();
+  const focusCellPlaceholderRef = useCallback(
+    (el) => cellFocusStateRef.current.placeholderEl = el,
+    [cellFocusStateRef]
+  );
   const focusCell = useCallback(
-    (cellPos) => {
+    (cellPos, fromKeyboard = false) => {
       if (containerRef.current) {
-        const activeCell = getTableCell(containerRef, cellPos);
-        if (activeCell) {
-          if (activeCell !== focusableCell.current) {
-            focusableCell.current?.removeAttribute("tabindex");
-            focusableCell.current = activeCell;
-            activeCell.setAttribute("tabindex", "0");
+        const { current: state } = cellFocusStateRef;
+        if (fromKeyboard && state.outsideViewport) {
+          state.cellPos = cellPos;
+        } else {
+          const activeCell = getTableCell(containerRef, cellPos);
+          if (activeCell) {
+            if (activeCell !== state.el) {
+              state.el?.removeAttribute("tabindex");
+              activeCell.setAttribute("tabindex", "0");
+              state.cellPos = cellPos;
+              state.el = activeCell;
+              state.pos = getCellPosition(activeCell);
+              state.outsideViewport = false;
+              if (state.placeholderEl) {
+                state.placeholderEl.style.top = `${state.pos.top}px`;
+              }
+            }
+            requestScroll?.({ type: "scroll-row", rowIndex: cellPos[0] });
+            activeCell.focus({ preventScroll: true });
           }
-          requestScroll?.({ type: "scroll-row", rowIndex: cellPos[0] });
-          activeCell.focus({ preventScroll: true });
         }
       }
     },
-    // TODO we recreate this function whenever viewportRange changes, which will
-    // be often whilst scrolling - store range in a a ref ?
-    [containerRef, requestScroll]
+    [cellFocusStateRef, containerRef, requestScroll]
   );
   const tableBodyRef = useCallback(
     (el) => {
       if (el) {
+        const { current: state } = cellFocusStateRef;
         const table = queryClosest(el, ".vuuTable");
         if (table) {
-          if (focusableCell.current === void 0 && !disableFocus) {
-            const cell = table.querySelector(headerCellQuery(0)) || table.querySelector(dataCellQuery(0, 0));
-            if (cell) {
-              cell.setAttribute("tabindex", "0");
-              focusableCell.current = cell;
+          if (state.el === null && !disableFocus) {
+            const headerCell = table.querySelector(
+              headerCellQuery(0)
+            );
+            if (headerCell) {
+              headerCell.setAttribute("tabindex", "0");
+              state.cellPos = [-1, 0];
+              state.el = headerCell;
+              state.pos = { top: -20 };
+              if (state.placeholderEl) {
+                state.placeholderEl.style.top = `-20px`;
+              }
+            } else {
+              const cell = table.querySelector(
+                dataCellQuery(0, 0)
+              );
+              if (cell) {
+                cell.setAttribute("tabindex", "0");
+                state.cellPos = [0, 0];
+                state.el = cell;
+                state.pos = { top: 0 };
+                if (state.placeholderEl) {
+                  state.placeholderEl.style.top = `0px`;
+                }
+              }
             }
           }
         }
       }
     },
-    [disableFocus]
+    [cellFocusStateRef, disableFocus]
+  );
+  const focusCellPlaceholderKeyDown = useCallback(
+    (evt) => {
+      const { outsideViewport, pos } = cellFocusStateRef.current;
+      if (pos && isArrowKey(evt.key)) {
+        if (outsideViewport === "above") {
+          requestScroll?.({ type: "scroll-top", scrollPos: pos.top });
+        } else if (outsideViewport === "below") {
+          requestScroll?.({ type: "scroll-bottom", scrollPos: pos.top });
+        } else {
+          throw Error(
+            `cellFocusPlaceholder should not have focus if inside viewport`
+          );
+        }
+      }
+    },
+    [cellFocusStateRef, requestScroll]
   );
   return {
     focusCell,
+    focusCellPlaceholderKeyDown,
+    focusCellPlaceholderRef,
     tableBodyRef
   };
 };

package/esm/useCellFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCellFocus.js","sources":["../src/useCellFocus.ts"],"sourcesContent":["import { RefCallback, RefObject, useCallback, useRef } from \"react\";\nimport {\n  CellPos,\n  dataCellQuery,\n  getTableCell,\n  headerCellQuery,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\nimport { queryClosest } from \"@vuu-ui/vuu-utils\";\n\nexport interface CellFocusHookProps {\n  containerRef: RefObject<HTMLElement>;\n  disableFocus?: boolean;\n  requestScroll?: ScrollRequestHandler;\n}\n\nexport type FocusCell = (cellPos: CellPos) => void;\n\nexport const useCellFocus = ({\n  containerRef,\n  disableFocus = false,\n  requestScroll,\n}: CellFocusHookProps) => {\n  const focusableCell = useRef<HTMLElement>();\n\n  const focusCell = useCallback<FocusCell>(\n    (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 tableBodyRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        const table = queryClosest<HTMLDivElement>(el, \".vuuTable\");\n        if (table) {\n          if (focusableCell.current === undefined && !disableFocus) {\n            const cell =\n              table.querySelector<HTMLDivElement>(headerCellQuery(0)) ||\n              table.querySelector<HTMLDivElement>(dataCellQuery(0, 0));\n            if (cell) {\n              cell.setAttribute(\"tabindex\", \"0\");\n              focusableCell.current = cell;\n            }\n          }\n        }\n      }\n    },\n    [disableFocus],\n  );\n\n  return {\n    focusCell,\n    tableBodyRef,\n  };\n};\n"],"names":[],"mappings":";;;;AAkBO,MAAM,eAAe,CAAC;AAAA,EAC3B,YAAA;AAAA,EACA,YAAe,GAAA,KAAA;AAAA,EACf,aAAA;AACF,CAA0B,KAAA;AACxB,EAAA,MAAM,gBAAgB,MAAoB,EAAA,CAAA;AAE1C,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,OAAY,KAAA;AACX,MAAA,IAAI,aAAa,OAAS,EAAA;AACxB,QAAM,MAAA,UAAA,GAAa,YAAa,CAAA,YAAA,EAAc,OAAO,CAAA,CAAA;AACrD,QAAA,IAAI,UAAY,EAAA;AACd,UAAI,IAAA,UAAA,KAAe,cAAc,OAAS,EAAA;AACxC,YAAc,aAAA,CAAA,OAAA,EAAS,gBAAgB,UAAU,CAAA,CAAA;AACjD,YAAA,aAAA,CAAc,OAAU,GAAA,UAAA,CAAA;AACxB,YAAW,UAAA,CAAA,YAAA,CAAa,YAAY,GAAG,CAAA,CAAA;AAAA,WACzC;AAEA,UAAA,aAAA,GAAgB,EAAE,IAAM,EAAA,YAAA,EAAc,UAAU,OAAQ,CAAA,CAAC,GAAG,CAAA,CAAA;AAC5D,UAAA,UAAA,CAAW,KAAM,CAAA,EAAE,aAAe,EAAA,IAAA,EAAM,CAAA,CAAA;AAAA,SAC1C;AAAA,OACF;AAAA,KACF;AAAA;AAAA;AAAA,IAGA,CAAC,cAAc,aAAa,CAAA;AAAA,GAC9B,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,EAAO,KAAA;AACN,MAAA,IAAI,EAAI,EAAA;AACN,QAAM,MAAA,KAAA,GAAQ,YAA6B,CAAA,EAAA,EAAI,WAAW,CAAA,CAAA;AAC1D,QAAA,IAAI,KAAO,EAAA;AACT,UAAA,IAAI,aAAc,CAAA,OAAA,KAAY,KAAa,CAAA,IAAA,CAAC,YAAc,EAAA;AACxD,YAAA,MAAM,IACJ,GAAA,KAAA,CAAM,aAA8B,CAAA,eAAA,CAAgB,CAAC,CAAC,CACtD,IAAA,KAAA,CAAM,aAA8B,CAAA,aAAA,CAAc,CAAG,EAAA,CAAC,CAAC,CAAA,CAAA;AACzD,YAAA,IAAI,IAAM,EAAA;AACR,cAAK,IAAA,CAAA,YAAA,CAAa,YAAY,GAAG,CAAA,CAAA;AACjC,cAAA,aAAA,CAAc,OAAU,GAAA,IAAA,CAAA;AAAA,aAC1B;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,YAAY,CAAA;AAAA,GACf,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"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":[],"mappings":"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"}

package/esm/useKeyboardNavigation.js

@@ -24,9 +24,22 @@ const isNavigationKey = (key, navigationStyle) => {
       return false;
   }
 };
+const focusColumnMenuIfAppropriate = (e, [rowIdx], el) => {
+  if (e.shiftKey && e.key.match(/Arrow(Left|Right)/) && rowIdx === -1) {
+    if (el?.classList.contains("vuuTableHeaderCell")) {
+      const menuButton = el?.querySelector(".vuuColumnMenu");
+      if (menuButton) {
+        menuButton.focus();
+        return true;
+      }
+    }
+  }
+  return false;
+};
 const PageKeys = ["Home", "End", "PageUp", "PageDown"];
 const isPagingKey = (key) => PageKeys.includes(key);
 const useKeyboardNavigation = ({
+  cellFocusStateRef,
   columnCount = 0,
   containerRef,
   defaultHighlightedIndex,
@@ -39,8 +52,6 @@ const useKeyboardNavigation = ({
   rowCount = 0,
   viewportRowCount
 }) => {
-  const focusedCellPos = useRef([-1, -1]);
-  const activeCellPos = useRef([-1, 0]);
   const highlightedIndexRef = useRef();
   const [highlightedIndex, setHighlightedIdx] = useControlled({
     controlled: highlightedIndexProp,
@@ -49,26 +60,28 @@ const useKeyboardNavigation = ({
   });
   highlightedIndexRef.current = highlightedIndex;
   const setHighlightedIndex = useCallback(
-    (idx, fromKeyboard = false) => {
+    (idx) => {
       onHighlight?.(idx);
       setHighlightedIdx(idx);
     },
     [onHighlight, setHighlightedIdx]
   );
-  const getFocusedCell = (element) => element?.closest(
-    "[role='columnHeader'],[role='cell']"
-  );
+  const getFocusedCell = (el) => {
+    if (el?.role == "cell" || el?.role === "columnheader") {
+      return el;
+    } else {
+      return el?.closest(
+        "[role='columnHeader'],[role='cell']"
+      );
+    }
+  };
   const setActiveCell = useCallback(
     (rowIdx, colIdx, fromKeyboard = false) => {
       const pos = [rowIdx, colIdx];
-      activeCellPos.current = pos;
       if (navigationStyle === "row") {
         setHighlightedIdx(rowIdx);
       } else {
-        focusCell(pos);
-      }
-      if (fromKeyboard) {
-        focusedCellPos.current = pos;
+        focusCell(pos, fromKeyboard);
       }
     },
     [focusCell, navigationStyle, setHighlightedIdx]
@@ -76,10 +89,12 @@ const useKeyboardNavigation = ({
   const nextPageItemIdx = useCallback(
     (key, [rowIdx, colIdx]) => new Promise((resolve) => {
       let newRowIdx = rowIdx;
+      const { current: focusState } = cellFocusStateRef;
       switch (key) {
         case "PageDown": {
           newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);
           if (newRowIdx !== rowIdx) {
+            focusState.cellPos = [newRowIdx, colIdx];
             requestScroll?.({ type: "scroll-page", direction: "down" });
           }
           break;
@@ -87,6 +102,7 @@ const useKeyboardNavigation = ({
         case "PageUp": {
           newRowIdx = Math.max(0, rowIdx - viewportRowCount);
           if (newRowIdx !== rowIdx) {
+            focusState.cellPos = [newRowIdx, colIdx];
             requestScroll?.({ type: "scroll-page", direction: "up" });
           }
           break;
@@ -94,6 +110,7 @@ const useKeyboardNavigation = ({
         case "Home": {
           newRowIdx = 0;
           if (newRowIdx !== rowIdx) {
+            focusState.cellPos = [0, colIdx];
             requestScroll?.({ type: "scroll-end", direction: "home" });
           }
           break;
@@ -101,6 +118,7 @@ const useKeyboardNavigation = ({
         case "End": {
           newRowIdx = rowCount - 1;
           if (newRowIdx !== rowIdx) {
+            focusState.cellPos = [newRowIdx, colIdx];
             requestScroll?.({ type: "scroll-end", direction: "end" });
           }
           break;
@@ -110,16 +128,16 @@ const useKeyboardNavigation = ({
         resolve([newRowIdx, colIdx]);
       }, 35);
     }),
-    [requestScroll, rowCount, viewportRowCount]
+    [cellFocusStateRef, requestScroll, rowCount, viewportRowCount]
   );
   const handleFocus = useCallback(() => {
     if (disableHighlightOnFocus !== true) {
       if (containerRef.current?.contains(document.activeElement)) {
         const focusedCell = getFocusedCell(document.activeElement);
         if (focusedCell) {
-          focusedCellPos.current = getTableCellPos(focusedCell);
+          cellFocusStateRef.current.cellPos = getTableCellPos(focusedCell);
           if (navigationStyle === "row") {
-            setHighlightedIdx(focusedCellPos.current[0]);
+            setHighlightedIdx(cellFocusStateRef.current.cellPos[0]);
           }
         }
       }
@@ -127,18 +145,22 @@ const useKeyboardNavigation = ({
   }, [
     disableHighlightOnFocus,
     containerRef,
+    cellFocusStateRef,
     navigationStyle,
     setHighlightedIdx
   ]);
   const navigateChildItems = useCallback(
     async (key) => {
-      const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, activeCellPos.current) : getNextCellPos(key, activeCellPos.current, columnCount, rowCount);
-      const [rowIdx, colIdx] = activeCellPos.current;
+      const {
+        current: { cellPos }
+      } = cellFocusStateRef;
+      const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, cellPos) : getNextCellPos(key, cellPos, columnCount, rowCount);
+      const [rowIdx, colIdx] = cellPos;
       if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {
         setActiveCell(nextRowIdx, nextColIdx, true);
       }
     },
-    [columnCount, nextPageItemIdx, rowCount, setActiveCell]
+    [cellFocusStateRef, columnCount, nextPageItemIdx, rowCount, setActiveCell]
   );
   const scrollRowIntoViewIfNecessary = useCallback(
     (rowIndex) => {
@@ -172,7 +194,10 @@ const useKeyboardNavigation = ({
   }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);
   const handleKeyDown = useCallback(
     (e) => {
-      const cell = queryClosest(e.target, ".vuuTableCell");
+      const cell = queryClosest(
+        e.target,
+        ".vuuTableCell,.vuuColumnMenu,.vuuTableHeaderCell"
+      );
       if (cellDropdownShowing(cell)) {
         return;
       }
@@ -182,11 +207,22 @@ const useKeyboardNavigation = ({
         if (navigationStyle === "row") {
           moveHighlightedRow(e.key);
         } else {
-          void navigateChildItems(e.key);
+          const {
+            current: { cellPos }
+          } = cellFocusStateRef;
+          if (!focusColumnMenuIfAppropriate(e, cellPos, cell)) {
+            navigateChildItems(e.key);
+          }
         }
       }
     },
-    [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems]
+    [
+      rowCount,
+      navigationStyle,
+      moveHighlightedRow,
+      cellFocusStateRef,
+      navigateChildItems
+    ]
   );
   const handleClick = useCallback(
     // Might not be a cell e.g the Settings button