react-better-html 1.1.177 → 1.1.178

package/dist/index.mjs

@@ -7837,8 +7837,9 @@ var TableComponent = forwardRef15(function Table({
   const mediaQuery = useMediaQuery();
   const { colorTheme } = useBetterHtmlContextInternal();
   const filterModalRef = useRef6(null);
-  const columnsRef = useRef6(columns);
-  columnsRef.current = columns;
+  const readyColumns = useMemo8(() => columns.filter((column) => !column.hidden), [columns]);
+  const columnsRef = useRef6(readyColumns);
+  columnsRef.current = readyColumns;
   const [checkedItems, setCheckedItems] = useState9([]);
   const [expandedRows, setExpandedRows] = useState9([]);
   const [currentPage, setCurrentPage] = useState9(1);
@@ -7854,7 +7855,7 @@ var TableComponent = forwardRef15(function Table({
   const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = useState9();
   const [filterListSelectedItems, setFilterListSelectedItems] = useState9();
   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,
@@ -7882,7 +7883,7 @@ var TableComponent = forwardRef15(function Table({
       filterModalRef.current?.close();
     }
   });
-  const expandColumn = useMemo8(() => columns.find((column) => column.type === "expand"), [columns]);
+  const expandColumn = useMemo8(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
   const renderCellContent = useCallback11(
     (column, item, itemIndex) => {
       switch (column.type) {
@@ -7985,10 +7986,15 @@ var TableComponent = forwardRef15(function Table({
   }, []);
   const onClickCancelFormFilter = useCallback11(() => {
     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 = useCallback11(
@@ -8086,11 +8092,11 @@ var TableComponent = forwardRef15(function Table({
   );
   const renderExpandedRow = useCallback11(
     (...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 = useMemo8(
     () => data.filter(
@@ -8240,7 +8246,7 @@ var TableComponent = forwardRef15(function Table({
             containsOverflowComponents,
             withFooter,
             children: [
-              /* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsx22("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsx22("tr", { className: "isHeader", children: readyColumns.map((column, index) => /* @__PURE__ */ jsx22(
                 ThStyledComponent,
                 {
                   width: column.width ?? (column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.type === "expand" ? 16 : void 0),
@@ -8278,14 +8284,14 @@ var TableComponent = forwardRef15(function Table({
                 },
                 column.type + column.label + index
               )) }) }),
-              /* @__PURE__ */ jsx22("tbody", { children: isLoading ? /* @__PURE__ */ jsx22("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx22("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx22(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ jsxs18(Fragment6, { children: [
+              /* @__PURE__ */ jsx22("tbody", { children: isLoading ? /* @__PURE__ */ jsx22("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx22("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ jsx22(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ jsxs18(Fragment6, { children: [
                 /* @__PURE__ */ jsx22(
                   "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__ */ jsx22(
+                    children: readyColumns.map((column, colIndex) => /* @__PURE__ */ jsx22(
                       TdStyledComponent,
                       {
                         textAlign: column.align,
@@ -8298,9 +8304,9 @@ var TableComponent = forwardRef15(function Table({
                     ))
                   }
                 ),
-                expandedRows[rowIndex] && /* @__PURE__ */ jsx22("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ jsx22("td", { colSpan: columns.length, children: renderExpandedRow(item, rowIndex) }) })
-              ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ jsx22("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx22("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx22(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
-              withFooter && /* @__PURE__ */ jsx22("tfoot", { children: /* @__PURE__ */ jsx22("tr", { className: "isFooter", children: /* @__PURE__ */ jsx22("td", { colSpan: columns.length, children: /* @__PURE__ */ jsxs18(
+                expandedRows[rowIndex] && /* @__PURE__ */ jsx22("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ jsx22("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, rowIndex) }) })
+              ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ jsx22("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx22("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ jsx22(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
+              withFooter && /* @__PURE__ */ jsx22("tfoot", { children: /* @__PURE__ */ jsx22("tr", { className: "isFooter", children: /* @__PURE__ */ jsx22("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ jsxs18(
                 Div_default.column,
                 {
                   position: "relative",