gantt-lib 0.115.2 → 0.117.0

package/dist/styles.css

@@ -1007,10 +1007,12 @@
   padding-left: 0;
 }
 .gantt-tl-row-parent {
-  background-color: var(--gantt-plan-fact-parent-row-background, rgba(148, 163, 184, 0.22));
   font-weight: 600;
   --gantt-tl-name-actions-bg: inherit;
 }
+.gantt-tl-row-parent-filled {
+  background-color: var(--gantt-plan-fact-parent-row-background, rgba(148, 163, 184, 0.22));
+}
 .gantt-tl-row-closed {
   color: var(--gantt-closed-row-color, #6b7280);
 }
@@ -1259,6 +1261,33 @@
   overflow: visible;
   font-variant-numeric: tabular-nums;
 }
+.gantt-tl-duration-display,
+.gantt-tl-cell-date .gantt-datepicker-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 22px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  transition: background-color 0.15s ease;
+}
+.gantt-tl-duration-display {
+  min-width: 28px;
+}
+.gantt-tl-cell-date .gantt-datepicker-trigger {
+  width: auto;
+  height: auto;
+  min-width: 28px;
+  min-height: 22px;
+  max-width: calc(100% - 8px);
+  align-self: center;
+}
+.gantt-tl-cell-duration:hover .gantt-tl-duration-display,
+.gantt-tl-cell-duration:focus-within .gantt-tl-duration-display,
+.gantt-tl-cell-date:hover .gantt-datepicker-trigger,
+.gantt-tl-cell-date:focus-within .gantt-datepicker-trigger {
+  background: rgba(107, 114, 128, 0.12);
+}
 .gantt-tl-cell-progress {
   width: 56px;
   flex-shrink: 0;
@@ -1269,6 +1298,20 @@
   overflow: visible;
   font-variant-numeric: tabular-nums;
 }
+.gantt-tl-progress-display {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  min-height: 22px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  transition: background-color 0.15s ease;
+}
+.gantt-tl-cell-progress:hover .gantt-tl-progress-display,
+.gantt-tl-cell-progress:focus-within .gantt-tl-progress-display {
+  background: rgba(107, 114, 128, 0.12);
+}
 .gantt-tl-number-editor {
   position: absolute;
   inset: 0;
@@ -3127,14 +3170,16 @@
   cursor: grab;
   user-select: none;
 }
-.gantt-resourceTimeline-item::after {
-  content: attr(data-resource-item-tooltip);
+.gantt-resourceTimeline-itemTooltip {
   position: absolute;
-  left: 50%;
+  left: 6px;
   top: -8px;
   z-index: 20;
+  display: flex;
   max-width: 360px;
-  padding: 6px 8px;
+  flex-direction: column;
+  gap: 3px;
+  padding: 7px 9px;
   border-radius: 6px;
   background: rgba(15, 23, 42, 0.96);
   color: #ffffff;
@@ -3144,19 +3189,50 @@
   opacity: 0;
   pointer-events: none;
   text-align: left;
-  transform: translate(-50%, calc(-100% + 2px));
+  transform: translate(0, calc(-100% + 2px));
   transition: opacity 80ms ease-out, transform 80ms ease-out;
   visibility: hidden;
   white-space: normal;
   width: max-content;
   word-break: break-word;
 }
-.gantt-resourceTimeline-item:hover::after,
-.gantt-resourceTimeline-item:focus-visible::after {
+.gantt-resourceTimeline-item:hover .gantt-resourceTimeline-itemTooltip,
+.gantt-resourceTimeline-item:focus-visible .gantt-resourceTimeline-itemTooltip {
   opacity: 1;
-  transform: translate(-50%, -100%);
+  transform: translate(0, -100%);
   visibility: visible;
 }
+.gantt-resourceTimeline-itemTooltipLine {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+}
+.gantt-resourceTimeline-itemTooltipLinePrimary {
+  font-weight: 700;
+}
+.gantt-resourceTimeline-itemTooltipLineSecondary {
+  gap: 5px;
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 11px;
+  font-weight: 500;
+}
+.gantt-resourceTimeline-itemTooltipIcon {
+  display: inline-flex;
+  width: 13px;
+  height: 13px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+.gantt-resourceTimeline-itemTooltipIcon svg {
+  width: 13px;
+  height: 13px;
+}
+.gantt-resourceTimeline-itemTooltipText {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .gantt-resourceTimeline-item:hover,
 .gantt-resourceTimeline-item:focus-visible {
   z-index: 30;
@@ -3611,12 +3687,12 @@
   background: var(--gantt-plan-fact-plan-fill, rgb(59 130 246 / 30%));
 }
 .gantt-pf-cell-fact.gantt-pf-cell-hasValue {
-  background: var(--gantt-plan-fact-fact-fill, rgba(34, 197, 94, 0.14));
+  background: var(--gantt-plan-fact-fact-fill, rgb(33 196 33 / 25%));
   color: #15803d;
 }
 .gantt-pf-cell-fact.gantt-pf-cell-factWarning,
 .gantt-pf-cell-factWarning {
-  background: rgba(244, 114, 182, 0.16);
+  background: rgb(244 113 143 / 30%);
   color: #dc2626;
 }
 .gantt-pf-cell-active {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-lib",
-  "version": "0.115.2",
+  "version": "0.117.0",
   "description": "React scheduling UI library for Gantt charts, resource planners, and table-matrix views",
   "license": "MIT",
   "repository": {