gantt-lib 0.80.1 → 0.82.0

package/dist/styles.css

@@ -2118,35 +2118,307 @@
   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-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-resourceHeader {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 10px 12px 0;
+  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: #1f2937;
+  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 {
   min-width: 0;
-  flex: 1 1 auto;
-  display: -webkit-box;
-  overflow: hidden;
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  min-height: 32px;
+  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-resourceNameInput {
+  width: 100%;
+  min-width: 0;
+  height: 34px;
+  min-height: 34px;
+  resize: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: #172b4d;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.25;
+  overflow: hidden;
+  padding: 2px 4px;
+  text-overflow: ellipsis;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.gantt-resourceTimeline-resourceNameInput:hover:not(:disabled) {
+  background: #ffffff;
+  border-color: #dfe1e6;
+}
+.gantt-resourceTimeline-resourceNameInput:focus {
+  background: #ffffff;
+  border-color: #4c9aff;
+  box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.22);
+  outline: none;
+}
+.gantt-resourceTimeline-resourceNameInput:disabled {
+  opacity: 1;
+}
+.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: 1px;
+  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: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #6b778c;
+  font-size: 11px;
+  font-weight: 500;
+}
+.gantt-resourceTimeline-resourceAssignmentIcon {
+  flex: 0 0 auto;
+  fill: currentColor;
+  stroke: none;
+}
+.gantt-resourceTimeline-resourceWorkedDays {
+  color: #172b4d;
+  font-size: 12px;
+  font-weight: 700;
+}
+.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;
@@ -2156,21 +2428,32 @@
   min-width: 18px;
   height: 18px;
   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;
+  font-family: inherit;
   line-height: 18px;
 }
+.gantt-resourceTimeline-conflictBadge:hover,
+.gantt-resourceTimeline-conflictBadge:focus-visible {
+  background: #bf2600;
+  color: #ffffff;
+  outline: none;
+}
+.gantt-resourceTimeline-conflictBadge:focus-visible {
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
+}
 .gantt-resourceTimeline-resourceMenuButton {
   display: inline-flex;
   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;
@@ -2237,6 +2520,7 @@
   color: #dc2626;
 }
 .gantt-resourceTimeline-resourceInput {
+  grid-column: 2 / span 2;
   width: 100%;
 }
 .gantt-resourceTimeline-addResourceButton {
@@ -2263,6 +2547,7 @@
 }
 .gantt-resourceTimeline-chartSurface {
   position: relative;
+  z-index: 0;
   flex: 1;
 }
 .gantt-resourceTimeline-stickyHeader {
@@ -2327,9 +2612,47 @@
   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);
+}
+.gantt-resourceTimeline-itemMenuButton {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  z-index: 4;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.22);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1;
+  opacity: 0;
+  transform: translateY(-1px);
+  transition:
+    background-color 120ms ease,
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+.gantt-resourceTimeline-item:hover .gantt-resourceTimeline-itemMenuButton,
+.gantt-resourceTimeline-item:focus-within .gantt-resourceTimeline-itemMenuButton,
+.gantt-resourceTimeline-itemActive .gantt-resourceTimeline-itemMenuButton {
+  opacity: 1;
+  transform: translateY(0);
+}
+.gantt-resourceTimeline-itemMenuButton:hover,
+.gantt-resourceTimeline-itemMenuButton:focus-visible {
+  background: rgba(255, 255, 255, 0.34);
+  outline: none;
 }
 .gantt-resourceTimeline-weekendOverlay {
   position: absolute;
@@ -2376,6 +2699,10 @@
   opacity: 0.85;
   box-shadow: 0 4px 12px rgba(31, 41, 55, 0.2);
 }
+.gantt-resourceTimeline-itemConflictActive {
+  z-index: 31;
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.85), 0 4px 12px rgba(31, 41, 55, 0.2);
+}
 .gantt-resourceTimeline-itemDisabled {
   cursor: default;
 }

package/package.json

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