@vuu-ui/vuu-table 2.1.18 → 2.1.19-beta.2

package/cjs/Row.js

@@ -1,116 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var cx = require('clsx');
-var react = require('react');
-var TableCell = require('./table-cell/TableCell.js');
-var TableGroupCell = require('./table-cell/TableGroupCell.js');
-var VirtualColSpan = require('./VirtualColSpan.js');
-
-const classBase = "vuuTableRow";
-const Row = react.memo(
-  ({
-    className: classNameProp,
-    classNameGenerator,
-    columns,
-    dataRow,
-    groupToggleTarget = "group-column",
-    highlighted,
-    offset,
-    onCellEdit,
-    onClick,
-    onDataEdited,
-    onToggleGroup,
-    searchPattern,
-    showBookends = true,
-    virtualColSpan = 0,
-    zebraStripes = false,
-    ...htmlAttributes
-  }) => {
-    const {
-      childCount,
-      depth,
-      index: rowIndex,
-      isExpanded,
-      isLeaf,
-      isSelected
-    } = dataRow;
-    const handleRowClick = react.useCallback(
-      (evt) => {
-        const rangeSelect = evt.shiftKey;
-        const keepExistingSelection = evt.ctrlKey || evt.metaKey;
-        onClick?.(evt, dataRow, rangeSelect, keepExistingSelection);
-      },
-      [dataRow, onClick]
-    );
-    const className = cx(
-      classBase,
-      classNameProp,
-      classNameGenerator?.(dataRow),
-      {
-        [`${classBase}-even`]: zebraStripes && rowIndex % 2 === 0,
-        [`${classBase}-highlighted`]: highlighted
-      }
-    );
-    const canExpand = isLeaf === false && childCount > 0;
-    const ariaExpanded = isExpanded ? true : canExpand ? false : void 0;
-    const ariaLevel = isLeaf && depth === 1 ? void 0 : depth;
-    const style = { top: offset };
-    const handleGroupCellClick = react.useCallback(
-      (evt, column) => {
-        if (vuuUtils.isGroupColumn(column) || vuuUtils.isJsonGroup(column, dataRow)) {
-          const toggleIconClicked = vuuUtils.queryClosest(evt.target, ".vuuToggleIconButton") !== null;
-          if (groupToggleTarget === "toggle-icon") {
-            if (!toggleIconClicked) {
-              return;
-            }
-          }
-          if (toggleIconClicked) {
-            evt.stopPropagation();
-          }
-          onToggleGroup?.(dataRow, column);
-        }
-      },
-      [dataRow, groupToggleTarget, onToggleGroup]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ...htmlAttributes,
-        "aria-expanded": ariaExpanded,
-        "aria-selected": isSelected ? "true" : void 0,
-        "aria-level": ariaLevel,
-        role: "row",
-        className,
-        onClick: handleRowClick,
-        style,
-        children: [
-          showBookends ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuSelectionDecorator vuuStickyLeft", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuTableRowBookend" }) }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(VirtualColSpan.VirtualColSpan, { width: virtualColSpan }),
-          columns.filter(vuuUtils.isNotHidden).map((column) => {
-            const isGroup = vuuUtils.isGroupColumn(column);
-            const isJsonCell = vuuUtils.isJsonColumn(column);
-            const Cell = isGroup && !isJsonCell ? TableGroupCell.TableGroupCell : TableCell.TableCell;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              Cell,
-              {
-                column,
-                dataRow,
-                onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
-                onDataEdited,
-                searchPattern
-              },
-              column.name
-            );
-          }),
-          showBookends ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuSelectionDecorator vuuStickyRight", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuTableRowBookend" }) }) : null
-        ]
-      }
-    );
-  }
-);
-Row.displayName = "Row";
-
-exports.Row = Row;
-//# sourceMappingURL=Row.js.map

