@kopexa/filter 0.0.2

package/dist/chunk-EF4VI36D.mjs

@@ -0,0 +1,36 @@
+"use client";
+import {
+  messages
+} from "./chunk-URDCG5NI.mjs";
+import {
+  useFilterContext
+} from "./chunk-I3Z2T4N2.mjs";
+
+// src/filter-trigger.tsx
+import { DropdownMenu } from "@kopexa/dropdown-menu";
+import { useSafeIntl } from "@kopexa/i18n";
+import { PlusIcon } from "@kopexa/icons";
+import { cn } from "@kopexa/shared-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FilterTrigger(props) {
+  const { className, children, icon, ...rest } = props;
+  const { styles } = useFilterContext();
+  const t = useSafeIntl();
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.Trigger,
+    {
+      "data-slot": "filter-trigger",
+      className: cn(styles.trigger(), className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles.triggerIcon(), children: icon != null ? icon : /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" }) }),
+        children != null ? children : t.formatMessage(messages.add_filter)
+      ]
+    }
+  );
+}
+FilterTrigger.displayName = "FilterTrigger";
+
+export {
+  FilterTrigger
+};

package/dist/chunk-I3Z2T4N2.mjs

@@ -0,0 +1,14 @@
+"use client";
+
+// src/filter-context.tsx
+import { createContext } from "@kopexa/react-utils";
+var [FilterProvider, useFilterContext] = createContext({
+  name: "FilterContext",
+  strict: true,
+  errorMessage: "useFilterContext must be used within a Filter component. Make sure to wrap your FilterMenu, FilterTrigger, etc. inside a <Filter> component."
+});
+
+export {
+  FilterProvider,
+  useFilterContext
+};

package/dist/chunk-PTJ7HZPA.mjs

