@perspective-dev/viewer-datagrid 4.3.0 → 4.4.1

package/src/css/regular_table.css

@@ -0,0 +1,589 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+/* 
+
+/* Row Selection */
+
+/* // TODO this makes the UI flash a CSS layout for a millsiecond when toggling */
+/* // settings butit could be fixed. */
+
+/* perspective-viewer:not([settings]) { */
+/*     @include settings-not-open; */
+/* } */
+
+/* :host-context(perspective-viewer:not([settings])) { */
+/*     @include settings-not-open; */
+/* } */
+
+/* @mixin settings-not-open { */
+/*     regular-table table tr.rt-autosize + tr th { */
+/*         height: 0px; */
+/*         span { */
+/*             display: none; */
+/*         } */
+/*     } */
+/* } */
+
+perspective-viewer,
+:host {
+    .psp-menu-enabled {
+        padding: 0 6px;
+        font-size: 8px;
+        border-radius: 3px 3px 0 0;
+    }
+
+    .psp-menu-enabled:hover,
+    tr:not(.rt-autosize) th.psp-menu-open {
+        color: var(--psp--background-color);
+        background-color: var(--psp--color);
+        border-bottom-color: var(--psp--color);
+        cursor: pointer;
+    }
+
+    tr:not(.rt-autosize) th.psp-menu-open {
+        &:before {
+            background-repeat: no-repeat;
+            background-color: var(--psp--color);
+            content: "";
+            display: inline-block;
+            -webkit-mask-size: cover;
+            mask-size: cover;
+            height: 8px;
+            width: 10px;
+            -webkit-mask-image: var(--psp-icon--column-settings--mask-image);
+            mask-image: var(--psp-icon--column-settings--mask-image);
+            margin-right: 4px;
+            background-color: var(--psp--background-color);
+        }
+    }
+
+    td.psp-menu-open {
+        box-shadow:
+            inset -2px 0px 0px var(--psp--color),
+            inset 2px 0px 0px var(--psp--color);
+    }
+
+    tr:first-child td.psp-menu-open {
+        border-top-color: var(--psp--color) !important;
+    }
+
+    tr:last-child td.psp-menu-open {
+        box-shadow:
+            inset -2px 0px 0px var(--psp--color),
+            inset 2px 0px 0px var(--psp--color),
+            inset 0px -2px 0px var(--psp--color);
+    }
+}
+
+perspective-viewer,
+:host-context(perspective-viewer) {
+    regular-table table thead tr:last-child th {
+        border-bottom-width: 1px;
+        border-bottom-color: var(--psp-inactive--border-color, #8b868045);
+    }
+}
+
+.psp-sort-enabled:hover {
+    cursor: pointer;
+}
+
+regular-table.flat-group-rollup-mode.vertical-row-headers
+    th.psp-tree-label:not(:last-of-type) {
+    writing-mode: vertical-lr;
+}
+
+.psp-select-region-inactive,
+:hover .psp-select-region-inactive,
+:hover th.psp-tree-leaf.psp-select-region-inactive,
+:hover th.psp-tree-label.psp-select-region-inactive {
+    background-color: var(--psp-inactive--color) !important;
+    color: var(--psp--background-color) !important;
+    border-color: var(--psp--background-color) !important;
+}
+
+.psp-error {
+    color: red;
+}
+
+td:focus {
+    outline: #666;
+    outline-style: dotted;
+    outline-width: 1px;
+}
+
+perspective-viewer.dragging,
+:host-context(perspective-viewer.dragging) {
+    regular-table {
+        pointer-events: none;
+    }
+}
+
+.psp-header-border:last-child {
+    border-right-width: 0px;
+}
+
+.psp-header-sort-desc:after {
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--psp-icon--sort-desc--mask-image);
+    mask-image: var(--psp-icon--sort-desc--mask-image);
+}
+
+.psp-header-sort-asc:after {
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--psp-icon--sort-asc--mask-image);
+    mask-image: var(--psp-icon--sort-asc--mask-image);
+}
+
+.psp-header-sort-col-desc:after {
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--psp-icon--sort-col-desc--mask-image);
+    mask-image: var(--psp-icon--sort-col-desc--mask-image);
+}
+
+.psp-header-sort-col-asc:after {
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--psp-icon--sort-col-asc--mask-image);
+    mask-image: var(--psp-icon--sort-col-asc--mask-image);
+}
+
+.psp-header-sort-abs-desc:after {
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--psp-icon--sort-abs-desc--mask-image);
+    mask-image: var(--psp-icon--sort-abs-desc--mask-image);
+}
+
+.psp-header-sort-abs-asc:after {
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--psp-icon--sort-abs-asc--mask-image);
+    mask-image: var(--psp-icon--sort-abs-asc--mask-image);
+}
+
+.psp-header-sort-abs-col-desc:after {
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--psp-icon--sort-abs-col-desc--mask-image);
+    mask-image: var(--psp-icon--sort-abs-col-desc--mask-image);
+}
+
+.psp-header-sort-abs-col-asc:after {
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    width: 14px;
+    height: 11px;
+    margin-left: 4px;
+    -webkit-mask-image: var(--psp-icon--sort-abs-col-asc--mask-image);
+    mask-image: var(--psp-icon--sort-abs-col-asc--mask-image);
+}
+
+tbody th:last-of-type {
+    border-right: 1px solid var(--psp-inactive--border-color, #8b868045);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+tbody th:empty {
+    background-image: linear-gradient(
+        to right,
+        transparent 9px,
+        var(--psp-inactive--border-color, #eee) 10px,
+        transparent 11px
+    );
+    background-repeat: no-repeat;
+    min-width: 20px;
+    max-width: 20px;
+    pointer-events: none;
+}
+
+regular-table:not(.flat-group-rollup-mode) {
+    .psp-tree-label {
+        max-width: 0px;
+        min-width: 0px;
+    }
+
+    .psp-tree-label:before {
+        color: var(--psp--color);
+        font-family: var(--psp-button--font-family, inherit);
+        padding-right: 11px;
+    }
+
+    .psp-tree-label-expand:before {
+        content: var(--psp-label--tree-expand--content, "+");
+    }
+
+    .psp-tree-label-collapse:before {
+        content: var(--psp-label--tree-collapse--content, "-");
+    }
+
+    .psp-tree-label-expand,
+    .psp-tree-label-collapse {
+        cursor: pointer;
+    }
+
+    .psp-tree-label:hover:before {
+        color: var(--psp-active--color);
+        text-shadow: 0px 0px 5px var(--psp-active--color);
+    }
+}
+
+.psp-tree-leaf {
+    padding-left: 24px;
+}
+
+.psp-align-right {
+    text-align: right;
+}
+
+.psp-color-mode-bar {
+    padding: 0 2px;
+}
+
+.psp-color-mode-label-bar {
+    position: relative;
+    padding: 0 2px;
+
+    .psp-bar {
+        isolation: isolate;
+        position: unset;
+    }
+
+    .psp-bar:before {
+        color: transparent;
+        pointer-events: none;
+        content: var(--label);
+        display: inline-flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 0 3px;
+    }
+
+    .psp-bar:after {
+        color: var(--psp-label-bar-bg);
+        content: var(--label);
+        mix-blend-mode: difference;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: inline-flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 0 5px;
+    }
+}
+
+.psp-label-bar {
+    inset: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0px;
+}
+
+.psp-label-bar-fill {
+    position: absolute;
+    top: 10%;
+    height: 80%;
+    background: var(--psp-label-bar-color);
+    pointer-events: none;
+}
+
+.psp-label-bar-text {
+    position: relative;
+    color: var(--psp-label-bar-bg);
+    mix-blend-mode: difference;
+    pointer-events: none;
+}
+
+.psp-align-left {
+    text-align: left;
+}
+
+.psp-positive:not(:focus) {
+    color: var(--psp-datagrid--pos-cell--color);
+}
+
+.psp-negative:not(:focus) {
+    color: var(--psp-datagrid--neg-cell--color);
+}
+
+regular-table table tbody td {
+    min-width: 52px !important;
+}
+
+.psp-is-width-override .rt-column-resize,
+.rt-column-resize:hover {
+    border: 1px dashed #999;
+    border-bottom-width: 0px;
+    border-left-width: 0px;
+}
+
+.boolean-editable {
+    cursor: pointer;
+}
+
+regular-table table {
+    font-size: 1em;
+    user-select: none;
+    color: inherit;
+    border-collapse: separate;
+
+    th {
+        font-weight: 400;
+    }
+
+    td,
+    th {
+        border-color: var(--psp-inactive--border-color, #8b868045);
+        height: var(--psp-datagrid--row--height, 23px);
+    }
+
+    .psp-header-group {
+        text-overflow: ellipsis;
+    }
+
+    th.psp-header-leaf {
+        border-bottom-width: 0px;
+
+        span {
+            height: var(--psp-datagrid--row--height, 23px);
+            min-height: var(--psp-datagrid--row--height, 23px);
+        }
+    }
+
+    td,
+    th.psp-tree-label,
+    th.psp-tree-label,
+    th.psp-tree-leaf,
+    tbody tr:first-child th {
+        border-style: solid;
+        border-width: 0px;
+        border-top-width: 1px;
+    }
+
+    tbody th:empty {
+        background-position: 0px -10px;
+    }
+
+    td.psp-select-region,
+    th.psp-select-region {
+        /* transition: background-color 0.5s, color 0.5s, border-color 0.5s; */
+        background-color: var(--psp--color) !important;
+        color: var(--psp--background-color) !important;
+        border-color: var(--psp--background-color) !important;
+    }
+}
+
+regular-table
+    tbody
+    tr:hover
+    td.psp-select-region:not(.psp-select-region-inactive),
+regular-table
+    tbody
+    tr:hover
+    + tr
+    td.psp-select-region:not(.psp-select-region-inactive) {
+    border-color: var(--psp--background-color) !important;
+}
+
+regular-table tbody tr:hover {
+    td.psp-select-region.psp-menu-open {
+        &:not(.psp-select-region-inactive) {
+            box-shadow:
+                inset -2px 0px 0px var(--psp--background-color),
+                inset 2px 0px 0px var(--psp--background-color);
+        }
+    }
+}
+
+:host-context(perspective-viewer[settings]) td.psp-select-region.psp-menu-open {
+    box-shadow:
+        inset -2px 0px 0px var(--psp--background-color),
+        inset 2px 0px 0px var(--psp--background-color);
+}
+
+/* This is a design/architecture bug. When the datagrid draws during a sidepanel */
+/* collapse/uncollapse, the `settings` attribute is set to the _previous_ state */
+/* as this collapse takes a while and we dont want the new state CSS to apply */
+/* until the drawing is done. However, this causes the datagrid to draw its */
+/* _first_ frame as if its in the wrong state, as it detects sidepanel state */
+/* via HTML attribute checking. */
+regular-table
+    #psp-column-edit-buttons
+    th:not(.rt-group-corner)
+    span:not(.rt-column-resize):before {
+    content: var(--psp-datagrid--column-edit-button--content, "Edit");
+}
+
+perspective-viewer:not([settings]),
+:host-context(perspective-viewer:not([settings])) {
+    regular-table #psp-column-edit-buttons:after {
+        content: none;
+    }
+}
+
+/* Style the last row of the `<thead>` so that is has a bottom border. */
+regular-table table thead tr:last-child:after {
+    width: 10000px;
+    box-sizing: border-box;
+    display: block;
+    height: var(--psp-datagrid--row--height, 23px);
+    content: " ";
+    border-bottom: 1px solid var(--psp-inactive--border-color);
+}
+
+/* Extend every row to the right edge of the page with a fake column. */
+regular-table table tbody tr:after {
+    width: 10000px;
+    box-sizing: border-box;
+    display: block;
+    height: var(--psp-datagrid--row--height, 23px);
+    content: " ";
+    border-top: 1px solid transparent;
+}
+
+regular-table table tbody tr:not(:first-child):after {
+    border-top: 1px solid var(--psp-inactive--border-color);
+}
+
+regular-table table tbody tr:hover:not(:first-child):after {
+    border-top: 1px solid var(--psp-datagrid--hover--border-color);
+}
+
+regular-table table tbody tr:hover + tr:after {
+    border-top: 1px solid var(--psp-datagrid--hover--border-color);
+}
+
+@keyframes pulse_pos {
+    0% {
+        background-color: var(
+            --pulse--background-color-start,
+            rgba(0, 128, 255, 0.5)
+        );
+    }
+
+    100% {
+        background-color: var(
+            --pulse--background-color-end,
+            rgba(0, 128, 255, 0)
+        );
+    }
+}
+
+@keyframes pulse_pos2 {
+    0% {
+        background-color: var(
+            --pulse--background-color-start,
+            rgba(0, 128, 255, 0.5)
+        );
+    }
+
+    100% {
+        background-color: var(
+            --pulse--background-color-end,
+            rgba(0, 128, 255, 0)
+        );
+    }
+}
+
+@keyframes pulse_neg {
+    0% {
+        background-color: var(
+            --pulse--background-color-start,
+            rgba(255, 25, 0, 0.5)
+        );
+    }
+
+    100% {
+        background-color: var(
+            --pulse--background-color-end,
+            rgba(255, 25, 0, 0)
+        );
+    }
+}
+
+@keyframes pulse_neg2 {
+    0% {
+        background-color: var(
+            --pulse--background-color-start,
+            rgba(255, 25, 0, 0.5)
+        );
+    }
+
+    100% {
+        background-color: var(
+            --pulse--background-color-end,
+            rgba(255, 25, 0, 0)
+        );
+    }
+}

package/src/{less/row-hover.less → css/row-hover.css}

@@ -1,50 +1,68 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 regular-table {
     tbody {
         tr:hover
-            th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected),
+            th.psp-tree-leaf:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ),
         tr:hover
-            th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected),
-        tr:hover td:not(.psp-row-selected):not(.psp-row-subselected),
+            th.psp-tree-label:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ),
+        tr:hover td:not(.psp-select-region):not(.psp-select-region-inactive),
         tr:hover:after {
-            border-color: var(--rt-hover--border-color, #c5c9d080) !important;
-            box-shadow: 0px 1px 0px var(--rt-hover--border-color, #c5c9d080);
+            border-color: var(
+                --psp-datagrid--hover--border-color,
+                #c5c9d080
+            ) !important;
+            box-shadow: 0px 1px 0px
+                var(--psp-datagrid--hover--border-color, #c5c9d080);
 
             &.psp-menu-open {
                 box-shadow:
-                    inset -2px 0px 0px var(--icon--color),
-                    inset 2px 0px 0px var(--icon--color),
-                    0px 1px 0px var(--rt-hover--border-color, #c5c9d080);
+                    inset -2px 0px 0px var(--psp--color),
+                    inset 2px 0px 0px var(--psp--color),
+                    0px 1px 0px
+                        var(--psp-datagrid--hover--border-color, #c5c9d080);
             }
         }
 
         tr:last-child:hover
-            td:not(.psp-row-selected):not(.psp-row-subselected).psp-menu-open {
+            td:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ).psp-menu-open {
             box-shadow:
-                inset -2px 0px 0px var(--icon--color),
-                inset 2px 0px 0px var(--icon--color),
-                inset 0px -2px 0px var(--icon--color),
-                0px 1px 0px var(--rt-hover--border-color, #c5c9d080);
+                inset -2px 0px 0px var(--psp--color),
+                inset 2px 0px 0px var(--psp--color),
+                inset 0px -2px 0px var(--psp--color),
+                0px 1px 0px var(--psp-datagrid--hover--border-color, #c5c9d080);
         }
 
         tr:hover
             + tr
-            th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected),
+            th.psp-tree-leaf:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ),
         tr:hover
             + tr
-            th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected),
-        tr:hover + tr td:not(.psp-row-selected):not(.psp-row-subselected) {
+            th.psp-tree-label:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ),
+        tr:hover
+            + tr
+            td:not(.psp-select-region):not(.psp-select-region-inactive) {
             border-top-color: transparent;
         }
 
@@ -66,12 +84,13 @@ regular-table {
 
         tr:hover {
             color: inherit;
+
             th:first-child:not(:empty),
             th:first-child:empty + th:not(:empty),
             th:first-child:empty ~ th:empty + th:not(:empty),
             td:first-child {
                 border-left-color: var(
-                    --rt-hover--border-color,
+                    --psp-datagrid--hover--border-color,
                     #c5c9d080
                 ) !important;
             }
@@ -79,7 +98,7 @@ regular-table {
             th:last-child,
             td:last-child {
                 border-right-color: var(
-                    --rt-hover--border-color,
+                    --psp-datagrid--hover--border-color,
                     #c5c9d080
                 ) !important;
             }