package/cjs/Row.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Row.js","sources":["../../../packages/vuu-table/src/Row.tsx"],"sourcesContent":["import { RowProps, RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  isGroupColumn,\n  isJsonColumn,\n  isJsonGroup,\n  isNotHidden,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { MouseEvent, memo, useCallback } from \"react\";\nimport { TableCell, TableGroupCell } from \"./table-cell\";\n\nimport { VirtualColSpan } from \"./VirtualColSpan\";\n\nconst classBase = \"vuuTableRow\";\n\nexport const Row = memo(\n  ({\n    className: classNameProp,\n    classNameGenerator,\n    columns,\n    dataRow,\n    groupToggleTarget = \"group-column\",\n    highlighted,\n    offset,\n    onCellEdit,\n    onClick,\n    onDataEdited,\n    onToggleGroup,\n    searchPattern,\n    showBookends = true,\n    virtualColSpan = 0,\n    zebraStripes = false,\n    ...htmlAttributes\n  }: RowProps) => {\n    const {\n      childCount,\n      depth,\n      index: rowIndex,\n      isExpanded,\n      isLeaf,\n      isSelected,\n    } = dataRow;\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, dataRow, rangeSelect, keepExistingSelection);\n      },\n      [dataRow, onClick],\n    );\n\n    const className = cx(\n      classBase,\n      classNameProp,\n      classNameGenerator?.(dataRow),\n      {\n        [`${classBase}-even`]: zebraStripes && rowIndex % 2 === 0,\n        [`${classBase}-highlighted`]: highlighted,\n      },\n    );\n\n    const canExpand = isLeaf === false && childCount > 0;\n    const ariaExpanded = isExpanded ? true : canExpand ? false : undefined;\n    const ariaLevel = isLeaf && depth === 1 ? undefined : depth;\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, dataRow)) {\n          const toggleIconClicked =\n            queryClosest(evt.target, \".vuuToggleIconButton\") !== null;\n          if (groupToggleTarget === \"toggle-icon\") {\n            if (!toggleIconClicked) {\n              return;\n            }\n          }\n          if (toggleIconClicked) {\n            // prevent evt bubbling, will suppress selection hook.\n            // Clicking the toggle icon directly never triggers row selection\n            evt.stopPropagation();\n          }\n          onToggleGroup?.(dataRow, column);\n        }\n      },\n      [dataRow, groupToggleTarget, onToggleGroup],\n    );\n\n    return (\n      <div\n        {...htmlAttributes}\n        aria-expanded={ariaExpanded}\n        aria-selected={isSelected ? \"true\" : undefined}\n        aria-level={ariaLevel}\n        role=\"row\"\n        className={className}\n        onClick={handleRowClick}\n        style={style}\n      >\n        {showBookends ? (\n          <div className=\"vuuSelectionDecorator vuuStickyLeft\">\n            <div className=\"vuuTableRowBookend\" />\n          </div>\n        ) : null}\n        <VirtualColSpan width={virtualColSpan} />\n        {columns.filter(isNotHidden).map((column) => {\n          const isGroup = isGroupColumn(column);\n          const isJsonCell = isJsonColumn(column);\n          const Cell = isGroup && !isJsonCell ? TableGroupCell : TableCell;\n\n          return (\n            <Cell\n              column={column}\n              dataRow={dataRow}\n              key={column.name}\n              onClick={isGroup || isJsonCell ? handleGroupCellClick : undefined}\n              onDataEdited={onDataEdited}\n              searchPattern={searchPattern}\n            />\n          );\n        })}\n        {showBookends ? (\n          <div className=\"vuuSelectionDecorator vuuStickyRight\">\n            <div className=\"vuuTableRowBookend\" />\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\nRow.displayName = \"Row\";\n"],"names":["memo","useCallback","isGroupColumn","isJsonGroup","queryClosest","jsxs","jsx","VirtualColSpan","isNotHidden","isJsonColumn","TableGroupCell","TableCell"],"mappings":"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"}