@@ -0,0 +1,164 @@
+"use client";
+import {
+  DEFAULT_I18N
+} from "./chunk-3WNAREG6.mjs";
+import {
+  FilterProvider
+} from "./chunk-I3Z2T4N2.mjs";
+import {
+  getDefaultOperator
+} from "./chunk-7QP7FRID.mjs";
+
+// src/filter.tsx
+import { DropdownMenu } from "@kopexa/dropdown-menu";
+import { cn } from "@kopexa/shared-utils";
+import { filter as filterTheme } from "@kopexa/theme";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function Filter(props) {
+  const {
+    value = [],
+    onChange,
+    allowMultiple = true,
+    size = "md",
+    variant = "outline",
+    i18n,
+    className,
+    children,
+    ...rest
+  } = props;
+  const mergedI18n = React.useMemo(
+    () => ({
+      ...DEFAULT_I18N,
+      ...i18n,
+      operators: {
+        ...DEFAULT_I18N.operators,
+        ...i18n == null ? void 0 : i18n.operators
+      }
+    }),
+    [i18n]
+  );
+  const styles = React.useMemo(
+    () => filterTheme({ size, variant }),
+    [size, variant]
+  );
+  const [fields, setFields] = React.useState(
+    /* @__PURE__ */ new Map()
+  );
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [editingFilterId, setEditingFilterId] = React.useState(
+    null
+  );
+  const registerField = React.useCallback((field) => {
+    setFields((prev) => {
+      const next = new Map(prev);
+      next.set(field.id, field);
+      return next;
+    });
+  }, []);
+  const unregisterField = React.useCallback((fieldId) => {
+    setFields((prev) => {
+      const next = new Map(prev);
+      next.delete(fieldId);
+      return next;
+    });
+  }, []);
+  const updateFilter = React.useCallback(
+    (filterId, updates) => {
+      const newFilters = value.map((filter) => {
+        if (filter.id === filterId) {
+          const updated = { ...filter, ...updates };
+          if (updates.operator === "is_empty" || updates.operator === "is_not_empty") {
+            updated.value = void 0;
+          }
+          return updated;
+        }
+        return filter;
+      });
+      onChange == null ? void 0 : onChange(newFilters);
+    },
+    [value, onChange]
+  );
+  const removeFilter = React.useCallback(
+    (filterId) => {
+      onChange == null ? void 0 : onChange(value.filter((f) => f.id !== filterId));
+    },
+    [value, onChange]
+  );
+  const clearFilters = React.useCallback(() => {
+    onChange == null ? void 0 : onChange([]);
+  }, [onChange]);
+  const addFilter = React.useCallback(
+    (fieldKey) => {
+      const field = fields.get(fieldKey);
+      if (!field) return;
+      const defaultOperator = getDefaultOperator(field.type);
+      const newFilter = {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`,
+        fieldId: fieldKey,
+        operator: defaultOperator,
+        value: void 0
+      };
+      onChange == null ? void 0 : onChange([...value, newFilter]);
+    },
+    [fields, value, onChange]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      // State
+      value,
+      fields,
+      allowMultiple,
+      // Style
+      styles,
+      size: size != null ? size : "md",
+      variant: variant != null ? variant : "outline",
+      i18n: mergedI18n,
+      // Actions
+      addFilter,
+      updateFilter,
+      removeFilter,
+      clearFilters,
+      // Field registration
+      registerField,
+      unregisterField,
+      // Menu state
+      menuOpen,
+      setMenuOpen,
+      // Editor state
+      editingFilterId,
+      setEditingFilterId
+    }),
+    [
+      value,
+      fields,
+      allowMultiple,
+      styles,
+      size,
+      variant,
+      mergedI18n,
+      addFilter,
+      updateFilter,
+      removeFilter,
+      clearFilters,
+      registerField,
+      unregisterField,
+      menuOpen,
+      editingFilterId
+    ]
+  );
+  return /* @__PURE__ */ jsx(FilterProvider, { value: contextValue, children: /* @__PURE__ */ jsx(DropdownMenu.Root, { open: menuOpen, onOpenChange: setMenuOpen, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "filter",
+      className: cn(styles.root(), className),
+      ...rest,
+      children
+    }
+  ) }) });
+}
+Filter.displayName = "Filter";
+
+export {
+  Filter
+};

package/dist/chunk-TBHYZZSX.mjs

@@ -0,0 +1,139 @@
+"use client";
+import {
+  useFilterContext
+} from "./chunk-I3Z2T4N2.mjs";
+
+// src/filter-menu.tsx
+import { DropdownMenu } from "@kopexa/dropdown-menu";
+import { cn } from "@kopexa/shared-utils";
+import {
+  createContext,
+  useContext,
+  useLayoutEffect
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function FilterMenu(props) {
+  var _a;
+  const { children, className } = props;
+  const { fields, styles, addFilter, allowMultiple, value } = useFilterContext();
+  const fieldGroups = /* @__PURE__ */ new Map();
+  for (const [id, field] of fields) {
+    const group = field.group;
+    if (!fieldGroups.has(group)) {
+      fieldGroups.set(group, /* @__PURE__ */ new Map());
+    }
+    (_a = fieldGroups.get(group)) == null ? void 0 : _a.set(id, field);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: { display: "none" }, "aria-hidden": "true", children }),
+    /* @__PURE__ */ jsx(
+      DropdownMenu.Content,
+      {
+        "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: [
+          groupLabel && /* @__PURE__ */ jsx(DropdownMenu.Label, { children: groupLabel }),
+          Array.from(groupFields.values()).map((field) => {
+            const hasFilter = value.some((f) => f.fieldId === field.id);
+            const isDisabled = field.disabled || !allowMultiple && hasFilter;
+            return /* @__PURE__ */ jsxs(
+              DropdownMenu.Item,
+              {
+                "data-slot": "filter-item",
+                disabled: isDisabled,
+                onSelect: () => addFilter(field.id),
+                children: [
+                  field.icon && /* @__PURE__ */ jsx("span", { className: styles.menuItemIcon(), children: field.icon }),
+                  /* @__PURE__ */ jsx("span", { children: field.label })
+                ]
+              },
+              field.id
+            );
+          })
+        ] }, groupLabel != null ? groupLabel : "ungrouped"))
+      }
+    )
+  ] });
+}
+FilterMenu.displayName = "FilterMenu";
+function FilterGroup(props) {
+  const { label, children } = props;
+  return /* @__PURE__ */ jsx(FilterGroupProvider, { label, children });
+}
+FilterGroup.displayName = "FilterGroup";
+var FilterGroupContext = createContext(void 0);
+function FilterGroupProvider({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsx(FilterGroupContext.Provider, { value: label, children });
+}
+function useFilterGroup() {
+  return useContext(FilterGroupContext);
+}
+function FilterItem(props) {
+  const {
+    id,
+    label,
+    icon,
+    type,
+    options,
+    operators,
+    placeholder,
+    min,
+    max,
+    step,
+    searchable,
+    disabled
+  } = props;
+  const { registerField, unregisterField } = useFilterContext();
+  const group = useFilterGroup();
+  useLayoutEffect(() => {
+    registerField({
+      id,
+      label,
+      icon,
+      type,
+      options,
+      operators,
+      placeholder,
+      min,
+      max,
+      step,
+      searchable,
+      group,
+      disabled
+    });
+    return () => unregisterField(id);
+  }, [
+    id,
+    label,
+    icon,
+    type,
+    options,
+    operators,
+    placeholder,
+    min,
+    max,
+    step,
+    searchable,
+    group,
+    disabled,
+    registerField,
+    unregisterField
+  ]);
+  return null;
+}
+FilterItem.displayName = "FilterItem";
+function FilterMenuSeparator() {
+  return /* @__PURE__ */ jsx(DropdownMenu.Separator, { "data-slot": "filter-menu-separator" });
+}
+FilterMenuSeparator.displayName = "FilterMenuSeparator";
+
+export {
+  FilterMenu,
+  FilterGroup,
+  FilterItem,
+  FilterMenuSeparator
+};

package/dist/chunk-URDCG5NI.mjs

@@ -0,0 +1,111 @@
+"use client";
+
+// src/messages.ts
+import { defineMessages } from "@kopexa/i18n";
+var messages = 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"
+  }
+});
+
+export {
+  messages
+};

package/dist/filter-active.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+interface FilterActiveProps extends ComponentProps<"div"> {
+    /** Show clear all button */
+    showClearAll?: boolean;
+}
+declare function FilterActive(props: FilterActiveProps): react_jsx_runtime.JSX.Element | null;
+declare namespace FilterActive {
+    var displayName: string;
+}
+
+export { FilterActive, type FilterActiveProps };

package/dist/filter-active.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+interface FilterActiveProps extends ComponentProps<"div"> {
+    /** Show clear all button */
+    showClearAll?: boolean;
+}
+declare function FilterActive(props: FilterActiveProps): react_jsx_runtime.JSX.Element | null;
+declare namespace FilterActive {
+    var displayName: string;
+}
+
+export { FilterActive, type FilterActiveProps };