@kopexa/filter 0.0.25 → 0.0.27

package/dist/chunk-NUDUXOHP.mjs

@@ -0,0 +1,243 @@
+"use client";
+import {
+  AddFilterDropdown,
+  FilterPill
+} from "./chunk-XCWKWXBW.mjs";
+import {
+  filterBarMessages
+} from "./chunk-I7WCYMXD.mjs";
+
+// src/search-filter-bar.tsx
+import { useSafeIntl } from "@kopexa/i18n";
+import { SearchIcon } from "@kopexa/icons";
+import { cn } from "@kopexa/shared-utils";
+import { Spinner } from "@kopexa/spinner";
+import { useControllableState } from "@kopexa/use-controllable-state";
+import { useDebounceCallback } from "@kopexa/use-debounced-callback";
+import { useCallback, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SearchFilterBar(props) {
+  const {
+    fields,
+    filters: filtersProp,
+    defaultFilters = [],
+    onFiltersChange,
+    search: searchProp,
+    defaultSearch = "",
+    onSearchChange,
+    onSearchValueChange,
+    searchDebounce = 300,
+    searchPlaceholder,
+    searchLoading = false,
+    i18n: i18nProp,
+    className,
+    allowMultiple = true,
+    disabled = false,
+    endContent
+  } = props;
+  const t = useSafeIntl();
+  const instanceId = useId();
+  const [filters, setFilters] = useControllableState({
+    value: filtersProp,
+    defaultValue: defaultFilters,
+    onChange: onFiltersChange
+  });
+  const [search, setSearch] = useControllableState({
+    value: searchProp,
+    defaultValue: defaultSearch,
+    onChange: onSearchChange
+  });
+  const [sessionFilterId, setSessionFilterId] = useState(null);
+  const i18n = useMemo(() => {
+    const defaultI18n = {
+      addFilter: t.formatMessage(filterBarMessages.add_filter),
+      clearAll: t.formatMessage(filterBarMessages.clear_all),
+      noResults: t.formatMessage(filterBarMessages.no_results),
+      searchPlaceholder: t.formatMessage(filterBarMessages.search_placeholder),
+      selectValue: t.formatMessage(filterBarMessages.select_value),
+      enterValue: t.formatMessage(filterBarMessages.enter_value),
+      operators: {
+        equals: t.formatMessage(filterBarMessages.op_equals),
+        not_equals: t.formatMessage(filterBarMessages.op_not_equals),
+        contains: t.formatMessage(filterBarMessages.op_contains),
+        not_contains: t.formatMessage(filterBarMessages.op_not_contains),
+        starts_with: t.formatMessage(filterBarMessages.op_starts_with),
+        ends_with: t.formatMessage(filterBarMessages.op_ends_with),
+        gt: t.formatMessage(filterBarMessages.op_gt),
+        lt: t.formatMessage(filterBarMessages.op_lt),
+        gte: t.formatMessage(filterBarMessages.op_gte),
+        lte: t.formatMessage(filterBarMessages.op_lte),
+        is_empty: t.formatMessage(filterBarMessages.op_is_empty),
+        is_not_empty: t.formatMessage(filterBarMessages.op_is_not_empty)
+      }
+    };
+    return {
+      ...defaultI18n,
+      ...i18nProp,
+      operators: {
+        ...defaultI18n.operators,
+        ...i18nProp == null ? void 0 : i18nProp.operators
+      }
+    };
+  }, [t, i18nProp]);
+  const fieldGroups = useMemo(() => {
+    var _a;
+    const groups = /* @__PURE__ */ new Map();
+    for (const field of fields) {
+      const group = field.group;
+      if (!groups.has(group)) {
+        groups.set(group, []);
+      }
+      (_a = groups.get(group)) == null ? void 0 : _a.push(field);
+    }
+    return groups;
+  }, [fields]);
+  const addFilter = useCallback(
+    (fieldId) => {
+      var _a;
+      const field = fields.find((f) => f.id === fieldId);
+      if (!field) return;
+      if (!allowMultiple && filters.some((f) => f.fieldId === fieldId)) {
+        return;
+      }
+      const newFilter = {
+        id: `${instanceId}-${fieldId}-${Date.now()}`,
+        fieldId,
+        operator: (_a = field.defaultOperator) != null ? _a : "equals",
+        value: field.type === "multiselect" ? [] : null
+      };
+      setFilters([...filters, newFilter]);
+      setSessionFilterId(newFilter.id);
+    },
+    [fields, filters, setFilters, allowMultiple, instanceId]
+  );
+  const updateFilter = useCallback(
+    (filterId, updates) => {
+      setFilters(
+        filters.map((f) => f.id === filterId ? { ...f, ...updates } : f)
+      );
+    },
+    [filters, setFilters]
+  );
+  const removeFilter = useCallback(
+    (filterId) => {
+      setFilters(filters.filter((f) => f.id !== filterId));
+      if (sessionFilterId === filterId) {
+        setSessionFilterId(null);
+      }
+    },
+    [filters, setFilters, sessionFilterId]
+  );
+  const clearFilters = useCallback(() => {
+    setFilters([]);
+    setSessionFilterId(null);
+  }, [setFilters]);
+  const isFieldAvailable = useCallback(
+    (fieldId) => {
+      if (allowMultiple) return true;
+      return !filters.some((f) => f.fieldId === fieldId);
+    },
+    [filters, allowMultiple]
+  );
+  const debouncedSearchCallback = useDebounceCallback((value) => {
+    onSearchValueChange == null ? void 0 : onSearchValueChange(value);
+  }, searchDebounce);
+  const handleSearchChange = useCallback(
+    (e) => {
+      const value = e.target.value;
+      setSearch(value);
+      if (onSearchValueChange) {
+        debouncedSearchCallback(value);
+      }
+    },
+    [setSearch, onSearchValueChange, debouncedSearchCallback]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "search-filter-bar",
+      className: cn("flex items-center gap-2 w-full", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-1 flex-wrap items-center gap-2",
+              "border border-input rounded-lg",
+              "bg-background",
+              "px-3 py-2",
+              "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1",
+              "transition-shadow",
+              disabled && "opacity-50 pointer-events-none"
+            ),
+            children: [
+              filters.map((filter) => {
+                const field = fields.find((f) => f.id === filter.fieldId);
+                if (!field) return null;
+                return /* @__PURE__ */ jsx(
+                  FilterPill,
+                  {
+                    filter,
+                    field,
+                    i18n,
+                    onUpdate: (updates) => updateFilter(filter.id, updates),
+                    onRemove: () => removeFilter(filter.id),
+                    autoOpen: sessionFilterId === filter.id,
+                    onAutoOpenComplete: () => setSessionFilterId(null),
+                    disabled
+                  },
+                  filter.id
+                );
+              }),
+              /* @__PURE__ */ jsx(
+                AddFilterDropdown,
+                {
+                  fieldGroups,
+                  isFieldAvailable,
+                  onAddFilter: addFilter,
+                  i18n,
+                  disabled
+                }
+              ),
+              filters.length > 1 && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: clearFilters,
+                  className: "text-xs text-muted-foreground hover:text-foreground cursor-pointer transition-colors underline-offset-2 hover:underline",
+                  disabled,
+                  children: i18n.clearAll
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 min-w-[120px]", children: [
+                /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 text-muted-foreground flex-shrink-0" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: search,
+                    onChange: handleSearchChange,
+                    placeholder: searchPlaceholder != null ? searchPlaceholder : i18n.searchPlaceholder,
+                    disabled,
+                    className: cn(
+                      "flex-1 bg-transparent border-none outline-none",
+                      "text-sm placeholder:text-muted-foreground",
+                      "min-w-0"
+                    )
+                  }
+                ),
+                searchLoading && /* @__PURE__ */ jsx(Spinner, { size: "xs", className: "flex-shrink-0" })
+              ] })
+            ]
+          }
+        ),
+        endContent
+      ]
+    }
+  );
+}
+SearchFilterBar.displayName = "SearchFilterBar";
+
+export {
+  SearchFilterBar
+};

