gantt-lib 0.81.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,39 +2124,409 @@
   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;
   z-index: 4;
+  display: grid;
+  grid-template-columns: 30px minmax(146px, 1fr) 80px 86px 32px;
+  align-items: center;
   background: var(--gantt-cell-background, #ffffff);
   border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
+  box-sizing: border-box;
+  color: #6b7280;
 }
-.gantt-resourceTimeline-resourceHeader {
+.gantt-resourceTimeline-resourceHeaderCell {
+  min-width: 0;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gantt-resourceTimeline-resourceHeaderNumber {
+  padding-left: 10px;
+}
+.gantt-resourceTimeline-resourceHeaderName {
+  padding-left: 40px;
+}
+.gantt-resourceTimeline-resourceHeaderActions {
+  text-align: right;
+}
+.gantt-resourceTimeline-resourceGroupHeader {
   display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 10px 12px 0;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
   box-sizing: border-box;
   border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
-  color: #1f2937;
+  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;
+  align-items: start;
+  column-gap: 0;
+  padding: 6px 0 0;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
+  color: #172b4d;
   font-size: 14px;
   font-weight: 500;
   background: var(--gantt-cell-background, #ffffff);
+  transition: background-color 120ms ease, box-shadow 120ms ease;
+}
+.gantt-resourceTimeline-resourceHeader:hover,
+.gantt-resourceTimeline-resourceHeaderMenuOpen {
+  background: #f4f8ff;
+  box-shadow: inset 0 0 0 9999px rgba(9, 30, 66, 0.015);
 }
 .gantt-resourceTimeline-resourceHeaderNew {
   align-items: center;
   padding-top: 0;
 }
+.gantt-resourceTimeline-resourceNumber {
+  min-width: 0;
+  padding: 1px 6px 0 10px;
+  color: #8993a4;
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Liberation Mono",
+    monospace;
+  font-size: 12px;
+  line-height: 1.25;
+}
 .gantt-resourceTimeline-resourceName {
+  position: relative;
   min-width: 0;
-  flex: 1 1 auto;
-  display: -webkit-box;
-  overflow: hidden;
+  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;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+}
+.gantt-resourceTimeline-resourceNameButton {
+  display: flex;
+  align-self: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 32px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #172b4d;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.25;
+  overflow: hidden;
+  padding: 2px 4px 0;
+  text-align: left;
+  vertical-align: top;
+  cursor: pointer;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.gantt-resourceTimeline-resourceNameButton:hover,
+.gantt-resourceTimeline-resourceNameButton:focus-visible {
+  outline: none;
+}
+.gantt-resourceTimeline-resourceNameButton:focus-visible {
+  box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.22);
+}
+.gantt-resourceTimeline-resourceNameInput {
+  top: 0;
+  left: 36px;
+  width: 100%;
+  min-width: 520px;
+  height: 32px;
+  font-size: 0.8rem;
+}
+.gantt-resourceTimeline-resourceTypeIconButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  margin-top: -1px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #6b778c;
+  cursor: pointer;
+  padding: 0;
+}
+.gantt-resourceTimeline-resourceTypeIconButton:hover:not(:disabled),
+.gantt-resourceTimeline-resourceTypeIconButton:focus-visible {
+  background: #ffffff;
+  border-color: #4c9aff;
+  outline: none;
+}
+.gantt-resourceTimeline-resourceTypeIconButton:focus-visible {
+  box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.22);
+}
+.gantt-resourceTimeline-resourceTypeIconButton:disabled {
+  cursor: default;
+  opacity: 1;
+}
+.gantt-resourceTimeline-resourceTypeIcon {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+.gantt-resourceTimeline-resourceTypeIconPeople {
+  color: #0052cc;
+}
+.gantt-resourceTimeline-resourceTypeIconEquipment {
+  color: #172b4d;
+}
+.gantt-resourceTimeline-resourceTypeIconMaterials {
+  color: #de350b;
+}
+.gantt-resourceTimeline-resourceTypeIconOther {
+  color: #6b778c;
+}
+.gantt-resourceTimeline-resourceScopeChip span,
+.gantt-resourceTimeline-resourceAssignments span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gantt-resourceTimeline-resourceScopeChip {
+  display: inline-flex;
+  align-items: center;
+  justify-self: start;
+  margin-top: 1px;
+  max-width: calc(100% - 16px);
+  min-width: 58px;
+  height: 22px;
+  margin: 0 6px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-family: inherit;
+}
+.gantt-resourceTimeline-resourceScopeChip:hover:not(:disabled) {
+  background-color: #ffffff;
+  border-color: #dfe1e6;
+}
+.gantt-resourceTimeline-resourceScopeChip:focus-visible {
+  background: #ffffff;
+  border-color: #4c9aff;
+  box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.22);
+  outline: none;
+}
+.gantt-resourceTimeline-resourceScopeChip:disabled {
+  cursor: default;
+  opacity: 1;
+}
+.gantt-resourceTimeline-resourceScopeChip,
+.gantt-resourceTimeline-resourceOptionScopeDot {
+  max-width: calc(100% - 16px);
+  overflow: hidden;
+  border-radius: 3px;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gantt-resourceTimeline-resourceScopeShared {
+  background: #deebff;
+  color: #0747a6;
+}
+.gantt-resourceTimeline-resourceScopeProject {
+  background: #e3fcef;
+  color: #006644;
+}
+.gantt-resourceTimeline-resourceAssignments {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 3px;
+  justify-self: start;
+  margin-top: 0;
+  max-width: calc(100% - 16px);
+  min-width: 50px;
+  min-height: 34px;
+  margin: 0 6px;
+  overflow: hidden;
+  color: #5e6c84;
+  padding: 0;
+  font-size: 11px;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gantt-resourceTimeline-resourceAssignmentCount {
+  display: grid;
+  grid-template-columns: 28px 22px;
+  align-items: center;
+  column-gap: 4px;
+  width: 100%;
+  color: #97a0af;
+  font-size: 11px;
+  font-weight: 500;
+}
+.gantt-resourceTimeline-resourceAssignmentIcon {
+  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;
+  padding: 4px !important;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.gantt-resourceTimeline-resourceOption {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #172b4d;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  padding: 6px 8px;
+  text-align: left;
+  white-space: nowrap;
+}
+.gantt-resourceTimeline-resourceOption:hover,
+.gantt-resourceTimeline-resourceOptionActive {
+  background: #deebff;
+  color: #0747a6;
+}
+.gantt-resourceTimeline-resourceOptionIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+}
+.gantt-resourceTimeline-resourceOptionScopeDot {
+  width: 10px;
+  height: 10px;
+  min-width: 10px;
+  padding: 0;
+  flex: 0 0 auto;
+}
+.gantt-resourceTimeline-resourceActions {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  padding: 0 8px;
 }
 .gantt-resourceTimeline-conflictBadge {
   display: inline-flex;
@@ -2158,8 +2538,8 @@
   padding: 0 5px;
   border: 0;
   border-radius: 3px;
-  background: #fee2e2;
-  color: #b91c1c;
+  background: #de350b;
+  color: #ffffff;
   cursor: pointer;
   font-size: 0.6875rem;
   font-weight: 700;
@@ -2168,8 +2548,8 @@
 }
 .gantt-resourceTimeline-conflictBadge:hover,
 .gantt-resourceTimeline-conflictBadge:focus-visible {
-  background: #fecaca;
-  color: #991b1b;
+  background: #bf2600;
+  color: #ffffff;
   outline: none;
 }
 .gantt-resourceTimeline-conflictBadge:focus-visible {
@@ -2180,9 +2560,8 @@
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
-  width: 24px;
-  height: 24px;
-  margin-top: -3px;
+  width: 22px;
+  height: 22px;
   border: 0;
   border-radius: 4px;
   background: transparent;
@@ -2249,6 +2628,7 @@
   color: #dc2626;
 }
 .gantt-resourceTimeline-resourceInput {
+  grid-column: 2 / span 2;
   width: 100%;
 }
 .gantt-resourceTimeline-addResourceButton {
@@ -2284,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;
@@ -2299,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;
@@ -2340,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);
@@ -2514,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.81.0",
+  "version": "0.83.0",
   "description": "Lightweight React Gantt chart component library",
   "license": "MIT",
   "repository": {