@addsign/moje-agenda-shared-lib 2.0.3 → 2.0.4

package/lib/components/ui/DatePicker.tsx

@@ -38,6 +38,16 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
 
     const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       setInputValue(event.target.value);
+      const parsedDate = parse(event.target.value, DATE_FORMAT, new Date());
+      if (isValid(parsedDate)) {
+        setDate(parsedDate);
+        onChange?.(parsedDate);
+        setInputValue(format(parsedDate, DATE_FORMAT));
+      } else {
+        setInputValue("");
+        setDate(undefined);
+        onChange?.(undefined);
+      }
     };
 
     const handleInputBlur = () => {
@@ -95,6 +105,7 @@ const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
             <CalendarIcon className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             {clearable && inputValue && (
               <Button
+                type="button"
                 variant="ghost"
                 size="icon"
                 className="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 p-0"

package/lib/components/ui/DateTimePicker.tsx

@@ -19,7 +19,7 @@ const DATE_FORMAT = "dd.MM.yyyy HH:mm";
 
 interface DateTimePickerProps {
   value?: Date;
-  onChange?: (date: Date | undefined) => void;
+  onChange?: (date: Date | undefined | null) => void;
   className?: string;
   placeholder?: string;
   clearable?: boolean;
@@ -30,43 +30,56 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
     { value, onChange, className, clearable = true, placeholder, ...props },
     ref
   ) => {
-    const [dateTime, setDateTime] = React.useState<Date | undefined>(value);
-    const [inputValue, setInputValue] = React.useState<string>("");
+    const [dateTime, setDateTime] = React.useState<Date | null>(value || null);
+    const [inputValue, setInputValue] = React.useState<string | null>("");
 
     useEffect(() => {
       if (value) {
         setDateTime(value);
         setInputValue(format(value, DATE_FORMAT));
       } else {
-        setDateTime(undefined);
+        setDateTime(null);
         setInputValue("");
       }
     }, [value]);
 
     const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      event.stopPropagation(); // Stop bubbling to prevent interference with other components
+
       setInputValue(event.target.value);
+      const parsedDateTime = parse(event.target.value, DATE_FORMAT, new Date());
+
+      if (isValid(parsedDateTime)) {
+        setDateTime(parsedDateTime);
+        onChange?.(parsedDateTime);
+        setInputValue(format(parsedDateTime, DATE_FORMAT));
+      } else {
+        setInputValue("");
+        setDateTime(null);
+        onChange?.(null);
+      }
     };
 
     const handleInputBlur = () => {
       if (inputValue === "") {
-        setDateTime(undefined);
-        onChange?.(undefined);
+        setDateTime(null);
+        onChange?.(null);
         return;
       }
 
-      const parsedDateTime = parse(inputValue, DATE_FORMAT, new Date());
+      const parsedDateTime = parse(inputValue || "", DATE_FORMAT, new Date());
       if (isValid(parsedDateTime)) {
         setDateTime(parsedDateTime);
         onChange?.(parsedDateTime);
         setInputValue(format(parsedDateTime, DATE_FORMAT));
       } else {
         setInputValue("");
-        setDateTime(undefined);
-        onChange?.(undefined);
+        setDateTime(null);
+        onChange?.(null);
       }
     };
 
-    const handleDateSelect = (selectedDate: Date | undefined) => {
+    const handleDateSelect = (selectedDate: Date | undefined | null) => {
       if (selectedDate) {
         const newDateTime = dateTime
           ? set(dateTime, {
@@ -79,9 +92,9 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
         onChange?.(newDateTime);
         setInputValue(format(newDateTime, DATE_FORMAT));
       } else {
-        setDateTime(undefined);
+        setDateTime(null);
         setInputValue("");
-        onChange?.(undefined);
+        onChange?.(null);
       }
     };
 
@@ -102,8 +115,8 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
 
     const handleClear = () => {
       setInputValue("");
-      setDateTime(undefined);
-      onChange?.(undefined);
+      setDateTime(null);
+      onChange?.(null);
     };
 
     const timeOptions = Array.from({ length: 48 }, (_, i) => {
@@ -119,7 +132,7 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
             <Input
               ref={ref}
               type="text"
-              value={inputValue}
+              value={inputValue || ""}
               onChange={handleInputChange}
               onBlur={handleInputBlur}
               placeholder={placeholder}
@@ -132,6 +145,7 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
             <CalendarClockIcon className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             {clearable && inputValue && (
               <Button
+                type="button"
                 variant="ghost"
                 size="icon"
                 className="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 p-0"
@@ -146,7 +160,7 @@ const DateTimePicker = forwardRef<HTMLInputElement, DateTimePickerProps>(
         <PopoverContent className="w-auto p-0" align="start">
           <Calendar
             mode="single"
-            selected={dateTime}
+            selected={dateTime || undefined}
             onSelect={handleDateSelect}
             initialFocus
           />

package/lib/components/ui/input.tsx

@@ -90,6 +90,7 @@ const Input = React.forwardRef<HTMLInputElement, IInputProps>(
         )}
         {!!internalValue && clearable && (
           <Button
+            type="button"
             variant="ghost"
             size="icon"
             className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"

package/lib/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "../../utils/utils";
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-ring placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/lib/main.ts

@@ -59,6 +59,7 @@ export * from "./components/ui/Combobox.tsx";
 export * from "./components/ui/select.tsx";
 export * from "./components/ui/tooltip.tsx";
 export * from "./components/ui/separator.tsx";
+export * from "./components/ui/textarea.tsx";
 export { Button as ButtonCN, buttonVariants } from "./components/ui/button.tsx";
 
 

package/package.json

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