sag_components 2.0.0-beta275 → 2.0.0-beta276

package/dist/index.d.ts

@@ -1578,29 +1578,29 @@ declare function ModalDrawer({ open, height, onClose, children, widthPercent }:
     widthPercent?: number;
 }): react_jsx_runtime.JSX.Element;
 
-declare function OverlayDropdown({ data, value, onSelectClick, disabled, isDarkerBackground, required, selectedColor, hoverColor, dropdownMaxHeight, width, minWidth, height, label, labelEmptyValue, showLabelOnTop, placeHolder, labelColor, placeHolderColor, margin, dropdownWidth, editableDigitalCoupon, ...props }: {
+declare function OverlayDropdown({ data, value, onSelectClick, label, labelEmptyValue, showLabelOnTop, labelColor, placeHolder, placeHolderColor, required, disabled, isDarkerBackground, editableDigitalCoupon, selectedColor, hoverColor, width, minWidth, dropdownWidth, dropdownMaxHeight, height, margin, ...props }: {
     [x: string]: any;
     data?: any[];
     value: any;
     onSelectClick: any;
+    label: any;
+    labelEmptyValue: any;
+    showLabelOnTop: any;
+    labelColor: any;
+    placeHolder: any;
+    placeHolderColor: any;
+    required?: boolean;
     disabled?: boolean;
     isDarkerBackground?: boolean;
-    required?: boolean;
+    editableDigitalCoupon?: boolean;
     selectedColor?: string;
     hoverColor?: string;
-    dropdownMaxHeight?: string;
     width?: string;
     minWidth?: string;
+    dropdownWidth?: string;
+    dropdownMaxHeight?: string;
     height?: string;
-    label: any;
-    labelEmptyValue: any;
-    showLabelOnTop: any;
-    placeHolder: any;
-    labelColor: any;
-    placeHolderColor: any;
     margin?: string;
-    dropdownWidth?: string;
-    editableDigitalCoupon?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 declare function MessageBox({ isOpen, isDisabled, onClose, onConfirm, title, primaryText, secondaryText, width, height, color, hoverColor, opacity, secondaryColor, seperateSectionBorder, children, tooltipContent, }: {

package/dist/index.esm.js

@@ -9292,7 +9292,6 @@ const Label$7 = styled.label`
   return props.isFocused || props.hasValue ? '0px' : `${height / 2 - 4}px`;
 }};
   left: ${props => props.isFocused || props.hasValue ? '23px' : '10px'};
-  font-family: Poppins;  
   transform: translateY(-50%);
   transition: ${props => props.showLabelOnTop ? 'top 0.3s ease, font-size 0.3s ease, color 0.3s ease' : ''} ;
   display: flex;
@@ -24543,7 +24542,6 @@ const OptionsContainer$1 = styled.div`
   width: 100%;  
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};  
-
 `;
 const OptionsSubContainer = styled.ul`
   list-style: none;
@@ -24555,7 +24553,6 @@ const OptionsSubContainer = styled.ul`
   left: 0;
   z-index: 101;
   width: calc(100% - 23px);
-  font-family: Poppins; 
   border-radius: 4px; 
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};
@@ -24566,13 +24563,10 @@ const OptionsSubContainer = styled.ul`
 const OptionItem = styled.li`  
   display: flex;
   align-items: center;
-  gap: 8px;
   padding: 10px;
   cursor: pointer;
   color: #212121;
-  font-family: Poppins;
   font-size: 14px;
-  font-style: normal;
   font-weight: 400;
   transition: background-color 0.3s;
 
@@ -24587,7 +24581,6 @@ const ErrorMessage$1 = styled.div`
 `;
 const SelectedOptionsContainer = styled.div`
   display: flex;
-  flex-direction: row;
   align-items: center;
   gap: 4px;
   flex-wrap: nowrap;
@@ -24636,7 +24629,8 @@ const SelectedOptionCount = styled.div`
 const IconContainer$2 = styled.div`  
   display: flex;  
   padding: 2px;
-  cursor:  pointer;  
+  margin-right: 8px;
+  cursor:  pointer;
 `;
 
 const QuickFilterDropdownMultiSelection = _ref => {
@@ -35687,7 +35681,7 @@ const Label$3 = styled.label`
   if (props.multiline) {
     return props.isFocused || props.hasValue ? '0px' : '20px';
   }
-  return props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px';
+  return props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '50%' : '17px';
 }};
   left: ${props => {
   if (props.multiline) {
@@ -35695,7 +35689,6 @@ const Label$3 = styled.label`
   }
   return props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px';
 }};
-  font-family: Poppins;  
   transform: translateY(-50%);
   transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
   display: flex;
@@ -36117,19 +36110,15 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${_ref => {
-  let {
-    checked,
-    disabled
-  } = _ref;
-  return checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0";
-}};
+  background: ${({
+  checked,
+  disabled
+}) => checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0"};
   border-radius: 999px;
   transition: background 0.2s;
-  ${_ref2 => {
-  let {
-    size
-  } = _ref2;
+  ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -36145,18 +36134,14 @@ const ToggleSlider = styled.span`
     left: 3px;
     top: 50%;
     transform: translateY(-50%);
-    background: ${_ref3 => {
-  let {
-    disabled
-  } = _ref3;
-  return disabled ? "#D0D0D0" : "#fff";
-}};
+    background: ${({
+  disabled
+}) => disabled ? "#D0D0D0" : "#fff"};
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${_ref4 => {
-  let {
-    size
-  } = _ref4;
+    ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -36166,11 +36151,10 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${_ref5 => {
-  let {
-    checked,
-    size
-  } = _ref5;
+    left: ${({
+  checked,
+  size
+}) => {
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -36184,9 +36168,9 @@ const ToggleSlider = styled.span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -37428,8 +37412,8 @@ const ColumnContent = styled.div`
     min-height: 20px;
 `;
 const ColumnCheckbox = styled.input`
-    width: 16px;
-    height: 16px;
+    width: 18px;
+    height: 18px;
     cursor: pointer;
     margin: 0;
 `;
@@ -40413,6 +40397,7 @@ const Radio = styled.input`
 `;
 const Actions$1 = styled.div`
   display: flex;
+  align-items: center;
   justify-content: space-between;
   padding-top: 12px;
 `;
@@ -40854,21 +40839,7 @@ const SortIcon = ({
   }));
 };
 
-// TableHeader.jsx - Updated with debounce
-
-// Inline debounce hook
-const useDebounce = (value, delay = 1500) => {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-};
+// TableHeader.jsx
 const TableHeader = ({
   columns,
   onSort,
@@ -40879,8 +40850,7 @@ const TableHeader = ({
   expandable = false,
   onHeaderCheckboxClick = () => {},
   headerCheckboxStates = {},
-  resetFiltersKey = 0,
-  debounceDelay = 500 // NEW: Add debounce delay prop (default 500ms)
+  resetFiltersKey = 0 // NEW: Add this prop
 }) => {
   const [focusedFilter, setFocusedFilter] = useState(null);
   const [focusedSort, setFocusedSort] = useState(null);
@@ -40890,21 +40860,17 @@ const TableHeader = ({
     top: 0,
     left: 0
   });
-
-  // Internal state that updates immediately (for UI responsiveness)
   const [filterState, setFilterState] = useState({});
   const [filterSelections, setFilterSelections] = useState({});
   const [activeSortColumn, setActiveSortColumn] = useState(null);
   const [activeSortValue, setActiveSortValue] = useState(null);
-
-  // Debounced values (these will be passed to parent after delay)
-  const debouncedFilterState = useDebounce(filterState, debounceDelay);
   const iconRefs = useRef({});
   const popupRef = useRef(null);
 
-  // Reset internal state when resetFiltersKey changes
+  // NEW: Reset internal state when resetFiltersKey changes
   useEffect(() => {
     if (resetFiltersKey > 0) {
+      // Reset filter selections to default (all selected)
       const resetSelections = {};
       columns.forEach(column => {
         if (column.filter && column.filterOptions) {
@@ -40920,9 +40886,15 @@ const TableHeader = ({
         }
       });
       setFilterSelections(resetSelections);
+
+      // Reset filter state
       setFilterState({});
+
+      // Reset sort state
       setActiveSortColumn(null);
       setActiveSortValue(null);
+
+      // Close any open popups
       setVisibleFilterPopWrapper(null);
       setVisibleSortPopWrapper(null);
     }
@@ -40965,14 +40937,6 @@ const TableHeader = ({
       return hasChanges ? newSelections : prevSelections;
     });
   }, [columns]);
-
-  // 🎯 KEY CHANGE: Use debounced value to trigger parent callback
-  useEffect(() => {
-    // Only call onFilter if there's actual filter data
-    if (Object.keys(debouncedFilterState).length > 0) {
-      onFilter(debouncedFilterState);
-    }
-  }, [debouncedFilterState, onFilter]);
   const isFilterInDefaultState = columnKey => {
     const filterData = filterState[columnKey];
     if (!filterData) {
@@ -41065,6 +41029,11 @@ const TableHeader = ({
     setVisibleSortPopWrapper(prevKey => prevKey === key ? null : key);
     setVisibleFilterPopWrapper(null);
   };
+  useEffect(() => {
+    if (Object.keys(filterState).length > 0) {
+      onFilter(filterState);
+    }
+  }, [filterState]);
   const handleFilter = key => {
     const iconElement = iconRefs.current[`filter-${key}`];
     if (iconElement) {
@@ -41094,9 +41063,6 @@ const TableHeader = ({
       onSort(columnKey, null);
     }
   };
-
-  // 🎯 Filter changes update immediately in UI (filterState)
-  // But parent callback is triggered only after debounce
   const handleFilterSelectionChange = (columnKey, selectionData) => {
     setFilterSelections(prev => {
       const updated = {
@@ -41105,8 +41071,6 @@ const TableHeader = ({
       };
       return updated;
     });
-
-    // Update internal state immediately for responsive UI
     setFilterState(prev => ({
       ...prev,
       [columnKey]: selectionData.filterData
@@ -41243,7 +41207,6 @@ const TableHeader = ({
         placeholder: column.key === 'EventCode' ? 'Enter Event ID' : 'Search..',
         fieldHeight: "40px",
         onTyping: value => {
-          // Update internal state immediately
           setFilterState(prev => ({
             ...prev,
             [key]: value
@@ -41278,7 +41241,6 @@ const TableHeader = ({
           fields: currentFilterState.fields
         } : null,
         onApply: data => {
-          // Update internal state immediately
           setFilterState(prev => ({
             ...prev,
             [key]: data
@@ -41341,14 +41303,7 @@ const TableHeader = ({
     onChange: e => handleHeaderCheckboxClick(column.key, e),
     "data-column": column.key,
     style: {
-      width: '18px',
-      height: '18px',
-      marginLeft: '10px',
-      cursor: 'pointer',
-      accentColor: '#066768',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
+      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, {
     ref: el => iconRefs.current[`sort-${column.key}`] = el,
@@ -42106,6 +42061,18 @@ styled.div`
     }
   `}
 `;
+const CheckboxInput = styled.input`
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  accent-color: ${props => props.buttonColor || '#066768'};
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
 const HeroButton = styled.button`
   display: flex;
   align-items: center;
@@ -42749,6 +42716,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
   onDropdownSelected = () => {},
   onCheckboxClick = () => {},
   onHeaderCheckboxClick = () => {},
+  disableCheckboxTooltipText = "",
   onHeroClick = () => {},
   onEditableClick = () => {},
   isEditMode = false,
@@ -43152,12 +43120,12 @@ const TableBody = /*#__PURE__*/forwardRef(({
                 hoverTextColor: "#B1B1B1",
                 hoverBackgroundColor: "#E6F0F0",
                 hoverBorderColor: "#D9D9D9",
+                disabled: true,
                 disabledTextColor: "#B1B1B1",
-                disabledBackgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
                 disabledBorderColor: "#D9D9D9",
+                disabledBackgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
                 width: "100px",
-                height: "32px",
-                disabled: true
+                height: "32px"
               }));
             } else if (lowerValue === "draft") {
               return /*#__PURE__*/React$1.createElement(ButtonWrapper, {
@@ -43379,24 +43347,15 @@ const TableBody = /*#__PURE__*/forwardRef(({
             return /*#__PURE__*/React$1.createElement("div", {
               style: {
                 display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "100%",
-                height: "100%"
+                alignItems: "center"
               }
-            }, /*#__PURE__*/React$1.createElement("input", {
+            }, /*#__PURE__*/React$1.createElement(CheckboxInput, {
               type: "checkbox",
               checked: isChecked,
               disabled: isDisabled,
+              buttonColor: buttonColor,
               onChange: e => handleCheckboxClick(row, column.key, e),
-              onClick: e => e.stopPropagation(),
-              style: {
-                width: "18px",
-                height: "18px",
-                cursor: isDisabled ? "not-allowed" : "pointer",
-                accentColor: buttonColor,
-                opacity: isDisabled ? 0.5 : 1
-              }
+              onClick: e => e.stopPropagation()
             }));
           } catch (e) {
             console.warn('Error formatting checkbox:', e);
@@ -47026,6 +46985,7 @@ const Table = props => {
     onCheckboxClick = () => {},
     onHeaderCheckboxClick = () => {},
     headerCheckboxStates = {},
+    disableCheckboxTooltipText = "",
     onHeroClick = () => {},
     dotIndicatorColor = '#34D399',
     onEditableClick = () => {},
@@ -47170,6 +47130,7 @@ const Table = props => {
     onDropdownSelected: onDropdownSelected,
     onCheckboxClick: onCheckboxClick,
     onHeaderCheckboxClick: onHeaderCheckboxClick,
+    disableCheckboxTooltipText: disableCheckboxTooltipText,
     onHeroClick: onHeroClick,
     onEditableClick: onEditableClick,
     isEditMode: isEditMode,
@@ -57798,27 +57759,32 @@ OverlayTemplateDialog.propTypes = {
 // Main Component
 const OverlayDropdown = _ref => {
   let {
+    // Data / selection
     data = [],
     value,
     onSelectClick,
+    // Label / placeholder
+    label,
+    labelEmptyValue,
+    showLabelOnTop,
+    labelColor,
+    placeHolder,
+    placeHolderColor,
+    // Behavior
+    required = false,
     disabled = false,
     isDarkerBackground = false,
-    required = false,
+    editableDigitalCoupon = false,
+    // Appearance
     selectedColor = "#066768",
     hoverColor = "#E6F0F0",
-    dropdownMaxHeight = "600px",
+    // Sizing
     width = "100%",
     minWidth = "unset",
+    dropdownWidth = "100%",
+    dropdownMaxHeight = "600px",
     height = "auto",
-    label,
-    labelEmptyValue,
-    showLabelOnTop,
-    placeHolder,
-    labelColor,
-    placeHolderColor,
     margin = "8px",
-    dropdownWidth = "100%",
-    editableDigitalCoupon = false,
     ...props
   } = _ref;
   const [open, setOpen] = useState(false);