@kopexa/filter 0.0.24 → 0.0.26

package/dist/chunk-XCWKWXBW.mjs

@@ -0,0 +1,602 @@
+"use client";
+import {
+  DEFAULT_FILTER_BAR_OPERATORS
+} from "./chunk-ON2UFJ3Y.mjs";
+
+// src/filter-bar-internal.tsx
+import { Button } from "@kopexa/button";
+import { Checkbox } from "@kopexa/checkbox";
+import { Command } from "@kopexa/command";
+import { DropdownMenu } from "@kopexa/dropdown-menu";
+import { CheckIcon, ChevronDownIcon, CloseIcon, PlusIcon } from "@kopexa/icons";
+import { Input } from "@kopexa/input";
+import { Popover } from "@kopexa/popover";
+import { cn } from "@kopexa/shared-utils";
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AddFilterDropdown(props) {
+  const { fieldGroups, isFieldAvailable, onAddFilter, i18n, disabled } = props;
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "rounded-full border-dashed",
+        disabled,
+        startContent: /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" }),
+        children: i18n.addFilter
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", className: "min-w-[200px]", children: Array.from(fieldGroups.entries()).map(([groupLabel, groupFields]) => /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+      groupLabel && /* @__PURE__ */ jsx(DropdownMenu.Label, { children: groupLabel }),
+      groupFields.map((field) => {
+        const available = isFieldAvailable(field.id);
+        return /* @__PURE__ */ jsxs(
+          DropdownMenu.Item,
+          {
+            disabled: field.disabled || !available,
+            onSelect: () => onAddFilter(field.id),
+            children: [
+              field.icon && /* @__PURE__ */ jsx("span", { className: "size-4 text-muted-foreground mr-2", children: field.icon }),
+              /* @__PURE__ */ jsx("span", { children: field.label })
+            ]
+          },
+          field.id
+        );
+      })
+    ] }, groupLabel != null ? groupLabel : "ungrouped")) })
+  ] });
+}
+function FilterPill(props) {
+  var _a;
+  const {
+    filter,
+    field,
+    i18n,
+    onUpdate,
+    onRemove,
+    autoOpen,
+    onAutoOpenComplete,
+    disabled
+  } = props;
+  const [open, setOpen] = useState(autoOpen != null ? autoOpen : false);
+  const operators = (_a = field.operators) != null ? _a : DEFAULT_FILTER_BAR_OPERATORS[field.type];
+  const isEmptyOperator = filter.operator === "is_empty" || filter.operator === "is_not_empty";
+  const hasCustomRenderer = !!field.customRenderer;
+  const useInlineInput = !hasCustomRenderer && (field.type === "text" || field.type === "number");
+  const usePopover = !useInlineInput && !isEmptyOperator;
+  const handleOpenChange = useCallback(
+    (isOpen) => {
+      setOpen(isOpen);
+      if (!isOpen && autoOpen) {
+        onAutoOpenComplete == null ? void 0 : onAutoOpenComplete();
+      }
+    },
+    [autoOpen, onAutoOpenComplete]
+  );
+  const valueDisplay = useMemo(() => {
+    var _a2, _b;
+    if (isEmptyOperator) return null;
+    if (filter.value === null || filter.value === "") return null;
+    if (field.type === "select" && field.options) {
+      const option = field.options.find((o) => o.value === filter.value);
+      return (_a2 = option == null ? void 0 : option.label) != null ? _a2 : String(filter.value);
+    }
+    if (field.type === "multiselect") {
+      const values = Array.isArray(filter.value) ? filter.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 : values[0];
+      }
+      return `${values.length} selected`;
+    }
+    return String(filter.value);
+  }, [filter.value, field, isEmptyOperator]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "filter-pill",
+      className: cn(
+        "group inline-flex items-center rounded-full overflow-hidden",
+        "border border-border bg-background",
+        "transition-all hover:shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "bg-muted text-foreground font-medium text-xs",
+              "flex items-center gap-1.5 flex-shrink-0",
+              "rounded-l-full px-3 py-1.5"
+            ),
+            children: [
+              field.icon && /* @__PURE__ */ jsx("span", { className: "size-4 flex-shrink-0", children: field.icon }),
+              /* @__PURE__ */ jsx("span", { children: field.label })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          OperatorDropdown,
+          {
+            operator: filter.operator,
+            operators,
+            i18n,
+            onChange: (op) => {
+              const newUpdates = { operator: op };
+              if (op === "is_empty" || op === "is_not_empty") {
+                newUpdates.value = null;
+              }
+              onUpdate(newUpdates);
+            },
+            disabled
+          }
+        ),
+        useInlineInput && !isEmptyOperator && /* @__PURE__ */ jsx(
+          InlineValueInput,
+          {
+            filter,
+            field,
+            i18n,
+            onUpdate,
+            disabled
+          }
+        ),
+        usePopover && /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: handleOpenChange, children: [
+          /* @__PURE__ */ jsxs(
+            Popover.Trigger,
+            {
+              className: cn(
+                "bg-background text-foreground text-xs",
+                "flex items-center gap-1 px-2.5 py-1.5",
+                "cursor-pointer hover:bg-muted/30"
+              ),
+              nativeButton: false,
+              render: /* @__PURE__ */ jsx("div", {}),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate max-w-[150px]", children: valueDisplay != null ? valueDisplay : i18n.selectValue }),
+                /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5 opacity-60 flex-shrink-0" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Popover.Content,
+            {
+              "data-slot": "filter-editor",
+              className: "p-0 w-[280px]",
+              align: "start",
+              showArrow: false,
+              children: /* @__PURE__ */ jsx(
+                ValueEditor,
+                {
+                  filter,
+                  field,
+                  i18n,
+                  onUpdate,
+                  onClose: () => handleOpenChange(false)
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            className: cn(
+              "size-5 rounded-full flex items-center justify-center flex-shrink-0",
+              "hover:bg-destructive/10 hover:text-destructive",
+              "transition-colors cursor-pointer mr-1"
+            ),
+            disabled,
+            "aria-label": `Remove ${field.label} filter`,
+            children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-3" })
+          }
+        )
+      ]
+    }
+  );
+}
+function OperatorDropdown(props) {
+  const { operator, operators, i18n, onChange, disabled } = props;
+  const hasSingleOperator = operators.length === 1;
+  const currentLabel = i18n.operators[operator];
+  if (hasSingleOperator) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "bg-primary text-primary-foreground",
+          "flex items-center px-3 py-0.5",
+          "rounded-full shadow-sm mx-1 my-0.5",
+          "text-xs font-normal"
+        ),
+        children: currentLabel
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "bg-primary text-primary-foreground",
+          "flex items-center gap-1 px-3 py-0.5",
+          "rounded-full shadow-sm mx-1 my-0.5",
+          "text-xs font-normal cursor-pointer",
+          "hover:bg-primary/90 transition-colors"
+        ),
+        children: [
+          currentLabel,
+          /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3 opacity-70" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", className: "min-w-[140px]", children: operators.map((op) => /* @__PURE__ */ jsxs(
+      DropdownMenu.Item,
+      {
+        onSelect: () => onChange(op),
+        className: "gap-2",
+        children: [
+          op === operator && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: op !== operator ? "pl-6" : "", children: i18n.operators[op] })
+        ]
+      },
+      op
+    )) })
+  ] });
+}
+function getInputWidth(value, placeholder, minWidth = 4) {
+  const displayValue = value !== void 0 && value !== null && value !== "" ? String(value) : placeholder;
+  const width = Math.max(displayValue.length + 1, minWidth);
+  return `${width}ch`;
+}
+function InlineValueInput(props) {
+  var _a;
+  const { filter, field, i18n, onUpdate, disabled } = props;
+  const placeholder = (_a = field.placeholder) != null ? _a : i18n.enterValue;
+  const handleChange = (e) => {
+    const val = e.target.value;
+    if (field.type === "number") {
+      onUpdate({ value: val ? Number(val) : null });
+    } else {
+      onUpdate({ value: val });
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "bg-background text-foreground text-xs",
+        "flex items-center gap-1 px-2.5 py-1.5"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: field.type === "number" ? "number" : "text",
+          className: cn(
+            "bg-transparent border-none outline-none",
+            "placeholder:text-muted-foreground",
+            "text-xs"
+          ),
+          value: filter.value !== void 0 && filter.value !== null ? String(filter.value) : "",
+          onChange: handleChange,
+          placeholder,
+          "aria-label": `${field.label} value`,
+          style: { width: getInputWidth(filter.value, placeholder, 6) },
+          min: field.min,
+          max: field.max,
+          step: field.step,
+          disabled
+        }
+      )
+    }
+  );
+}
+function ValueEditor(props) {
+  var _a, _b, _c, _d;
+  const { filter, field, i18n, onUpdate, onClose } = props;
+  if (field.customRenderer) {
+    return /* @__PURE__ */ jsx("div", { className: "p-3", children: field.customRenderer({
+      field,
+      value: filter.value,
+      onChange: (value) => onUpdate({ value })
+    }) });
+  }
+  if (field.type === "select" && field.options) {
+    return /* @__PURE__ */ jsx(
+      SelectEditor,
+      {
+        options: field.options,
+        value: filter.value,
+        onChange: (value) => {
+          onUpdate({ value });
+          onClose();
+        },
+        i18n
+      }
+    );
+  }
+  if (field.type === "multiselect" && field.options) {
+    const currentValue = Array.isArray(filter.value) ? filter.value.filter(
+      (v) => typeof v === "string" && v.length > 1
+    ) : [];
+    return /* @__PURE__ */ jsx(
+      MultiselectEditor,
+      {
+        options: field.options,
+        value: currentValue,
+        onChange: (value) => onUpdate({ value }),
+        i18n
+      }
+    );
+  }
+  if (field.type === "text") {
+    return /* @__PURE__ */ jsx(
+      TextEditor,
+      {
+        value: (_a = filter.value) != null ? _a : "",
+        onChange: (value) => onUpdate({ value }),
+        placeholder: (_b = field.placeholder) != null ? _b : i18n.enterValue,
+        validation: field.validation,
+        onClose
+      }
+    );
+  }
+  if (field.type === "number") {
+    return /* @__PURE__ */ jsx(
+      NumberEditor,
+      {
+        value: (_c = filter.value) != null ? _c : null,
+        onChange: (value) => onUpdate({ value }),
+        placeholder: (_d = field.placeholder) != null ? _d : i18n.enterValue,
+        min: field.min,
+        max: field.max,
+        step: field.step,
+        onClose
+      }
+    );
+  }
+  return null;
+}
+function SelectEditor(props) {
+  const { options = [], value, onChange, i18n } = props;
+  const [search, setSearch] = useState("");
+  const filteredOptions = useMemo(() => {
+    if (!search) return options;
+    const lower = search.toLowerCase();
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(lower) || o.value.toLowerCase().includes(lower)
+    );
+  }, [options, search]);
+  return /* @__PURE__ */ jsxs(Command.Root, { shouldFilter: false, children: [
+    /* @__PURE__ */ jsx(
+      Command.Input,
+      {
+        placeholder: i18n.searchPlaceholder,
+        value: search,
+        onValueChange: setSearch
+      }
+    ),
+    /* @__PURE__ */ jsxs(Command.List, { className: "max-h-[300px]", children: [
+      /* @__PURE__ */ jsx(Command.Empty, { children: i18n.noResults }),
+      filteredOptions.map((option) => /* @__PURE__ */ jsxs(
+        Command.Item,
+        {
+          value: option.value,
+          onSelect: () => onChange(option.value),
+          className: "flex items-center gap-2 min-w-0",
+          children: [
+            option.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 [&>*]:size-5", children: option.icon }),
+            /* @__PURE__ */ jsx("span", { className: "truncate flex-1 min-w-0", children: option.label }),
+            value === option.value && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 flex-shrink-0" })
+          ]
+        },
+        option.value
+      ))
+    ] })
+  ] });
+}
+function MultiselectEditor(props) {
+  const { options = [], value, onChange, i18n } = props;
+  const [search, setSearch] = useState("");
+  const filteredOptions = useMemo(() => {
+    if (!search) return options;
+    const lower = search.toLowerCase();
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(lower) || o.value.toLowerCase().includes(lower)
+    );
+  }, [options, search]);
+  const toggleOption = useCallback(
+    (optionValue) => {
+      if (value.includes(optionValue)) {
+        onChange(value.filter((v) => v !== optionValue));
+      } else {
+        onChange([...value, optionValue]);
+      }
+    },
+    [value, onChange]
+  );
+  return /* @__PURE__ */ jsxs(Command.Root, { shouldFilter: false, children: [
+    /* @__PURE__ */ jsx(
+      Command.Input,
+      {
+        placeholder: i18n.searchPlaceholder,
+        value: search,
+        onValueChange: setSearch
+      }
+    ),
+    /* @__PURE__ */ jsxs(Command.List, { className: "max-h-[300px]", children: [
+      /* @__PURE__ */ jsx(Command.Empty, { children: i18n.noResults }),
+      filteredOptions.map((option) => {
+        const isSelected = value.includes(option.value);
+        return /* @__PURE__ */ jsxs(
+          Command.Item,
+          {
+            value: option.value,
+            onSelect: () => toggleOption(option.value),
+            className: "flex items-center gap-2 min-w-0",
+            children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: isSelected,
+                  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: "flex-shrink-0 [&>*]:size-5", children: option.icon }),
+              /* @__PURE__ */ jsx("span", { className: "truncate flex-1 min-w-0", children: option.label })
+            ]
+          },
+          option.value
+        );
+      })
+    ] })
+  ] });
+}
+function TextEditor(props) {
+  const {
+    value: initialValue,
+    onChange,
+    placeholder,
+    validation,
+    onClose
+  } = props;
+  const [localValue, setLocalValue] = useState(initialValue);
+  const [error, setError] = useState(null);
+  const inputRef = useRef(null);
+  const validate = useCallback(
+    (val) => {
+      var _a;
+      if (!validation) return true;
+      if (validation.pattern) {
+        const regex = new RegExp(validation.pattern);
+        if (!regex.test(val)) {
+          setError((_a = validation.message) != null ? _a : "Invalid format");
+          return false;
+        }
+      }
+      if (validation.validate) {
+        const result = validation.validate(val);
+        if (result !== true) {
+          setError(typeof result === "string" ? result : "Invalid value");
+          return false;
+        }
+      }
+      setError(null);
+      return true;
+    },
+    [validation]
+  );
+  const handleSubmit = useCallback(() => {
+    if (validate(localValue)) {
+      onChange(localValue);
+      onClose();
+    }
+  }, [localValue, validate, onChange, onClose]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    },
+    [handleSubmit, onClose]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-2", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref: inputRef,
+        type: "text",
+        value: localValue,
+        onChange: (e) => {
+          setLocalValue(e.target.value);
+          setError(null);
+        },
+        onKeyDown: handleKeyDown,
+        placeholder,
+        className: "w-full",
+        autoFocus: true
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleSubmit, children: "Apply" })
+    ] })
+  ] });
+}
+function NumberEditor(props) {
+  const {
+    value: initialValue,
+    onChange,
+    placeholder,
+    min,
+    max,
+    step,
+    onClose
+  } = props;
+  const [localValue, setLocalValue] = useState(
+    initialValue !== null ? String(initialValue) : ""
+  );
+  const inputRef = useRef(null);
+  const handleSubmit = useCallback(() => {
+    const numValue = localValue === "" ? null : Number(localValue);
+    onChange(numValue);
+    onClose();
+  }, [localValue, onChange, onClose]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    },
+    [handleSubmit, onClose]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-2", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref: inputRef,
+        type: "number",
+        value: localValue,
+        onChange: (e) => setLocalValue(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder,
+        min,
+        max,
+        step,
+        className: "w-full",
+        autoFocus: true
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleSubmit, children: "Apply" })
+    ] })
+  ] });
+}
+
+export {
+  AddFilterDropdown,
+  FilterPill
+};

package/dist/{chunk-URDCG5NI.mjs → chunk-YTYOFT33.mjs}

@@ -103,6 +103,58 @@ var messages = 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"
   }
 });