package/dist/chunk-ON2UFJ3Y.mjs

@@ -0,0 +1,32 @@
+"use client";
+
+// src/filter-bar-types.ts
+var DEFAULT_FILTER_BAR_OPERATORS = {
+  select: ["equals", "not_equals", "is_empty", "is_not_empty"],
+  multiselect: ["equals", "not_equals", "is_empty", "is_not_empty"],
+  text: [
+    "equals",
+    "not_equals",
+    "contains",
+    "not_contains",
+    "starts_with",
+    "ends_with",
+    "is_empty",
+    "is_not_empty"
+  ],
+  number: [
+    "equals",
+    "not_equals",
+    "gt",
+    "lt",
+    "gte",
+    "lte",
+    "is_empty",
+    "is_not_empty"
+  ],
+  custom: ["equals", "not_equals"]
+};
+
+export {
+  DEFAULT_FILTER_BAR_OPERATORS
+};

package/dist/{chunk-RFCPJLIQ.mjs → chunk-SJXRD3RO.mjs}

@@ -1,10 +1,14 @@
 "use client";
+import {
+  messages
+} from "./chunk-YTYOFT33.mjs";
 import {
   useFilterContext
 } from "./chunk-I3Z2T4N2.mjs";
 
 // src/filter-menu.tsx
 import { DropdownMenu } from "@kopexa/dropdown-menu";
+import { useSafeIntl } from "@kopexa/i18n";
 import { cn } from "@kopexa/shared-utils";
 import {
   createContext,
@@ -16,6 +20,7 @@ function FilterMenu(props) {
   var _a;
   const { children, className } = props;
   const { fields, styles, addFilter, allowMultiple, value } = useFilterContext();
+  const t = useSafeIntl();
   const fieldGroups = /* @__PURE__ */ new Map();
   for (const [id, field] of fields) {
     const group = field.group;
@@ -32,7 +37,7 @@ function FilterMenu(props) {
         "data-slot": "filter-menu",
         className: cn("min-w-[220px]", className),
         align: "start",
-        children: fields.size === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground text-center", children: "Loading..." }) : Array.from(fieldGroups.entries()).map(([groupLabel, groupFields]) => /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+        children: fields.size === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground text-center", children: t.formatMessage(messages.loading) }) : Array.from(fieldGroups.entries()).map(([groupLabel, groupFields]) => /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
           groupLabel && /* @__PURE__ */ jsx(DropdownMenu.Label, { children: groupLabel }),
           Array.from(groupFields.values()).map((field) => {
             const hasFilter = value.some((f) => f.fieldId === field.id);

package/dist/{chunk-EF4VI36D.mjs → chunk-UBTUCPOG.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   messages
-} from "./chunk-URDCG5NI.mjs";
+} from "./chunk-YTYOFT33.mjs";
 import {
   useFilterContext
 } from "./chunk-I3Z2T4N2.mjs";

package/dist/{chunk-3ZBNWXRA.mjs → chunk-WD7YU6IN.mjs}

@@ -1,13 +1,13 @@
 "use client";
+import {
+  DEFAULT_OPERATORS
+} from "./chunk-PHESMHTT.mjs";
 import {
   messages
-} from "./chunk-URDCG5NI.mjs";
+} from "./chunk-YTYOFT33.mjs";
 import {
   useFilterContext
 } from "./chunk-I3Z2T4N2.mjs";
-import {
-  DEFAULT_OPERATORS
-} from "./chunk-PHESMHTT.mjs";
 
 // src/filter-value-editor.tsx
 import { Checkbox } from "@kopexa/checkbox";
@@ -151,27 +151,29 @@ function ValueInput({
             placeholder: (_c = field.placeholder) != null ? _c : t.formatMessage(messages.select_value)
           }
         ) }),
-        /* @__PURE__ */ jsx(Select.Content, { children: (_d = field.options) == null ? void 0 : _d.map((option) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(Select.Content, { children: (_d = field.options) == null ? void 0 : _d.map((option) => /* @__PURE__ */ jsx(
           Select.Item,
           {
             value: option.value,
             disabled: option.disabled,
-            children: [
-              option.icon && /* @__PURE__ */ jsx("span", { className: "mr-2 size-4", children: option.icon }),
+            children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              option.icon && /* @__PURE__ */ jsx("span", { className: "size-4 flex-shrink-0", children: option.icon }),
               option.label
-            ]
+            ] })
           },
           option.value
         )) })
       ] });
     case "multiselect": {
-      const selectedValues = Array.isArray(value) ? value : [];
-      return /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-[200px] overflow-auto", children: (_e = field.options) == null ? void 0 : _e.map((option) => (
+      const selectedValues = Array.isArray(value) ? value.filter(
+        (v) => typeof v === "string" && v.length > 1
+      ) : [];
+      return /* @__PURE__ */ jsx("div", { className: "space-y-1 max-h-[200px] overflow-auto p-1", children: (_e = field.options) == null ? void 0 : _e.map((option) => (
         // biome-ignore lint/a11y/noLabelWithoutControl: Checkbox is a custom form control inside the label
         /* @__PURE__ */ jsxs(
           "label",
           {
-            className: "flex items-center gap-2 cursor-pointer",
+            className: "flex items-center gap-2 cursor-pointer hover:bg-muted/50 rounded-md px-2 py-1.5",
             children: [
               /* @__PURE__ */ jsx(
                 Checkbox,
@@ -184,11 +186,12 @@ function ValueInput({
                       onChange(selectedValues.filter((v) => v !== option.value));
                     }
                   },
-                  disabled: option.disabled
+                  disabled: option.disabled,
+                  className: "flex-shrink-0 border-border bg-background data-[state=checked]:bg-primary data-[state=checked]:border-primary [&_svg]:text-primary-foreground"
                 }
               ),
-              option.icon && /* @__PURE__ */ jsx("span", { className: "size-4", children: option.icon }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm", children: option.label })
+              option.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 [&>*]:size-5", children: option.icon }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm truncate", children: option.label })
             ]
           },
           option.value