sag_components 2.0.0-beta335 → 2.0.0-beta337

package/dist/index.esm.js

@@ -40717,6 +40717,7 @@ const RangePop = props => {
     params = [],
     paramType = "Week",
     onApply = () => {},
+    onCancel = () => {},
     buttonColor = "#066768",
     hoverColor = "#066768",
     initialValues = null
@@ -40787,6 +40788,7 @@ const RangePop = props => {
   const handleCancel = () => {
     reset();
     setSelectedRadio(radioOptions[0].toLowerCase());
+    onCancel();
   };
 
   // Validation rules
@@ -41152,6 +41154,7 @@ const TableHeader = ({
   activeFilters = [],
   activeSorts = [],
   expandable = false,
+  expandPosition = "left",
   onHeaderCheckboxClick = () => {},
   headerCheckboxStates = {},
   resetFiltersKey = 0,
@@ -41330,7 +41333,7 @@ const TableHeader = ({
       return true;
     }
     if (filterData.selectedRadio) {
-      return filterData.selectedRadio === 'all weeks';
+      return filterData.selectedRadio !== 'custom range';
     }
     return filterData.isSelectAll && filterData.excluded?.length === 0 && filterData.included?.length === 0;
   };
@@ -41613,30 +41616,22 @@ const TableHeader = ({
     } else if (rangeFilter) {
       const currentFilterState = filterState[key];
 
-      // Determine if this is a price column
-      const isPriceColumn = key.toLowerCase().includes('price') || key.toLowerCase().includes('cost') || key.toLowerCase().includes('amount');
+      // Determine symbol: use column prop if provided, otherwise auto-detect
+      const isPriceColumn = key.toLowerCase().includes('price') || key.toLowerCase().includes('cost');
+      const symbol = column.rangeFilterSymbol !== undefined ? column.rangeFilterSymbol : isPriceColumn ? '$' : '';
+      const inputType = symbol !== undefined && symbol !== 'week' ? 'price' : 'week';
 
       // Configure RangePop based on column type
-      const rangeConfig = isPriceColumn ? {
-        paramType: '$',
-        params: [{
-          label: 'From $',
-          type: 'price'
-        }, {
-          label: 'To $',
-          type: 'price'
-        }],
-        radioOptions: ['All Prices', 'Custom Range']
-      } : {
-        paramType: 'Week',
+      const rangeConfig = {
+        paramType: symbol || '#',
         params: [{
-          label: 'From',
-          type: 'week'
+          label: symbol ? `From ${symbol}` : 'From',
+          type: inputType
         }, {
-          label: 'To',
-          type: 'week'
+          label: symbol ? `To ${symbol}` : 'To',
+          type: inputType
         }],
-        radioOptions: ['All Weeks', 'Custom Range']
+        radioOptions: [`All ${title}`, 'Custom Range']
       };
       return /*#__PURE__*/React$1.createElement(RangePop, {
         menuName: title,
@@ -41658,7 +41653,8 @@ const TableHeader = ({
             [key]: data
           }));
           setVisibleFilterPopWrapper(null);
-        }
+        },
+        onCancel: () => setVisibleFilterPopWrapper(null)
       });
     } else {
       // Check if this column has an active filter (not in default state)
@@ -41699,7 +41695,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"
@@ -41750,7 +41746,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,
@@ -43453,6 +43453,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
   onCommentSave = () => {},
   commentTextLimit = 150,
   expandable = false,
+  expandPosition = "left",
   expandedRows = {},
   expandedContent = {},
   onExpandRow = () => {},
@@ -44288,7 +44289,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"
@@ -44307,7 +44308,7 @@ 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, {
@@ -44423,7 +44424,26 @@ const TableBody = /*#__PURE__*/forwardRef(({
       }))))) : column.editable && column.renderEditableCell ? column.renderEditableCell(rowIndex, row, {
         markAllNotValidFields
       }) : renderCellContent(formattedValue, isTextBasedField, shouldShimmer));
-    })), expandable && expandedRows[rowIndex] && /*#__PURE__*/React$1.createElement(ExpandedRow, {
+    }), 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
@@ -48049,6 +48069,7 @@ const Table = props => {
     editRowIndex = -1,
     onCommentSave = () => {},
     expandable = false,
+    expandPosition = "left",
     expandedRows = {},
     expandedContent = {},
     onExpandRow = () => {},
@@ -48199,6 +48220,7 @@ const Table = props => {
     onFilter: onFilter,
     onSelectAll: onSelectAll,
     expandable: expandable,
+    expandPosition: expandPosition,
     onHeaderCheckboxClick: onHeaderCheckboxClick,
     headerCheckboxStates: headerCheckboxStates,
     resetFiltersKey: resetFiltersKey,
@@ -48226,6 +48248,7 @@ const Table = props => {
     changeFocusIndex: changeFocusIndex,
     onFocusChange: handleTableFocusChange,
     expandable: expandable,
+    expandPosition: expandPosition,
     expandedRows: expandedRows,
     expandedContent: expandedContent,
     onExpandRow: onExpandRow,