@infinite-table/infinite-react 3.0.10 → 3.0.11

package/index.d.ts

@@ -154,6 +154,8 @@ declare function useInfiniteColumnFilterEditor<T>(): {
     filterTypeKey: string;
     filtered: boolean;
     setValue: (filterValue: any) => void;
+    clearValue: () => void;
+    removeColumnFilter: () => void;
     ariaLabel: string;
     className: string;
 };
@@ -2612,7 +2614,15 @@ interface InfiniteTableApi<T> {
     toggleSortingForColumn: (columnId: string, options?: MultiSortBehaviorOptions) => void;
     setColumnFilter: (columnId: string, filterValue: any) => void;
     setColumnFilterOperator: (columnId: string, operator: string) => void;
+    /**
+     * Clears the filter for the given column to a default value. The column will still have a
+     * corresponding filterValue, though set to the empty filter value, so it's not considered filtered.
+     */
     clearColumnFilter: (columnId: string) => void;
+    /**
+     * Removes the filter for the column altogether. The column will no longer have a corresponding entry in the filterValue prop.
+     */
+    removeColumnFilter: (columnId: string) => void;
     isColumnSortable: (columnId: string) => boolean;
     setFilterValueForColumn: (columnId: string, filterValue: DataSourceFilterValueItem<T>) => void;
     setPinningForColumn: (columnId: string, pinning: InfiniteTableColumnPinnedValues) => void;

package/index.dev.js

@@ -6416,6 +6416,12 @@ function useInfiniteColumnFilterEditor() {
     },
     [filterContextValue.onChange]
   );
