@vuu-ui/vuu-table 0.8.93 → 0.8.95

package/cjs/Row.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var rowCss = ".vuuTableRow {\n  background: var(--row-background, var(--table-background));\n  color: var(--salt-content-secondary-foreground);\n  border-bottom: 1px solid var(--row-borderColor, var(--table-background));\n  box-sizing: border-box;\n  height: var(--row-height);\n  line-height: var(--row-height);\n  position: absolute;\n  top: 0;\n  white-space: nowrap;\n}\n\n.vuuTableRow-proxy {\n  visibility: hidden;\n}\n\n.vuuTableRow-even {\n  --row-background: var(--row-background-even);\n}\n\n.vuuTableRow-highlighted {\n  background: var(--salt-selectable-background-hover);\n}\n\n.vuuTableRow-selected,\n.vuuTableRow-selectedEnd {\n  /* --row-borderColor: var(--salt-separable-secondary-borderColor); */\n  background-color: var(--salt-selectable-background-selected);\n}\n\n.vuuTableRow-selectedEnd {\n  z-index: 1;\n}\n\n.vuuTableRow-selectedStart {\n  --vuu-selection-decorator-left-radius: 5px 0 0 0;\n  --vuu-selection-decorator-right-radius: 0 5px 0 0;\n\n  border-radius: 5px 5px 0 0;\n}\n\n.vuuTableRow-selectedEnd {\n  --vuu-selection-decorator-left-radius: 0 0 0 5px;\n  --vuu-selection-decorator-right-radius: 0 0 5px 0;\n  border-radius: 0 0 5px 5px;\n}\n\n.vuuTableRow-selectedStart.vuuTableRow-selectedEnd {\n  --vuu-selection-decorator-left-radius: 5px 0 0 5px;\n  --vuu-selection-decorator-right-radius: 0 5px 5px 0;\n  border-radius: 5px 5px 5px 5px;\n}\n\n.vuuTableRow-selectedStart:after {\n  content: \"\";\n  position: absolute;\n  top: -1px;\n  left: 4px;\n  height: 1px;\n  background: var(--vuuTableRow-selectionBlock-borderColor);\n  width: calc(var(--content-width) - 8px);\n  z-index: 1;\n}\n\n.vuuTableRow-selectedEnd {\n  border-bottom-color: var(\n    --vuuTableRow-selectionBlock-borderColor,\n    var(--row-borderColor)\n  );\n}\n\n.vuuTableRow-selectionDecorator {\n  background: var(--table-background);\n  display: inline-block;\n  position: relative;\n  height: var(--row-height);\n  width: 4px;\n  z-index: 2;\n}\n\n.vuuTableRow-selectionDecorator.vuuStickyLeft {\n  left: 0;\n  position: sticky;\n}\n\n.vuuTableRow-selectionDecorator.vuuStickyRight {\n  right: 0;\n  position: sticky;\n}\n\n.vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before,\n.vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before {\n  content: \"\";\n  inset: -1px 0 0 0;\n  position: absolute;\n  background: var(--table-background);\n}\n\n.vuuTableRow-selectionDecorator.vuuStickyLeft:before {\n  border-radius: var(--vuu-selection-decorator-left-radius, 0);\n}\n\n.vuuTableRow-selectionDecorator.vuuStickyRight:before {\n  border-radius: var(--vuu-selection-decorator-right-radius, 0);\n}\n\n.vuuTableRow-expanded {\n  --toggle-icon-transform: rotate(90deg);\n}\n\n.vuuDraggable .vuuTableRow {\n  --cell-borderColor: transparent;\n  --vuu-selection-decorator-bg: transparent;\n  transform: none !important;\n  z-index: 1;\n}\n";
+var rowCss = ".vuuTableRow {\n  background: var(--row-background, var(--table-background));\n  border-bottom: 1px solid var(--row-borderColor, var(--table-background));\n  box-sizing: border-box;\n  color: var(--salt-content-secondary-foreground);\n  contain: layout;\n  /* contain-intrinsic-height: var(--row-height);\n  content-visibility: auto; */\n  height: var(--row-height);\n  line-height: var(--row-height);\n  position: absolute;\n  top: 0;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.vuuTableRow-proxy {\n  position: absolute !important;\n  visibility: hidden;\n}\n\n.vuuTableRow-even {\n  --row-background: var(--row-background-even);\n}\n\n.vuuTableRow-highlighted {\n  background: var(--salt-selectable-background-hover);\n}\n\n.vuuTableRow-selected,\n.vuuTableRow-selectedEnd {\n  /* --row-borderColor: var(--salt-separable-secondary-borderColor); */\n  background-color: var(--salt-selectable-background-selected);\n}\n\n.vuuTableRow-selectedEnd {\n  z-index: 1;\n}\n\n.vuuTableRow-selectedStart {\n  --selection-decorator-marginTop: 1px;\n  --vuu-selection-decorator-left-radius: 5px 0 0 0;\n  --vuu-selection-decorator-right-radius: 0 5px 0 0;\n\n  border-radius: 5px 5px 0 0;\n}\n\n.vuuTableRow-selectedEnd {\n  --vuu-selection-decorator-left-radius: 0 0 0 5px;\n  --vuu-selection-decorator-right-radius: 0 0 5px 0;\n  border-radius: 0 0 5px 5px;\n}\n\n.vuuTableRow-selectedStart.vuuTableRow-selectedEnd {\n  --vuu-selection-decorator-left-radius: 5px 0 0 5px;\n  --vuu-selection-decorator-right-radius: 0 5px 5px 0;\n  border-radius: 5px 5px 5px 5px;\n}\n\n.vuuTableRow-selectedStart:after {\n  content: \"\";\n  position: absolute;\n  top: 0px;\n  left: 4px;\n  height: 1px;\n  background: var(--vuuTableRow-selectionBlock-borderColor);\n  width: calc(var(--content-width) - 8px);\n  z-index: 1;\n}\n\n.vuuTableRow-selectedEnd {\n  border-bottom-color: var(\n    --vuuTableRow-selectionBlock-borderColor,\n    var(--row-borderColor)\n  );\n}\n\n.vuuTableRow-selectedStart.vuuTableRow-selectedEnd {\n  .vuuTableRow-selectionDecorator {\n    height: calc(var(--row-height) - 1px);\n  }\n}\n\n.vuuTableRow-selectionDecorator {\n  background: var(--table-background);\n  display: inline-block;\n  position: relative;\n  height: var(--row-height);\n  margin-top: var(--selection-decorator-marginTop, 0px);\n  width: 4px;\n  z-index: 2;\n}\n\n.vuuTableRow-selectionDecorator.vuuStickyLeft {\n  left: 0;\n  position: sticky;\n}\n\n.vuuTableRow-selectionDecorator.vuuStickyRight {\n  right: 0;\n  position: sticky;\n}\n\n.vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before,\n.vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before {\n  content: \"\";\n  inset: -1px 0 0 0;\n  position: absolute;\n  background: var(--table-background);\n}\n\n.vuuTableRow-selectionDecorator.vuuStickyLeft:before {\n  border-radius: var(--vuu-selection-decorator-left-radius, 0);\n}\n\n.vuuTableRow-selectionDecorator.vuuStickyRight:before {\n  border-radius: var(--vuu-selection-decorator-right-radius, 0);\n}\n\n.vuuTableRow-expanded {\n  --toggle-icon-transform: rotate(90deg);\n}\n\n.vuuDraggable .vuuTableRow {\n  --cell-borderColor: transparent;\n  --vuu-selection-decorator-bg: transparent;\n  transform: none !important;\n  z-index: 1;\n}\n";
 
 module.exports = rowCss;
 //# sourceMappingURL=Row.css.js.map

package/cjs/Row.js

@@ -81,7 +81,7 @@ const Row = react.memo(
         [`${classBase}-selectedEnd`]: selectionStatus & Last
       }
     );
