react-better-html 1.1.177 → 1.1.179

package/dist/index.d.mts

@@ -300,10 +300,11 @@ type ModalProps = {
      * */
     maxWidth?: number;
     title?: string;
-    titleColor?: string;
+    titleColor?: React.CSSProperties["color"];
     description?: string;
-    descriptionColor?: string;
-    headerBackgroundColor?: string;
+    descriptionColor?: React.CSSProperties["color"];
+    headerBackgroundColor?: React.CSSProperties["backgroundColor"];
+    backgroundColor?: React.CSSProperties["backgroundColor"];
     /** @requires ReactRouterDomPlugin */
     name?: string;
     overflow?: React.CSSProperties["overflow"];
@@ -755,6 +756,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

@@ -300,10 +300,11 @@ type ModalProps = {
      * */
     maxWidth?: number;
     title?: string;
-    titleColor?: string;
+    titleColor?: React.CSSProperties["color"];
     description?: string;
-    descriptionColor?: string;
-    headerBackgroundColor?: string;
+    descriptionColor?: React.CSSProperties["color"];
+    headerBackgroundColor?: React.CSSProperties["backgroundColor"];
+    backgroundColor?: React.CSSProperties["backgroundColor"];
     /** @requires ReactRouterDomPlugin */
     name?: string;
     overflow?: React.CSSProperties["overflow"];
@@ -755,6 +756,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

@@ -3566,6 +3566,7 @@ var ModalComponent = (0, import_react14.forwardRef)(function Modal({
   description,
   descriptionColor,
   headerBackgroundColor,
+  backgroundColor,
   name,
   overflow,
   withoutCloseButton,
@@ -3653,7 +3654,7 @@ var ModalComponent = (0, import_react14.forwardRef)(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,
@@ -3705,7 +3706,7 @@ var ModalComponent = (0, import_react14.forwardRef)(function Modal({
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Divider_default.horizontal, {})
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }) }),
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default.icon, { icon: "XMark", iconColor: titleColor, onClick: onClickClose }) }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { padding: title ? theme2.styles.space : void 0, children })
                 ]
               }
@@ -7921,8 +7922,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 +7940,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 +7968,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 +8071,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 +8177,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 +8331,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 +8369,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 +8389,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",