@kopexa/filter 0.0.25 → 0.0.26

package/dist/filter-bar.mjs

@@ -0,0 +1,11 @@
+"use client";
+"use client";
+import {
+  FilterBar
+} from "./chunk-6TRAIAKS.mjs";
+import "./chunk-XCWKWXBW.mjs";
+import "./chunk-I7WCYMXD.mjs";
+import "./chunk-ON2UFJ3Y.mjs";
+export {
+  FilterBar
+};

package/dist/filter-menu.js

@@ -29,6 +29,7 @@ __export(filter_menu_exports, {
 });
 module.exports = __toCommonJS(filter_menu_exports);
 var import_dropdown_menu = require("@kopexa/dropdown-menu");
+var import_i18n2 = require("@kopexa/i18n");
 var import_shared_utils = require("@kopexa/shared-utils");
 var import_react = require("react");
 
@@ -40,12 +41,171 @@ var [FilterProvider, useFilterContext] = (0, import_react_utils.createContext)({
   errorMessage: "useFilterContext must be used within a Filter component. Make sure to wrap your FilterMenu, FilterTrigger, etc. inside a <Filter> component."
 });
 
+// src/messages.ts
+var import_i18n = require("@kopexa/i18n");
+var messages = (0, import_i18n.defineMessages)({
+  add_filter: {
+    id: "filter.add_filter",
+    defaultMessage: "Add Filter",
+    description: "Button text for adding a new filter"
+  },
+  clear_all: {
+    id: "filter.clear_all",
+    defaultMessage: "Clear all",
+    description: "Button text for clearing all filters"
+  },
+  no_fields: {
+    id: "filter.no_fields",
+    defaultMessage: "No filter options available",
+    description: "Message when no filter fields are configured"
+  },
+  apply: {
+    id: "filter.apply",
+    defaultMessage: "Apply",
+    description: "Button text for applying a filter value"
+  },
+  cancel: {
+    id: "filter.cancel",
+    defaultMessage: "Cancel",
+    description: "Button text for canceling filter editing"
+  },
+  select_value: {
+    id: "filter.select_value",
+    defaultMessage: "Select value...",
+    description: "Placeholder for value selection"
+  },
+  enter_value: {
+    id: "filter.enter_value",
+    defaultMessage: "Enter value...",
+    description: "Placeholder for value input"
+  },
+  // Operators
+  op_equals: {
+    id: "filter.operator.equals",
+    defaultMessage: "is",
+    description: "Operator: equals"
+  },
+  op_not_equals: {
+    id: "filter.operator.not_equals",
+    defaultMessage: "is not",
+    description: "Operator: not equals"
+  },
+  op_contains: {
+    id: "filter.operator.contains",
+    defaultMessage: "contains",
+    description: "Operator: contains"
+  },
+  op_not_contains: {
+    id: "filter.operator.not_contains",
+    defaultMessage: "does not contain",
+    description: "Operator: does not contain"
+  },
+  op_starts_with: {
+    id: "filter.operator.starts_with",
+    defaultMessage: "starts with",
+    description: "Operator: starts with"
+  },
+  op_ends_with: {
+    id: "filter.operator.ends_with",
+    defaultMessage: "ends with",
+    description: "Operator: ends with"
+  },
+  op_gt: {
+    id: "filter.operator.gt",
+    defaultMessage: "greater than",
+    description: "Operator: greater than"
+  },
+  op_lt: {
+    id: "filter.operator.lt",
+    defaultMessage: "less than",
+    description: "Operator: less than"
+  },
+  op_gte: {
+    id: "filter.operator.gte",
+    defaultMessage: "greater or equal",
+    description: "Operator: greater than or equal"
+  },
+  op_lte: {
+    id: "filter.operator.lte",
+    defaultMessage: "less or equal",
+    description: "Operator: less than or equal"
+  },
+  op_between: {
+    id: "filter.operator.between",
+    defaultMessage: "between",
+    description: "Operator: between"
+  },
+  op_is_empty: {
+    id: "filter.operator.is_empty",
+    defaultMessage: "is empty",
+    description: "Operator: is empty"
+  },
+  op_is_not_empty: {
+    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"
+  }
+});
+
 // src/filter-menu.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function FilterMenu(props) {
   var _a;
   const { children, className } = props;
   const { fields, styles, addFilter, allowMultiple, value } = useFilterContext();
+  const t = (0, import_i18n2.useSafeIntl)();
   const fieldGroups = /* @__PURE__ */ new Map();
   for (const [id, field] of fields) {
     const group = field.group;
@@ -62,7 +222,7 @@ function FilterMenu(props) {
         "data-slot": "filter-menu",
         className: (0, import_shared_utils.cn)("min-w-[220px]", className),
         align: "start",
-        children: fields.size === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-2 py-3 text-sm text-muted-foreground text-center", children: "Loading..." }) : Array.from(fieldGroups.entries()).map(([groupLabel, groupFields]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Group, { children: [
+        children: fields.size === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Group, { children: [
           groupLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Label, { children: groupLabel }),
           Array.from(groupFields.values()).map((field) => {
             const hasFilter = value.some((f) => f.fieldId === field.id);

package/dist/filter-menu.mjs

@@ -5,7 +5,8 @@ import {
   FilterItem,
   FilterMenu,
   FilterMenuSeparator
-} from "./chunk-RFCPJLIQ.mjs";
+} from "./chunk-SJXRD3RO.mjs";
+import "./chunk-YTYOFT33.mjs";
 import "./chunk-I3Z2T4N2.mjs";
 export {
   FilterGroup,

package/dist/filter-trigger.js

@@ -141,6 +141,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"
   }
 });
 

package/dist/filter-trigger.mjs

@@ -2,8 +2,8 @@
 "use client";
 import {
   FilterTrigger
-} from "./chunk-EF4VI36D.mjs";
-import "./chunk-URDCG5NI.mjs";
+} from "./chunk-UBTUCPOG.mjs";
+import "./chunk-YTYOFT33.mjs";
 import "./chunk-I3Z2T4N2.mjs";
 export {
   FilterTrigger

package/dist/filter-value-editor.js

@@ -161,6 +161,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"
   }
 });
 