+  const clearValue = React28.useCallback(() => {
+    context.api.clearColumnFilter(column.id);
+  }, [column.id]);
+  const removeColumnFilter = React28.useCallback(() => {
+    context.api.removeColumnFilter(column.id);
+  }, [column.id]);
   (0, import_react20.useEffect)(() => {
     if (columnFilterValue) {
       if (theValue !== columnFilterValue.filter.value) {
@@ -6446,6 +6452,8 @@ function useInfiniteColumnFilterEditor() {
     filterTypeKey: columnFilterType,
     filtered: column.computedFiltered,
     setValue: onInputChange,
+    clearValue,
+    removeColumnFilter,
     ariaLabel: `Filter for ${columnLabel}`,
     className: `${HeaderFilterEditorCls} ${InfiniteTableColumnHeaderFilterInputClassName}`
   };
@@ -7668,27 +7676,20 @@ function getGroupColumnRender({
     const { rowInfo, renderBag, column, align: align2 } = renderOptions;
     let { value: valueToRender, groupIcon, selectionCheckBox } = renderBag;
     const groupRowInfo = rowInfo;
+    const className = join(
+      display.flex,
+      column.align === "end" ? flexFlow.rowReverse : flexFlow.row,
+      alignItems.center,
+      `${InfiniteTableColumnCellClassName}Expander`,
+      groupRenderStrategy === "single-column" || groupRenderStrategy === "multi-column" && (!rowInfo.isGroupRow || selectionCheckBox) ? GroupRowExpanderCls({ align: align2 }) : null
+    );
     if (groupRenderStrategy === "multi-column") {
       if (groupIndexForColumn + 1 !== groupRowInfo.groupNesting && groupRowInfo.isGroupRow) {
-        return null;
+        return selectionCheckBox ? /* @__PURE__ */ React32.createElement("div", { className }, selectionCheckBox) : null;
       }
     } else if (groupRenderStrategy === "single-column" && !groupRowInfo.isGroupRow) {
     }
-    return /* @__PURE__ */ React32.createElement(
-      "div",
-      {
-        className: join(
-          display.flex,
-          column.align === "end" ? flexFlow.rowReverse : flexFlow.row,
-          alignItems.center,
-          `${InfiniteTableColumnCellClassName}Expander`,
-          groupRenderStrategy === "single-column" || groupRenderStrategy === "multi-column" && !rowInfo.isGroupRow ? GroupRowExpanderCls({ align: align2 }) : null
-        )
-      },
-      groupIcon,
-      selectionCheckBox,
-      /* @__PURE__ */ React32.createElement("div", { className: cssEllipsisClassName }, valueToRender != null ? valueToRender : null)
-    );
+    return /* @__PURE__ */ React32.createElement("div", { className }, groupIcon, selectionCheckBox, /* @__PURE__ */ React32.createElement("div", { className: cssEllipsisClassName }, valueToRender != null ? valueToRender : null));
   };
 }
 function getGroupColumnRenderGroupIcon({
@@ -8310,7 +8311,6 @@ var defaultRenderSelectionCheckBox = (params) => {
     column
   } = params;
   if (rowInfo.isGroupRow && !column.groupByForColumn) {
-    return null;
   }
   return /* @__PURE__ */ React36.createElement(
     InfiniteCheckBox,
@@ -15465,6 +15465,9 @@ var InfiniteTableApiImpl = class {
           operator: operatorName
         })
       });
+      if (operator.defaultFilterValue !== void 0) {
+        newFilterValueForColumn.filter.value = operator.defaultFilterValue;
+      }
     } else {
       newFilterValueForColumn = {
         filter: {
@@ -15502,7 +15505,7 @@ var InfiniteTableApiImpl = class {
     }
     this.dataSourceActions.filterValue = newFilterValue;
   }
-  clearColumnFilter(columnId) {
+  removeColumnFilter(columnId) {
     var _a;
     const column = this.getComputed().computedColumnsMap.get(columnId);
     if (!column) {
@@ -15522,6 +15525,47 @@ var InfiniteTableApiImpl = class {
       this.dataSourceActions.filterValue = newFilterValue;
     }
   }
+  clearColumnFilter(columnId) {
+    var _a;
+    const column = this.getComputed().computedColumnsMap.get(columnId);
+    if (!column) {
+      return;
+    }
+    const state = this.getDataSourceState();
+    let newFilterValue = (_a = state.filterValue) != null ? _a : [];
+    let found = false;
+    newFilterValue = newFilterValue.map((currentFilterValue) => {
+      var _a2, _b, _c;
+      if (currentFilterValue === column.computedFilterValue) {
+        const filterTypeName = column.computedFilterValue.filter.type;
+        const operators = state.operatorsByFilterType[filterTypeName];
+        const filterType = state.filterTypes[filterTypeName];
+        found = true;
+        if (!filterType) {
+          return null;
+        }
+        const operatorName = (_a2 = currentFilterValue.filter.operator) != null ? _a2 : filterType == null ? void 0 : filterType.defaultOperator;
+        const operator = operators[operatorName];
+        const value = (
+          // first try the default value of the operator
+          (_c = (_b = operator.defaultFilterValue) != null ? _b : (
+            // then the first empty value
+            (filterType.emptyValues || [])[0]
+          )) != null ? _c : void 0
+        );
+        return __spreadProps(__spreadValues({}, currentFilterValue), {
+          filter: __spreadProps(__spreadValues({}, currentFilterValue.filter), {
+            operator: operatorName,
+            value
+          })
+        });
+      }
+      return currentFilterValue;
+    }).filter(notNullable);
+    if (found) {
+      this.dataSourceActions.filterValue = newFilterValue;
+    }
+  }
   setVisibilityForColumn(columnId, visible) {
     const columnVisibility = __spreadValues({}, this.getState().columnVisibility);
     if (visible) {
@@ -17667,7 +17711,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react50.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "3.0.10"
+      version: "3.0.11"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -20638,8 +20682,8 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
       }
     },
     {
-      key: "clear",
-      label: "Clear",
+      key: "reset",
+      label: "Reset",
       icon: /* @__PURE__ */ React62.createElement(ClearIcon, null),
       disabled: !column.computedFiltered,
       onAction: () => {

package/index.dev.mjs

@@ -6401,6 +6401,12 @@ function useInfiniteColumnFilterEditor() {
     },
     [filterContextValue.onChange]
   );
+  const clearValue = React28.useCallback(() => {
+    context.api.clearColumnFilter(column.id);
+  }, [column.id]);
+  const removeColumnFilter = React28.useCallback(() => {
+    context.api.removeColumnFilter(column.id);
+  }, [column.id]);
   useEffect11(() => {
     if (columnFilterValue) {
       if (theValue !== columnFilterValue.filter.value) {
@@ -6431,6 +6437,8 @@ function useInfiniteColumnFilterEditor() {
     filterTypeKey: columnFilterType,
     filtered: column.computedFiltered,
     setValue: onInputChange,
+    clearValue,
+    removeColumnFilter,
     ariaLabel: `Filter for ${columnLabel}`,
     className: `${HeaderFilterEditorCls} ${InfiniteTableColumnHeaderFilterInputClassName}`
   };
@@ -7653,27 +7661,20 @@ function getGroupColumnRender({
     const { rowInfo, renderBag, column, align: align2 } = renderOptions;
     let { value: valueToRender, groupIcon, selectionCheckBox } = renderBag;
     const groupRowInfo = rowInfo;
+    const className = join(
+      display.flex,
+      column.align === "end" ? flexFlow.rowReverse : flexFlow.row,
+      alignItems.center,
+      `${InfiniteTableColumnCellClassName}Expander`,
+      groupRenderStrategy === "single-column" || groupRenderStrategy === "multi-column" && (!rowInfo.isGroupRow || selectionCheckBox) ? GroupRowExpanderCls({ align: align2 }) : null
+    );
     if (groupRenderStrategy === "multi-column") {
       if (groupIndexForColumn + 1 !== groupRowInfo.groupNesting && groupRowInfo.isGroupRow) {
-        return null;
+        return selectionCheckBox ? /* @__PURE__ */ React32.createElement("div", { className }, selectionCheckBox) : null;
       }
     } else if (groupRenderStrategy === "single-column" && !groupRowInfo.isGroupRow) {
     }
-    return /* @__PURE__ */ React32.createElement(
-      "div",
-      {
-        className: join(
-          display.flex,
-          column.align === "end" ? flexFlow.rowReverse : flexFlow.row,
-          alignItems.center,
-          `${InfiniteTableColumnCellClassName}Expander`,
-          groupRenderStrategy === "single-column" || groupRenderStrategy === "multi-column" && !rowInfo.isGroupRow ? GroupRowExpanderCls({ align: align2 }) : null
-        )
-      },
-      groupIcon,
-      selectionCheckBox,
-      /* @__PURE__ */ React32.createElement("div", { className: cssEllipsisClassName }, valueToRender != null ? valueToRender : null)
-    );
+    return /* @__PURE__ */ React32.createElement("div", { className }, groupIcon, selectionCheckBox, /* @__PURE__ */ React32.createElement("div", { className: cssEllipsisClassName }, valueToRender != null ? valueToRender : null));
   };
 }
 function getGroupColumnRenderGroupIcon({
@@ -8295,7 +8296,6 @@ var defaultRenderSelectionCheckBox = (params) => {
     column
   } = params;
   if (rowInfo.isGroupRow && !column.groupByForColumn) {
-    return null;
   }
   return /* @__PURE__ */ React36.createElement(
     InfiniteCheckBox,
@@ -15450,6 +15450,9 @@ var InfiniteTableApiImpl = class {
           operator: operatorName
         })
       });
+      if (operator.defaultFilterValue !== void 0) {
+        newFilterValueForColumn.filter.value = operator.defaultFilterValue;
+      }
     } else {
       newFilterValueForColumn = {
         filter: {
@@ -15487,7 +15490,7 @@ var InfiniteTableApiImpl = class {
     }
     this.dataSourceActions.filterValue = newFilterValue;
   }
-  clearColumnFilter(columnId) {
+  removeColumnFilter(columnId) {
     var _a;
     const column = this.getComputed().computedColumnsMap.get(columnId);
     if (!column) {
@@ -15507,6 +15510,47 @@ var InfiniteTableApiImpl = class {
       this.dataSourceActions.filterValue = newFilterValue;
     }
   }
+  clearColumnFilter(columnId) {
+    var _a;
+    const column = this.getComputed().computedColumnsMap.get(columnId);
+    if (!column) {
+      return;
+    }
+    const state = this.getDataSourceState();
+    let newFilterValue = (_a = state.filterValue) != null ? _a : [];
+    let found = false;
+    newFilterValue = newFilterValue.map((currentFilterValue) => {
+      var _a2, _b, _c;
+      if (currentFilterValue === column.computedFilterValue) {
+        const filterTypeName = column.computedFilterValue.filter.type;
+        const operators = state.operatorsByFilterType[filterTypeName];
+        const filterType = state.filterTypes[filterTypeName];
+        found = true;
+        if (!filterType) {
+          return null;
+        }
+        const operatorName = (_a2 = currentFilterValue.filter.operator) != null ? _a2 : filterType == null ? void 0 : filterType.defaultOperator;
+        const operator = operators[operatorName];
+        const value = (
+          // first try the default value of the operator
+          (_c = (_b = operator.defaultFilterValue) != null ? _b : (
+            // then the first empty value
+            (filterType.emptyValues || [])[0]
+          )) != null ? _c : void 0
+        );
+        return __spreadProps(__spreadValues({}, currentFilterValue), {
+          filter: __spreadProps(__spreadValues({}, currentFilterValue.filter), {
+            operator: operatorName,
+            value
+          })
+        });
+      }
+      return currentFilterValue;
+    }).filter(notNullable);
+    if (found) {
+      this.dataSourceActions.filterValue = newFilterValue;
+    }
+  }
   setVisibilityForColumn(columnId, visible) {
     const columnVisibility = __spreadValues({}, this.getState().columnVisibility);
     if (visible) {
@@ -17656,7 +17700,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "3.0.10"
+      version: "3.0.11"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -20637,8 +20681,8 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
       }
     },
     {
-      key: "clear",
-      label: "Clear",
+      key: "reset",
+      label: "Reset",
       icon: /* @__PURE__ */ React62.createElement(ClearIcon, null),
       disabled: !column.computedFiltered,
       onAction: () => {