gantt-lib 0.111.0 → 0.113.0

package/dist/styles.css

@@ -3489,6 +3489,288 @@
   text-align: right;
 }
 
+/* src/components/PlanFactMatrix/PlanFactMatrix.css */
+.gantt-pf-root {
+  position: relative;
+  background: var(--gantt-cell-background, #ffffff);
+  --gantt-pf-day-width: 40px;
+  --gantt-pf-day-line-width: 0.5px;
+  --gantt-pf-day-line-color: rgb(226, 226, 226);
+  --gantt-pf-row-line-width: 0.5px;
+  --gantt-pf-row-line-color: var(--gantt-plan-fact-row-line-color, rgb(146, 153, 160));
+}
+.gantt-pf-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  overflow: hidden;
+  background: var(--gantt-cell-background, #ffffff);
+  border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
+  box-sizing: border-box;
+}
+.gantt-pf-headerTodayLine {
+  position: absolute;
+  bottom: 0;
+  z-index: 11;
+  width: var(--gantt-today-indicator-width);
+  background: var(--gantt-today-indicator-color);
+  pointer-events: none;
+}
+.gantt-pf-body {
+  position: relative;
+  z-index: 0;
+}
+.gantt-pf-row {
+  position: absolute;
+  left: 0;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-image:
+    linear-gradient(
+      to right,
+      transparent 0,
+      transparent var(--gantt-pf-today-left, -10000px),
+      var(--gantt-today-indicator-color) var(--gantt-pf-today-left, -10000px),
+      var(--gantt-today-indicator-color) calc(var(--gantt-pf-today-left, -10000px) + var(--gantt-today-indicator-width)),
+      transparent calc(var(--gantt-pf-today-left, -10000px) + var(--gantt-today-indicator-width))),
+    repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent calc(var(--gantt-pf-day-width) - var(--gantt-pf-day-line-width)),
+      var(--gantt-pf-day-line-color, rgba(148, 163, 184, 0.55)) calc(var(--gantt-pf-day-width) - var(--gantt-pf-day-line-width)),
+      var(--gantt-pf-day-line-color, rgba(148, 163, 184, 0.55)) var(--gantt-pf-day-width));
+  box-shadow: inset 0 calc(-1 * var(--gantt-pf-row-line-width)) 0 var(--gantt-pf-row-line-color);
+}
+.gantt-pf-row-parent {
+  background-image:
+    linear-gradient(
+      to right,
+      transparent 0,
+      transparent var(--gantt-pf-today-left, -10000px),
+      var(--gantt-today-indicator-color) var(--gantt-pf-today-left, -10000px),
+      var(--gantt-today-indicator-color) calc(var(--gantt-pf-today-left, -10000px) + var(--gantt-today-indicator-width)),
+      transparent calc(var(--gantt-pf-today-left, -10000px) + var(--gantt-today-indicator-width)));
+  font-weight: 600;
+}
+.gantt-pf-row-parent .gantt-pf-cell,
+.gantt-pf-row-parent .gantt-pf-cell-active,
+.gantt-pf-row-parent .gantt-pf-cell-editing:hover,
+.gantt-pf-row-parent .gantt-pf-cell-selected,
+.gantt-pf-row-parent .gantt-pf-cell-selected.gantt-pf-cell-active:hover,
+.gantt-pf-row-parent .gantt-pf-cell-selected.gantt-pf-cell-rangeAnchor,
+.gantt-pf-row-parent .gantt-pf-cell-selected.gantt-pf-cell-rangeAnchor.gantt-pf-cell-active:hover,
+.gantt-pf-row-parent .gantt-pf-cell:not(.gantt-pf-cell-readonly):hover,
+.gantt-pf-row-parent .gantt-pf-cell-active:not(.gantt-pf-cell-selected):hover {
+  box-shadow: none;
+}
+.gantt-pf-row-highlighted {
+  background-color: rgba(250, 204, 21, 0.24);
+}
+.gantt-pf-row.gantt-pf-row-hovered {
+  box-shadow: inset 0 calc(-1 * var(--gantt-pf-row-line-width)) 0 var(--gantt-pf-row-line-color), inset 0 0 0 9999px var(--gantt-row-hover-background, rgba(59, 130, 246, 0.04));
+}
+.gantt-pf-row-highlighted.gantt-pf-row-hovered {
+  box-shadow: inset 0 calc(-1 * var(--gantt-pf-row-line-width)) 0 var(--gantt-pf-row-line-color), inset 0 0 0 9999px rgba(250, 204, 21, 0.3);
+}
+.gantt-pf-monthSeparatorLayer {
+  position: absolute;
+  inset: 0;
+  z-index: 12;
+  pointer-events: none;
+}
+.gantt-pf-monthSeparator {
+  position: absolute;
+  bottom: 0;
+  width: var(--gantt-month-separator-width, 2px);
+  background: var(--gantt-month-separator-color, #374151);
+}
+.gantt-pf-cell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 0;
+  padding: 0 clamp(2px, calc(var(--gantt-pf-day-width) * 0.1), 4px);
+  box-sizing: border-box;
+  color: #0f172a;
+  font-size: clamp(10px, calc(var(--gantt-pf-day-width) * 0.3), 12px);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  outline: none;
+  background: transparent;
+  box-shadow: none;
+}
+.gantt-pf-cell-plan {
+  font-weight: 600;
+}
+.gantt-pf-cell-planned {
+  background: var(--gantt-plan-fact-plan-fill, rgba(59, 130, 246, 0.12));
+}
+.gantt-pf-cell-fact.gantt-pf-cell-hasValue {
+  background: var(--gantt-plan-fact-fact-fill, rgba(20, 184, 166, 0.10));
+}
+.gantt-pf-cell-factSuccess.gantt-pf-cell-hasValue {
+  background: rgba(34, 197, 94, 0.14);
+  color: #15803d;
+}
+.gantt-pf-cell-factWarning.gantt-pf-cell-hasValue {
+  background: rgba(244, 114, 182, 0.16);
+  color: #dc2626;
+}
+.gantt-pf-cell-active {
+  z-index: 1;
+  box-shadow: none;
+}
+.gantt-pf-cell-selected {
+  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.12);
+}
+.gantt-pf-cell-selected.gantt-pf-cell-rangeAnchor {
+  box-shadow: none;
+}
+.gantt-pf-cell-active:not(.gantt-pf-cell-selected)::after {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border: 1px solid #2563eb;
+  box-sizing: border-box;
+  content: "";
+  pointer-events: none;
+}
+.gantt-pf-cell-editing {
+  z-index: 2;
+  padding: 0;
+}
+.gantt-pf-cell-readonly {
+  cursor: default;
+}
+.gantt-pf-cell:not(.gantt-pf-cell-readonly) {
+  cursor: cell;
+}
+.gantt-pf-cell:not(.gantt-pf-cell-readonly):hover {
+  box-shadow: inset 0 0 0 9999px rgba(15, 23, 42, 0.06);
+}
+.gantt-pf-cell-selected:not(.gantt-pf-cell-active):hover {
+  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.16);
+}
+.gantt-pf-cell-selected.gantt-pf-cell-active:hover {
+  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.12);
+}
+.gantt-pf-cell-selected.gantt-pf-cell-rangeAnchor:hover,
+.gantt-pf-cell-selected.gantt-pf-cell-rangeAnchor.gantt-pf-cell-active:hover {
+  box-shadow: none;
+}
+.gantt-pf-cell-active:not(.gantt-pf-cell-selected):hover {
+  box-shadow: none;
+}
+.gantt-pf-cell-active:not(.gantt-pf-cell-selected):hover::after {
+  border-color: #1d4ed8;
+}
+.gantt-pf-cell-rangeLeft::before,
+.gantt-pf-cell-rangeRight::before,
+.gantt-pf-cell-rangeTop::before,
+.gantt-pf-cell-rangeBottom::before {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  box-sizing: border-box;
+  content: "";
+  pointer-events: none;
+}
+.gantt-pf-cell-rangeLeft::before {
+  border-left: 1px solid #2563eb;
+}
+.gantt-pf-cell-rangeRight::before {
+  border-right: 1px solid #2563eb;
+}
+.gantt-pf-cell-rangeTop::before {
+  border-top: 1px solid #2563eb;
+}
+.gantt-pf-cell-rangeBottom::before {
+  border-bottom: 1px solid #2563eb;
+}
+.gantt-pf-cell-rangeLeft.gantt-pf-cell-rangeRight::before {
+  border-left: 1px solid #2563eb;
+  border-right: 1px solid #2563eb;
+}
+.gantt-pf-cell-rangeTop.gantt-pf-cell-rangeBottom::before {
+  border-top: 1px solid #2563eb;
+  border-bottom: 1px solid #2563eb;
+}
+.gantt-pf-fillHandle {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  z-index: 3;
+  width: 7px;
+  height: 7px;
+  border: 1px solid #ffffff;
+  box-sizing: border-box;
+  background: #2563eb;
+  cursor: crosshair;
+}
+.gantt-pf-cell-editing:hover {
+  box-shadow: none;
+}
+.gantt-pf-cellValue {
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+}
+.gantt-pf-editor {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  border: 1px solid var(--gantt-grid-line-color, #e0e0e0);
+  border-radius: 0;
+  box-sizing: border-box;
+  background: #ffffff;
+  padding: 0 clamp(2px, calc(var(--gantt-pf-day-width) * 0.1), 4px);
+  color: #0f172a;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  text-align: right;
+  box-shadow: none;
+}
+.gantt-pf-editor:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
+}
+.gantt-pf-overflowTooltip {
+  position: absolute;
+  z-index: 20;
+  transform: translate(-50%, calc(-100% - 4px));
+  pointer-events: none;
+  max-width: 160px;
+  padding: 4px 8px;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  border-radius: 4px;
+  background: #ffffff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
+  color: #0f172a;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.2;
+  white-space: nowrap;
+  animation: gantt-pf-tooltip-in 90ms ease-out;
+}
+@keyframes gantt-pf-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, calc(-100% - 1px));
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, calc(-100% - 4px));
+  }
+}
+
 /* src/components/GanttChart/GanttChart.css */
 .gantt-container {
   width: 100%;

package/package.json

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