gantt-lib 0.82.0 → 0.83.0

package/dist/styles.css

@@ -776,7 +776,6 @@
   top: 0;
   z-index: 15;
   background-color: var(--gantt-cell-background, #ffffff);
-  border-right: 1px solid var(--gantt-grid-line-color, #e0e0e0);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -784,6 +783,17 @@
   width: var(--tasklist-width);
   min-width: var(--tasklist-width);
 }
+.gantt-tl-overlay::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 6;
+  width: 1px;
+  background: var(--gantt-grid-line-color, #e0e0e0);
+  pointer-events: none;
+}
 .gantt-tl-overlay.gantt-tl-overlay-shadowed {
   box-shadow: 10px 0 18px -14px rgba(15, 23, 42, 0.45);
 }
@@ -2114,6 +2124,9 @@
   background: var(--gantt-cell-background, #ffffff);
   border-right: 1px solid var(--gantt-grid-line-color, #e0e0e0);
 }
+.gantt-resourceTimeline-resourceColumnShadowed {
+  box-shadow: 10px 0 18px -14px rgba(15, 23, 42, 0.45);
+}
 .gantt-resourceTimeline-corner {
   position: sticky;
   top: 0;
@@ -2146,6 +2159,71 @@
 .gantt-resourceTimeline-resourceHeaderActions {
   text-align: right;
 }
+.gantt-resourceTimeline-resourceGroupHeader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
+  background: #f7f8fa;
+  color: #44546f;
+}
+.gantt-resourceTimeline-resourceGroupTitle {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+.gantt-resourceTimeline-resourceGroupCount {
+  flex: 0 0 auto;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: #dfe1e6;
+  color: #42526e;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 18px;
+  text-align: center;
+}
+.gantt-resourceTimeline-resourceGroupAddButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  margin-left: auto;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #2563eb;
+  cursor: pointer;
+  font: inherit;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1;
+  opacity: 0;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    opacity 120ms ease;
+}
+.gantt-resourceTimeline-resourceGroupHeader:hover .gantt-resourceTimeline-resourceGroupAddButton,
+.gantt-resourceTimeline-resourceGroupHeader:focus-within .gantt-resourceTimeline-resourceGroupAddButton {
+  opacity: 1;
+}
+.gantt-resourceTimeline-resourceGroupAddButton:hover,
+.gantt-resourceTimeline-resourceGroupAddButton:focus-visible {
+  background: #deebff;
+  color: #0747a6;
+  outline: none;
+}
 .gantt-resourceTimeline-resourceHeader {
   display: grid;
   grid-template-columns: 30px minmax(146px, 1fr) 80px 86px 32px;
@@ -2185,25 +2263,30 @@
   line-height: 1.25;
 }
 .gantt-resourceTimeline-resourceName {
+  position: relative;
   min-width: 0;
   display: flex;
   align-items: flex-start;
   gap: 6px;
   min-height: 32px;
+  height: 100%;
   overflow: visible;
   font-size: 13px;
   line-height: 1.25;
   padding: 0 6px;
   overflow-wrap: anywhere;
 }
-.gantt-resourceTimeline-resourceNameInput {
+.gantt-resourceTimeline-resourceNameButton {
+  display: flex;
+  align-self: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
   width: 100%;
   min-width: 0;
-  height: 34px;
-  min-height: 34px;
-  resize: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
+  height: 100%;
+  min-height: 32px;
+  border: 0;
+  border-radius: 0;
   background: transparent;
   color: #172b4d;
   font: inherit;
@@ -2211,23 +2294,27 @@
   font-weight: 500;
   line-height: 1.25;
   overflow: hidden;
-  padding: 2px 4px;
-  text-overflow: ellipsis;
+  padding: 2px 4px 0;
+  text-align: left;
+  vertical-align: top;
+  cursor: pointer;
   white-space: normal;
   overflow-wrap: anywhere;
 }
-.gantt-resourceTimeline-resourceNameInput:hover:not(:disabled) {
-  background: #ffffff;
-  border-color: #dfe1e6;
+.gantt-resourceTimeline-resourceNameButton:hover,
+.gantt-resourceTimeline-resourceNameButton:focus-visible {
+  outline: none;
 }
-.gantt-resourceTimeline-resourceNameInput:focus {
-  background: #ffffff;
-  border-color: #4c9aff;
+.gantt-resourceTimeline-resourceNameButton:focus-visible {
   box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.22);
-  outline: none;
 }
-.gantt-resourceTimeline-resourceNameInput:disabled {
-  opacity: 1;
+.gantt-resourceTimeline-resourceNameInput {
+  top: 0;
+  left: 36px;
+  width: 100%;
+  min-width: 520px;
+  height: 32px;
+  font-size: 0.8rem;
 }
 .gantt-resourceTimeline-resourceTypeIconButton {
   display: inline-flex;
@@ -2336,7 +2423,7 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  gap: 1px;
+  gap: 3px;
   justify-self: start;
   margin-top: 0;
   max-width: calc(100% - 16px);
@@ -2352,22 +2439,43 @@
   white-space: nowrap;
 }
 .gantt-resourceTimeline-resourceAssignmentCount {
-  display: inline-flex;
+  display: grid;
+  grid-template-columns: 28px 22px;
   align-items: center;
-  gap: 4px;
-  color: #6b778c;
+  column-gap: 4px;
+  width: 100%;
+  color: #97a0af;
   font-size: 11px;
   font-weight: 500;
 }
 .gantt-resourceTimeline-resourceAssignmentIcon {
-  flex: 0 0 auto;
+  justify-self: start;
+  width: 14px;
   fill: currentColor;
   stroke: none;
+  opacity: 0.72;
 }
 .gantt-resourceTimeline-resourceWorkedDays {
+  display: grid;
+  grid-template-columns: 28px 22px;
+  align-items: center;
+  column-gap: 4px;
+  width: 100%;
   color: #172b4d;
   font-size: 12px;
   font-weight: 700;
+  margin-bottom: 1px;
+}
+.gantt-resourceTimeline-resourceMetricValue {
+  display: inline-block;
+  width: 28px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.gantt-resourceTimeline-resourceMetricLabel {
+  width: 22px;
+  padding-left: 2px;
+  text-align: left;
 }
 .gantt-resourceTimeline-resourceOptionMenu {
   min-width: 156px !important;
@@ -2556,12 +2664,13 @@
   z-index: 2;
   background: var(--gantt-cell-background, #ffffff);
   border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
+  box-sizing: border-box;
 }
 .gantt-resourceTimeline-grid {
   position: relative;
 }
 .gantt-resourceTimeline .gantt-ti-indicator {
-  z-index: 4;
+  z-index: 40;
 }
 .gantt-resourceTimeline-row {
   position: absolute;
@@ -2571,6 +2680,9 @@
   border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
   pointer-events: none;
 }
+.gantt-resourceTimeline-groupRow {
+  background: #f7f8fa;
+}
 .gantt-resourceTimeline-item {
   position: absolute;
   z-index: 1;
@@ -2612,6 +2724,10 @@
   transform: translate(-50%, -100%);
   visibility: visible;
 }
+.gantt-resourceTimeline-item:hover,
+.gantt-resourceTimeline-item:focus-visible {
+  z-index: 30;
+}
 .gantt-resourceTimeline-itemActive {
   z-index: 31;
   box-shadow: 0px 0 0px 2px rgb(0 0 0);
@@ -2786,6 +2902,7 @@
   z-index: 10;
   background-color: var(--gantt-cell-background, #ffffff);
   border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
+  box-sizing: border-box;
 }
 .gantt-taskArea {
   position: relative;

package/package.json

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