sag_components 2.0.0-beta275 → 2.0.0-beta276

package/dist/index.js

@@ -9302,7 +9302,6 @@ const Label$7 = styled__default["default"].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;
@@ -24553,7 +24552,6 @@ const OptionsContainer$1 = styled__default["default"].div`
   width: 100%;  
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};  
-
 `;
 const OptionsSubContainer = styled__default["default"].ul`
   list-style: none;
@@ -24565,7 +24563,6 @@ const OptionsSubContainer = styled__default["default"].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'};
@@ -24576,13 +24573,10 @@ const OptionsSubContainer = styled__default["default"].ul`
 const OptionItem = styled__default["default"].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;
 
@@ -24597,7 +24591,6 @@ const ErrorMessage$1 = styled__default["default"].div`
 `;
 const SelectedOptionsContainer = styled__default["default"].div`
   display: flex;
-  flex-direction: row;
   align-items: center;
   gap: 4px;
   flex-wrap: nowrap;
@@ -24646,7 +24639,8 @@ const SelectedOptionCount = styled__default["default"].div`
 const IconContainer$2 = styled__default["default"].div`  
   display: flex;  
   padding: 2px;
-  cursor:  pointer;  
+  margin-right: 8px;
+  cursor:  pointer;
 `;
 
 const QuickFilterDropdownMultiSelection = _ref => {
@@ -35697,7 +35691,7 @@ const Label$3 = styled__default["default"].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) {
@@ -35705,7 +35699,6 @@ const Label$3 = styled__default["default"].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;
@@ -36127,19 +36120,15 @@ const ToggleInput = styled__default["default"].input`
 const ToggleSlider = styled__default["default"].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 styled.css`width: 40px; height: 20px;`;
@@ -36155,18 +36144,14 @@ const ToggleSlider = styled__default["default"].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 styled.css`width: 14px; height: 14px;`;
@@ -36176,11 +36161,10 @@ const ToggleSlider = styled__default["default"].span`
       return styled.css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${_ref5 => {
-  let {
-    checked,
-    size
-  } = _ref5;
+    left: ${({
+  checked,
+  size
+}) => {
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -36194,9 +36178,9 @@ const ToggleSlider = styled__default["default"].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 {
@@ -37438,8 +37422,8 @@ const ColumnContent = styled__default["default"].div`
     min-height: 20px;
 `;
 const ColumnCheckbox = styled__default["default"].input`
-    width: 16px;
-    height: 16px;
+    width: 18px;
+    height: 18px;
     cursor: pointer;
     margin: 0;
 `;
@@ -40423,6 +40407,7 @@ const Radio = styled__default["default"].input`
 `;
 const Actions$1 = styled__default["default"].div`
   display: flex;
+  align-items: center;
   justify-content: space-between;
   padding-top: 12px;
 `;
@@ -40864,21 +40849,7 @@ const SortIcon = ({
   }));
 };
 
-// TableHeader.jsx - Updated with debounce
-
-// Inline debounce hook
-const useDebounce = (value, delay = 1500) => {
-  const [debouncedValue, setDebouncedValue] = React$1.useState(value);
-  React$1.useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-};
+// TableHeader.jsx
 const TableHeader = ({
   columns,
   onSort,
@@ -40889,8 +40860,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] = React$1.useState(null);
   const [focusedSort, setFocusedSort] = React$1.useState(null);
@@ -40900,21 +40870,17 @@ const TableHeader = ({
     top: 0,
     left: 0
   });
-
-  // Internal state that updates immediately (for UI responsiveness)
   const [filterState, setFilterState] = React$1.useState({});
   const [filterSelections, setFilterSelections] = React$1.useState({});
   const [activeSortColumn, setActiveSortColumn] = React$1.useState(null);
   const [activeSortValue, setActiveSortValue] = React$1.useState(null);
-
-  // Debounced values (these will be passed to parent after delay)
-  const debouncedFilterState = useDebounce(filterState, debounceDelay);
   const iconRefs = React$1.useRef({});
   const popupRef = React$1.useRef(null);
 
-  // Reset internal state when resetFiltersKey changes
+  // NEW: Reset internal state when resetFiltersKey changes
   React$1.useEffect(() => {
     if (resetFiltersKey > 0) {
+      // Reset filter selections to default (all selected)
       const resetSelections = {};
       columns.forEach(column => {
         if (column.filter && column.filterOptions) {
@@ -40930,9 +40896,15 @@ const TableHeader = ({
         }
       });
       setFilterSelections(resetSelections);
+
+      // Reset filter state
       setFilterState({});
+
+      // Reset sort state
       setActiveSortColumn(null);
       setActiveSortValue(null);
+
+      // Close any open popups
       setVisibleFilterPopWrapper(null);
       setVisibleSortPopWrapper(null);
     }
@@ -40975,14 +40947,6 @@ const TableHeader = ({
       return hasChanges ? newSelections : prevSelections;
     });
   }, [columns]);
-
-  // 🎯 KEY CHANGE: Use debounced value to trigger parent callback
-  React$1.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) {
@@ -41075,6 +41039,11 @@ const TableHeader = ({
     setVisibleSortPopWrapper(prevKey => prevKey === key ? null : key);
     setVisibleFilterPopWrapper(null);
   };
+  React$1.useEffect(() => {
+    if (Object.keys(filterState).length > 0) {
+      onFilter(filterState);
+    }
+  }, [filterState]);
   const handleFilter = key => {
     const iconElement = iconRefs.current[`filter-${key}`];
     if (iconElement) {
@@ -41104,9 +41073,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 = {
@@ -41115,8 +41081,6 @@ const TableHeader = ({
       };
       return updated;
     });
-
-    // Update internal state immediately for responsive UI
     setFilterState(prev => ({
       ...prev,
       [columnKey]: selectionData.filterData
@@ -41253,7 +41217,6 @@ const TableHeader = ({
         placeholder: column.key === 'EventCode' ? 'Enter Event ID' : 'Search..',
         fieldHeight: "40px",
         onTyping: value => {
-          // Update internal state immediately
           setFilterState(prev => ({
             ...prev,
             [key]: value
@@ -41288,7 +41251,6 @@ const TableHeader = ({
           fields: currentFilterState.fields
         } : null,
         onApply: data => {
-          // Update internal state immediately
           setFilterState(prev => ({
             ...prev,
             [key]: data
@@ -41351,14 +41313,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__default["default"].createElement(ColumnLabel, null, column.title), (column.filter || column.sort) && /*#__PURE__*/React__default["default"].createElement(ColumnActions, null, column.sort && /*#__PURE__*/React__default["default"].createElement(IconButton, {
     ref: el => iconRefs.current[`sort-${column.key}`] = el,
@@ -42116,6 +42071,18 @@ styled__default["default"].div`
     }
   `}
 `;
+const CheckboxInput = styled__default["default"].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__default["default"].button`
   display: flex;
   align-items: center;
@@ -42759,6 +42726,7 @@ const TableBody = /*#__PURE__*/React$1.forwardRef(({
   onDropdownSelected = () => {},
   onCheckboxClick = () => {},
   onHeaderCheckboxClick = () => {},
+  disableCheckboxTooltipText = "",
   onHeroClick = () => {},
   onEditableClick = () => {},
   isEditMode = false,
@@ -43162,12 +43130,12 @@ const TableBody = /*#__PURE__*/React$1.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__default["default"].createElement(ButtonWrapper, {
@@ -43389,24 +43357,15 @@ const TableBody = /*#__PURE__*/React$1.forwardRef(({
             return /*#__PURE__*/React__default["default"].createElement("div", {
               style: {
                 display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "100%",
-                height: "100%"
+                alignItems: "center"
               }
-            }, /*#__PURE__*/React__default["default"].createElement("input", {
+            }, /*#__PURE__*/React__default["default"].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);
@@ -47036,6 +46995,7 @@ const Table = props => {
     onCheckboxClick = () => {},
     onHeaderCheckboxClick = () => {},
     headerCheckboxStates = {},
+    disableCheckboxTooltipText = "",
     onHeroClick = () => {},
     dotIndicatorColor = '#34D399',
     onEditableClick = () => {},
@@ -47180,6 +47140,7 @@ const Table = props => {
     onDropdownSelected: onDropdownSelected,
     onCheckboxClick: onCheckboxClick,
     onHeaderCheckboxClick: onHeaderCheckboxClick,
+    disableCheckboxTooltipText: disableCheckboxTooltipText,
     onHeroClick: onHeroClick,
     onEditableClick: onEditableClick,
     isEditMode: isEditMode,
@@ -57808,27 +57769,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] = React$1.useState(false);