react-better-html 1.1.177 → 1.1.178

package/dist/index.d.mts

@@ -755,6 +755,7 @@ type ListFilter<DataItem> = {
     getValueForList?: (item: DataItem) => OmitProps<ListFilterValue, "count">;
 };
 type TableColumn<DataItem> = {
+    hidden?: boolean;
     label?: string;
     /** @requires label */
     renderLabel?: (label: string) => React.ReactNode;

package/dist/index.d.ts

@@ -755,6 +755,7 @@ type ListFilter<DataItem> = {
     getValueForList?: (item: DataItem) => OmitProps<ListFilterValue, "count">;
 };
 type TableColumn<DataItem> = {
+    hidden?: boolean;
     label?: string;
     /** @requires label */
     renderLabel?: (label: string) => React.ReactNode;

package/dist/index.js

@@ -7921,8 +7921,9 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
   const mediaQuery = useMediaQuery();
   const { colorTheme } = useBetterHtmlContextInternal();
   const filterModalRef = (0, import_react25.useRef)(null);
-  const columnsRef = (0, import_react25.useRef)(columns);
-  columnsRef.current = columns;
+  const readyColumns = (0, import_react25.useMemo)(() => columns.filter((column) => !column.hidden), [columns]);
+  const columnsRef = (0, import_react25.useRef)(readyColumns);
+  columnsRef.current = readyColumns;
   const [checkedItems, setCheckedItems] = (0, import_react25.useState)([]);
   const [expandedRows, setExpandedRows] = (0, import_react25.useState)([]);
   const [currentPage, setCurrentPage] = (0, import_react25.useState)(1);
@@ -7938,7 +7939,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
   const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = (0, import_react25.useState)();
   const [filterListSelectedItems, setFilterListSelectedItems] = (0, import_react25.useState)();
   const openedFilterData = openedFilterColumnIndex ? filterData[openedFilterColumnIndex] : void 0;
-  const openedFilterColumn = openedFilterColumnIndex ? columns[openedFilterColumnIndex] : void 0;
+  const openedFilterColumn = openedFilterColumnIndex ? readyColumns[openedFilterColumnIndex] : void 0;
   const filterForm = useForm({
     defaultValues: {
       min: void 0,
@@ -7966,7 +7967,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
       filterModalRef.current?.close();
     }
   });
-  const expandColumn = (0, import_react25.useMemo)(() => columns.find((column) => column.type === "expand"), [columns]);
+  const expandColumn = (0, import_react25.useMemo)(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
   const renderCellContent = (0, import_react25.useCallback)(
     (column, item, itemIndex) => {
       switch (column.type) {
@@ -8069,10 +8070,15 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
   }, []);
   const onClickCancelFormFilter = (0, import_react25.useCallback)(() => {
     if (openedFilterColumnIndex === void 0) return;
-    setFilterData((oldValue) => ({
-      ...oldValue,
-      [openedFilterColumnIndex]: void 0
-    }));
+    setFilterData(
+      (oldValue) => Object.entries({
+        ...oldValue,
+        [openedFilterColumnIndex]: void 0
+      }).reduce((previousValue, [key, value]) => {
+        if (value !== void 0) previousValue[parseInt(key)] = value;
+        return previousValue;
+      }, {})
+    );
     filterModalRef.current?.close();
   }, [openedFilterColumnIndex]);
   const onClickFilterListItem = (0, import_react25.useCallback)(
@@ -8170,11 +8176,11 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
   );
   const renderExpandedRow = (0, import_react25.useCallback)(
     (...props2) => {
-      const expandColumn2 = columns.find((column) => column.type === "expand");
+      const expandColumn2 = readyColumns.find((column) => column.type === "expand");
       if (!expandColumn2) return;
       return expandColumn2.render?.(...props2);
     },
-    [columns]
+    [readyColumns]
   );
   const dataAfterFilter = (0, import_react25.useMemo)(
     () => data.filter(
@@ -8324,7 +8330,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
             containsOverflowComponents,
             withFooter,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "isHeader", children: readyColumns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 ThStyledComponent,
                 {
                   width: column.width ?? (column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.type === "expand" ? 16 : void 0),
@@ -8362,14 +8368,14 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                 },
                 column.type + column.label + index
               )) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react25.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react25.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "tr",
                   {
                     className: isInsideTableExpandRow && onClickRow === void 0 && expandColumn === void 0 ? "withoutHover" : void 0,
                     style: getRowStyle?.(item, rowIndex),
                     onClick: () => onClickRowElement(item, rowIndex),
-                    children: columns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    children: readyColumns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                       TdStyledComponent,
                       {
                         textAlign: column.align,
@@ -8382,9 +8388,9 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                     ))
                   }
                 ),
-                expandedRows[rowIndex] && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { colSpan: columns.length, children: renderExpandedRow(item, rowIndex) }) })
-              ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
-              withFooter && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "isFooter", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                expandedRows[rowIndex] && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, rowIndex) }) })
+              ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
+              withFooter && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "isFooter", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                 Div_default.column,
                 {
                   position: "relative",