@addsign/moje-agenda-shared-lib 2.0.0 → 2.0.1

package/dist/main.js

@@ -36,10 +36,7 @@ import { Input } from "./components/ui/input.js";
 import { Form, FormControl, FormDescription, FormFieldCN, FormItem, FormLabel, FormMessage, useFormField } from "./components/ui/form.js";
 import { RadioGroupCN, RadioGroupItem } from "./components/ui/radioGroup.js";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/ui/command.js";
-import "react/jsx-runtime";
-import "react";
-import "./components/ui/button.js";
-import "./components/ui/popover.js";
+import "./components/ui/Combobox.js";
 import { C } from "./Calendar-DWT4e7Th.js";
 import { default as default22 } from "./components/ui/DateTimePicker.js";
 import { default as default23 } from "./components/ui/DatePicker.js";

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ui/Combobox.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { Check, ChevronsUpDown, Plus } from "lucide-react";
+import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
 
 import { cn } from "../../utils/utils";
 import { Button } from "./button";
@@ -14,109 +14,162 @@ import {
   CommandList,
 } from "./command";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { IOptionItem } from "../../types";
 
-const predefinedFrameworks = [
-  {
-    value: "next.js",
-    label: "Next.js",
-  },
-  {
-    value: "sveltekit",
-    label: "SvelteKit",
-  },
-  {
-    value: "nuxt.js",
-    label: "Nuxt.js",
-  },
-  {
-    value: "remix",
-    label: "Remix",
-  },
-  {
-    value: "astro",
-    label: "Astro",
-  },
-];
+interface ComboboxProps {
+  value?: string;
+  onChange?: (value: string | undefined) => void;
+  className?: string;
+  placeholder?: string;
+  placeholderSearch?: string;
+  clearable?: boolean;
+  options?: IOptionItem[];
+  allowAddNew?: boolean;
+}
 
-export default function ComboboxDemo() {
-  const [open, setOpen] = React.useState(false);
-  const [value, setValue] = React.useState("");
-  const [inputValue, setInputValue] = React.useState("");
-  const [frameworks, setFrameworks] = React.useState(predefinedFrameworks);
+const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
+  (
+    {
+      value: propValue,
+      onChange: propOnChange,
+      className,
+      placeholder,
+      placeholderSearch = "Vyhledejte položku",
+      clearable = false,
+      options = [],
+      allowAddNew = false,
+    },
+    ref
+  ) => {
+    const [open, setOpen] = React.useState(false);
+    const [value, setValue] = React.useState(propValue || "");
+    const [inputValue, setInputValue] = React.useState("");
+    const [frameworks, setFrameworks] = React.useState<IOptionItem[]>(options);
 
-  const handleSelect = (currentValue: string) => {
-    if (currentValue === "add-custom") {
-      if (
-        inputValue &&
-        !frameworks.some((f) => f.value === inputValue.toLowerCase())
-      ) {
-        const newFramework = {
-          value: inputValue.toLowerCase(),
-          label: inputValue,
-        };
-        setFrameworks([...frameworks, newFramework]);
-        setValue(newFramework.value);
+    React.useEffect(() => {
+      if (propValue !== undefined) {
+        setValue(propValue);
       }
-    } else {
-      setValue(currentValue === value ? "" : currentValue);
-    }
-    setOpen(false);
-  };
+    }, [propValue]);
 
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className="w-[200px] justify-between"
-        >
-          {value
-            ? frameworks.find((framework) => framework.value === value)?.label
-            : "Select framework..."}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
-        <Command>
-          <CommandInput
-            placeholder="Search framework..."
-            className="h-9"
-            value={inputValue}
-            onValueChange={setInputValue}
-          />
-          <CommandList>
-            <CommandEmpty>
-              <Button
-                variant="ghost"
-                className="w-full justify-start"
-                onClick={() => handleSelect("add-custom")}
-              >
-                <Plus className="mr-2 h-4 w-4" />
-                Add "{inputValue}"
-              </Button>
-            </CommandEmpty>
-            <CommandGroup>
-              {frameworks.map((framework) => (
-                <CommandItem
-                  key={framework.value}
-                  value={framework.value}
-                  onSelect={handleSelect}
-                >
-                  {framework.label}
-                  <Check
-                    className={cn(
-                      "ml-auto h-4 w-4",
-                      value === framework.value ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
+    React.useEffect(() => {
+      setFrameworks(options);
+    }, [options]);
+
+    const handleSelect = (currentValue: string) => {
+      if (currentValue === "add-custom") {
+        if (
+          inputValue &&
+          !frameworks.some((f) => f.value === inputValue.toLowerCase())
+        ) {
+          const newFramework = {
+            value: inputValue.toLowerCase(),
+            label: inputValue,
+          };
+
+          setFrameworks([...frameworks, newFramework]);
+          updateValue(newFramework.value);
+        }
+      } else {
+        updateValue(currentValue === value ? "" : currentValue);
+      }
+      setOpen(false);
+    };
+
+    const updateValue = (newValue: string) => {
+      setValue(newValue);
+      propOnChange?.(newValue || undefined);
+    };
+
+    const handleClear = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      updateValue("");
+      setInputValue("");
+      setOpen(false);
+    };
+
+    value;
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <div className="relative w-full">
+          <PopoverTrigger asChild>
+            <Button
+              ref={ref}
+              type="button"
+              variant="outline"
+              role="combobox"
+              aria-expanded={open}
+              className={cn("w-full justify-between", className)}
+            >
+              {value ? (
+                frameworks.find((framework) => framework.value === value)?.label
+              ) : (
+                <div className="text-muted-foreground font-normal">
+                  {placeholder}
+                </div>
+              )}
+              <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50 ml-6" />
+            </Button>
+          </PopoverTrigger>
+          {clearable && value && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="absolute right-6 top-0 h-full px-3 py-2 hover:bg-transparent"
+              onClick={handleClear}
+            >
+              <X className="h-4 w-4 shrink-0 opacity-50 hover:opacity-100" />
+            </Button>
+          )}
+        </div>
+        <PopoverContent className="min-w-[200px]  w-full p-0">
+          <Command>
+            <CommandInput
+              placeholder={placeholderSearch}
+              className="h-9"
+              value={inputValue}
+              onValueChange={setInputValue}
+            />
+            <CommandList>
+              <CommandEmpty>
+                {allowAddNew && (
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start"
+                    onClick={() => handleSelect("add-custom")}
+                  >
+                    <Plus className="mr-2 h-4 w-4" />
+                    Přidat "{inputValue}"
+                  </Button>
+                )}
+              </CommandEmpty>
+
+              <CommandGroup>
+                {frameworks.map((framework) => (
+                  <CommandItem
+                    key={framework.value}
+                    value={framework.value as string}
+                    onSelect={handleSelect}
+                  >
+                    {framework.label}
+                    <Check
+                      className={cn(
+                        "ml-auto h-4 w-4",
+                        value === framework.value ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+);
+
+Combobox.displayName = "Combobox";
+
+export default Combobox;

package/lib/components/ui/command.tsx

@@ -73,7 +73,7 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="py-6 text-center text-sm"
+    className="py-0 text-center text-sm"
     {...props}
   />
 ));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@addsign/moje-agenda-shared-lib",
   "private": false,
-  "version": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",