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

package/package.json

@@ -1,22 +1,22 @@
 {
-  "version": "2.1.18",
+  "version": "2.1.19-beta.2",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.18",
-    "@vuu-ui/vuu-table-types": "2.1.18",
-    "@vuu-ui/vuu-protocol-types": "2.1.18"
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.2"
   },
   "dependencies": {
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-context-menu": "2.1.18",
-    "@vuu-ui/vuu-data-react": "2.1.18",
-    "@vuu-ui/vuu-popups": "2.1.18",
-    "@vuu-ui/vuu-table-extras": "2.1.18",
-    "@vuu-ui/vuu-ui-controls": "2.1.18",
-    "@vuu-ui/vuu-utils": "2.1.18"
+    "@vuu-ui/vuu-context-menu": "2.1.19-beta.2",
+    "@vuu-ui/vuu-data-react": "2.1.19-beta.2",
+    "@vuu-ui/vuu-popups": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table-extras": "2.1.19-beta.2",
+    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.2",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -25,19 +25,16 @@
   },
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "require": "./cjs/index.js",
-      "import": "./esm/index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "module": "index.js",
   "name": "@vuu-ui/vuu-table",
   "type": "module",
   "types": "types/index.d.ts"

package/src/CellFocusState.mjs

@@ -0,0 +1,25 @@
+import { getAriaCellPos } from "./table-dom-utils.mjs";
+class CellFocusState {
+    #cellPos = void 0;
+    #el = null;
+    outsideViewport = false;
+    placeholderEl = null;
+    pos = void 0;
+    set cell(cell) {
+        this.#el = cell;
+        this.#cellPos = getAriaCellPos(cell);
+    }
+    get cellPos() {
+        return this.#cellPos;
+    }
+    set cellPos(cellPos) {
+        this.#cellPos = cellPos;
+    }
+    get el() {
+        return this.#el;
+    }
+    set el(el) {
+        this.#el = el;
+    }
+}
+export { CellFocusState };

package/src/Row.mjs

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

package/src/Table.css.js

