@brainfish-ai/components 0.26.0 → 0.27.0

package/dist/esm/chunks/filters.-7vSLEQ2.js

@@ -1,565 +0,0 @@
-import React__default, { useRef, useState, forwardRef, useImperativeHandle, useEffect } from 'react';
-import { Check, XCircle, Plus } from '@phosphor-icons/react';
-import { createId } from '@paralleldrive/cuid2';
-import { B as Button } from './button.DQL6gCAt.js';
-import { Input } from '../components/ui/input.js';
-import { ButtonGroup } from '../components/ui/button-group.js';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../components/ui/dropdown-menu.js';
-import { Popover, PopoverTrigger, PopoverContent } from '../components/ui/popover.js';
-import { c as cn } from './utils.Cwtlq8dh.js';
-
-var Operator = /* @__PURE__ */ ((Operator2) => {
-  Operator2["IS"] = "is";
-  Operator2["IS_NOT"] = "is not";
-  Operator2["CONTAINS"] = "contains";
-  Operator2["DOES_NOT_CONTAIN"] = "does not contain";
-  Operator2["STARTS_WITH"] = "starts with";
-  return Operator2;
-})(Operator || {});
-
-const useMultiSelectHelpers = (internalFilter, valueOptions, selectPlaceholder) => {
-  const getSelectedValues = () => {
-    if (Array.isArray(internalFilter.value)) {
-      return internalFilter.value;
-    }
-    return internalFilter.value ? [internalFilter.value] : [];
-  };
-  const isValueSelected = (valueId) => {
-    const selectedValues = getSelectedValues();
-    return selectedValues.includes(valueId);
-  };
-  const getDisplayValue = () => {
-    const selectedValues = getSelectedValues();
-    if (selectedValues.length === 0) return selectPlaceholder;
-    if (selectedValues.length === 1) {
-      const option = valueOptions.find((opt) => opt.id === selectedValues[0]);
-      return option?.label || selectedValues[0];
-    }
-    return `${selectedValues.length} selected`;
-  };
-  return {
-    getSelectedValues,
-    isValueSelected,
-    getDisplayValue
-  };
-};
-
-const CustomValueInput = ({
-  inputValue,
-  setInputValue,
-  customValuePlaceholder,
-  customValueButtonLabel,
-  onSubmit,
-  handleKeyDown
-}) => {
-  const inputRef = useRef(null);
-  return /* @__PURE__ */ React__default.createElement(
-    "form",
-    {
-      className: "p-3",
-      onSubmit: (e) => {
-        e.preventDefault();
-        onSubmit();
-      }
-    },
-    /* @__PURE__ */ React__default.createElement(
-      Input,
-      {
-        ref: inputRef,
-        type: "text",
-        value: inputValue,
-        onChange: (e) => setInputValue(e.target.value),
-        placeholder: customValuePlaceholder,
-        className: "mb-2",
-        onKeyDown: (e) => handleKeyDown(e, true)
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      Button,
-      {
-        type: "submit",
-        variant: "dark",
-        className: "w-full",
-        onKeyDown: (e) => handleKeyDown(e, false),
-        "data-custom-submit-button": true
-      },
-      customValueButtonLabel
-    )
-  );
-};
-
-const getInitialValues = (value) => {
-  if (Array.isArray(value)) {
-    return value;
-  } else if (value) {
-    return [value];
-  }
-  return [];
-};
-const MultiSelectDropdown = ({
-  internalFilter,
-  valueOptions,
-  onConfirm,
-  onClose
-}) => {
-  const [pendingValues, setPendingValues] = useState(() => getInitialValues(internalFilter.value));
-  const [announcement, setAnnouncement] = useState("");
-  const buttonRefs = useRef([]);
-  const applyButtonRef = useRef(null);
-  const handleValueToggle = (valueId) => {
-    const option = valueOptions.find((opt) => opt.id === valueId);
-    const isCurrentlySelected = pendingValues.includes(valueId);
-    setPendingValues((prev) => {
-      const newValues = prev.includes(valueId) ? prev.filter((id) => id !== valueId) : [...prev, valueId];
-      if (option) {
-        const action = isCurrentlySelected ? "deselected" : "selected";
-        setAnnouncement(`${option.label} ${action}.`);
-      }
-      return newValues;
-    });
-  };
-  const handleConfirm = () => {
-    onConfirm(pendingValues);
-    onClose();
-  };
-  const isValueSelected = (valueId) => {
-    return pendingValues.includes(valueId);
-  };
-  const focusButton = (index) => {
-    if (index < valueOptions.length) {
-      buttonRefs.current[index]?.focus();
-    } else {
-      applyButtonRef.current?.focus();
-    }
-  };
-  const handleKeyDown = (e, index) => {
-    switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault();
-        const nextIndex = Math.min(index + 1, valueOptions.length);
-        focusButton(nextIndex);
-        break;
-      }
-      case "ArrowUp": {
-        e.preventDefault();
-        const prevIndex = Math.max(index - 1, 0);
-        focusButton(prevIndex);
-        break;
-      }
-      case "Enter":
-      case "Spacebar":
-        e.preventDefault();
-        if (index < valueOptions.length) {
-          handleValueToggle(valueOptions[index].id);
-        } else {
-          handleConfirm();
-        }
-        break;
-      case "Escape":
-        e.preventDefault();
-        onClose();
-        break;
-    }
-  };
-  return /* @__PURE__ */ React__default.createElement("div", { className: "py-1", role: "listbox", "aria-multiselectable": "true" }, /* @__PURE__ */ React__default.createElement("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only" }, announcement), valueOptions.map((option, index) => /* @__PURE__ */ React__default.createElement(
-    "button",
-    {
-      key: option.id,
-      ref: (el) => buttonRefs.current[index] = el,
-      type: "button",
-      className: "relative flex w-full text-left cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-      onClick: () => handleValueToggle(option.id),
-      onKeyDown: (e) => handleKeyDown(e, index),
-      role: "option",
-      "aria-selected": isValueSelected(option.id)
-    },
-    isValueSelected(option.id) && /* @__PURE__ */ React__default.createElement(Check, { size: 14, className: "mr-2" }),
-    !isValueSelected(option.id) && /* @__PURE__ */ React__default.createElement("span", { className: "mr-2 w-3.5" }),
-    option.label
-  )), /* @__PURE__ */ React__default.createElement("div", { className: "border-t border-border mt-1 pt-2 px-2 pb-2" }, /* @__PURE__ */ React__default.createElement(
-    Button,
-    {
-      ref: applyButtonRef,
-      onClick: handleConfirm,
-      size: "sm",
-      className: "w-full",
-      disabled: pendingValues.length === 0,
-      onKeyDown: (e) => handleKeyDown(e, valueOptions.length)
-    },
-    "Apply (",
-    pendingValues.length,
-    " selected)"
-  )));
-};
-
-const SingleSelectDropdown = ({
-  valueOptions,
-  isValueSelected,
-  onValueSelect
-}) => {
-  const buttonRefs = useRef([]);
-  const focusButton = (index) => {
-    buttonRefs.current[index]?.focus();
-  };
-  const handleKeyDown = (e, index) => {
-    switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault();
-        const nextIndex = Math.min(index + 1, valueOptions.length - 1);
-        focusButton(nextIndex);
-        break;
-      }
-      case "ArrowUp": {
-        e.preventDefault();
-        const prevIndex = Math.max(index - 1, 0);
-        focusButton(prevIndex);
-        break;
-      }
-      case "Enter":
-      case "Spacebar":
-        e.preventDefault();
-        onValueSelect(valueOptions[index].id);
-        break;
-    }
-  };
-  return /* @__PURE__ */ React__default.createElement("div", { className: "py-1", role: "listbox" }, valueOptions.map((option, index) => /* @__PURE__ */ React__default.createElement(
-    "button",
-    {
-      key: option.id,
-      ref: (el) => buttonRefs.current[index] = el,
-      type: "button",
-      className: "relative flex w-full text-left cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-      onClick: () => onValueSelect(option.id),
-      onKeyDown: (e) => handleKeyDown(e, index)
-    },
-    isValueSelected(option.id) && /* @__PURE__ */ React__default.createElement(Check, { size: 14, className: "mr-2" }),
-    !isValueSelected(option.id) && /* @__PURE__ */ React__default.createElement("span", { className: "mr-2 w-3.5" }),
-    option.label
-  )));
-};
-
-const Filter = forwardRef(
-  ({
-    filter,
-    sourceOptions,
-    rules,
-    onSourceChange,
-    onRemoveFilter,
-    onFilterChange,
-    selectPlaceholder = "Select a value",
-    customValuePlaceholder = "Enter custom value",
-    customValueButtonLabel = "Done",
-    sourceFirstMessage = "Please select a source first"
-  }, ref) => {
-    const [internalFilter, setInternalFilter] = useState({
-      id: filter.id,
-      source: filter.source,
-      operator: filter.operator || Operator.IS,
-      value: filter.value
-    });
-    const [inputValue, setInputValue] = useState("");
-    const [openDropdownType, setOpenDropdownType] = useState(null);
-    const inputRef = useRef(null);
-    const sourceButtonRef = useRef(null);
-    const divRef = useRef(null);
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        sourceButtonRef.current?.focus();
-      }
-    }));
-    const currentRules = internalFilter.source ? rules[internalFilter.source] : void 0;
-    const operatorOptions = currentRules?.operators || [];
-    const isMultiSelect = currentRules?.multiSelect || false;
-    let inputType = currentRules?.inputType || "dropdown";
-    if (internalFilter.operator === Operator.CONTAINS || internalFilter.operator === Operator.DOES_NOT_CONTAIN) {
-      inputType = "custom";
-    }
-    const valueOptions = currentRules?.getValueOptions ? currentRules.getValueOptions() : [];
-    const { getSelectedValues, isValueSelected, getDisplayValue } = useMultiSelectHelpers(
-      internalFilter,
-      valueOptions,
-      selectPlaceholder
-    );
-    useEffect(() => {
-      if (openDropdownType === "value" && inputType === "custom") {
-        const timeoutId = setTimeout(() => inputRef.current?.focus(), 50);
-        return () => clearTimeout(timeoutId);
-      }
-      return void 0;
-    }, [openDropdownType, inputType]);
-    useEffect(() => {
-      setInternalFilter({
-        id: filter.id,
-        source: filter.source,
-        operator: filter.operator || Operator.IS,
-        value: filter.value
-      });
-    }, [filter]);
-    const checkAndTriggerChange = (newFilter) => {
-      const hasValue = Array.isArray(newFilter.value) ? newFilter.value.length > 0 : !!newFilter.value?.trim();
-      const isComplete = newFilter.source && newFilter.operator && hasValue;
-      if (isComplete) {
-        onFilterChange(newFilter);
-      }
-    };
-    const updateFilterField = (field, value) => {
-      const newFilter = { ...internalFilter, [field]: value };
-      if (field === "source") {
-        const sourceRules = rules[value];
-        newFilter.operator = sourceRules?.operators[0]?.id;
-        newFilter.value = sourceRules?.multiSelect ? [] : "";
-      }
-      if (field === "operator") {
-        if (internalFilter.source) {
-          const sourceRules = rules[internalFilter.source];
-          if (sourceRules?.inputType === "dropdown") {
-            newFilter.value = sourceRules?.multiSelect ? [] : "";
-          }
-        }
-      }
-      setInternalFilter(newFilter);
-      checkAndTriggerChange(newFilter);
-      if (!isMultiSelect || field !== "value") {
-        setOpenDropdownType(null);
-      }
-    };
-    const handleValueToggle = (valueId) => {
-      const selectedValues = getSelectedValues();
-      let newValues;
-      if (isMultiSelect) {
-        if (selectedValues.includes(valueId)) {
-          newValues = selectedValues.filter((id) => id !== valueId);
-        } else {
-          newValues = [...selectedValues, valueId];
-        }
-      } else {
-        newValues = [valueId];
-      }
-      const newFilter = {
-        ...internalFilter,
-        value: isMultiSelect ? newValues : newValues[0] || ""
-      };
-      setInternalFilter(newFilter);
-      checkAndTriggerChange(newFilter);
-      if (!isMultiSelect) {
-        setOpenDropdownType(null);
-      }
-    };
-    const handleMultiSelectConfirm = (selectedValues) => {
-      const newFilter = {
-        ...internalFilter,
-        value: selectedValues
-      };
-      setInternalFilter(newFilter);
-      const isComplete = newFilter.source && newFilter.operator && selectedValues.length > 0;
-      if (isComplete) onFilterChange(newFilter);
-      setOpenDropdownType(null);
-    };
-    const handleCustomValueSubmit = () => {
-      if (inputValue.trim()) {
-        const newFilter = { ...internalFilter, value: inputValue.trim() };
-        setInternalFilter(newFilter);
-        setInputValue("");
-        setOpenDropdownType(null);
-        if (newFilter.source && newFilter.operator && newFilter.value) {
-          onFilterChange(newFilter);
-        }
-      }
-    };
-    const handleKeyDown = (e, isInput) => {
-      if (e.key === "Escape") {
-        setOpenDropdownType(null);
-        return;
-      }
-      if (e.key === "Tab") {
-        if (isInput && !e.shiftKey) {
-          e.preventDefault();
-          const button = document.querySelector("[data-custom-submit-button]");
-          button?.focus();
-        } else if (!isInput) {
-          e.preventDefault();
-          inputRef.current?.focus();
-        }
-      }
-    };
-    return /* @__PURE__ */ React__default.createElement(
-      ButtonGroup,
-      {
-        ref: divRef,
-        orientation: "horizontal",
-        className: "rounded-full border border-border divide-x-2 divide-dark-500"
-      },
-      /* @__PURE__ */ React__default.createElement(
-        DropdownMenu,
-        {
-          open: openDropdownType === "source",
-          onOpenChange: (open) => setOpenDropdownType(open ? "source" : null),
-          modal: false
-        },
-        /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { ref: sourceButtonRef, variant: "ghost", size: "xs", className: "rounded-l-full font-bold" }, sourceOptions.find((opt) => opt.id === internalFilter.source)?.label || sourceOptions[0]?.label || selectPlaceholder)),
-        /* @__PURE__ */ React__default.createElement(DropdownMenuContent, { align: "start", className: "w-48" }, sourceOptions.map((option) => /* @__PURE__ */ React__default.createElement(
-          DropdownMenuItem,
-          {
-            key: option.id,
-            className: "flex items-center",
-            onSelect: () => {
-              updateFilterField("source", option.id);
-              onSourceChange?.(option.id);
-            }
-          },
-          option.id === internalFilter.source && /* @__PURE__ */ React__default.createElement(Check, { size: 14, className: "mr-2" }),
-          option.label
-        )))
-      ),
-      /* @__PURE__ */ React__default.createElement(
-        DropdownMenu,
-        {
-          open: openDropdownType === "operator",
-          onOpenChange: (open) => setOpenDropdownType(open ? "operator" : null),
-          modal: false
-        },
-        /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { variant: "ghost", size: "xs" }, operatorOptions.find((opt) => opt.id === internalFilter.operator)?.label || selectPlaceholder)),
-        /* @__PURE__ */ React__default.createElement(DropdownMenuContent, { align: "start", className: "w-48" }, operatorOptions.map((option) => /* @__PURE__ */ React__default.createElement(
-          DropdownMenuItem,
-          {
-            key: option.id,
-            className: "flex items-center",
-            onSelect: () => updateFilterField("operator", option.id)
-          },
-          option.id === internalFilter.operator && /* @__PURE__ */ React__default.createElement(Check, { size: 14, className: "mr-2" }),
-          option.label
-        )))
-      ),
-      /* @__PURE__ */ React__default.createElement(
-        Popover,
-        {
-          open: openDropdownType === "value",
-          onOpenChange: (open) => setOpenDropdownType(open ? "value" : null)
-        },
-        /* @__PURE__ */ React__default.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { variant: "ghost", size: "xs", className: "font-bold" }, getDisplayValue())),
-        /* @__PURE__ */ React__default.createElement(PopoverContent, { align: "start", className: "w-64 max-h-[min(320px,50vh)] overflow-y-auto p-0" }, inputType === "custom" && /* @__PURE__ */ React__default.createElement("div", { className: "p-3" }, /* @__PURE__ */ React__default.createElement(
-          CustomValueInput,
-          {
-            inputValue,
-            setInputValue,
-            customValuePlaceholder,
-            customValueButtonLabel,
-            onSubmit: handleCustomValueSubmit,
-            handleKeyDown
-          }
-        )), inputType === "dropdown" && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, internalFilter.source ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isMultiSelect ? /* @__PURE__ */ React__default.createElement(
-          MultiSelectDropdown,
-          {
-            internalFilter,
-            valueOptions,
-            onConfirm: handleMultiSelectConfirm,
-            onClose: () => setOpenDropdownType(null)
-          }
-        ) : /* @__PURE__ */ React__default.createElement(
-          SingleSelectDropdown,
-          {
-            valueOptions,
-            isValueSelected,
-            onValueSelect: handleValueToggle
-          }
-        )) : /* @__PURE__ */ React__default.createElement("div", { className: "p-3 text-sm text-gray-500" }, sourceFirstMessage)))
-      ),
-      /* @__PURE__ */ React__default.createElement(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "xs",
-          onClick: () => {
-            setInternalFilter({ id: filter.id });
-            setOpenDropdownType(null);
-            onRemoveFilter(filter.id);
-          },
-          className: "p-2 hover:bg-black/10 rounded-none rounded-r-full",
-          "aria-label": "Remove filter"
-        },
-        /* @__PURE__ */ React__default.createElement(XCircle, { size: 16, weight: "fill" })
-      )
-    );
-  }
-);
-Filter.displayName = "Filter";
-
-const Filters = ({
-  filters,
-  onFilterChange,
-  onFilterRemove,
-  onFilterAdd,
-  sourceOptions,
-  rules,
-  className
-}) => {
-  const [internalFilters, setInternalFilters] = useState(filters || []);
-  const filterRefs = useRef({});
-  useEffect(() => {
-    setInternalFilters(filters || []);
-  }, [filters]);
-  const usedSources = internalFilters.map((filter) => filter.source).filter(Boolean);
-  const availableSources = sourceOptions.filter((option) => {
-    if (rules[option.id]?.multiSelect) {
-      return !usedSources.includes(option.id);
-    }
-    return sourceOptions;
-  });
-  const canAddFilter = availableSources.length > 0;
-  const handleAddFilter = () => {
-    if (!canAddFilter) return;
-    const newFilter = {
-      id: createId(),
-      source: availableSources[0].id,
-      operator: Operator.IS,
-      value: rules[availableSources[0].id]?.multiSelect ? [] : ""
-    };
-    const newFilters = [...internalFilters, newFilter];
-    setInternalFilters(newFilters);
-    requestAnimationFrame(() => {
-      filterRefs.current[newFilter.id]?.focus();
-    });
-    onFilterAdd?.(newFilter);
-  };
-  const handleRemoveFilter = (filter) => {
-    const newFilters = internalFilters.filter((f) => f.id !== filter.id);
-    setInternalFilters(newFilters);
-    onFilterRemove(filter.id);
-  };
-  return /* @__PURE__ */ React__default.createElement("fieldset", { className: cn("flex flex-wrap gap-2", className) }, /* @__PURE__ */ React__default.createElement("legend", { className: "sr-only" }, "Filters"), internalFilters?.map((filter) => {
-    const filterSourceOptions = sourceOptions.filter(
-      (option) => !usedSources.includes(option.id) || // Available sources
-      option.id === filter.source
-      // Or its own current source
-    );
-    return /* @__PURE__ */ React__default.createElement(
-      Filter,
-      {
-        key: filter.id,
-        ref: (ref) => {
-          filterRefs.current[filter.id] = ref;
-        },
-        filter,
-        sourceOptions: filterSourceOptions,
-        rules,
-        onRemoveFilter: () => handleRemoveFilter(filter),
-        onFilterChange
-      }
-    );
-  }), canAddFilter && /* @__PURE__ */ React__default.createElement(
-    Button,
-    {
-      onClick: handleAddFilter,
-      variant: "ghost",
-      className: "border border-foreground rounded-full gap-1",
-      size: "sm",
-      title: "Add filter"
-    },
-    /* @__PURE__ */ React__default.createElement(Plus, { size: 16 }),
-    "Add filter"
-  ));
-};
-
-export { Filter as F, Operator as O, Filters as a };
-//# sourceMappingURL=filters.-7vSLEQ2.js.map