react-better-html 1.1.122 → 1.1.124

package/dist/index.d.mts

@@ -647,6 +647,11 @@ declare const ColorThemeSwitch: typeof ColorThemeSwitchComponent & {
 };
 
 type FilterPreset = "today" | "yesterday" | "tomorrow" | "thisWeek" | "thisMonth" | "thisYear" | "lastWeek" | "lastMonth" | "lastYear" | "nextWeek" | "nextMonth" | "nextYear";
+type ListFilterValue = {
+    label?: string;
+    value: string;
+    count: number;
+};
 type TableFilterData = {
     type: "number";
     min?: number;
@@ -694,7 +699,8 @@ type DateFilter<DataItem> = {
 type ListFilter<DataItem> = {
     filter?: "list";
     withTotalNumber?: boolean;
-    getValueForList?: (item: DataItem) => string;
+    withSearch?: boolean;
+    getValueForList?: (item: DataItem) => OmitProps<ListFilterValue, "count">;
 };
 type TableColumn<DataItem> = {
     label?: string;

package/dist/index.d.ts

@@ -647,6 +647,11 @@ declare const ColorThemeSwitch: typeof ColorThemeSwitchComponent & {
 };
 
 type FilterPreset = "today" | "yesterday" | "tomorrow" | "thisWeek" | "thisMonth" | "thisYear" | "lastWeek" | "lastMonth" | "lastYear" | "nextWeek" | "nextMonth" | "nextYear";
+type ListFilterValue = {
+    label?: string;
+    value: string;
+    count: number;
+};
 type TableFilterData = {
     type: "number";
     min?: number;
@@ -694,7 +699,8 @@ type DateFilter<DataItem> = {
 type ListFilter<DataItem> = {
     filter?: "list";
     withTotalNumber?: boolean;
-    getValueForList?: (item: DataItem) => string;
+    withSearch?: boolean;
+    getValueForList?: (item: DataItem) => OmitProps<ListFilterValue, "count">;
 };
 type TableColumn<DataItem> = {
     label?: string;

package/dist/index.js

@@ -5974,8 +5974,48 @@ InputFieldComponent.password = (0, import_react18.forwardRef)(function Password(
     }
   );
 });
-InputFieldComponent.search = (0, import_react18.forwardRef)(function Search({ ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref, ...props });
+InputFieldComponent.search = (0, import_react18.forwardRef)(function Search({ value, onChangeValue, onFocus, onBlur, ...props }, ref) {
+  const [inputFieldValue, setInputFieldValue] = (0, import_react18.useState)(value?.toString() ?? "");
+  const [inputFieldFocused, setInputFieldFocused] = useBooleanState();
+  const onChangeValueElement = (0, import_react18.useCallback)(
+    (value2) => {
+      setInputFieldValue(value2);
+      onChangeValue?.(value2);
+    },
+    [onChangeValue]
+  );
+  const onFocusElement = (0, import_react18.useCallback)(
+    (event) => {
+      setInputFieldFocused.setTrue();
+      onFocus?.(event);
+    },
+    [onFocus]
+  );
+  const onBlurElement = (0, import_react18.useCallback)(
+    (event) => {
+      setTimeout(() => setInputFieldFocused.setFalse(), 0.1 * 1e3);
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+  const onClickRightIcon = (0, import_react18.useCallback)(() => {
+    onChangeValueElement("");
+  }, [onChangeValueElement]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    InputFieldComponent,
+    {
+      leftIcon: "magnifyingGlass",
+      placeholder: "Search...",
+      rightIcon: inputFieldValue.length > 0 && inputFieldFocused ? "XMark" : void 0,
+      onClickRightIcon,
+      value: inputFieldValue,
+      onChangeValue: onChangeValueElement,
+      onFocus: onFocusElement,
+      onBlur: onBlurElement,
+      ref,
+      ...props
+    }
+  );
 });
 InputFieldComponent.phoneNumber = (0, import_react18.forwardRef)(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
   const theme2 = useTheme();
@@ -7043,7 +7083,8 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
   const filterForm = useForm({
     defaultValues: {
       min: void 0,
-      max: void 0
+      max: void 0,
+      search: ""
     },
     onSubmit: (values) => {
       if (!openedFilterColumn?.filter) return;
@@ -7058,10 +7099,10 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
           type: openedFilterColumn.filter,
           min: values.min,
           max: values.max
-        } : openedFilterColumn.filter === "list" ? {
+        } : openedFilterColumn.filter === "list" ? filterListSelectedItems && filterListSelectedItems.length > 0 ? {
           type: openedFilterColumn.filter,
           list: filterListSelectedItems
-        } : void 0
+        } : void 0 : void 0
       }));
       filterModalRef.current?.close();
     }
@@ -7291,7 +7332,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
           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]) : "");
+          const itemValue = column.getValueForList?.(item).value ?? (column.type === "text" && column.keyName ? String(item[column.keyName]) : "");
           if (!filter.list?.includes(itemValue)) return false;
         }
         return true;
@@ -7311,28 +7352,32 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
   }, [data, checkedItems]);
   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]);
