@kopexa/filter 0.0.25 → 0.0.26

package/dist/filter-active.js

@@ -168,6 +168,58 @@ var messages = (0, import_i18n.defineMessages)({
     id: "filter.operator.is_not_empty",
     defaultMessage: "is not empty",
     description: "Operator: is not empty"
+  },
+  // Additional UI strings
+  loading: {
+    id: "filter.loading",
+    defaultMessage: "Loading...",
+    description: "Loading state text"
+  },
+  boolean_true: {
+    id: "filter.boolean_true",
+    defaultMessage: "Yes",
+    description: "Boolean true value display"
+  },
+  boolean_false: {
+    id: "filter.boolean_false",
+    defaultMessage: "No",
+    description: "Boolean false value display"
+  },
+  range_min: {
+    id: "filter.range_min",
+    defaultMessage: "Min",
+    description: "Minimum value placeholder for range inputs"
+  },
+  range_max: {
+    id: "filter.range_max",
+    defaultMessage: "Max",
+    description: "Maximum value placeholder for range inputs"
+  },
+  // Accessibility labels
+  remove_filter: {
+    id: "filter.remove_filter",
+    defaultMessage: "Remove {field} filter",
+    description: "Accessibility label for remove filter button"
+  },
+  operator_label: {
+    id: "filter.operator_label",
+    defaultMessage: "{field} operator",
+    description: "Accessibility label for operator select"
+  },
+  value_label: {
+    id: "filter.value_label",
+    defaultMessage: "{field} value",
+    description: "Accessibility label for value input"
+  },
+  value_min_label: {
+    id: "filter.value_min_label",
+    defaultMessage: "{field} minimum value",
+    description: "Accessibility label for minimum value input"
+  },
+  value_max_label: {
+    id: "filter.value_max_label",
+    defaultMessage: "{field} maximum value",
+    description: "Accessibility label for maximum value input"
   }
 });
 
@@ -309,27 +361,29 @@ function ValueInput({
             placeholder: (_c = field.placeholder) != null ? _c : t.formatMessage(messages.select_value)
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Content, { children: (_d = field.options) == null ? void 0 : _d.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Content, { children: (_d = field.options) == null ? void 0 : _d.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_select.Select.Item,
           {
             value: option.value,
             disabled: option.disabled,
-            children: [
-              option.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mr-2 size-4", children: option.icon }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-2", children: [
+              option.icon && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
                 import_checkbox.Checkbox,
@@ -342,11 +396,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__ */ (0, import_jsx_runtime.jsx)("span", { className: "size-4", children: option.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm", children: option.label })
+              option.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex-shrink-0 [&>*]:size-5", children: option.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm truncate", children: option.label })
             ]
           },
           option.value
@@ -458,6 +513,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;
@@ -482,20 +538,29 @@ function FilterField({ filter }) {
       field.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "size-4 flex-shrink-0", children: field.icon }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: field.label })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: styles.fieldOperator(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.fieldOperator(), children: hasSingleOperator ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "span",
+      {
+        className: styles.fieldOperatorSelect(),
+        style: { width: operatorWidth },
+        children: currentOperatorLabel
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("option", { value: op, children: getOperatorLabel(op) }, op))
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.ChevronDownIcon, { className: styles.fieldOperatorIcon() })
-    ] }),
+    ] }) }),
     useInlineInput && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InlineValueInput, { filter, field }),
     useInlineSwitch && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.fieldValue(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_switch.Switch,
@@ -515,7 +580,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__ */ (0, import_jsx_runtime2.jsx)(import_icons.CloseIcon, { className: "size-3" })
       }
     )
@@ -544,6 +611,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__ */ (0, import_jsx_runtime2.jsxs)("span", { className: (0, import_shared_utils.cn)(styles.fieldValue(), "gap-1"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "input",
@@ -555,8 +624,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
@@ -573,8 +645,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
@@ -590,6 +665,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,
@@ -602,7 +680,8 @@ function PopoverValueEditor({
   field
 }) {
   const { styles, updateFilter } = useFilterContext();
-  const valueDisplay = field.renderValue ? field.renderValue({ filter, field }) : getValueDisplay(filter, field);
+  const t = (0, import_i18n3.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 });
@@ -615,7 +694,7 @@ function PopoverValueEditor({
         render: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {}),
         nativeButton: false,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.fieldValueText(), children: hasValue ? valueDisplay : "Select..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.fieldValueText(), children: hasValue ? valueDisplay : t.formatMessage(messages.select_value) }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.ChevronDownIcon, { className: styles.fieldValueIcon() })
         ]
       }
@@ -642,7 +721,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") {
@@ -652,19 +731,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();

package/dist/filter-active.mjs

@@ -2,11 +2,11 @@
 "use client";
 import {
   FilterActive
-} from "./chunk-45QJL74L.mjs";
-import "./chunk-3ZBNWXRA.mjs";
-import "./chunk-URDCG5NI.mjs";
-import "./chunk-I3Z2T4N2.mjs";
+} from "./chunk-JSRGUDCG.mjs";
+import "./chunk-WD7YU6IN.mjs";
 import "./chunk-PHESMHTT.mjs";
+import "./chunk-YTYOFT33.mjs";
+import "./chunk-I3Z2T4N2.mjs";
 export {
   FilterActive
 };

package/dist/filter-bar-internal.d.mts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FilterBarFieldConfig, FilterBarI18nConfig, FilterBarValue } from './filter-bar-types.mjs';
+import 'react';
+
+interface AddFilterDropdownProps {
+    fieldGroups: Map<string | undefined, FilterBarFieldConfig[]>;
+    isFieldAvailable: (fieldId: string) => boolean;
+    onAddFilter: (fieldId: string) => void;
+    i18n: FilterBarI18nConfig;
+    disabled?: boolean;
+}
+declare function AddFilterDropdown(props: AddFilterDropdownProps): react_jsx_runtime.JSX.Element;
+interface FilterPillProps {
+    filter: FilterBarValue;
+    field: FilterBarFieldConfig;
+    i18n: FilterBarI18nConfig;
+    onUpdate: (updates: Partial<FilterBarValue>) => void;
+    onRemove: () => void;
+    autoOpen?: boolean;
+    onAutoOpenComplete?: () => void;
+    disabled?: boolean;
+}
+declare function FilterPill(props: FilterPillProps): react_jsx_runtime.JSX.Element;
+
+export { AddFilterDropdown, type AddFilterDropdownProps, FilterPill, type FilterPillProps };

package/dist/filter-bar-internal.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FilterBarFieldConfig, FilterBarI18nConfig, FilterBarValue } from './filter-bar-types.js';
+import 'react';
+
+interface AddFilterDropdownProps {
+    fieldGroups: Map<string | undefined, FilterBarFieldConfig[]>;
+    isFieldAvailable: (fieldId: string) => boolean;
+    onAddFilter: (fieldId: string) => void;
+    i18n: FilterBarI18nConfig;
+    disabled?: boolean;
+}
+declare function AddFilterDropdown(props: AddFilterDropdownProps): react_jsx_runtime.JSX.Element;
+interface FilterPillProps {
+    filter: FilterBarValue;
+    field: FilterBarFieldConfig;
+    i18n: FilterBarI18nConfig;
+    onUpdate: (updates: Partial<FilterBarValue>) => void;
+    onRemove: () => void;
+    autoOpen?: boolean;
+    onAutoOpenComplete?: () => void;
+    disabled?: boolean;
+}
+declare function FilterPill(props: FilterPillProps): react_jsx_runtime.JSX.Element;
+
+export { AddFilterDropdown, type AddFilterDropdownProps, FilterPill, type FilterPillProps };