sag_components 2.0.0-beta222 → 2.0.0-beta224

package/dist/index.esm.js

@@ -9289,7 +9289,7 @@ const Label$7 = styled.label`
   position: absolute;
   top: ${props => {
   const height = parseInt(props.height.replace('px', ''), 10);
-  return props.isFocused || props.hasValue ? '0px' : `${height / 2}px`;
+  return props.isFocused || props.hasValue ? '0px' : `${height / 2 - 4}px`;
 }};
   left: ${props => props.isFocused || props.hasValue ? '23px' : '10px'};
   font-family: Poppins;  
@@ -39627,6 +39627,22 @@ const HeroButton = styled.button`
     pointer-events: none;
   }
 `;
+const EditableCell = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+`;
+const PencilButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  > svg {
+    pointer-events: none;
+  }
+`;
 
 // MessageBox.styles.js
 const ModalOverlay = styled.div`
@@ -40122,6 +40138,21 @@ const HeroIcon = ({
   fill: "white"
 }))));
 
+const PencilIcon = ({
+  width = "15",
+  height = "15",
+  fill = "#B1B1B1"
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 15 15",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("path", {
+  d: "M1.78316 10.0243C1.89427 9.63542 2.11649 9.27426 2.39427 8.99648L10.8387 0.552084C11.5331 -0.142361 12.6721 -0.142361 13.3665 0.552084L14.4498 1.63542C14.5331 1.71875 14.6165 1.82986 14.6721 1.9132C15.1442 2.60764 15.0609 3.55208 14.4498 4.1632L6.00538 12.6076C5.9776 12.6354 5.92204 12.6632 5.89427 12.7187C5.61649 12.9409 5.31093 13.1076 4.9776 13.2187L2.81093 13.8576L1.61649 14.2187C1.39427 14.2743 1.14427 14.2187 0.9776 14.0243C0.78316 13.8576 0.727604 13.6076 0.810938 13.3854L1.14427 12.191L1.78316 10.0243ZM3.06093 10.4132L2.86649 11.052L2.42204 12.5799L3.94982 12.1354L4.58871 11.9409C4.78316 11.8854 4.92204 11.8021 5.06093 11.6632L11.422 5.30208L9.69979 3.57986L3.33871 9.94093C3.31093 9.94093 3.31093 9.96875 3.28316 9.99648C3.17204 10.1076 3.11649 10.2465 3.06093 10.4132Z",
+  fill: fill
+}));
+
 // combinedShimmerHooks.js - Chrome shimmer effect integrated with your hooks
 
 // Chrome Shimmer Component
