react-better-html 1.1.174 → 1.1.176

package/dist/index.d.mts

@@ -765,6 +765,7 @@ type TableColumn<DataItem> = {
     clickStopPropagation?: boolean;
 } & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn<DataItem> | ExpandColumn<DataItem>) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
 type TableProps<DataItem> = {
+    name?: string;
     columns: TableColumn<DataItem>[];
     data: DataItem[];
     /** @default false */
@@ -780,6 +781,16 @@ type TableProps<DataItem> = {
     isInsideTableExpandRow?: boolean;
     containsOverflowComponents?: boolean;
     wrapperComponentRef?: React.Ref<HTMLDivElement>;
+    /**
+     * @default false
+     * @requires name
+     */
+    memoizeFilters?: boolean;
+    /**
+     * The lifespan of the memoized filters in milliseconds. The time will reset if the user changes the filters or reloads the page.
+     * @default 7200000 (2 hours)
+     */
+    memoizeFiltersLifespan?: number;
     getRowStyle?: (item: DataItem, index: number) => ComponentStyle;
     onClickRow?: (item: DataItem, index: number) => void;
     onClickAllCheckboxes?: (checked: boolean) => void;

package/dist/index.d.ts

@@ -765,6 +765,7 @@ type TableColumn<DataItem> = {
     clickStopPropagation?: boolean;
 } & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn<DataItem> | ExpandColumn<DataItem>) & (NumberFilter<DataItem> | DateFilter<DataItem> | ListFilter<DataItem>);
 type TableProps<DataItem> = {
+    name?: string;
     columns: TableColumn<DataItem>[];
     data: DataItem[];
     /** @default false */
@@ -780,6 +781,16 @@ type TableProps<DataItem> = {
     isInsideTableExpandRow?: boolean;
     containsOverflowComponents?: boolean;
     wrapperComponentRef?: React.Ref<HTMLDivElement>;
+    /**
+     * @default false
+     * @requires name
+     */
+    memoizeFilters?: boolean;
+    /**
+     * The lifespan of the memoized filters in milliseconds. The time will reset if the user changes the filters or reloads the page.
+     * @default 7200000 (2 hours)
+     */
+    memoizeFiltersLifespan?: number;
     getRowStyle?: (item: DataItem, index: number) => ComponentStyle;
     onClickRow?: (item: DataItem, index: number) => void;
     onClickAllCheckboxes?: (checked: boolean) => void;

package/dist/index.js

@@ -5898,6 +5898,9 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
     ] }),
     [filteredOptions, value, focusedOptionIndex, theme2.colors, onClickOption, renderOption, renderOptionDivider]
   );
+  (0, import_react18.useEffect)(() => {
+    setInternalValue(controlledValue);
+  }, [controlledValue]);
   (0, import_react18.useEffect)(() => {
     if (isOpen) {
       setIsOpenLate.setTrue();
@@ -5933,7 +5936,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
   }, [withDebounce, onChangeSearch, debouncedSearchQuery]);
   const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
   const withClearButton = isOpen && selectedOption;
-  const readyPlaceholder = placeholder ? placeholder : `Select an ${label?.toLowerCase() ?? "option"}`;
+  const readyPlaceholder = placeholder ?? `Select an ${label?.toLowerCase() ?? "option"}`;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.row, { position: "relative", width: "100%", children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       InputField_default,
@@ -6218,6 +6221,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
       days.map((day, index) => {
         const thisDayDate = new Date(currentYear, currentMonth, day);
         const isSelected = day !== void 0 && day === currentDate?.getDate() && currentMonth === currentDate.getMonth() && currentYear === currentDate.getFullYear();
+        const isToday = thisDayDate.getDate() === (/* @__PURE__ */ new Date()).getDate() && thisDayDate.getMonth() === (/* @__PURE__ */ new Date()).getMonth() && thisDayDate.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear();
         const isWeekend = thisDayDate.getDay() === 6 || thisDayDate.getDay() === 0;
         const isDisabled = minDate && thisDayDate.getTime() < minDate.getTime() || maxDate && thisDayDate.getTime() > maxDate.getTime();
         return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
@@ -6229,7 +6233,8 @@ function Calendar({ value, minDate, maxDate, onChange }) {
             alignItems: "center",
             justifyContent: "center",
             backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-            filterHover: !isDisabled ? "brightness(0.9)" : void 0,
+            filterHover: day && !isDisabled ? "brightness(0.9)" : void 0,
+            border: `1px solid ${isToday ? theme2.colors.primary : theme2.colors.primary + "00"}`,
             borderRadius: theme2.styles.borderRadius / 2,
             padding: theme2.styles.space / 2,
             cursor: day ? !isDisabled ? "pointer" : "not-allowed" : void 0,
@@ -7890,6 +7895,7 @@ var filterPresetsText = {
   nextYear: "Next year"
 };
 var TableComponent = (0, import_react25.forwardRef)(function Table({
+  name,
   columns,
   data,
   isStriped,
@@ -7901,6 +7907,8 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
   isInsideTableExpandRow,
   containsOverflowComponents,
   wrapperComponentRef,
+  memoizeFilters,
+  memoizeFiltersLifespan = 72e5,
   getRowStyle,
   onClickRow,
   onClickAllCheckboxes,
@@ -7918,7 +7926,15 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
   const [checkedItems, setCheckedItems] = (0, import_react25.useState)([]);
   const [expandedRows, setExpandedRows] = (0, import_react25.useState)([]);
   const [currentPage, setCurrentPage] = (0, import_react25.useState)(1);
-  const [filterData, setFilterData] = (0, import_react25.useState)({});
+  const [filterData, setFilterData] = (0, import_react25.useState)(() => {
+    if (!memoizeFilters || !name) return {};
+    const localStorageData = JSON.parse(localStorage.getItem(`react-better-html-table-filters-${name}`) || "{}");
+    const timestamp = localStorageData.timestamp;
+    const data2 = localStorageData.data ?? {};
+    const timeDiff = Date.now() - timestamp;
+    if (timeDiff > memoizeFiltersLifespan) return {};
+    return data2;
+  });
   const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = (0, import_react25.useState)();
   const [filterListSelectedItems, setFilterListSelectedItems] = (0, import_react25.useState)();
   const openedFilterData = openedFilterColumnIndex ? filterData[openedFilterColumnIndex] : void 0;
@@ -8173,6 +8189,10 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
         } 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;
+          if (column.filter === "date") {
+            minDate?.setHours(0, 0, 0, 0);
+            maxDate?.setHours(23, 59, 59, 999);
+          }
           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;
@@ -8256,6 +8276,17 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
   (0, import_react25.useEffect)(() => {
     onChangeFilter?.(filterData);
   }, [onChangeFilter, filterData]);
+  (0, import_react25.useEffect)(() => {
+    if (!memoizeFilters) return;
+    if (!name) return;
+    localStorage.setItem(
+      `react-better-html-table-filters-${name}`,
+      JSON.stringify({
+        timestamp: Date.now(),
+        data: filterData
+      })
+    );
+  }, [memoizeFilters, name, filterData]);
   (0, import_react25.useEffect)(() => {
     onChangeFilterDataValue?.(dataAfterFilter);
   }, [onChangeFilterDataValue, dataAfterFilter]);