react-better-html 1.1.177 → 1.1.179

package/dist/index.mjs

@@ -3472,6 +3472,7 @@ var ModalComponent = forwardRef7(function Modal({
   description,
   descriptionColor,
   headerBackgroundColor,
+  backgroundColor,
   name,
   overflow,
   withoutCloseButton,
@@ -3559,7 +3560,7 @@ var ModalComponent = forwardRef7(function Modal({
                 position: "relative",
                 width: "100%",
                 minHeight: 32 + theme2.styles.space * 2,
-                backgroundColor: theme2.colors.backgroundBase,
+                backgroundColor: backgroundColor ?? theme2.colors.backgroundBase,
                 borderRadius: theme2.styles.borderRadius * 2,
                 padding: !title ? theme2.styles.space : void 0,
                 overflow,
@@ -3611,7 +3612,7 @@ var ModalComponent = forwardRef7(function Modal({
                       }
                     ),
                     /* @__PURE__ */ jsx12(Divider_default.horizontal, {})
-                  ] }) : /* @__PURE__ */ jsx12(Fragment2, { children: !withoutCloseButton && /* @__PURE__ */ jsx12(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, zIndex: 10, children: /* @__PURE__ */ jsx12(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }) }),
+                  ] }) : /* @__PURE__ */ jsx12(Fragment2, { children: !withoutCloseButton && /* @__PURE__ */ jsx12(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, zIndex: 10, children: /* @__PURE__ */ jsx12(Button_default.icon, { icon: "XMark", iconColor: titleColor, onClick: onClickClose }) }) }),
                   /* @__PURE__ */ jsx12(Div_default, { padding: title ? theme2.styles.space : void 0, children })
                 ]
               }
@@ -7837,8 +7838,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 +7856,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 +7884,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 +7987,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 +8093,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 +8247,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 +8285,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 +8305,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",