+    return data.reduce((previousValue, currentValue) => {
+      const valueFromList = openedFilterColumn.filter === "list" && openedFilterColumn.getValueForList ? openedFilterColumn.getValueForList(currentValue) : void 0;
+      const value = valueFromList ? valueFromList.value : openedFilterColumn.type === "text" && openedFilterColumn.keyName ? String(currentValue[openedFilterColumn.keyName]) : void 0;
+      const label = valueFromList ? valueFromList.label : value;
+      let searchPassed = openedFilterColumn.filter === "list" && openedFilterColumn.withSearch ? false : true;
+      if (openedFilterColumn.filter === "list" && openedFilterColumn.withSearch) {
+        searchPassed = label?.toLowerCase().includes(filterForm.values.search.toLowerCase()) ?? false;
+      }
+      if (value !== void 0 && value !== null && value !== "" && searchPassed) {
+        if (previousValue.some((item) => item.value === value)) {
+          previousValue = previousValue.map(
+            (item) => item.value === value ? {
+              ...item,
+              count: item.count + 1
+            } : item
+          );
+        } else
+          previousValue.push({
+            label,
+            value,
+            count: 1
+          });
+      }
+      return previousValue;
+    }, []);
+  }, [data, openedFilterColumn, filterForm.values.search]);
   const pageCountInternal = pageCount ?? (pageSize !== void 0 ? Math.ceil(dataAfterFilter.length / pageSize) : 1);
   const paginationItems = (0, import_react23.useMemo)(() => {
     const halfRange = Math.floor(maximumVisiblePages / 2);
@@ -7602,9 +7647,10 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
               ] })
             ]
           }
-        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           Form_default,
           {
+            gap: theme2.styles.space,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
             renderActionButtons: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
@@ -7612,6 +7658,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
                 Button_default.secondary,
                 {
                   text: "Select All",
+                  isSmall: true,
                   disabled: possibleFilterListValues.length === filterListSelectedItems?.length,
                   onClick: onClickSelectAllFilterListItems
                 }
@@ -7620,6 +7667,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
                 Button_default.secondary,
                 {
                   text: "Deselect All",
+                  isSmall: true,
                   disabled: !filterListSelectedItems?.length,
                   onClick: onClickDeselectAllFilterListItems
                 }
@@ -7627,36 +7675,47 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
             ] }),
             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: isActive ? theme2.colors.base + "c0" : theme2.colors.textSecondary,
-                          children: [
-                            "(",
-                            value.count,
-                            ")"
-                          ]
-                        }
-                      )
-                    ] })
-                  },
-                  value.value
-                );
-              }) })
-            ] })
+            children: [
+              openedFilterColumn?.withSearch && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FormRow_default, { oneItemOnly: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                InputField_default.search,
+                {
+                  label: "Search",
+                  autoComplete: "off",
+                  ...filterForm.getInputFieldProps("search")
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, 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.length > 0 ? 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.label ?? value.value }),
+                        openedFilterColumn.withTotalNumber && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                          Text_default,
+                          {
+                            fontSize: 14,
+                            color: isActive ? theme2.colors.base + "c0" : theme2.colors.textSecondary,
+                            children: [
+                              "(",
+                              value.count,
+                              ")"
+                            ]
+                          }
+                        )
+                      ] })
+                    },
+                    value.value
+                  );
+                }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default.unknown, { children: "No values" }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default, {})
+            ]
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default.unknown, { children: "Unknown filter" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader_default.box, {})
       }