sag_components 2.0.0-beta230 → 2.0.0-beta231

package/dist/index.d.ts

@@ -1304,12 +1304,13 @@ declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, t
     restrictToRange?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Input({ label, labelEmptyValue, size, selectedValue, placeHolder, onChange, onClick, onBlur, required, disabled, isDarkerBackground, width, height, error, errorMessage, labelColor, leftIcon, rightIcon, password, leftIconOnClick, rightIconOnClick, multiline, rows, maxLength, regex, onKeyDown, }: {
+declare function Input({ label, labelEmptyValue, size, selectedValue, placeHolder, inputType, onChange, onClick, onBlur, required, disabled, isDarkerBackground, width, height, error, errorMessage, labelColor, leftIcon, rightIcon, password, leftIconOnClick, rightIconOnClick, multiline, rows, maxLength, regex, onKeyDown, }: {
     label: any;
     labelEmptyValue: any;
     size: any;
     selectedValue: any;
     placeHolder: any;
+    inputType?: string;
     onChange: any;
     onClick: any;
     onBlur: any;
@@ -1538,7 +1539,7 @@ declare function RangePop(props: any): react_jsx_runtime.JSX.Element;
 
 declare function SearchInput(props: any): react_jsx_runtime.JSX.Element;
 
-declare function ItemManagerPanel({ width, height, disableSection, onSendForms, editMode, disabledSendForms, AllFormsSent, itemAndPackage, setItemAndPackage, linkColor, backgroundColor, buttonTooltipText, trashTooltipText, maxVisibleVendors, componentText }: {
+declare function ItemManagerPanel({ width, height, disableSection, onSendForms, editMode, disabledSendForms, AllFormsSent, itemAndPackage, setItemAndPackage, linkColor, backgroundColor, buttonTooltipText, trashTooltipText, maxVisibleVendors, componentText, SubTitleColor }: {
     width?: string;
     height?: string;
     disableSection?: boolean;
@@ -1554,6 +1555,7 @@ declare function ItemManagerPanel({ width, height, disableSection, onSendForms,
     trashTooltipText?: string;
     maxVisibleVendors?: number;
     componentText?: string;
+    SubTitleColor?: string;
 }): react_jsx_runtime.JSX.Element;
 
 /**

package/dist/index.esm.js

@@ -575,6 +575,24 @@ const PackageSendIcon = () => /*#__PURE__*/React$1.createElement("svg", {
   fill: "#B1B1B1"
 }));
 
+const MenuItemOpenIcon = _ref => {
+  let {
+    width = '16',
+    height = '16',
+    color = '#7E7E7E'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 16 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M7.40234 8.84766L0.652344 2.09766C0.300781 1.78125 0.300781 1.25391 0.652344 0.902344C0.96875 0.585938 1.49609 0.585938 1.84766 0.902344L8 7.08984L14.1523 0.9375C14.4688 0.585938 14.9961 0.585938 15.3477 0.9375C15.6641 1.25391 15.6641 1.78125 15.3477 2.09766L8.5625 8.84766C8.24609 9.19922 7.71875 9.19922 7.40234 8.84766Z",
+    fill: color
+  }));
+};
+
 const ChervronRightIcon = _ref => {
   let {
     width = "8",
@@ -3181,24 +3199,6 @@ const IconWrapper$4 = styled.div`
   align-content: center;  
 `;
 
-const MenuItemOpenIcon = _ref => {
-  let {
-    width = '16',
-    height = '16',
-    color = '#7E7E7E'
-  } = _ref;
-  return /*#__PURE__*/React$1.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 16 10",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    d: "M7.40234 8.84766L0.652344 2.09766C0.300781 1.78125 0.300781 1.25391 0.652344 0.902344C0.96875 0.585938 1.49609 0.585938 1.84766 0.902344L8 7.08984L14.1523 0.9375C14.4688 0.585938 14.9961 0.585938 15.3477 0.9375C15.6641 1.25391 15.6641 1.78125 15.3477 2.09766L8.5625 8.84766C8.24609 9.19922 7.71875 9.19922 7.40234 8.84766Z",
-    fill: color
-  }));
-};
-
 const MenuItemRightIcon = _ref => {
   let {
     clicked,
@@ -35635,6 +35635,18 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         color: newColor,
         onClick: callBackOnClick
       }));
+    case 'openicon':
+      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        className: "MenuItemOpenIcon",
+        pointer: pointer,
+        disabled: disabled,
+        onClick: callBackOnClick
+      }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
+        height: newIconHeight,
+        width: newIconWidth,
+        color: newColor,
+        onClick: callBackOnClick
+      }));
     default:
       return '';
   }