@@ -302,27 +354,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,
@@ -335,11 +389,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

package/dist/filter-value-editor.mjs

@@ -2,10 +2,10 @@
 "use client";
 import {
   FilterValueEditor
-} from "./chunk-3ZBNWXRA.mjs";
-import "./chunk-URDCG5NI.mjs";
-import "./chunk-I3Z2T4N2.mjs";
+} from "./chunk-WD7YU6IN.mjs";
 import "./chunk-PHESMHTT.mjs";
+import "./chunk-YTYOFT33.mjs";
+import "./chunk-I3Z2T4N2.mjs";
 export {
   FilterValueEditor
 };

package/dist/filter.d.mts

@@ -4,6 +4,9 @@ import * as React from 'react';
 import { FilterI18nConfig } from './filter-i18n.mjs';
 import { FilterValue } from './filter-types.mjs';
 
+/**
+ * @deprecated Use FilterBar instead. This component will be removed in a future version.
+ */
 interface FilterProps extends Omit<React.ComponentProps<"div">, "onChange" | "defaultValue">, FilterVariantProps {
     /** Controlled filter values */
     value?: FilterValue[];
@@ -16,6 +19,9 @@ interface FilterProps extends Omit<React.ComponentProps<"div">, "onChange" | "de
     /** Children */
     children?: React.ReactNode;
 }
+/**
+ * @deprecated Use FilterBar instead. This component will be removed in a future version.
+ */
 declare function Filter(props: FilterProps): react_jsx_runtime.JSX.Element;
 declare namespace Filter {
     var displayName: string;

package/dist/filter.d.ts

@@ -4,6 +4,9 @@ import * as React from 'react';
 import { FilterI18nConfig } from './filter-i18n.js';
 import { FilterValue } from './filter-types.js';
 
+/**
+ * @deprecated Use FilterBar instead. This component will be removed in a future version.
+ */
 interface FilterProps extends Omit<React.ComponentProps<"div">, "onChange" | "defaultValue">, FilterVariantProps {
     /** Controlled filter values */
     value?: FilterValue[];
@@ -16,6 +19,9 @@ interface FilterProps extends Omit<React.ComponentProps<"div">, "onChange" | "de
     /** Children */
     children?: React.ReactNode;
 }
+/**
+ * @deprecated Use FilterBar instead. This component will be removed in a future version.
+ */
 declare function Filter(props: FilterProps): react_jsx_runtime.JSX.Element;
 declare namespace Filter {
     var displayName: string;

package/dist/filter.mjs

@@ -2,10 +2,10 @@
 "use client";
 import {
   Filter
-} from "./chunk-SH7DBK54.mjs";
+} from "./chunk-LWDVRMCI.mjs";
+import "./chunk-PHESMHTT.mjs";
 import "./chunk-3WNAREG6.mjs";
 import "./chunk-I3Z2T4N2.mjs";
-import "./chunk-PHESMHTT.mjs";
 export {
   Filter
 };

package/dist/index.d.mts

@@ -5,7 +5,11 @@ export { FilterGroup, FilterGroupProps, FilterItem, FilterItemProps, FilterMenu,
 export { FilterTrigger, FilterTriggerProps } from './filter-trigger.mjs';
 export { FilterEditorRenderProps, FilterFieldConfig, FilterFieldType, FilterOperator, FilterOption, FilterValue, FilterValueRenderProps } from './filter-types.mjs';
 export { FilterValueEditor } from './filter-value-editor.mjs';
+export { FilterBar, FilterBarProps } from './filter-bar.mjs';
+export { SearchFilterBar, SearchFilterBarProps } from './search-filter-bar.mjs';
+export { filterBarMessages } from './filter-bar-messages.mjs';
 export { messages as filterMessages } from './messages.mjs';
+export { FilterBarCustomRendererProps, FilterBarFieldConfig, FilterBarFieldType, FilterBarI18nConfig, FilterBarInputValue, FilterBarOperator, FilterBarOption, FilterBarValidation, FilterBarValue } from './filter-bar-types.mjs';
 import 'react/jsx-runtime';
 import '@kopexa/theme';
 import 'react';

package/dist/index.d.ts

@@ -5,7 +5,11 @@ export { FilterGroup, FilterGroupProps, FilterItem, FilterItemProps, FilterMenu,
 export { FilterTrigger, FilterTriggerProps } from './filter-trigger.js';
 export { FilterEditorRenderProps, FilterFieldConfig, FilterFieldType, FilterOperator, FilterOption, FilterValue, FilterValueRenderProps } from './filter-types.js';
 export { FilterValueEditor } from './filter-value-editor.js';
+export { FilterBar, FilterBarProps } from './filter-bar.js';
+export { SearchFilterBar, SearchFilterBarProps } from './search-filter-bar.js';
+export { filterBarMessages } from './filter-bar-messages.js';
 export { messages as filterMessages } from './messages.js';
+export { FilterBarCustomRendererProps, FilterBarFieldConfig, FilterBarFieldType, FilterBarI18nConfig, FilterBarInputValue, FilterBarOperator, FilterBarOption, FilterBarValidation, FilterBarValue } from './filter-bar-types.js';
 import 'react/jsx-runtime';
 import '@kopexa/theme';
 import 'react';