package/cjs/Table.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var tableCss = ".vuuTable {\n  --vuu-table-cell-outlineWidth: 1px;\n  --vuu-table-col-header-row-height: var(--salt-size-base, 32px);\n  --vuu-table-col-heading-height: 25px;\n  --vuu-table-footer-height: 0px;\n  --vuu-table-row-background-selected: var(--vuuTableRow-background-selected, var(--salt-selectable-background-selected));\n  --vuu-table-row-background-highlighted: var(--vuuTableRow-background-highlighted, var(--salt-selectable-background-hover));\n  --vuu-table-row-borderColor-selected: var(--vuuTableRow-borderColor-selected, var(--salt-selectable-borderColor-selected));\n  --vuu-table-row-bookend-background-selected: var(--vuuTableRow-bookend-background-selected, var(--salt-selectable-background-selected));\n  --vuu-table-row-height: var(--salt-size-base, 32px);\n  --vuu-table-row-selection-borderRadius: var(--vuuTable-row-selection-borderRadius, 5px); \n\n  --table-background: var(--vuuTable-background, var(--salt-container-primary-background));\n  --table-height: var(--measured-px-height);\n  --table-width: var(--measured-px-width);\n\n  --columnResizer-color: transparent;\n  --row-height: var(\n    --row-height-prop,\n    var(--vuu-table-row-height, var(--salt-size-base))\n  );\n  --col-header-row-height: var(\n    --col-header-row-height-prop,\n    var(--vuu-table-col-header-row-height, var(--salt-size-base))\n  );\n\n  --cell-borderColor: transparent;\n  --row-borderColor: var(--row-background);\n  --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n\n  background: var(--table-background);\n  font-family: var(\n    --vuuTable-fontFamily,\n    var(--salt-typography-fontFamily, sans-serif)\n  );\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  .vuuTable-editing {\n    --vuu-table-row-background-highlighted: transparent;\n  }\n\n}\n\n.vuuTable-zebra {\n  --table-zebraColor: var(--vuuTable-zebraColor, var(--salt-container-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  --table-content-container-width: calc(var(--table-width) - var(--vertical-scrollbar-width));\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: var(--table-content-container-width);\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n  display: none;\n}\n\n.vuuTable-table {\n  border: none;\n  border-collapse: separate;\n  border-spacing: 0;\n  left: 0;\n  margin: 0;\n  position: absolute;\n  top: 0;\n  table-layout: fixed;\n  width: var(--content-width);\n}\n\n.vuuTable-body {\n  height: var(--content-height);\n  position: relative;\n}\n\n.vuuTable-focusCellPlaceholder {\n  height: var(--row-height);\n  position: absolute;\n  width: 50px;\n  z-index: -1;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n  background-color: inherit;\n  position: sticky;\n  z-index: 1;\n}\n\n.vuuPinRight {\n  .vuuColumnResizer {\n    cursor: default;\n    pointer-events: none;\n  }\n}\n\n.vuuTableHeaderCell.vuuPinLeft,\n.vuuTableHeaderCell.vuuPinRight {\n  z-index: 2;\n}\n\n.vuuTableHeader {\n  --row-height: var(--vuu-table-col-header-row-height);\n  background-color: var(\n    --vuuTableHeader-background,\n    var(--table-background)\n  );\n  border-bottom: solid 1px\n    var(\n      --vuuTableHeader-borderColor,\n      var(--salt-separable-tertiary-borderColor)\n    );\n  color: var(--salt-content-secondary-foreground);\n  font-size: var(--VuuTableHeader-fontSize, vasr(--salt-text-label-fontSize));\n  position: sticky;\n  top: 0;\n  white-space: nowrap;\n\n  /* ensure header row sits atop everything else when scrolling down */\n  z-index: 1;\n\n  .vuuDraggable-spacer {\n    border-bottom: solid 1px #ccc;\n    display: var(--vuuDraggable-display, inline-block);\n    height: var(--vuu-table-col-header-row-height);\n  }\n\n  .vuuStickyLeft {\n    z-index: 1;\n  }\n  .vuuStickyRight {\n    z-index: 0;\n  }\n}\n\n.vuuTableHeader:hover {\n  --columnResizer-height: var(--vuu-table-col-header-row-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.sizer-cell {\n  border: none !important;\n  height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n  --cell-borderColor: transparent;\n  --vuu-table-col-header-row-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  .vuuTableHeader {\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\n.vuuHighlight {\n  color: blue;\n}\n\n.DragColumn {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  90% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.vuuTable-emptyDisplay {\n  animation: fadeIn .8s;\n  align-items: center;\n  display: flex;\n  inset:0;\n  justify-content: center;\n  position: absolute\n}\n\n.vuuTable-emptyDisplay ~ .vuuTable-contentContainer {\n  visibility: hidden;\n}\n\n.vuuRowProxy {\n  position: absolute !important;\n  visibility: hidden;\n}\n\n.vuuTableColHeaderRow {\n  height: var(--col-header-row-height);\n}\n\n.vuuTableRow {\n  \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-primary-foreground);\n  contain: layout;\n  font-size: var(--VuuTableRow-fontSize, vasr(--salt-text-fontSize));\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-even {\n  --row-background: var(--table-zebraColor);\n}\n\n.vuuTableRow-highlighted {\n  background: var(--vuu-table-row-background-highlighted);\n}\n\n.vuuTableRow[aria-selected=\"true\"] {\n  background-color: var(--vuu-table-row-background-selected);\n}\n\n.vuuTableRow[aria-expanded=\"true\"] {\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\n.vuuSelectionDecorator {\n    background: var(--table-background);\n    display: inline-block;\n    height: var(--row-height);\n    position: relative;\n    width: var(--table-selection-bookend-width,4px);\n    z-index: 2;\n}\n\n.vuuTableRow:not([aria-selected=\"true\"]){\n    .vuuTableRowBookend {\n      display: none;\n    }\n}\n\n.vuuSelectionDecorator.vuuStickyLeft {\n  left: 0;\n  position: sticky;\n}\n\n.vuuSelectionDecorator.vuuStickyRight {\n  right: 0;\n  position: sticky;\n}\n\n    .vuuTableRowBookend {\n      position: absolute;\n      top: -1px;\n      right:0;\n      bottom:0;\n      left:0;\n    }\n\n.vuuTable-rowSelection-bordered {\n\n    .vuuSelectionDecorator  {\n\n        .vuuTableRowBookend {\n            background-color: var(--vuu-table-row-bookend-background-selected);\n            border-color: var(--vuu-table-row-borderColor-selected);\n            border-width: 1px;\n            width: var(--table-selection-bookend-width,4px);\n\n            &:before {\n                content: none !important;\n            }\n        }\n\n        &.vuuStickyLeft {\n            .vuuTableRowBookend {\n                border-left-style: solid;\n            }\n        }\n        &.vuuStickyRight {\n            .vuuTableRowBookend {\n                border-right-style: solid;\n            }\n        }\n    }\n\n    .vuuTableRow[aria-selected=\"true\"]{\n        .vuuSelectionDecorator {\n            background-color: var(--table-background);\n            border: none;\n        }\n\n    }\n\n    /* non-selected row immediately followed by a selected row */\n    .vuuTableRow:not([aria-selected=\"true\"]):has( + .vuuTableRow[aria-selected=\"true\"]) {\n        border-bottom-color: transparent;\n    }\n\n    /* first row in a selection block, including a selection block of one row */\n    .vuuTableRow:not([aria-selected=\"true\"]) + .vuuTableRow[aria-selected=\"true\"],\n    .vuuTableRow[aria-selected=\"true\"][data-first-row=\"true\"]\n    {\n        border-radius: 0;\n\n            &:after {\n              background: var(--vuu-table-row-borderColor-selected);\n              content: \"\";\n              position: absolute;\n              top: 0px;\n              left: 4px;\n              height: 1px;\n              width: calc(var(--content-width) - 8px);\n              z-index: 1;\n            }\n\n            .vuuStickyLeft .vuuTableRowBookend {\n                border-top-left-radius: var(--vuu-table-row-selection-borderRadius);\n                border-top-style: solid;\n                margin-top: 1px;\n            }\n\n            .vuuStickyRight .vuuTableRowBookend {\n                border-top-right-radius: var(--vuu-table-row-selection-borderRadius);\n                border-top-style: solid;\n                margin-top: 1px;\n            }\n\n    }\n\n    /* Last row in a selection block, including a selection block of one row */\n    .vuuTableRow[aria-selected=\"true\"]:has( + .vuuTableRow:not([aria-selected=\"true\"])) {\n        border-bottom-color: var(--vuu-table-row-borderColor-selected);\n\n            .vuuStickyLeft .vuuTableRowBookend {\n                border-bottom-left-radius: var(--vuu-table-row-selection-borderRadius);\n                border-bottom-style: solid;\n            }\n            .vuuStickyRight .vuuTableRowBookend {\n                border-bottom-right-radius: var(--vuu-table-row-selection-borderRadius);\n                border-bottom-style: solid;\n            }\n    }\n\n}";
-
-module.exports = tableCss;
-//# sourceMappingURL=Table.css.js.map