@@ -35826,6 +35838,7 @@ const Input$2 = _ref => {
     size,
     selectedValue,
     placeHolder,
+    inputType = "text",
     onChange,
     onClick,
     onBlur,
@@ -35991,7 +36004,7 @@ const Input$2 = _ref => {
   }, "*")), /*#__PURE__*/React$1.createElement(InputElement, {
     className: multiline ? "StyledTextarea" : "StyledInput",
     ref: inputRef,
-    type: password && !showPassword ? "password" : "text",
+    type: password && !showPassword ? "password" : inputType,
     value: inputValue,
     onChange: handleInputChange,
     onClick: handleLabelClick,
@@ -39299,6 +39312,25 @@ const StatusCellCircle = styled.div`
     border: 1px solid white;
     background-color: ${props => props.backgroundColor};
 `;
+const DotIndicatorWrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  ${tooltipStyles$1}
+  
+  /* Override tooltip position */
+  &[data-tooltip]:hover::before {
+    top: calc(var(--tooltip-top, 0px) - var(--tooltip-offset, 60px) + 20px);
+  }
+
+  &[data-tooltip]:hover::after {
+    top: calc(var(--tooltip-top, 0px) - var(--tooltip-offset, 60px) + var(--tooltip-height, 50px) + 20px);
+  }
+`;
 
 // NEW TAG STYLES
 const TagContainer = styled.div`
@@ -40530,14 +40562,40 @@ const TableBody = /*#__PURE__*/forwardRef(({
             if (!value || typeof value !== 'object') return null;
             const {
               show,
-              color
+              color,
+              tooltip
             } = value;
 
             // Only show the dot if show is true
             if (!show) return null;
-            return /*#__PURE__*/React$1.createElement(StatusCellCircle, {
+            return /*#__PURE__*/React$1.createElement(DotIndicatorWrapper, {
+              ref: el => {
+                if (el && tooltip && tooltip.trim() !== "") {
+                  try {
+                    const rect = el.getBoundingClientRect();
+                    if (rect.width > 0 && rect.height > 0) {
+                      const tooltipInfo = calculateTooltipOffset(tooltip);
+                      if (tooltipInfo) {
+                        const {
+                          offset,
+                          height
+                        } = tooltipInfo;
+                        el.style.setProperty("--tooltip-top", `${rect.top}px`);
+                        el.style.setProperty("--tooltip-left", `${rect.left}px`);
+                        el.style.setProperty("--tooltip-width", `${rect.width}px`);
+                        el.style.setProperty("--tooltip-offset", `${offset}px`);
+                        el.style.setProperty("--tooltip-height", `${height}px`);
+                        el.setAttribute("data-tooltip", tooltip);
+                      }
+                    }
+                  } catch (e) {
+                    console.warn("Error applying dotIndicator tooltip:", e);
+                  }
+                }
+              }
+            }, /*#__PURE__*/React$1.createElement(StatusCellCircle, {
               backgroundColor: color
-            });
+            }));
           } catch (e) {
             console.warn('Error formatting dotIndicator:', e);
             return null;
@@ -40549,7 +40607,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
               style: {
                 color: isDefine ? "#8B8989" : "inherit"
               }
-            }, value ?? "Define"), /*#__PURE__*/React$1.createElement(PencilButton, {
+            }, value ? `$${value}` : "Define"), /*#__PURE__*/React$1.createElement(PencilButton, {
               onClick: e => {
                 e.stopPropagation();
                 handleEditableClick(row, column.key, value, rowIndex);
@@ -40823,6 +40881,9 @@ const TableBody = /*#__PURE__*/forwardRef(({
         case "checkbox":
           try {
             const isChecked = Boolean(value);
+            // Check if this specific checkbox should be disabled
+            // Format: checkboxDisabled_{columnKey} or checkboxDisabled (for backward compatibility)
+            const isDisabled = row[`checkboxDisabled_${column.key}`] === true || column.key && row[`checkboxDisabled_${column.key}`] === true;
             return /*#__PURE__*/React$1.createElement("div", {
               style: {
                 display: "flex",
@@ -40834,13 +40895,15 @@ const TableBody = /*#__PURE__*/forwardRef(({
             }, /*#__PURE__*/React$1.createElement("input", {
               type: "checkbox",
               checked: isChecked,
+              disabled: isDisabled,
               onChange: e => handleCheckboxClick(row, column.key, e),
               onClick: e => e.stopPropagation(),
               style: {
                 width: "18px",
                 height: "18px",
-                cursor: "pointer",
-                accentColor: buttonColor
+                cursor: isDisabled ? "not-allowed" : "pointer",
+                accentColor: buttonColor,
+                opacity: isDisabled ? 0.5 : 1
               }
             }));
           } catch (e) {
@@ -44432,6 +44495,7 @@ const Table = props => {
     noEventsSubtitle = "Let's get started and create your first one!",
     noEventsButtonText = "New Event",
     noEventsButtonIcon = "Plus",
+    disableNoEventsButton = false,
     showNoEventsButton = true,
     indexToShimmer = -1,
     resetFocusIndex,
@@ -44615,6 +44679,7 @@ const Table = props => {
     height: "45px",
     leftIcon: noEventsButtonIcon,
     text: noEventsButtonText,
+    disabled: disableNoEventsButton,
     borderRadius: "12px",
     borderColor: buttonColor,
     hoverBorderColor: buttonHoverColor,
@@ -44658,7 +44723,7 @@ const TitleContainer = styled$1.div`
 `;
 const SectionTitle$1 = styled$1.div`
   color: #212121;
-  font-size: 18px;
+  font-size: 14px;
   font-weight: 700;
 `;
 const SubtitleContainer = styled$1.div`
@@ -44717,7 +44782,7 @@ const VendorList$2 = styled$1.div`
 `;
 const VendorItem$1 = styled$1.div`
   display: grid;
-  grid-template-columns: 15% 70% 15%;  
+  grid-template-columns: 10% 75% 15%;  
   align-items: center;
   padding: 16px 8px;
   border-bottom: 1px solid #f2f2f2;
@@ -44736,7 +44801,7 @@ const VendorItem$1 = styled$1.div`
 `;
 const VendorName$2 = styled$1.div`
   color: #212121;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   overflow: hidden;
   max-width: 90%;
@@ -54430,7 +54495,8 @@ const ItemManagerPanel = _ref => {
     buttonTooltipText = "Please fill out all forms before sending.",
     trashTooltipText = 'Vendor cannot be deleted since its  packages <br/> have already been sent as a form.',
     maxVisibleVendors = 12,
-    componentText = "Scale"
+    componentText = "Scale",
+    SubTitleColor = "#8B8989"
   } = _ref;
   const [screen, setScreen] = useState("initial");
   const [selectedVendor, setSelectedVendor] = useState(null);
@@ -54681,7 +54747,9 @@ const ItemManagerPanel = _ref => {
         }
       }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(VendorName$2, {
         title: item.name
-      }, item.name), packagesLength === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), packagesLength > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, (() => {
+      }, item.name), packagesLength === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), packagesLength > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, {
+        color: SubTitleColor
+      }, (() => {
         const noPackagesSent = sentPackagesLength === 0;
         if (noPackagesSent) {
           return `0/${packagesLength} Packages Sent`;