-    const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
+    const style = { top: offset };
     const handleGroupCellClick = react.useCallback(
       (evt, column) => {
         if (vuuUtils.isGroupColumn(column) || vuuUtils.isJsonGroup(column, row, columnMap)) {

package/cjs/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../src/Row.tsx"],"sourcesContent":["import { RowProps, RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  isGroupColumn,\n  isJsonColumn,\n  isJsonGroup,\n  isNotHidden,\n  metadataKeys,\n  RowSelected,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { forwardRef, memo, MouseEvent, useCallback } from \"react\";\nimport { TableCell, TableGroupCell } from \"./table-cell\";\n\nimport rowCss from \"./Row.css\";\nimport { VirtualColSpan } from \"./VirtualColSpan\";\n\nconst { IDX, IS_EXPANDED, SELECTED } = metadataKeys;\nconst classBase = \"vuuTableRow\";\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.\nexport const RowProxy = forwardRef<HTMLDivElement, { height?: number }>(\n  function RowProxy({ height }, forwardedRef) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-table-row\",\n      css: rowCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        aria-hidden\n        className={cx(classBase, `${classBase}-proxy`)}\n        ref={forwardedRef}\n        style={{ height }}\n      />\n    );\n  },\n);\n\n// export const Row = memo(\nexport const Row = memo(\n  ({\n    className: classNameProp,\n    classNameGenerator,\n    columnMap,\n    columns,\n    highlighted,\n    row,\n    offset,\n    onClick,\n    onDataEdited,\n    onToggleGroup,\n    virtualColSpan = 0,\n    zebraStripes = false,\n    ...htmlAttributes\n  }: RowProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-table-row\",\n      css: rowCss,\n      window: targetWindow,\n    });\n\n    const {\n      [IDX]: rowIndex,\n      [IS_EXPANDED]: isExpanded,\n      [SELECTED]: selectionStatus,\n    } = row;\n\n    const handleRowClick = useCallback(\n      (evt: MouseEvent<HTMLDivElement>) => {\n        const rangeSelect = evt.shiftKey;\n        const keepExistingSelection = evt.ctrlKey || evt.metaKey; /* mac only */\n        onClick?.(evt, row, rangeSelect, keepExistingSelection);\n      },\n      [onClick, row],\n    );\n\n    const { True, First, Last } = RowSelected;\n\n    const className = cx(\n      classBase,\n      classNameProp,\n      classNameGenerator?.(row, columnMap),\n      {\n        [`${classBase}-even`]: zebraStripes && rowIndex % 2 === 0,\n        [`${classBase}-expanded`]: isExpanded,\n        [`${classBase}-highlighted`]: highlighted,\n        [`${classBase}-selected`]: selectionStatus & True,\n        [`${classBase}-selectedStart`]: selectionStatus & First,\n        [`${classBase}-selectedEnd`]: selectionStatus & Last,\n      },\n    );\n\n    const style = { transform: `translate3d(0px, ${offset}px, 0px)` };\n\n    const handleGroupCellClick = useCallback(\n      (evt: MouseEvent, column: RuntimeColumnDescriptor) => {\n        if (isGroupColumn(column) || isJsonGroup(column, row, columnMap)) {\n          evt.stopPropagation();\n          onToggleGroup?.(row, column);\n        }\n      },\n      [columnMap, onToggleGroup, row],\n    );\n\n    return (\n      <div\n        {...htmlAttributes}\n        role=\"row\"\n        className={className}\n        onClick={handleRowClick}\n        style={style}\n      >\n        <span className={`${classBase}-selectionDecorator vuuStickyLeft`} />\n        <VirtualColSpan width={virtualColSpan} />\n        {columns.filter(isNotHidden).map((column) => {\n          const isGroup = isGroupColumn(column);\n          const isJsonCell = isJsonColumn(column);\n          const Cell = isGroup ? TableGroupCell : TableCell;\n\n          return (\n            <Cell\n              column={column}\n              columnMap={columnMap}\n              key={column.name}\n              onClick={isGroup || isJsonCell ? handleGroupCellClick : undefined}\n              onDataEdited={onDataEdited}\n              row={row}\n            />\n          );\n        })}\n        <span className={`${classBase}-selectionDecorator vuuStickyRight`} />\n      </div>\n    );\n  },\n);\nRow.displayName = \"Row\";\n"],"names":["metadataKeys","forwardRef","RowProxy","useWindow","useComponentCssInjection","rowCss","jsx","memo","useCallback","RowSelected","isGroupColumn","isJsonGroup","jsxs","VirtualColSpan","isNotHidden","isJsonColumn","TableGroupCell","TableCell"],"mappings":"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"}
+{"version":3,"file":"Row.js","sources":["../src/Row.tsx"],"sourcesContent":["import { RowProps, RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  isGroupColumn,\n  isJsonColumn,\n  isJsonGroup,\n  isNotHidden,\n  metadataKeys,\n  RowSelected,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { forwardRef, memo, MouseEvent, useCallback } from \"react\";\nimport { TableCell, TableGroupCell } from \"./table-cell\";\n\nimport rowCss from \"./Row.css\";\nimport { VirtualColSpan } from \"./VirtualColSpan\";\n\nconst { IDX, IS_EXPANDED, SELECTED } = metadataKeys;\nconst classBase = \"vuuTableRow\";\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.\nexport const RowProxy = forwardRef<HTMLDivElement, { height?: number }>(\n  function RowProxy({ height }, forwardedRef) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-table-row\",\n      css: rowCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        aria-hidden\n        className={cx(classBase, `${classBase}-proxy`)}\n        ref={forwardedRef}\n        style={{ height }}\n      />\n    );\n  },\n);\n\n// export const Row = memo(\nexport const Row = memo(\n  ({\n    className: classNameProp,\n    classNameGenerator,\n    columnMap,\n    columns,\n    highlighted,\n    row,\n    offset,\n    onClick,\n    onDataEdited,\n    onToggleGroup,\n    virtualColSpan = 0,\n    zebraStripes = false,\n    ...htmlAttributes\n  }: RowProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-table-row\",\n      css: rowCss,\n      window: targetWindow,\n    });\n\n    const {\n      [IDX]: rowIndex,\n      [IS_EXPANDED]: isExpanded,\n      [SELECTED]: selectionStatus,\n    } = row;\n\n    const handleRowClick = useCallback(\n      (evt: MouseEvent<HTMLDivElement>) => {\n        const rangeSelect = evt.shiftKey;\n        const keepExistingSelection = evt.ctrlKey || evt.metaKey; /* mac only */\n        onClick?.(evt, row, rangeSelect, keepExistingSelection);\n      },\n      [onClick, row],\n    );\n\n    const { True, First, Last } = RowSelected;\n\n    const className = cx(\n      classBase,\n      classNameProp,\n      classNameGenerator?.(row, columnMap),\n      {\n        [`${classBase}-even`]: zebraStripes && rowIndex % 2 === 0,\n        [`${classBase}-expanded`]: isExpanded,\n        [`${classBase}-highlighted`]: highlighted,\n        [`${classBase}-selected`]: selectionStatus & True,\n        [`${classBase}-selectedStart`]: selectionStatus & First,\n        [`${classBase}-selectedEnd`]: selectionStatus & Last,\n      },\n    );\n\n    // const style = { transform: `translate3d(0px, ${offset}px, 0px)` };\n    const style = { top: offset };\n\n    const handleGroupCellClick = useCallback(\n      (evt: MouseEvent, column: RuntimeColumnDescriptor) => {\n        if (isGroupColumn(column) || isJsonGroup(column, row, columnMap)) {\n          evt.stopPropagation();\n          onToggleGroup?.(row, column);\n        }\n      },\n      [columnMap, onToggleGroup, row],\n    );\n\n    return (\n      <div\n        {...htmlAttributes}\n        role=\"row\"\n        className={className}\n        onClick={handleRowClick}\n        style={style}\n      >\n        <span className={`${classBase}-selectionDecorator vuuStickyLeft`} />\n        <VirtualColSpan width={virtualColSpan} />\n        {columns.filter(isNotHidden).map((column) => {\n          const isGroup = isGroupColumn(column);\n          const isJsonCell = isJsonColumn(column);\n          const Cell = isGroup ? TableGroupCell : TableCell;\n\n          return (\n            <Cell\n              column={column}\n              columnMap={columnMap}\n              key={column.name}\n              onClick={isGroup || isJsonCell ? handleGroupCellClick : undefined}\n              onDataEdited={onDataEdited}\n              row={row}\n            />\n          );\n        })}\n        <span className={`${classBase}-selectionDecorator vuuStickyRight`} />\n      </div>\n    );\n  },\n);\nRow.displayName = \"Row\";\n"],"names":["metadataKeys","forwardRef","RowProxy","useWindow","useComponentCssInjection","rowCss","jsx","memo","useCallback","RowSelected","isGroupColumn","isJsonGroup","jsxs","VirtualColSpan","isNotHidden","isJsonColumn","TableGroupCell","TableCell"],"mappings":"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"}

package/cjs/Table.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tableCss = ".vuuTable {\n  --vuu-table-cell-outlineWidth: 1px;\n  --table-height: var(--measured-px-height);\n  --table-width: var(--measured-px-width);\n  --vuu-table-next-selection-bookend-width: 4px;\n  --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n  --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n  --vuu-table-col-heading-height: 25px;\n  --columnResizer-color: transparent;\n  --row-height: var(\n    --row-height-prop,\n    var(--vuu-table-row-height, var(--salt-size-base))\n  );\n\n  --cell-borderColor: transparent;\n  --row-borderColor: var(--row-background);\n  --table-background: var(--salt-container-primary-background);\n\n  background: var(--table-background);\n  font-family: var(\n    --vuuTable-fontFamily,\n    var(--salt-typography-fontFamily, sans-serif)\n  );\n  font-size: var(--vuuTable-fontSize, var(--salt-text-fontSize, 12px));\n  position: relative;\n  user-select: none;\n}\n\n.vuuTable-zebra {\n  --row-background-even: var(--salt-palette-neutral-secondary-background);\n}\n\n.vuuTable-colLines {\n  --cell-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-rowLines {\n  --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n  border-bottom: none !important;\n  border-top: none !important;\n  border-left: solid 1px var(--salt-container-primary-borderColor);\n  /*  a top border */\n  /** creates a border to top od scrollbar */\n  /* box-shadow: 0px -1px 0px 0px var(--salt-container-primary-borderColor); */\n  height: var(--viewport-body-height);\n  left: 0px;\n  overflow: auto;\n  position: absolute;\n  top: var(--total-header-height);\n  width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n  width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n  height: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n  background-clip: padding-box;\n  border-radius: 10px;\n  border: 2px solid rgba(0, 0, 0, 0);\n  background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n  height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n  position: absolute;\n  width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n  background: var(--table-background);\n  height: calc(100% - var(--horizontal-scrollbar-height));\n  position: relative;\n  overflow: auto;\n  overscroll-behavior: none;\n  width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n  display: none;\n}\n\n.vuuTable-table {\n  position: absolute;\n  top: 0;\n  left: 0;\n  table-layout: fixed;\n  width: var(--content-width);\n  margin: 0;\n  border: none;\n  border-collapse: separate;\n  border-spacing: 0;\n}\n\n.vuuTable-body {\n  height: var(--content-height);\n  position: relative;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n  background-color: inherit;\n  position: sticky;\n  z-index: 1;\n}\n\n.vuuTable-col-headings {\n  background-color: var(\n    --vuuTableColHeadings-background,\n    var(--table-background)\n  );\n  padding: 0 var(--vuu-table-next-selection-bookend-width, 0);\n  position: sticky;\n  top: 0;\n  /* ensure header row sits atop everything else when scrolling down */\n  z-index: 1;\n}\n\n.vuuTable-col-headings:hover {\n  --columnResizer-height: var(--vuu-table-col-header-height);\n  --columnResizer-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-heading {\n  height: var(--vuu-table-col-heading-height);\n}\n\n.vuuTable-col-headers {\n  background-color: var(\n    --vuuTableColHeadings-background,\n    var(--vuuTableColHeadings-background)\n  );\n  border-bottom: solid 1px\n    var(\n      --vuuTableColHeaders-borderColor,\n      var(--salt-separable-secondary-borderColor)\n    );\n  color: var(--salt-content-secondary-foreground);\n  height: var(--vuu-table-col-header-height);\n  white-space: nowrap;\n\n  .vuuDraggable-spacer {\n    border-bottom: solid 1px #ccc;\n    height: var(--vuu-table-col-header-height);\n  }\n}\n\n.sizer-cell {\n  border: none !important;\n  height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n  --cell-borderColor: transparent;\n  --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n  --vuuTableHeaderCell-background: var(--salt-container-secondary-background);\n}\n.vuuDraggable-vuuTable {\n  --row-height: 25px;\n}\n";
+var tableCss = ".vuuTable {\n  --vuu-table-footer-height: 0px;\n  --vuu-table-cell-outlineWidth: 1px;\n  --table-height: var(--measured-px-height);\n  --table-width: var(--measured-px-width);\n  --vuu-table-next-selection-bookend-width: 4px;\n  --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n  --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n  --vuu-table-col-heading-height: 25px;\n  --columnResizer-color: transparent;\n  --row-height: var(\n    --row-height-prop,\n    var(--vuu-table-row-height, var(--salt-size-base))\n  );\n\n  --cell-borderColor: transparent;\n  --row-borderColor: var(--row-background);\n  --table-background: var(--salt-container-primary-background);\n\n  background: var(--table-background);\n  font-family: var(\n    --vuuTable-fontFamily,\n    var(--salt-typography-fontFamily, sans-serif)\n  );\n  font-size: var(--vuuTable-fontSize, var(--salt-text-fontSize, 12px));\n  position: relative;\n  user-select: none;\n\n  &.vuuTable-viewportRowLimit {\n    height: fit-content;\n    /*  With a viewportRowLimit, table is content sized, not container sized. */\n    .vuuTable-contentContainer {\n      height: calc(var(--measured-px-height) + var(--total-header-height));\n    }\n    .vuuTable-scrollbarContainer {\n      height: calc(\n        var(--measured-px-height) + var(--horizontal-scrollbar-height)\n      );\n    }\n    .vuuTable-scrollbarFiller {\n      height: var(--horizontal-scrollbar-height);\n    }\n  }\n\n  &.vuuTable-maxViewportRowLimit {\n    /*  With a maxVviewportRowLimit, table is content sized, not container sized. */\n    height: fit-content;\n    padding-bottom: var(--horizontal-scrollbar-height);\n\n    .vuuTable-contentContainer {\n      height: min(\n        calc(var(--measured-px-height) + var(--total-header-height)),\n        calc(var(--content-height) + var(--total-header-height))\n      );\n    }\n    .vuuTable-scrollbarContainer {\n      height: min(\n        calc(var(--measured-px-height) + var(--horizontal-scrollbar-height)),\n        calc(var(--content-height) + var(--horizontal-scrollbar-height))\n      );\n    }\n\n    .vuuTable-scrollbarFiller {\n      height: var(--horizontal-scrollbar-height);\n    }\n  }\n}\n\n.vuuTable-zebra {\n  --row-background-even: var(--salt-palette-neutral-secondary-background);\n}\n\n.vuuTable-colLines {\n  --cell-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-rowLines {\n  --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n  border-bottom: none !important;\n  border-top: none !important;\n  height: var(--viewport-body-height);\n  left: 0px;\n  overflow: auto;\n  position: absolute;\n  top: var(--total-header-height);\n  width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n  width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n  height: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n  background-clip: padding-box;\n  border-radius: 10px;\n  border: 2px solid rgba(0, 0, 0, 0);\n  background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n  height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n  position: absolute;\n  width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n  background: var(--table-background);\n  height: calc(\n    100% - var(--horizontal-scrollbar-height) - var(--vuu-table-footer-height)\n  );\n  position: relative;\n  overflow: auto;\n  overscroll-behavior: none;\n  width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n  display: none;\n}\n\n.vuuTable-table {\n  position: absolute;\n  top: 0;\n  left: 0;\n  table-layout: fixed;\n  width: var(--content-width);\n  margin: 0;\n  border: none;\n  border-collapse: separate;\n  border-spacing: 0;\n}\n\n.vuuTable-body {\n  height: var(--content-height);\n  position: relative;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n  background-color: inherit;\n  position: sticky;\n  z-index: 1;\n}\n\n.vuuTable-col-headings {\n  background-color: var(\n    --vuuTableColHeadings-background,\n    var(--table-background)\n  );\n  padding: 0 var(--vuu-table-next-selection-bookend-width, 0);\n  position: sticky;\n  top: 0;\n  /* ensure header row sits atop everything else when scrolling down */\n  z-index: 1;\n}\n\n.vuuTable-col-headings:hover {\n  --columnResizer-height: var(--vuu-table-col-header-height);\n  --columnResizer-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-heading {\n  height: var(--vuu-table-col-heading-height);\n}\n\n.vuuTable-col-headers {\n  background-color: var(\n    --vuuTableColHeadings-background,\n    var(--vuuTableColHeadings-background)\n  );\n  border-bottom: solid 1px\n    var(\n      --vuuTableColHeaders-borderColor,\n      var(--salt-separable-secondary-borderColor)\n    );\n  color: var(--salt-content-secondary-foreground);\n  height: var(--vuu-table-col-header-height);\n  white-space: nowrap;\n\n  .vuuDraggable-spacer {\n    border-bottom: solid 1px #ccc;\n    height: var(--vuu-table-col-header-height);\n  }\n}\n\n.sizer-cell {\n  border: none !important;\n  height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n  --cell-borderColor: transparent;\n  --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n  --vuuTableHeaderCell-background: var(--salt-container-secondary-background);\n}\n.vuuDraggable-vuuTable {\n  --row-height: 25px;\n}\n\n.vuuTable-pagination {\n  --vuu-table-footer-height: 32px;\n  .vuuTable-col-headings {\n    position: relative;\n  }\n\n  .vuuTable-body {\n    height: calc(var(--content-height) - var(--total-header-height));\n    position: relative;\n  }\n\n  .vuuTableRow {\n    position: relative;\n    top: auto;\n  }\n}\n\n.vuuTable-footer {\n  align-items: center;\n  display: flex;\n  height: var(--vuu-table-footer-height);\n  justify-content: flex-end;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
 
 module.exports = tableCss;
 //# sourceMappingURL=Table.css.js.map

package/cjs/Table.js

@@ -10,6 +10,7 @@ var window = require('@salt-ds/window');
 var cx = require('clsx');
 var react = require('react');
 var Row = require('./Row.js');
+var PaginationControl = require('./pagination/PaginationControl.js');
 require('./table-header/HeaderProvider.js');
 var TableHeader = require('./table-header/TableHeader.js');
 var useMeasuredHeight = require('./useMeasuredHeight.js');
@@ -20,6 +21,7 @@ const classBase = "vuuTable";
 const { IDX, RENDER_IDX } = vuuUtils.metadataKeys;
 const TableCore = ({
   Row: Row$1 = Row.Row,
+  allowCellBlockSelection,
   allowDragColumnHeader = true,
   allowDragDrop,
   availableColumns,
@@ -38,17 +40,20 @@ const TableCore = ({
   onHighlight,
   onRowClick: onRowClickProp,
   onSelect,
+  onSelectCellBlock,
   onSelectionChange,
-  renderBufferSize = 5,
+  renderBufferSize = 0,
   rowHeight,
   scrollingApiRef,
   selectionModel = "extended",
   showColumnHeaders = true,
   showColumnHeaderMenus = true,
+  showPaginationControls,
   size
 }) => {
   const id = vuuUtils.useId(idProp);
   const {
+    cellBlock,
     columnMap,
     columns,
     data,
@@ -75,6 +80,7 @@ const TableCore = ({
     viewportMeasurements,
     ...tableProps
   } = useTable.useTable({
+    allowCellBlockSelection,
     allowDragDrop,
     availableColumns,
     config,
@@ -91,11 +97,14 @@ const TableCore = ({
     onHighlight,
     onRowClick: onRowClickProp,
     onSelect,
+    onSelectCellBlock,
     onSelectionChange,
-    renderBufferSize: Math.max(5, renderBufferSize),
+    renderBufferSize,
     rowHeight,
     scrollingApiRef,
     selectionModel,
+    showColumnHeaders,
+    showPaginationControls,
     size
   });
   const contentContainerClassName = cx(`${classBase}-contentContainer`, {
@@ -103,14 +112,17 @@ const TableCore = ({
     [`${classBase}-rowLines`]: tableAttributes.rowSeparators,
     [`${classBase}-zebra`]: tableAttributes.zebraStripes
   });
+  const cssScrollbarSize = {
+    "--horizontal-scrollbar-height": `${viewportMeasurements.horizontalScrollbarHeight}px`,
+    "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`
+  };
   const cssVariables = {
+    ...cssScrollbarSize,
     "--content-height": `${viewportMeasurements.contentHeight}px`,
     "--content-width": `${viewportMeasurements.contentWidth}px`,
-    "--horizontal-scrollbar-height": `${viewportMeasurements.horizontalScrollbarHeight}px`,
     "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
     "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
     "--total-header-height": `${headerHeight}px`,
-    "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
     "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -119,7 +131,7 @@ const TableCore = ({
       menuActionHandler: handleContextMenuAction,
       menuBuilder,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        showPaginationControls !== true ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: `${classBase}-scrollbarContainer`,
@@ -127,7 +139,7 @@ const TableCore = ({
             style: cssVariables,
             children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-scrollbarContent` })
           }
-        ),
+        ) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -161,29 +173,39 @@ const TableCore = ({
                       virtualColSpan: scrollProps.virtualColSpan
                     }
                   ) : null,
-                  showColumnHeaders === false || headerHeight > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-body`, children: data.map((data2) => /* @__PURE__ */ jsxRuntime.jsx(
-                    Row$1,
-                    {
-                      "aria-rowindex": data2[0] + 1,
-                      classNameGenerator: rowClassNameGenerator,
-                      columnMap,
-                      columns: scrollProps.columnsWithinViewport,
-                      highlighted: highlightedIndex === data2[IDX],
-                      onClick: onRowClick,
-                      onDataEdited,
-                      row: data2,
-                      offset: getRowOffset(data2),
-                      onToggleGroup,
-                      virtualColSpan: scrollProps.virtualColSpan,
-                      zebraStripes: tableAttributes.zebraStripes
-                    },
-                    data2[RENDER_IDX]
-                  )) }) : null
+                  showColumnHeaders === false || headerHeight > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-body`, children: [
+                    data.map((data2) => /* @__PURE__ */ jsxRuntime.jsx(
+                      Row$1,
+                      {
+                        "aria-rowindex": data2[0] + 1,
+                        classNameGenerator: rowClassNameGenerator,
+                        columnMap,
+                        columns: scrollProps.columnsWithinViewport,
+                        highlighted: highlightedIndex === data2[IDX],
+                        onClick: onRowClick,
+                        onDataEdited,
+                        row: data2,
+                        offset: showPaginationControls ? 0 : getRowOffset(data2),
+                        onToggleGroup,
+                        virtualColSpan: scrollProps.virtualColSpan,
+                        zebraStripes: tableAttributes.zebraStripes
+                      },
+                      data2[RENDER_IDX]
+                    )),
+                    cellBlock
+                  ] }) : null
                 ]
               }
             )
           }
         ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `${classBase}-scrollbarFiller`,
+            style: cssScrollbarSize
+          }
+        ),
         draggableRow
       ]
     }
@@ -191,6 +213,7 @@ const TableCore = ({
 };
 const Table = react.forwardRef(function Table2({
   Row: Row$1,
+  allowCellBlockSelection,
   allowDragColumnHeader,
   allowDragDrop,
   availableColumns,
@@ -199,8 +222,10 @@ const Table = react.forwardRef(function Table2({
   customHeader,
   dataSource,
   disableFocus,
+  height,
   highlightedIndex,
   id,
+  maxViewportRowLimit,
   navigationStyle,
   onAvailableColumnsChange,
   onConfigChange,
@@ -209,6 +234,7 @@ const Table = react.forwardRef(function Table2({
   onHighlight,
   onRowClick,
   onSelect,
+  onSelectCellBlock,
   onSelectionChange,
   renderBufferSize,
   rowHeight: rowHeightProp,
@@ -216,7 +242,10 @@ const Table = react.forwardRef(function Table2({
   selectionModel,
   showColumnHeaders,
   showColumnHeaderMenus,
+  showPaginationControls,
   style: styleProp,
+  viewportRowLimit,
+  width,
   ...htmlAttributes
 }, forwardedRef) {
   const targetWindow = window.useWindow();
@@ -226,8 +255,10 @@ const Table = react.forwardRef(function Table2({
     window: targetWindow
   });
   const containerRef = react.useRef(null);
-  const [size, setSize] = react.useState();
+  const [size, _setSize] = react.useState();
   const { rowHeight, rowRef } = useMeasuredHeight.useMeasuredHeight({ height: rowHeightProp });
+  const { rowHeight: footerHeight, rowRef: footerRef } = useMeasuredHeight.useMeasuredHeight({});
+  const rowLimit = maxViewportRowLimit ?? viewportRowLimit;
   if (config === void 0) {
     throw Error(
       "vuu Table requires config prop. Minimum config is list of Column Descriptors"
@@ -236,23 +267,66 @@ const Table = react.forwardRef(function Table2({
   if (dataSource === void 0) {
     throw Error("vuu Table requires dataSource prop");
   }
+  if (showPaginationControls && renderBufferSize !== void 0) {
+    console.warn(
+      `Table: When pagination controls are used, renderBufferSize is ignored`
+    );
+  }
+  if (rowLimit && height && rowHeightProp) {
+    console.warn(
+      `Table: when viewportRowLimit, rowHeight and height are used in combination, height is ignored`
+    );
+    height = rowLimit * rowHeightProp;
+  } else if (rowLimit && rowHeightProp) {
+    height = rowLimit * rowHeightProp;
+  } else if (rowLimit) {
+    height = rowLimit * rowHeight;
+  }
+  const sizeRef = react.useRef();
+  const setSize = react.useCallback(
+    (size2) => {
+      if (viewportRowLimit && !rowHeight) {
+        sizeRef.current = size2;
+      } else if (size2.height !== sizeRef.current?.height || size2.width !== sizeRef.current?.width) {
+        _setSize(size2);
+      }
+    },
+    [rowHeight, viewportRowLimit]
+  );
+  react.useMemo(() => {
+    if (sizeRef.current && rowHeight) {
+      const size2 = {
+        ...sizeRef.current,
+        height: rowHeight * viewportRowLimit
+      };
+      sizeRef.current = size2;
+      _setSize(size2);
+    }
+  }, [rowHeight, viewportRowLimit]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     vuuUiControls.MeasuredContainer,
     {
       ...htmlAttributes,
-      className: cx(classBase, classNameProp),
+      className: cx(classBase, classNameProp, {
+        [`${classBase}-pagination`]: showPaginationControls,
+        [`${classBase}-maxViewportRowLimit`]: maxViewportRowLimit,
+        [`${classBase}-viewportRowLimit`]: viewportRowLimit
+      }),
+      height,
       id,
       onResize: setSize,
       ref: core.useForkRef(containerRef, forwardedRef),
       style: {
         "--row-height-prop": rowHeight > 0 ? `${rowHeight}px` : void 0
       },
+      width,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Row.RowProxy, { ref: rowRef, height: rowHeightProp }),
-        size && rowHeight ? /* @__PURE__ */ jsxRuntime.jsx(
+        size && rowHeight && (footerHeight || showPaginationControls !== true) ? /* @__PURE__ */ jsxRuntime.jsx(
           TableCore,
           {
             Row: Row$1,
+            allowCellBlockSelection,
             allowDragColumnHeader,
             allowDragDrop,
             availableColumns,
@@ -271,16 +345,19 @@ const Table = react.forwardRef(function Table2({
             onHighlight,
             onRowClick,
             onSelect,
+            onSelectCellBlock,
             onSelectionChange,
-            renderBufferSize,
+            renderBufferSize: showPaginationControls ? 0 : Math.max(5, renderBufferSize ?? 0),
             rowHeight,
             scrollingApiRef,
             selectionModel,
             showColumnHeaders,
             showColumnHeaderMenus,
-            size
+            showPaginationControls,
+            size: vuuUiControls.reduceSizeHeight(size, footerHeight)
           }
-        ) : null
+        ) : null,
+        showPaginationControls ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-footer`, ref: footerRef, children: /* @__PURE__ */ jsxRuntime.jsx(PaginationControl.PaginationControl, { dataSource }) }) : null
       ]
     }
   );

package/cjs/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/Table.tsx"],"sourcesContent":["import {\n  DataSource,\n  SchemaColumn,\n  SelectionChangeHandler,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-popups\";\nimport {\n  CustomHeader,\n  RowProps,\n  TableConfig,\n  TableConfigChangeHandler,\n  TableRowClickHandler,\n  TableRowSelectHandler,\n  TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { DragDropState } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  DragStartHandler,\n  MeasuredContainer,\n  MeasuredContainerProps,\n  MeasuredSize,\n  dragStrategy,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { metadataKeys, useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  FC,\n  ForwardedRef,\n  RefObject,\n  forwardRef,\n  useRef,\n  useState,\n} from \"react\";\nimport { Row as DefaultRow, RowProxy } from \"./Row\";\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\nconst { IDX, RENDER_IDX } = metadataKeys;\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\";\n\nexport interface TableProps\n  extends Omit<MeasuredContainerProps, \"onDragStart\" | \"onDrop\" | \"onSelect\"> {\n  Row?: FC<RowProps>;\n  allowConfigEditing?: boolean;\n  /**\n   * Allow column headers to be dragged to re-arrange\n   */\n  allowDragColumnHeader?: boolean;\n  /**\n   * Allow rows to be draggable\n   */\n  allowDragDrop?: boolean | dragStrategy;\n  /**\n   * required if a fully featured column picker is to be available\n   */\n  availableColumns?: SchemaColumn[];\n  /**\n   * Provide configuration settings for Table. At minimun, column\n   * descriptors must be provided.\n   */\n  config: TableConfig;\n  dataSource: DataSource;\n  disableFocus?: boolean;\n  /**\n   * Allows additional custom element(s) to be embedded immediately below column headers.\n   * Could be used to present inline filters for example.\n   * Accepts either a React Element or a Function Component or an array of these. If a React\n   * Function Component is used, it will be passed the props described in BaseRowProps.\n   */\n  customHeader?: CustomHeader | CustomHeader[];\n  /**\n   * Defined how focus navigation within data cells will be handled by table.\n   * Default is cell.\n   */\n  highlightedIndex?: number;\n  navigationStyle?: TableNavigationStyle;\n  /**\n   * required if a fully featured column picker is to be available.\n   * Available columns can be changed by the addition or removal of\n   * one or more calculated columns.\n   */\n  onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n  /**\n   * This callback will be invoked any time a config attribute of TableConfig\n   * is changed. By persisting this value and providing it to the Table as a\n   * prop, table state can be persisted across sessions.\n   */\n  onConfigChange?: TableConfigChangeHandler;\n  onDragStart?: DragStartHandler;\n  onDrop?: (dragDropState: DragDropState) => void;\n\n  onHighlight?: (idx: number) => void;\n  /**\n   * callback invoked when user 'clicks' a table row. CLick triggered either\n   * via mouse click or keyboard (default ENTER);\n   */\n  onRowClick?: TableRowClickHandler;\n  onSelect?: TableRowSelectHandler;\n  onSelectionChange?: SelectionChangeHandler;\n  renderBufferSize?: number;\n  /**\n   * Pixel height of rows. If specified here, this will take precedence over CSS\n   * values and Table will not respond to density changes.\n   */\n  rowHeight?: number;\n  /**\n   * imperative API for scrolling table\n   */\n  scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n\n  /**\n   * Selection Bookends style the left and right edge of a selection block.\n   * They are optional, value defaults to zero.\n   * TODO this should just live in CSS\n   */\n  selectionBookendWidth?: number;\n  /**\n   * Selection behaviour for Table:\n   * `none` selection disabled\n   * `single` no more than one row may be selected\n   * `extended` (default) multiple rows can be selected\n   * `checkbox` same behaviour as extended, with checkbox column for selection\n   */\n  selectionModel?: TableSelectionModel;\n  /**\n   * if false, table rendered without headers. Useful when table is being included in a\n   * composite component.\n   */\n  showColumnHeaders?: boolean;\n  /**\n   * if false, column headers will not display menu icon. Menu items are still available\n   * from contexct menu\n   */\n  showColumnHeaderMenus?: boolean;\n}\n\nconst TableCore = ({\n  Row = DefaultRow,\n  allowDragColumnHeader = true,\n  allowDragDrop,\n  availableColumns,\n  config,\n  containerRef,\n  customHeader,\n  dataSource,\n  disableFocus = false,\n  highlightedIndex: highlightedIndexProp,\n  id: idProp,\n  navigationStyle = \"cell\",\n  onAvailableColumnsChange,\n  onConfigChange,\n  onDragStart,\n  onDrop,\n  onHighlight,\n  onRowClick: onRowClickProp,\n  onSelect,\n  onSelectionChange,\n  renderBufferSize = 5,\n  rowHeight,\n  scrollingApiRef,\n  selectionModel = \"extended\",\n  showColumnHeaders = true,\n  showColumnHeaderMenus = true,\n  size,\n}: Omit<TableProps, \"rowHeight\"> & {\n  containerRef: RefObject<HTMLDivElement>;\n  rowHeight: number;\n  size: MeasuredSize;\n}) => {\n  const id = useId(idProp);\n  const {\n    columnMap,\n    columns,\n    data,\n    draggableRow,\n    getRowOffset,\n    handleContextMenuAction,\n    headerHeight,\n    headings,\n    highlightedIndex,\n    menuBuilder,\n    onDataEdited,\n    onHeaderHeightMeasured,\n    onMoveColumn,\n    onMoveGroupColumn,\n    onRemoveGroupColumn,\n    onResizeColumn,\n    onRowClick,\n    onSortColumn,\n    onToggleGroup,\n    rowClassNameGenerator,\n    scrollProps,\n    tableAttributes,\n    tableConfig,\n    viewportMeasurements,\n    ...tableProps\n  } = useTable({\n    allowDragDrop,\n    availableColumns,\n    config,\n    containerRef,\n    dataSource,\n    disableFocus,\n    highlightedIndex: highlightedIndexProp,\n    id,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick: onRowClickProp,\n    onSelect,\n    onSelectionChange,\n    renderBufferSize: Math.max(5, renderBufferSize),\n    rowHeight,\n    scrollingApiRef,\n    selectionModel,\n    size,\n  });\n\n  const contentContainerClassName = cx(`${classBase}-contentContainer`, {\n    [`${classBase}-colLines`]: tableAttributes.columnSeparators,\n    [`${classBase}-rowLines`]: tableAttributes.rowSeparators,\n    [`${classBase}-zebra`]: tableAttributes.zebraStripes,\n  });\n\n  const cssVariables = {\n    \"--content-height\": `${viewportMeasurements.contentHeight}px`,\n    \"--content-width\": `${viewportMeasurements.contentWidth}px`,\n    \"--horizontal-scrollbar-height\": `${viewportMeasurements.horizontalScrollbarHeight}px`,\n    \"--pinned-width-left\": `${viewportMeasurements.pinnedWidthLeft}px`,\n    \"--pinned-width-right\": `${viewportMeasurements.pinnedWidthRight}px`,\n    \"--total-header-height\": `${headerHeight}px`,\n    \"--vertical-scrollbar-width\": `${viewportMeasurements.verticalScrollbarWidth}px`,\n    \"--viewport-body-height\": `${viewportMeasurements.viewportBodyHeight}px`,\n  } as CSSProperties;\n\n  return (\n    <ContextMenuProvider\n      menuActionHandler={handleContextMenuAction}\n      menuBuilder={menuBuilder}\n    >\n      <div\n        className={`${classBase}-scrollbarContainer`}\n        ref={scrollProps.scrollbarContainerRef}\n        style={cssVariables}\n      >\n        <div className={`${classBase}-scrollbarContent`} />\n      </div>\n      <div\n        className={contentContainerClassName}\n        ref={scrollProps.contentContainerRef}\n        style={cssVariables}\n      >\n        <div\n          {...tableProps}\n          className={`${classBase}-table`}\n          role=\"table\"\n          tabIndex={disableFocus ? undefined : -1}\n        >\n          {showColumnHeaders ? (\n            <TableHeader\n              allowDragColumnHeader={allowDragColumnHeader}\n              columns={scrollProps.columnsWithinViewport}\n              customHeader={customHeader}\n              headings={headings}\n              onHeightMeasured={onHeaderHeightMeasured}\n              onMoveColumn={onMoveColumn}\n              onMoveGroupColumn={onMoveGroupColumn}\n              onRemoveGroupColumn={onRemoveGroupColumn}\n              onResizeColumn={onResizeColumn}\n              onSortColumn={onSortColumn}\n              showColumnHeaderMenus={showColumnHeaderMenus}\n              tableConfig={tableConfig}\n              tableId={id}\n              virtualColSpan={scrollProps.virtualColSpan}\n            />\n          ) : null}\n          {showColumnHeaders === false || headerHeight > 0 ? (\n            <div className={`${classBase}-body`}>\n              {data.map((data) => (\n                <Row\n                  aria-rowindex={data[0] + 1}\n                  classNameGenerator={rowClassNameGenerator}\n                  columnMap={columnMap}\n                  columns={scrollProps.columnsWithinViewport}\n                  highlighted={highlightedIndex === data[IDX]}\n                  key={data[RENDER_IDX]}\n                  onClick={onRowClick}\n                  onDataEdited={onDataEdited}\n                  row={data}\n                  offset={getRowOffset(data)}\n                  onToggleGroup={onToggleGroup}\n                  virtualColSpan={scrollProps.virtualColSpan}\n                  zebraStripes={tableAttributes.zebraStripes}\n                />\n              ))}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      {draggableRow}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Table = forwardRef(function Table(\n  {\n    Row,\n    allowDragColumnHeader,\n    allowDragDrop,\n    availableColumns,\n    className: classNameProp,\n    config,\n    customHeader,\n    dataSource,\n    disableFocus,\n    highlightedIndex,\n    id,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick,\n    onSelect,\n    onSelectionChange,\n    renderBufferSize,\n    rowHeight: rowHeightProp,\n    scrollingApiRef,\n    selectionModel,\n    showColumnHeaders,\n    showColumnHeaderMenus,\n    style: styleProp,\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 { rowHeight, rowRef } = useMeasuredHeight({ height: rowHeightProp });\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  // 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      id={id}\n      onResize={setSize}\n      ref={useForkRef(containerRef, forwardedRef)}\n      style={\n        {\n          \"--row-height-prop\": rowHeight > 0 ? `${rowHeight}px` : undefined,\n        } as CSSProperties\n      }\n    >\n      <RowProxy ref={rowRef} height={rowHeightProp} />\n\n      {size && rowHeight ? (\n        <TableCore\n          Row={Row}\n          allowDragColumnHeader={allowDragColumnHeader}\n          allowDragDrop={allowDragDrop}\n          availableColumns={availableColumns}\n          config={config}\n          containerRef={containerRef}\n          customHeader={customHeader}\n          dataSource={dataSource}\n          disableFocus={disableFocus}\n          highlightedIndex={highlightedIndex}\n          id={id}\n          navigationStyle={navigationStyle}\n          onAvailableColumnsChange={onAvailableColumnsChange}\n          onConfigChange={onConfigChange}\n          onDragStart={onDragStart}\n          onDrop={onDrop}\n          onHighlight={onHighlight}\n          onRowClick={onRowClick}\n          onSelect={onSelect}\n          onSelectionChange={onSelectionChange}\n          renderBufferSize={renderBufferSize}\n          rowHeight={rowHeight}\n          scrollingApiRef={scrollingApiRef}\n          selectionModel={selectionModel}\n          showColumnHeaders={showColumnHeaders}\n          showColumnHeaderMenus={showColumnHeaderMenus}\n          size={size}\n        />\n      ) : null}\n    </MeasuredContainer>\n  );\n});\n"],"names":["metadataKeys","Row","DefaultRow","useId","useTable","jsxs","ContextMenuProvider","jsx","TableHeader","data","forwardRef","Table","useWindow","useComponentCssInjection","tableCss","useRef","useState","useMeasuredHeight","MeasuredContainer","useForkRef","RowProxy"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../src/Table.tsx"],"sourcesContent":["import {\n  DataSource,\n  SchemaColumn,\n  SelectionChangeHandler,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-popups\";\nimport {\n  CustomHeader,\n  RowProps,\n  TableConfig,\n  TableConfigChangeHandler,\n  TableRowClickHandler,\n  TableRowSelectHandler,\n  TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { DragDropState } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  DragStartHandler,\n  MeasuredContainer,\n  MeasuredContainerProps,\n  MeasuredSize,\n  dragStrategy,\n  reduceSizeHeight,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { metadataKeys, useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  FC,\n  ForwardedRef,\n  RefObject,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Row as DefaultRow, RowProxy } from \"./Row\";\nimport { PaginationControl } from \"./pagination\";\nimport { TableHeader } from \"./table-header\";\nimport { useMeasuredHeight } from \"./useMeasuredHeight\";\nimport { useTable } from \"./useTable\";\nimport { ScrollingAPI } from \"./useTableScroll\";\n\nimport tableCss from \"./Table.css\";\nimport { TableCellBlock } from \"./cell-block/cellblock-utils\";\n\nconst classBase = \"vuuTable\";\n\nconst { IDX, RENDER_IDX } = metadataKeys;\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\";\n\nexport interface TableProps\n  extends Omit<MeasuredContainerProps, \"onDragStart\" | \"onDrop\" | \"onSelect\"> {\n  Row?: FC<RowProps>;\n  /**\n   * Allow a block of cells to be selected. Typically to be copied.\n   */\n  allowCellBlockSelection?: boolean;\n  allowConfigEditing?: boolean;\n  /**\n   * Allow column headers to be dragged to re-arrange\n   */\n  allowDragColumnHeader?: boolean;\n  /**\n   * Allow rows to be draggable\n   */\n  allowDragDrop?: boolean | dragStrategy;\n\n  /**\n   * required if a fully featured column picker is to be available\n   */\n  availableColumns?: SchemaColumn[];\n  /**\n   * Provide configuration settings for Table. At minimun, column\n   * descriptors must be provided.\n   */\n  config: TableConfig;\n  dataSource: DataSource;\n  disableFocus?: boolean;\n  /**\n   * Allows additional custom element(s) to be embedded immediately below column headers.\n   * Could be used to present inline filters for example.\n   * Accepts either a React Element or a Function Component or an array of these. If a React\n   * Function Component is used, it will be passed the props described in BaseRowProps.\n   */\n  customHeader?: CustomHeader | CustomHeader[];\n  /**\n   * Defined how focus navigation within data cells will be handled by table.\n   * Default is cell.\n   */\n  highlightedIndex?: number;\n\n  /**\n   * Behaves in most respects like viewportRowLimit except that, when there are fewer\n   * rows available than the limit set here, the Table height will reduce. This can be\n   * useful where a Table is used in a dropdown control.\n   */\n  maxViewportRowLimit?: number;\n\n  navigationStyle?: TableNavigationStyle;\n  /**\n   * required if a fully featured column picker is to be available.\n   * Available columns can be changed by the addition or removal of\n   * one or more calculated columns.\n   */\n  onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n  /**\n   * This callback will be invoked any time a config attribute of TableConfig\n   * is changed. By persisting this value and providing it to the Table as a\n   * prop, table state can be persisted across sessions.\n   */\n  onConfigChange?: TableConfigChangeHandler;\n  onDragStart?: DragStartHandler;\n  onDrop?: (dragDropState: DragDropState) => void;\n\n  onHighlight?: (idx: number) => void;\n  /**\n   * callback invoked when user 'clicks' a table row. CLick triggered either\n   * via mouse click or keyboard (default ENTER);\n   */\n  onRowClick?: TableRowClickHandler;\n  onSelect?: TableRowSelectHandler;\n  /**\n   * Triggered when a block of cells is selected. CellBlock selection can be\n   * effected with either mouse or keyboard.\n   * - mouse: hold down mouse and drag over selection area\n   * - keyboard: press and hold shift key from start cell, then use arrow keys\n   *   to extend selection block.\n   *\n   * This callback is invoked when mouse is released or shift key released.\n   */\n  onSelectCellBlock?: (cellBlock: TableCellBlock) => void;\n\n  onSelectionChange?: SelectionChangeHandler;\n  renderBufferSize?: number;\n  /**\n   * Pixel height of rows. If specified here, this will take precedence over CSS\n   * values and Table will not respond to density changes.\n   */\n  rowHeight?: number;\n  /**\n   * imperative API for scrolling table\n   */\n  scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n\n  /**\n   * Selection Bookends style the left and right edge of a selection block.\n   * They are optional, value defaults to zero.\n   * TODO this should just live in CSS\n   */\n  selectionBookendWidth?: number;\n  /**\n   * Selection behaviour for Table:\n   * `none` selection disabled\n   * `single` no more than one row may be selected\n   * `extended` (default) multiple rows can be selected\n   * `checkbox` same behaviour as extended, with checkbox column for selection\n   */\n  selectionModel?: TableSelectionModel;\n  /**\n   * if false, table rendered without headers. Useful when table is being included in a\n   * composite component.\n   */\n  showColumnHeaders?: boolean;\n  /**\n   * if false, column headers will not display menu icon. Menu items are still available\n   * from contexct menu\n   */\n  showColumnHeaderMenus?: boolean;\n  /**\n   * if true, pagination will be used to navigate data, scrollbars will not be rendered\n   */\n  showPaginationControls?: boolean;\n\n  /**\n   * As an alternative to sizing the Table height via CSS or via an explicit height value,\n   * specify the number of rows to be displayed within the Viewport. The actual height\n   * will then be the product of  viewportRowLimit and rowHeight. Row Height will be\n   * determined in the usual way, it can be specified explicitly in a prop or set via\n   * CSS. If both explicit height and viewportRowLimit are provided by props, rowHeight\n   * will be derived from these. Do not pass props for all three values - height,\n   * rowHeight and viewportRowLimit. That will be rejected.\n   * Use maxViewportRowLimit rather than viewportRowLimit if the height of the table\n   * should be reduced when fewer rows are actually available than the limit specified.\n   */\n  viewportRowLimit?: number;\n}\n\nconst TableCore = ({\n  Row = DefaultRow,\n  allowCellBlockSelection,\n  allowDragColumnHeader = true,\n  allowDragDrop,\n  availableColumns,\n  config,\n  containerRef,\n  customHeader,\n  dataSource,\n  disableFocus = false,\n  highlightedIndex: highlightedIndexProp,\n  id: idProp,\n  navigationStyle = \"cell\",\n  onAvailableColumnsChange,\n  onConfigChange,\n  onDragStart,\n  onDrop,\n  onHighlight,\n  onRowClick: onRowClickProp,\n  onSelect,\n  onSelectCellBlock,\n  onSelectionChange,\n  renderBufferSize = 0,\n  rowHeight,\n  scrollingApiRef,\n  selectionModel = \"extended\",\n  showColumnHeaders = true,\n  showColumnHeaderMenus = true,\n  showPaginationControls,\n  size,\n}: Omit<\n  TableProps,\n  \"maxViewportRowLimit\" | \"rowHeight\" | \"viewportRowLimit\"\n> & {\n  containerRef: RefObject<HTMLDivElement>;\n  rowHeight: number;\n  size: MeasuredSize;\n}) => {\n  const id = useId(idProp);\n  const {\n    cellBlock,\n    columnMap,\n    columns,\n    data,\n    draggableRow,\n    getRowOffset,\n    handleContextMenuAction,\n    headerHeight,\n    headings,\n    highlightedIndex,\n    menuBuilder,\n    onDataEdited,\n    onHeaderHeightMeasured,\n    onMoveColumn,\n    onMoveGroupColumn,\n    onRemoveGroupColumn,\n    onResizeColumn,\n    onRowClick,\n    onSortColumn,\n    onToggleGroup,\n    rowClassNameGenerator,\n    scrollProps,\n    tableAttributes,\n    tableConfig,\n    viewportMeasurements,\n    ...tableProps\n  } = useTable({\n    allowCellBlockSelection,\n    allowDragDrop,\n    availableColumns,\n    config,\n    containerRef,\n    dataSource,\n    disableFocus,\n    highlightedIndex: highlightedIndexProp,\n    id,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick: onRowClickProp,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    rowHeight,\n    scrollingApiRef,\n    selectionModel,\n    showColumnHeaders,\n    showPaginationControls,\n    size,\n  });\n\n  const contentContainerClassName = cx(`${classBase}-contentContainer`, {\n    [`${classBase}-colLines`]: tableAttributes.columnSeparators,\n    [`${classBase}-rowLines`]: tableAttributes.rowSeparators,\n    [`${classBase}-zebra`]: tableAttributes.zebraStripes,\n  });\n\n  const cssScrollbarSize = {\n    \"--horizontal-scrollbar-height\": `${viewportMeasurements.horizontalScrollbarHeight}px`,\n    \"--vertical-scrollbar-width\": `${viewportMeasurements.verticalScrollbarWidth}px`,\n  } as CSSProperties;\n\n  const cssVariables = {\n    ...cssScrollbarSize,\n    \"--content-height\": `${viewportMeasurements.contentHeight}px`,\n    \"--content-width\": `${viewportMeasurements.contentWidth}px`,\n    \"--pinned-width-left\": `${viewportMeasurements.pinnedWidthLeft}px`,\n    \"--pinned-width-right\": `${viewportMeasurements.pinnedWidthRight}px`,\n    \"--total-header-height\": `${headerHeight}px`,\n    \"--viewport-body-height\": `${viewportMeasurements.viewportBodyHeight}px`,\n  } as CSSProperties;\n\n  return (\n    <ContextMenuProvider\n      menuActionHandler={handleContextMenuAction}\n      menuBuilder={menuBuilder}\n    >\n      {showPaginationControls !== true ? (\n        <div\n          className={`${classBase}-scrollbarContainer`}\n          ref={scrollProps.scrollbarContainerRef}\n          style={cssVariables}\n        >\n          <div className={`${classBase}-scrollbarContent`} />\n        </div>\n      ) : null}\n      <div\n        className={contentContainerClassName}\n        ref={scrollProps.contentContainerRef}\n        style={cssVariables}\n      >\n        <div\n          {...tableProps}\n          className={`${classBase}-table`}\n          role=\"table\"\n          tabIndex={disableFocus ? undefined : -1}\n        >\n          {showColumnHeaders ? (\n            <TableHeader\n              allowDragColumnHeader={allowDragColumnHeader}\n              columns={scrollProps.columnsWithinViewport}\n              customHeader={customHeader}\n              headings={headings}\n              onHeightMeasured={onHeaderHeightMeasured}\n              onMoveColumn={onMoveColumn}\n              onMoveGroupColumn={onMoveGroupColumn}\n              onRemoveGroupColumn={onRemoveGroupColumn}\n              onResizeColumn={onResizeColumn}\n              onSortColumn={onSortColumn}\n              showColumnHeaderMenus={showColumnHeaderMenus}\n              tableConfig={tableConfig}\n              tableId={id}\n              virtualColSpan={scrollProps.virtualColSpan}\n            />\n          ) : null}\n          {showColumnHeaders === false || headerHeight > 0 ? (\n            <div className={`${classBase}-body`}>\n              {data.map((data) => (\n                <Row\n                  aria-rowindex={data[0] + 1}\n                  classNameGenerator={rowClassNameGenerator}\n                  columnMap={columnMap}\n                  columns={scrollProps.columnsWithinViewport}\n                  highlighted={highlightedIndex === data[IDX]}\n                  key={data[RENDER_IDX]}\n                  onClick={onRowClick}\n                  onDataEdited={onDataEdited}\n                  row={data}\n                  offset={showPaginationControls ? 0 : getRowOffset(data)}\n                  onToggleGroup={onToggleGroup}\n                  virtualColSpan={scrollProps.virtualColSpan}\n                  zebraStripes={tableAttributes.zebraStripes}\n                />\n              ))}\n              {cellBlock}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      {/* \n        This keeps the heights of content container and scrollbar container aligned for\n        cases where we rely on height: fit-content. (ScrollbarContainer isn't taken into \n        account because its absolutely positioned).\n      */}\n      <div\n        className={`${classBase}-scrollbarFiller`}\n        style={cssScrollbarSize}\n      />\n      {draggableRow}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Table = forwardRef(function Table(\n  {\n    Row,\n    allowCellBlockSelection,\n    allowDragColumnHeader,\n    allowDragDrop,\n    availableColumns,\n    className: classNameProp,\n    config,\n    customHeader,\n    dataSource,\n    disableFocus,\n    height,\n    highlightedIndex,\n    id,\n    maxViewportRowLimit,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    rowHeight: rowHeightProp,\n    scrollingApiRef,\n    selectionModel,\n    showColumnHeaders,\n    showColumnHeaderMenus,\n    showPaginationControls,\n    style: styleProp,\n    viewportRowLimit,\n    width,\n    ...htmlAttributes\n  }: TableProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table\",\n    css: tableCss,\n    window: targetWindow,\n  });\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [size, _setSize] = useState<MeasuredSize>();\n  // TODO this will rerender entire table, move footer into seperate component\n  const { rowHeight, rowRef } = useMeasuredHeight({ height: rowHeightProp });\n  const { rowHeight: footerHeight, rowRef: footerRef } = useMeasuredHeight({});\n\n  const rowLimit = maxViewportRowLimit ?? viewportRowLimit;\n\n  if (config === undefined) {\n    throw Error(\n      \"vuu Table requires config prop. Minimum config is list of Column Descriptors\",\n    );\n  }\n  if (dataSource === undefined) {\n    throw Error(\"vuu Table requires dataSource prop\");\n  }\n\n  if (showPaginationControls && renderBufferSize !== undefined) {\n    console.warn(\n      `Table: When pagination controls are used, renderBufferSize is ignored`,\n    );\n  }\n\n  if (rowLimit && height && rowHeightProp) {\n    console.warn(\n      `Table: when viewportRowLimit, rowHeight and height are used in combination, height is ignored`,\n    );\n    height = rowLimit * rowHeightProp;\n  } else if (rowLimit && rowHeightProp) {\n    height = rowLimit * rowHeightProp;\n  } else if (rowLimit) {\n    height = rowLimit * rowHeight;\n  }\n\n  const sizeRef = useRef<MeasuredSize>();\n  const setSize = useCallback(\n    (size: MeasuredSize) => {\n      if (viewportRowLimit && !rowHeight) {\n        sizeRef.current = size;\n      } else if (\n        size.height !== sizeRef.current?.height ||\n        size.width !== sizeRef.current?.width\n      ) {\n        _setSize(size);\n      }\n    },\n    [rowHeight, viewportRowLimit],\n  );\n  useMemo(() => {\n    if (sizeRef.current && rowHeight) {\n      const size = {\n        ...sizeRef.current,\n        height: rowHeight * (viewportRowLimit as number),\n      };\n      sizeRef.current = size;\n      _setSize(size);\n    }\n  }, [rowHeight, viewportRowLimit]);\n\n  // TODO render TableHeader here and measure before row construction begins\n  // TODO we could have MeasuredContainer render a Provider and make size available via a context hook ?\n  return (\n    <MeasuredContainer\n      {...htmlAttributes}\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-pagination`]: showPaginationControls,\n        [`${classBase}-maxViewportRowLimit`]: maxViewportRowLimit,\n        [`${classBase}-viewportRowLimit`]: viewportRowLimit,\n      })}\n      height={height}\n      id={id}\n      onResize={setSize}\n      ref={useForkRef(containerRef, forwardedRef)}\n      style={\n        {\n          \"--row-height-prop\": rowHeight > 0 ? `${rowHeight}px` : undefined,\n        } as CSSProperties\n      }\n      width={width}\n    >\n      <RowProxy ref={rowRef} height={rowHeightProp} />\n      {size &&\n      rowHeight &&\n      (footerHeight || showPaginationControls !== true) ? (\n        <TableCore\n          Row={Row}\n          allowCellBlockSelection={allowCellBlockSelection}\n          allowDragColumnHeader={allowDragColumnHeader}\n          allowDragDrop={allowDragDrop}\n          availableColumns={availableColumns}\n          config={config}\n          containerRef={containerRef}\n          customHeader={customHeader}\n          dataSource={dataSource}\n          disableFocus={disableFocus}\n          highlightedIndex={highlightedIndex}\n          id={id}\n          navigationStyle={navigationStyle}\n          onAvailableColumnsChange={onAvailableColumnsChange}\n          onConfigChange={onConfigChange}\n          onDragStart={onDragStart}\n          onDrop={onDrop}\n          onHighlight={onHighlight}\n          onRowClick={onRowClick}\n          onSelect={onSelect}\n          onSelectCellBlock={onSelectCellBlock}\n          onSelectionChange={onSelectionChange}\n          renderBufferSize={\n            showPaginationControls ? 0 : Math.max(5, renderBufferSize ?? 0)\n          }\n          rowHeight={rowHeight}\n          scrollingApiRef={scrollingApiRef}\n          selectionModel={selectionModel}\n          showColumnHeaders={showColumnHeaders}\n          showColumnHeaderMenus={showColumnHeaderMenus}\n          showPaginationControls={showPaginationControls}\n          size={reduceSizeHeight(size, footerHeight)}\n        />\n      ) : null}\n      {showPaginationControls ? (\n        <div className={`${classBase}-footer`} ref={footerRef}>\n          <PaginationControl dataSource={dataSource} />\n        </div>\n      ) : null}\n    </MeasuredContainer>\n  );\n});\n"],"names":["metadataKeys","Row","DefaultRow","useId","useTable","jsxs","ContextMenuProvider","jsx","TableHeader","data","forwardRef","Table","useWindow","useComponentCssInjection","tableCss","useRef","useState","useMeasuredHeight","useCallback","size","useMemo","MeasuredContainer","useForkRef","RowProxy","reduceSizeHeight","PaginationControl"],"mappings":"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"}

package/cjs/cell-block/CellBlock.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var cellBlockCss = ".vuuCellBlock {\n  background-color: #00bdff;\n  opacity: 0.3;\n  border: solid blue 1px;\n  position: absolute;\n\n  bottom: anchor(--cellblock-start bottom);\n  left: anchor(--cellblock-start left);\n  right: anchor(--cellblock-start right);\n  top: anchor(--cellblock-start top);\n\n  &.cellblock-direction-n {\n    bottom: anchor(--cellblock-start bottom);\n    left: anchor(--cellblock-start left);\n    right: anchor(--cellblock-start right);\n    top: anchor(--cellblock-end top);\n  }\n\n  &.cellblock-direction-ne {\n    bottom: anchor(--cellblock-start bottom);\n    left: anchor(--cellblock-start left);\n    right: anchor(--cellblock-end right);\n    top: anchor(--cellblock-end top);\n  }\n\n  &.cellblock-direction-e {\n    bottom: anchor(--cellblock-start bottom);\n    left: anchor(--cellblock-start left);\n    right: anchor(--cellblock-end right);\n    top: anchor(--cellblock-start top);\n  }\n\n  &.cellblock-direction-se {\n    bottom: anchor(--cellblock-end bottom);\n    left: anchor(--cellblock-start left);\n    right: anchor(--cellblock-end right);\n    top: anchor(--cellblock-start top);\n  }\n\n  &.cellblock-direction-s {\n    bottom: anchor(--cellblock-end bottom);\n    left: anchor(--cellblock-start left);\n    right: anchor(--cellblock-start right);\n    top: anchor(--cellblock-start top);\n  }\n\n  &.cellblock-direction-sw {\n    bottom: anchor(--cellblock-end bottom);\n    left: anchor(--cellblock-end left);\n    right: anchor(--cellblock-start right);\n    top: anchor(--cellblock-start top);\n  }\n\n  &.cellblock-direction-w {\n    bottom: anchor(--cellblock-start bottom);\n    left: anchor(--cellblock-end left);\n    right: anchor(--cellblock-start right);\n    top: anchor(--cellblock-start top);\n  }\n\n  &.cellblock-direction-nw {\n    bottom: anchor(--cellblock-start bottom);\n    left: anchor(--cellblock-end left);\n    right: anchor(--cellblock-start right);\n    top: anchor(--cellblock-end top);\n  }\n}\n\n.vuu-cellblock-start {\n  anchor-name: --cellblock-start;\n}\n\n.vuuTable.vuu-cellblock-select-in-progress {\n  .vuuTableCell:hover {\n    anchor-name: --cellblock-end;\n  }\n\n  .vuuCellBlock {\n    pointer-events: none;\n  }\n}\n.vuu-cellblock-end {\n  anchor-name: --cellblock-end;\n}\n";
+
+module.exports = cellBlockCss;
+//# sourceMappingURL=CellBlock.css.js.map

package/cjs/cell-block/CellBlock.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellBlock.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/cell-block/CellBlock.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var CellBlock$1 = require('./CellBlock.css.js');
+
+const classBase = "vuuCellBlock";
+const CellBlock = react.forwardRef(
+  function CellBlock2({ className, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "vuu-cell-block",
+      css: CellBlock$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...htmlAttributes,
+        className: cx(classBase, className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+
+exports.CellBlock = CellBlock;
+//# sourceMappingURL=CellBlock.js.map

package/cjs/cell-block/CellBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellBlock.js","sources":["../../src/cell-block/CellBlock.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cellBlockCss from \"./CellBlock.css\";\n\nconst classBase = \"vuuCellBlock\";\n\nexport interface CellBlockProps extends HTMLAttributes<HTMLDivElement> {\n  debugName?: string;\n}\n\nexport const CellBlock = forwardRef<HTMLDivElement, CellBlockProps>(\n  function CellBlock({ className, ...htmlAttributes }, forwardedRef) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-cell-block\",\n      css: cellBlockCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className)}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","CellBlock","useWindow","useComponentCssInjection","cellBlockCss","jsx"],"mappings":";;;;;;;;;AAOA,MAAM,SAAY,GAAA,cAAA,CAAA;AAMX,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,EAAE,WAAW,GAAG,cAAA,IAAkB,YAAc,EAAA;AACjE,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,QAClC,GAAK,EAAA,YAAA;AAAA,OAAA;AAAA,KACP,CAAA;AAAA,GAEJ;AACF;;;;"}

package/cjs/cell-block/cellblock-utils.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const getEndCellDirection = (startBox, endBox) => {
+  const { bottom: sBottom, left: sLeft, right: sRight, top: sTop } = startBox;
+  const { bottom: eBottom, left: eLeft, right: eRight, top: eTop } = endBox;
+  const north = eTop < sTop;
+  const east = eRight > sRight;
+  const south = eBottom > sBottom;
+  const west = eLeft < sLeft;
+  if (north && east) return "ne";
+  else if (south && east) return "se";
+  else if (south && west) return "sw";
+  else if (north && west) return "nw";
+  else if (north) return "n";
+  else if (east) return "e";
+  else if (south) return "s";
+  else if (west) return "w";
+  else return "self";
+};
+const setElementBox = (el, box) => {
+  const { bottom, left, right, top } = el.getBoundingClientRect();
+  box.bottom = bottom;
+  box.left = left;
+  box.right = right;
+  box.top = top;
+};
+const outsideBox = ({ bottom, left, right, top }, x, y) => x < left || x > right || y < top || y > bottom;
+const getColIndex = ({ ariaColIndex }) => {
+  if (ariaColIndex !== null) {
+    return parseInt(ariaColIndex);
+  }
+  throw Error("invalid aria-colindex in table cell");
+};
+const getRowIndex = (cell) => {
+  const row = vuuUtils.queryClosest(cell, ".vuuTableRow");
+  if (row) {
+    const { ariaRowIndex } = row;
+    if (ariaRowIndex !== null) {
+      return parseInt(ariaRowIndex);
+    }
+  }
+  throw Error("invalid aria-rowindex in table row");
+};
+const getTableCellBlock = (startCell, endCell) => {
+  const colStart = getColIndex(startCell);
+  const colEnd = getColIndex(endCell);
+  const rowStart = getRowIndex(startCell);
+  const rowEnd = getRowIndex(endCell);
+  const columnRange = {
+    from: Math.min(colStart, colEnd),
+    to: Math.max(colStart, colEnd)
+  };
+  const rowRange = {
+    from: Math.min(rowStart, rowEnd),
+    to: Math.max(rowStart, rowEnd)
+  };
+  return {
+    columnRange,
+    rowRange
+  };
+};
+
+exports.getEndCellDirection = getEndCellDirection;
+exports.getTableCellBlock = getTableCellBlock;
+exports.outsideBox = outsideBox;
+exports.setElementBox = setElementBox;
+//# sourceMappingURL=cellblock-utils.js.map