sag_components 2.0.0-beta334 → 2.0.0-beta336

package/dist/index.esm.js

@@ -634,6 +634,26 @@ const ChervronLeftIcon = _ref => {
   }));
 };
 
+const CalendarIcon = _ref => {
+  let {
+    clicked,
+    width = "14",
+    height = "14",
+    fill = "#212121",
+    color
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 11 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M2.625 0C2.8125 0 3 0.1875 3 0.375V1.5H7.5V0.375C7.5 0.1875 7.66406 0 7.875 0C8.0625 0 8.25 0.1875 8.25 0.375V1.5H9C9.82031 1.5 10.5 2.17969 10.5 3V3.75V4.5V10.5C10.5 11.3438 9.82031 12 9 12H1.5C0.65625 12 0 11.3438 0 10.5V4.5V3.75V3C0 2.17969 0.65625 1.5 1.5 1.5H2.25V0.375C2.25 0.1875 2.41406 0 2.625 0ZM9.75 4.5H7.3125V6.1875H9.75V4.5ZM9.75 6.9375H7.3125V8.8125H9.75V6.9375ZM9.75 9.5625H7.3125V11.25H9C9.39844 11.25 9.75 10.9219 9.75 10.5V9.5625ZM6.5625 8.8125V6.9375H3.9375V8.8125H6.5625ZM3.9375 9.5625V11.25H6.5625V9.5625H3.9375ZM3.1875 8.8125V6.9375H0.75V8.8125H3.1875ZM0.75 9.5625V10.5C0.75 10.9219 1.07812 11.25 1.5 11.25H3.1875V9.5625H0.75ZM0.75 6.1875H3.1875V4.5H0.75V6.1875ZM3.9375 6.1875H6.5625V4.5H3.9375V6.1875ZM9 2.25H1.5C1.07812 2.25 0.75 2.60156 0.75 3V3.75H9.75V3C9.75 2.60156 9.39844 2.25 9 2.25Z",
+    fill: color || fill
+  }));
+};
+
 const Button$1 = props => {
   const {
     text = "",
@@ -680,14 +700,15 @@ const Button$1 = props => {
     plus: Plus,
     left: ChervronLeftIcon,
     right: ChervronRightIcon,
-    vicon: VIcon
+    vicon: VIcon,
+    calendar: CalendarIcon
   };
   const getIcon = icon => {
     if (!icon || icon === "none") return null;
     const IconComponent = iconMap[icon.toLowerCase()];
     const iconProps = {
-      height: "16px",
-      width: "16px",
+      height: icon.toLowerCase() === "calendar" ? "14" : "16px",
+      width: icon.toLowerCase() === "calendar" ? "14" : "16px",
       color: disabled ? disabledTextColor || "#B1B1B1" : hover ? hoverTextColor || (type === "secondary" ? "#229E38" : "#ffffff") : textColor || (type === "secondary" ? "#212121" : "#ffffff"),
       fill: disabled ? disabledTextColor || "#B1B1B1" : hover ? hoverTextColor || (type === "secondary" ? "#229E38" : "#ffffff") : textColor || (type === "secondary" ? "#212121" : "#ffffff")
     };
@@ -37359,6 +37380,16 @@ const Loader = styled.span`
   animation: ${rotation} 1.5s infinite ease;
   transform: translateZ(0);
 `;
+const DirtyFieldsCounter = styled.div`
+  font-family: 'Poppins', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${({
+  $dirty
+}) => $dirty ? '#EF4444' : '#1f7677'};
+  padding: 6px 16px;
+  text-align: left;
+`;
 const LoaderWrapper = styled.div`
   position: absolute;
   top: 50%;
@@ -41121,6 +41152,7 @@ const TableHeader = ({
   activeFilters = [],
   activeSorts = [],
   expandable = false,
+  expandPosition = "left",
   onHeaderCheckboxClick = () => {},
   headerCheckboxStates = {},
   resetFiltersKey = 0,
@@ -41668,7 +41700,7 @@ const TableHeader = ({
       onReset: () => handleSortReset(key)
     });
   };
-  return /*#__PURE__*/React$1.createElement(StyledTableHeader, null, /*#__PURE__*/React$1.createElement("tr", null, expandable && /*#__PURE__*/React$1.createElement(HeaderCell, {
+  return /*#__PURE__*/React$1.createElement(StyledTableHeader, null, /*#__PURE__*/React$1.createElement("tr", null, expandable && expandPosition !== "right" && /*#__PURE__*/React$1.createElement(HeaderCell, {
     $fieldType: "expand",
     $minWidth: "16px",
     $maxWidth: "16px"
@@ -41689,7 +41721,12 @@ const TableHeader = ({
     style: {
       accentColor: '#066768'
     }
-  }), column.title && /*#__PURE__*/React$1.createElement(ColumnLabel, null, column.title), (column.filter || column.sort) && /*#__PURE__*/React$1.createElement(ColumnActions, null, column.sort && /*#__PURE__*/React$1.createElement(IconButton, {
+  }), column.title && /*#__PURE__*/React$1.createElement(ColumnLabel, null, column.title, column.required && /*#__PURE__*/React$1.createElement("span", {
+    style: {
+      color: '#EF4444',
+      marginLeft: '5px'
+    }
+  }, "*")), (column.filter || column.sort) && /*#__PURE__*/React$1.createElement(ColumnActions, null, column.sort && /*#__PURE__*/React$1.createElement(IconButton, {
     ref: el => iconRefs.current[`sort-${column.key}`] = el,
     onClick: () => handleSort(column.key),
     onMouseEnter: () => setFocusedSort(column.key),
@@ -41714,7 +41751,11 @@ const TableHeader = ({
   }, /*#__PURE__*/React$1.createElement(FilterIcon, {
     state: getFilterIconState(column.key),
     isActive: shouldShowActiveIcon(column.key)
-  }))))))), visibleSortPopWrapper && /*#__PURE__*/createPortal(/*#__PURE__*/React$1.createElement(PopWrapper, {
+  })))))), expandable && expandPosition === "right" && /*#__PURE__*/React$1.createElement(HeaderCell, {
+    $fieldType: "expand",
+    $minWidth: "16px",
+    $maxWidth: "16px"
+  }, /*#__PURE__*/React$1.createElement(ColumnContent, null, /*#__PURE__*/React$1.createElement(ColumnLabel, null)))), visibleSortPopWrapper && /*#__PURE__*/createPortal(/*#__PURE__*/React$1.createElement(PopWrapper, {
     ref: popupRef,
     className: "pop-wrapper",
     top: popPosition.top,
@@ -41904,6 +41945,10 @@ const TableCell = styled.td`
     position: relative;
   `}
 
+  ${props => props.$editable && `
+    overflow: visible;
+  `}
+
   /* CSS-only tooltip */
   &[data-tooltip]:hover::before {
     content: attr(data-tooltip);
@@ -41957,6 +42002,31 @@ const TableCell = styled.td`
     }
   }
 
+  input {
+    display: block;
+  }
+
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  input:hover:not(:focus) {
+    border: 1px solid rgba(0, 0, 0, 0.6) !important;
+    border-radius: 4px;
+  }
+
+  input:focus {
+    border: 2px solid #212121 !important;
+    border-radius: 4px;
+    outline: none !important;
+  }
+
   ${props => {
   switch (props.$fieldType) {
     case "currency":
@@ -42527,6 +42597,137 @@ const PencilButton = styled.button`
     pointer-events: none;
   }
 `;
+const NotAvailableIconButton = styled.button`
+  position: absolute;
+  right: 4px;
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  height: fit-content;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8B8989;
+  opacity: 0;
+  transition: opacity 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    color: #EF4444;
+  }
+
+  &::before {
+    content: 'Mark as N/A';
+    position: absolute;
+    bottom: calc(100% + 12px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: white;
+    color: #212121;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    z-index: 1000;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: calc(100% + 7px);
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    background: white;
+    transform: translateX(-50%) rotate(45deg);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    z-index: 1001;
+  }
+
+  &:hover::before,
+  &:hover::after {
+    opacity: 1;
+  }
+`;
+const NotAvailableCellWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  &:hover ${NotAvailableIconButton} {
+    opacity: 1;
+  }
+`;
+const NotAvailableText = styled.div`
+  position: relative;
+  width: 100%;
+  color: #8B8989;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: normal;
+  cursor: pointer;
+  padding: 1px 2px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+
+  &:hover {
+    border-color: rgba(0, 0, 0, 0.6);
+  }
+
+  &::before {
+    content: 'Click to make required again';
+    position: absolute;
+    bottom: calc(100% + 12px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: white;
+    color: #212121;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    z-index: 1000;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: calc(100% + 7px);
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    background: white;
+    transform: translateX(-50%) rotate(45deg);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    z-index: 1001;
+  }
+
+  &:hover::before,
+  &:hover::after {
+    opacity: 1;
+  }
+`;
 
 // MessageBox.styles.js
 const ModalOverlay = styled.div`
@@ -43257,6 +43458,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
   onCommentSave = () => {},
   commentTextLimit = 150,
   expandable = false,
+  expandPosition = "left",
   expandedRows = {},
   expandedContent = {},
   onExpandRow = () => {},
@@ -43267,7 +43469,8 @@ const TableBody = /*#__PURE__*/forwardRef(({
   onHeroClick = () => {},
   onEditableClick = () => {},
   isEditMode = false,
-  editRowIndex = -1
+  editRowIndex = -1,
+  markAllNotValidFields = false
 }, ref) => {
   if (!Array.isArray(data) || !Array.isArray(columns)) {
     console.warn("TableBody: Invalid data or columns prop");
@@ -43284,6 +43487,20 @@ const TableBody = /*#__PURE__*/forwardRef(({
   const [hasInitialValue, setHasInitialValue] = useState(false);
   const [shimmerRowIndex, setShimmerRowIndex] = useState(-1);
   const [shimmerStartTime, setShimmerStartTime] = useState(null);
+  const [notAvailableFields, setNotAvailableFields] = useState(() => {
+    const initial = {};
+    data.forEach(row => {
+      columns.forEach(col => {
+        if (col.allowNotAvailable && col.notAvailableValue !== undefined && row[col.key] === col.notAvailableValue) {
+          initial[row.id] = {
+            ...(initial[row.id] ?? {}),
+            [col.key]: true
+          };
+        }
+      });
+    });
+    return initial;
+  });
   const getNestedValue = (obj, path) => {
     if (!path || typeof path !== 'string') return undefined;
     return path.split('.').reduce((current, key) => {
@@ -44077,7 +44294,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
       onMouseEnter: () => !isEditMode && setHoveredRowIndex(rowIndex),
       onMouseLeave: () => !isEditMode && setHoveredRowIndex(null),
       onClick: () => handleRowClick(row, rowIndex)
-    }, expandable && expandedContent[rowIndex] !== undefined && expandedContent[rowIndex] !== null ? /*#__PURE__*/React$1.createElement(TableCell, {
+    }, expandPosition !== "right" && (expandable && expandedContent[rowIndex] !== undefined && expandedContent[rowIndex] !== null ? /*#__PURE__*/React$1.createElement(TableCell, {
       $fieldType: "expand",
       $minWidth: "16px",
       $maxWidth: "16px"
@@ -44096,13 +44313,21 @@ const TableBody = /*#__PURE__*/forwardRef(({
       $fieldType: "expand",
       $minWidth: "16px",
       $maxWidth: "16px"
-    }) : null, columns.map((column, columnIndex) => {
+    }) : null), columns.map((column, columnIndex) => {
       if (!column || !column.key) {
         console.warn(`Invalid column at index ${columnIndex}:`, column);
         return /*#__PURE__*/React$1.createElement(TableCell, {
           key: `invalid-${columnIndex}`
         }, "Invalid Column");
       }
+      if (column.groupBreak && rowIndex > 0 && data[rowIndex - 1][column.key] === row[column.key]) {
+        return /*#__PURE__*/React$1.createElement(TableCell, {
+          key: `${column.key}-${rowIndex}`,
+          $fieldType: column.fieldType?.toLowerCase(),
+          $minWidth: column.minWidth,
+          $maxWidth: column.maxWidth
+        });
+      }
       let value, formattedValue, fieldTooltip;
       try {
         value = column.key.includes('.') ? getNestedValue(row, column.key) : row[column.key];
@@ -44121,7 +44346,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
       return /*#__PURE__*/React$1.createElement(TableCell, {
         key: `${column.key}-${rowIndex}`,
         ref: el => {
-          if (isTextBasedField && el && formattedValue) {
+          if (isTextBasedField && el && formattedValue && !column.editable) {
             const hasOverflow = shouldShowTooltip(el);
             const tooltipTextToShow = hasOverflow ? String(formattedValue) : fieldTooltip;
             if (tooltipTextToShow) {
@@ -44149,13 +44374,81 @@ const TableBody = /*#__PURE__*/forwardRef(({
           }
         },
         $fieldType: fieldType,
+        $editable: !!column.editable,
         $color: column.color,
         $minWidth: column.minWidth,
         $maxWidth: column.maxWidth
       }, fieldTooltip && !isTextBasedField ? /*#__PURE__*/React$1.createElement(CellContentWrapper, {
         ref: el => applyTooltip(el, fieldTooltip)
-      }, renderCellContent(formattedValue, isTextBasedField, shouldShimmer)) : renderCellContent(formattedValue, isTextBasedField, shouldShimmer));
-    })), expandable && expandedRows[rowIndex] && /*#__PURE__*/React$1.createElement(ExpandedRow, {
+      }, renderCellContent(formattedValue, isTextBasedField, shouldShimmer)) : column.groupBreak ? /*#__PURE__*/React$1.createElement("strong", null, renderCellContent(formattedValue, isTextBasedField, shouldShimmer)) : column.editable && column.allowNotAvailable ? /*#__PURE__*/React$1.createElement(NotAvailableCellWrapper, null, notAvailableFields[row.id]?.[column.key] ? /*#__PURE__*/React$1.createElement(NotAvailableText, {
+        onClick: () => {
+          setNotAvailableFields(prev => ({
+            ...prev,
+            [row.id]: {
+              ...(prev[row.id] ?? {}),
+              [column.key]: false
+            }
+          }));
+          column.onNotAvailableChange?.(row, false);
+        }
+      }, "N/A") : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, column.renderEditableCell?.(rowIndex, row, {
+        markAllNotValidFields
+      }), /*#__PURE__*/React$1.createElement(NotAvailableIconButton, {
+        type: "button",
+        onClick: e => {
+          e.stopPropagation();
+          setNotAvailableFields(prev => ({
+            ...prev,
+            [row.id]: {
+              ...(prev[row.id] ?? {}),
+              [column.key]: true
+            }
+          }));
+          column.onNotAvailableChange?.(row, true);
+        }
+      }, /*#__PURE__*/React$1.createElement("svg", {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 14 14",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, /*#__PURE__*/React$1.createElement("circle", {
+        cx: "7",
+        cy: "7",
+        r: "6",
+        stroke: "currentColor",
+        strokeWidth: "1.5"
+      }), /*#__PURE__*/React$1.createElement("line", {
+        x1: "2.5",
+        y1: "11.5",
+        x2: "11.5",
+        y2: "2.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }))))) : column.editable && column.renderEditableCell ? column.renderEditableCell(rowIndex, row, {
+        markAllNotValidFields
+      }) : renderCellContent(formattedValue, isTextBasedField, shouldShimmer));
+    }), expandPosition === "right" && (expandable && expandedContent[rowIndex] !== undefined && expandedContent[rowIndex] !== null ? /*#__PURE__*/React$1.createElement(TableCell, {
+      $fieldType: "expand",
+      $minWidth: "16px",
+      $maxWidth: "16px"
+    }, /*#__PURE__*/React$1.createElement(ExpandIcon, {
+      onClick: e => handleExpandClick(row, rowIndex, e),
+      $isExpanded: expandedRows[rowIndex] || false
+    }, expandedRows[rowIndex] ? /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
+      width: "12",
+      height: "12",
+      color: "#666"
+    }) : /*#__PURE__*/React$1.createElement(ChervronRightIcon, {
+      width: "12",
+      height: "12",
+      fill: "#666"
+    }))) : expandable === true ? /*#__PURE__*/React$1.createElement(TableCell, {
+      $fieldType: "expand",
+      $minWidth: "16px",
+      $maxWidth: "16px"
+    }) : null)), expandable && expandedRows[rowIndex] && /*#__PURE__*/React$1.createElement(ExpandedRow, {
       $expandedBackgroundColor: expandedBackgroundColor
     }, /*#__PURE__*/React$1.createElement(TableCell, {
       colSpan: columns.length + 1
@@ -47781,6 +48074,7 @@ const Table = props => {
     editRowIndex = -1,
     onCommentSave = () => {},
     expandable = false,
+    expandPosition = "left",
     expandedRows = {},
     expandedContent = {},
     onExpandRow = () => {},
@@ -47809,7 +48103,10 @@ const Table = props => {
     showFooter = false,
     total,
     rowLabel = "",
-    footerRight = null
+    footerRight = null,
+    showDirtyFieldsCounter = false,
+    dirtyFieldsCount = 0,
+    markAllNotValidFields = false
   } = props;
   const scrollWrapperRef = useRef(null);
   const tableBodyRef = useRef(null);
@@ -47928,6 +48225,7 @@ const Table = props => {
     onFilter: onFilter,
     onSelectAll: onSelectAll,
     expandable: expandable,
+    expandPosition: expandPosition,
     onHeaderCheckboxClick: onHeaderCheckboxClick,
     headerCheckboxStates: headerCheckboxStates,
     resetFiltersKey: resetFiltersKey,
@@ -47955,6 +48253,7 @@ const Table = props => {
     changeFocusIndex: changeFocusIndex,
     onFocusChange: handleTableFocusChange,
     expandable: expandable,
+    expandPosition: expandPosition,
     expandedRows: expandedRows,
     expandedContent: expandedContent,
     onExpandRow: onExpandRow,
@@ -47966,7 +48265,8 @@ const Table = props => {
     onHeroClick: onHeroClick,
     onEditableClick: onEditableClick,
     isEditMode: isEditMode,
-    editRowIndex: editRowIndex
+    editRowIndex: editRowIndex,
+    markAllNotValidFields: markAllNotValidFields
   })), data.length === 0 && /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, showNoDataInSearch ? getNoDataSearchIcon(noDataSearchIcon) : getNoDataIcon(noDataIcon)), /*#__PURE__*/React$1.createElement(NoEventsMessage, {
     titleSize: titleSize,
     subTitleSize: subTitleSize
@@ -47996,9 +48296,10 @@ const Table = props => {
     total: total,
     rowLabel: rowLabel,
     isLoading: isLoading,
-    isLoadingText: isLoadingText,
-    footerRight: footerRight
-  }))));
+    isLoadingText: isLoadingText
+  }), showDirtyFieldsCounter && (dirtyFieldsCount > 0 ? /*#__PURE__*/React$1.createElement(DirtyFieldsCounter, {
+    $dirty: true
+  }, dirtyFieldsCount, " field", dirtyFieldsCount !== 1 ? 's' : '', " modified") : /*#__PURE__*/React$1.createElement(DirtyFieldsCounter, null, "\u2713 All values complete")))));
 };
 Table.displayName = "Table";