@vertesia/ui 0.67.0 → 0.68.0

package/src/core/components/shadcn/filters/{comboBox.tsx → comboBox/SelectCombobox.tsx}

@@ -1,18 +1,10 @@
 import { useRef, useState } from "react";
-// import { AnimatePresence, motion } from "motion/react";
-import dayjs from "dayjs";
-import { Calendar } from "../calendar";
-
-import { Button } from "../button";
-import { Checkbox } from "../checkbox";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../command";
-import { Input } from "../input";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover";
-import { AnimateChangeInHeight } from "./animateChangeInHeight";
-import { FilterGroupOption, FilterOption } from "./types";
-import { DynamicLabel } from "./DynamicLabel";
-import { InputList } from "../../index";
-
+import { Checkbox } from "../../checkbox";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../command";
+import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
+import { AnimateChangeInHeight } from "../animateChangeInHeight";
+import { FilterGroupOption, FilterOption } from "../types";
+import { DynamicLabel } from "../DynamicLabel";
 
 export const SelectionCombobox = ({
     filterType,
@@ -33,6 +25,7 @@ export const SelectionCombobox = ({
     const nonSelectedFilterValues = options?.filter(
         (option) => !filterValues.some(filter => filter.value === option.value)
     );
+
     return (
         <Popover
             _open={open}
@@ -93,7 +86,7 @@ export const SelectionCombobox = ({
                                                 setOpen(false);
                                             }}
                                         >
-                                            <Checkbox checked={true} />
+                                            <input type="checkbox" checked={true} onChange={() => {}} />
                                             <DynamicLabel
                                                 value={value.value || ''}
                                                 labelRenderer={labelRenderer}
@@ -149,181 +142,4 @@ export const SelectionCombobox = ({
             </PopoverContent>
         </Popover>
     );
-};
-
-export const DateCombobox = ({
-    filterValues,
-    setFilterValues,
-}: {
-    filterValues: string[];
-    setFilterValues: (values: string[]) => void;
-}) => {
-    const [open, setOpen] = useState(false);
-    const selectedDate = filterValues[0] ? new Date(filterValues[0]) : undefined;
-
-    return (
-        <Popover _open={open} onOpenChange={setOpen}>
-            <PopoverTrigger
-                className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-primary shrink-0 transition"
-            >
-                <div className="flex gap-1.5 items-center">
-                    {selectedDate ? (
-                        dayjs(selectedDate).format("MMM D, YYYY")
-                    ) : (
-                        <span>Pick a date</span>
-                    )}
-                </div>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0" align="start">
-                <Calendar
-                    className="p-0"
-                    value={selectedDate}
-                    onChange={(date) => {
-                        if (date) {
-                            const actualDate = Array.isArray(date) ? date[0] : date;
-                            if (actualDate) {
-                                setFilterValues([dayjs(actualDate).format("YYYY-MM-DD")]);
-                                setOpen(false);
-                            }
-                        }
-                    }}
-                />
-            </PopoverContent>
-        </Popover>
-    );
-};
-
-export const TextCombobox = ({
-    filterType,
-    filterValue,
-    setFilterValue,
-}: {
-    filterType: string;
-    filterValue: string;
-    setFilterValue: (value: string) => void;
-}) => {
-    const [open, setOpen] = useState(false);
-    const [inputValue, setInputValue] = useState(filterValue);
-
-    const handleKeyDown = (event: React.KeyboardEvent) => {
-        if (event.key === "Enter") {
-            setFilterValue(inputValue);
-            setOpen(false);
-        }
-    };
-
-    return (
-        <Popover
-            _open={open}
-            onOpenChange={(open) => {
-                setOpen(open);
-                if (!open && inputValue !== filterValue) {
-                    setInputValue(filterValue);
-                }
-            }}
-        >
-            <PopoverTrigger
-                className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-primary shrink-0 transition"
-            >
-                <div className="flex gap-1.5 items-center">
-                    {filterValue || "Enter text..."}
-                </div>
-            </PopoverTrigger>
-            <PopoverContent className="w-[300px] p-3">
-                <div className="flex flex-col gap-1">
-                    <div className="flex items-center p-1.5 text-xs text-muted">
-                        <span>{filterType}</span>
-                    </div>
-                    <Input autoFocus
-                        type="text" size={"sm"}
-                        value={inputValue}
-                        onChange={setInputValue}
-                        onKeyDown={handleKeyDown}
-                        placeholder="Enter text..."
-                    />
-                    <Button
-                        size="sm" variant={"outline"}
-                        onClick={() => {
-                            setFilterValue(inputValue);
-                            setOpen(false);
-                        }}
-                    >
-                        Apply
-                    </Button>
-                </div>
-            </PopoverContent>
-        </Popover>
-    );
-};
-
-export const StringListCombobox = ({
-    filterType,
-    filterValues,
-    setFilterValues,
-}: {
-    filterType: string;
-    filterValues: string[];
-    setFilterValues: (values: string[]) => void;
-}) => {
-    const [open, setOpen] = useState(false);
-    const [tags, setTags] = useState<string[]>(filterValues);
-
-    const handleApply = () => {
-        setFilterValues(tags);
-        setOpen(false);
-    };
-
-    return (
-        <Popover
-            _open={open}
-            onOpenChange={(open) => {
-                setOpen(open);
-                if (!open && JSON.stringify(tags) !== JSON.stringify(filterValues)) {
-                    setTags(filterValues);
-                }
-            }}
-        >
-            <PopoverTrigger
-                className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-primary shrink-0 transition"
-            >
-                <div className="flex gap-1.5 items-center">
-                    {filterValues.length > 0 ? (
-                        filterValues.length === 1 ? filterValues[0] : `${filterValues.length} tags`
-                    ) : (
-                        "Add tags..."
-                    )}
-                </div>
-            </PopoverTrigger>
-            <PopoverContent className="w-[300px] p-3">
-                <div className="flex flex-col gap-3">
-                    <div className="flex items-center p-1.5 text-xs text-muted">
-                        <span>{filterType}</span>
-                    </div>
-                    <InputList 
-                        value={tags} 
-                        onChange={setTags} 
-                        placeholder={`Add ${filterType.toLowerCase()}...`}
-                    />
-                    <div className="flex gap-2 justify-end">
-                        <Button
-                            size="sm" 
-                            variant="ghost"
-                            onClick={() => {
-                                setTags(filterValues);
-                                setOpen(false);
-                            }}
-                        >
-                            Cancel
-                        </Button>
-                        <Button
-                            size="sm" 
-                            onClick={handleApply}
-                        >
-                            Apply
-                        </Button>
-                    </div>
-                </div>
-            </PopoverContent>
-        </Popover>
-    );
 };

package/src/core/components/shadcn/filters/comboBox/StringListCombobox.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { Button } from "../../button";
+import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
+import { InputList } from "../../../index";
+
+export const StringListCombobox = ({
+    filterType,
+    filterValues,
+    setFilterValues,
+}: {
+    filterType: string;
+    filterValues: string[];
+    setFilterValues: (values: string[]) => void;
+}) => {
+    const [open, setOpen] = useState(false);
+    const [tags, setTags] = useState<string[]>(filterValues);
+
+    const handleApply = () => {
+        setFilterValues(tags);
+        setOpen(false);
+    };
+
+    return (
+        <Popover
+            _open={open}
+            onOpenChange={(open) => {
+                setOpen(open);
+                if (!open && JSON.stringify(tags) !== JSON.stringify(filterValues)) {
+                    setTags(filterValues);
+                }
+            }}
+        >
+            <PopoverTrigger
+                className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-primary shrink-0 transition"
+            >
+                <div className="flex gap-1.5 items-center">
+                    {filterValues.length > 0 ? (
+                        filterValues.length === 1 ? filterValues[0] : `${filterValues.length} tags`
+                    ) : (
+                        "Add tags..."
+                    )}
+                </div>
+            </PopoverTrigger>
+            <PopoverContent className="w-[300px] p-3">
+                <div className="flex flex-col gap-3">
+                    <div className="flex items-center p-1.5 text-xs text-muted">
+                        <span>{filterType}</span>
+                    </div>
+                    <InputList
+                        value={tags}
+                        onChange={setTags}
+                        placeholder={`Add ${filterType.toLowerCase()}...`}
+                    />
+                    <div className="flex gap-2 justify-end">
+                        <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => {
+                                setTags(filterValues);
+                                setOpen(false);
+                            }}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            size="sm"
+                            onClick={handleApply}
+                        >
+                            Apply
+                        </Button>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+};

package/src/core/components/shadcn/filters/comboBox/TextCombobox.tsx

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { Button } from "../../button";
+import { Input } from "../../input";
+import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
+
+export const TextCombobox = ({
+    filterType,
+    filterValue,
+    setFilterValue,
+}: {
+    filterType: string;
+    filterValue: string;
+    setFilterValue: (value: string) => void;
+}) => {
+    const [open, setOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(filterValue);
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === "Enter") {
+            setFilterValue(inputValue);
+            setOpen(false);
+        }
+    };
+
+    return (
+        <Popover
+            _open={open}
+            onOpenChange={(open) => {
+                setOpen(open);
+                if (!open && inputValue !== filterValue) {
+                    setInputValue(filterValue);
+                }
+            }}
+        >
+            <PopoverTrigger
+                className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-primary shrink-0 transition"
+            >
+                <div className="flex gap-1.5 items-center">
+                    {filterValue || "Enter text..."}
+                </div>
+            </PopoverTrigger>
+            <PopoverContent className="w-[300px] p-3">
+                <div className="flex flex-col gap-1">
+                    <div className="flex items-center p-1.5 text-xs text-muted">
+                        <span>{filterType}</span>
+                    </div>
+                    <Input autoFocus
+                        type="text" size={"sm"}
+                        value={inputValue}
+                        onChange={setInputValue}
+                        onKeyDown={handleKeyDown}
+                        placeholder="Enter text..."
+                    />
+                    <div className="mt-2 p-2 border-t">
+                        <div className="flex gap-2 justify-end">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => {
+                                    setInputValue(filterValue);
+                                    setOpen(false);
+                                }}
+                            >
+                                Cancel
+                            </Button>
+                            <Button
+                                size="sm"
+                                onClick={() => {
+                                    setFilterValue(inputValue);
+                                    setOpen(false);
+                                }}
+                            >
+                                Apply
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+};

package/src/core/components/shadcn/filters/comboBox/comboBox.tsx

@@ -0,0 +1,4 @@
+export { SelectionCombobox } from './SelectCombobox';
+export { DateCombobox } from './DateCombobox';
+export { TextCombobox } from './TextCombobox';
+export { StringListCombobox } from './StringListCombobox';

package/src/core/components/shadcn/filters/filter/SelectFilter.tsx

@@ -0,0 +1,161 @@
+import React, { useState } from "react";
+import { CommandItem, CommandEmpty } from "../../command";
+import { Button } from "../../button";
+import { Filter, FilterGroup, FilterGroupOption, FilterOption } from "../types";
+import { DynamicLabel } from "../DynamicLabel";
+
+interface SelectFilterProps {
+  selectedView: string | null;
+  commandInput: string;
+  setFilters: React.Dispatch<React.SetStateAction<Filter[]>>;
+  handleClose: () => void;
+  filterGroups: FilterGroup[];
+}
+
+export default function SelectFilter({
+  selectedView,
+  commandInput,
+  setFilters,
+  handleClose,
+  filterGroups,
+}: Readonly<SelectFilterProps>) {
+  const [selectedOptions, setSelectedOptions] = useState<FilterOption[]>([]);
+  const getFilteredOptions = (groupName: string) => {
+    const group = filterGroups.find(g => g.name === groupName);
+    if (!group) {
+      return [];
+    }
+    let filteredOptions = group.options || [];
+
+    if (!commandInput.trim()) {
+      return filteredOptions;
+    }
+
+    if (group.filterBy) {
+      const filterLc = commandInput.toLowerCase();
+      const results = filteredOptions.filter(option => {
+        if (option.value === undefined) return false;
+        return group.filterBy!(option.value, filterLc);
+      });
+      return results;
+    }
+
+    const filterLc = commandInput.toLowerCase();
+    return filteredOptions.filter(option => {
+      const optionValue = String(option.value || '').toLowerCase();
+      return optionValue.includes(filterLc);
+    });
+  };
+
+  if (!selectedView) {
+    return null;
+  }
+
+  const options = getFilteredOptions(selectedView);
+  const selectedGroup = filterGroups.find(g => g.name === selectedView);
+
+  if (options.length === 0) {
+    return <CommandEmpty>No matching options</CommandEmpty>;
+  }
+
+  const groupTitle = selectedGroup?.placeholder || selectedGroup?.name;
+
+  const handleApply = () => {
+    if (selectedOptions.length > 0) {
+      setFilters(prev => [
+        ...prev.filter(f => f.name !== selectedView),
+        {
+          name: selectedView || "",
+          placeholder: selectedGroup?.placeholder || "",
+          value: selectedOptions,
+          type: selectedGroup?.type || "select",
+          multiple: selectedGroup?.multiple || false,
+        }
+      ]);
+    }
+    handleClose();
+  };
+
+  const handleOptionToggle = (option: FilterGroupOption) => {
+    const filterOption = {
+      value: option.value,
+      label: option.label
+    };
+
+    if (selectedGroup?.multiple) {
+      // For multiple selection, toggle the option
+      const isSelected = selectedOptions.some(opt => opt.value === option.value);
+      if (isSelected) {
+        setSelectedOptions(prev => prev.filter(opt => opt.value !== option.value));
+      } else {
+        setSelectedOptions(prev => [...prev, filterOption]);
+      }
+    } else {
+      // For single selection, apply immediately
+      setFilters((prev: Filter[]) => {
+        const existingFilterIndex = prev.findIndex(f => f.name === selectedView);
+
+        if (existingFilterIndex >= 0) {
+          const updatedFilters = [...prev];
+          updatedFilters[existingFilterIndex] = {
+            ...updatedFilters[existingFilterIndex],
+            value: [filterOption]
+          };
+          return updatedFilters;
+        } else {
+          return [...prev, {
+            name: selectedView || "",
+            placeholder: selectedGroup?.placeholder || "",
+            value: [filterOption],
+            type: selectedGroup?.type || "select",
+            multiple: selectedGroup?.multiple || false,
+          }];
+        }
+      });
+      handleClose();
+    }
+  };
+
+  return (
+    <>
+      <div className="flex items-center p-1.5 text-xs text-muted">
+        <span>{groupTitle}</span>
+      </div>
+      <div className="max-h-50 overflow-y-auto">
+        {options.map((option: FilterGroupOption) => {
+          const isSelected = selectedOptions.some(opt => opt.value === option.value);
+
+          return (
+            <CommandItem
+              key={option.value || `option-${Math.random()}`}
+              className={`group flex gap-2 items-center w-full hover:bg-muted ${selectedGroup?.multiple && isSelected ? 'bg-muted' : ''
+                }`}
+              onSelect={() => handleOptionToggle(option)}
+            >
+              <DynamicLabel
+                value={option.value || ''}
+                labelRenderer={option.labelRenderer || selectedGroup?.labelRenderer}
+                fallbackLabel={option.label}
+              />
+              {selectedGroup?.multiple && isSelected && (
+                <span className="ml-auto text-xs text-success">✓</span>
+              )}
+            </CommandItem>
+          );
+        })}
+      </div>
+      {selectedGroup?.multiple && (
+        <div className="p-2 border-t">
+          <div className="flex gap-2 justify-end">
+            <Button variant="ghost" size="sm" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button size="sm" onClick={handleApply} disabled={selectedOptions.length === 0}>
+              Apply
+            </Button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/core/components/shadcn/filters/{stringListFilter.tsx → filter/StringListFilter.tsx}

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction, useState } from "react";
-import { InputList } from "../../index";
-import { Button } from "../button";
-import { Filter, FilterGroup } from "./types";
+import { InputList } from "../../../index";
+import { Button } from "../../button";
+import { Filter, FilterGroup } from "../types";
 
 interface StringListFilterProps {
   selectedView: string;
@@ -17,7 +17,7 @@ export default function StringListFilter({
   filterGroups,
 }: StringListFilterProps) {
   const [tags, setTags] = useState<string[]>([]);
-  
+
   const selectedGroup = filterGroups.find(g => g.name === selectedView);
 
   const handleApply = () => {
@@ -38,9 +38,9 @@ export default function StringListFilter({
   return (
     <div className="p-2 space-y-3">
       <div className="space-y-2">
-        <InputList 
-          value={tags} 
-          onChange={setTags} 
+        <InputList
+          value={tags}
+          onChange={setTags}
           placeholder={selectedGroup?.placeholder || `Add ${selectedView}...`}
           autoFocus
         />

package/src/core/components/shadcn/filters/{textFilter.tsx → filter/TextFilter.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
-import { Button } from "../button";
-import { Input } from "../input";
-import { Filter, FilterGroup } from "./types";
+import { Button } from "../../button";
+import { Input } from "../../input";
+import { Filter, FilterGroup } from "../types";
 
 interface TextFilterProps {
   selectedView: string | null;
@@ -50,14 +50,20 @@ export default function TextFilter({
         onKeyDown={(e) => e.key === "Enter" && handleTextFilterAdd()}
         placeholder="Enter text..."
       />
-      <Button
-        size="sm"
-        variant="outline"
-        onClick={handleTextFilterAdd}
-        disabled={!textValue.trim()}
-      >
-        Apply
-      </Button>
+      <div className="mt-2 p-2 border-t">
+        <div className="flex gap-2 justify-end">
+          <Button variant="ghost" size="sm" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            onClick={handleTextFilterAdd}
+            disabled={!textValue.trim()}
+          >
+            Apply
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }