gantt-lib 0.80.0 → 0.80.1

package/dist/styles.css

@@ -837,6 +837,7 @@
   flex-direction: column;
 }
 .gantt-tl-row {
+  --gantt-tl-name-actions-bg: var(--gantt-cell-background, #ffffff);
   display: flex;
   border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
   box-sizing: border-box;
@@ -844,27 +845,35 @@
   position: relative;
 }
 .gantt-tl-row-filter-match {
+  --gantt-tl-name-actions-bg: #fef3c7;
   background-color: rgba(250, 204, 21, 0.24);
 }
 .gantt-tl-row:hover {
+  --gantt-tl-name-actions-bg: #f5f5f6;
   box-shadow: inset 0 0 0 9999px rgba(17, 24, 39, 0.04);
 }
 .gantt-tl-row-filter-match:hover {
+  --gantt-tl-name-actions-bg: #fde68a;
   box-shadow: inset 0 0 0 9999px rgba(250, 204, 21, 0.3);
 }
 .gantt-tl-row-selected {
+  --gantt-tl-name-actions-bg: #ebedef;
   box-shadow: inset 0 0 0 9999px rgba(17, 24, 39, 0.08);
 }
 .gantt-tl-row-dependency-selected {
-  box-shadow: inset 0 0 0 9999px rgba(5, 150, 105, 0.12);
+  --gantt-tl-name-actions-bg: #e8effe;
+  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.12);
 }
 .gantt-tl-row-dependency-selected:hover {
-  box-shadow: inset 0 0 0 9999px rgba(5, 150, 105, 0.16);
+  --gantt-tl-name-actions-bg: #e0e9fd;
+  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.16);
 }
 .gantt-tl-row-dependency-owner {
+  --gantt-tl-name-actions-bg: #e8effe;
   box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.12);
 }
 .gantt-tl-row-dependency-owner:hover {
+  --gantt-tl-name-actions-bg: #e0e9fd;
   box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.16);
 }
 .gantt-tl-row-child {
@@ -943,11 +952,13 @@
   user-select: none;
   background: transparent;
 }
-.gantt-tl-row:hover .gantt-tl-drag-handle,
+.gantt-tl-cell-number:hover .gantt-tl-drag-handle,
+.gantt-tl-cell-number:focus-within .gantt-tl-drag-handle,
 .gantt-tl-row-dragging .gantt-tl-drag-handle {
   visibility: visible;
 }
-.gantt-tl-row:hover .gantt-tl-num-label {
+.gantt-tl-cell-number:hover .gantt-tl-num-label,
+.gantt-tl-cell-number:focus-within .gantt-tl-num-label {
   visibility: hidden;
 }
 .gantt-tl-num-label {
@@ -958,6 +969,7 @@
   cursor: grabbing;
 }
 .gantt-tl-row-dragging {
+  --gantt-tl-name-actions-bg: #d8e7fd;
   background-color: rgba(59, 130, 246, 0.15);
 }
 .gantt-tl-row-dragging .gantt-tl-cell,
@@ -1138,11 +1150,29 @@
 .gantt-tl-name-actions {
   position: absolute;
   right: 4px;
-  top: 50%;
-  transform: translateY(-50%);
+  top: 0;
+  bottom: 0;
   display: flex;
   gap: 4px;
   align-items: center;
+  padding-left: 14px;
+  z-index: 2;
+}
+.gantt-tl-name-actions::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -4px;
+  bottom: 0;
+  left: 14px;
+  background: var(--gantt-tl-name-actions-bg);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+.gantt-tl-name-actions > * {
+  position: relative;
+  z-index: 1;
 }
 .gantt-tl-name-action-btn {
   display: inline-flex;
@@ -1158,10 +1188,15 @@
   pointer-events: none;
   transition: opacity 0.15s ease, background-color 0.15s ease;
 }
-.gantt-tl-row:hover .gantt-tl-name-action-btn {
+.gantt-tl-cell-name:hover .gantt-tl-name-action-btn,
+.gantt-tl-cell-name:has(.gantt-tl-name-action-btn:focus-visible) .gantt-tl-name-action-btn {
   opacity: 1;
   pointer-events: auto;
 }
+.gantt-tl-cell-name:hover .gantt-tl-name-actions::before,
+.gantt-tl-cell-name:has(.gantt-tl-name-action-btn:focus-visible) .gantt-tl-name-actions::before {
+  opacity: 1;
+}
 .gantt-tl-action-buttons {
   display: flex;
   gap: 4px;
@@ -1169,7 +1204,8 @@
   transition: opacity 0.15s ease;
   pointer-events: none;
 }
-.gantt-tl-row:hover .gantt-tl-action-buttons {
+.gantt-tl-cell-name:hover .gantt-tl-action-buttons,
+.gantt-tl-cell-name:has(.gantt-tl-name-action-btn:focus-visible) .gantt-tl-action-buttons {
   opacity: 1;
   pointer-events: auto;
 }
@@ -1330,6 +1366,51 @@
 .gantt-tl-action-hierarchy:hover {
   background-color: #374151;
 }
+@media (max-width: 640px), (pointer: coarse) {
+  .gantt-tl-row,
+  .gantt-tl-cell,
+  .gantt-tl-name-trigger,
+  .gantt-tl-name-action-btn {
+    -webkit-tap-highlight-color: transparent;
+  }
+  .gantt-tl-name-trigger:focus:not(:focus-visible),
+  .gantt-tl-name-action-btn:focus:not(:focus-visible) {
+    outline: none;
+  }
+  .gantt-tl-name-actions {
+    gap: 6px;
+    padding-left: 16px;
+  }
+  .gantt-tl-name-actions::before {
+    left: 16px;
+  }
+  .gantt-tl-name-action-btn,
+  .gantt-tl-action-hierarchy {
+    width: 28px;
+    height: 28px;
+  }
+  .gantt-tl-cell-name:hover .gantt-tl-name-actions::before,
+  .gantt-tl-cell-name:has(.gantt-tl-name-action-btn:focus-visible) .gantt-tl-name-actions::before {
+    opacity: 0;
+  }
+  .gantt-tl-cell-name:hover .gantt-tl-name-action-btn:not(.gantt-tl-action-context),
+  .gantt-tl-cell-name:has(.gantt-tl-name-action-btn:focus-visible) .gantt-tl-name-action-btn:not(.gantt-tl-action-context) {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .gantt-tl-cell-name:hover .gantt-tl-action-context,
+  .gantt-tl-cell-name:has(.gantt-tl-action-context:focus-visible) .gantt-tl-action-context {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .gantt-tl-cell-name:has(.gantt-tl-name-actions-open) .gantt-tl-name-actions-open::before {
+    opacity: 1;
+  }
+  .gantt-tl-cell-name:has(.gantt-tl-name-actions-open) .gantt-tl-name-actions-open .gantt-tl-name-action-btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
 .gantt-tl-dep-type-trigger {
   display: flex;
   align-items: center;
@@ -1686,6 +1767,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
   background: transparent;
   border: 0px solid rgba(59, 130, 246, 0.4);
   background-color: rgba(59, 130, 246, 0.12);
@@ -1704,7 +1790,8 @@
   pointer-events: none;
   transition: opacity 0.15s ease;
 }
-.gantt-tl-row:hover .gantt-tl-dep-add-hover {
+.gantt-tl-cell-deps:hover .gantt-tl-dep-add-hover,
+.gantt-tl-cell-deps:focus-within .gantt-tl-dep-add-hover {
   opacity: 1;
   pointer-events: auto;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-lib",
-  "version": "0.80.0",
+  "version": "0.80.1",
   "description": "Lightweight React Gantt chart component library",
   "license": "MIT",
   "repository": {