package/cjs/Table.css.js.map

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

package/cjs/Table.js

@@ -1,455 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var vuuTableExtras = require('@vuu-ui/vuu-table-extras');
-var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-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');
-var useTable = require('./useTable.js');
-var Table$1 = require('./Table.css.js');
-
-const classBase = "vuuTable";
-const RowProxy = react.forwardRef(function RowProxy2({ className = "vuuTableRow", height }, forwardedRef) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "aria-hidden": true,
-      className: cx(className, `vuuRowProxy`),
-      ref: forwardedRef,
-      style: { height }
-    }
-  );
-});
-const TableCore = ({
-  EmptyDisplay,
-  HeaderCell,
-  Row: Row$1 = Row.Row,
-  allowCellBlockSelection,
-  allowDragColumnHeader = true,
-  allowDragDrop,
-  allowSelectAll,
-  allowSelectCheckboxRow,
-  autoSelectFirstRow,
-  autoSelectRowKey,
-  // colHeaderRowHeight,
-  config,
-  containerRef,
-  customHeader,
-  dataSource,
-  disableFocus = false,
-  groupToggleTarget,
-  highlightedIndex: highlightedIndexProp,
-  id: idProp,
-  lowerCaseSearchPattern,
-  navigationStyle = "cell",
-  // onAvailableColumnsChange,
-  onConfigChange,
-  // onDataEdited: onDataEditedProp,
-  onDragStart,
-  onDrop,
-  onHighlight,
-  onRowClick: onRowClickProp,
-  onSelect,
-  onSelectCellBlock,
-  onSelectionChange,
-  renderBufferSize = 0,
-  revealSelected,
-  rowActionHandlers,
-  rowHeight,
-  scrollingApiRef,
-  selectionModel = "extended",
-  showColumnHeaders = true,
-  showColumnHeaderMenus = true,
-  showPaginationControls,
-  size
-}) => {
-  const id = vuuUtils.useId(idProp);
-  const {
-    allRowsSelected,
-    cellBlock,
-    columns,
-    dataRows,
-    draggableRow,
-    editSessionInProgress,
-    focusCellPlaceholderKeyDown,
-    focusCellPlaceholderRef,
-    getRowOffset,
-    handleColumnAction,
-    headerState: { height: headerHeight, count: headerCount },
-    headings,
-    highlightedIndex,
-    onCheckBoxColumnHeaderClick,
-    // onDataEdited,
-    onHeaderHeightMeasured,
-    onMoveColumn,
-    onMoveGroupColumn,
-    onRemoveGroupColumn,
-    onResizeColumn,
-    onRowClick,
-    onSortColumn,
-    onToggleGroup,
-    rowClassNameGenerator,
-    scrollProps,
-    tableAttributes,
-    tableBodyRef,
-    tableConfig,
-    viewportMeasurements,
-    ...tableProps
-  } = useTable.useTable({
-    allowCellBlockSelection,
-    allowDragDrop,
-    allowSelectCheckboxRow,
-    autoSelectFirstRow,
-    autoSelectRowKey,
-    config,
-    containerRef,
-    dataSource,
-    disableFocus,
-    highlightedIndex: highlightedIndexProp,
-    id,
-    navigationStyle,
-    onConfigChange,
-    // onDataEdited: onDataEditedProp,
-    onDragStart,
-    onDrop,
-    onHighlight,
-    onRowClick: onRowClickProp,
-    onSelect,
-    onSelectCellBlock,
-    onSelectionChange,
-    renderBufferSize,
-    revealSelected,
-    rowHeight,
-    scrollingApiRef,
-    selectionModel,
-    showColumnHeaders,
-    showPaginationControls,
-    size
-  });
-  const { selectionBookendWidth = 4 } = config;
-  const contentContainerClassName = cx(`${classBase}-contentContainer`, {
-    [`${classBase}-colLines`]: tableAttributes.columnSeparators,
-    [`${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`,
-    "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
-    "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
-    "--total-header-height": `${headerHeight}px`,
-    "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`,
-    "--table-selection-bookend-width": `${selectionBookendWidth}px`
-  };
-  const headersReady = showColumnHeaders === false || headerHeight > 0;
-  const readyToRenderTableBody = headersReady && dataRows.length > 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    vuuTableExtras.TableProvider,
-    {
-      dataSource,
-      menuActionHandler: handleColumnAction,
-      rowActionHandlers,
-      children: [
-        showPaginationControls !== true ? /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `${classBase}-scrollbarContainer`,
-            ref: scrollProps.scrollbarContainerRef,
-            style: cssVariables,
-            tabIndex: -1,
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-scrollbarContent` })
-          }
-        ) : null,
-        dataSource.size === 0 && EmptyDisplay ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-emptyDisplay`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(EmptyDisplay, {}),
-          " "
-        ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: contentContainerClassName,
-            ref: scrollProps.contentContainerRef,
-            style: cssVariables,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                ...tableProps,
-                className: cx(`${classBase}-table`, {
-                  [`${classBase}-editing`]: editSessionInProgress
-                }),
-                role: "table",
-                tabIndex: disableFocus ? void 0 : -1,
-                children: [
-                  showColumnHeaders ? /* @__PURE__ */ jsxRuntime.jsx(
-                    TableHeader.TableHeader,
-                    {
-                      HeaderCell,
-                      allowDragColumnHeader,
-                      allowSelectAll: allowSelectAll && selectionModel !== "checkbox-disabled",
-                      allRowsSelected,
-                      columns,
-                      customHeader,
-                      headings,
-                      onCheckBoxColumnHeaderClick,
-                      onHeightMeasured: onHeaderHeightMeasured,
-                      onMoveColumn,
-                      onMoveGroupColumn,
-                      onRemoveGroupColumn,
-                      onResizeColumn,
-                      onSortColumn,
-                      showBookends: selectionBookendWidth > 0,
-                      showColumnHeaderMenus,
-                      tableConfig,
-                      tableId: id,
-                      virtualColSpan: scrollProps.virtualColSpan
-                    }
-                  ) : null,
-                  readyToRenderTableBody ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-body`, ref: tableBodyRef, children: [
-                    dataRows.map((dataRow) => {
-                      const ariaRowIndex = dataRow.index + headerCount + 1;
-                      return /* @__PURE__ */ jsxRuntime.jsx(
-                        Row$1,
-                        {
-                          "aria-rowindex": ariaRowIndex,
-                          classNameGenerator: rowClassNameGenerator,
-                          columns: scrollProps.columnsWithinViewport,
-                          "data-first-row": dataRow.index === 0 ? "true" : void 0,
-                          dataRow,
-                          groupToggleTarget,
-                          highlighted: highlightedIndex === ariaRowIndex,
-                          onClick: onRowClick,
-                          offset: showPaginationControls ? 0 : getRowOffset(dataRow),
-                          onToggleGroup,
-                          showBookends: selectionBookendWidth > 0,
-                          searchPattern: lowerCaseSearchPattern,
-                          virtualColSpan: scrollProps.virtualColSpan,
-                          zebraStripes: tableAttributes.zebraStripes
-                        },
-                        dataRow.renderIndex
-                      );
-                    }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        "aria-hidden": true,
-                        className: `${classBase}-focusCellPlaceholder`,
-                        onKeyDown: focusCellPlaceholderKeyDown,
-                        ref: focusCellPlaceholderRef,
-                        tabIndex: -1
-                      }
-                    ),
-                    cellBlock
-                  ] }) : null
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `${classBase}-scrollbarFiller`,
-            style: cssScrollbarSize
-          }
-        ),
-        draggableRow
-      ]
-    }
-  );
-};
-const Table = react.forwardRef(function Table2({
-  EmptyDisplay,
-  HeaderCell,
-  Row,
-  allowCellBlockSelection,
-  allowDragColumnHeader,
-  allowDragDrop,
-  allowSelectAll,
-  allowSelectCheckboxRow,
-  autoSelectFirstRow,
-  autoSelectRowKey,
-  className: classNameProp,
-  config,
-  customHeader,
-  dataSource,
-  disableFocus,
-  groupToggleTarget,
-  colHeaderRowHeight: colHeaderRowHeightProp,
-  height,
-  highlightedIndex,
-  id,
-  maxViewportRowLimit,
-  navigationStyle,
-  onAvailableColumnsChange,
-  onConfigChange,
-  // onDataEdited,
-  onDragStart,
-  onDrop,
-  onHighlight,
-  onRowClick,
-  onSelect,
-  onSelectCellBlock,
-  onSelectionChange,
-  renderBufferSize,
-  revealSelected,
-  resizeStrategy,
-  rowActionHandlers,
-  rowHeight: rowHeightProp,
-  rowSelectionBorder,
-  scrollingApiRef,
-  searchPattern = "",
-  selectionModel,
-  showColumnHeaders,
-  showColumnHeaderMenus,
-  showPaginationControls,
-  style: styleProp,
-  viewportRowLimit,
-  width,
-  ...htmlAttributes
-}, forwardedRef) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "vuu-table",
-    css: Table$1,
-    window: targetWindow
-  });
-  const containerRef = react.useRef(null);
-  const [size, _setSize] = react.useState();
-  const { measuredHeight: rowHeight, measuredRef: rowRef } = useMeasuredHeight.useMeasuredHeight({
-    height: rowHeightProp
-  });
-  const { measuredHeight: footerHeight, measuredRef: 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"
-    );
-  }
-  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(void 0);
-  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, {
-        [`${classBase}-pagination`]: showPaginationControls,
-        [`${classBase}-rowSelection-bordered`]: rowSelectionBorder,
-        [`${classBase}-maxViewportRowLimit`]: maxViewportRowLimit,
-        [`${classBase}-viewportRowLimit`]: viewportRowLimit
-      }),
-      height,
-      id,
-      onResize: setSize,
-      ref: core.useForkRef(containerRef, forwardedRef),
-      resizeStrategy,
-      style: {
-        ...styleProp,
-        "--col-header-row-height-prop": typeof colHeaderRowHeightProp === "number" ? `${colHeaderRowHeightProp}px` : void 0,
-        "--row-height-prop": typeof rowHeightProp === "number" ? `${rowHeightProp}px` : void 0
-      },
-      width,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RowProxy, { ref: rowRef, height: rowHeightProp }),
-        size && rowHeight && (footerHeight || showPaginationControls !== true) ? /* @__PURE__ */ jsxRuntime.jsx(
-          TableCore,
-          {
-            EmptyDisplay,
-            HeaderCell,
-            Row,
-            allowCellBlockSelection,
-            allowDragColumnHeader,
-            allowDragDrop,
-            allowSelectAll,
-            allowSelectCheckboxRow,
-            autoSelectFirstRow,
-            autoSelectRowKey,
-            config,
-            containerRef,
-            customHeader,
-            dataSource,
-            disableFocus,
-            groupToggleTarget,
-            highlightedIndex,
-            id,
-            navigationStyle,
-            onAvailableColumnsChange,
-            onConfigChange,
-            onDragStart,
-            onDrop,
-            onHighlight,
-            onRowClick,
-            onSelect,
-            onSelectCellBlock,
-            onSelectionChange,
-            renderBufferSize: showPaginationControls ? 0 : Math.max(5, renderBufferSize ?? 0),
-            revealSelected,
-            rowActionHandlers,
-            rowHeight,
-            scrollingApiRef,
-            lowerCaseSearchPattern: vuuUtils.lowerCase(searchPattern),
-            selectionModel,
-            showColumnHeaders,
-            showColumnHeaderMenus,
-            showPaginationControls,
-            size: vuuUiControls.reduceSizeHeight(size, footerHeight)
-          }
-        ) : null,
-        showPaginationControls ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-footer`, ref: footerRef, children: /* @__PURE__ */ jsxRuntime.jsx(PaginationControl.PaginationControl, { dataSource }) }) : null
-      ]
-    }
-  );
-});
-
-exports.Table = Table;
-//# sourceMappingURL=Table.js.map