react-better-html 1.1.123 → 1.1.124

package/dist/index.d.mts

@@ -699,6 +699,7 @@ type DateFilter<DataItem> = {
 type ListFilter<DataItem> = {
     filter?: "list";
     withTotalNumber?: boolean;
+    withSearch?: boolean;
     getValueForList?: (item: DataItem) => OmitProps<ListFilterValue, "count">;
 };
 type TableColumn<DataItem> = {

package/dist/index.d.ts

@@ -699,6 +699,7 @@ type DateFilter<DataItem> = {
 type ListFilter<DataItem> = {
     filter?: "list";
     withTotalNumber?: boolean;
+    withSearch?: boolean;
     getValueForList?: (item: DataItem) => OmitProps<ListFilterValue, "count">;
 };
 type TableColumn<DataItem> = {

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();
     }
@@ -7314,7 +7355,12 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
     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;
-      if (value !== 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 ? {
@@ -7324,14 +7370,14 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
           );
         } else
           previousValue.push({
-            label: valueFromList ? valueFromList.label : value,
+            label,
             value,
             count: 1
           });
       }
       return previousValue;
     }, []);
-  }, [data, openedFilterColumn]);
+  }, [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);
@@ -7601,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: [
@@ -7611,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
                 }
@@ -7619,6 +7667,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
                 Button_default.secondary,
                 {
                   text: "Deselect All",
+                  isSmall: true,
                   disabled: !filterListSelectedItems?.length,
                   onClick: onClickDeselectAllFilterListItems
                 }
@@ -7626,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.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
-                );
-              }) })
-            ] })
+            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, {})
       }