@@ -40222,7 +40253,8 @@ const TableBody = /*#__PURE__*/forwardRef(({
   onDropdownSelected = () => {},
   onCheckboxClick = () => {},
   onHeaderCheckboxClick = () => {},
-  onHeroClick = () => {}
+  onHeroClick = () => {},
+  onEditableClick = () => {}
 }, ref) => {
   // MOVE ALL VALIDATION TO THE VERY TOP BEFORE ANY HOOKS
   if (!Array.isArray(data) || !Array.isArray(columns)) {
@@ -40302,6 +40334,26 @@ const TableBody = /*#__PURE__*/forwardRef(({
     }
   }, [changeFocusIndex]);
 
+  // Close all dropdowns when clicking outside
+  useEffect(() => {
+    const handleClickOutside = () => {
+      setOpenDropdowns({});
+    };
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
+
+  // HANDLE SPECIAL CASE: EMPTY DATA AFTER ALL HOOKS
+  if (data.length === 0) {
+    return /*#__PURE__*/React$1.createElement(StyledTableBody, {
+      ref: ref
+    }, /*#__PURE__*/React$1.createElement(TableRow, null, /*#__PURE__*/React$1.createElement(TableCell, {
+      colSpan: columns.length
+    }, "No data available")));
+  }
+
   // Handle row click for focus state
   const handleRowClick = (row, rowIndex) => {
     setFocusedRowIndex(rowIndex);
@@ -40359,7 +40411,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
       return "";
     }
     try {
-      if ((value === null || value === undefined) && column?.fieldType?.toLowerCase() !== "comments") {
+      if ((value === null || value === undefined) && column?.fieldType?.toLowerCase() !== "comments" && column?.fieldType?.toLowerCase() !== "editable") {
         return "";
       }
 
@@ -40490,6 +40542,23 @@ const TableBody = /*#__PURE__*/forwardRef(({
             console.warn('Error formatting dotIndicator:', e);
             return null;
           }
+        case "editable":
+          try {
+            const isDefine = value === null || value === undefined;
+            return /*#__PURE__*/React$1.createElement(EditableCell, null, /*#__PURE__*/React$1.createElement("span", {
+              style: {
+                color: isDefine ? "#8B8989" : "inherit"
+              }
+            }, value ?? "Define"), /*#__PURE__*/React$1.createElement(PencilButton, {
+              onClick: e => {
+                e.stopPropagation();
+                handleEditableClick(row, column.key, value, rowIndex);
+              }
+            }, /*#__PURE__*/React$1.createElement(PencilIcon, null)));
+          } catch (e) {
+            console.warn('Error formatting editable:', e);
+            return null;
+          }
         case "packagestatus":
           try {
             const applyTooltipLogic = (element, tooltipText) => {
@@ -40783,7 +40852,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
             if (value === null || value === undefined) return null;
             return /*#__PURE__*/React$1.createElement(HeroButton, {
               onClick: e => {
-                // e.stopPropagation();
+                e.stopPropagation();
                 if (onHeroClick) {
                   onHeroClick(row, !value);
                 }
@@ -40860,26 +40929,17 @@ const TableBody = /*#__PURE__*/forwardRef(({
       onDropdownSelected(row, selectedOption, columnKey);
     }
   };
-
-  // Close all dropdowns when clicking outside
-  React$1.useEffect(() => {
-    const handleClickOutside = () => {
-      setOpenDropdowns({});
-    };
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, []);
-
-  // HANDLE SPECIAL CASE: EMPTY DATA AFTER ALL HOOKS
-  if (data.length === 0) {
-    return /*#__PURE__*/React$1.createElement(StyledTableBody, {
-      ref: ref
-    }, /*#__PURE__*/React$1.createElement(TableRow, null, /*#__PURE__*/React$1.createElement(TableCell, {
-      colSpan: columns.length
-    }, "No data available")));
-  }
+  const handleEditableClick = (row, columnKey, currentValue, rowIndex) => {
+    if (onEditableClick) {
+      onEditableClick({
+        fullRow: row,
+        columnName: columnKey,
+        currentValue: currentValue,
+        rowIndex: rowIndex
+      });
+    }
+    console.log('handler--------', row, columnKey, currentValue, rowIndex);
+  };
   return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(StyledTableBody, {
     ref: ref
   }, data.map((row, rowIndex) => {
@@ -41029,7 +41089,8 @@ TableBody.propTypes = {
   onDropdownSelected: PropTypes.func,
   onCheckboxClick: PropTypes.func,
   onHeaderCheckboxClick: PropTypes.func,
-  onHeroClick: PropTypes.func
+  onHeroClick: PropTypes.func,
+  onEditableClick: PropTypes.func
 };
 TableBody.displayName = "TableBody";
 
@@ -44394,6 +44455,7 @@ const Table = props => {
     headerCheckboxStates = {},
     onHeroClick = () => {},
     dotIndicatorColor = '#34D399',
+    onEditableClick = () => {},
     // Accept ref as a regular prop
     ref = null
   } = props;
@@ -44547,7 +44609,8 @@ const Table = props => {
     onDropdownSelected: onDropdownSelected,
     onCheckboxClick: onCheckboxClick,
     onHeaderCheckboxClick: onHeaderCheckboxClick,
-    onHeroClick: onHeroClick
+    onHeroClick: onHeroClick,
+    onEditableClick: onEditableClick
   })), 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, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noDataInSearchTitle), /*#__PURE__*/React$1.createElement("br", null), noDataInSearchMessage) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noEventsTitle), /*#__PURE__*/React$1.createElement("br", null), noEventsSubtitle)), !showNoDataInSearch && showNoEventsButton && /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: noEventsButtonIcon,