@kopexa/filter 0.0.24 → 0.0.26

package/dist/chunk-6TRAIAKS.mjs

@@ -0,0 +1,178 @@
+"use client";
+import {
+  AddFilterDropdown,
+  FilterPill
+} from "./chunk-XCWKWXBW.mjs";
+import {
+  filterBarMessages
+} from "./chunk-I7WCYMXD.mjs";
+
+// src/filter-bar.tsx
+import { useSafeIntl } from "@kopexa/i18n";
+import { cn } from "@kopexa/shared-utils";
+import { useControllableState } from "@kopexa/use-controllable-state";
+import { useCallback, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FilterBar(props) {
+  const {
+    fields,
+    value: valueProp,
+    defaultValue = [],
+    onChange,
+    i18n: i18nProp,
+    className,
+    allowMultiple = true,
+    disabled = false
+  } = props;
+  const t = useSafeIntl();
+  const instanceId = useId();
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange
+  });
+  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 && value.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
+      };
+      setValue([...value, newFilter]);
+      setSessionFilterId(newFilter.id);
+    },
+    [fields, value, setValue, allowMultiple, instanceId]
+  );
+  const updateFilter = useCallback(
+    (filterId, updates) => {
+      setValue(
+        value.map((f) => f.id === filterId ? { ...f, ...updates } : f)
+      );
+    },
+    [value, setValue]
+  );
+  const removeFilter = useCallback(
+    (filterId) => {
+      setValue(value.filter((f) => f.id !== filterId));
+      if (sessionFilterId === filterId) {
+        setSessionFilterId(null);
+      }
+    },
+    [value, setValue, sessionFilterId]
+  );
+  const clearFilters = useCallback(() => {
+    setValue([]);
+    setSessionFilterId(null);
+  }, [setValue]);
+  const isFieldAvailable = useCallback(
+    (fieldId) => {
+      if (allowMultiple) return true;
+      return !value.some((f) => f.fieldId === fieldId);
+    },
+    [value, allowMultiple]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "filter-bar",
+      className: cn("flex flex-wrap items-center gap-2", className),
+      children: [
+        value.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
+          }
+        ),
+        value.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
+          }
+        )
+      ]
+    }
+  );
+}
+FilterBar.displayName = "FilterBar";
+
+export {
+  FilterBar
+};

package/dist/chunk-I7WCYMXD.mjs

@@ -0,0 +1,133 @@
+"use client";
+
+// src/filter-bar-messages.ts
+import { defineMessages } from "@kopexa/i18n";
+var filterBarMessages = defineMessages({
+  add_filter: {
+    id: "filter-bar.add_filter",
+    defaultMessage: "Add Filter",
+    description: "Button text for adding a new filter"
+  },
+  clear_all: {
+    id: "filter-bar.clear_all",
+    defaultMessage: "Clear all",
+    description: "Button text for clearing all filters"
+  },
+  no_results: {
+    id: "filter-bar.no_results",
+    defaultMessage: "No results found",
+    description: "Message when search returns no results"
+  },
+  search_placeholder: {
+    id: "filter-bar.search_placeholder",
+    defaultMessage: "Search...",
+    description: "Placeholder for search input"
+  },
+  select_value: {
+    id: "filter-bar.select_value",
+    defaultMessage: "Select value...",
+    description: "Placeholder for value selection"
+  },
+  enter_value: {
+    id: "filter-bar.enter_value",
+    defaultMessage: "Enter value...",
+    description: "Placeholder for value input"
+  },
+  apply: {
+    id: "filter-bar.apply",
+    defaultMessage: "Apply",
+    description: "Button text for applying a filter value"
+  },
+  cancel: {
+    id: "filter-bar.cancel",
+    defaultMessage: "Cancel",
+    description: "Button text for canceling"
+  },
+  // Operators
+  op_equals: {
+    id: "filter-bar.operator.equals",
+    defaultMessage: "is",
+    description: "Operator: equals"
+  },
+  op_not_equals: {
+    id: "filter-bar.operator.not_equals",
+    defaultMessage: "is not",
+    description: "Operator: not equals"
+  },
+  op_contains: {
+    id: "filter-bar.operator.contains",
+    defaultMessage: "contains",
+    description: "Operator: contains"
+  },
+  op_not_contains: {
+    id: "filter-bar.operator.not_contains",
+    defaultMessage: "does not contain",
+    description: "Operator: does not contain"
+  },
+  op_starts_with: {
+    id: "filter-bar.operator.starts_with",
+    defaultMessage: "starts with",
+    description: "Operator: starts with"
+  },
+  op_ends_with: {
+    id: "filter-bar.operator.ends_with",
+    defaultMessage: "ends with",
+    description: "Operator: ends with"
+  },
+  op_gt: {
+    id: "filter-bar.operator.gt",
+    defaultMessage: "greater than",
+    description: "Operator: greater than"
+  },
+  op_lt: {
+    id: "filter-bar.operator.lt",
+    defaultMessage: "less than",
+    description: "Operator: less than"
+  },
+  op_gte: {
+    id: "filter-bar.operator.gte",
+    defaultMessage: "greater or equal",
+    description: "Operator: greater than or equal"
+  },
+  op_lte: {
+    id: "filter-bar.operator.lte",
+    defaultMessage: "less or equal",
+    description: "Operator: less than or equal"
+  },
+  op_is_empty: {
+    id: "filter-bar.operator.is_empty",
+    defaultMessage: "is empty",
+    description: "Operator: is empty"
+  },
+  op_is_not_empty: {
+    id: "filter-bar.operator.is_not_empty",
+    defaultMessage: "is not empty",
+    description: "Operator: is not empty"
+  },
+  // Accessibility
+  remove_filter: {
+    id: "filter-bar.remove_filter",
+    defaultMessage: "Remove {field} filter",
+    description: "Accessibility label for remove filter button"
+  },
+  operator_label: {
+    id: "filter-bar.operator_label",
+    defaultMessage: "{field} operator",
+    description: "Accessibility label for operator dropdown"
+  },
+  value_label: {
+    id: "filter-bar.value_label",
+    defaultMessage: "{field} value",
+    description: "Accessibility label for value editor"
+  },
+  // Multiselect
+  selected_count: {
+    id: "filter-bar.selected_count",
+    defaultMessage: "{count} selected",
+    description: "Display text for multiselect with multiple selections"
+  }
+});
+
+export {
+  filterBarMessages
+};