@@ -0,0 +1,441 @@
+const css = `
+.vuuTable {
+  --vuu-table-cell-outlineWidth: 1px;
+  --vuu-table-col-header-row-height: var(--salt-size-base, 32px);
+  --vuu-table-col-heading-height: 25px;
+  --vuu-table-footer-height: 0px;
+  --vuu-table-row-background-selected: var(--vuuTableRow-background-selected, var(--salt-selectable-background-selected));
+  --vuu-table-row-background-highlighted: var(--vuuTableRow-background-highlighted, var(--salt-selectable-background-hover));
+  --vuu-table-row-borderColor-selected: var(--vuuTableRow-borderColor-selected, var(--salt-selectable-borderColor-selected));
+  --vuu-table-row-bookend-background-selected: var(--vuuTableRow-bookend-background-selected, var(--salt-selectable-background-selected));
+  --vuu-table-row-height: var(--salt-size-base, 32px);
+  --vuu-table-row-selection-borderRadius: var(--vuuTable-row-selection-borderRadius, 5px);
+  --table-background: var(--vuuTable-background, var(--salt-container-primary-background));
+  --table-height: var(--measured-px-height);
+  --table-width: var(--measured-px-width);
+  --columnResizer-color: transparent;
+  --row-height: var(--row-height-prop, var(--vuu-table-row-height, var(--salt-size-base)));
+  --col-header-row-height: var(--col-header-row-height-prop, var(--vuu-table-col-header-row-height, var(--salt-size-base)));
+  --cell-borderColor: transparent;
+  --row-borderColor: var(--row-background);
+  --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);
+  background: var(--table-background);
+  font-family: var(--vuuTable-fontFamily, var(--salt-typography-fontFamily, sans-serif));
+  -webkit-user-select: none;
+  user-select: none;
+  position: relative;
+
+  &.vuuTable-viewportRowLimit {
+    height: fit-content;
+
+    & .vuuTable-contentContainer {
+      height: calc(var(--measured-px-height) + var(--total-header-height));
+    }
+
+    & .vuuTable-scrollbarContainer {
+      height: calc(var(--measured-px-height) + var(--horizontal-scrollbar-height));
+    }
+
+    & .vuuTable-scrollbarFiller {
+      height: var(--horizontal-scrollbar-height);
+    }
+  }
+
+  &.vuuTable-maxViewportRowLimit {
+    height: fit-content;
+    padding-bottom: var(--horizontal-scrollbar-height);
+
+    & .vuuTable-contentContainer {
+      height: min(calc(var(--measured-px-height) + var(--total-header-height)),
+        calc(var(--content-height) + var(--total-header-height)));
+    }
+
+    & .vuuTable-scrollbarContainer {
+      height: min(calc(var(--measured-px-height) + var(--horizontal-scrollbar-height)),
+        calc(var(--content-height) + var(--horizontal-scrollbar-height)));
+    }
+
+    & .vuuTable-scrollbarFiller {
+      height: var(--horizontal-scrollbar-height);
+    }
+  }
+
+  & .vuuTable-editing {
+    --vuu-table-row-background-highlighted: transparent;
+  }
+}
+
+.vuuTable-zebra {
+  --table-zebraColor: var(--vuuTable-zebraColor, var(--salt-container-secondary-background));
+}
+
+.vuuTable-colLines {
+  --cell-borderColor: var(--salt-separable-tertiary-borderColor);
+}
+
+.vuuTable-rowLines {
+  --row-borderColor: var(--salt-separable-tertiary-borderColor);
+}
+
+.vuuTable-scrollbarContainer {
+  height: var(--viewport-body-height);
+  left: 0;
+  top: var(--total-header-height);
+  width: var(--table-width);
+  position: absolute;
+  overflow: auto;
+  border-top: none !important;
+  border-bottom: none !important;
+}
+
+.vuuTable-scrollbarContainer::-webkit-scrollbar {
+  width: 10px;
+}
+
+.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {
+  height: 10px;
+}
+
+.vuuTable-scrollbarContainer::-webkit-scrollbar-track {
+  background-color: #0000;
+}
+
+.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {
+  background-clip: padding-box;
+  background-color: var(--vuu-color-gray-30);
+  border: 2px solid #0000;
+  border-radius: 10px;
+}
+
+.vuuTable-scrollbarContent {
+  height: calc(var(--content-height) + var(--horizontal-scrollbar-height));
+  width: var(--content-width);
+  position: absolute;
+}
+
+.vuuTable-contentContainer {
+  --table-content-container-width: calc(var(--table-width) - var(--vertical-scrollbar-width));
+  background: var(--table-background);
+  height: calc(100% - var(--horizontal-scrollbar-height) - var(--vuu-table-footer-height));
+  overscroll-behavior: none;
+  width: var(--table-content-container-width);
+  position: relative;
+  overflow: auto;
+}
+
+.vuuTable-contentContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.vuuTable-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  width: var(--content-width);
+  border: none;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.vuuTable-body {
+  height: var(--content-height);
+  position: relative;
+}
+
+.vuuTable-focusCellPlaceholder {
+  height: var(--row-height);
+  z-index: -1;
+  width: 50px;
+  position: absolute;
+}
+
+.vuuPinLeft, .vuuPinRight {
+  background-color: inherit;
+  z-index: 1;
+  position: sticky;
+}
+
+.vuuPinRight {
+  & .vuuColumnResizer {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+.vuuTableHeaderCell.vuuPinLeft, .vuuTableHeaderCell.vuuPinRight {
+  z-index: 2;
+}
+
+.vuuTableHeader {
+  --row-height: var(--vuu-table-col-header-row-height);
+  background-color: var(--vuuTableHeader-background, var(--table-background));
+  border-bottom: solid 1px
+    var(--vuuTableHeader-borderColor, var(--salt-separable-tertiary-borderColor));
+  color: var(--salt-content-secondary-foreground);
+  font-size: var(--VuuTableHeader-fontSize, vasr(--salt-text-label-fontSize));
+  white-space: nowrap;
+  z-index: 1;
+  position: sticky;
+  top: 0;
+
+  & .vuuDraggable-spacer {
+    display: var(--vuuDraggable-display, inline-block);
+    height: var(--vuu-table-col-header-row-height);
+    border-bottom: 1px solid #ccc;
+  }
+
+  & .vuuStickyLeft {
+    z-index: 1;
+  }
+
+  & .vuuStickyRight {
+    z-index: 0;
+  }
+}
+
+.vuuTableHeader:hover {
+  --columnResizer-height: var(--vuu-table-col-header-row-height);
+  --columnResizer-color: var(--salt-separable-tertiary-borderColor);
+}
+
+.vuuTable-heading {
+  height: var(--vuu-table-col-heading-height);
+}
+
+.sizer-cell {
+  height: 0;
+  border: none !important;
+}
+
+.vuuDraggable-vuuTable {
+  --cell-borderColor: transparent;
+  --vuu-table-col-header-row-height: var(--vuuTableHeaderCell-height, 25px);
+  --vuuTableHeaderCell-background: var(--salt-container-secondary-background);
+  --row-height: 25px;
+}
+
+.vuuTable-pagination {
+  --vuu-table-footer-height: 32px;
+
+  & .vuuTableHeader {
+    position: relative;
+  }
+
+  & .vuuTable-body {
+    height: calc(var(--content-height) - var(--total-header-height));
+    position: relative;
+  }
+
+  & .vuuTableRow {
+    position: relative;
+    top: auto;
+  }
+}
+
+.vuuTable-footer {
+  height: var(--vuu-table-footer-height);
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.vuuHighlight {
+  color: #00f;
+}
+
+.DragColumn {
+  box-shadow: var(--salt-overlayable-shadow-drag);
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  90% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.vuuTable-emptyDisplay {
+  justify-content: center;
+  align-items: center;
+  animation: .8s fadeIn;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+.vuuTable-emptyDisplay ~ .vuuTable-contentContainer {
+  visibility: hidden;
+}
+
+.vuuRowProxy {
+  visibility: hidden;
+  position: absolute !important;
+}
+
+.vuuTableColHeaderRow {
+  height: var(--col-header-row-height);
+}
+
+.vuuTableRow {
+  background: var(--row-background, var(--table-background));
+  border-bottom: 1px solid var(--row-borderColor, var(--table-background));
+  box-sizing: border-box;
+  color: var(--salt-content-primary-foreground);
+  contain: layout;
+  font-size: var(--VuuTableRow-fontSize, vasr(--salt-text-fontSize));
+  height: var(--row-height);
+  line-height: var(--row-height);
+  white-space: nowrap;
+  width: 100%;
+  position: absolute;
+  top: 0;
+}
+
+.vuuTableRow-even {
+  --row-background: var(--table-zebraColor);
+}
+
+.vuuTableRow-highlighted {
+  background: var(--vuu-table-row-background-highlighted);
+}
+
+.vuuTableRow[aria-selected="true"] {
+  background-color: var(--vuu-table-row-background-selected);
+}
+
+.vuuTableRow[aria-expanded="true"] {
+  --toggle-icon-transform: rotate(90deg);
+}
+
+.vuuDraggable .vuuTableRow {
+  --cell-borderColor: transparent;
+  --vuu-selection-decorator-bg: transparent;
+  z-index: 1;
+  transform: none !important;
+}
+
+.vuuSelectionDecorator {
+  background: var(--table-background);
+  height: var(--row-height);
+  width: var(--table-selection-bookend-width, 4px);
+  z-index: 2;
+  display: inline-block;
+  position: relative;
+}
+
+.vuuTableRow:not([aria-selected="true"]) {
+  & .vuuTableRowBookend {
+    display: none;
+  }
+}
+
+.vuuSelectionDecorator.vuuStickyLeft {
+  position: sticky;
+  left: 0;
+}
+
+.vuuSelectionDecorator.vuuStickyRight {
+  position: sticky;
+  right: 0;
+}
+
+.vuuTableRowBookend {
+  position: absolute;
+  inset: -1px 0 0;
+}
+
+.vuuTable-rowSelection-bordered {
+  & .vuuSelectionDecorator {
+    & .vuuTableRowBookend {
+      background-color: var(--vuu-table-row-bookend-background-selected);
+      border-color: var(--vuu-table-row-borderColor-selected);
+      width: var(--table-selection-bookend-width, 4px);
+      border-width: 1px;
+
+      &:before {
+        content: none !important;
+      }
+    }
+
+    &.vuuStickyLeft {
+      & .vuuTableRowBookend {
+        border-left-style: solid;
+      }
+    }
+
+    &.vuuStickyRight {
+      & .vuuTableRowBookend {
+        border-right-style: solid;
+      }
+    }
+  }
+
+  & .vuuTableRow[aria-selected="true"] {
+    & .vuuSelectionDecorator {
+      background-color: var(--table-background);
+      border: none;
+    }
+  }
+
+  & .vuuTableRow:not([aria-selected="true"]):has( + .vuuTableRow[aria-selected="true"]) {
+    border-bottom-color: #0000;
+  }
+
+  & .vuuTableRow:not([aria-selected="true"]) + .vuuTableRow[aria-selected="true"], & .vuuTableRow[aria-selected="true"][data-first-row="true"] {
+    border-radius: 0;
+
+    &:after {
+      background: var(--vuu-table-row-borderColor-selected);
+      content: "";
+      height: 1px;
+      width: calc(var(--content-width) - 8px);
+      z-index: 1;
+      position: absolute;
+      top: 0;
+      left: 4px;
+    }
+
+    & .vuuStickyLeft .vuuTableRowBookend {
+      border-top-left-radius: var(--vuu-table-row-selection-borderRadius);
+      border-top-style: solid;
+      margin-top: 1px;
+    }
+
+    & .vuuStickyRight .vuuTableRowBookend {
+      border-top-right-radius: var(--vuu-table-row-selection-borderRadius);
+      border-top-style: solid;
+      margin-top: 1px;
+    }
+  }
+
+  & .vuuTableRow[aria-selected="true"]:has( + .vuuTableRow:not([aria-selected="true"])) {
+    border-bottom-color: var(--vuu-table-row-borderColor-selected);
+
+    & .vuuStickyLeft .vuuTableRowBookend {
+      border-bottom-left-radius: var(--vuu-table-row-selection-borderRadius);
+      border-bottom-style: solid;
+    }
+
+    & .vuuStickyRight .vuuTableRowBookend {
+      border-bottom-right-radius: var(--vuu-table-row-selection-borderRadius);
+      border-bottom-style: solid;
+    }
+  }
+}
+
+
+`;
+export default css;