react-better-html 1.1.103 → 1.1.104

package/dist/index.js

@@ -1495,6 +1495,26 @@ var icons = {
       }
     ]
   },
+  doubleChevronLeft: {
+    width: 512,
+    height: 512,
+    paths: [
+      {
+        d: "M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z",
+        type: "fill"
+      }
+    ]
+  },
+  doubleChevronRight: {
+    width: 512,
+    height: 512,
+    paths: [
+      {
+        d: "M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z",
+        type: "fill"
+      }
+    ]
+  },
   eye: {
     width: 576,
     height: 512,
@@ -1534,6 +1554,16 @@ var icons = {
         type: "fill"
       }
     ]
+  },
+  filter: {
+    width: 512,
+    height: 512,
+    paths: [
+      {
+        d: "M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z",
+        type: "fill"
+      }
+    ]
   }
 };
 
@@ -2315,14 +2345,19 @@ DivComponent.column = (0, import_react3.forwardRef)(function Column({ flexRevers
 DivComponent.grid = (0, import_react3.forwardRef)(function Grid(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DivComponent, { display: "grid", ref, ...props });
 });
-DivComponent.box = (0, import_react3.forwardRef)(function Box(props, ref) {
+DivComponent.box = (0, import_react3.forwardRef)(function Box({ isActive, ...props }, ref) {
   const theme2 = useTheme();
+  const withClick = props.onClick || props.onClickWithValue;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     DivComponent,
     {
-      backgroundColor: theme2.colors.backgroundContent,
-      border: `1px solid ${theme2.colors.border}`,
+      color: isActive ? theme2.colors.base : void 0,
+      backgroundColor: isActive ? theme2.colors.primary : theme2.colors.backgroundContent,
+      border: `1px solid ${isActive ? theme2.colors.primary : theme2.colors.border}`,
       borderRadius: theme2.styles.borderRadius,
+      borderColorHover: withClick && !isActive ? theme2.colors.primary : void 0,
+      filterHover: withClick && isActive ? "brightness(0.9)" : void 0,
+      cursor: withClick ? "pointer" : void 0,
       paddingBlock: theme2.styles.gap,
       paddingInline: theme2.styles.space,
       ref,
@@ -3130,7 +3165,7 @@ var Modal_default = Modal2;
 // src/components/PageHolder.tsx
 var import_react12 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var PageHolderComponent = (0, import_react12.forwardRef)(function PageHolder({ noMaxContentWidth, backgroundColor, children, ...props }, ref) {
+var PageHolderComponent = (0, import_react12.forwardRef)(function PageHolder({ noMaxContentWidth, children, ...props }, ref) {
   const theme2 = useTheme();
   const { app } = useBetterHtmlContextInternal();
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -3139,7 +3174,6 @@ var PageHolderComponent = (0, import_react12.forwardRef)(function PageHolder({ n
       as: "main",
       width: "100%",
       maxWidth: !noMaxContentWidth ? app.contentMaxWidth : void 0,
-      backgroundColor,
       margin: "0px auto",
       padding: theme2.styles.space,
       ...props,
@@ -3148,8 +3182,55 @@ var PageHolderComponent = (0, import_react12.forwardRef)(function PageHolder({ n
     }
   );
 });
-PageHolderComponent.center = (0, import_react12.forwardRef)(function Center(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
+  decorationImageSrc,
+  decorationImageName,
+  decorationImagePosition = "right",
+  noMaxContentWidth,
+  children,
+  ...props
+}, ref) {
+  const theme2 = useTheme();
+  const mediaQuery = useMediaQuery();
+  const { app } = useBetterHtmlContextInternal();
+  const breakingPoint = mediaQuery.size1000;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Div_default.row, { width: "100%", minHeight: "100svh", alignItems: "center", justifyContent: "center", children: [
+    decorationImagePosition === "left" && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Div_default.column,
+      {
+        width: `${!breakingPoint && (decorationImageSrc || decorationImageName) ? 50 : 100}%`,
+        alignItems: "center",
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Div_default.box,
+          {
+            width: `calc(100% - ${theme2.styles.space}px * 2)`,
+            maxWidth: !noMaxContentWidth ? app.contentMaxWidth / 2 : void 0,
+            marginInline: theme2.styles.space,
+            marginBlock: theme2.styles.space,
+            ...props,
+            ref,
+            children
+          }
+        )
+      }
+    ),
+    decorationImagePosition === "right" && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
+    (decorationImageSrc || decorationImageName) && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Image_default,
+      {
+        position: "fixed",
+        name: decorationImageName,
+        src: decorationImageSrc,
+        width: "50%",
+        height: "100svh",
+        top: 0,
+        left: decorationImagePosition === "left" ? 0 : "auto",
+        right: decorationImagePosition === "right" ? 0 : "auto",
+        objectFit: "cover"
+      }
+    )
+  ] });
 });
 var PageHolder2 = (0, import_react12.memo)(PageHolderComponent);
 PageHolder2.center = PageHolderComponent.center;
@@ -5508,10 +5589,19 @@ var InputElement = import_styled_components9.default.input.withConfig({
       cursor: not-allowed;
    }
 
+   &::-webkit-outer-spin-button,
+   &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+   }
+
+   &[type="number"] {
+      -moz-appearance: textfield;
+   }
+
    &[type="date"],
    &[type="datetime-local"],
    &[type="time"] {
-      // min-height: 46px;
       -webkit-appearance: none;
       -moz-appearance: textfield;
 
@@ -5665,7 +5755,7 @@ var InputFieldComponent = (0, import_react18.forwardRef)(function InputField({
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { position: "relative", width: "100%", ref: holderRef, children: [
       leftIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -5760,7 +5850,7 @@ InputFieldComponent.multiline = (0, import_react18.forwardRef)(function Multilin
     [onChange, onChangeValue]
   );
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { gap: theme2.styles.gap, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, required, isError: !!errorText, htmlFor: readyId }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { position: "relative", width: "100%", children: [
       leftIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -5911,7 +6001,7 @@ InputFieldComponent.phoneNumber = (0, import_react18.forwardRef)(function PhoneN
     setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
   }, [value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       Label_default,
       {
@@ -5937,7 +6027,8 @@ InputFieldComponent.phoneNumber = (0, import_react18.forwardRef)(function PhoneN
           value: dropdownValue,
           disabled: props.disabled,
           onChange: setDropdownValue,
-          withoutClearButton: true
+          withoutClearButton: true,
+          withoutRenderingOptionsWhenClosed: true
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -6593,11 +6684,13 @@ var FormComponent = (0, import_react20.forwardRef)(function Form({
   submitButtonLoaderName,
   submitButtonId,
   submitButtonIsDisabled,
+  cancelButtonText,
   actionButtonsLocation = "right",
   gap,
   isSubmitting,
   isDestructive,
   withDividers,
+  renderActionButtons,
   onClickCancel,
   onSubmit,
   children,
@@ -6625,7 +6718,8 @@ var FormComponent = (0, import_react20.forwardRef)(function Form({
         gap: theme2.styles.gap,
         marginTop: theme2.styles.space,
         children: [
-          onClickCancel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button_default.secondary, { text: "Cancel", onClick: onClickCancel }),
+          renderActionButtons,
+          onClickCancel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button_default.secondary, { text: cancelButtonText ?? "Cancel", onClick: onClickCancel }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             SubmitButtonTag,
             {
@@ -6766,6 +6860,7 @@ var import_react23 = require("react");
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var defaultImageWidth = 120;
+var maximumVisiblePages = 11;
 var TableStyledComponent = import_styled_components11.default.table.withConfig({
   shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "colorTheme", "theme"].includes(prop)
 })`
@@ -6781,6 +6876,10 @@ var TableStyledComponent = import_styled_components11.default.table.withConfig({
          font-weight: 700;
       }
 
+      &.isFooter {
+         background-color: ${(props) => props.theme.colors.backgroundSecondary};
+      }
+
       &.isClickable {
          cursor: pointer;
       }
@@ -6829,6 +6928,19 @@ var TdStyledComponent = import_styled_components11.default.td.withConfig({
 })`
    ${(props) => props.textAlign ? `text-align: ${props.textAlign} !important;` : ""}
 `;
+var filterPresetsText = {
+  today: "Today",
+  yesterday: "Yesterday",
+  thisWeek: "This week",
+  thisMonth: "This month",
+  thisYear: "This year",
+  lastWeek: "Last week",
+  lastMonth: "Last month",
+  lastYear: "Last year",
+  nextWeek: "Next week",
+  nextMonth: "Next month",
+  nextYear: "Next year"
+};
 var TableComponent = (0, import_react23.forwardRef)(function Table({
   columns,
   data,
@@ -6836,13 +6948,50 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
   isLoading,
   withStickyHeader,
   noDataItemsMessage = "No data available",
+  pageSize,
   onClickRow,
   onClickAllCheckboxes,
+  onChangePage,
+  onChangeFilter,
   ...props
 }, ref) {
-  const { colorTheme } = useBetterHtmlContextInternal();
   const theme2 = useTheme();
+  const mediumScreen = useMediaQuery();
+  const { colorTheme } = useBetterHtmlContextInternal();
+  const filterModalRef = (0, import_react23.useRef)(null);
   const [checkedItems, setCheckedItems] = (0, import_react23.useState)([]);
+  const [currentPage, setCurrentPage] = (0, import_react23.useState)(1);
+  const [filterData, setFilterData] = (0, import_react23.useState)({});
+  const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = (0, import_react23.useState)();
+  const [filterListSelectedItems, setFilterListSelectedItems] = (0, import_react23.useState)();
+  const openedFilterData = openedFilterColumnIndex ? filterData[openedFilterColumnIndex] : void 0;
+  const openedFilterColumn = openedFilterColumnIndex ? columns[openedFilterColumnIndex] : void 0;
+  const filterForm = useForm({
+    defaultValues: {
+      min: void 0,
+      max: void 0
+    },
+    onSubmit: (values) => {
+      if (!openedFilterColumn?.filter) return;
+      if (openedFilterColumnIndex === void 0) return;
+      setFilterData((oldValue) => ({
+        ...oldValue,
+        [openedFilterColumnIndex]: openedFilterColumn.filter === "number" ? {
+          type: openedFilterColumn.filter,
+          min: values.min,
+          max: values.max
+        } : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? {
+          type: openedFilterColumn.filter,
+          min: values.min,
+          max: values.max
+        } : openedFilterColumn.filter === "list" ? {
+          type: openedFilterColumn.filter,
+          list: filterListSelectedItems
+        } : void 0
+      }));
+      filterModalRef.current?.close();
+    }
+  });
   const renderCellContent = (0, import_react23.useCallback)(
     (column, item, index) => {
       switch (column.type) {
@@ -6895,57 +7044,489 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
     },
     [onClickAllCheckboxes, data]
   );
+  const onClickFilterButton = (0, import_react23.useCallback)(
+    (columnIndex) => {
+      const thisFilterData = filterData[columnIndex];
+      if (thisFilterData?.type === "number" || thisFilterData?.type === "date" || thisFilterData?.type === "date-time") {
+        filterForm.setFieldsValue({
+          min: thisFilterData.min ?? void 0,
+          max: thisFilterData.max ?? void 0
+        });
+      } else if (thisFilterData?.type === "list") {
+        setFilterListSelectedItems(thisFilterData.list);
+      }
+      setOpenedFilterColumnIndex(columnIndex);
+      filterModalRef.current?.open();
+    },
+    [filterData]
+  );
+  const onCloseFilterModal = (0, import_react23.useCallback)(() => {
+    setTimeout(() => setOpenedFilterColumnIndex(void 0), 0.2 * 1e3);
+    setFilterListSelectedItems(void 0);
+    filterForm.reset();
+  }, []);
+  const onClickCancelFormFilter = (0, import_react23.useCallback)(() => {
+    if (openedFilterColumnIndex === void 0) return;
+    setFilterData((oldValue) => ({
+      ...oldValue,
+      [openedFilterColumnIndex]: void 0
+    }));
+    filterModalRef.current?.close();
+  }, [openedFilterColumnIndex]);
+  const onClickFilterListItem = (0, import_react23.useCallback)(
+    (value) => setFilterListSelectedItems((oldValue) => {
+      if (!oldValue) return [value];
+      if (oldValue.includes(value)) return oldValue.filter((item) => item !== value);
+      return [...oldValue, value];
+    }),
+    []
+  );
+  const onClickFilterPreset = (0, import_react23.useCallback)(
+    (preset) => {
+      const getValueForDate = (date) => {
+        if (openedFilterColumn?.filter === "date") return date.toISOString().split("T")[0];
+        return date.toISOString();
+      };
+      switch (preset) {
+        case "today":
+          filterForm.setFieldsValue({
+            min: getValueForDate(/* @__PURE__ */ new Date()),
+            max: getValueForDate(/* @__PURE__ */ new Date())
+          });
+          break;
+        case "yesterday":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1)))
+          });
+          break;
+        case "thisWeek":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 7))),
+            max: getValueForDate(/* @__PURE__ */ new Date())
+          });
+          break;
+        case "thisMonth":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setMonth((/* @__PURE__ */ new Date()).getMonth() - 1))),
+            max: getValueForDate(/* @__PURE__ */ new Date())
+          });
+          break;
+        case "thisYear":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setFullYear((/* @__PURE__ */ new Date()).getFullYear() - 1))),
+            max: getValueForDate(/* @__PURE__ */ new Date())
+          });
+          break;
+        case "lastWeek":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 7))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1)))
+          });
+          break;
+        case "lastMonth":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setMonth((/* @__PURE__ */ new Date()).getMonth() - 1))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1)))
+          });
+          break;
+        case "lastYear":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setFullYear((/* @__PURE__ */ new Date()).getFullYear() - 1))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 1)))
+          });
+          break;
+        case "nextWeek":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 7))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 7)))
+          });
+          break;
+        case "nextMonth":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setMonth((/* @__PURE__ */ new Date()).getMonth() + 1))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setMonth((/* @__PURE__ */ new Date()).getMonth() + 1)))
+          });
+          break;
+        case "nextYear":
+          filterForm.setFieldsValue({
+            min: getValueForDate(new Date((/* @__PURE__ */ new Date()).setFullYear((/* @__PURE__ */ new Date()).getFullYear() + 1))),
+            max: getValueForDate(new Date((/* @__PURE__ */ new Date()).setFullYear((/* @__PURE__ */ new Date()).getFullYear() + 1)))
+          });
+          break;
+        default:
+          break;
+      }
+    },
+    [openedFilterColumn]
+  );
+  const dataAfterFilter = (0, import_react23.useMemo)(
+    () => data.filter(
+      (item) => Object.entries(filterData).every(([columnIndex, filter]) => {
+        if (!filter) return true;
+        const column = columns[parseInt(columnIndex)];
+        if (!column) return true;
+        if (column.filter === "number" && filter.type === "number") {
+          const itemValue = column.getValue?.(item) ?? (column.type === "text" && column.keyName ? Number(item[column.keyName]) : 0);
+          if (filter.min !== void 0 && itemValue < filter.min) return false;
+          if (filter.max !== void 0 && itemValue > filter.max) return false;
+        } else if (column.filter === "date" && filter.type === "date" || column.filter === "date-time" && filter.type === "date-time") {
+          const minDate = filter.min ? new Date(filter.min) : void 0;
+          const maxDate = filter.max ? new Date(filter.max) : void 0;
+          const itemValue = column.getValue?.(item) ?? new Date(column.type === "text" && column.keyName ? String(item[column.keyName]) : "");
+          if (filter.min !== void 0 && minDate && itemValue < minDate) return false;
+          if (filter.max !== void 0 && maxDate && itemValue > maxDate) return false;
+        } else if (column.filter === "list" && filter.type === "list") {
+          const itemValue = column.getValueForList?.(item) ?? (column.type === "text" && column.keyName ? String(item[column.keyName]) : "");
+          if (!filter.list?.includes(itemValue)) return false;
+        }
+        return true;
+      })
+    ),
+    [data, filterData, columns]
+  );
+  const dataAfterPagination = (0, import_react23.useMemo)(() => {
+    if (pageSize === void 0) return dataAfterFilter;
+    const pageStartItemIndex = (currentPage - 1) * (pageSize ?? 0);
+    const pageEndItemIndex = pageStartItemIndex + (pageSize ?? 0);
+    return dataAfterFilter.slice(pageStartItemIndex, pageEndItemIndex);
+  }, [dataAfterFilter, pageSize, currentPage]);
   const everythingIsChecked = (0, import_react23.useMemo)(() => {
     return checkedItems.every((checked) => checked) && checkedItems.length === data.length;
   }, [data, checkedItems]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    Div_default,
-    {
-      border: `1px solid ${theme2.colors.border}`,
-      borderRadius: theme2.styles.borderRadius * 2,
-      overflow: "auto",
-      ...props,
-      ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-        TableStyledComponent,
-        {
-          isStriped,
-          withHover: onClickRow !== void 0,
-          withStickyHeader,
-          colorTheme,
-          theme: theme2,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              ThStyledComponent,
-              {
-                width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width,
-                minWidth: column.minWidth,
-                maxWidth: column.maxWidth,
-                textAlign: column.align,
-                children: column.label ?? (column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                  ToggleInput_default.checkbox,
-                  {
-                    checked: everythingIsChecked,
-                    onChange: onClickAllCheckboxesElement
-                  }
-                ) : "")
-              },
-              column.type + column.label + index
-            )) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader_default.box, {}) }) }) : data.length > 0 ? data.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              "tr",
-              {
-                className: onClickRow ? "isClickable" : void 0,
-                onClick: () => onClickRowElement(item, rowIndex),
-                children: columns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))
-              },
-              JSON.stringify(item) + rowIndex
-            )) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) })
-          ]
+  const possibleFilterListValues = (0, import_react23.useMemo)(() => {
+    if (!openedFilterColumn) return [];
+    return data.reduce(
+      (previousValue, currentValue) => {
+        const value = openedFilterColumn.type === "text" && openedFilterColumn.keyName ? String(currentValue[openedFilterColumn.keyName]) : void 0;
+        if (value !== void 0) {
+          if (previousValue.some((item) => item.value === value)) {
+            previousValue = previousValue.map(
+              (item) => item.value === value ? {
+                ...item,
+                count: item.count + 1
+              } : item
+            );
+          } else
+            previousValue.push({
+              value,
+              count: 1
+            });
         }
-      )
+        return previousValue;
+      },
+      []
+    );
+  }, [data, openedFilterColumn]);
+  const pagesCount = pageSize !== void 0 ? Math.ceil(dataAfterPagination.length / pageSize) : 1;
+  const paginationItems = (0, import_react23.useMemo)(() => {
+    const halfRange = Math.floor(maximumVisiblePages / 2);
+    let startPage = Math.max(1, currentPage - halfRange);
+    let endPage = Math.min(pagesCount, currentPage + halfRange);
+    if (endPage - startPage + 1 < maximumVisiblePages) {
+      startPage = Math.max(1, endPage - maximumVisiblePages + 1);
+      endPage = Math.min(pagesCount, startPage + maximumVisiblePages - 1);
     }
+    return Array.from(
+      {
+        length: endPage - startPage + 1
+      },
+      (_, index) => startPage + index
+    );
+  }, [pagesCount, currentPage]);
+  const onClickNextPage = (0, import_react23.useCallback)(() => {
+    setCurrentPage((oldValue) => oldValue >= pagesCount ? pagesCount : oldValue + 1);
+  }, [pagesCount]);
+  const onClickPreviousPage = (0, import_react23.useCallback)(() => {
+    setCurrentPage((oldValue) => oldValue <= 1 ? 1 : oldValue - 1);
+  }, []);
+  const onClickSelectAllFilterListItems = (0, import_react23.useCallback)(
+    () => setFilterListSelectedItems(possibleFilterListValues.map((item) => item.value)),
+    [possibleFilterListValues]
   );
+  const onClickDeselectAllFilterListItems = (0, import_react23.useCallback)(() => setFilterListSelectedItems([]), []);
+  (0, import_react23.useEffect)(() => {
+    onChangePage?.(currentPage);
+  }, [onChangePage, currentPage]);
+  (0, import_react23.useEffect)(() => {
+    onChangeFilter?.(filterData);
+  }, [onChangeFilter, filterData]);
+  (0, import_react23.useImperativeHandle)(
+    ref,
+    () => {
+      return {
+        currentPage,
+        setCurrentPage,
+        pagesCount,
+        setCheckedItems
+      };
+    },
+    [currentPage, setCurrentPage, pagesCount, setCheckedItems]
+  );
+  const mobileFooterBreakingPoint = mediumScreen.size700 && pagesCount > maximumVisiblePages / 1.4;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      Div_default,
+      {
+        border: `1px solid ${theme2.colors.border}`,
+        borderRadius: theme2.styles.borderRadius * 2,
+        overflow: "auto",
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          TableStyledComponent,
+          {
+            isStriped,
+            withHover: onClickRow !== void 0,
+            withStickyHeader,
+            colorTheme,
+            theme: theme2,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                ThStyledComponent,
+                {
+                  width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width,
+                  minWidth: column.minWidth,
+                  maxWidth: column.maxWidth,
+                  textAlign: column.align,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                    Div_default.row,
+                    {
+                      width: "100%",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      gap: theme2.styles.gap,
+                      children: [
+                        column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                          ToggleInput_default.checkbox,
+                          {
+                            checked: everythingIsChecked,
+                            onChange: onClickAllCheckboxesElement
+                          }
+                        ) : column.label ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { children: column.label }) : void 0,
+                        column.filter && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                          Button_default.icon,
+                          {
+                            icon: "filter",
+                            color: filterData[index] ? theme2.colors.primary : theme2.colors.textSecondary,
+                            value: index,
+                            onClickWithValue: onClickFilterButton
+                          }
+                        )
+                      ]
+                    }
+                  )
+                },
+                column.type + column.label + index
+              )) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                "tr",
+                {
+                  className: onClickRow ? "isClickable" : void 0,
+                  onClick: () => onClickRowElement(item, rowIndex),
+                  children: columns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))
+                },
+                JSON.stringify(item) + rowIndex
+              )) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
+              pageSize !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "isFooter", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                Div_default.column,
+                {
+                  position: "relative",
+                  width: "100%",
+                  justifyContent: "center",
+                  flexReverse: true,
+                  gap: theme2.styles.gap / 2,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                      Text_default,
+                      {
+                        position: mobileFooterBreakingPoint ? "relative" : "absolute",
+                        top: !mobileFooterBreakingPoint ? "50%" : void 0,
+                        color: theme2.colors.textSecondary,
+                        transform: !mobileFooterBreakingPoint ? "translateY(-50%)" : void 0,
+                        userSelect: "none",
+                        children: [
+                          currentPage,
+                          " / ",
+                          pagesCount
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
+                      pagesCount > maximumVisiblePages && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        Button_default.icon,
+                        {
+                          icon: "doubleChevronLeft",
+                          disabled: currentPage === 1,
+                          value: 1,
+                          onClickWithValue: setCurrentPage
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        Button_default.icon,
+                        {
+                          icon: "chevronLeft",
+                          disabled: currentPage === 1,
+                          onClick: onClickPreviousPage
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        Div_default.row,
+                        {
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexWrap: mobileFooterBreakingPoint ? "wrap" : void 0,
+                          gap: theme2.styles.gap,
+                          children: paginationItems.map((pageIndex) => {
+                            const isActive = currentPage === pageIndex;
+                            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                              Div_default,
+                              {
+                                cursor: "pointer",
+                                userSelect: "none",
+                                value: pageIndex,
+                                onClickWithValue: setCurrentPage,
+                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                  Text_default,
+                                  {
+                                    fontWeight: isActive ? 700 : 400,
+                                    color: isActive ? theme2.colors.primary : theme2.colors.textSecondary,
+                                    transition: theme2.styles.transition,
+                                    children: pageIndex
+                                  }
+                                )
+                              },
+                              pageIndex
+                            );
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        Button_default.icon,
+                        {
+                          icon: "chevronRight",
+                          disabled: currentPage === pagesCount,
+                          onClick: onClickNextPage
+                        }
+                      ),
+                      pagesCount > maximumVisiblePages && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        Button_default.icon,
+                        {
+                          icon: "doubleChevronRight",
+                          disabled: currentPage === pagesCount,
+                          onClickWithValue: setCurrentPage,
+                          value: pagesCount
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ) }) }) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      Modal_default,
+      {
+        title: `Filter ${openedFilterColumn?.label}`,
+        description: openedFilterColumn?.filter === "number" ? "Enter minimum and maximum values to filter" : openedFilterColumn?.filter === "date" || openedFilterColumn?.filter === "date-time" ? "Enter minimum and maximum dates to filter" : openedFilterColumn?.filter === "list" ? "Select values to filter from the list bellow" : "",
+        onClose: onCloseFilterModal,
+        ref: filterModalRef,
+        children: openedFilterColumn ? openedFilterColumn.filter === "number" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          Form_default,
+          {
+            form: filterForm,
+            submitButtonText: "Filter",
+            cancelButtonText: "Clear",
+            onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(FormRow_default, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
+            ] })
+          }
+        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          Form_default,
+          {
+            form: filterForm,
+            gap: theme2.styles.gap,
+            submitButtonText: "Filter",
+            cancelButtonText: "Clear",
+            onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(FormRow_default, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
+              ] }),
+              openedFilterColumn.presets && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label_default, { text: "Presets" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    Button_default.secondary,
+                    {
+                      text: filterPresetsText[preset],
+                      value: preset,
+                      onClickWithValue: onClickFilterPreset
+                    },
+                    preset
+                  );
+                }) })
+              ] })
+            ]
+          }
+        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          Form_default,
+          {
+            submitButtonText: "Filter",
+            cancelButtonText: "Clear",
+            renderActionButtons: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                Button_default.secondary,
+                {
+                  text: "Select All",
+                  disabled: possibleFilterListValues.length === filterListSelectedItems?.length,
+                  onClick: onClickSelectAllFilterListItems
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                Button_default.secondary,
+                {
+                  text: "Deselect All",
+                  disabled: !filterListSelectedItems?.length,
+                  onClick: onClickDeselectAllFilterListItems
+                }
+              )
+            ] }),
+            onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
+            onSubmit: filterForm.onSubmit,
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, marginBottom: theme2.styles.space, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label_default, { text: "Possible values" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.map((value) => {
+                const isActive = filterListSelectedItems?.includes(value.value);
+                return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  Div_default.box,
+                  {
+                    isActive,
+                    value: value.value,
+                    onClickWithValue: onClickFilterListItem,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { children: value.value }),
+                      openedFilterColumn.withTotalNumber && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: [
+                        "(",
+                        value.count,
+                        ")"
+                      ] })
+                    ] })
+                  },
+                  value.value
+                );
+              }) })
+            ] })
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default.unknown, { children: "Unknown filter" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader_default.box, {})
+      }
+    )
+  ] });
 });
 var Table2 = (0, import_react23.memo)(TableComponent);
 var Table_default = Table2;