package/dist/{chunk-45QJL74L.mjs → chunk-JSRGUDCG.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   FilterValueEditor
-} from "./chunk-3ZBNWXRA.mjs";
+} from "./chunk-WD7YU6IN.mjs";
+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-active.tsx
 import { useSafeIntl } from "@kopexa/i18n";
@@ -18,7 +18,7 @@ import { ChevronDownIcon, CloseIcon } from "@kopexa/icons";
 import { Popover } from "@kopexa/popover";
 import { cn } from "@kopexa/shared-utils";
 import { Switch } from "@kopexa/switch";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function FilterActive(props) {
   const { showClearAll = true, className, ...rest } = props;
   const { value, styles, clearFilters } = useFilterContext();
@@ -55,6 +55,7 @@ function FilterField({ filter }) {
   const field = fields.get(filter.fieldId);
   if (!field) return null;
   const availableOperators = (_a = field.operators) != null ? _a : DEFAULT_OPERATORS[field.type];
+  const hasSingleOperator = availableOperators.length === 1;
   const getOperatorLabel = (op) => {
     const opKey = `op_${op}`;
     return messages[opKey] ? t.formatMessage(messages[opKey]) : op;
@@ -79,20 +80,29 @@ function FilterField({ filter }) {
       field.icon && /* @__PURE__ */ jsx("span", { className: "size-4 flex-shrink-0", children: field.icon }),
       /* @__PURE__ */ jsx("span", { children: field.label })
     ] }),
-    /* @__PURE__ */ jsxs("span", { className: styles.fieldOperator(), children: [
+    /* @__PURE__ */ jsx("span", { className: styles.fieldOperator(), children: hasSingleOperator ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: styles.fieldOperatorSelect(),
+        style: { width: operatorWidth },
+        children: currentOperatorLabel
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "select",
         {
           className: styles.fieldOperatorSelect(),
           value: filter.operator,
           onChange: handleOperatorChange,
-          title: currentOperatorLabel,
+          "aria-label": t.formatMessage(messages.operator_label, {
+            field: field.label
+          }),
           style: { width: operatorWidth },
           children: availableOperators.map((op) => /* @__PURE__ */ jsx("option", { value: op, children: getOperatorLabel(op) }, op))
         }
       ),
       /* @__PURE__ */ jsx(ChevronDownIcon, { className: styles.fieldOperatorIcon() })
-    ] }),
+    ] }) }),
     useInlineInput && /* @__PURE__ */ jsx(InlineValueInput, { filter, field }),
     useInlineSwitch && /* @__PURE__ */ jsx("span", { className: styles.fieldValue(), children: /* @__PURE__ */ jsx(
       Switch,
@@ -112,7 +122,9 @@ function FilterField({ filter }) {
         type: "button",
         className: styles.fieldRemove(),
         onClick: () => removeFilter(filter.id),
-        "aria-label": "Remove filter",
+        "aria-label": t.formatMessage(messages.remove_filter, {
+          field: field.label
+        }),
         children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-3" })
       }
     )
@@ -141,6 +153,8 @@ function InlineValueInput({
   const placeholder = (_a = field.placeholder) != null ? _a : t.formatMessage(messages.enter_value);
   if (filter.operator === "between") {
     const [min, max] = Array.isArray(filter.value) ? filter.value : [void 0, void 0];
+    const minPlaceholder = t.formatMessage(messages.range_min);
+    const maxPlaceholder = t.formatMessage(messages.range_max);
     return /* @__PURE__ */ jsxs("span", { className: cn(styles.fieldValue(), "gap-1"), children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -152,8 +166,11 @@ function InlineValueInput({
             const val = e.target.value ? Number(e.target.value) : void 0;
             updateFilter(filter.id, { value: [val, max] });
           },
-          placeholder: "Min",
-          style: { width: getInputWidth(min, "Min", 3) },
+          placeholder: minPlaceholder,
+          "aria-label": t.formatMessage(messages.value_min_label, {
+            field: field.label
+          }),
+          style: { width: getInputWidth(min, minPlaceholder, 3) },
           min: field.min,
           max: field.max,
           step: field.step
@@ -170,8 +187,11 @@ function InlineValueInput({
             const val = e.target.value ? Number(e.target.value) : void 0;
             updateFilter(filter.id, { value: [min, val] });
           },
-          placeholder: "Max",
-          style: { width: getInputWidth(max, "Max", 3) },
+          placeholder: maxPlaceholder,
+          "aria-label": t.formatMessage(messages.value_max_label, {
+            field: field.label
+          }),
+          style: { width: getInputWidth(max, maxPlaceholder, 3) },
           min: field.min,
           max: field.max,
           step: field.step
@@ -187,6 +207,9 @@ function InlineValueInput({
       value: filter.value !== void 0 && filter.value !== null ? String(filter.value) : "",
       onChange: handleChange,
       placeholder,
+      "aria-label": t.formatMessage(messages.value_label, {
+        field: field.label
+      }),
       style: { width: getInputWidth(filter.value, placeholder, 6) },
       min: field.min,
       max: field.max,
@@ -199,7 +222,8 @@ function PopoverValueEditor({
   field
 }) {
   const { styles, updateFilter } = useFilterContext();
-  const valueDisplay = field.renderValue ? field.renderValue({ filter, field }) : getValueDisplay(filter, field);
+  const t = useSafeIntl();
+  const valueDisplay = field.renderValue ? field.renderValue({ filter, field }) : getValueDisplay(filter, field, t);
   const hasValue = filter.value !== void 0 && filter.value !== null && filter.value !== "" && !(Array.isArray(filter.value) && filter.value.length === 0);
   const handleCustomChange = (value) => {
     updateFilter(filter.id, { value });
@@ -212,7 +236,7 @@ function PopoverValueEditor({
         render: /* @__PURE__ */ jsx("div", {}),
         nativeButton: false,
         children: [
-          /* @__PURE__ */ jsx("span", { className: styles.fieldValueText(), children: hasValue ? valueDisplay : "Select..." }),
+          /* @__PURE__ */ jsx("span", { className: styles.fieldValueText(), children: hasValue ? valueDisplay : t.formatMessage(messages.select_value) }),
           /* @__PURE__ */ jsx(ChevronDownIcon, { className: styles.fieldValueIcon() })
         ]
       }
@@ -239,7 +263,7 @@ function PopoverValueEditor({
     )
   ] });
 }
-function getValueDisplay(filter, field) {
+function getValueDisplay(filter, field, t) {
   var _a, _b, _c, _d;
   const { value, operator } = filter;
   if (operator === "is_empty" || operator === "is_not_empty") {
@@ -249,19 +273,20 @@ function getValueDisplay(filter, field) {
     return null;
   }
   if (field.type === "boolean") {
-    return value ? "Yes" : "No";
+    return value ? t.formatMessage(messages.boolean_true) : t.formatMessage(messages.boolean_false);
   }
   if (field.type === "select" && field.options) {
     const option = field.options.find((o) => o.value === value);
     return (_a = option == null ? void 0 : option.label) != null ? _a : String(value);
   }
-  if (field.type === "multiselect" && Array.isArray(value)) {
-    if (value.length === 0) return null;
-    if (value.length === 1 && field.options) {
-      const option = field.options.find((o) => o.value === value[0]);
-      return (_b = option == null ? void 0 : option.label) != null ? _b : String(value[0]);
+  if (field.type === "multiselect") {
+    const values = Array.isArray(value) ? value.filter((v) => typeof v === "string" && v.length > 1) : [];
+    if (values.length === 0) return null;
+    if (values.length === 1 && field.options) {
+      const option = field.options.find((o) => o.value === values[0]);
+      return (_b = option == null ? void 0 : option.label) != null ? _b : String(values[0]);
     }
-    return `${value.length} selected`;
+    return `${values.length} selected`;
   }
   if (field.type === "date" && value instanceof Date) {
     return value.toLocaleDateString();