@vuu-ui/vuu-table 2.1.0-alpha.11 → 2.1.0-alpha.13

package/cjs/Table.js

@@ -330,9 +330,6 @@ const Table = react.forwardRef(function Table2({
   const { measuredHeight: rowHeight, measuredRef: rowRef } = useMeasuredHeight.useMeasuredHeight({
     height: rowHeightProp
   });
-  console.log(
-    `[Table] measured row height ${rowHeight}, rowHeightProp ${rowHeightProp}`
-  );
   const { measuredHeight: footerHeight, measuredRef: footerRef } = useMeasuredHeight.useMeasuredHeight({});
   const rowLimit = maxViewportRowLimit ?? viewportRowLimit;
   if (config === void 0) {

package/cjs/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../packages/vuu-table/src/Table.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { DataSource, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport { TableProvider } from \"@vuu-ui/vuu-table-extras\";\nimport {\n  CustomHeader,\n  DataCellEditNotification,\n  GroupToggleTarget,\n  HeaderCellProps,\n  RowActionHandler,\n  RowProps,\n  SelectionChangeHandler,\n  ShowColumnHeaderMenus,\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 { lowerCase, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  ComponentType,\n  FC,\n  ForwardedRef,\n  RefObject,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Row as DefaultRow } from \"./Row\";\nimport { TableCellBlock } from \"./cell-block/cellblock-utils\";\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\";\n\nconst classBase = \"vuuTable\";\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\" | \"tree\";\n\n// A dummy Table Row rendered once and not visible. We measure this to\n// determine height of Row(s) and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nconst RowProxy = forwardRef<\n  HTMLDivElement,\n  { className?: string; height?: number }\n>(function RowProxy({ className = \"vuuTableRow\", height }, forwardedRef) {\n  return (\n    <div\n      aria-hidden\n      className={cx(className, `vuuRowProxy`)}\n      ref={forwardedRef}\n      style={{ height }}\n    />\n  );\n});\n\nexport interface TableProps\n  extends Omit<\n    MeasuredContainerProps,\n    \"onDragStart\" | \"onDrop\" | \"onSelect\" | \"searchPattern\"\n  > {\n  /**\n   * A react function component that will be rendered if there are no rows to display\n   */\n  EmptyDisplay?: ComponentType;\n  /**\n   * A custom implementation of HeaderCell which will be rendered in place of the\n   * default HeaderCell. If provided, custom implementation is responsible for all\n   * header behaviour (if required) - sorting, resizing etc.\n   */\n  HeaderCell?: FC<HeaderCellProps>;\n  /**\n   * A custom Row implementation that will be rendered in place of the default\n   * Row.\n   */\n  Row?: FC<RowProps>;\n  /**\n   * Allow a block of cells to be selected. Typically to be copied.\n   */\n  allowCellBlockSelection?: 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   * Allow all rows be selected, use with checkbox coliumn.\n   */\n  allowSelectAll?: boolean;\n\n  /**\n   * If checkbox selection is in effect, can user select row by clicking row. If\n   * false, checkbox must be clicked explicitly.\n   */\n  allowSelectCheckboxRow?: boolean;\n  /**\n   * if provided, first row of table will be selected on initial render.\n   */\n  autoSelectFirstRow?: true;\n  /**\n   * if provided, row with matching key will be selected. If not present, will silently fail.\n   */\n  autoSelectRowKey?: string;\n\n  /**\n   * Pixel height of header cells. If specified here, this will take precedence over CSS\n   * values and Table will not respond to density changes.\n   */\n  colHeaderRowHeight?: number;\n\n  /**\n   * Provide configuration settings for Table. At minimun, column\n   * descriptors must be provided.\n   */\n  config: TableConfig;\n  dataSource: DataSource;\n\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   * When rows are grouped, user can click group row(s) to expand/collapse display of child rows.\n   * This allows precise configuration of where user may click to trigger toggle/collapse. When\n   * row selection is also supported, clicking outside the region specified here will select or\n   * deselect the row.\n   * - toggle-icon - the small toggle icon must be clicked directly\n   * - group-column (default) - user can click anywhere within the group column, i.e on the icon or the column text\n   */\n  groupToggleTarget?: GroupToggleTarget;\n\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   * `tree` is a specialised navigation behaviour only useful where table is being\n   * used to present purely grouped data (see TreeTable)\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\n  /**\n   * In a Table with editable cells, this callback will be invoked every time\n   * a user performs any edit operation on an editable field.\n   */\n  // TODO can we scrap this and leavr it to the editTracker ?\n  onDataEdited?: DataCellEditNotification;\n\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  /**\n   * Provide functionality for custom row actions. e.g. buttons embedded within row cells.\n   * These will be available to any custom renderers via TableContext. e.g. a Row may\n   * provide a 'Delete' or 'Cancel' button. Implement this functionality in a rowActionHandler.\n   */\n  rowActionHandlers?: Record<string, RowActionHandler>;\n\n  /**\n   * Allows opt-in to a predefined style pattern that renders a border around a row selection block.\n   */\n  rowSelectionBorder?: boolean;\n\n  /**\n   * Only applicable to grouped data. If there are selected rows which are not top-level\n   * items and group items above are not already expanded, expand all group items in\n   * the hierarchy above selected item. Selected items will thus always be visible, initially.\n   * This affects items set at load time via autoSelectRowKey as well as items\n   * selected programatically (ie not directly by user).\n   * Nodes can of course be collapsed by user at runtime which may hide selected rows.\n   * Note: this is not supported by all DataSource implementations\n   */\n  revealSelected?: boolean;\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   * If a search has been applied against data, this is the search text used.\n   * Will be used to highlight matching text.\n   */\n  searchPattern?: string;\n  /**\n   * Selection behaviour for Table:\n   * `none` selection disabled\n   * `single` no more than one row may be selected\n   * `single-no-deselect` no more than one row may be selected, one row is always selected, defaults to first visible\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. If true, all available Column Menu\n   * actions will be available via the menu. Alternatively, a map of specific column menu\n   * permissions can be provided to allow control over which menu items are presented.\n   */\n  showColumnHeaderMenus?: ShowColumnHeaderMenus;\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  EmptyDisplay,\n  HeaderCell,\n  Row = DefaultRow,\n  allowCellBlockSelection,\n  allowDragColumnHeader = true,\n  allowDragDrop,\n  allowSelectAll,\n  allowSelectCheckboxRow,\n  autoSelectFirstRow,\n  autoSelectRowKey,\n  // colHeaderRowHeight,\n  config,\n  containerRef,\n  customHeader,\n  dataSource,\n  disableFocus = false,\n  groupToggleTarget,\n  highlightedIndex: highlightedIndexProp,\n  id: idProp,\n  lowerCaseSearchPattern,\n  navigationStyle = \"cell\",\n  // onAvailableColumnsChange,\n  onConfigChange,\n  onDataEdited: onDataEditedProp,\n  onDragStart,\n  onDrop,\n  onHighlight,\n  onRowClick: onRowClickProp,\n  onSelect,\n  onSelectCellBlock,\n  onSelectionChange,\n  renderBufferSize = 0,\n  revealSelected,\n  rowActionHandlers,\n  rowHeight,\n  scrollingApiRef,\n  selectionModel = \"extended\",\n  showColumnHeaders = true,\n  showColumnHeaderMenus = true,\n  showPaginationControls,\n  size,\n}: Omit<\n  TableProps,\n  | \"colHeaderRowHeight\"\n  | \"maxViewportRowLimit\"\n  | \"resizeStrategy\"\n  | \"rowHeight\"\n  | \"rowSelectionStyle\"\n  | \"searchPattern\"\n  | \"viewportRowLimit\"\n> & {\n  containerRef: RefObject<HTMLDivElement | null>;\n  /**\n   * We lowercase this once, on entry, which is the format in which it will be used.\n   */\n  lowerCaseSearchPattern: Lowercase<string>;\n  rowHeight: number;\n  size: MeasuredSize;\n}) => {\n  const id = useId(idProp);\n  const {\n    allRowsSelected,\n    cellBlock,\n    columns,\n    dataRows,\n    draggableRow,\n    focusCellPlaceholderKeyDown,\n    focusCellPlaceholderRef,\n    getRowOffset,\n    handleColumnAction,\n    headerState: { height: headerHeight, count: headerCount },\n    headings,\n    highlightedIndex,\n    onCheckBoxColumnHeaderClick,\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    allowSelectCheckboxRow,\n    autoSelectFirstRow,\n    autoSelectRowKey,\n    config,\n    containerRef,\n    dataSource,\n    disableFocus,\n    highlightedIndex: highlightedIndexProp,\n    id,\n    navigationStyle,\n    onConfigChange,\n    onDataEdited: onDataEditedProp,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick: onRowClickProp,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    revealSelected,\n    rowHeight,\n    scrollingApiRef,\n    selectionModel,\n    showColumnHeaders,\n    showPaginationControls,\n    size,\n  });\n\n  const { selectionBookendWidth = 4 } = config;\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    \"--table-selection-bookend-width\": `${selectionBookendWidth}px`,\n  } as CSSProperties;\n\n  const headersReady = showColumnHeaders === false || headerHeight > 0;\n  const readyToRenderTableBody = headersReady && dataRows.length > 0;\n\n  return (\n    <TableProvider\n      dataSource={dataSource}\n      menuActionHandler={handleColumnAction}\n      rowActionHandlers={rowActionHandlers}\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\n      {dataSource.size === 0 && EmptyDisplay ? (\n        <div className={`${classBase}-emptyDisplay`}>\n          <EmptyDisplay />{\" \"}\n        </div>\n      ) : null}\n\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              HeaderCell={HeaderCell}\n              allowDragColumnHeader={allowDragColumnHeader}\n              allowSelectAll={allowSelectAll}\n              allRowsSelected={allRowsSelected}\n              // columns={scrollProps.columnsWithinViewport}\n              columns={columns}\n              customHeader={customHeader}\n              headings={headings}\n              onCheckBoxColumnHeaderClick={onCheckBoxColumnHeaderClick}\n              onHeightMeasured={onHeaderHeightMeasured}\n              onMoveColumn={onMoveColumn}\n              onMoveGroupColumn={onMoveGroupColumn}\n              onRemoveGroupColumn={onRemoveGroupColumn}\n              onResizeColumn={onResizeColumn}\n              onSortColumn={onSortColumn}\n              showBookends={selectionBookendWidth > 0}\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              {dataRows.map((dataRow) => {\n                const ariaRowIndex = dataRow.index + headerCount + 1;\n                return (\n                  <Row\n                    aria-rowindex={ariaRowIndex}\n                    classNameGenerator={rowClassNameGenerator}\n                    columns={scrollProps.columnsWithinViewport}\n                    // This is used for styling selection only.\n                    data-first-row={dataRow.index === 0 ? \"true\" : undefined}\n                    dataRow={dataRow}\n                    groupToggleTarget={groupToggleTarget}\n                    highlighted={highlightedIndex === ariaRowIndex}\n                    key={dataRow.renderIndex}\n                    onClick={onRowClick}\n                    onDataEdited={onDataEdited}\n                    offset={showPaginationControls ? 0 : getRowOffset(dataRow)}\n                    onToggleGroup={onToggleGroup}\n                    showBookends={selectionBookendWidth > 0}\n                    searchPattern={lowerCaseSearchPattern}\n                    virtualColSpan={scrollProps.virtualColSpan}\n                    zebraStripes={tableAttributes.zebraStripes}\n                  />\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                aria-hidden={true}\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    </TableProvider>\n  );\n};\n\nexport const Table = forwardRef(function Table(\n  {\n    EmptyDisplay,\n    HeaderCell,\n    Row,\n    allowCellBlockSelection,\n    allowDragColumnHeader,\n    allowDragDrop,\n    allowSelectAll,\n    allowSelectCheckboxRow,\n    autoSelectFirstRow,\n    autoSelectRowKey,\n    className: classNameProp,\n    config,\n    customHeader,\n    dataSource,\n    disableFocus,\n    groupToggleTarget,\n    colHeaderRowHeight: colHeaderRowHeightProp,\n    height,\n    highlightedIndex,\n    id,\n    maxViewportRowLimit,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDataEdited,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    revealSelected,\n    resizeStrategy,\n    rowActionHandlers,\n    rowHeight: rowHeightProp,\n    rowSelectionBorder,\n    scrollingApiRef,\n    searchPattern = \"\",\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\n  const { measuredHeight: rowHeight, measuredRef: rowRef } = useMeasuredHeight({\n    height: rowHeightProp,\n  });\n\n  console.log(\n    `[Table] measured row height ${rowHeight}, rowHeightProp ${rowHeightProp}`,\n  );\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>(undefined);\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}-rowSelection-bordered`]: rowSelectionBorder,\n        [`${classBase}-maxViewportRowLimit`]: maxViewportRowLimit,\n        [`${classBase}-viewportRowLimit`]: viewportRowLimit,\n      })}\n      height={height}\n      id={id}\n      onResize={setSize}\n      ref={useForkRef(containerRef, forwardedRef)}\n      resizeStrategy={resizeStrategy}\n      style={\n        {\n          ...styleProp,\n          \"--col-header-row-height-prop\":\n            typeof colHeaderRowHeightProp === \"number\"\n              ? `${colHeaderRowHeightProp}px`\n              : undefined,\n          \"--row-height-prop\":\n            typeof rowHeightProp === \"number\"\n              ? `${rowHeightProp}px`\n              : 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          EmptyDisplay={EmptyDisplay}\n          HeaderCell={HeaderCell}\n          Row={Row}\n          allowCellBlockSelection={allowCellBlockSelection}\n          allowDragColumnHeader={allowDragColumnHeader}\n          allowDragDrop={allowDragDrop}\n          allowSelectAll={allowSelectAll}\n          allowSelectCheckboxRow={allowSelectCheckboxRow}\n          autoSelectFirstRow={autoSelectFirstRow}\n          autoSelectRowKey={autoSelectRowKey}\n          config={config}\n          containerRef={containerRef}\n          customHeader={customHeader}\n          dataSource={dataSource}\n          disableFocus={disableFocus}\n          groupToggleTarget={groupToggleTarget}\n          highlightedIndex={highlightedIndex}\n          id={id}\n          navigationStyle={navigationStyle}\n          onAvailableColumnsChange={onAvailableColumnsChange}\n          onConfigChange={onConfigChange}\n          onDataEdited={onDataEdited}\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          revealSelected={revealSelected}\n          rowActionHandlers={rowActionHandlers}\n          rowHeight={rowHeight}\n          scrollingApiRef={scrollingApiRef}\n          lowerCaseSearchPattern={lowerCase(searchPattern)}\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":["forwardRef","RowProxy","jsx","Row","DefaultRow","useId","useTable","jsxs","TableProvider","TableHeader","Table","useWindow","useComponentCssInjection","tableCss","useRef","useState","useMeasuredHeight","useCallback","size","useMemo","MeasuredContainer","useForkRef","lowerCase","reduceSizeHeight","PaginationControl"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../packages/vuu-table/src/Table.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { DataSource, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport { TableProvider } from \"@vuu-ui/vuu-table-extras\";\nimport {\n  CustomHeader,\n  DataCellEditNotification,\n  GroupToggleTarget,\n  HeaderCellProps,\n  RowActionHandler,\n  RowProps,\n  SelectionChangeHandler,\n  ShowColumnHeaderMenus,\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 { lowerCase, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  ComponentType,\n  FC,\n  ForwardedRef,\n  RefObject,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Row as DefaultRow } from \"./Row\";\nimport { TableCellBlock } from \"./cell-block/cellblock-utils\";\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\";\n\nconst classBase = \"vuuTable\";\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\" | \"tree\";\n\n// A dummy Table Row rendered once and not visible. We measure this to\n// determine height of Row(s) and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nconst RowProxy = forwardRef<\n  HTMLDivElement,\n  { className?: string; height?: number }\n>(function RowProxy({ className = \"vuuTableRow\", height }, forwardedRef) {\n  return (\n    <div\n      aria-hidden\n      className={cx(className, `vuuRowProxy`)}\n      ref={forwardedRef}\n      style={{ height }}\n    />\n  );\n});\n\nexport interface TableProps\n  extends Omit<\n    MeasuredContainerProps,\n    \"onDragStart\" | \"onDrop\" | \"onSelect\" | \"searchPattern\"\n  > {\n  /**\n   * A react function component that will be rendered if there are no rows to display\n   */\n  EmptyDisplay?: ComponentType;\n  /**\n   * A custom implementation of HeaderCell which will be rendered in place of the\n   * default HeaderCell. If provided, custom implementation is responsible for all\n   * header behaviour (if required) - sorting, resizing etc.\n   */\n  HeaderCell?: FC<HeaderCellProps>;\n  /**\n   * A custom Row implementation that will be rendered in place of the default\n   * Row.\n   */\n  Row?: FC<RowProps>;\n  /**\n   * Allow a block of cells to be selected. Typically to be copied.\n   */\n  allowCellBlockSelection?: 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   * Allow all rows be selected, use with checkbox coliumn.\n   */\n  allowSelectAll?: boolean;\n\n  /**\n   * If checkbox selection is in effect, can user select row by clicking row. If\n   * false, checkbox must be clicked explicitly.\n   */\n  allowSelectCheckboxRow?: boolean;\n  /**\n   * if provided, first row of table will be selected on initial render.\n   */\n  autoSelectFirstRow?: true;\n  /**\n   * if provided, row with matching key will be selected. If not present, will silently fail.\n   */\n  autoSelectRowKey?: string;\n\n  /**\n   * Pixel height of header cells. If specified here, this will take precedence over CSS\n   * values and Table will not respond to density changes.\n   */\n  colHeaderRowHeight?: number;\n\n  /**\n   * Provide configuration settings for Table. At minimun, column\n   * descriptors must be provided.\n   */\n  config: TableConfig;\n  dataSource: DataSource;\n\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   * When rows are grouped, user can click group row(s) to expand/collapse display of child rows.\n   * This allows precise configuration of where user may click to trigger toggle/collapse. When\n   * row selection is also supported, clicking outside the region specified here will select or\n   * deselect the row.\n   * - toggle-icon - the small toggle icon must be clicked directly\n   * - group-column (default) - user can click anywhere within the group column, i.e on the icon or the column text\n   */\n  groupToggleTarget?: GroupToggleTarget;\n\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   * `tree` is a specialised navigation behaviour only useful where table is being\n   * used to present purely grouped data (see TreeTable)\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\n  /**\n   * In a Table with editable cells, this callback will be invoked every time\n   * a user performs any edit operation on an editable field.\n   */\n  // TODO can we scrap this and leavr it to the editTracker ?\n  onDataEdited?: DataCellEditNotification;\n\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  /**\n   * Provide functionality for custom row actions. e.g. buttons embedded within row cells.\n   * These will be available to any custom renderers via TableContext. e.g. a Row may\n   * provide a 'Delete' or 'Cancel' button. Implement this functionality in a rowActionHandler.\n   */\n  rowActionHandlers?: Record<string, RowActionHandler>;\n\n  /**\n   * Allows opt-in to a predefined style pattern that renders a border around a row selection block.\n   */\n  rowSelectionBorder?: boolean;\n\n  /**\n   * Only applicable to grouped data. If there are selected rows which are not top-level\n   * items and group items above are not already expanded, expand all group items in\n   * the hierarchy above selected item. Selected items will thus always be visible, initially.\n   * This affects items set at load time via autoSelectRowKey as well as items\n   * selected programatically (ie not directly by user).\n   * Nodes can of course be collapsed by user at runtime which may hide selected rows.\n   * Note: this is not supported by all DataSource implementations\n   */\n  revealSelected?: boolean;\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   * If a search has been applied against data, this is the search text used.\n   * Will be used to highlight matching text.\n   */\n  searchPattern?: string;\n  /**\n   * Selection behaviour for Table:\n   * `none` selection disabled\n   * `single` no more than one row may be selected\n   * `single-no-deselect` no more than one row may be selected, one row is always selected, defaults to first visible\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. If true, all available Column Menu\n   * actions will be available via the menu. Alternatively, a map of specific column menu\n   * permissions can be provided to allow control over which menu items are presented.\n   */\n  showColumnHeaderMenus?: ShowColumnHeaderMenus;\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  EmptyDisplay,\n  HeaderCell,\n  Row = DefaultRow,\n  allowCellBlockSelection,\n  allowDragColumnHeader = true,\n  allowDragDrop,\n  allowSelectAll,\n  allowSelectCheckboxRow,\n  autoSelectFirstRow,\n  autoSelectRowKey,\n  // colHeaderRowHeight,\n  config,\n  containerRef,\n  customHeader,\n  dataSource,\n  disableFocus = false,\n  groupToggleTarget,\n  highlightedIndex: highlightedIndexProp,\n  id: idProp,\n  lowerCaseSearchPattern,\n  navigationStyle = \"cell\",\n  // onAvailableColumnsChange,\n  onConfigChange,\n  onDataEdited: onDataEditedProp,\n  onDragStart,\n  onDrop,\n  onHighlight,\n  onRowClick: onRowClickProp,\n  onSelect,\n  onSelectCellBlock,\n  onSelectionChange,\n  renderBufferSize = 0,\n  revealSelected,\n  rowActionHandlers,\n  rowHeight,\n  scrollingApiRef,\n  selectionModel = \"extended\",\n  showColumnHeaders = true,\n  showColumnHeaderMenus = true,\n  showPaginationControls,\n  size,\n}: Omit<\n  TableProps,\n  | \"colHeaderRowHeight\"\n  | \"maxViewportRowLimit\"\n  | \"resizeStrategy\"\n  | \"rowHeight\"\n  | \"rowSelectionStyle\"\n  | \"searchPattern\"\n  | \"viewportRowLimit\"\n> & {\n  containerRef: RefObject<HTMLDivElement | null>;\n  /**\n   * We lowercase this once, on entry, which is the format in which it will be used.\n   */\n  lowerCaseSearchPattern: Lowercase<string>;\n  rowHeight: number;\n  size: MeasuredSize;\n}) => {\n  const id = useId(idProp);\n  const {\n    allRowsSelected,\n    cellBlock,\n    columns,\n    dataRows,\n    draggableRow,\n    focusCellPlaceholderKeyDown,\n    focusCellPlaceholderRef,\n    getRowOffset,\n    handleColumnAction,\n    headerState: { height: headerHeight, count: headerCount },\n    headings,\n    highlightedIndex,\n    onCheckBoxColumnHeaderClick,\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    allowSelectCheckboxRow,\n    autoSelectFirstRow,\n    autoSelectRowKey,\n    config,\n    containerRef,\n    dataSource,\n    disableFocus,\n    highlightedIndex: highlightedIndexProp,\n    id,\n    navigationStyle,\n    onConfigChange,\n    onDataEdited: onDataEditedProp,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick: onRowClickProp,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    revealSelected,\n    rowHeight,\n    scrollingApiRef,\n    selectionModel,\n    showColumnHeaders,\n    showPaginationControls,\n    size,\n  });\n\n  const { selectionBookendWidth = 4 } = config;\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    \"--table-selection-bookend-width\": `${selectionBookendWidth}px`,\n  } as CSSProperties;\n\n  const headersReady = showColumnHeaders === false || headerHeight > 0;\n  const readyToRenderTableBody = headersReady && dataRows.length > 0;\n\n  return (\n    <TableProvider\n      dataSource={dataSource}\n      menuActionHandler={handleColumnAction}\n      rowActionHandlers={rowActionHandlers}\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\n      {dataSource.size === 0 && EmptyDisplay ? (\n        <div className={`${classBase}-emptyDisplay`}>\n          <EmptyDisplay />{\" \"}\n        </div>\n      ) : null}\n\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              HeaderCell={HeaderCell}\n              allowDragColumnHeader={allowDragColumnHeader}\n              allowSelectAll={allowSelectAll}\n              allRowsSelected={allRowsSelected}\n              // columns={scrollProps.columnsWithinViewport}\n              columns={columns}\n              customHeader={customHeader}\n              headings={headings}\n              onCheckBoxColumnHeaderClick={onCheckBoxColumnHeaderClick}\n              onHeightMeasured={onHeaderHeightMeasured}\n              onMoveColumn={onMoveColumn}\n              onMoveGroupColumn={onMoveGroupColumn}\n              onRemoveGroupColumn={onRemoveGroupColumn}\n              onResizeColumn={onResizeColumn}\n              onSortColumn={onSortColumn}\n              showBookends={selectionBookendWidth > 0}\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              {dataRows.map((dataRow) => {\n                const ariaRowIndex = dataRow.index + headerCount + 1;\n                return (\n                  <Row\n                    aria-rowindex={ariaRowIndex}\n                    classNameGenerator={rowClassNameGenerator}\n                    columns={scrollProps.columnsWithinViewport}\n                    // This is used for styling selection only.\n                    data-first-row={dataRow.index === 0 ? \"true\" : undefined}\n                    dataRow={dataRow}\n                    groupToggleTarget={groupToggleTarget}\n                    highlighted={highlightedIndex === ariaRowIndex}\n                    key={dataRow.renderIndex}\n                    onClick={onRowClick}\n                    onDataEdited={onDataEdited}\n                    offset={showPaginationControls ? 0 : getRowOffset(dataRow)}\n                    onToggleGroup={onToggleGroup}\n                    showBookends={selectionBookendWidth > 0}\n                    searchPattern={lowerCaseSearchPattern}\n                    virtualColSpan={scrollProps.virtualColSpan}\n                    zebraStripes={tableAttributes.zebraStripes}\n                  />\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                aria-hidden={true}\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    </TableProvider>\n  );\n};\n\nexport const Table = forwardRef(function Table(\n  {\n    EmptyDisplay,\n    HeaderCell,\n    Row,\n    allowCellBlockSelection,\n    allowDragColumnHeader,\n    allowDragDrop,\n    allowSelectAll,\n    allowSelectCheckboxRow,\n    autoSelectFirstRow,\n    autoSelectRowKey,\n    className: classNameProp,\n    config,\n    customHeader,\n    dataSource,\n    disableFocus,\n    groupToggleTarget,\n    colHeaderRowHeight: colHeaderRowHeightProp,\n    height,\n    highlightedIndex,\n    id,\n    maxViewportRowLimit,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDataEdited,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    revealSelected,\n    resizeStrategy,\n    rowActionHandlers,\n    rowHeight: rowHeightProp,\n    rowSelectionBorder,\n    scrollingApiRef,\n    searchPattern = \"\",\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\n  const { measuredHeight: rowHeight, measuredRef: rowRef } = useMeasuredHeight({\n    height: rowHeightProp,\n  });\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>(undefined);\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}-rowSelection-bordered`]: rowSelectionBorder,\n        [`${classBase}-maxViewportRowLimit`]: maxViewportRowLimit,\n        [`${classBase}-viewportRowLimit`]: viewportRowLimit,\n      })}\n      height={height}\n      id={id}\n      onResize={setSize}\n      ref={useForkRef(containerRef, forwardedRef)}\n      resizeStrategy={resizeStrategy}\n      style={\n        {\n          ...styleProp,\n          \"--col-header-row-height-prop\":\n            typeof colHeaderRowHeightProp === \"number\"\n              ? `${colHeaderRowHeightProp}px`\n              : undefined,\n          \"--row-height-prop\":\n            typeof rowHeightProp === \"number\"\n              ? `${rowHeightProp}px`\n              : 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          EmptyDisplay={EmptyDisplay}\n          HeaderCell={HeaderCell}\n          Row={Row}\n          allowCellBlockSelection={allowCellBlockSelection}\n          allowDragColumnHeader={allowDragColumnHeader}\n          allowDragDrop={allowDragDrop}\n          allowSelectAll={allowSelectAll}\n          allowSelectCheckboxRow={allowSelectCheckboxRow}\n          autoSelectFirstRow={autoSelectFirstRow}\n          autoSelectRowKey={autoSelectRowKey}\n          config={config}\n          containerRef={containerRef}\n          customHeader={customHeader}\n          dataSource={dataSource}\n          disableFocus={disableFocus}\n          groupToggleTarget={groupToggleTarget}\n          highlightedIndex={highlightedIndex}\n          id={id}\n          navigationStyle={navigationStyle}\n          onAvailableColumnsChange={onAvailableColumnsChange}\n          onConfigChange={onConfigChange}\n          onDataEdited={onDataEdited}\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          revealSelected={revealSelected}\n          rowActionHandlers={rowActionHandlers}\n          rowHeight={rowHeight}\n          scrollingApiRef={scrollingApiRef}\n          lowerCaseSearchPattern={lowerCase(searchPattern)}\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":["forwardRef","RowProxy","jsx","Row","DefaultRow","useId","useTable","jsxs","TableProvider","TableHeader","Table","useWindow","useComponentCssInjection","tableCss","useRef","useState","useMeasuredHeight","useCallback","size","useMemo","MeasuredContainer","useForkRef","lowerCase","reduceSizeHeight","PaginationControl"],"mappings":"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"}

package/cjs/cell-renderers/input-cell/InputCell.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var inputCellCss = ".vuuTableCell.vuuTableCell-editable {\n  .vuuTableInputCell.saltInput-primary {\n    --salt-focused-outlineStyle: none;\n    --saltInput-height: var(--vuu-table-embedded-control-height);\n    --saltInput-minHeight: var(--saltInput-height);\n    border-radius: 2px;\n    font-weight: 500;\n  }\n}\n\n.vuuTableInputCell-icon {\n  --vuu-icon-height: 13px;\n  --vuu-icon-left: 0;\n  --vuu-icon-size: 15px;\n  --vuu-icon-width: 12px;\n  border-radius: 10px;\n}\n\n.vuuTableInputCell-error {\n  .saltInput-startAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: red;\n    }\n  }\n  .saltInput-endAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: red;\n    }\n  }\n}\n\n.vuuTableCell-right {\n  .saltInput-input {\n    text-align: right;\n  }\n}\n\n.vuuTableCell-error {\n  .vuuTableInputCell {\n    outline: var(--vuuTableCell-outline, solid red 2px);\n    outline-offset: -2px;\n  }\n}\n";
+var inputCellCss = ".vuuTableCell.vuuTableCell-editable {\n  .vuuTableInputCell.saltInput-primary {\n    --salt-focused-outlineStyle: none;\n    --saltInput-height: var(--vuu-table-embedded-control-height);\n    --saltInput-minHeight: var(--saltInput-height);\n    border-radius: 2px;\n    font-weight: 500;\n  }\n}\n\n.vuuTableInputCell-icon {\n  --vuu-icon-height: 13px;\n  --vuu-icon-left: 0;\n  --vuu-icon-size: 15px;\n  --vuu-icon-width: 12px;\n  border-radius: 10px;\n}\n\n.vuuTableInputCell-error {\n  .saltInput-startAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: red;\n    }\n  }\n  .saltInput-endAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: red;\n    }\n  }\n}\n\n.vuuTableCell-right {\n  .saltInput-input {\n    text-align: right;\n  }\n}\n\n.vuuTableInputCell-edited {\n  border-left:  solid var(--vuuTableInputCell-edited-color, var(--salt-editable-borderColor)) 4px !important;\n}\n\n.vuuTableCell-error {\n  .vuuTableInputCell {\n    outline: var(--vuuTableCell-outline, solid red 2px);\n    outline-offset: -2px;\n  }\n}\n";
 
 module.exports = inputCellCss;
 //# sourceMappingURL=InputCell.css.js.map

package/cjs/cell-renderers/input-cell/InputCell.js

@@ -23,19 +23,24 @@ const InputCell = ({
   });
   const dataValue = dataRow[column.name];
   const { align = "left", clientSideEditValidationCheck } = column;
-  const { warningMessage, ...editProps } = vuuUiControls.useEditableText({
+  const { edited, warningMessage, ...editProps } = vuuUiControls.useEditableText({
     value: dataValue,
     onEdit,
-    clientSideEditValidationCheck
+    clientSideEditValidationCheck,
+    type: vuuUtils.dataDescriptorTypeToVuuRowDataItemType(column)
   });
   const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-icon`, "data-icon": "error" }) : void 0;
   const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-icon`, "data-icon": "error" }) : void 0;
+  if (dataRow.index === 0 && column.name === "bbg") {
+    console.log(`[vuuTableInputCell ${column.name} edited ? ${edited}`);
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     core.Input,
     {
       ...editProps,
       bordered: true,
       className: cx(classBase, {
+        [`${classBase}-edited`]: edited,
         [`${classBase}-error`]: warningMessage !== void 0
       }),
       endAdornment,

package/cjs/cell-renderers/input-cell/InputCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nexport const InputCell = ({\n  column,\n  dataRow,\n  onEdit,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-input-cell\",\n    css: inputCellCss,\n    window: targetWindow,\n  });\n\n  const dataValue = dataRow[column.name] as number | string;\n  const { align = \"left\", clientSideEditValidationCheck } = column;\n\n  const { warningMessage, ...editProps } = useEditableText({\n    value: dataValue,\n    onEdit,\n    clientSideEditValidationCheck,\n  });\n\n  const endAdornment =\n    warningMessage && align === \"left\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  const startAdornment =\n    warningMessage && align === \"right\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  return (\n    <Input\n      {...editProps}\n      bordered\n      className={cx(classBase, {\n        [`${classBase}-error`]: warningMessage !== undefined,\n      })}\n      endAdornment={endAdornment}\n      startAdornment={startAdornment}\n    />\n  );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["useWindow","useComponentCssInjection","inputCellCss","useEditableText","jsx","Input","registerComponent"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAA,MAAM,EAAE,KAAA,GAAQ,MAAQ,EAAA,6BAAA,EAAkC,GAAA,MAAA;AAE1D,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAG,SAAA,KAAcC,6BAAgB,CAAA;AAAA,IACvD,KAAO,EAAA,SAAA;AAAA,IACP,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,MAAA,mBACzBC,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EAAA,MAAM,cACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,OAAA,mBACzBA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EACE,uBAAAA,cAAA;AAAA,IAACC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,QAAQ,EAAA,IAAA;AAAA,MACR,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAEAC,0BAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
+{"version":3,"file":"InputCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  dataDescriptorTypeToVuuRowDataItemType,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nexport const InputCell = ({\n  column,\n  dataRow,\n  onEdit,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-input-cell\",\n    css: inputCellCss,\n    window: targetWindow,\n  });\n\n  const dataValue = dataRow[column.name] as number | string;\n  const { align = \"left\", clientSideEditValidationCheck } = column;\n\n  const { edited, warningMessage, ...editProps } = useEditableText({\n    value: dataValue,\n    onEdit,\n    clientSideEditValidationCheck,\n    type: dataDescriptorTypeToVuuRowDataItemType(column),\n  });\n\n  const endAdornment =\n    warningMessage && align === \"left\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  const startAdornment =\n    warningMessage && align === \"right\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  if (dataRow.index === 0 && column.name === \"bbg\") {\n    console.log(`[vuuTableInputCell ${column.name} edited ? ${edited}`);\n  }\n\n  return (\n    <Input\n      {...editProps}\n      bordered\n      className={cx(classBase, {\n        [`${classBase}-edited`]: edited,\n        [`${classBase}-error`]: warningMessage !== undefined,\n      })}\n      endAdornment={endAdornment}\n      startAdornment={startAdornment}\n    />\n  );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["useWindow","useComponentCssInjection","inputCellCss","useEditableText","dataDescriptorTypeToVuuRowDataItemType","jsx","Input","registerComponent"],"mappings":";;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAA,MAAM,EAAE,KAAA,GAAQ,MAAQ,EAAA,6BAAA,EAAkC,GAAA,MAAA;AAE1D,EAAA,MAAM,EAAE,MAAQ,EAAA,cAAA,EAAgB,GAAG,SAAA,KAAcC,6BAAgB,CAAA;AAAA,IAC/D,KAAO,EAAA,SAAA;AAAA,IACP,MAAA;AAAA,IACA,6BAAA;AAAA,IACA,IAAA,EAAMC,gDAAuC,MAAM;AAAA,GACpD,CAAA;AAED,EAAA,MAAM,YACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,MAAA,mBACzBC,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EAAA,MAAM,cACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,OAAA,mBACzBA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EAAA,IAAI,OAAQ,CAAA,KAAA,KAAU,CAAK,IAAA,MAAA,CAAO,SAAS,KAAO,EAAA;AAChD,IAAA,OAAA,CAAQ,IAAI,CAAsB,mBAAA,EAAA,MAAA,CAAO,IAAI,CAAA,UAAA,EAAa,MAAM,CAAE,CAAA,CAAA;AAAA;AAGpE,EACE,uBAAAA,cAAA;AAAA,IAACC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,QAAQ,EAAA,IAAA;AAAA,MACR,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,QACzB,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAEAC,0BAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var tableCellCss = ".vuuTableCell {\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n  display: inline-block;\n  white-space: nowrap;\n  height: 100%;\n  outline-offset: -2px;\n  overflow: hidden;\n  padding: var(--vuuTableCell-padding, 0 11px 0 8px);\n  text-overflow: ellipsis;\n  vertical-align: top;\n\n\n    &:has(.vuuCheckboxRowSelector) {\n      text-overflow: unset;\n    }\n\n}\n\n.vuuTableCell-right {\n  text-align: right;\n}\n\n.vuuTableCell-editable {\n  align-items: center;\n  display: inline-flex;\n  padding: 0px 1px 0 2px;\n}\n\n.vuuTableCell-editable:focus-within,\n.vuuTableCell:focus {\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  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n}\n\n.vuuTableCell-editable.vuuEditing {\n  outline: var(\n    --vuuTableCell-outline,\n    dotted var(--salt-focused-outlineColor) 2px\n  );\n\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n\n  &:has(.vuuCheckboxRowSelector) {\n    outline: none;\n  }\n}\n/* .vuuTableCell-editable:focus {\n  outline: none;\n} */\n\n.vuuTableCell.ContextOpen {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n  );\n}\n";
+var tableCellCss = ".vuuTableCell {\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n  display: inline-block;\n  white-space: nowrap;\n  height: 100%;\n  outline-offset: -2px;\n  overflow: hidden;\n  padding: var(--vuuTableCell-padding, 0 11px 0 8px);\n  text-overflow: ellipsis;\n  vertical-align: top;\n\n\n    &:has(.vuuCheckboxRowSelector) {\n      text-overflow: unset;\n    }\n\n}\n\n.vuuTableCell-right {\n  text-align: right;\n}\n\n.vuuTableCell-editable {\n  align-items: center;\n  display: inline-flex;\n  padding: var(--vuuTableCell-padding-editable, 0px 1px 0 2px);\n}\n\n.vuuTableCell-editable:focus-within,\n.vuuTableCell:focus {\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  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n}\n\n.vuuTableCell-editable.vuuEditing {\n  outline: var(\n    --vuuTableCell-outline,\n    dotted var(--salt-focused-outlineColor) 2px\n  );\n\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n\n  &:has(.vuuCheckboxRowSelector) {\n    outline: none;\n  }\n}\n/* .vuuTableCell-editable:focus {\n  outline: none;\n} */\n\n.vuuTableCell.ContextOpen {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n  );\n}\n";
 
 module.exports = tableCellCss;
 //# sourceMappingURL=TableCell.css.js.map

package/cjs/table-data-source/useDataSource.js

@@ -52,14 +52,17 @@ const useDataSource = ({
     () => new DataRowMovingWindow.MovingDataRowWindow(rangeRef.current.withBuffer),
     []
   );
-  react.useMemo(() => {
-    dataSource.on("resumed", () => {
-      const { range } = dataSource;
-      if (range.to !== 0) {
-        dataRowWindow.setRange(dataSource.range.withBuffer);
-      }
-    });
+  const handleResume = react.useCallback(() => {
+    const { range } = dataSource;
+    if (range.to !== 0) {
+      dataRowWindow.setRange(dataSource.range.withBuffer);
+    }
   }, [dataRowWindow, dataSource]);
+  react.useEffect(() => {
+    return () => {
+      dataSource.removeListener("resumed", handleResume);
+    };
+  }, [dataSource, handleResume]);
   const setData = react.useCallback(
     (updates) => {
       const { current: DataRow2 } = dataRowRef;
@@ -105,6 +108,9 @@ const useDataSource = ({
           totalRowCountRef.current = message.size;
         }
         if (message.rows) {
+          console.log(
+            `#${message.clientViewportId} ${message.rows.length} rows`
+          );
           setData(message.rows);
           if (autoSelect && rowAutoSelected.current === false) {
             rowAutoSelected.current = true;
@@ -131,9 +137,6 @@ const useDataSource = ({
         onSizeChange?.(0);
         dataRowWindow.setRowCount(0);
         setData([]);
-        if (isMounted.current === false) {
-          console.log("setting state whilst unmounted");
-        }
         forceUpdate({});
       } else {
         console.log(`useDataSource unexpected message ${message.type}`);
@@ -193,7 +196,6 @@ const useDataSource = ({
     ]
   );
   react.useEffect(() => {
-    isMounted.current = true;
     if (dataSource.status !== "initialising") {
       const { columns, tableSchema } = dataSource;
       if (tableSchema) {
@@ -210,7 +212,6 @@ const useDataSource = ({
       }
     }
     return () => {
-      isMounted.current = false;
       dataSource.suspend?.(
         suspenseProps?.escalateToDisable,
         suspenseProps?.escalateDelay

package/cjs/table-data-source/useDataSource.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDataSource.js","sources":["../../../../packages/vuu-table/src/table-data-source/useDataSource.ts"],"sourcesContent":["import type {\n  DataSourceConfigChangeHandler,\n  DataSourceRow,\n  DataSourceSubscribeCallback,\n  DataSourceSubscribedMessage,\n  DataSourceSuspenseProps,\n  SchemaColumn,\n} from \"@vuu-ui/vuu-data-types\";\nimport { SelectRowRequest, VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { Range } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { TableProps } from \"../Table\";\nimport {\n  DataRow,\n  TableRowSelectHandlerInternal,\n} from \"@vuu-ui/vuu-table-types\";\nimport { MovingDataRowWindow } from \"./DataRowMovingWindow\";\nimport { dataRowFactory, DataRowFunc } from \"../data-row/DataRow\";\n\nconst NullDataRow = () => ({}) as DataRow;\n\nexport interface DataSourceHookProps\n  extends Pick<\n    TableProps,\n    | \"autoSelectFirstRow\"\n    | \"autoSelectRowKey\"\n    | \"dataSource\"\n    | \"renderBufferSize\"\n    | \"revealSelected\"\n    | \"selectionModel\"\n  > {\n  suspenseProps?: DataSourceSuspenseProps;\n  onSelect: TableRowSelectHandlerInternal;\n  onSizeChange: (size: number) => void;\n  onSubscribed: (subscription: DataSourceSubscribedMessage) => void;\n}\n\nexport const useDataSource = ({\n  autoSelectFirstRow,\n  autoSelectRowKey,\n  dataSource,\n  onSizeChange,\n  onSubscribed,\n  renderBufferSize = 0,\n  revealSelected,\n  onSelect,\n  selectionModel,\n  suspenseProps,\n}: DataSourceHookProps) => {\n  const [, forceUpdate] = useState<unknown>(null);\n  const dataRows = useRef<DataRow[]>([]);\n  const isMounted = useRef(true);\n  const hasUpdated = useRef(false);\n  const rangeRef = useRef<Range>(dataSource.range);\n  const dataRowRef = useRef<DataRowFunc>(NullDataRow);\n  const setColumnsRef = useRef<undefined | ((columns: string[]) => void)>(\n    undefined,\n  );\n  const totalRowCountRef = useRef(0);\n  const rowAutoSelected = useRef(false);\n\n  const autoSelect =\n    autoSelectRowKey ??\n    (autoSelectFirstRow || selectionModel === \"single-no-deselect\");\n\n  const handleConfigChange = useCallback<DataSourceConfigChangeHandler>(\n    (_config, _range, _confirmed, configChanges) => {\n      if (configChanges?.filterChanged) {\n        rowAutoSelected.current = false;\n      }\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (autoSelect) {\n      dataSource.on(\"config\", handleConfigChange);\n    }\n    return () => {\n      if (autoSelect) {\n        dataSource.removeListener(\"config\", handleConfigChange);\n      }\n    };\n  }, [autoSelect, dataSource, handleConfigChange]);\n\n  const dataRowWindow = useMemo(\n    () => new MovingDataRowWindow(rangeRef.current.withBuffer),\n    [],\n  );\n\n  useMemo(() => {\n    dataSource.on(\"resumed\", () => {\n      // When we resume a dataSource (after switching tabs etc)\n      // client will receive rows. We may not have received any\n      // setRange calls at this point so dataWindow range will\n      //not yet be set. If the dataWindow range is already set,\n      // this is a no-op.\n      const { range } = dataSource;\n      if (range.to !== 0) {\n        dataRowWindow.setRange(dataSource.range.withBuffer);\n      }\n    });\n  }, [dataRowWindow, dataSource]);\n\n  const setData = useCallback(\n    (updates: DataSourceRow[]) => {\n      const { current: DataRow } = dataRowRef;\n      for (const row of updates) {\n        // for now, we create a new DataRow each time\n        dataRowWindow.add(DataRow(row));\n      }\n      dataRows.current = dataRowWindow.data;\n      if (isMounted.current) {\n        // TODO do we ever need to worry about missing updates here ?\n        forceUpdate({});\n      }\n    },\n    [dataRowWindow],\n  );\n\n  const selectRow = useCallback(\n    (dataRow: DataRow) => {\n      const rowKey = dataRow.key;\n      dataSource.select?.({\n        preserveExistingSelection: false,\n        rowKey,\n        type: \"SELECT_ROW\",\n      } as SelectRowRequest);\n      onSelect?.(dataRow);\n    },\n    [dataSource, onSelect],\n  );\n\n  const createDataRow = useCallback(\n    (columns: string[], schemaColumns: readonly SchemaColumn[]) => {\n      const [DataRow, setColumns] = dataRowFactory(columns, schemaColumns);\n      dataRowRef.current = DataRow;\n      setColumnsRef.current = setColumns;\n    },\n    [],\n  );\n\n  const datasourceMessageHandler: DataSourceSubscribeCallback = useCallback(\n    (message) => {\n      if (message.type === \"subscribed\") {\n        createDataRow(message.columns, message.tableSchema.columns);\n        onSubscribed?.(message);\n      } else if (message.type === \"viewport-update\") {\n        if (typeof message.size === \"number\") {\n          onSizeChange?.(message.size);\n          // const size = dataRowWindow.data.length;\n          dataRowWindow.setRowCount(message.size);\n          totalRowCountRef.current = message.size;\n\n          // if (dataRowWindow.data.length < size) {\n          //   if (isMounted.current === false) {\n          //     console.log(\"setting state whilst unmounted\");\n          //   }\n\n          //   forceUpdate({});\n          // }\n        }\n        if (message.rows) {\n          setData(message.rows);\n          if (autoSelect && rowAutoSelected.current === false) {\n            // OR if no selected row in message.rows, e.g after a filter\n            rowAutoSelected.current = true;\n            if (typeof autoSelect === \"string\") {\n              const dataRow = dataRowWindow.getByKey(autoSelect);\n              if (dataRow) {\n                selectRow(dataRow);\n              } else {\n                console.warn(\n                  `[useDataSource] autoSelect row key ${autoSelect} not in viewport`,\n                );\n              }\n            } else if (dataRowWindow.hasData) {\n              selectRow(dataRowWindow.firstRow);\n            }\n          }\n        } else if (message.size === 0) {\n          setData([]);\n        } else if (typeof message.size === \"number\") {\n          dataRows.current = dataRowWindow.data;\n          hasUpdated.current = true;\n        }\n      } else if (message.type === \"viewport-clear\") {\n        onSizeChange?.(0);\n        dataRowWindow.setRowCount(0);\n        setData([]);\n\n        if (isMounted.current === false) {\n          console.log(\"setting state whilst unmounted\");\n        }\n\n        forceUpdate({});\n      } else {\n        console.log(`useDataSource unexpected message ${message.type}`);\n      }\n    },\n    [\n      autoSelect,\n      createDataRow,\n      dataRowWindow,\n      onSizeChange,\n      onSubscribed,\n      selectRow,\n      setData,\n    ],\n  );\n\n  const getSelectedRows = useCallback(() => {\n    return dataRowWindow.getSelectedRows();\n  }, [dataRowWindow]);\n\n  useEffect(() => {\n    if (dataSource.status === \"disabled\") {\n      dataSource.enable?.(datasourceMessageHandler);\n    }\n  }, [dataSource, datasourceMessageHandler]);\n\n  useMemo(() => {\n    setColumnsRef.current?.(dataSource.columns);\n  }, [dataSource.columns]);\n\n  const setRange = useCallback(\n    (viewportRange: VuuRange) => {\n      if (!rangeRef.current.equals(viewportRange)) {\n        const range = Range(\n          viewportRange.from,\n          viewportRange.to,\n          renderBufferSize,\n        );\n\n        dataRowWindow.setRange(range.withBuffer);\n\n        if (\n          dataSource.status !== \"subscribed\" &&\n          dataSource.status !== \"subscribing\" &&\n          dataSource.status !== \"enabling\"\n        ) {\n          dataSource?.subscribe(\n            {\n              range,\n              revealSelected,\n              selectedKeyValues: autoSelectRowKey\n                ? [autoSelectRowKey]\n                : undefined,\n            },\n            datasourceMessageHandler,\n          );\n        } else {\n          dataSource.range = rangeRef.current = range;\n        }\n      }\n    },\n    [\n      autoSelectRowKey,\n      dataRowWindow,\n      dataSource,\n      datasourceMessageHandler,\n      renderBufferSize,\n      revealSelected,\n    ],\n  );\n\n  useEffect(() => {\n    isMounted.current = true;\n    if (dataSource.status !== \"initialising\") {\n      const { columns, tableSchema } = dataSource;\n      if (tableSchema) {\n        createDataRow(columns, tableSchema.columns);\n      } else {\n        throw Error(\n          `[useDataSource] a resumed dataSource must have a tableSchema`,\n        );\n      }\n\n      dataSource.resume?.(datasourceMessageHandler);\n\n      if (dataSource.range.from > 0) {\n        // UI does not currently restore scroll position, so always reset to top of dataset\n        const { from, to } = rangeRef.current.reset;\n        setRange({ from, to });\n      }\n    }\n    return () => {\n      isMounted.current = false;\n      dataSource.suspend?.(\n        suspenseProps?.escalateToDisable,\n        suspenseProps?.escalateDelay,\n      );\n    };\n  }, [\n    createDataRow,\n    dataSource,\n    datasourceMessageHandler,\n    setRange,\n    suspenseProps,\n  ]);\n\n  return {\n    dataRows: dataRows.current,\n    dataRowsRef: dataRows,\n    getSelectedRows,\n    range: rangeRef.current,\n    setRange,\n  };\n};\n"],"names":["useState","useRef","useCallback","useEffect","useMemo","MovingDataRowWindow","DataRow","dataRowFactory","Range"],"mappings":"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"}
+{"version":3,"file":"useDataSource.js","sources":["../../../../packages/vuu-table/src/table-data-source/useDataSource.ts"],"sourcesContent":["import type {\n  DataSourceConfigChangeHandler,\n  DataSourceRow,\n  DataSourceSubscribeCallback,\n  DataSourceSubscribedMessage,\n  DataSourceSuspenseProps,\n  SchemaColumn,\n} from \"@vuu-ui/vuu-data-types\";\nimport { SelectRowRequest, VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { Range } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { TableProps } from \"../Table\";\nimport {\n  DataRow,\n  TableRowSelectHandlerInternal,\n} from \"@vuu-ui/vuu-table-types\";\nimport { MovingDataRowWindow } from \"./DataRowMovingWindow\";\nimport { dataRowFactory, DataRowFunc } from \"../data-row/DataRow\";\n\nconst NullDataRow = () => ({}) as DataRow;\n\nexport interface DataSourceHookProps\n  extends Pick<\n    TableProps,\n    | \"autoSelectFirstRow\"\n    | \"autoSelectRowKey\"\n    | \"dataSource\"\n    | \"renderBufferSize\"\n    | \"revealSelected\"\n    | \"selectionModel\"\n  > {\n  suspenseProps?: DataSourceSuspenseProps;\n  onSelect: TableRowSelectHandlerInternal;\n  onSizeChange: (size: number) => void;\n  onSubscribed: (subscription: DataSourceSubscribedMessage) => void;\n}\n\nexport const useDataSource = ({\n  autoSelectFirstRow,\n  autoSelectRowKey,\n  dataSource,\n  onSizeChange,\n  onSubscribed,\n  renderBufferSize = 0,\n  revealSelected,\n  onSelect,\n  selectionModel,\n  suspenseProps,\n}: DataSourceHookProps) => {\n  const [, forceUpdate] = useState<unknown>(null);\n  const dataRows = useRef<DataRow[]>([]);\n  const isMounted = useRef(true);\n  const hasUpdated = useRef(false);\n  const rangeRef = useRef<Range>(dataSource.range);\n  const dataRowRef = useRef<DataRowFunc>(NullDataRow);\n  const setColumnsRef = useRef<undefined | ((columns: string[]) => void)>(\n    undefined,\n  );\n  const totalRowCountRef = useRef(0);\n  const rowAutoSelected = useRef(false);\n\n  const autoSelect =\n    autoSelectRowKey ??\n    (autoSelectFirstRow || selectionModel === \"single-no-deselect\");\n\n  const handleConfigChange = useCallback<DataSourceConfigChangeHandler>(\n    (_config, _range, _confirmed, configChanges) => {\n      if (configChanges?.filterChanged) {\n        rowAutoSelected.current = false;\n      }\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (autoSelect) {\n      dataSource.on(\"config\", handleConfigChange);\n    }\n    return () => {\n      if (autoSelect) {\n        dataSource.removeListener(\"config\", handleConfigChange);\n      }\n    };\n  }, [autoSelect, dataSource, handleConfigChange]);\n\n  const dataRowWindow = useMemo(\n    () => new MovingDataRowWindow(rangeRef.current.withBuffer),\n    [],\n  );\n\n  const handleResume = useCallback(() => {\n    // When we resume a dataSource (after switching tabs etc)\n    // client will receive rows. We may not have received any\n    // setRange calls at this point so dataWindow range will\n    //not yet be set. If the dataWindow range is already set,\n    // this is a no-op.\n    const { range } = dataSource;\n    if (range.to !== 0) {\n      dataRowWindow.setRange(dataSource.range.withBuffer);\n    }\n  }, [dataRowWindow, dataSource]);\n\n  useEffect(() => {\n    return () => {\n      dataSource.removeListener(\"resumed\", handleResume);\n    };\n  }, [dataSource, handleResume]);\n\n  const setData = useCallback(\n    (updates: DataSourceRow[]) => {\n      const { current: DataRow } = dataRowRef;\n      for (const row of updates) {\n        // for now, we create a new DataRow each time\n        dataRowWindow.add(DataRow(row));\n      }\n      dataRows.current = dataRowWindow.data;\n      if (isMounted.current) {\n        // TODO do we ever need to worry about missing updates here ?\n        forceUpdate({});\n      }\n    },\n    [dataRowWindow],\n  );\n\n  const selectRow = useCallback(\n    (dataRow: DataRow) => {\n      const rowKey = dataRow.key;\n      dataSource.select?.({\n        preserveExistingSelection: false,\n        rowKey,\n        type: \"SELECT_ROW\",\n      } as SelectRowRequest);\n      onSelect?.(dataRow);\n    },\n    [dataSource, onSelect],\n  );\n\n  const createDataRow = useCallback(\n    (columns: string[], schemaColumns: readonly SchemaColumn[]) => {\n      const [DataRow, setColumns] = dataRowFactory(columns, schemaColumns);\n      dataRowRef.current = DataRow;\n      setColumnsRef.current = setColumns;\n    },\n    [],\n  );\n\n  const datasourceMessageHandler: DataSourceSubscribeCallback = useCallback(\n    (message) => {\n      if (message.type === \"subscribed\") {\n        createDataRow(message.columns, message.tableSchema.columns);\n        onSubscribed?.(message);\n      } else if (message.type === \"viewport-update\") {\n        if (typeof message.size === \"number\") {\n          onSizeChange?.(message.size);\n          // const size = dataRowWindow.data.length;\n          dataRowWindow.setRowCount(message.size);\n          totalRowCountRef.current = message.size;\n\n          // if (dataRowWindow.data.length < size) {\n          //   if (isMounted.current === false) {\n          //     console.log(\"setting state whilst unmounted\");\n          //   }\n\n          //   forceUpdate({});\n          // }\n        }\n        if (message.rows) {\n          console.log(\n            `#${message.clientViewportId} ${message.rows.length} rows`,\n          );\n          setData(message.rows);\n          if (autoSelect && rowAutoSelected.current === false) {\n            // OR if no selected row in message.rows, e.g after a filter\n            rowAutoSelected.current = true;\n            if (typeof autoSelect === \"string\") {\n              const dataRow = dataRowWindow.getByKey(autoSelect);\n              if (dataRow) {\n                selectRow(dataRow);\n              } else {\n                console.warn(\n                  `[useDataSource] autoSelect row key ${autoSelect} not in viewport`,\n                );\n              }\n            } else if (dataRowWindow.hasData) {\n              selectRow(dataRowWindow.firstRow);\n            }\n          }\n        } else if (message.size === 0) {\n          setData([]);\n        } else if (typeof message.size === \"number\") {\n          dataRows.current = dataRowWindow.data;\n          hasUpdated.current = true;\n        }\n      } else if (message.type === \"viewport-clear\") {\n        onSizeChange?.(0);\n        dataRowWindow.setRowCount(0);\n        setData([]);\n        forceUpdate({});\n      } else {\n        console.log(`useDataSource unexpected message ${message.type}`);\n      }\n    },\n    [\n      autoSelect,\n      createDataRow,\n      dataRowWindow,\n      onSizeChange,\n      onSubscribed,\n      selectRow,\n      setData,\n    ],\n  );\n\n  const getSelectedRows = useCallback(() => {\n    return dataRowWindow.getSelectedRows();\n  }, [dataRowWindow]);\n\n  useEffect(() => {\n    if (dataSource.status === \"disabled\") {\n      dataSource.enable?.(datasourceMessageHandler);\n    }\n  }, [dataSource, datasourceMessageHandler]);\n\n  useMemo(() => {\n    setColumnsRef.current?.(dataSource.columns);\n  }, [dataSource.columns]);\n\n  const setRange = useCallback(\n    (viewportRange: VuuRange) => {\n      if (!rangeRef.current.equals(viewportRange)) {\n        const range = Range(\n          viewportRange.from,\n          viewportRange.to,\n          renderBufferSize,\n        );\n\n        dataRowWindow.setRange(range.withBuffer);\n\n        if (\n          dataSource.status !== \"subscribed\" &&\n          dataSource.status !== \"subscribing\" &&\n          dataSource.status !== \"enabling\"\n        ) {\n          dataSource?.subscribe(\n            {\n              range,\n              revealSelected,\n              selectedKeyValues: autoSelectRowKey\n                ? [autoSelectRowKey]\n                : undefined,\n            },\n            datasourceMessageHandler,\n          );\n        } else {\n          dataSource.range = rangeRef.current = range;\n        }\n      }\n    },\n    [\n      autoSelectRowKey,\n      dataRowWindow,\n      dataSource,\n      datasourceMessageHandler,\n      renderBufferSize,\n      revealSelected,\n    ],\n  );\n\n  useEffect(() => {\n    if (dataSource.status !== \"initialising\") {\n      const { columns, tableSchema } = dataSource;\n      if (tableSchema) {\n        createDataRow(columns, tableSchema.columns);\n      } else {\n        throw Error(\n          `[useDataSource] a resumed dataSource must have a tableSchema`,\n        );\n      }\n      dataSource.resume?.(datasourceMessageHandler);\n\n      if (dataSource.range.from > 0) {\n        // UI does not currently restore scroll position, so always reset to top of dataset\n        const { from, to } = rangeRef.current.reset;\n        setRange({ from, to });\n      }\n    }\n    return () => {\n      dataSource.suspend?.(\n        suspenseProps?.escalateToDisable,\n        suspenseProps?.escalateDelay,\n      );\n    };\n  }, [\n    createDataRow,\n    dataSource,\n    datasourceMessageHandler,\n    setRange,\n    suspenseProps,\n  ]);\n\n  return {\n    dataRows: dataRows.current,\n    dataRowsRef: dataRows,\n    getSelectedRows,\n    range: rangeRef.current,\n    setRange,\n  };\n};\n"],"names":["useState","useRef","useCallback","useEffect","useMemo","MovingDataRowWindow","DataRow","dataRowFactory","Range"],"mappings":"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"}

package/cjs/useCellEditing.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCellEditing.js","sources":["../../../packages/vuu-table/src/useCellEditing.ts"],"sourcesContent":["import {\n  dispatchCustomEvent,\n  isCharacterKey,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent,\n  useCallback,\n} from \"react\";\nimport { cellIsTextInput, getAriaCellPos } from \"./table-dom-utils\";\nimport { FocusCell } from \"./useCellFocus\";\n\nexport interface CellEditingHookProps {\n  focusCell: FocusCell;\n  navigate: () => void;\n}\n\nexport const useCellEditing = ({\n  focusCell,\n  navigate,\n}: CellEditingHookProps) => {\n  const commitHandler = useCallback(() => {\n    navigate();\n  }, [navigate]);\n\n  const editModeHandler = useCallback(\n    (e: Event) => {\n      // console.log(`[useCellEditing]  editModeHandler ${e.type}`);\n      const tableCell = queryClosest<HTMLDivElement>(\n        e.target,\n        \".vuuTableCell\",\n        true,\n      );\n      if (e.type === \"vuu-exit-edit-mode\") {\n        tableCell.classList.remove(\"vuuEditing\");\n        // console.log(\"shift focus back to cell\");\n        const cellPos = getAriaCellPos(tableCell);\n        focusCell(cellPos, true);\n        // console.log({ tableCell });\n      } else {\n        // console.log(\"what do we do in edit mode ?\");\n        tableCell.classList.add(\"vuuEditing\");\n      }\n    },\n    [focusCell],\n  );\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        // need to put the input into edit mode\n        dispatchCustomEvent(input, \"vuu-begin-edit\");\n      }\n    },\n    [],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: ReactKeyboardEvent<HTMLElement>) => {\n      // console.log(`[useCellEditing] handleKeyDown `);\n\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      // console.log(\n      //   `[useCellEditing] handleBlur, unregisters the vuu-commit handler `,\n      // );\n      const el = e.target as HTMLElement;\n      el.removeEventListener(\"vuu-commit\", commitHandler, true);\n      el.removeEventListener(\"vuu-enter-edit-mode\", editModeHandler, true);\n      el.removeEventListener(\"vuu-exit-edit-mode\", editModeHandler, true);\n    },\n    [commitHandler, editModeHandler],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler>(\n    (e) => {\n      // console.log(\n      //   `[useCellEditing] handleFocus, registers the vuu-commit handler `,\n      // );\n      const el = e.target as HTMLElement;\n      el.addEventListener(\"vuu-commit\", commitHandler, true);\n      el.addEventListener(\"vuu-enter-edit-mode\", editModeHandler, true);\n      el.addEventListener(\"vuu-exit-edit-mode\", editModeHandler, true);\n    },\n    [commitHandler, editModeHandler],\n  );\n\n  return {\n    onBlur: handleBlur,\n    onDoubleClick: handleDoubleClick,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":["useCallback","queryClosest","getAriaCellPos","dispatchCustomEvent","cellIsTextInput","isCharacterKey"],"mappings":"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"}
+{"version":3,"file":"useCellEditing.js","sources":["../../../packages/vuu-table/src/useCellEditing.ts"],"sourcesContent":["import {\n  dispatchCustomEvent,\n  isCharacterKey,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent,\n  useCallback,\n} from \"react\";\nimport { cellIsTextInput, getAriaCellPos } from \"./table-dom-utils\";\nimport { FocusCell } from \"./useCellFocus\";\n\nexport interface CellEditingHookProps {\n  focusCell: FocusCell;\n  navigate: () => void;\n}\n\nexport const useCellEditing = ({\n  focusCell,\n  navigate,\n}: CellEditingHookProps) => {\n  const commitHandler = useCallback(() => {\n    navigate();\n  }, [navigate]);\n\n  const editModeHandler = useCallback(\n    (e: Event) => {\n      const tableCell = queryClosest<HTMLDivElement>(\n        e.target,\n        \".vuuTableCell\",\n        true,\n      );\n      if (e.type === \"vuu-exit-edit-mode\") {\n        tableCell.classList.remove(\"vuuEditing\");\n        const cellPos = getAriaCellPos(tableCell);\n        focusCell(cellPos, true);\n      } else {\n        tableCell.classList.add(\"vuuEditing\");\n      }\n    },\n    [focusCell],\n  );\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        // need to put the input into edit mode\n        dispatchCustomEvent(input, \"vuu-begin-edit\");\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      el.removeEventListener(\"vuu-enter-edit-mode\", editModeHandler, true);\n      el.removeEventListener(\"vuu-exit-edit-mode\", editModeHandler, true);\n    },\n    [commitHandler, editModeHandler],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler>(\n    (e) => {\n      const el = e.target as HTMLElement;\n      el.addEventListener(\"vuu-commit\", commitHandler, true);\n      el.addEventListener(\"vuu-enter-edit-mode\", editModeHandler, true);\n      el.addEventListener(\"vuu-exit-edit-mode\", editModeHandler, true);\n    },\n    [commitHandler, editModeHandler],\n  );\n\n  return {\n    onBlur: handleBlur,\n    onDoubleClick: handleDoubleClick,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":["useCallback","queryClosest","getAriaCellPos","dispatchCustomEvent","cellIsTextInput","isCharacterKey"],"mappings":"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"}

package/cjs/useMeasuredHeight.js

@@ -22,7 +22,6 @@ const useMeasuredHeight = ({
         if (lastMeasuredHeight.current !== newHeight) {
           if (vuuUtils.isValidNumber(newHeight)) {
             lastMeasuredHeight.current = newHeight;
-            console.log(`[useMeasuredHeight] resizeObserver  ${newHeight}`);
             setMeasuredHeight(newHeight);
             onHeightMeasured?.(newHeight);
           }
@@ -35,7 +34,6 @@ const useMeasuredHeight = ({
       if (el) {
         if (heightProp === 0) {
           const { height } = el.getBoundingClientRect();
-          console.log(`[useMeasuredHeight] initial height = ${height}`);
           resizeObserver.observe(el);
           const measuredHeight2 = Math.round(height);
           setMeasuredHeight(measuredHeight2);

package/cjs/useMeasuredHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMeasuredHeight.js","sources":["../../../packages/vuu-table/src/useMeasuredHeight.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useMemo, useRef, 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 [measuredHeight, setMeasuredHeight] = useState(heightProp);\n  const lastMeasuredHeight = useRef(-1);\n\n  useMemo(() => {\n    if (heightProp !== 0) {\n      setMeasuredHeight(heightProp);\n    }\n  }, [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 (lastMeasuredHeight.current !== newHeight) {\n          if (isValidNumber(newHeight)) {\n            lastMeasuredHeight.current = newHeight;\n            console.log(`[useMeasuredHeight] resizeObserver  ${newHeight}`);\n            setMeasuredHeight(newHeight);\n            onHeightMeasured?.(newHeight);\n          }\n        }\n      }\n    });\n  }, [onHeightMeasured]);\n\n  const measuredRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        if (heightProp === 0) {\n          const { height } = el.getBoundingClientRect();\n          console.log(`[useMeasuredHeight] initial height = ${height}`);\n          resizeObserver.observe(el);\n          // avoids tiny sub-pixel discrepancies\n          const measuredHeight = Math.round(height);\n          setMeasuredHeight(measuredHeight);\n        }\n      } else {\n        resizeObserver.disconnect();\n      }\n    },\n    [resizeObserver, heightProp],\n  );\n  return { measuredHeight, measuredRef };\n};\n"],"names":["useState","useRef","useMemo","isValidNumber","useCallback","measuredHeight"],"mappings":";;;;;AAQO,MAAM,oBAAoB,CAAC;AAAA,EAChC,gBAAA;AAAA,EACA,QAAQ,UAAa,GAAA;AACvB,CAA+B,KAAA;AAC7B,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,eAAS,UAAU,CAAA;AAC/D,EAAM,MAAA,kBAAA,GAAqBC,aAAO,CAAE,CAAA,CAAA;AAEpC,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,eAAe,CAAG,EAAA;AACpB,MAAA,iBAAA,CAAkB,UAAU,CAAA;AAAA;AAC9B,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,cAAA,GAAiBA,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;AAC5C,QAAM,MAAA,SAAA,GAAY,IAAK,CAAA,KAAA,CAAM,YAAY,CAAA;AACzC,QAAI,IAAA,kBAAA,CAAmB,YAAY,SAAW,EAAA;AAC5C,UAAI,IAAAC,sBAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,YAAA,kBAAA,CAAmB,OAAU,GAAA,SAAA;AAC7B,YAAQ,OAAA,CAAA,GAAA,CAAI,CAAuC,oCAAA,EAAA,SAAS,CAAE,CAAA,CAAA;AAC9D,YAAA,iBAAA,CAAkB,SAAS,CAAA;AAC3B,YAAA,gBAAA,GAAmB,SAAS,CAAA;AAAA;AAC9B;AACF;AACF,KACD,CAAA;AAAA,GACH,EAAG,CAAC,gBAAgB,CAAC,CAAA;AAErB,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,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;AAC5C,UAAQ,OAAA,CAAA,GAAA,CAAI,CAAwC,qCAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AAC5D,UAAA,cAAA,CAAe,QAAQ,EAAE,CAAA;AAEzB,UAAMC,MAAAA,eAAAA,GAAiB,IAAK,CAAA,KAAA,CAAM,MAAM,CAAA;AACxC,UAAA,iBAAA,CAAkBA,eAAc,CAAA;AAAA;AAClC,OACK,MAAA;AACL,QAAA,cAAA,CAAe,UAAW,EAAA;AAAA;AAC5B,KACF;AAAA,IACA,CAAC,gBAAgB,UAAU;AAAA,GAC7B;AACA,EAAO,OAAA,EAAE,gBAAgB,WAAY,EAAA;AACvC;;;;"}
+{"version":3,"file":"useMeasuredHeight.js","sources":["../../../packages/vuu-table/src/useMeasuredHeight.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useMemo, useRef, 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 [measuredHeight, setMeasuredHeight] = useState(heightProp);\n  const lastMeasuredHeight = useRef(-1);\n\n  useMemo(() => {\n    if (heightProp !== 0) {\n      setMeasuredHeight(heightProp);\n    }\n  }, [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 (lastMeasuredHeight.current !== newHeight) {\n          if (isValidNumber(newHeight)) {\n            lastMeasuredHeight.current = newHeight;\n            setMeasuredHeight(newHeight);\n            onHeightMeasured?.(newHeight);\n          }\n        }\n      }\n    });\n  }, [onHeightMeasured]);\n\n  const measuredRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        if (heightProp === 0) {\n          const { height } = el.getBoundingClientRect();\n          resizeObserver.observe(el);\n          // avoids tiny sub-pixel discrepancies\n          const measuredHeight = Math.round(height);\n          setMeasuredHeight(measuredHeight);\n        }\n      } else {\n        resizeObserver.disconnect();\n      }\n    },\n    [resizeObserver, heightProp],\n  );\n  return { measuredHeight, measuredRef };\n};\n"],"names":["useState","useRef","useMemo","isValidNumber","useCallback","measuredHeight"],"mappings":";;;;;AAQO,MAAM,oBAAoB,CAAC;AAAA,EAChC,gBAAA;AAAA,EACA,QAAQ,UAAa,GAAA;AACvB,CAA+B,KAAA;AAC7B,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,eAAS,UAAU,CAAA;AAC/D,EAAM,MAAA,kBAAA,GAAqBC,aAAO,CAAE,CAAA,CAAA;AAEpC,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,eAAe,CAAG,EAAA;AACpB,MAAA,iBAAA,CAAkB,UAAU,CAAA;AAAA;AAC9B,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,cAAA,GAAiBA,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;AAC5C,QAAM,MAAA,SAAA,GAAY,IAAK,CAAA,KAAA,CAAM,YAAY,CAAA;AACzC,QAAI,IAAA,kBAAA,CAAmB,YAAY,SAAW,EAAA;AAC5C,UAAI,IAAAC,sBAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,YAAA,kBAAA,CAAmB,OAAU,GAAA,SAAA;AAC7B,YAAA,iBAAA,CAAkB,SAAS,CAAA;AAC3B,YAAA,gBAAA,GAAmB,SAAS,CAAA;AAAA;AAC9B;AACF;AACF,KACD,CAAA;AAAA,GACH,EAAG,CAAC,gBAAgB,CAAC,CAAA;AAErB,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,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;AAC5C,UAAA,cAAA,CAAe,QAAQ,EAAE,CAAA;AAEzB,UAAMC,MAAAA,eAAAA,GAAiB,IAAK,CAAA,KAAA,CAAM,MAAM,CAAA;AACxC,UAAA,iBAAA,CAAkBA,eAAc,CAAA;AAAA;AAClC,OACK,MAAA;AACL,QAAA,cAAA,CAAe,UAAW,EAAA;AAAA;AAC5B,KACF;AAAA,IACA,CAAC,gBAAgB,UAAU;AAAA,GAC7B;AACA,EAAO,OAAA,EAAE,gBAAgB,WAAY,EAAA;AACvC;;;;"}

package/esm/Table.js

@@ -328,9 +328,6 @@ const Table = forwardRef(function Table2({
   const { measuredHeight: rowHeight, measuredRef: rowRef } = useMeasuredHeight({
     height: rowHeightProp
   });
-  console.log(
-    `[Table] measured row height ${rowHeight}, rowHeightProp ${rowHeightProp}`
-  );
   const { measuredHeight: footerHeight, measuredRef: footerRef } = useMeasuredHeight({});
   const rowLimit = maxViewportRowLimit ?? viewportRowLimit;
   if (config === void 0) {

package/esm/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../packages/vuu-table/src/Table.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { DataSource, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport { TableProvider } from \"@vuu-ui/vuu-table-extras\";\nimport {\n  CustomHeader,\n  DataCellEditNotification,\n  GroupToggleTarget,\n  HeaderCellProps,\n  RowActionHandler,\n  RowProps,\n  SelectionChangeHandler,\n  ShowColumnHeaderMenus,\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 { lowerCase, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  ComponentType,\n  FC,\n  ForwardedRef,\n  RefObject,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Row as DefaultRow } from \"./Row\";\nimport { TableCellBlock } from \"./cell-block/cellblock-utils\";\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\";\n\nconst classBase = \"vuuTable\";\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\" | \"tree\";\n\n// A dummy Table Row rendered once and not visible. We measure this to\n// determine height of Row(s) and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nconst RowProxy = forwardRef<\n  HTMLDivElement,\n  { className?: string; height?: number }\n>(function RowProxy({ className = \"vuuTableRow\", height }, forwardedRef) {\n  return (\n    <div\n      aria-hidden\n      className={cx(className, `vuuRowProxy`)}\n      ref={forwardedRef}\n      style={{ height }}\n    />\n  );\n});\n\nexport interface TableProps\n  extends Omit<\n    MeasuredContainerProps,\n    \"onDragStart\" | \"onDrop\" | \"onSelect\" | \"searchPattern\"\n  > {\n  /**\n   * A react function component that will be rendered if there are no rows to display\n   */\n  EmptyDisplay?: ComponentType;\n  /**\n   * A custom implementation of HeaderCell which will be rendered in place of the\n   * default HeaderCell. If provided, custom implementation is responsible for all\n   * header behaviour (if required) - sorting, resizing etc.\n   */\n  HeaderCell?: FC<HeaderCellProps>;\n  /**\n   * A custom Row implementation that will be rendered in place of the default\n   * Row.\n   */\n  Row?: FC<RowProps>;\n  /**\n   * Allow a block of cells to be selected. Typically to be copied.\n   */\n  allowCellBlockSelection?: 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   * Allow all rows be selected, use with checkbox coliumn.\n   */\n  allowSelectAll?: boolean;\n\n  /**\n   * If checkbox selection is in effect, can user select row by clicking row. If\n   * false, checkbox must be clicked explicitly.\n   */\n  allowSelectCheckboxRow?: boolean;\n  /**\n   * if provided, first row of table will be selected on initial render.\n   */\n  autoSelectFirstRow?: true;\n  /**\n   * if provided, row with matching key will be selected. If not present, will silently fail.\n   */\n  autoSelectRowKey?: string;\n\n  /**\n   * Pixel height of header cells. If specified here, this will take precedence over CSS\n   * values and Table will not respond to density changes.\n   */\n  colHeaderRowHeight?: number;\n\n  /**\n   * Provide configuration settings for Table. At minimun, column\n   * descriptors must be provided.\n   */\n  config: TableConfig;\n  dataSource: DataSource;\n\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   * When rows are grouped, user can click group row(s) to expand/collapse display of child rows.\n   * This allows precise configuration of where user may click to trigger toggle/collapse. When\n   * row selection is also supported, clicking outside the region specified here will select or\n   * deselect the row.\n   * - toggle-icon - the small toggle icon must be clicked directly\n   * - group-column (default) - user can click anywhere within the group column, i.e on the icon or the column text\n   */\n  groupToggleTarget?: GroupToggleTarget;\n\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   * `tree` is a specialised navigation behaviour only useful where table is being\n   * used to present purely grouped data (see TreeTable)\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\n  /**\n   * In a Table with editable cells, this callback will be invoked every time\n   * a user performs any edit operation on an editable field.\n   */\n  // TODO can we scrap this and leavr it to the editTracker ?\n  onDataEdited?: DataCellEditNotification;\n\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  /**\n   * Provide functionality for custom row actions. e.g. buttons embedded within row cells.\n   * These will be available to any custom renderers via TableContext. e.g. a Row may\n   * provide a 'Delete' or 'Cancel' button. Implement this functionality in a rowActionHandler.\n   */\n  rowActionHandlers?: Record<string, RowActionHandler>;\n\n  /**\n   * Allows opt-in to a predefined style pattern that renders a border around a row selection block.\n   */\n  rowSelectionBorder?: boolean;\n\n  /**\n   * Only applicable to grouped data. If there are selected rows which are not top-level\n   * items and group items above are not already expanded, expand all group items in\n   * the hierarchy above selected item. Selected items will thus always be visible, initially.\n   * This affects items set at load time via autoSelectRowKey as well as items\n   * selected programatically (ie not directly by user).\n   * Nodes can of course be collapsed by user at runtime which may hide selected rows.\n   * Note: this is not supported by all DataSource implementations\n   */\n  revealSelected?: boolean;\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   * If a search has been applied against data, this is the search text used.\n   * Will be used to highlight matching text.\n   */\n  searchPattern?: string;\n  /**\n   * Selection behaviour for Table:\n   * `none` selection disabled\n   * `single` no more than one row may be selected\n   * `single-no-deselect` no more than one row may be selected, one row is always selected, defaults to first visible\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. If true, all available Column Menu\n   * actions will be available via the menu. Alternatively, a map of specific column menu\n   * permissions can be provided to allow control over which menu items are presented.\n   */\n  showColumnHeaderMenus?: ShowColumnHeaderMenus;\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  EmptyDisplay,\n  HeaderCell,\n  Row = DefaultRow,\n  allowCellBlockSelection,\n  allowDragColumnHeader = true,\n  allowDragDrop,\n  allowSelectAll,\n  allowSelectCheckboxRow,\n  autoSelectFirstRow,\n  autoSelectRowKey,\n  // colHeaderRowHeight,\n  config,\n  containerRef,\n  customHeader,\n  dataSource,\n  disableFocus = false,\n  groupToggleTarget,\n  highlightedIndex: highlightedIndexProp,\n  id: idProp,\n  lowerCaseSearchPattern,\n  navigationStyle = \"cell\",\n  // onAvailableColumnsChange,\n  onConfigChange,\n  onDataEdited: onDataEditedProp,\n  onDragStart,\n  onDrop,\n  onHighlight,\n  onRowClick: onRowClickProp,\n  onSelect,\n  onSelectCellBlock,\n  onSelectionChange,\n  renderBufferSize = 0,\n  revealSelected,\n  rowActionHandlers,\n  rowHeight,\n  scrollingApiRef,\n  selectionModel = \"extended\",\n  showColumnHeaders = true,\n  showColumnHeaderMenus = true,\n  showPaginationControls,\n  size,\n}: Omit<\n  TableProps,\n  | \"colHeaderRowHeight\"\n  | \"maxViewportRowLimit\"\n  | \"resizeStrategy\"\n  | \"rowHeight\"\n  | \"rowSelectionStyle\"\n  | \"searchPattern\"\n  | \"viewportRowLimit\"\n> & {\n  containerRef: RefObject<HTMLDivElement | null>;\n  /**\n   * We lowercase this once, on entry, which is the format in which it will be used.\n   */\n  lowerCaseSearchPattern: Lowercase<string>;\n  rowHeight: number;\n  size: MeasuredSize;\n}) => {\n  const id = useId(idProp);\n  const {\n    allRowsSelected,\n    cellBlock,\n    columns,\n    dataRows,\n    draggableRow,\n    focusCellPlaceholderKeyDown,\n    focusCellPlaceholderRef,\n    getRowOffset,\n    handleColumnAction,\n    headerState: { height: headerHeight, count: headerCount },\n    headings,\n    highlightedIndex,\n    onCheckBoxColumnHeaderClick,\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    allowSelectCheckboxRow,\n    autoSelectFirstRow,\n    autoSelectRowKey,\n    config,\n    containerRef,\n    dataSource,\n    disableFocus,\n    highlightedIndex: highlightedIndexProp,\n    id,\n    navigationStyle,\n    onConfigChange,\n    onDataEdited: onDataEditedProp,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick: onRowClickProp,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    revealSelected,\n    rowHeight,\n    scrollingApiRef,\n    selectionModel,\n    showColumnHeaders,\n    showPaginationControls,\n    size,\n  });\n\n  const { selectionBookendWidth = 4 } = config;\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    \"--table-selection-bookend-width\": `${selectionBookendWidth}px`,\n  } as CSSProperties;\n\n  const headersReady = showColumnHeaders === false || headerHeight > 0;\n  const readyToRenderTableBody = headersReady && dataRows.length > 0;\n\n  return (\n    <TableProvider\n      dataSource={dataSource}\n      menuActionHandler={handleColumnAction}\n      rowActionHandlers={rowActionHandlers}\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\n      {dataSource.size === 0 && EmptyDisplay ? (\n        <div className={`${classBase}-emptyDisplay`}>\n          <EmptyDisplay />{\" \"}\n        </div>\n      ) : null}\n\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              HeaderCell={HeaderCell}\n              allowDragColumnHeader={allowDragColumnHeader}\n              allowSelectAll={allowSelectAll}\n              allRowsSelected={allRowsSelected}\n              // columns={scrollProps.columnsWithinViewport}\n              columns={columns}\n              customHeader={customHeader}\n              headings={headings}\n              onCheckBoxColumnHeaderClick={onCheckBoxColumnHeaderClick}\n              onHeightMeasured={onHeaderHeightMeasured}\n              onMoveColumn={onMoveColumn}\n              onMoveGroupColumn={onMoveGroupColumn}\n              onRemoveGroupColumn={onRemoveGroupColumn}\n              onResizeColumn={onResizeColumn}\n              onSortColumn={onSortColumn}\n              showBookends={selectionBookendWidth > 0}\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              {dataRows.map((dataRow) => {\n                const ariaRowIndex = dataRow.index + headerCount + 1;\n                return (\n                  <Row\n                    aria-rowindex={ariaRowIndex}\n                    classNameGenerator={rowClassNameGenerator}\n                    columns={scrollProps.columnsWithinViewport}\n                    // This is used for styling selection only.\n                    data-first-row={dataRow.index === 0 ? \"true\" : undefined}\n                    dataRow={dataRow}\n                    groupToggleTarget={groupToggleTarget}\n                    highlighted={highlightedIndex === ariaRowIndex}\n                    key={dataRow.renderIndex}\n                    onClick={onRowClick}\n                    onDataEdited={onDataEdited}\n                    offset={showPaginationControls ? 0 : getRowOffset(dataRow)}\n                    onToggleGroup={onToggleGroup}\n                    showBookends={selectionBookendWidth > 0}\n                    searchPattern={lowerCaseSearchPattern}\n                    virtualColSpan={scrollProps.virtualColSpan}\n                    zebraStripes={tableAttributes.zebraStripes}\n                  />\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                aria-hidden={true}\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    </TableProvider>\n  );\n};\n\nexport const Table = forwardRef(function Table(\n  {\n    EmptyDisplay,\n    HeaderCell,\n    Row,\n    allowCellBlockSelection,\n    allowDragColumnHeader,\n    allowDragDrop,\n    allowSelectAll,\n    allowSelectCheckboxRow,\n    autoSelectFirstRow,\n    autoSelectRowKey,\n    className: classNameProp,\n    config,\n    customHeader,\n    dataSource,\n    disableFocus,\n    groupToggleTarget,\n    colHeaderRowHeight: colHeaderRowHeightProp,\n    height,\n    highlightedIndex,\n    id,\n    maxViewportRowLimit,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDataEdited,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    revealSelected,\n    resizeStrategy,\n    rowActionHandlers,\n    rowHeight: rowHeightProp,\n    rowSelectionBorder,\n    scrollingApiRef,\n    searchPattern = \"\",\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\n  const { measuredHeight: rowHeight, measuredRef: rowRef } = useMeasuredHeight({\n    height: rowHeightProp,\n  });\n\n  console.log(\n    `[Table] measured row height ${rowHeight}, rowHeightProp ${rowHeightProp}`,\n  );\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>(undefined);\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}-rowSelection-bordered`]: rowSelectionBorder,\n        [`${classBase}-maxViewportRowLimit`]: maxViewportRowLimit,\n        [`${classBase}-viewportRowLimit`]: viewportRowLimit,\n      })}\n      height={height}\n      id={id}\n      onResize={setSize}\n      ref={useForkRef(containerRef, forwardedRef)}\n      resizeStrategy={resizeStrategy}\n      style={\n        {\n          ...styleProp,\n          \"--col-header-row-height-prop\":\n            typeof colHeaderRowHeightProp === \"number\"\n              ? `${colHeaderRowHeightProp}px`\n              : undefined,\n          \"--row-height-prop\":\n            typeof rowHeightProp === \"number\"\n              ? `${rowHeightProp}px`\n              : 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          EmptyDisplay={EmptyDisplay}\n          HeaderCell={HeaderCell}\n          Row={Row}\n          allowCellBlockSelection={allowCellBlockSelection}\n          allowDragColumnHeader={allowDragColumnHeader}\n          allowDragDrop={allowDragDrop}\n          allowSelectAll={allowSelectAll}\n          allowSelectCheckboxRow={allowSelectCheckboxRow}\n          autoSelectFirstRow={autoSelectFirstRow}\n          autoSelectRowKey={autoSelectRowKey}\n          config={config}\n          containerRef={containerRef}\n          customHeader={customHeader}\n          dataSource={dataSource}\n          disableFocus={disableFocus}\n          groupToggleTarget={groupToggleTarget}\n          highlightedIndex={highlightedIndex}\n          id={id}\n          navigationStyle={navigationStyle}\n          onAvailableColumnsChange={onAvailableColumnsChange}\n          onConfigChange={onConfigChange}\n          onDataEdited={onDataEdited}\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          revealSelected={revealSelected}\n          rowActionHandlers={rowActionHandlers}\n          rowHeight={rowHeight}\n          scrollingApiRef={scrollingApiRef}\n          lowerCaseSearchPattern={lowerCase(searchPattern)}\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":["RowProxy","Row","DefaultRow","Table","size"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../packages/vuu-table/src/Table.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { DataSource, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport { TableProvider } from \"@vuu-ui/vuu-table-extras\";\nimport {\n  CustomHeader,\n  DataCellEditNotification,\n  GroupToggleTarget,\n  HeaderCellProps,\n  RowActionHandler,\n  RowProps,\n  SelectionChangeHandler,\n  ShowColumnHeaderMenus,\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 { lowerCase, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  ComponentType,\n  FC,\n  ForwardedRef,\n  RefObject,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Row as DefaultRow } from \"./Row\";\nimport { TableCellBlock } from \"./cell-block/cellblock-utils\";\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\";\n\nconst classBase = \"vuuTable\";\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\" | \"tree\";\n\n// A dummy Table Row rendered once and not visible. We measure this to\n// determine height of Row(s) and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nconst RowProxy = forwardRef<\n  HTMLDivElement,\n  { className?: string; height?: number }\n>(function RowProxy({ className = \"vuuTableRow\", height }, forwardedRef) {\n  return (\n    <div\n      aria-hidden\n      className={cx(className, `vuuRowProxy`)}\n      ref={forwardedRef}\n      style={{ height }}\n    />\n  );\n});\n\nexport interface TableProps\n  extends Omit<\n    MeasuredContainerProps,\n    \"onDragStart\" | \"onDrop\" | \"onSelect\" | \"searchPattern\"\n  > {\n  /**\n   * A react function component that will be rendered if there are no rows to display\n   */\n  EmptyDisplay?: ComponentType;\n  /**\n   * A custom implementation of HeaderCell which will be rendered in place of the\n   * default HeaderCell. If provided, custom implementation is responsible for all\n   * header behaviour (if required) - sorting, resizing etc.\n   */\n  HeaderCell?: FC<HeaderCellProps>;\n  /**\n   * A custom Row implementation that will be rendered in place of the default\n   * Row.\n   */\n  Row?: FC<RowProps>;\n  /**\n   * Allow a block of cells to be selected. Typically to be copied.\n   */\n  allowCellBlockSelection?: 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   * Allow all rows be selected, use with checkbox coliumn.\n   */\n  allowSelectAll?: boolean;\n\n  /**\n   * If checkbox selection is in effect, can user select row by clicking row. If\n   * false, checkbox must be clicked explicitly.\n   */\n  allowSelectCheckboxRow?: boolean;\n  /**\n   * if provided, first row of table will be selected on initial render.\n   */\n  autoSelectFirstRow?: true;\n  /**\n   * if provided, row with matching key will be selected. If not present, will silently fail.\n   */\n  autoSelectRowKey?: string;\n\n  /**\n   * Pixel height of header cells. If specified here, this will take precedence over CSS\n   * values and Table will not respond to density changes.\n   */\n  colHeaderRowHeight?: number;\n\n  /**\n   * Provide configuration settings for Table. At minimun, column\n   * descriptors must be provided.\n   */\n  config: TableConfig;\n  dataSource: DataSource;\n\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   * When rows are grouped, user can click group row(s) to expand/collapse display of child rows.\n   * This allows precise configuration of where user may click to trigger toggle/collapse. When\n   * row selection is also supported, clicking outside the region specified here will select or\n   * deselect the row.\n   * - toggle-icon - the small toggle icon must be clicked directly\n   * - group-column (default) - user can click anywhere within the group column, i.e on the icon or the column text\n   */\n  groupToggleTarget?: GroupToggleTarget;\n\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   * `tree` is a specialised navigation behaviour only useful where table is being\n   * used to present purely grouped data (see TreeTable)\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\n  /**\n   * In a Table with editable cells, this callback will be invoked every time\n   * a user performs any edit operation on an editable field.\n   */\n  // TODO can we scrap this and leavr it to the editTracker ?\n  onDataEdited?: DataCellEditNotification;\n\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  /**\n   * Provide functionality for custom row actions. e.g. buttons embedded within row cells.\n   * These will be available to any custom renderers via TableContext. e.g. a Row may\n   * provide a 'Delete' or 'Cancel' button. Implement this functionality in a rowActionHandler.\n   */\n  rowActionHandlers?: Record<string, RowActionHandler>;\n\n  /**\n   * Allows opt-in to a predefined style pattern that renders a border around a row selection block.\n   */\n  rowSelectionBorder?: boolean;\n\n  /**\n   * Only applicable to grouped data. If there are selected rows which are not top-level\n   * items and group items above are not already expanded, expand all group items in\n   * the hierarchy above selected item. Selected items will thus always be visible, initially.\n   * This affects items set at load time via autoSelectRowKey as well as items\n   * selected programatically (ie not directly by user).\n   * Nodes can of course be collapsed by user at runtime which may hide selected rows.\n   * Note: this is not supported by all DataSource implementations\n   */\n  revealSelected?: boolean;\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   * If a search has been applied against data, this is the search text used.\n   * Will be used to highlight matching text.\n   */\n  searchPattern?: string;\n  /**\n   * Selection behaviour for Table:\n   * `none` selection disabled\n   * `single` no more than one row may be selected\n   * `single-no-deselect` no more than one row may be selected, one row is always selected, defaults to first visible\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. If true, all available Column Menu\n   * actions will be available via the menu. Alternatively, a map of specific column menu\n   * permissions can be provided to allow control over which menu items are presented.\n   */\n  showColumnHeaderMenus?: ShowColumnHeaderMenus;\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  EmptyDisplay,\n  HeaderCell,\n  Row = DefaultRow,\n  allowCellBlockSelection,\n  allowDragColumnHeader = true,\n  allowDragDrop,\n  allowSelectAll,\n  allowSelectCheckboxRow,\n  autoSelectFirstRow,\n  autoSelectRowKey,\n  // colHeaderRowHeight,\n  config,\n  containerRef,\n  customHeader,\n  dataSource,\n  disableFocus = false,\n  groupToggleTarget,\n  highlightedIndex: highlightedIndexProp,\n  id: idProp,\n  lowerCaseSearchPattern,\n  navigationStyle = \"cell\",\n  // onAvailableColumnsChange,\n  onConfigChange,\n  onDataEdited: onDataEditedProp,\n  onDragStart,\n  onDrop,\n  onHighlight,\n  onRowClick: onRowClickProp,\n  onSelect,\n  onSelectCellBlock,\n  onSelectionChange,\n  renderBufferSize = 0,\n  revealSelected,\n  rowActionHandlers,\n  rowHeight,\n  scrollingApiRef,\n  selectionModel = \"extended\",\n  showColumnHeaders = true,\n  showColumnHeaderMenus = true,\n  showPaginationControls,\n  size,\n}: Omit<\n  TableProps,\n  | \"colHeaderRowHeight\"\n  | \"maxViewportRowLimit\"\n  | \"resizeStrategy\"\n  | \"rowHeight\"\n  | \"rowSelectionStyle\"\n  | \"searchPattern\"\n  | \"viewportRowLimit\"\n> & {\n  containerRef: RefObject<HTMLDivElement | null>;\n  /**\n   * We lowercase this once, on entry, which is the format in which it will be used.\n   */\n  lowerCaseSearchPattern: Lowercase<string>;\n  rowHeight: number;\n  size: MeasuredSize;\n}) => {\n  const id = useId(idProp);\n  const {\n    allRowsSelected,\n    cellBlock,\n    columns,\n    dataRows,\n    draggableRow,\n    focusCellPlaceholderKeyDown,\n    focusCellPlaceholderRef,\n    getRowOffset,\n    handleColumnAction,\n    headerState: { height: headerHeight, count: headerCount },\n    headings,\n    highlightedIndex,\n    onCheckBoxColumnHeaderClick,\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    allowSelectCheckboxRow,\n    autoSelectFirstRow,\n    autoSelectRowKey,\n    config,\n    containerRef,\n    dataSource,\n    disableFocus,\n    highlightedIndex: highlightedIndexProp,\n    id,\n    navigationStyle,\n    onConfigChange,\n    onDataEdited: onDataEditedProp,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick: onRowClickProp,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    revealSelected,\n    rowHeight,\n    scrollingApiRef,\n    selectionModel,\n    showColumnHeaders,\n    showPaginationControls,\n    size,\n  });\n\n  const { selectionBookendWidth = 4 } = config;\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    \"--table-selection-bookend-width\": `${selectionBookendWidth}px`,\n  } as CSSProperties;\n\n  const headersReady = showColumnHeaders === false || headerHeight > 0;\n  const readyToRenderTableBody = headersReady && dataRows.length > 0;\n\n  return (\n    <TableProvider\n      dataSource={dataSource}\n      menuActionHandler={handleColumnAction}\n      rowActionHandlers={rowActionHandlers}\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\n      {dataSource.size === 0 && EmptyDisplay ? (\n        <div className={`${classBase}-emptyDisplay`}>\n          <EmptyDisplay />{\" \"}\n        </div>\n      ) : null}\n\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              HeaderCell={HeaderCell}\n              allowDragColumnHeader={allowDragColumnHeader}\n              allowSelectAll={allowSelectAll}\n              allRowsSelected={allRowsSelected}\n              // columns={scrollProps.columnsWithinViewport}\n              columns={columns}\n              customHeader={customHeader}\n              headings={headings}\n              onCheckBoxColumnHeaderClick={onCheckBoxColumnHeaderClick}\n              onHeightMeasured={onHeaderHeightMeasured}\n              onMoveColumn={onMoveColumn}\n              onMoveGroupColumn={onMoveGroupColumn}\n              onRemoveGroupColumn={onRemoveGroupColumn}\n              onResizeColumn={onResizeColumn}\n              onSortColumn={onSortColumn}\n              showBookends={selectionBookendWidth > 0}\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              {dataRows.map((dataRow) => {\n                const ariaRowIndex = dataRow.index + headerCount + 1;\n                return (\n                  <Row\n                    aria-rowindex={ariaRowIndex}\n                    classNameGenerator={rowClassNameGenerator}\n                    columns={scrollProps.columnsWithinViewport}\n                    // This is used for styling selection only.\n                    data-first-row={dataRow.index === 0 ? \"true\" : undefined}\n                    dataRow={dataRow}\n                    groupToggleTarget={groupToggleTarget}\n                    highlighted={highlightedIndex === ariaRowIndex}\n                    key={dataRow.renderIndex}\n                    onClick={onRowClick}\n                    onDataEdited={onDataEdited}\n                    offset={showPaginationControls ? 0 : getRowOffset(dataRow)}\n                    onToggleGroup={onToggleGroup}\n                    showBookends={selectionBookendWidth > 0}\n                    searchPattern={lowerCaseSearchPattern}\n                    virtualColSpan={scrollProps.virtualColSpan}\n                    zebraStripes={tableAttributes.zebraStripes}\n                  />\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                aria-hidden={true}\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    </TableProvider>\n  );\n};\n\nexport const Table = forwardRef(function Table(\n  {\n    EmptyDisplay,\n    HeaderCell,\n    Row,\n    allowCellBlockSelection,\n    allowDragColumnHeader,\n    allowDragDrop,\n    allowSelectAll,\n    allowSelectCheckboxRow,\n    autoSelectFirstRow,\n    autoSelectRowKey,\n    className: classNameProp,\n    config,\n    customHeader,\n    dataSource,\n    disableFocus,\n    groupToggleTarget,\n    colHeaderRowHeight: colHeaderRowHeightProp,\n    height,\n    highlightedIndex,\n    id,\n    maxViewportRowLimit,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDataEdited,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    revealSelected,\n    resizeStrategy,\n    rowActionHandlers,\n    rowHeight: rowHeightProp,\n    rowSelectionBorder,\n    scrollingApiRef,\n    searchPattern = \"\",\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\n  const { measuredHeight: rowHeight, measuredRef: rowRef } = useMeasuredHeight({\n    height: rowHeightProp,\n  });\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>(undefined);\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}-rowSelection-bordered`]: rowSelectionBorder,\n        [`${classBase}-maxViewportRowLimit`]: maxViewportRowLimit,\n        [`${classBase}-viewportRowLimit`]: viewportRowLimit,\n      })}\n      height={height}\n      id={id}\n      onResize={setSize}\n      ref={useForkRef(containerRef, forwardedRef)}\n      resizeStrategy={resizeStrategy}\n      style={\n        {\n          ...styleProp,\n          \"--col-header-row-height-prop\":\n            typeof colHeaderRowHeightProp === \"number\"\n              ? `${colHeaderRowHeightProp}px`\n              : undefined,\n          \"--row-height-prop\":\n            typeof rowHeightProp === \"number\"\n              ? `${rowHeightProp}px`\n              : 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          EmptyDisplay={EmptyDisplay}\n          HeaderCell={HeaderCell}\n          Row={Row}\n          allowCellBlockSelection={allowCellBlockSelection}\n          allowDragColumnHeader={allowDragColumnHeader}\n          allowDragDrop={allowDragDrop}\n          allowSelectAll={allowSelectAll}\n          allowSelectCheckboxRow={allowSelectCheckboxRow}\n          autoSelectFirstRow={autoSelectFirstRow}\n          autoSelectRowKey={autoSelectRowKey}\n          config={config}\n          containerRef={containerRef}\n          customHeader={customHeader}\n          dataSource={dataSource}\n          disableFocus={disableFocus}\n          groupToggleTarget={groupToggleTarget}\n          highlightedIndex={highlightedIndex}\n          id={id}\n          navigationStyle={navigationStyle}\n          onAvailableColumnsChange={onAvailableColumnsChange}\n          onConfigChange={onConfigChange}\n          onDataEdited={onDataEdited}\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          revealSelected={revealSelected}\n          rowActionHandlers={rowActionHandlers}\n          rowHeight={rowHeight}\n          scrollingApiRef={scrollingApiRef}\n          lowerCaseSearchPattern={lowerCase(searchPattern)}\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":["RowProxy","Row","DefaultRow","Table","size"],"mappings":";;;;;;;;;;;;;;;;;AAqDA,MAAM,SAAY,GAAA,UAAA;AAQlB,MAAM,QAAA,GAAW,WAGf,SAASA,SAAAA,CAAS,EAAE,SAAY,GAAA,aAAA,EAAe,MAAO,EAAA,EAAG,YAAc,EAAA;AACvE,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAW,EAAA,IAAA;AAAA,MACX,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,CAAa,WAAA,CAAA,CAAA;AAAA,MACtC,GAAK,EAAA,YAAA;AAAA,MACL,KAAA,EAAO,EAAE,MAAO;AAAA;AAAA,GAClB;AAEJ,CAAC,CAAA;AAgOD,MAAM,YAAY,CAAC;AAAA,EACjB,YAAA;AAAA,EACA,UAAA;AAAA,OACAC,KAAM,GAAAC,GAAA;AAAA,EACN,uBAAA;AAAA,EACA,qBAAwB,GAAA,IAAA;AAAA,EACxB,aAAA;AAAA,EACA,cAAA;AAAA,EACA,sBAAA;AAAA,EACA,kBAAA;AAAA,EACA,gBAAA;AAAA;AAAA,EAEA,MAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAe,GAAA,KAAA;AAAA,EACf,iBAAA;AAAA,EACA,gBAAkB,EAAA,oBAAA;AAAA,EAClB,EAAI,EAAA,MAAA;AAAA,EACJ,sBAAA;AAAA,EACA,eAAkB,GAAA,MAAA;AAAA;AAAA,EAElB,cAAA;AAAA,EACA,YAAc,EAAA,gBAAA;AAAA,EACd,WAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAmB,GAAA,CAAA;AAAA,EACnB,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,SAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAiB,GAAA,UAAA;AAAA,EACjB,iBAAoB,GAAA,IAAA;AAAA,EACpB,qBAAwB,GAAA,IAAA;AAAA,EACxB,sBAAA;AAAA,EACA;AACF,CAiBM,KAAA;AACJ,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,EAAM,MAAA;AAAA,IACJ,eAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,2BAAA;AAAA,IACA,uBAAA;AAAA,IACA,YAAA;AAAA,IACA,kBAAA;AAAA,IACA,WAAa,EAAA,EAAE,MAAQ,EAAA,YAAA,EAAc,OAAO,WAAY,EAAA;AAAA,IACxD,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,2BAAA;AAAA,IACA,YAAA;AAAA,IACA,sBAAA;AAAA,IACA,YAAA;AAAA,IACA,iBAAA;AAAA,IACA,mBAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,qBAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,oBAAA;AAAA,IACA,GAAG;AAAA,MACD,QAAS,CAAA;AAAA,IACX,uBAAA;AAAA,IACA,aAAA;AAAA,IACA,sBAAA;AAAA,IACA,kBAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAkB,EAAA,oBAAA;AAAA,IAClB,EAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,WAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAY,EAAA,cAAA;AAAA,IACZ,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,iBAAA;AAAA,IACA,gBAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,sBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,EAAE,qBAAwB,GAAA,CAAA,EAAM,GAAA,MAAA;AAEtC,EAAA,MAAM,yBAA4B,GAAA,EAAA,CAAG,CAAG,EAAA,SAAS,CAAqB,iBAAA,CAAA,EAAA;AAAA,IACpE,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,eAAgB,CAAA,gBAAA;AAAA,IAC3C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,eAAgB,CAAA,aAAA;AAAA,IAC3C,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,eAAgB,CAAA;AAAA,GACzC,CAAA;AAED,EAAA,MAAM,gBAAmB,GAAA;AAAA,IACvB,+BAAA,EAAiC,CAAG,EAAA,oBAAA,CAAqB,yBAAyB,CAAA,EAAA,CAAA;AAAA,IAClF,4BAAA,EAA8B,CAAG,EAAA,oBAAA,CAAqB,sBAAsB,CAAA,EAAA;AAAA,GAC9E;AAEA,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB,GAAG,gBAAA;AAAA,IACH,kBAAA,EAAoB,CAAG,EAAA,oBAAA,CAAqB,aAAa,CAAA,EAAA,CAAA;AAAA,IACzD,iBAAA,EAAmB,CAAG,EAAA,oBAAA,CAAqB,YAAY,CAAA,EAAA,CAAA;AAAA,IACvD,qBAAA,EAAuB,CAAG,EAAA,oBAAA,CAAqB,eAAe,CAAA,EAAA,CAAA;AAAA,IAC9D,sBAAA,EAAwB,CAAG,EAAA,oBAAA,CAAqB,gBAAgB,CAAA,EAAA,CAAA;AAAA,IAChE,uBAAA,EAAyB,GAAG,YAAY,CAAA,EAAA,CAAA;AAAA,IACxC,wBAAA,EAA0B,CAAG,EAAA,oBAAA,CAAqB,kBAAkB,CAAA,EAAA,CAAA;AAAA,IACpE,iCAAA,EAAmC,GAAG,qBAAqB,CAAA,EAAA;AAAA,GAC7D;AAEA,EAAM,MAAA,YAAA,GAAe,iBAAsB,KAAA,KAAA,IAAS,YAAe,GAAA,CAAA;AACnE,EAAM,MAAA,sBAAA,GAAyB,YAAgB,IAAA,QAAA,CAAS,MAAS,GAAA,CAAA;AAEjE,EACE,uBAAA,IAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,iBAAmB,EAAA,kBAAA;AAAA,MACnB,iBAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,sBAAA,KAA2B,IAC1B,mBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,mBAAA,CAAA;AAAA,YACvB,KAAK,WAAY,CAAA,qBAAA;AAAA,YACjB,KAAO,EAAA,YAAA;AAAA,YACP,QAAU,EAAA,CAAA,CAAA;AAAA,YAEV,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAqB,iBAAA,CAAA,EAAA;AAAA;AAAA,SAEjD,GAAA,IAAA;AAAA,QAEH,UAAA,CAAW,SAAS,CAAK,IAAA,YAAA,wBACvB,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,aAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAa,EAAA,EAAA,CAAA;AAAA,UAAG;AAAA,SAAA,EACnB,CACE,GAAA,IAAA;AAAA,wBAEJ,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,yBAAA;AAAA,YACX,KAAK,WAAY,CAAA,mBAAA;AAAA,YACjB,KAAO,EAAA,YAAA;AAAA,YAEP,QAAA,kBAAA,IAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACE,GAAG,UAAA;AAAA,gBACJ,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,gBACvB,IAAK,EAAA,OAAA;AAAA,gBACL,QAAA,EAAU,eAAe,KAAY,CAAA,GAAA,CAAA,CAAA;AAAA,gBAEpC,QAAA,EAAA;AAAA,kBACC,iBAAA,mBAAA,GAAA;AAAA,oBAAC,WAAA;AAAA,oBAAA;AAAA,sBACC,UAAA;AAAA,sBACA,qBAAA;AAAA,sBACA,cAAA;AAAA,sBACA,eAAA;AAAA,sBAEA,OAAA;AAAA,sBACA,YAAA;AAAA,sBACA,QAAA;AAAA,sBACA,2BAAA;AAAA,sBACA,gBAAkB,EAAA,sBAAA;AAAA,sBAClB,YAAA;AAAA,sBACA,iBAAA;AAAA,sBACA,mBAAA;AAAA,sBACA,cAAA;AAAA,sBACA,YAAA;AAAA,sBACA,cAAc,qBAAwB,GAAA,CAAA;AAAA,sBACtC,qBAAA;AAAA,sBACA,WAAA;AAAA,sBACA,OAAS,EAAA,EAAA;AAAA,sBACT,gBAAgB,WAAY,CAAA;AAAA;AAAA,mBAE5B,GAAA,IAAA;AAAA,kBACH,sBAAA,wBACE,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAS,KAAK,YACvC,EAAA,QAAA,EAAA;AAAA,oBAAS,QAAA,CAAA,GAAA,CAAI,CAAC,OAAY,KAAA;AACzB,sBAAM,MAAA,YAAA,GAAe,OAAQ,CAAA,KAAA,GAAQ,WAAc,GAAA,CAAA;AACnD,sBACE,uBAAA,GAAA;AAAA,wBAACD,KAAA;AAAA,wBAAA;AAAA,0BACC,eAAe,EAAA,YAAA;AAAA,0BACf,kBAAoB,EAAA,qBAAA;AAAA,0BACpB,SAAS,WAAY,CAAA,qBAAA;AAAA,0BAErB,gBAAgB,EAAA,OAAA,CAAQ,KAAU,KAAA,CAAA,GAAI,MAAS,GAAA,KAAA,CAAA;AAAA,0BAC/C,OAAA;AAAA,0BACA,iBAAA;AAAA,0BACA,aAAa,gBAAqB,KAAA,YAAA;AAAA,0BAElC,OAAS,EAAA,UAAA;AAAA,0BACT,YAAA;AAAA,0BACA,MAAQ,EAAA,sBAAA,GAAyB,CAAI,GAAA,YAAA,CAAa,OAAO,CAAA;AAAA,0BACzD,aAAA;AAAA,0BACA,cAAc,qBAAwB,GAAA,CAAA;AAAA,0BACtC,aAAe,EAAA,sBAAA;AAAA,0BACf,gBAAgB,WAAY,CAAA,cAAA;AAAA,0BAC5B,cAAc,eAAgB,CAAA;AAAA,yBAAA;AAAA,wBARzB,OAAQ,CAAA;AAAA,uBASf;AAAA,qBAEH,CAAA;AAAA,oCAaD,GAAA;AAAA,sBAAC,KAAA;AAAA,sBAAA;AAAA,wBACC,aAAa,EAAA,IAAA;AAAA,wBACb,SAAA,EAAW,GAAG,SAAS,CAAA,qBAAA,CAAA;AAAA,wBACvB,SAAW,EAAA,2BAAA;AAAA,wBACX,GAAK,EAAA,uBAAA;AAAA,wBACL,QAAU,EAAA,CAAA;AAAA;AAAA,qBACZ;AAAA,oBAEC;AAAA,mBAAA,EACH,CACE,GAAA;AAAA;AAAA;AAAA;AACN;AAAA,SACF;AAAA,wBAMA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,gBAAA,CAAA;AAAA,YACvB,KAAO,EAAA;AAAA;AAAA,SACT;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEa,MAAA,KAAA,GAAQ,UAAW,CAAA,SAASE,MACvC,CAAA;AAAA,EACE,YAAA;AAAA,EACA,UAAA;AAAA,EACA,GAAA;AAAA,EACA,uBAAA;AAAA,EACA,qBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,sBAAA;AAAA,EACA,kBAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,MAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,kBAAoB,EAAA,sBAAA;AAAA,EACpB,MAAA;AAAA,EACA,gBAAA;AAAA,EACA,EAAA;AAAA,EACA,mBAAA;AAAA,EACA,eAAA;AAAA,EACA,wBAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAgB,GAAA,EAAA;AAAA,EAChB,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,qBAAA;AAAA,EACA,sBAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,OAAuB,IAAI,CAAA;AAEhD,EAAA,MAAM,CAAC,IAAA,EAAM,QAAQ,CAAA,GAAI,QAAuB,EAAA;AAEhD,EAAA,MAAM,EAAE,cAAgB,EAAA,SAAA,EAAW,WAAa,EAAA,MAAA,KAAW,iBAAkB,CAAA;AAAA,IAC3E,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,gBAAgB,YAAc,EAAA,WAAA,EAAa,WACjD,GAAA,iBAAA,CAAkB,EAAE,CAAA;AAEtB,EAAA,MAAM,WAAW,mBAAuB,IAAA,gBAAA;AAExC,EAAA,IAAI,WAAW,KAAW,CAAA,EAAA;AACxB,IAAM,MAAA,KAAA;AAAA,MACJ;AAAA,KACF;AAAA;AAEF,EAAA,IAAI,eAAe,KAAW,CAAA,EAAA;AAC5B,IAAA,MAAM,MAAM,oCAAoC,CAAA;AAAA;AAGlD,EAAI,IAAA,sBAAA,IAA0B,qBAAqB,KAAW,CAAA,EAAA;AAC5D,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN,CAAA,qEAAA;AAAA,KACF;AAAA;AAGF,EAAI,IAAA,QAAA,IAAY,UAAU,aAAe,EAAA;AACvC,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN,CAAA,6FAAA;AAAA,KACF;AACA,IAAA,MAAA,GAAS,QAAW,GAAA,aAAA;AAAA,GACtB,MAAA,IAAW,YAAY,aAAe,EAAA;AACpC,IAAA,MAAA,GAAS,QAAW,GAAA,aAAA;AAAA,aACX,QAAU,EAAA;AACnB,IAAA,MAAA,GAAS,QAAW,GAAA,SAAA;AAAA;AAGtB,EAAM,MAAA,OAAA,GAAU,OAAqB,KAAS,CAAA,CAAA;AAC9C,EAAA,MAAM,OAAU,GAAA,WAAA;AAAA,IACd,CAACC,KAAuB,KAAA;AACtB,MAAI,IAAA,gBAAA,IAAoB,CAAC,SAAW,EAAA;AAClC,QAAA,OAAA,CAAQ,OAAUA,GAAAA,KAAAA;AAAA,OACpB,MAAA,IACEA,KAAK,CAAA,MAAA,KAAW,OAAQ,CAAA,OAAA,EAAS,UACjCA,KAAK,CAAA,KAAA,KAAU,OAAQ,CAAA,OAAA,EAAS,KAChC,EAAA;AACA,QAAA,QAAA,CAASA,KAAI,CAAA;AAAA;AACf,KACF;AAAA,IACA,CAAC,WAAW,gBAAgB;AAAA,GAC9B;AACA,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAI,IAAA,OAAA,CAAQ,WAAW,SAAW,EAAA;AAChC,MAAA,MAAMA,KAAO,GAAA;AAAA,QACX,GAAG,OAAQ,CAAA,OAAA;AAAA,QACX,QAAQ,SAAa,GAAA;AAAA,OACvB;AACA,MAAA,OAAA,CAAQ,OAAUA,GAAAA,KAAAA;AAClB,MAAA,QAAA,CAASA,KAAI,CAAA;AAAA;AACf,GACC,EAAA,CAAC,SAAW,EAAA,gBAAgB,CAAC,CAAA;AAIhC,EACE,uBAAA,IAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,WAAA,CAAa,GAAG,sBAAA;AAAA,QAC7B,CAAC,CAAA,EAAG,SAAS,CAAA,sBAAA,CAAwB,GAAG,kBAAA;AAAA,QACxC,CAAC,CAAA,EAAG,SAAS,CAAA,oBAAA,CAAsB,GAAG,mBAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,iBAAA,CAAmB,GAAG;AAAA,OACpC,CAAA;AAAA,MACD,MAAA;AAAA,MACA,EAAA;AAAA,MACA,QAAU,EAAA,OAAA;AAAA,MACV,GAAA,EAAK,UAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAAA,MAC1C,cAAA;AAAA,MACA,KACE,EAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACH,gCACE,OAAO,sBAAA,KAA2B,QAC9B,GAAA,CAAA,EAAG,sBAAsB,CACzB,EAAA,CAAA,GAAA,KAAA,CAAA;AAAA,QACN,qBACE,OAAO,aAAA,KAAkB,QACrB,GAAA,CAAA,EAAG,aAAa,CAChB,EAAA,CAAA,GAAA,KAAA;AAAA,OACR;AAAA,MAEF,KAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,GAAA,EAAK,MAAQ,EAAA,MAAA,EAAQ,aAAe,EAAA,CAAA;AAAA,QAC7C,IACD,IAAA,SAAA,KACC,YAAgB,IAAA,sBAAA,KAA2B,IAC1C,CAAA,mBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,YAAA;AAAA,YACA,UAAA;AAAA,YACA,GAAA;AAAA,YACA,uBAAA;AAAA,YACA,qBAAA;AAAA,YACA,aAAA;AAAA,YACA,cAAA;AAAA,YACA,sBAAA;AAAA,YACA,kBAAA;AAAA,YACA,gBAAA;AAAA,YACA,MAAA;AAAA,YACA,YAAA;AAAA,YACA,YAAA;AAAA,YACA,UAAA;AAAA,YACA,YAAA;AAAA,YACA,iBAAA;AAAA,YACA,gBAAA;AAAA,YACA,EAAA;AAAA,YACA,eAAA;AAAA,YACA,wBAAA;AAAA,YACA,cAAA;AAAA,YACA,YAAA;AAAA,YACA,WAAA;AAAA,YACA,MAAA;AAAA,YACA,WAAA;AAAA,YACA,UAAA;AAAA,YACA,QAAA;AAAA,YACA,iBAAA;AAAA,YACA,iBAAA;AAAA,YACA,kBACE,sBAAyB,GAAA,CAAA,GAAI,KAAK,GAAI,CAAA,CAAA,EAAG,oBAAoB,CAAC,CAAA;AAAA,YAEhE,cAAA;AAAA,YACA,iBAAA;AAAA,YACA,SAAA;AAAA,YACA,eAAA;AAAA,YACA,sBAAA,EAAwB,UAAU,aAAa,CAAA;AAAA,YAC/C,cAAA;AAAA,YACA,iBAAA;AAAA,YACA,qBAAA;AAAA,YACA,sBAAA;AAAA,YACA,IAAA,EAAM,gBAAiB,CAAA,IAAA,EAAM,YAAY;AAAA;AAAA,SAEzC,GAAA,IAAA;AAAA,QACH,sBACC,mBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAW,OAAA,CAAA,EAAA,GAAA,EAAK,SAC1C,EAAA,QAAA,kBAAA,GAAA,CAAC,iBAAkB,EAAA,EAAA,UAAA,EAAwB,GAC7C,CACE,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

package/esm/cell-renderers/input-cell/InputCell.css.js

@@ -1,4 +1,4 @@
-var inputCellCss = ".vuuTableCell.vuuTableCell-editable {\n  .vuuTableInputCell.saltInput-primary {\n    --salt-focused-outlineStyle: none;\n    --saltInput-height: var(--vuu-table-embedded-control-height);\n    --saltInput-minHeight: var(--saltInput-height);\n    border-radius: 2px;\n    font-weight: 500;\n  }\n}\n\n.vuuTableInputCell-icon {\n  --vuu-icon-height: 13px;\n  --vuu-icon-left: 0;\n  --vuu-icon-size: 15px;\n  --vuu-icon-width: 12px;\n  border-radius: 10px;\n}\n\n.vuuTableInputCell-error {\n  .saltInput-startAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: red;\n    }\n  }\n  .saltInput-endAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: red;\n    }\n  }\n}\n\n.vuuTableCell-right {\n  .saltInput-input {\n    text-align: right;\n  }\n}\n\n.vuuTableCell-error {\n  .vuuTableInputCell {\n    outline: var(--vuuTableCell-outline, solid red 2px);\n    outline-offset: -2px;\n  }\n}\n";
+var inputCellCss = ".vuuTableCell.vuuTableCell-editable {\n  .vuuTableInputCell.saltInput-primary {\n    --salt-focused-outlineStyle: none;\n    --saltInput-height: var(--vuu-table-embedded-control-height);\n    --saltInput-minHeight: var(--saltInput-height);\n    border-radius: 2px;\n    font-weight: 500;\n  }\n}\n\n.vuuTableInputCell-icon {\n  --vuu-icon-height: 13px;\n  --vuu-icon-left: 0;\n  --vuu-icon-size: 15px;\n  --vuu-icon-width: 12px;\n  border-radius: 10px;\n}\n\n.vuuTableInputCell-error {\n  .saltInput-startAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: red;\n    }\n  }\n  .saltInput-endAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: red;\n    }\n  }\n}\n\n.vuuTableCell-right {\n  .saltInput-input {\n    text-align: right;\n  }\n}\n\n.vuuTableInputCell-edited {\n  border-left:  solid var(--vuuTableInputCell-edited-color, var(--salt-editable-borderColor)) 4px !important;\n}\n\n.vuuTableCell-error {\n  .vuuTableInputCell {\n    outline: var(--vuuTableCell-outline, solid red 2px);\n    outline-offset: -2px;\n  }\n}\n";
 
 export { inputCellCss as default };
 //# sourceMappingURL=InputCell.css.js.map

package/esm/cell-renderers/input-cell/InputCell.js

@@ -3,7 +3,7 @@ import { Input } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { useEditableText } from '@vuu-ui/vuu-ui-controls';
-import { registerComponent } from '@vuu-ui/vuu-utils';
+import { registerComponent, dataDescriptorTypeToVuuRowDataItemType } from '@vuu-ui/vuu-utils';
 import cx from 'clsx';
 import inputCellCss from './InputCell.css.js';
 
@@ -21,19 +21,24 @@ const InputCell = ({
   });
   const dataValue = dataRow[column.name];
   const { align = "left", clientSideEditValidationCheck } = column;
-  const { warningMessage, ...editProps } = useEditableText({
+  const { edited, warningMessage, ...editProps } = useEditableText({
     value: dataValue,
     onEdit,
-    clientSideEditValidationCheck
+    clientSideEditValidationCheck,
+    type: dataDescriptorTypeToVuuRowDataItemType(column)
   });
   const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsx("span", { className: `${classBase}-icon`, "data-icon": "error" }) : void 0;
   const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsx("span", { className: `${classBase}-icon`, "data-icon": "error" }) : void 0;
+  if (dataRow.index === 0 && column.name === "bbg") {
+    console.log(`[vuuTableInputCell ${column.name} edited ? ${edited}`);
+  }
   return /* @__PURE__ */ jsx(
     Input,
     {
       ...editProps,
       bordered: true,
       className: cx(classBase, {
+        [`${classBase}-edited`]: edited,
         [`${classBase}-error`]: warningMessage !== void 0
       }),
       endAdornment,

package/esm/cell-renderers/input-cell/InputCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nexport const InputCell = ({\n  column,\n  dataRow,\n  onEdit,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-input-cell\",\n    css: inputCellCss,\n    window: targetWindow,\n  });\n\n  const dataValue = dataRow[column.name] as number | string;\n  const { align = \"left\", clientSideEditValidationCheck } = column;\n\n  const { warningMessage, ...editProps } = useEditableText({\n    value: dataValue,\n    onEdit,\n    clientSideEditValidationCheck,\n  });\n\n  const endAdornment =\n    warningMessage && align === \"left\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  const startAdornment =\n    warningMessage && align === \"right\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  return (\n    <Input\n      {...editProps}\n      bordered\n      className={cx(classBase, {\n        [`${classBase}-error`]: warningMessage !== undefined,\n      })}\n      endAdornment={endAdornment}\n      startAdornment={startAdornment}\n    />\n  );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":[],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAA,MAAM,EAAE,KAAA,GAAQ,MAAQ,EAAA,6BAAA,EAAkC,GAAA,MAAA;AAE1D,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAG,SAAA,KAAc,eAAgB,CAAA;AAAA,IACvD,KAAO,EAAA,SAAA;AAAA,IACP,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,MAAA,mBACzB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EAAA,MAAM,cACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,OAAA,mBACzB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,QAAQ,EAAA,IAAA;AAAA,MACR,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAEA,iBAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
+{"version":3,"file":"InputCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  dataDescriptorTypeToVuuRowDataItemType,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nexport const InputCell = ({\n  column,\n  dataRow,\n  onEdit,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-input-cell\",\n    css: inputCellCss,\n    window: targetWindow,\n  });\n\n  const dataValue = dataRow[column.name] as number | string;\n  const { align = \"left\", clientSideEditValidationCheck } = column;\n\n  const { edited, warningMessage, ...editProps } = useEditableText({\n    value: dataValue,\n    onEdit,\n    clientSideEditValidationCheck,\n    type: dataDescriptorTypeToVuuRowDataItemType(column),\n  });\n\n  const endAdornment =\n    warningMessage && align === \"left\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  const startAdornment =\n    warningMessage && align === \"right\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  if (dataRow.index === 0 && column.name === \"bbg\") {\n    console.log(`[vuuTableInputCell ${column.name} edited ? ${edited}`);\n  }\n\n  return (\n    <Input\n      {...editProps}\n      bordered\n      className={cx(classBase, {\n        [`${classBase}-edited`]: edited,\n        [`${classBase}-error`]: warningMessage !== undefined,\n      })}\n      endAdornment={endAdornment}\n      startAdornment={startAdornment}\n    />\n  );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":[],"mappings":";;;;;;;;;AAaA,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAA,MAAM,EAAE,KAAA,GAAQ,MAAQ,EAAA,6BAAA,EAAkC,GAAA,MAAA;AAE1D,EAAA,MAAM,EAAE,MAAQ,EAAA,cAAA,EAAgB,GAAG,SAAA,KAAc,eAAgB,CAAA;AAAA,IAC/D,KAAO,EAAA,SAAA;AAAA,IACP,MAAA;AAAA,IACA,6BAAA;AAAA,IACA,IAAA,EAAM,uCAAuC,MAAM;AAAA,GACpD,CAAA;AAED,EAAA,MAAM,YACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,MAAA,mBACzB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EAAA,MAAM,cACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,OAAA,mBACzB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EAAA,IAAI,OAAQ,CAAA,KAAA,KAAU,CAAK,IAAA,MAAA,CAAO,SAAS,KAAO,EAAA;AAChD,IAAA,OAAA,CAAQ,IAAI,CAAsB,mBAAA,EAAA,MAAA,CAAO,IAAI,CAAA,UAAA,EAAa,MAAM,CAAE,CAAA,CAAA;AAAA;AAGpE,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,QAAQ,EAAA,IAAA;AAAA,MACR,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,QACzB,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAEA,iBAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}

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  outline-offset: -2px;\n  overflow: hidden;\n  padding: var(--vuuTableCell-padding, 0 11px 0 8px);\n  text-overflow: ellipsis;\n  vertical-align: top;\n\n\n    &:has(.vuuCheckboxRowSelector) {\n      text-overflow: unset;\n    }\n\n}\n\n.vuuTableCell-right {\n  text-align: right;\n}\n\n.vuuTableCell-editable {\n  align-items: center;\n  display: inline-flex;\n  padding: 0px 1px 0 2px;\n}\n\n.vuuTableCell-editable:focus-within,\n.vuuTableCell:focus {\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  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n}\n\n.vuuTableCell-editable.vuuEditing {\n  outline: var(\n    --vuuTableCell-outline,\n    dotted var(--salt-focused-outlineColor) 2px\n  );\n\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n\n  &:has(.vuuCheckboxRowSelector) {\n    outline: none;\n  }\n}\n/* .vuuTableCell-editable:focus {\n  outline: none;\n} */\n\n.vuuTableCell.ContextOpen {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n  );\n}\n";
+var tableCellCss = ".vuuTableCell {\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n  display: inline-block;\n  white-space: nowrap;\n  height: 100%;\n  outline-offset: -2px;\n  overflow: hidden;\n  padding: var(--vuuTableCell-padding, 0 11px 0 8px);\n  text-overflow: ellipsis;\n  vertical-align: top;\n\n\n    &:has(.vuuCheckboxRowSelector) {\n      text-overflow: unset;\n    }\n\n}\n\n.vuuTableCell-right {\n  text-align: right;\n}\n\n.vuuTableCell-editable {\n  align-items: center;\n  display: inline-flex;\n  padding: var(--vuuTableCell-padding-editable, 0px 1px 0 2px);\n}\n\n.vuuTableCell-editable:focus-within,\n.vuuTableCell:focus {\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  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n}\n\n.vuuTableCell-editable.vuuEditing {\n  outline: var(\n    --vuuTableCell-outline,\n    dotted var(--salt-focused-outlineColor) 2px\n  );\n\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n\n  &:has(.vuuCheckboxRowSelector) {\n    outline: none;\n  }\n}\n/* .vuuTableCell-editable:focus {\n  outline: none;\n} */\n\n.vuuTableCell.ContextOpen {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n  );\n}\n";
 
 export { tableCellCss as default };
 //# sourceMappingURL=TableCell.css.js.map

package/esm/table-data-source/useDataSource.js

@@ -50,14 +50,17 @@ const useDataSource = ({
     () => new MovingDataRowWindow(rangeRef.current.withBuffer),
     []
   );
-  useMemo(() => {
-    dataSource.on("resumed", () => {
-      const { range } = dataSource;
-      if (range.to !== 0) {
-        dataRowWindow.setRange(dataSource.range.withBuffer);
-      }
-    });
+  const handleResume = useCallback(() => {
+    const { range } = dataSource;
+    if (range.to !== 0) {
+      dataRowWindow.setRange(dataSource.range.withBuffer);
+    }
   }, [dataRowWindow, dataSource]);
+  useEffect(() => {
+    return () => {
+      dataSource.removeListener("resumed", handleResume);
+    };
+  }, [dataSource, handleResume]);
   const setData = useCallback(
     (updates) => {
       const { current: DataRow2 } = dataRowRef;
@@ -103,6 +106,9 @@ const useDataSource = ({
           totalRowCountRef.current = message.size;
         }
         if (message.rows) {
+          console.log(
+            `#${message.clientViewportId} ${message.rows.length} rows`
+          );
           setData(message.rows);
           if (autoSelect && rowAutoSelected.current === false) {
             rowAutoSelected.current = true;
@@ -129,9 +135,6 @@ const useDataSource = ({
         onSizeChange?.(0);
         dataRowWindow.setRowCount(0);
         setData([]);
-        if (isMounted.current === false) {
-          console.log("setting state whilst unmounted");
-        }
         forceUpdate({});
       } else {
         console.log(`useDataSource unexpected message ${message.type}`);
@@ -191,7 +194,6 @@ const useDataSource = ({
     ]
   );
   useEffect(() => {
-    isMounted.current = true;
     if (dataSource.status !== "initialising") {
       const { columns, tableSchema } = dataSource;
       if (tableSchema) {
@@ -208,7 +210,6 @@ const useDataSource = ({
       }
     }
     return () => {
-      isMounted.current = false;
       dataSource.suspend?.(
         suspenseProps?.escalateToDisable,
         suspenseProps?.escalateDelay

package/esm/table-data-source/useDataSource.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDataSource.js","sources":["../../../../packages/vuu-table/src/table-data-source/useDataSource.ts"],"sourcesContent":["import type {\n  DataSourceConfigChangeHandler,\n  DataSourceRow,\n  DataSourceSubscribeCallback,\n  DataSourceSubscribedMessage,\n  DataSourceSuspenseProps,\n  SchemaColumn,\n} from \"@vuu-ui/vuu-data-types\";\nimport { SelectRowRequest, VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { Range } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { TableProps } from \"../Table\";\nimport {\n  DataRow,\n  TableRowSelectHandlerInternal,\n} from \"@vuu-ui/vuu-table-types\";\nimport { MovingDataRowWindow } from \"./DataRowMovingWindow\";\nimport { dataRowFactory, DataRowFunc } from \"../data-row/DataRow\";\n\nconst NullDataRow = () => ({}) as DataRow;\n\nexport interface DataSourceHookProps\n  extends Pick<\n    TableProps,\n    | \"autoSelectFirstRow\"\n    | \"autoSelectRowKey\"\n    | \"dataSource\"\n    | \"renderBufferSize\"\n    | \"revealSelected\"\n    | \"selectionModel\"\n  > {\n  suspenseProps?: DataSourceSuspenseProps;\n  onSelect: TableRowSelectHandlerInternal;\n  onSizeChange: (size: number) => void;\n  onSubscribed: (subscription: DataSourceSubscribedMessage) => void;\n}\n\nexport const useDataSource = ({\n  autoSelectFirstRow,\n  autoSelectRowKey,\n  dataSource,\n  onSizeChange,\n  onSubscribed,\n  renderBufferSize = 0,\n  revealSelected,\n  onSelect,\n  selectionModel,\n  suspenseProps,\n}: DataSourceHookProps) => {\n  const [, forceUpdate] = useState<unknown>(null);\n  const dataRows = useRef<DataRow[]>([]);\n  const isMounted = useRef(true);\n  const hasUpdated = useRef(false);\n  const rangeRef = useRef<Range>(dataSource.range);\n  const dataRowRef = useRef<DataRowFunc>(NullDataRow);\n  const setColumnsRef = useRef<undefined | ((columns: string[]) => void)>(\n    undefined,\n  );\n  const totalRowCountRef = useRef(0);\n  const rowAutoSelected = useRef(false);\n\n  const autoSelect =\n    autoSelectRowKey ??\n    (autoSelectFirstRow || selectionModel === \"single-no-deselect\");\n\n  const handleConfigChange = useCallback<DataSourceConfigChangeHandler>(\n    (_config, _range, _confirmed, configChanges) => {\n      if (configChanges?.filterChanged) {\n        rowAutoSelected.current = false;\n      }\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (autoSelect) {\n      dataSource.on(\"config\", handleConfigChange);\n    }\n    return () => {\n      if (autoSelect) {\n        dataSource.removeListener(\"config\", handleConfigChange);\n      }\n    };\n  }, [autoSelect, dataSource, handleConfigChange]);\n\n  const dataRowWindow = useMemo(\n    () => new MovingDataRowWindow(rangeRef.current.withBuffer),\n    [],\n  );\n\n  useMemo(() => {\n    dataSource.on(\"resumed\", () => {\n      // When we resume a dataSource (after switching tabs etc)\n      // client will receive rows. We may not have received any\n      // setRange calls at this point so dataWindow range will\n      //not yet be set. If the dataWindow range is already set,\n      // this is a no-op.\n      const { range } = dataSource;\n      if (range.to !== 0) {\n        dataRowWindow.setRange(dataSource.range.withBuffer);\n      }\n    });\n  }, [dataRowWindow, dataSource]);\n\n  const setData = useCallback(\n    (updates: DataSourceRow[]) => {\n      const { current: DataRow } = dataRowRef;\n      for (const row of updates) {\n        // for now, we create a new DataRow each time\n        dataRowWindow.add(DataRow(row));\n      }\n      dataRows.current = dataRowWindow.data;\n      if (isMounted.current) {\n        // TODO do we ever need to worry about missing updates here ?\n        forceUpdate({});\n      }\n    },\n    [dataRowWindow],\n  );\n\n  const selectRow = useCallback(\n    (dataRow: DataRow) => {\n      const rowKey = dataRow.key;\n      dataSource.select?.({\n        preserveExistingSelection: false,\n        rowKey,\n        type: \"SELECT_ROW\",\n      } as SelectRowRequest);\n      onSelect?.(dataRow);\n    },\n    [dataSource, onSelect],\n  );\n\n  const createDataRow = useCallback(\n    (columns: string[], schemaColumns: readonly SchemaColumn[]) => {\n      const [DataRow, setColumns] = dataRowFactory(columns, schemaColumns);\n      dataRowRef.current = DataRow;\n      setColumnsRef.current = setColumns;\n    },\n    [],\n  );\n\n  const datasourceMessageHandler: DataSourceSubscribeCallback = useCallback(\n    (message) => {\n      if (message.type === \"subscribed\") {\n        createDataRow(message.columns, message.tableSchema.columns);\n        onSubscribed?.(message);\n      } else if (message.type === \"viewport-update\") {\n        if (typeof message.size === \"number\") {\n          onSizeChange?.(message.size);\n          // const size = dataRowWindow.data.length;\n          dataRowWindow.setRowCount(message.size);\n          totalRowCountRef.current = message.size;\n\n          // if (dataRowWindow.data.length < size) {\n          //   if (isMounted.current === false) {\n          //     console.log(\"setting state whilst unmounted\");\n          //   }\n\n          //   forceUpdate({});\n          // }\n        }\n        if (message.rows) {\n          setData(message.rows);\n          if (autoSelect && rowAutoSelected.current === false) {\n            // OR if no selected row in message.rows, e.g after a filter\n            rowAutoSelected.current = true;\n            if (typeof autoSelect === \"string\") {\n              const dataRow = dataRowWindow.getByKey(autoSelect);\n              if (dataRow) {\n                selectRow(dataRow);\n              } else {\n                console.warn(\n                  `[useDataSource] autoSelect row key ${autoSelect} not in viewport`,\n                );\n              }\n            } else if (dataRowWindow.hasData) {\n              selectRow(dataRowWindow.firstRow);\n            }\n          }\n        } else if (message.size === 0) {\n          setData([]);\n        } else if (typeof message.size === \"number\") {\n          dataRows.current = dataRowWindow.data;\n          hasUpdated.current = true;\n        }\n      } else if (message.type === \"viewport-clear\") {\n        onSizeChange?.(0);\n        dataRowWindow.setRowCount(0);\n        setData([]);\n\n        if (isMounted.current === false) {\n          console.log(\"setting state whilst unmounted\");\n        }\n\n        forceUpdate({});\n      } else {\n        console.log(`useDataSource unexpected message ${message.type}`);\n      }\n    },\n    [\n      autoSelect,\n      createDataRow,\n      dataRowWindow,\n      onSizeChange,\n      onSubscribed,\n      selectRow,\n      setData,\n    ],\n  );\n\n  const getSelectedRows = useCallback(() => {\n    return dataRowWindow.getSelectedRows();\n  }, [dataRowWindow]);\n\n  useEffect(() => {\n    if (dataSource.status === \"disabled\") {\n      dataSource.enable?.(datasourceMessageHandler);\n    }\n  }, [dataSource, datasourceMessageHandler]);\n\n  useMemo(() => {\n    setColumnsRef.current?.(dataSource.columns);\n  }, [dataSource.columns]);\n\n  const setRange = useCallback(\n    (viewportRange: VuuRange) => {\n      if (!rangeRef.current.equals(viewportRange)) {\n        const range = Range(\n          viewportRange.from,\n          viewportRange.to,\n          renderBufferSize,\n        );\n\n        dataRowWindow.setRange(range.withBuffer);\n\n        if (\n          dataSource.status !== \"subscribed\" &&\n          dataSource.status !== \"subscribing\" &&\n          dataSource.status !== \"enabling\"\n        ) {\n          dataSource?.subscribe(\n            {\n              range,\n              revealSelected,\n              selectedKeyValues: autoSelectRowKey\n                ? [autoSelectRowKey]\n                : undefined,\n            },\n            datasourceMessageHandler,\n          );\n        } else {\n          dataSource.range = rangeRef.current = range;\n        }\n      }\n    },\n    [\n      autoSelectRowKey,\n      dataRowWindow,\n      dataSource,\n      datasourceMessageHandler,\n      renderBufferSize,\n      revealSelected,\n    ],\n  );\n\n  useEffect(() => {\n    isMounted.current = true;\n    if (dataSource.status !== \"initialising\") {\n      const { columns, tableSchema } = dataSource;\n      if (tableSchema) {\n        createDataRow(columns, tableSchema.columns);\n      } else {\n        throw Error(\n          `[useDataSource] a resumed dataSource must have a tableSchema`,\n        );\n      }\n\n      dataSource.resume?.(datasourceMessageHandler);\n\n      if (dataSource.range.from > 0) {\n        // UI does not currently restore scroll position, so always reset to top of dataset\n        const { from, to } = rangeRef.current.reset;\n        setRange({ from, to });\n      }\n    }\n    return () => {\n      isMounted.current = false;\n      dataSource.suspend?.(\n        suspenseProps?.escalateToDisable,\n        suspenseProps?.escalateDelay,\n      );\n    };\n  }, [\n    createDataRow,\n    dataSource,\n    datasourceMessageHandler,\n    setRange,\n    suspenseProps,\n  ]);\n\n  return {\n    dataRows: dataRows.current,\n    dataRowsRef: dataRows,\n    getSelectedRows,\n    range: rangeRef.current,\n    setRange,\n  };\n};\n"],"names":["DataRow"],"mappings":"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"}
+{"version":3,"file":"useDataSource.js","sources":["../../../../packages/vuu-table/src/table-data-source/useDataSource.ts"],"sourcesContent":["import type {\n  DataSourceConfigChangeHandler,\n  DataSourceRow,\n  DataSourceSubscribeCallback,\n  DataSourceSubscribedMessage,\n  DataSourceSuspenseProps,\n  SchemaColumn,\n} from \"@vuu-ui/vuu-data-types\";\nimport { SelectRowRequest, VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { Range } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { TableProps } from \"../Table\";\nimport {\n  DataRow,\n  TableRowSelectHandlerInternal,\n} from \"@vuu-ui/vuu-table-types\";\nimport { MovingDataRowWindow } from \"./DataRowMovingWindow\";\nimport { dataRowFactory, DataRowFunc } from \"../data-row/DataRow\";\n\nconst NullDataRow = () => ({}) as DataRow;\n\nexport interface DataSourceHookProps\n  extends Pick<\n    TableProps,\n    | \"autoSelectFirstRow\"\n    | \"autoSelectRowKey\"\n    | \"dataSource\"\n    | \"renderBufferSize\"\n    | \"revealSelected\"\n    | \"selectionModel\"\n  > {\n  suspenseProps?: DataSourceSuspenseProps;\n  onSelect: TableRowSelectHandlerInternal;\n  onSizeChange: (size: number) => void;\n  onSubscribed: (subscription: DataSourceSubscribedMessage) => void;\n}\n\nexport const useDataSource = ({\n  autoSelectFirstRow,\n  autoSelectRowKey,\n  dataSource,\n  onSizeChange,\n  onSubscribed,\n  renderBufferSize = 0,\n  revealSelected,\n  onSelect,\n  selectionModel,\n  suspenseProps,\n}: DataSourceHookProps) => {\n  const [, forceUpdate] = useState<unknown>(null);\n  const dataRows = useRef<DataRow[]>([]);\n  const isMounted = useRef(true);\n  const hasUpdated = useRef(false);\n  const rangeRef = useRef<Range>(dataSource.range);\n  const dataRowRef = useRef<DataRowFunc>(NullDataRow);\n  const setColumnsRef = useRef<undefined | ((columns: string[]) => void)>(\n    undefined,\n  );\n  const totalRowCountRef = useRef(0);\n  const rowAutoSelected = useRef(false);\n\n  const autoSelect =\n    autoSelectRowKey ??\n    (autoSelectFirstRow || selectionModel === \"single-no-deselect\");\n\n  const handleConfigChange = useCallback<DataSourceConfigChangeHandler>(\n    (_config, _range, _confirmed, configChanges) => {\n      if (configChanges?.filterChanged) {\n        rowAutoSelected.current = false;\n      }\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (autoSelect) {\n      dataSource.on(\"config\", handleConfigChange);\n    }\n    return () => {\n      if (autoSelect) {\n        dataSource.removeListener(\"config\", handleConfigChange);\n      }\n    };\n  }, [autoSelect, dataSource, handleConfigChange]);\n\n  const dataRowWindow = useMemo(\n    () => new MovingDataRowWindow(rangeRef.current.withBuffer),\n    [],\n  );\n\n  const handleResume = useCallback(() => {\n    // When we resume a dataSource (after switching tabs etc)\n    // client will receive rows. We may not have received any\n    // setRange calls at this point so dataWindow range will\n    //not yet be set. If the dataWindow range is already set,\n    // this is a no-op.\n    const { range } = dataSource;\n    if (range.to !== 0) {\n      dataRowWindow.setRange(dataSource.range.withBuffer);\n    }\n  }, [dataRowWindow, dataSource]);\n\n  useEffect(() => {\n    return () => {\n      dataSource.removeListener(\"resumed\", handleResume);\n    };\n  }, [dataSource, handleResume]);\n\n  const setData = useCallback(\n    (updates: DataSourceRow[]) => {\n      const { current: DataRow } = dataRowRef;\n      for (const row of updates) {\n        // for now, we create a new DataRow each time\n        dataRowWindow.add(DataRow(row));\n      }\n      dataRows.current = dataRowWindow.data;\n      if (isMounted.current) {\n        // TODO do we ever need to worry about missing updates here ?\n        forceUpdate({});\n      }\n    },\n    [dataRowWindow],\n  );\n\n  const selectRow = useCallback(\n    (dataRow: DataRow) => {\n      const rowKey = dataRow.key;\n      dataSource.select?.({\n        preserveExistingSelection: false,\n        rowKey,\n        type: \"SELECT_ROW\",\n      } as SelectRowRequest);\n      onSelect?.(dataRow);\n    },\n    [dataSource, onSelect],\n  );\n\n  const createDataRow = useCallback(\n    (columns: string[], schemaColumns: readonly SchemaColumn[]) => {\n      const [DataRow, setColumns] = dataRowFactory(columns, schemaColumns);\n      dataRowRef.current = DataRow;\n      setColumnsRef.current = setColumns;\n    },\n    [],\n  );\n\n  const datasourceMessageHandler: DataSourceSubscribeCallback = useCallback(\n    (message) => {\n      if (message.type === \"subscribed\") {\n        createDataRow(message.columns, message.tableSchema.columns);\n        onSubscribed?.(message);\n      } else if (message.type === \"viewport-update\") {\n        if (typeof message.size === \"number\") {\n          onSizeChange?.(message.size);\n          // const size = dataRowWindow.data.length;\n          dataRowWindow.setRowCount(message.size);\n          totalRowCountRef.current = message.size;\n\n          // if (dataRowWindow.data.length < size) {\n          //   if (isMounted.current === false) {\n          //     console.log(\"setting state whilst unmounted\");\n          //   }\n\n          //   forceUpdate({});\n          // }\n        }\n        if (message.rows) {\n          console.log(\n            `#${message.clientViewportId} ${message.rows.length} rows`,\n          );\n          setData(message.rows);\n          if (autoSelect && rowAutoSelected.current === false) {\n            // OR if no selected row in message.rows, e.g after a filter\n            rowAutoSelected.current = true;\n            if (typeof autoSelect === \"string\") {\n              const dataRow = dataRowWindow.getByKey(autoSelect);\n              if (dataRow) {\n                selectRow(dataRow);\n              } else {\n                console.warn(\n                  `[useDataSource] autoSelect row key ${autoSelect} not in viewport`,\n                );\n              }\n            } else if (dataRowWindow.hasData) {\n              selectRow(dataRowWindow.firstRow);\n            }\n          }\n        } else if (message.size === 0) {\n          setData([]);\n        } else if (typeof message.size === \"number\") {\n          dataRows.current = dataRowWindow.data;\n          hasUpdated.current = true;\n        }\n      } else if (message.type === \"viewport-clear\") {\n        onSizeChange?.(0);\n        dataRowWindow.setRowCount(0);\n        setData([]);\n        forceUpdate({});\n      } else {\n        console.log(`useDataSource unexpected message ${message.type}`);\n      }\n    },\n    [\n      autoSelect,\n      createDataRow,\n      dataRowWindow,\n      onSizeChange,\n      onSubscribed,\n      selectRow,\n      setData,\n    ],\n  );\n\n  const getSelectedRows = useCallback(() => {\n    return dataRowWindow.getSelectedRows();\n  }, [dataRowWindow]);\n\n  useEffect(() => {\n    if (dataSource.status === \"disabled\") {\n      dataSource.enable?.(datasourceMessageHandler);\n    }\n  }, [dataSource, datasourceMessageHandler]);\n\n  useMemo(() => {\n    setColumnsRef.current?.(dataSource.columns);\n  }, [dataSource.columns]);\n\n  const setRange = useCallback(\n    (viewportRange: VuuRange) => {\n      if (!rangeRef.current.equals(viewportRange)) {\n        const range = Range(\n          viewportRange.from,\n          viewportRange.to,\n          renderBufferSize,\n        );\n\n        dataRowWindow.setRange(range.withBuffer);\n\n        if (\n          dataSource.status !== \"subscribed\" &&\n          dataSource.status !== \"subscribing\" &&\n          dataSource.status !== \"enabling\"\n        ) {\n          dataSource?.subscribe(\n            {\n              range,\n              revealSelected,\n              selectedKeyValues: autoSelectRowKey\n                ? [autoSelectRowKey]\n                : undefined,\n            },\n            datasourceMessageHandler,\n          );\n        } else {\n          dataSource.range = rangeRef.current = range;\n        }\n      }\n    },\n    [\n      autoSelectRowKey,\n      dataRowWindow,\n      dataSource,\n      datasourceMessageHandler,\n      renderBufferSize,\n      revealSelected,\n    ],\n  );\n\n  useEffect(() => {\n    if (dataSource.status !== \"initialising\") {\n      const { columns, tableSchema } = dataSource;\n      if (tableSchema) {\n        createDataRow(columns, tableSchema.columns);\n      } else {\n        throw Error(\n          `[useDataSource] a resumed dataSource must have a tableSchema`,\n        );\n      }\n      dataSource.resume?.(datasourceMessageHandler);\n\n      if (dataSource.range.from > 0) {\n        // UI does not currently restore scroll position, so always reset to top of dataset\n        const { from, to } = rangeRef.current.reset;\n        setRange({ from, to });\n      }\n    }\n    return () => {\n      dataSource.suspend?.(\n        suspenseProps?.escalateToDisable,\n        suspenseProps?.escalateDelay,\n      );\n    };\n  }, [\n    createDataRow,\n    dataSource,\n    datasourceMessageHandler,\n    setRange,\n    suspenseProps,\n  ]);\n\n  return {\n    dataRows: dataRows.current,\n    dataRowsRef: dataRows,\n    getSelectedRows,\n    range: rangeRef.current,\n    setRange,\n  };\n};\n"],"names":["DataRow"],"mappings":"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"}

package/esm/useCellEditing.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCellEditing.js","sources":["../../../packages/vuu-table/src/useCellEditing.ts"],"sourcesContent":["import {\n  dispatchCustomEvent,\n  isCharacterKey,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent,\n  useCallback,\n} from \"react\";\nimport { cellIsTextInput, getAriaCellPos } from \"./table-dom-utils\";\nimport { FocusCell } from \"./useCellFocus\";\n\nexport interface CellEditingHookProps {\n  focusCell: FocusCell;\n  navigate: () => void;\n}\n\nexport const useCellEditing = ({\n  focusCell,\n  navigate,\n}: CellEditingHookProps) => {\n  const commitHandler = useCallback(() => {\n    navigate();\n  }, [navigate]);\n\n  const editModeHandler = useCallback(\n    (e: Event) => {\n      // console.log(`[useCellEditing]  editModeHandler ${e.type}`);\n      const tableCell = queryClosest<HTMLDivElement>(\n        e.target,\n        \".vuuTableCell\",\n        true,\n      );\n      if (e.type === \"vuu-exit-edit-mode\") {\n        tableCell.classList.remove(\"vuuEditing\");\n        // console.log(\"shift focus back to cell\");\n        const cellPos = getAriaCellPos(tableCell);\n        focusCell(cellPos, true);\n        // console.log({ tableCell });\n      } else {\n        // console.log(\"what do we do in edit mode ?\");\n        tableCell.classList.add(\"vuuEditing\");\n      }\n    },\n    [focusCell],\n  );\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        // need to put the input into edit mode\n        dispatchCustomEvent(input, \"vuu-begin-edit\");\n      }\n    },\n    [],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: ReactKeyboardEvent<HTMLElement>) => {\n      // console.log(`[useCellEditing] handleKeyDown `);\n\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      // console.log(\n      //   `[useCellEditing] handleBlur, unregisters the vuu-commit handler `,\n      // );\n      const el = e.target as HTMLElement;\n      el.removeEventListener(\"vuu-commit\", commitHandler, true);\n      el.removeEventListener(\"vuu-enter-edit-mode\", editModeHandler, true);\n      el.removeEventListener(\"vuu-exit-edit-mode\", editModeHandler, true);\n    },\n    [commitHandler, editModeHandler],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler>(\n    (e) => {\n      // console.log(\n      //   `[useCellEditing] handleFocus, registers the vuu-commit handler `,\n      // );\n      const el = e.target as HTMLElement;\n      el.addEventListener(\"vuu-commit\", commitHandler, true);\n      el.addEventListener(\"vuu-enter-edit-mode\", editModeHandler, true);\n      el.addEventListener(\"vuu-exit-edit-mode\", editModeHandler, true);\n    },\n    [commitHandler, editModeHandler],\n  );\n\n  return {\n    onBlur: handleBlur,\n    onDoubleClick: handleDoubleClick,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCellEditing.js","sources":["../../../packages/vuu-table/src/useCellEditing.ts"],"sourcesContent":["import {\n  dispatchCustomEvent,\n  isCharacterKey,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent,\n  useCallback,\n} from \"react\";\nimport { cellIsTextInput, getAriaCellPos } from \"./table-dom-utils\";\nimport { FocusCell } from \"./useCellFocus\";\n\nexport interface CellEditingHookProps {\n  focusCell: FocusCell;\n  navigate: () => void;\n}\n\nexport const useCellEditing = ({\n  focusCell,\n  navigate,\n}: CellEditingHookProps) => {\n  const commitHandler = useCallback(() => {\n    navigate();\n  }, [navigate]);\n\n  const editModeHandler = useCallback(\n    (e: Event) => {\n      const tableCell = queryClosest<HTMLDivElement>(\n        e.target,\n        \".vuuTableCell\",\n        true,\n      );\n      if (e.type === \"vuu-exit-edit-mode\") {\n        tableCell.classList.remove(\"vuuEditing\");\n        const cellPos = getAriaCellPos(tableCell);\n        focusCell(cellPos, true);\n      } else {\n        tableCell.classList.add(\"vuuEditing\");\n      }\n    },\n    [focusCell],\n  );\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        // need to put the input into edit mode\n        dispatchCustomEvent(input, \"vuu-begin-edit\");\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      el.removeEventListener(\"vuu-enter-edit-mode\", editModeHandler, true);\n      el.removeEventListener(\"vuu-exit-edit-mode\", editModeHandler, true);\n    },\n    [commitHandler, editModeHandler],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler>(\n    (e) => {\n      const el = e.target as HTMLElement;\n      el.addEventListener(\"vuu-commit\", commitHandler, true);\n      el.addEventListener(\"vuu-enter-edit-mode\", editModeHandler, true);\n      el.addEventListener(\"vuu-exit-edit-mode\", editModeHandler, true);\n    },\n    [commitHandler, editModeHandler],\n  );\n\n  return {\n    onBlur: handleBlur,\n    onDoubleClick: handleDoubleClick,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/useMeasuredHeight.js

@@ -20,7 +20,6 @@ const useMeasuredHeight = ({
         if (lastMeasuredHeight.current !== newHeight) {
           if (isValidNumber(newHeight)) {
             lastMeasuredHeight.current = newHeight;
-            console.log(`[useMeasuredHeight] resizeObserver  ${newHeight}`);
             setMeasuredHeight(newHeight);
             onHeightMeasured?.(newHeight);
           }
@@ -33,7 +32,6 @@ const useMeasuredHeight = ({
       if (el) {
         if (heightProp === 0) {
           const { height } = el.getBoundingClientRect();
-          console.log(`[useMeasuredHeight] initial height = ${height}`);
           resizeObserver.observe(el);
           const measuredHeight2 = Math.round(height);
           setMeasuredHeight(measuredHeight2);

package/esm/useMeasuredHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMeasuredHeight.js","sources":["../../../packages/vuu-table/src/useMeasuredHeight.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useMemo, useRef, 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 [measuredHeight, setMeasuredHeight] = useState(heightProp);\n  const lastMeasuredHeight = useRef(-1);\n\n  useMemo(() => {\n    if (heightProp !== 0) {\n      setMeasuredHeight(heightProp);\n    }\n  }, [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 (lastMeasuredHeight.current !== newHeight) {\n          if (isValidNumber(newHeight)) {\n            lastMeasuredHeight.current = newHeight;\n            console.log(`[useMeasuredHeight] resizeObserver  ${newHeight}`);\n            setMeasuredHeight(newHeight);\n            onHeightMeasured?.(newHeight);\n          }\n        }\n      }\n    });\n  }, [onHeightMeasured]);\n\n  const measuredRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        if (heightProp === 0) {\n          const { height } = el.getBoundingClientRect();\n          console.log(`[useMeasuredHeight] initial height = ${height}`);\n          resizeObserver.observe(el);\n          // avoids tiny sub-pixel discrepancies\n          const measuredHeight = Math.round(height);\n          setMeasuredHeight(measuredHeight);\n        }\n      } else {\n        resizeObserver.disconnect();\n      }\n    },\n    [resizeObserver, heightProp],\n  );\n  return { measuredHeight, measuredRef };\n};\n"],"names":["measuredHeight"],"mappings":";;;AAQO,MAAM,oBAAoB,CAAC;AAAA,EAChC,gBAAA;AAAA,EACA,QAAQ,UAAa,GAAA;AACvB,CAA+B,KAAA;AAC7B,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,UAAU,CAAA;AAC/D,EAAM,MAAA,kBAAA,GAAqB,OAAO,CAAE,CAAA,CAAA;AAEpC,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,eAAe,CAAG,EAAA;AACpB,MAAA,iBAAA,CAAkB,UAAU,CAAA;AAAA;AAC9B,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,cAAA,GAAiB,QAAQ,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;AAC5C,QAAM,MAAA,SAAA,GAAY,IAAK,CAAA,KAAA,CAAM,YAAY,CAAA;AACzC,QAAI,IAAA,kBAAA,CAAmB,YAAY,SAAW,EAAA;AAC5C,UAAI,IAAA,aAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,YAAA,kBAAA,CAAmB,OAAU,GAAA,SAAA;AAC7B,YAAQ,OAAA,CAAA,GAAA,CAAI,CAAuC,oCAAA,EAAA,SAAS,CAAE,CAAA,CAAA;AAC9D,YAAA,iBAAA,CAAkB,SAAS,CAAA;AAC3B,YAAA,gBAAA,GAAmB,SAAS,CAAA;AAAA;AAC9B;AACF;AACF,KACD,CAAA;AAAA,GACH,EAAG,CAAC,gBAAgB,CAAC,CAAA;AAErB,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,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;AAC5C,UAAQ,OAAA,CAAA,GAAA,CAAI,CAAwC,qCAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AAC5D,UAAA,cAAA,CAAe,QAAQ,EAAE,CAAA;AAEzB,UAAMA,MAAAA,eAAAA,GAAiB,IAAK,CAAA,KAAA,CAAM,MAAM,CAAA;AACxC,UAAA,iBAAA,CAAkBA,eAAc,CAAA;AAAA;AAClC,OACK,MAAA;AACL,QAAA,cAAA,CAAe,UAAW,EAAA;AAAA;AAC5B,KACF;AAAA,IACA,CAAC,gBAAgB,UAAU;AAAA,GAC7B;AACA,EAAO,OAAA,EAAE,gBAAgB,WAAY,EAAA;AACvC;;;;"}
+{"version":3,"file":"useMeasuredHeight.js","sources":["../../../packages/vuu-table/src/useMeasuredHeight.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useMemo, useRef, 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 [measuredHeight, setMeasuredHeight] = useState(heightProp);\n  const lastMeasuredHeight = useRef(-1);\n\n  useMemo(() => {\n    if (heightProp !== 0) {\n      setMeasuredHeight(heightProp);\n    }\n  }, [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 (lastMeasuredHeight.current !== newHeight) {\n          if (isValidNumber(newHeight)) {\n            lastMeasuredHeight.current = newHeight;\n            setMeasuredHeight(newHeight);\n            onHeightMeasured?.(newHeight);\n          }\n        }\n      }\n    });\n  }, [onHeightMeasured]);\n\n  const measuredRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        if (heightProp === 0) {\n          const { height } = el.getBoundingClientRect();\n          resizeObserver.observe(el);\n          // avoids tiny sub-pixel discrepancies\n          const measuredHeight = Math.round(height);\n          setMeasuredHeight(measuredHeight);\n        }\n      } else {\n        resizeObserver.disconnect();\n      }\n    },\n    [resizeObserver, heightProp],\n  );\n  return { measuredHeight, measuredRef };\n};\n"],"names":["measuredHeight"],"mappings":";;;AAQO,MAAM,oBAAoB,CAAC;AAAA,EAChC,gBAAA;AAAA,EACA,QAAQ,UAAa,GAAA;AACvB,CAA+B,KAAA;AAC7B,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,UAAU,CAAA;AAC/D,EAAM,MAAA,kBAAA,GAAqB,OAAO,CAAE,CAAA,CAAA;AAEpC,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,eAAe,CAAG,EAAA;AACpB,MAAA,iBAAA,CAAkB,UAAU,CAAA;AAAA;AAC9B,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,cAAA,GAAiB,QAAQ,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;AAC5C,QAAM,MAAA,SAAA,GAAY,IAAK,CAAA,KAAA,CAAM,YAAY,CAAA;AACzC,QAAI,IAAA,kBAAA,CAAmB,YAAY,SAAW,EAAA;AAC5C,UAAI,IAAA,aAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,YAAA,kBAAA,CAAmB,OAAU,GAAA,SAAA;AAC7B,YAAA,iBAAA,CAAkB,SAAS,CAAA;AAC3B,YAAA,gBAAA,GAAmB,SAAS,CAAA;AAAA;AAC9B;AACF;AACF,KACD,CAAA;AAAA,GACH,EAAG,CAAC,gBAAgB,CAAC,CAAA;AAErB,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,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;AAC5C,UAAA,cAAA,CAAe,QAAQ,EAAE,CAAA;AAEzB,UAAMA,MAAAA,eAAAA,GAAiB,IAAK,CAAA,KAAA,CAAM,MAAM,CAAA;AACxC,UAAA,iBAAA,CAAkBA,eAAc,CAAA;AAAA;AAClC,OACK,MAAA;AACL,QAAA,cAAA,CAAe,UAAW,EAAA;AAAA;AAC5B,KACF;AAAA,IACA,CAAC,gBAAgB,UAAU;AAAA,GAC7B;AACA,EAAO,OAAA,EAAE,gBAAgB,WAAY,EAAA;AACvC;;;;"}

package/package.json

@@ -1,22 +1,22 @@
 {
-  "version": "2.1.0-alpha.11",
+  "version": "2.1.0-alpha.13",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.0-alpha.11",
-    "@vuu-ui/vuu-table-types": "2.1.0-alpha.11",
-    "@vuu-ui/vuu-protocol-types": "2.1.0-alpha.11"
+    "@vuu-ui/vuu-data-types": "2.1.0-alpha.13",
+    "@vuu-ui/vuu-table-types": "2.1.0-alpha.13",
+    "@vuu-ui/vuu-protocol-types": "2.1.0-alpha.13"
   },
   "dependencies": {
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-context-menu": "2.1.0-alpha.11",
-    "@vuu-ui/vuu-data-react": "2.1.0-alpha.11",
-    "@vuu-ui/vuu-popups": "2.1.0-alpha.11",
-    "@vuu-ui/vuu-table-extras": "2.1.0-alpha.11",
-    "@vuu-ui/vuu-ui-controls": "2.1.0-alpha.11",
-    "@vuu-ui/vuu-utils": "2.1.0-alpha.11"
+    "@vuu-ui/vuu-context-menu": "2.1.0-alpha.13",
+    "@vuu-ui/vuu-data-react": "2.1.0-alpha.13",
+    "@vuu-ui/vuu-popups": "2.1.0-alpha.13",
+    "@vuu-ui/vuu-table-extras": "2.1.0-alpha.13",
+    "@vuu-ui/vuu-ui-controls": "2.1.0-alpha.13",
+    "@vuu-ui/vuu-utils": "2.1.0-alpha.13"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",